/* ============================================================================
   ALPHA+ — LIGHT / LUXURY
   ----------------------------------------------------------------------------
   Principles, in the order they matter:

   1. THE PAGE IS THE PHOTOGRAPH. The vials are lit on a warm off-white measured
      at rgb(234,229,226) across the set; the page is set to exactly that. No
      wells, no cards, no borders — nothing draws a rectangle around a product.
      A vial simply sits on the page.

   2. CONTRAST COMES FROM THE PRODUCT. Every vial has a black label and a gold
      cap. Nine of those do all the visual work, so the interface stays quiet.

   3. HAIRLINES, NEVER BOXES. Structure is drawn with 1px rules at low opacity
      and with space. Nothing is outlined that can be separated by air instead.

   4. TYPE CARRIES THE LUXURY. A wide gap between display and micro sizes,
      Playfair at negative tracking for names, DM Mono at .28em for labels.
      Restraint everywhere else.
   ========================================================================== */

:root{
  --paper:#EAE5E2;          /* = the photo backdrop, exactly */
  --paper-lift:#F2EEEB;     /* drawers, dialogs */
  --ink:#17150F;
  --ink-2:#4C4740;
  --ink-3:#847D72;
  --hair:rgba(23,21,15,.10);
  --hair-2:rgba(23,21,15,.18);
  --gold:#8A6D2C;           /* type-safe gold */
  --cap:#C9A44C;            /* the vial cap */
  --cap-lt:#DCBE72;
  --cap-dp:#A9862F;
  --dark:#141210;
  --e:cubic-bezier(.22,1,.36,1);
  --gut:clamp(20px,5vw,60px);
}

html{background:var(--paper)}
body{background:var(--paper)!important;color:var(--ink-2)!important;
  font-family:'DM Sans',system-ui,sans-serif;font-weight:400;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--cap);color:#17150F}
:focus-visible{outline:1px solid var(--gold);outline-offset:3px}

/* ---------- nav ---------- */
.shop-nav{
  background:color-mix(in srgb,var(--paper) 88%,transparent)!important;
  backdrop-filter:blur(16px) saturate(1.1);
  border-bottom:1px solid var(--hair)!important;color:var(--ink)!important}
.shop-nav a,.shop-nav .nav-brand{color:var(--ink)!important;letter-spacing:.02em}
.shop-nav a:hover{color:var(--gold)!important}
.shop-nav .plus{color:var(--cap-dp)!important}

/* ---------- header: editorial, centred, unhurried ---------- */
.shop-header{
  background:transparent!important;border:none!important;text-align:center;
  padding:clamp(72px,9vw,132px) var(--gut) clamp(34px,4vw,52px)!important}
.shop-header::after{display:none!important}
.shop-header h1,.shop-header .shop-title{
  font-family:'Playfair Display',Georgia,serif!important;font-weight:400!important;
  font-size:clamp(2.6rem,6vw,4.6rem)!important;line-height:1.02!important;
  letter-spacing:-.03em!important;text-transform:none!important;color:var(--ink)!important}
.shop-header p,.shop-header .shop-sub{
  color:var(--ink-3)!important;font-size:.96rem!important;max-width:52ch;
  margin:20px auto 0!important;line-height:1.7!important}

/* ---------- search: a field, not a box ------------------------------------
   .shop-search-wrap is the OUTER container and .shop-search-bar is the input
   row — worth stating, because styling them the other way round is exactly how
   this ended up looking wrong. The rail spans full width and sticks; the field
   inside is a single hairline the input rests on, which is quieter than any
   bordered pill and reads as considered rather than default.
   ------------------------------------------------------------------------- */
.shop-search-wrap{
  position:sticky!important;top:0;z-index:40;
  max-width:none!important;margin:0 0 clamp(30px,4vw,48px) 0!important;
  padding:0!important;
  background:color-mix(in srgb,var(--paper) 92%,transparent)!important;
  backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--hair)!important}
