/* Celine Claire commerce — shared tokens, primitives, the cart drawer and the
   one sitewide product-loop correction (see the end of this file).
   Loaded sitewide because the bag trigger lives in the global header.
   Kept deliberately small; the heavier page layer is commerce.css. */

:root{
  --ccx-paper:#FBF8F1;
  --ccx-ivory:#F5F1E8;
  --ccx-sand:#EAE3D3;
  --ccx-ink:#2A211A;
  --ccx-amber:#C9962E;
  --ccx-yellow:#F5C518;
  --ccx-white:#FFFFFF;
  --ccx-sage:#7C8F72;
  --ccx-muted:#6E6357;
  --ccx-rule:rgba(42,33,26,.14);
  --ccx-rule-strong:rgba(42,33,26,.28);
  --ccx-danger:#B04A2A;
  --ccx-disp:"Cormorant Garamond",Georgia,serif;
  --ccx-body:Geist,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --ccx-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ccx-dur:200ms;
}

/* ---------------------------------------------------------- primitives */
.cc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:14px 26px;
  font-family:var(--ccx-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  border-radius:2px;border:1px solid var(--ccx-ink);cursor:pointer;text-decoration:none;
  transition:background var(--ccx-dur) ease,color var(--ccx-dur) ease,border-color var(--ccx-dur) ease;
}
.cc-btn--primary{background:var(--ccx-ink);color:var(--ccx-ivory);-webkit-text-fill-color:var(--ccx-ivory)}
.cc-btn--primary:hover,.cc-btn--primary:focus-visible{background:var(--ccx-amber);color:var(--ccx-ink);-webkit-text-fill-color:var(--ccx-ink);border-color:var(--ccx-amber)}
.cc-btn--ghost{background:transparent;color:var(--ccx-ink);-webkit-text-fill-color:var(--ccx-ink)}
.cc-btn--ghost:hover,.cc-btn--ghost:focus-visible{border-color:var(--ccx-amber);color:var(--ccx-amber);-webkit-text-fill-color:var(--ccx-amber)}
.cc-btn--full{width:100%}
.cc-btn[disabled],.cc-btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}

.cc-link{
  display:inline-block;font-family:var(--ccx-body);font-size:14px;color:var(--ccx-ink);
  text-decoration:underline;text-decoration-color:var(--ccx-rule-strong);text-underline-offset:4px;
}
.cc-link:hover,.cc-link:focus-visible{text-decoration-color:var(--ccx-amber)}
.cc-link--center{display:block;text-align:center;margin-top:14px}

.cc-btn:focus-visible,.cc-link:focus-visible,.cc-qty__b:focus-visible,
.cc-dw__close:focus-visible,.cc-dw__rm:focus-visible,.cc-qty__i:focus-visible{
  outline:2px solid var(--ccx-ink);outline-offset:3px;
}

/* quantity stepper */
.cc-qty{display:inline-flex;align-items:stretch;border:1px solid var(--ccx-rule);border-radius:2px;background:#fff}
.cc-qty__b{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;min-height:36px;background:transparent;border:0;color:var(--ccx-ink);cursor:pointer;
}
.cc-qty__b:hover{color:var(--ccx-amber)}
.cc-qty__i{
  width:44px;min-height:36px;text-align:center;border:0;border-left:1px solid var(--ccx-rule);border-right:1px solid var(--ccx-rule);
  font-family:var(--ccx-body);font-size:14px;color:var(--ccx-ink);background:transparent;-moz-appearance:textfield;
}
.cc-qty__i::-webkit-outer-spin-button,.cc-qty__i::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* summary rows */
.cc-sum{margin:0;font-family:var(--ccx-body)}
.cc-sum__r{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:9px 0;font-size:14.5px;color:var(--ccx-ink)}
.cc-sum__r dt{margin:0;color:var(--ccx-muted)}
.cc-sum__r dd{margin:0;font-variant-numeric:tabular-nums}
.cc-sum__r--total{border-top:1px solid var(--ccx-rule);margin-top:6px;padding-top:16px;font-size:18px}
.cc-sum__r--total dt{color:var(--ccx-ink);font-family:var(--ccx-disp);font-size:24px;font-style:italic}
.cc-sum__r--total dd{font-size:22px;font-weight:500}
.cc-sum__cur{font-family:var(--ccx-mono);font-size:10px;letter-spacing:.18em;color:var(--ccx-muted);margin-left:8px;vertical-align:middle;text-transform:uppercase}

/* trust row */
.cc-trust{display:flex;flex-wrap:wrap;gap:14px 18px;list-style:none;margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--ccx-rule)}
.cc-trust__i{display:inline-flex;align-items:center;gap:7px;font-family:var(--ccx-body);font-size:12px;color:var(--ccx-muted)}
.cc-trust__i a{color:var(--ccx-muted);text-decoration:none}
.cc-trust__i a:hover,.cc-trust__i a:focus-visible{color:var(--ccx-ink);text-decoration:underline}
.cc-ic{flex:0 0 auto}

