/* ==========================================================================
   Atelier controls — one shared shape language for every storefront control.
   Plates and outlines are full rectangles: a dim champagne hairline frame with
   brighter L-shaped corner marks that extend on hover (echoing the bracket-corner
   icon buttons in the header). Chips/toasts are sharp-cornered with hairlines.
   Loaded last on every page.

   Every selector is prefixed with :root:not(#pf-atelier) so it outranks the
   component stylesheets (including their :hover rules) without !important.
   ========================================================================== */

@property --a-edge {
  syntax: '<color>';
  inherits: false;
  initial-value: rgba(255, 236, 214, 0.18);
}

@property --a-mark {
  syntax: '<color>';
  inherits: false;
  initial-value: rgba(225, 207, 174, 0.7);
}

@property --a-len {
  syntax: '<length>';
  inherits: false;
  initial-value: 7px;
}

@property --a-f1 {
  syntax: '<color>';
  inherits: false;
  initial-value: #161414;
}

@property --a-f2 {
  syntax: '<color>';
  inherits: false;
  initial-value: #0c0b0b;
}

@property --a-tick {
  syntax: '<length>';
  inherits: false;
  initial-value: 6px;
}

/* ---------- Framed surfaces (plates + outlines) ---------- */
:root:not(#pf-atelier) :is(
  .primary-btn:not(.film-spin-link),
  .pf-submit:not(.auth-form *),
  .hw-now,
  .advisor-cta,
  .ghost-btn:not(.film-spin-link),
  .pf-ghost,
  .hwd-add,
  .wizard-cart-btn,
  .checkout-toast-refresh,
  .faq-expand,
  .rc-jump a,
  .pf-chat-wa
) {
  --a-bg:
    linear-gradient(var(--a-mark), var(--a-mark)) left top / var(--a-len) 1px no-repeat border-box,
    linear-gradient(var(--a-mark), var(--a-mark)) left top / 1px var(--a-len) no-repeat border-box,
    linear-gradient(var(--a-mark), var(--a-mark)) right top / var(--a-len) 1px no-repeat border-box,
    linear-gradient(var(--a-mark), var(--a-mark)) right top / 1px var(--a-len) no-repeat border-box,
    linear-gradient(var(--a-mark), var(--a-mark)) left bottom / var(--a-len) 1px no-repeat border-box,
    linear-gradient(var(--a-mark), var(--a-mark)) left bottom / 1px var(--a-len) no-repeat border-box,
    linear-gradient(var(--a-mark), var(--a-mark)) right bottom / var(--a-len) 1px no-repeat border-box,
    linear-gradient(var(--a-mark), var(--a-mark)) right bottom / 1px var(--a-len) no-repeat border-box,
    linear-gradient(var(--a-edge), var(--a-edge)) left top / 100% 1px no-repeat border-box,
    linear-gradient(var(--a-edge), var(--a-edge)) left bottom / 100% 1px no-repeat border-box,
    linear-gradient(var(--a-edge), var(--a-edge)) left top / 1px 100% no-repeat border-box,
    linear-gradient(var(--a-edge), var(--a-edge)) right top / 1px 100% no-repeat border-box,
    linear-gradient(180deg, var(--a-f1), var(--a-f2)) border-box;
  border-color: transparent;
  border-radius: 0;
  background: var(--a-bg);
  clip-path: none;
  box-shadow: none;
  text-shadow: none;
  filter: none;
  transition:
    --a-edge 0.45s ease,
    --a-mark 0.45s ease,
    --a-len 0.5s var(--ease-out),
    --a-f1 0.5s ease,
    --a-f2 0.5s ease,
    color 0.35s ease,
    opacity 0.3s ease,
    transform 0.35s var(--ease-out);
}

:root:not(#pf-atelier) :is(
  .primary-btn:not(.film-spin-link),
  .pf-submit:not(.auth-form *),
  .hw-now,
  .advisor-cta,
  .ghost-btn:not(.film-spin-link),
  .pf-ghost,
  .hwd-add,
  .wizard-cart-btn,
  .checkout-toast-refresh,
  .faq-expand,
  .rc-jump a,
  .pf-chat-wa
):focus-visible {
  outline: 1px solid rgba(255, 220, 185, 0.7);
  outline-offset: -5px;
}