.shop-search-bar{
  display:flex!important;align-items:center!important;gap:14px!important;
  max-width:1180px!important;margin:0 auto!important;
  padding:20px var(--gut)!important;
  background:transparent!important;border:none!important;border-radius:0!important}

/* the ⌕ glyph renders differently on every platform — draw the lens instead */
.shop-search-icon{
  font-size:0!important;color:transparent!important;position:relative;
  width:15px!important;height:15px!important;min-width:0!important;
  padding:0!important;margin:0!important;box-sizing:content-box!important;
  flex:0 0 15px!important;opacity:.55;transition:opacity .3s var(--e)}
.shop-search-icon::before{
  content:"";position:absolute;left:0;top:0;width:11px;height:11px;
  border:1.5px solid var(--ink);border-radius:50%}
.shop-search-icon::after{
  content:"";position:absolute;right:0;bottom:0;width:6px;height:1.5px;
  background:var(--ink);transform:rotate(45deg);transform-origin:right center}
.shop-search-wrap:focus-within .shop-search-icon{opacity:1}

.shop-search-input{
  flex:1!important;background:transparent!important;border:none!important;
  color:var(--ink)!important;font-family:'DM Sans',sans-serif!important;
  font-size:1.02rem!important;letter-spacing:-.005em!important;padding:4px 0!important}
.shop-search-input::placeholder{color:var(--ink-3)!important;opacity:.75}
.shop-search-clear{
  background:transparent!important;border:none!important;color:var(--ink-3)!important;
  font-size:.8rem!important;cursor:pointer;padding:4px 6px!important;
  transition:color .25s var(--e)}
.shop-search-clear:hover{color:var(--ink)!important}
.shop-search-count{
  font-family:'DM Mono',monospace!important;font-size:.6rem!important;
  letter-spacing:.22em!important;text-transform:uppercase!important;
  color:var(--ink-3)!important;white-space:nowrap}

/* ---------- category tabs: letterspaced, underline as the indicator ---------- */
.category-tabs{
  display:flex!important;justify-content:center!important;gap:clamp(20px,3vw,44px)!important;
  flex-wrap:wrap!important;max-width:1180px;margin:0 auto clamp(40px,5vw,68px)!important;
  padding:0 var(--gut)!important;border:none!important}
.cat-tab{
  position:relative;background:transparent!important;border:none!important;
  border-radius:0!important;padding:8px 2px!important;cursor:pointer;
  font-family:'DM Mono',monospace!important;font-size:.63rem!important;font-weight:400!important;
  letter-spacing:.26em!important;text-transform:uppercase!important;
  color:var(--ink-3)!important;transition:color .35s var(--e)!important}
.cat-tab::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--e)}
.cat-tab:hover{color:var(--ink)!important}
.cat-tab:hover::after{transform:scaleX(1)}
.cat-tab.active{color:var(--ink)!important}
.cat-tab.active::after{transform:scaleX(1);background:var(--cap-dp)}

/* ---------- section dividers ---------- */
.section-divider{background:transparent!important;
  padding:clamp(52px,6vw,88px) var(--gut) clamp(18px,2vw,26px)!important}
.section-divider-inner{
  max-width:1180px;margin-inline:auto;border-top:1px solid var(--hair)!important;
  padding-top:26px!important;display:flex;align-items:baseline;
  justify-content:space-between;gap:22px;flex-wrap:wrap}
.section-divider-label{
  font-family:'Playfair Display',Georgia,serif!important;font-weight:400!important;
  font-size:clamp(1.6rem,3vw,2.3rem)!important;letter-spacing:-.02em!important;
  text-transform:none!important;color:var(--ink)!important}
.section-divider-sub{
  font-family:'DM Mono',monospace!important;font-size:.58rem!important;
  letter-spacing:.26em!important;text-transform:uppercase!important;color:var(--gold)!important}

