/* Quick Acquire — intentionally quieter than the artwork. */
/* Universal tempered-glass treatment for the wave control.
   Light mode uses a warm smoke; dark mode uses a cooler graphite.
   Both keep enough depth behind the fixed ivory finial without becoming solid. */
:root{
  --qa-glass-base:rgba(67,62,55,.42);
  --qa-glass-deep:rgba(35,34,32,.50);
  --qa-glass-highlight:rgba(255,250,240,.13);
  --qa-glass-edge:rgba(255,255,255,.20);
  --qa-glass-shadow:rgba(32,27,20,.28);
  --qa-glass-hover-base:rgba(78,72,64,.46);
  --qa-glass-hover-deep:rgba(39,38,35,.54);
  --qa-glass-blur:7px;
}
:root[data-theme="dark"]{
  --qa-glass-base:rgba(44,48,58,.46);
  --qa-glass-deep:rgba(18,21,28,.60);
  --qa-glass-highlight:rgba(231,236,255,.10);
  --qa-glass-edge:rgba(236,240,255,.18);
  --qa-glass-shadow:rgba(0,0,0,.46);
  --qa-glass-hover-base:rgba(53,58,69,.50);
  --qa-glass-hover-deep:rgba(21,24,32,.64);
  --qa-glass-blur:7px;
}

#studio-shop .card-wrap{
  position:relative;
  container-type:inline-size;
  width:100%;
  max-width:180px;
  justify-self:center;
  min-width:0;
}
#studio-shop .card-wrap>.card{
  width:100%;
  max-width:none;
}
#studio-shop .card-wrap.lead{
  grid-column:1/-1;
  width:min(100%,760px);
  max-width:760px;
}
#studio-shop .card-wrap.lead>.card{
  width:100%;
  max-width:none;
}
.qa-trigger{
  position:absolute;
  z-index:6;
  right:-1px;
  top:var(--qa-top,0);
  width:50px;
  height:44px;
  padding:0;
  border:0;
  background:transparent;
  color:#F1E7CF;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .9s cubic-bezier(.2,.6,.2,1);
}
.qa-face{
  --qa-wave-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 44'%3E%3Cpath d='M50 0V44H0C7 43 12 40 16 35C22 29 25 21 31 15C36 9 42 4 50 0Z' fill='black'/%3E%3C/svg%3E");
  position:absolute;
  inset:0;
  display:block;
  overflow:visible;
  border:0;
  background:transparent;
  isolation:isolate;
}
.qa-face::before,
.qa-face::after{
  content:"";
  position:absolute;
  z-index:0;
  inset:-1px;
  pointer-events:none;
  -webkit-mask:var(--qa-wave-mask) center/100% 100% no-repeat;
  mask:var(--qa-wave-mask) center/100% 100% no-repeat;
}
.qa-face::before{
  background:
    linear-gradient(138deg,var(--qa-glass-base) 0%,var(--qa-glass-deep) 76%);
  box-shadow:
    inset 1px 1px 0 var(--qa-glass-edge),
    0 7px 17px -13px var(--qa-glass-shadow);
  -webkit-backdrop-filter:blur(var(--qa-glass-blur)) saturate(92%) brightness(.98);
  backdrop-filter:blur(var(--qa-glass-blur)) saturate(92%) brightness(.98);
  transition:background .24s ease,box-shadow .24s ease;
}
.qa-face::after{
  background:
    linear-gradient(145deg,var(--qa-glass-highlight),transparent 42%);
  opacity:.72;
  transition:opacity .24s ease;
}
.qa-wave{
  position:absolute;
  z-index:1;
  left:-1px;
  top:-1px;
  width:calc(100% + 2px);
  height:calc(100% + 2px);
  display:block;
  overflow:visible;
  pointer-events:none;
}
.qa-wave-base{
  fill:transparent;
}
.qa-wave-edge{
  fill:none;
  stroke:var(--qa-glass-edge);
  stroke-width:.72;
  vector-effect:non-scaling-stroke;
  transition:stroke .22s ease;
}
.qa-finial{
  position:absolute;
  z-index:2;
  right:8px;
  bottom:7px;
  width:9px;
  height:20px;
  display:block;
  fill:currentColor;
  opacity:.98;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.42));
  transition:opacity .2s ease,filter .22s ease,transform .22s ease;
}
.qa-trigger:hover .qa-face::before{
  background:
    linear-gradient(138deg,var(--qa-glass-hover-base) 0%,var(--qa-glass-hover-deep) 76%);
  box-shadow:
    inset 1px 1px 0 color-mix(in srgb,var(--qa-glass-edge) 86%,white 14%),
    0 8px 18px -13px var(--qa-glass-shadow);
}
.qa-trigger:hover .qa-face::after{opacity:.92}
.qa-trigger:hover .qa-wave-edge{stroke:color-mix(in srgb,var(--qa-glass-edge) 84%,white 16%)}
.qa-trigger:hover .qa-finial{
  opacity:1;
  transform:translateY(-.5px);
  filter:
    brightness(1.06)
    drop-shadow(0 0 3px rgba(241,231,207,.18))
    drop-shadow(0 1px 2px rgba(0,0,0,.38));
}
.qa-trigger:focus-visible{outline:none}
.qa-trigger:focus-visible .qa-face::before{
  background:
    linear-gradient(138deg,var(--qa-glass-hover-base) 0%,var(--qa-glass-hover-deep) 76%);
  box-shadow:
    inset 1px 1px 0 rgba(241,231,207,.34),
    0 8px 18px -13px var(--qa-glass-shadow);
}
.qa-trigger:focus-visible .qa-face::after{opacity:.96}
.qa-trigger:focus-visible .qa-wave-edge{stroke:rgba(241,231,207,.36)}
.qa-trigger:focus-visible .qa-finial{
  opacity:1;
  filter:
    brightness(1.08)
    drop-shadow(0 0 3px rgba(241,231,207,.20))
    drop-shadow(0 1px 2px rgba(0,0,0,.38));
}
.qa-trigger:active .qa-face::before{
  background:
    linear-gradient(138deg,var(--qa-glass-deep) 0%,color-mix(in srgb,var(--qa-glass-deep) 88%,black 12%) 76%);
}
#studio-shop .card-wrap:hover>.qa-trigger{transform:translateY(-3px)}
@media(prefers-reduced-motion:reduce){
  #studio-shop .card-wrap:hover>.qa-trigger{transform:none}
  .qa-trigger{transition:none}
}