/* Plate: warm charcoal face, champagne lettering, bright corner marks on a dim frame */
:root:not(#pf-atelier) :is(.primary-btn:not(.film-spin-link), .pf-submit:not(.auth-form *), .hw-now, .advisor-cta) {
  --a-edge: rgba(225, 207, 174, 0.26);
  --a-mark: rgba(239, 224, 196, 0.95);
  --a-f1: #302c28;
  --a-f2: #191715;
  color: #e9dcc2;
  font-weight: 600;
  letter-spacing: 0.18em;
}

:root:not(#pf-atelier) :is(.primary-btn:not(.film-spin-link), .pf-submit:not(.auth-form *)):is(:hover, :focus-visible):not(:disabled) {
  --a-edge: rgba(239, 221, 188, 0.5);
  --a-mark: #fbf1dd;
  --a-len: 14px;
  --a-f1: #3b352e;
  --a-f2: #26211c;
  color: #f7ecd7;
  transform: none;
  outline-color: #e1cfae;
}

:root:not(#pf-atelier) :is(.primary-btn, .pf-submit:not(.auth-form *)):active:not(:disabled) {
  transform: translateY(1px);
}

:root:not(#pf-atelier) .primary-btn::before {
  background: linear-gradient(110deg, transparent 32%, rgba(247, 236, 215, 0.14) 50%, transparent 68%);
}