/* ---------- products ---------- */
.product-grid{
  display:grid!important;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))!important;
  gap:clamp(38px,4.4vw,72px) clamp(28px,3vw,48px)!important;
  max-width:1180px!important;margin-inline:auto!important;
  padding:0 var(--gut)!important;background:transparent!important}
.shop-product-card{
  background:transparent!important;border:none!important;box-shadow:none!important;
  border-radius:0!important;padding:0!important;transform:none!important;
  display:flex;flex-direction:column}

.product-img-wrap{
  background:transparent!important;aspect-ratio:1/1!important;
  height:auto!important;max-height:none!important;min-height:0!important;width:100%!important;
  border:none!important;border-radius:0!important;box-shadow:none!important;
  overflow:visible!important;margin:0 0 20px 0!important;display:block!important}
.product-img-wrap .product-img,.product-img{
  width:100%!important;height:100%!important;object-fit:contain!important}

.product-cat{
  font-family:'DM Mono',monospace!important;font-size:.55rem!important;
  letter-spacing:.28em!important;text-transform:uppercase!important;
  color:var(--gold)!important;margin-bottom:10px!important}
.product-name{
  font-family:'Playfair Display',Georgia,serif!important;font-weight:400!important;
  font-size:1.56rem!important;line-height:1.14!important;letter-spacing:-.02em!important;
  text-transform:none!important;color:var(--ink)!important}
.product-desc{color:var(--ink-3)!important;font-size:.86rem!important;line-height:1.68!important}
.product-dose{font-family:'DM Mono',monospace!important;color:var(--ink-3)!important}
.product-share-btn{color:var(--ink-3)!important;transition:color .3s var(--e)}
.product-share-btn:hover{color:var(--gold)!important}

.size-lbl{
  font-family:'DM Mono',monospace!important;font-size:.53rem!important;
  letter-spacing:.28em!important;text-transform:uppercase!important;color:var(--ink-3)!important}
/* gold fill, black type — the cap, restated as an affordance */
.size-btn{
  font-family:'DM Mono',monospace!important;font-size:.62rem!important;font-weight:500!important;
  letter-spacing:.06em!important;border:1px solid var(--cap)!important;border-radius:1px!important;
  background:var(--cap)!important;color:#17150F!important;
  padding:10px 14px!important;transition:all .28s var(--e)!important}