@media(max-width:600px){
  .qa-trigger{width:46px;height:42px}
  .qa-finial{right:7px;bottom:6px;width:8px;height:19px}
}


.qa-dialog{
  width:min(470px,100vw);
  height:100dvh;
  max-height:100dvh;
  margin:0 0 0 auto;
  padding:0;
  border:0;
  color:var(--ink);
  background:var(--solid);
  box-shadow:-28px 0 70px -45px rgba(0,0,0,.6);
  overflow:hidden;
}
.qa-dialog::backdrop{
  background:rgba(7,12,10,.38);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}
.qa-shell{
  height:100%;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
}
.qa-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:62px;
  padding:.8rem 1rem;
  border-bottom:1px solid var(--line);
}
.qa-head .eyebrow{margin:0}
.qa-close{
  width:44px;height:44px;border:0;background:none;color:var(--ink);
  display:grid;place-items:center;cursor:pointer;font:300 1.75rem/1 system-ui,sans-serif;
}
.qa-body{
  overflow:auto;
  padding:1rem 1.15rem calc(1.25rem + env(safe-area-inset-bottom));
  display:grid;
  gap:1rem;
  align-content:start;
}
.qa-product{
  display:grid;
  grid-template-columns:84px minmax(0,1fr);
  gap:1rem;
  align-items:center;
  padding-bottom:1rem;
  border-bottom:1px solid var(--line);
}
.qa-thumb{
  width:84px;height:104px;overflow:hidden;background:var(--ivory-deep);
  border:1px solid var(--line);
}
.qa-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.qa-product-copy{display:grid;gap:.28rem;min-width:0}
.qa-product-copy h2{font-size:1.35rem;line-height:1.08;font-weight:400}
.qa-product-copy p{font-size:.88rem;color:var(--earth);line-height:1.45}
.qa-price{font-size:1.28rem;color:var(--midnight);font-variant-numeric:tabular-nums}
.qa-options{display:grid;gap:1rem}
.qa-opt{display:grid;gap:.48rem}
.qa-label{
  display:flex;justify-content:space-between;gap:.8rem;align-items:baseline;
  font-size:.67rem;letter-spacing:.16em;text-transform:uppercase;color:var(--earth);font-weight:500
}
.qa-label .qa-picked{font-size:.82rem;letter-spacing:0;text-transform:none;color:var(--ink);text-align:right}
.qa-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.qa-choice{
  min-height:48px;padding:.62rem .72rem;text-align:left;border:1px solid var(--line);
  border-radius:7px;background:var(--solid);color:var(--ink);font:inherit;font-size:.9rem;cursor:pointer
}
.qa-choice small{display:block;margin-top:.12rem;color:var(--earth);font-size:.72rem;line-height:1.25}
.qa-choice[aria-pressed="true"]{border-color:var(--green);background:var(--green-tint);color:var(--green)}
.qa-choice[aria-pressed="true"] small{color:var(--green)}
.qa-qty-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.qa-qty-label{font-size:.67rem;letter-spacing:.16em;text-transform:uppercase;color:var(--earth);font-weight:500}
.qa-qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:7px;background:var(--solid)}
.qa-qty button{width:44px;height:44px;border:0;background:none;color:var(--ink);font:inherit;font-size:1.2rem;cursor:pointer}
.qa-qty output{min-width:42px;text-align:center;font-variant-numeric:tabular-nums}
.qa-actions{
  position:sticky;
  bottom:calc(-1rem - env(safe-area-inset-bottom));
  display:grid;
  gap:.6rem;
  padding:1rem 0 calc(.15rem + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,transparent,var(--solid) 18%,var(--solid));
}
.qa-add{width:100%;min-height:50px}
.qa-add.added{background:var(--huruf-cta);border-color:var(--huruf-cta);color:var(--huruf-cta-ink)}
.qa-detail{
  min-height:44px;display:grid;place-items:center;text-align:center;
  font-size:.84rem;color:var(--earth);text-decoration:underline;text-underline-offset:.2em
}
.qa-status{min-height:1.2em;text-align:center;color:var(--green);font-size:.8rem}
.qa-note{font-size:.8rem;color:var(--earth);line-height:1.45;text-align:center}