:root:not(#pf-atelier) .pf-submit:not(.auth-form *).is-waiting,
:root:not(#pf-atelier) :is(.primary-btn, .pf-submit:not(.auth-form *)):disabled {
  --a-edge: rgba(225, 207, 174, 0.1);
  --a-mark: rgba(225, 207, 174, 0.3);
  --a-f1: #25221f;
  --a-f2: #191715;
  color: rgba(233, 220, 194, 0.5);
}

/* Header CTA: a slimmer plate */
:root:not(#pf-atelier) .nav-actions .primary-btn {
  --a-len: 6px;
  border-radius: 0;
  letter-spacing: 0.16em;
}

/* Buy-now plates: a divided warm charcoal arrow cell floods the plate on hover */
:root:not(#pf-atelier) :is(.hw-now, .advisor-cta) {
  padding-right: 0;
  transform: none;
}

:root:not(#pf-atelier) :is(.hw-now, .advisor-cta)::before {
  background:
    linear-gradient(180deg, rgba(247, 236, 215, 0.1), transparent 60%),
    linear-gradient(100deg, #302c28 0%, #3b352e 60%, #443c32 100%);
  inset: 1px;
  clip-path: inset(0 0 0 calc(100% - var(--knob) - 14px));
  transition: clip-path 0.65s var(--ease-out);
}

:root:not(#pf-atelier) :is(.hw-now, .advisor-cta):is(:hover, :focus-visible)::before {
  clip-path: inset(0);
}

:root:not(#pf-atelier) :is(.hw-now, .advisor-cta):is(:hover, :focus-visible) {
  --a-edge: rgba(239, 221, 188, 0.5);
  --a-mark: #fbf1dd;
  --a-len: 14px;
  color: #f7ecd7;
  outline-color: #e1cfae;
  box-shadow: none;
}

:root:not(#pf-atelier) :is(.hw-knob, .advisor-knob) {
  align-self: stretch;
  width: calc(var(--knob) + 14px);
  height: auto;
  border-left: 1px solid rgba(225, 207, 174, 0.2);
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #e9dcc2;
}

:root:not(#pf-atelier) :is(.hw-now, .advisor-cta):hover :is(.hw-knob, .advisor-knob) {
  background: none;
  box-shadow: none;
  color: #f7ecd7;
}

:root:not(#pf-atelier) :is(.hw-now, .advisor-cta):hover :is(.hw-knob, .advisor-knob) svg {
  animation: atelier-nudge 0.9s var(--ease-out) infinite;
}

@keyframes atelier-nudge {
  0% { transform: translateX(0); opacity: 1; }
  45% { transform: translateX(8px); opacity: 0; }
  46% { transform: translateX(-8px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

/* Outline: obsidian panel, quieter frame; corner marks brighten and extend on hover */
:root:not(#pf-atelier) :is(.ghost-btn:not(.film-spin-link), .pf-ghost, .hwd-add, .wizard-cart-btn, .checkout-toast-refresh, .faq-expand, .rc-jump a, .pf-chat-wa) {
  --a-edge: rgba(255, 236, 214, 0.12);
  --a-mark: rgba(214, 184, 140, 0.65);
  --a-f1: #161414;
  --a-f2: #0d0c0b;
  color: #e2d8c9;
}

:root:not(#pf-atelier) :is(.faq-expand, .rc-jump a, .pf-chat-wa, .checkout-toast-refresh) {
  --a-len: 5px;
}

:root:not(#pf-atelier) :is(.ghost-btn:not(.film-spin-link), .pf-ghost, .hwd-add, .wizard-cart-btn, .checkout-toast-refresh, .faq-expand, .rc-jump a, .pf-chat-wa):is(:hover, :focus-visible):not(:disabled) {
  --a-edge: rgba(225, 207, 174, 0.3);
  --a-mark: #f1e2c4;
  --a-len: 12px;
  --a-f1: #1d1815;
  --a-f2: #110e0c;
  color: #fff4e6;
  transform: none;
}

:root:not(#pf-atelier) .ghost-btn.danger {
  --a-edge: rgba(255, 120, 100, 0.2);
  --a-mark: rgba(255, 140, 120, 0.7);
  color: #ffb4a8;
}

:root:not(#pf-atelier) .ghost-btn.danger:is(:hover, :focus-visible):not(:disabled) {
  --a-edge: rgba(255, 120, 100, 0.4);
  --a-mark: #ffd2ca;
  --a-f1: #24130f;
  --a-f2: #170c0a;
  color: #ffd2ca;
}

:root:not(#pf-atelier) .hwd-add {
  letter-spacing: 0.12em;
}

:root:not(#pf-atelier) .hwd-add[data-state="added"] {
  --a-edge: rgba(95, 224, 163, 0.3);
  --a-mark: rgba(120, 236, 180, 0.9);
  --a-f1: #12241b;
  --a-f2: #0b1611;
}

/* ---------- Bracket-corner icon buttons ---------- */
:root:not(#pf-atelier) :is(
  .close-btn,
  .hwd-close,
  .hwd-nav button,
  .hw-add,
  .case-viewer-close,
  .case-gallery-nav,
  .rc-close,
  .rc-x,
  .pf-chat-close,
  .faq-search-clear,
  .w-x,
  .wizard-back-icon,
  .s-tile-arrow,
  .checkout-toast-close
) {
  --a-tc: rgba(214, 184, 140, 0.5);
  border-color: transparent;
  border-radius: 0;
  background:
    linear-gradient(var(--a-tc), var(--a-tc)) left top / var(--a-tick) 1px no-repeat,
    linear-gradient(var(--a-tc), var(--a-tc)) left top / 1px var(--a-tick) no-repeat,
    linear-gradient(var(--a-tc), var(--a-tc)) right top / var(--a-tick) 1px no-repeat,
    linear-gradient(var(--a-tc), var(--a-tc)) right top / 1px var(--a-tick) no-repeat,
    linear-gradient(var(--a-tc), var(--a-tc)) left bottom / var(--a-tick) 1px no-repeat,
    linear-gradient(var(--a-tc), var(--a-tc)) left bottom / 1px var(--a-tick) no-repeat,
    linear-gradient(var(--a-tc), var(--a-tc)) right bottom / var(--a-tick) 1px no-repeat,
    linear-gradient(var(--a-tc), var(--a-tc)) right bottom / 1px var(--a-tick) no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.025));
  background-origin: border-box;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045);
  color: #e6d7bd;
  transition:
    --a-tick 0.45s var(--ease-out),
    color 0.3s ease,
    background-color 0.3s ease,
    transform 0.45s var(--ease-out);
}

:root:not(#pf-atelier) :is(
  .close-btn,
  .hwd-close,
  .hwd-nav button,
  .hw-add,
  .case-viewer-close,
  .case-gallery-nav,
  .rc-close,
  .rc-x,
  .pf-chat-close,
  .faq-search-clear,
  .w-x,
  .s-tile-arrow,
  .checkout-toast-close
):is(:hover, :focus-visible),
:root:not(#pf-atelier) .wizard-back-btn:is(:hover, :focus-visible):not(:disabled) .wizard-back-icon,
:root:not(#pf-atelier) .s-tile:hover .s-tile-arrow {
  --a-tick: 11px;
  --a-tc: #f1e2c4;
  border-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(214, 184, 140, 0.12);
  color: #fff4e0;
  outline: none;
}

/* Close buttons keep their quarter-turn, now as a square */
:root:not(#pf-atelier) :is(.hwd-close, .close-btn, .case-viewer-close, .rc-close, .pf-chat-close):hover {
  transform: rotate(90deg);
}

:root:not(#pf-atelier) .hwd-nav button {
  box-shadow: none;
}

:root:not(#pf-atelier) .hw-add[data-state="added"] {
  --a-tc: rgba(95, 224, 163, 0.8);
  box-shadow: inset 0 0 0 1px rgba(95, 224, 163, 0.25);
  color: #8af0c0;
}

/* Tiny "remove photo" dot on recycle thumbnails */
:root:not(#pf-atelier) .rc-thumb button {
  border-radius: 0;
}

/* ---------- Steppers + segmented controls ---------- */
:root:not(#pf-atelier) :is(.pf-stepper, .pf-seg, .s-subnav-inner, .hw-search, .hw-sort, .hw-groups, .hw-groups button, .hw-search kbd, .hw-empty button, .hw-tabs button, .faq-search) {
  border-radius: 0;
}

:root:not(#pf-atelier) :is(.pf-stepper button, .pf-seg button, .s-subnav a, .rc-chips button, .spin-finishes button) {
  position: relative;
  border-radius: 0;
}

:root:not(#pf-atelier) :is(.pf-seg button[aria-pressed="true"], .rc-chips button[aria-pressed="true"], .spin-finishes button[aria-pressed="true"], .s-subnav a.is-active) {
  box-shadow: inset 0 0 0 1px rgba(214, 184, 140, 0.3), inset 0 -2px 0 #d6b88c;
}

/* ---------- Chips, tags, badges ---------- */
:root:not(#pf-atelier) :is(
  .hw-tag,
  .hw-chip,
  .hw-peek,
  .hwd-hint,
  .hwd-nav,
  .rc-grade,
  .rc-policy,
  .rc-mine em,
  .s-kicker,
  .s-chip,
  .s-chip-icon,
  .tag,
  .pill,
  .hero-badge,
  .tier-badge,
  .w-figure-credit,
  .spin-hint,
  .spin-status p,
  .pf-chat-badge,
  .pf-chat-launcher,
  .contact-quick-item,
  .w-check-box,
  .checkout-toast-icon
) {
  border-radius: 0;
}

/* Status dots inside chips become small diamonds */
:root:not(#pf-atelier) .hw-chip i,
:root:not(#pf-atelier) .rc-policy::before {
  border-radius: 0;
  transform: rotate(45deg);
}

/* ---------- Toasts + notices ---------- */
:root:not(#pf-atelier) :is(.pf-toast, .checkout-result, .contact-panel #contactStatus) {
  border-radius: 0;
  box-shadow:
    inset 2px 0 0 var(--a-accent, #d6b88c),
    0 24px 60px -22px rgba(0, 0, 0, 0.85);
}

:root:not(#pf-atelier) .pf-toast[data-type="success"],
:root:not(#pf-atelier) .checkout-result[data-status="paid"] {
  --a-accent: #5fe0a3;
}

:root:not(#pf-atelier) .pf-toast[data-type="error"],
:root:not(#pf-atelier) .checkout-result:is([data-status="error"], [data-status="failed"]) {
  --a-accent: #ff6d5c;
}

:root:not(#pf-atelier) .pf-toast {
  padding-left: 14px;
  border-color: rgba(255, 236, 214, 0.12);
  background:
    linear-gradient(90deg, rgba(214, 184, 140, 0.08), transparent 40%),
    rgba(12, 11, 11, 0.9);
}

:root:not(#pf-atelier) .pf-toast-icon {
  border-radius: 0;
  background: none;
  box-shadow: inset 0 0 0 1px currentColor;
  transform: rotate(45deg) scale(0.78);
}

:root:not(#pf-atelier) .pf-toast-icon svg {
  transform: rotate(-45deg) scale(1.15);
}

:root:not(#pf-atelier) .pf-toast-action {
  color: #e8cfa6;
  letter-spacing: 0.08em;
}

:root:not(#pf-atelier) .pf-toast-action:hover {
  color: #fff1dc;
}

/* ---------- Language switch outside the header (wizard): same "中 | EN" bracket switch ---------- */
:root:not(#pf-atelier) .language-toggle:not(.site-header *) {
  --a-tc: rgba(214, 184, 140, 0.5);
  position: relative;
  display: inline-block;
  width: 88px;
  min-height: 40px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(var(--a-tc), var(--a-tc)) left top / var(--a-tick) 1px no-repeat,
    linear-gradient(var(--a-tc), var(--a-tc)) left top / 1px var(--a-tick) no-repeat,
    linear-gradient(var(--a-tc), var(--a-tc)) right top / var(--a-tick) 1px no-repeat,
    linear-gradient(var(--a-tc), var(--a-tc)) right top / 1px var(--a-tick) no-repeat,
    linear-gradient(var(--a-tc), var(--a-tc)) left bottom / var(--a-tick) 1px no-repeat,
    linear-gradient(var(--a-tc), var(--a-tc)) left bottom / 1px var(--a-tick) no-repeat,
    linear-gradient(var(--a-tc), var(--a-tc)) right bottom / var(--a-tick) 1px no-repeat,
    linear-gradient(var(--a-tc), var(--a-tc)) right bottom / 1px var(--a-tick) no-repeat;
  color: transparent;
  white-space: nowrap;
  text-indent: 200%;
  transition: --a-tick 0.45s var(--ease-out);
}

:root:not(#pf-atelier) .language-toggle:not(.site-header *):is(:hover, :focus-visible) {
  --a-tick: 11px;
  --a-tc: #f1e2c4;
  border-color: transparent;
  background-color: transparent;
  outline: none;
}

:root:not(#pf-atelier) .language-toggle:not(.site-header *)::before,
:root:not(#pf-atelier) .language-toggle:not(.site-header *)::after {
  display: grid;
  place-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  height: auto;
  padding: 0 0 0 0.16em;
  text-indent: 0;
  background: none;
  -webkit-mask: none;
  mask: none;
  opacity: 1;
  font: 500 0.76rem/1 var(--font);
  letter-spacing: 0.16em;
  transition: color 0.4s ease;
}

:root:not(#pf-atelier) .language-toggle:not(.site-header *)::before {
  content: '中';
  left: 2px;
  width: 38px;
  color: #f1e2c4;
}

:root:not(#pf-atelier) .language-toggle:not(.site-header *)::after {
  content: 'EN';
  right: 2px;
  width: 46px;
  color: rgba(226, 219, 205, 0.38);
  background: linear-gradient(rgba(214, 184, 140, 0.35), rgba(214, 184, 140, 0.35)) left center / 1px 10px no-repeat;
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

:root:not(#pf-atelier) .language-toggle[data-current-lang="en"]:not(.site-header *)::before {
  color: rgba(226, 219, 205, 0.38);
}

:root:not(#pf-atelier) .language-toggle[data-current-lang="en"]:not(.site-header *)::after {
  color: #f1e2c4;
}

/* ---------- Hardware detail drawer frames the controls, so it goes square too ---------- */
:root:not(#pf-atelier) :is(.hwd, .hwd-stage, .hwd-note) {
  border-radius: 0;
}

/* ---------- Media play button ---------- */
:root:not(#pf-atelier) .film-toggle svg,
:root:not(#pf-atelier) .film-toggle::before {
  border-radius: 0;
}

/* ---------- Mobile wizard footer ---------- */
:root:not(#pf-atelier) .wizard-footer :is(.wizard-cart-btn, .primary-btn) {
  border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
  :root:not(#pf-atelier) :is(.primary-btn, .pf-submit, .hw-now, .advisor-cta, .ghost-btn, .pf-ghost, .hwd-add, .wizard-cart-btn, .close-btn, .hwd-close, .hw-add, .case-viewer-close, .case-gallery-nav, .rc-close, .pf-chat-close),
  :root:not(#pf-atelier) :is(.hw-now, .advisor-cta)::before,
  :root:not(#pf-atelier) :is(.hw-knob, .advisor-knob) svg {
    transition: none !important;
    animation: none !important;
  }
}