.size-btn:hover{background:var(--cap-lt)!important;border-color:var(--cap-lt)!important}
.size-btn.active{
  background:var(--cap-dp)!important;border-color:#17150F!important;
  box-shadow:inset 0 0 0 1px #17150F!important}
.size-btn.soldout,.size-btn[data-available="false"]{
  background:transparent!important;border-color:var(--hair-2)!important;
  color:var(--ink-3)!important;box-shadow:none!important;opacity:.65!important}

.product-footer{border:none!important;margin-top:auto!important;padding-top:18px!important;
  border-top:1px solid var(--hair)!important}
.product-price{
  background:transparent!important;border:none!important;padding:0!important;
  font-family:'Playfair Display',Georgia,serif!important;font-size:1.34rem!important;
  letter-spacing:-.01em!important;color:var(--ink)!important}
.product-price span{
  font-family:'DM Mono',monospace!important;font-size:.56rem!important;
  letter-spacing:.2em!important;color:var(--ink-3)!important}
.product-qty-btn{
  border:1px solid var(--hair-2)!important;border-radius:1px!important;background:transparent!important;
  color:var(--ink)!important;transition:all .25s var(--e)!important}
.product-qty-btn:hover{background:var(--ink)!important;color:var(--paper)!important;border-color:var(--ink)!important}
.product-qty-num{font-family:'DM Mono',monospace!important;color:var(--ink)!important}
.add-to-cart-btn{
  font-family:'DM Mono',monospace!important;font-size:.6rem!important;
  letter-spacing:.22em!important;text-transform:uppercase!important;border-radius:1px!important;
  background:var(--ink)!important;border:1px solid var(--ink)!important;color:var(--paper)!important;
  padding:13px 20px!important;transition:all .32s var(--e)!important}
.add-to-cart-btn:hover{background:var(--gold)!important;border-color:var(--gold)!important;color:#fff!important}
.add-to-cart-btn.soldout,.soldout{background:transparent!important;color:var(--ink-3)!important;
  border-color:var(--hair-2)!important}

/* ---------- devices: dark photography, framed as a deliberate plinth ---------- */
.shop-product-card[data-cat="device"] .product-img-wrap{
  background:#131110!important;border-radius:3px!important;overflow:hidden!important;
  box-shadow:0 12px 30px -18px rgba(19,17,16,.5)!important;
  transition:box-shadow .45s var(--e),transform .45s var(--e)!important}
.shop-product-card[data-cat="device"]:hover .product-img-wrap{
  box-shadow:0 18px 38px -18px rgba(19,17,16,.6)!important;transform:translateY(-2px)!important}
/* No inset. These products are dark on dark and already short of contrast —
   measured, the pen separates from its own backdrop across just 3.2% of the frame
   against 15.3% for a vial. Padding shrank the only thing there was to see. */
.shop-product-card[data-cat="device"] .product-img{padding:0!important}
.shop-product-card[data-cat="device"] .product-cat{color:var(--ink-3)!important}

/* ---------- showcase ---------- */
.shop-showcase,.shop-mid-showcase{
  background:transparent!important;border:none!important;border-radius:0!important;
  max-width:1180px!important;margin-inline:auto!important;padding:0 var(--gut)!important}
.shop-mid-caption{
  font-family:'DM Mono',monospace!important;font-size:.56rem!important;
  letter-spacing:.26em!important;text-transform:uppercase!important;color:var(--ink-3)!important}

/* ---------- cart, drawers, gate ---------- */
#cart-view,#checkout-view,#success-view,#wl-drawer,#cart-drawer{
  background:var(--paper-lift)!important;color:var(--ink-2)!important}
#cart-view *,#checkout-view *,#success-view *{border-color:var(--hair)!important}
.cart-subtotal{font-family:'DM Mono',monospace!important;color:var(--ink)!important}
.place-order-btn,#wl-drawer-submit,.age-gate-yes{
  background:var(--ink)!important;color:var(--paper)!important;border:1px solid var(--ink)!important;
  border-radius:1px!important;font-family:'DM Mono',monospace!important;
  letter-spacing:.2em!important;text-transform:uppercase!important}
.place-order-btn:hover,#wl-drawer-submit:hover,.age-gate-yes:hover{
  background:var(--gold)!important;border-color:var(--gold)!important}
#wl-drawer{border-left:1px solid var(--hair)!important}
#wl-drawer-title{font-family:'Playfair Display',serif!important;color:var(--ink)!important}
#wl-drawer-product{font-family:'DM Mono',monospace!important;letter-spacing:.24em!important;color:var(--gold)!important}
#age-gate{background:rgba(20,18,16,.5)!important;backdrop-filter:blur(8px)}
#age-gate-main{background:var(--paper-lift)!important;color:var(--ink-2)!important;
  border:1px solid var(--hair-2)!important;border-radius:2px!important}
#age-gate-main h1,#age-gate-main h2{
  font-family:'Playfair Display',serif!important;color:var(--ink)!important;text-transform:none!important}