/* header bag count */
.cc-cx-count{
  display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;
  background:var(--ccx-amber);color:var(--ccx-ink);border-radius:999px;
  font-family:var(--ccx-mono);font-size:10px;font-weight:600;line-height:1;
}

/* ---------------------------------------------------------------- drawer */
.cc-dw-lock,.cc-dw-lock body{overflow:hidden}

.cc-dw-scrim{
  position:fixed;inset:0;background:rgba(42,33,26,.38);z-index:100000;
  opacity:0;transition:opacity var(--ccx-dur) ease;
}
.cc-dw-scrim.is-open{opacity:1}

.cc-dw{
  position:fixed;top:0;right:0;bottom:0;z-index:100001;
  width:min(38vw,460px);
  display:flex;flex-direction:column;
  background:var(--ccx-paper);color:var(--ccx-ink);
  font-family:var(--ccx-body);
  border-left:1px solid var(--ccx-rule);
  box-shadow:-18px 0 44px rgba(42,33,26,.10);
  transform:translateX(100%);
  /* Parked, this panel is a full viewport wide and sits entirely past the right
     edge. It is position:fixed, so overflow-x:hidden on html/body does not clip
     it -- iOS Safari then lets the viewport pan and the body background shows as
     a white strip beside the content. Keep it out of paint until it opens; the
     visibility change is delayed by the length of the slide on close only, so
     the closing animation still plays in full. */
  visibility:hidden;
  transition:transform var(--ccx-dur) ease, visibility 0s linear var(--ccx-dur);
}
.cc-dw.is-open{
  transform:translateX(0);
  visibility:visible;
  transition:transform var(--ccx-dur) ease, visibility 0s linear 0s;
}
.cc-dw.is-busy{cursor:progress}
.cc-dw.is-busy .cc-dw__inner{opacity:.55;transition:opacity 120ms ease}

.cc-dw__head{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:26px 28px 18px;border-bottom:1px solid var(--ccx-rule);
}
.cc-dw__title{
  margin:0;font-family:var(--ccx-disp);font-style:italic;font-weight:400;
  font-size:32px;line-height:1.1;color:var(--ccx-ink);
}
.cc-dw__title:focus{outline:none}
.cc-dw__count{font-family:var(--ccx-body);font-style:normal;font-size:17px;color:var(--ccx-muted);margin-left:6px}
.cc-dw__close{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;background:transparent;border:0;color:var(--ccx-ink);cursor:pointer;border-radius:2px;
}
.cc-dw__close:hover{color:var(--ccx-amber)}

.cc-dw__body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 28px}
.cc-dw__inner{display:flex;flex-direction:column;min-height:100%}

.cc-dw__ship{
  display:flex;align-items:center;gap:10px;margin:20px 0 4px;padding:0;
  font-size:14px;color:var(--ccx-ink);
}
.cc-dw__ship .cc-ic{color:var(--ccx-sage)}