@media(max-width:760px){
  #studio-shop .card-wrap{max-width:150px}
}
@media(max-width:600px){
  #studio-shop .card-wrap{max-width:145px}
  .qa-dialog{
    width:100%;
    height:auto;
    max-height:min(88dvh,760px);
    margin:auto 0 0;
    border-radius:16px 16px 0 0;
    box-shadow:0 -24px 70px -46px rgba(0,0,0,.7);
  }
  .qa-shell{max-height:min(88dvh,760px)}
  .qa-head{min-height:58px;padding:.6rem .9rem}
  .qa-body{padding:.9rem 1rem calc(1rem + env(safe-area-inset-bottom))}
  .qa-product{grid-template-columns:72px minmax(0,1fr);gap:.8rem}
  .qa-thumb{width:72px;height:88px}
  .qa-product-copy h2{font-size:1.18rem}
  .qa-choices{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:360px){
  #studio-shop .card-wrap{max-width:132px}
  .qa-choices{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:no-preference){
  .qa-dialog[open]{animation:qa-enter .24s cubic-bezier(.2,.7,.2,1)}
  @keyframes qa-enter{from{transform:translateX(16px);opacity:.92}to{transform:none;opacity:1}}
  @media(max-width:600px){@keyframes qa-enter{from{transform:translateY(18px);opacity:.92}to{transform:none;opacity:1}}}
}

/* Solid chrome override: the quick-acquire control is an interface object, not glass. */
:root{
  --qa-solid-a:#303A44;
  --qa-solid-b:#151B22;
  --qa-solid-edge:#8A9AA8;
  --qa-solid-highlight:#D9E4EC;
}
:root[data-theme="dark"]{
  --qa-solid-a:#252D37;
  --qa-solid-b:#0D1219;
  --qa-solid-edge:#6E8192;
  --qa-solid-highlight:#AFC8DA;
}
.qa-face::before{
  background:linear-gradient(138deg,var(--qa-solid-a) 0%,var(--qa-solid-b) 76%)!important;
  border:0;
  box-shadow:inset 1px 1px 0 color-mix(in srgb,var(--qa-solid-highlight) 48%,transparent),0 9px 18px -14px rgba(4,10,16,.72)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
.qa-face::after{
  background:linear-gradient(145deg,color-mix(in srgb,var(--qa-solid-highlight) 28%,transparent),transparent 44%)!important;
}
.qa-wave-edge{stroke:var(--qa-solid-edge)!important}
.qa-trigger:hover .qa-face::before,
.qa-trigger:focus-visible .qa-face::before{
  background:linear-gradient(138deg,#394652 0%,#19212A 76%)!important;
}


/* Deep-pass light material override */
:root:not([data-theme="dark"]){
  --qa-solid-a:#FBFAF6;
  --qa-solid-b:#DDE4E2;
  --qa-solid-edge:#879A96;
  --qa-solid-highlight:#FFFFFF;
}
:root:not([data-theme="dark"]) .qa-face::before{
  background:linear-gradient(145deg,#FBFAF6 0%,#E2E8E5 76%)!important;
  border:1px solid #D1D5D3!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 12px 28px -22px rgba(29,43,52,.30)!important;
}
:root:not([data-theme="dark"]) .qa-face::after{
  background:linear-gradient(145deg,rgba(255,255,255,.72),transparent 46%)!important;
}
:root:not([data-theme="dark"]) .qa-trigger:hover .qa-face::before,
:root:not([data-theme="dark"]) .qa-trigger:focus-visible .qa-face::before{
  background:linear-gradient(145deg,#FFFFFF 0%,#D8E2DF 76%)!important;
  border-color:#879A96!important;
}
.qa-dialog{
  border-radius:24px 0 0 24px;
  box-shadow:-8px 0 24px rgba(0,0,0,.05),-34px 0 86px -54px rgba(0,0,0,.45);
}
.qa-thumb{border-radius:12px}
.qa-choice,.qa-qty{border-radius:12px}
.qa-choice{transition:transform .18s cubic-bezier(.16,1,.3,1),border-color .3s,background .3s,box-shadow .3s}
.qa-choice:hover{transform:translateY(-1px);box-shadow:0 12px 28px -24px rgba(29,43,52,.28)}
.qa-choice[aria-pressed="true"]{box-shadow:0 12px 28px -24px rgba(29,43,52,.34)}
@media(max-width:600px){
  .qa-dialog{border-radius:24px 24px 0 0}
}


/* QUICK ACQUIRE · TACTILE LIFT PASS */
.qa-trigger{
  transform-origin:bottom right;
  transition:
    transform 460ms cubic-bezier(.16,1,.3,1),
    filter 460ms cubic-bezier(.16,1,.3,1)!important;
}
.qa-face::before{
  transition:
    background 460ms cubic-bezier(.16,1,.3,1),
    box-shadow 460ms cubic-bezier(.16,1,.3,1),
    border-color 460ms cubic-bezier(.16,1,.3,1)!important;
}
.qa-finial{
  transition:
    transform 460ms cubic-bezier(.16,1,.3,1),
    filter 460ms cubic-bezier(.16,1,.3,1),
    opacity 300ms ease!important;
}

@media(hover:hover) and (pointer:fine){
  #studio-shop .card-wrap:hover>.qa-trigger,
  .qa-trigger:hover,
  .qa-trigger:focus-visible{
    transform:translate3d(0,-2px,0) scale(1.025)!important;
    transition-duration:240ms!important;
  }
  #studio-shop .card-wrap:hover>.qa-trigger .qa-face::before,
  .qa-trigger:hover .qa-face::before,
  .qa-trigger:focus-visible .qa-face::before{
    box-shadow:
      inset 1px 1px 0 color-mix(in srgb,var(--qa-solid-highlight) 56%,transparent),
      0 4px 10px rgba(10,20,28,.10),
      0 18px 34px -20px rgba(10,20,28,.32)!important;
    transition-duration:240ms!important;
  }
  .qa-trigger:hover .qa-finial,
  .qa-trigger:focus-visible .qa-finial{
    transform:translateY(-1px) scale(1.035)!important;
  }
}
.qa-trigger:active{
  transform:translate3d(0,0,0) scale(.97)!important;
  transition-duration:110ms!important;
}
.qa-trigger:active .qa-face::before{
  box-shadow:
    inset 1px 1px 0 color-mix(in srgb,var(--qa-solid-highlight) 42%,transparent),
    0 5px 12px -10px rgba(10,20,28,.28)!important;
}
@media(prefers-reduced-motion:reduce){
  .qa-trigger,.qa-face::before,.qa-finial{
    transition-duration:.01ms!important;
  }
  #studio-shop .card-wrap:hover>.qa-trigger,
  .qa-trigger:hover,
  .qa-trigger:focus-visible,
  .qa-trigger:active{
    transform:none!important;
  }
}