/* ---------- footer: the single dark anchor ---------- */
footer{background:var(--dark)!important;color:#B9B3A9!important;border:none!important}
footer a{color:#8E887E!important;transition:color .3s var(--e)}
footer a:hover{color:var(--cap-lt)!important}
footer h5{color:var(--cap-lt)!important;letter-spacing:.26em!important}

@media(max-width:768px){
  .category-tabs{gap:18px!important}
  .product-grid{grid-template-columns:1fr!important}
}
@media(prefers-reduced-motion:reduce){*{transition-duration:.001ms!important}}

/* ---------- the monogram case: a carousel, not a plain image ---------------
   This card is built from .product-carousel / .pc-slide rather than the
   .product-img-wrap every other product uses, so none of the image sizing or the
   device plate reached it — it sat 229x220 against everything else at 229x229.
   Matched here to the exact same square, and given the same plinth so the three
   accessories read as one set.
   ------------------------------------------------------------------------- */
.product-carousel{
  position:relative!important;
  width:100%!important;aspect-ratio:1/1!important;height:auto!important;
  max-height:none!important;min-height:0!important;
  margin:0 0 20px 0!important;
  background:#131110!important;border:none!important;border-radius:3px!important;
  overflow:hidden!important;
  box-shadow:0 12px 30px -18px rgba(19,17,16,.5)!important;
  transition:box-shadow .45s var(--e),transform .45s var(--e)!important}
.shop-product-card:hover .product-carousel{
  box-shadow:0 18px 38px -18px rgba(19,17,16,.6)!important;transform:translateY(-2px)!important}

.product-carousel .pc-track{
  width:100%!important;height:100%!important;margin:0!important;border:none!important}
.product-carousel .pc-slide{
  width:100%!important;height:100%!important;border:none!important;background:transparent!important}
.product-carousel .pc-slide img{
  width:100%!important;height:100%!important;object-fit:contain!important;
  padding:0!important;border:none!important;border-radius:0!important;display:block!important}

/* carousel controls, restated in the theme's language */
.product-carousel .pc-btn{
  background:rgba(240,236,232,.86)!important;color:#17150F!important;
  border:none!important;border-radius:50%!important;
  width:28px!important;height:28px!important;
  opacity:0;transition:opacity .32s var(--e),background .25s var(--e)!important}
.product-carousel:hover .pc-btn,.product-carousel:focus-within .pc-btn{opacity:1}
.product-carousel .pc-btn:hover{background:#fff!important}
.product-carousel .pc-dots{
  position:absolute!important;left:0;right:0;bottom:10px!important;
  display:flex!important;justify-content:center!important;gap:6px!important;margin:0!important}
.product-carousel .pc-dot{
  width:5px!important;height:5px!important;border-radius:50%!important;
  background:rgba(255,255,255,.34)!important;border:none!important;padding:0!important;
  transition:background .3s var(--e),transform .3s var(--e)!important}
.product-carousel .pc-dot.active{background:var(--cap)!important;transform:scale(1.25)!important}

/* ---------- showcase images: show the whole frame -------------------------
   The original caps these at 340px / 300px (200px / 180px on small screens) with
   object-fit:cover, which crops the bottom off — on the stepped group shot that
   means losing the plinth the vials are standing on, which is most of the
   composition. Cap removed and height left to the image's own aspect, so the
   frame is shown as it was shot.
   ------------------------------------------------------------------------- */
.shop-showcase img,.shop-mid-showcase img{
  width:100%!important;height:auto!important;
  max-height:none!important;min-height:0!important;
  object-fit:contain!important;object-position:center!important;
  display:block!important;border-radius:2px!important}
.shop-showcase,.shop-mid-showcase{overflow:visible!important}
@media(max-width:768px){
  .shop-showcase img,.shop-mid-showcase img{max-height:none!important}
}

/* CART PANEL READABILITY (2026-09-16). The cart / checkout / order-confirmation panel was written
   for the old dark theme and this light theme never recoloured these pieces, so on the cream panel
   they were white or light grey (contrast 1.15:1 to 2:1). Targeted element by element ON PURPOSE:
   the panel also has dark boxes (checkout summary, e-transfer steps) whose white text is correct,
   and a blanket colour change turned those dark-on-black. Brand gold is left as it is. */
#cart-items-list .cart-item-name,
#cart-items-list .qty-num,
#cart-subtotal,
#order-success > p strong{color:#17150F!important}
#cart-sidebar .discount-apply-btn,
#cart-view .cart-subtotal span[style*="--smoke"],
#checkout-view ol li,
#checkout-form .back-to-cart-btn,
#success-order-num,
#order-success > p{color:#5C554B!important}