.cc-dw__list{list-style:none;margin:16px 0 0;padding:0}
.cc-dw__item{display:flex;gap:16px;padding:20px 0;border-top:1px solid var(--ccx-rule)}
.cc-dw__item:first-child{border-top:0}
.cc-dw__thumb{flex:0 0 74px;width:74px}
.cc-dw__thumb img{width:100%;height:auto;display:block;border-radius:2px;background:var(--ccx-ivory)}
.cc-dw__meta{flex:1 1 auto;min-width:0}
.cc-dw__row{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.cc-dw__name{margin:0;font-size:15px;line-height:1.35;font-weight:500}
.cc-dw__name a{color:var(--ccx-ink);text-decoration:none}
.cc-dw__name a:hover,.cc-dw__name a:focus-visible{text-decoration:underline}
.cc-dw__price{margin:0;font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cc-dw__var{margin:4px 0 0;font-size:12.5px;color:var(--ccx-muted)}
.cc-dw__var p{margin:0}
.cc-dw__ctl{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.cc-dw__rm{
  background:none;border:0;padding:4px 2px;cursor:pointer;
  font-family:var(--ccx-body);font-size:13px;color:var(--ccx-muted);
  text-decoration:underline;text-underline-offset:3px;
}
.cc-dw__rm:hover{color:var(--ccx-danger)}

.cc-dw__err{
  margin:14px 0 0;padding:11px 14px;border-radius:2px;
  background:rgba(176,74,42,.08);border:1px solid var(--ccx-danger);color:var(--ccx-danger);font-size:13.5px;
}

.cc-dw__foot{
  margin-top:auto;padding:22px 0 26px;border-top:1px solid var(--ccx-rule);
  position:sticky;bottom:0;background:var(--ccx-paper);
}

.cc-dw__empty{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:48px 0}
.cc-dw__empty-h{margin:0;font-family:var(--ccx-disp);font-style:italic;font-weight:400;font-size:28px;color:var(--ccx-ink)}
.cc-dw__empty-p{margin:0;font-size:14.5px;color:var(--ccx-muted);max-width:34ch;line-height:1.55}

@media(max-width:900px){
  .cc-dw{width:100vw;max-width:100vw;border-left:0}
  .cc-dw__head{padding:20px 20px 16px;padding-top:max(20px,env(safe-area-inset-top))}
  .cc-dw__body{padding:0 20px}
  .cc-dw__foot{padding-bottom:max(22px,env(safe-area-inset-bottom))}
  .cc-dw__title{font-size:27px}
}

@media (prefers-reduced-motion: reduce){
  .cc-dw,.cc-dw-scrim,.cc-btn,.cc-link{transition:none!important}
}

/* ------------------------------------------------- header bag count badge
   An empty bag should not advertise a zero, and the badge belongs to the
   brand palette rather than the header template's stock accent. */
/* Three plugins currently write this badge (this one, Search and Wishlist);
   Search and Wishlist mark an empty bag with .is-empty, so both conventions
   are honoured until the consolidated plugin owns it alone. */
.cc-cart-count[data-count="0"],
.cc-cart-count.is-empty{display:none!important}
.cc-cart .cc-cart-count,
.cc-cart-count{
  min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background-color:var(--ccx-yellow)!important;color:var(--ccx-ink)!important;
  -webkit-text-fill-color:var(--ccx-ink)!important;
  font-family:var(--ccx-mono);font-size:10px;line-height:1;font-weight:600;letter-spacing:0;
}

/* ------------------------------------------------------- product loop grid */
/* Every product loop on this site is laid out as a CSS grid, but WooCommerce
   still ships its float-era clearfix in woocommerce-layout.css:

     ul.products::before, ul.products::after { content:" "; display:table }

   A generated box inside a grid container becomes a grid item, so those two
   quietly take the first and last cells: the first product starts in column
   two and the last one wraps onto a row of its own with a gap beside it.
   The Shop, the collection rows and the bestsellers picks each carried their
   own copy of this fix, so the bug only showed where none applied - related
   products, up-sells and cross-sells. Removing the clearfix once, sitewide,
   means no future loop has to remember to do it. */
body.woocommerce ul.products::before,
body.woocommerce ul.products::after,
body.woocommerce-page ul.products::before,
body.woocommerce-page ul.products::after,
body.woocommerce .products ul::before,
body.woocommerce .products ul::after,
body.woocommerce-page .products ul::before,
body.woocommerce-page .products ul::after{content:none!important;display:none!important}