/* Celine Claire Shop archive — Master 016.
   Loaded on the product archive only. Palette and type follow the five
   approved references; the font stacks are the site's own. */

body.cc-shop{
  --s-ivory:#FBF7EF;
  --s-paper:#F5F1E8;
  --s-white:#FFFFFF;
  --s-ink:#1B1A17;
  --s-espresso:#2A211A;
  --s-yellow:#F5C518;
  --s-amber:#C9962E;
  --s-muted:#6E6357;
  --s-rule:#E6DFD2;
  --s-rule-2:rgba(27,26,23,.26);
  --s-clay:#C08370;
  --s-disp:"Cormorant Garamond",Georgia,serif;
  --s-body:Geist,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --s-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  background:var(--s-ivory);
}

/* The archive owns the full width; the theme's narrow wrapper is released. */
body.cc-shop .site-main,
body.cc-shop #primary,
body.cc-shop .content-area{max-width:none!important;width:100%!important;margin:0!important;padding:0!important}
body.cc-shop .woocommerce-products-header,
body.cc-shop .woocommerce-products-header__title,
body.cc-shop .term-description{display:none!important}
body.cc-shop .woocommerce-notices-wrapper{max-width:1440px;margin:0 auto;padding:0 32px}

body.cc-shop .woocommerce{font-family:var(--s-body);color:var(--s-ink)}

.cc-sh-wrap,
.cc-sh-hero__in,
.cc-sh-cat,
.cc-sh-best__in,
.cc-sh-con__in,
.cc-sh-close__in,
body.cc-shop ul.products,
body.cc-shop .woocommerce-pagination,
.cc-sh-proof,
.cc-sh-trust,
.cc-sh-rail,
.cc-sh-empty{max-width:1440px;margin-left:auto;margin-right:auto;padding-left:32px;padding-right:32px}
@media(max-width:900px){
  .cc-sh-wrap,.cc-sh-hero__in,.cc-sh-cat,.cc-sh-best__in,.cc-sh-con__in,.cc-sh-close__in,
  body.cc-shop ul.products,body.cc-shop .woocommerce-pagination,.cc-sh-proof,.cc-sh-trust,
  .cc-sh-rail,.cc-sh-empty{padding-left:18px;padding-right:18px}
}

/* --------------------------------------------------------------- primitives */
.cc-sh-eyebrow{
  margin:0 0 16px;font-family:var(--s-mono);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--s-muted);font-weight:500;
}
.cc-sh-eyebrow--dark{color:rgba(245,241,232,.72)}

.cc-sh-h1{
  margin:0 0 22px;font-family:var(--s-disp);font-weight:400;
  font-size:clamp(42px,5.6vw,74px);line-height:1.02;letter-spacing:-.015em;
  color:var(--s-ink);text-wrap:balance;max-width:16ch;
}
.cc-sh-h2{
  margin:0 0 16px;font-family:var(--s-disp);font-weight:400;
  font-size:clamp(32px,4.2vw,56px);line-height:1.04;letter-spacing:-.012em;
  color:var(--s-ink);text-wrap:balance;
}
.cc-sh-h2--light{color:var(--s-paper)}

body.cc-shop .cc-sh-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:15px 30px;border-radius:999px;cursor:pointer;text-decoration:none;
  font-family:var(--s-body);font-size:15px;font-weight:500;letter-spacing:0;
  border:1px solid transparent!important;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .12s ease;
}
body.cc-shop .cc-sh-btn--accent{
  background-color:var(--s-yellow)!important;color:var(--s-ink)!important;
  -webkit-text-fill-color:var(--s-ink)!important;border-color:var(--s-yellow)!important;
}
body.cc-shop .cc-sh-btn--accent:hover,
body.cc-shop .cc-sh-btn--accent:focus-visible{
  background-color:var(--s-ink)!important;color:var(--s-ivory)!important;
  -webkit-text-fill-color:var(--s-ivory)!important;border-color:var(--s-ink)!important;
}
body.cc-shop .cc-sh-btn--ink{
  background-color:var(--s-ink)!important;color:var(--s-ivory)!important;
  -webkit-text-fill-color:var(--s-ivory)!important;border-color:var(--s-ink)!important;
}
body.cc-shop .cc-sh-btn--ink:hover{
  background-color:var(--s-yellow)!important;color:var(--s-ink)!important;
  -webkit-text-fill-color:var(--s-ink)!important;border-color:var(--s-yellow)!important;
}
body.cc-shop .cc-sh-btn--sm{min-height:44px;padding:12px 22px;font-size:14px}
body.cc-shop .cc-sh-btn:active{transform:scale(.985)}

body.cc-shop .cc-sh-textlink{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--s-ink);text-decoration:underline;text-decoration-color:var(--s-rule-2);
  text-underline-offset:5px;text-decoration-thickness:1px;font-size:15px;
}
body.cc-shop .cc-sh-textlink:hover{text-decoration-color:var(--s-yellow)}
body.cc-shop .cc-sh-textlink--light{color:var(--s-paper);text-decoration-color:rgba(245,241,232,.4)}
body.cc-shop .cc-sh-textlink--light:hover{text-decoration-color:var(--s-yellow)}
body.cc-shop .cc-sh-textlink--sm{font-size:14px}

body.cc-shop a:focus-visible,
body.cc-shop button:focus-visible,
body.cc-shop select:focus-visible,
body.cc-shop input:focus-visible{outline:2px solid var(--s-ink);outline-offset:3px;border-radius:2px}
.cc-sh-close__dark a:focus-visible,
.cc-sh-best a:focus-visible{outline-color:var(--s-yellow)}

/* --------------------------------------------------------------------- hero
   Master 020: the supplied photographic plate is the environment. The stage
   crops only the calm wall at the top; the plate is anchored to the bottom and
   capped at 1500px so the plinths never scale past the viewport height, and
   every product is placed in container-query units of the plate's width, so
   it sits on the same stone at every size. The wall colour continues into any
   gutter left of the plate on very wide screens. */
.cc-sh-hero{background:var(--s-ivory);padding:0;margin:0}
.cc-sh-hero__top{position:relative}

.cc-sh-stage{
  position:relative;width:100%;height:clamp(600px,50vw,720px);overflow:hidden;
  background:#FDF8F1;
}
.cc-sh-plate-box{
  position:absolute;right:0;bottom:calc(-1 * min(3vw,40px));width:min(100%,1350px);container-type:inline-size;
}
/* The plate is right-anchored; its calm left wall fades into the stage colour
   so no seam shows where the gutter begins on wide screens. */
.cc-sh-plate{display:block;margin:0;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%);mask-image:linear-gradient(90deg,transparent 0,#000 16%)}
body.cc-shop .cc-sh-plate__img{display:block;width:100%!important;height:auto!important;max-width:none!important}

.cc-sh-hero__cwrap{
  position:absolute;z-index:6;left:max(32px,calc((100% - 1360px) / 2));
  top:50%;transform:translateY(-54%);width:min(44%,560px);
}
.cc-sh-hero__copy{min-width:0}
.cc-sh-lede{margin:0 0 30px;font-size:17px;line-height:1.6;color:var(--s-muted);max-width:46ch}
.cc-sh-hero__acts{display:flex;align-items:center;gap:26px;flex-wrap:wrap}

.cc-sh-art{position:absolute;margin:0;z-index:4}
body.cc-shop .cc-sh-art__img{
  position:absolute!important;left:0!important;bottom:0!important;top:auto!important;
  width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
  object-fit:contain!important;object-position:bottom center!important;display:block;
}
/* Contact shadow: an ellipse under the base, darker at the point of contact. */
.cc-sh-art__shadow{
  position:absolute;left:-14%;right:-14%;bottom:-.9cqw;height:1.9cqw;border-radius:50%;z-index:-1;
  background:radial-gradient(ellipse at center,rgba(64,48,32,.46) 0%,rgba(64,48,32,.2) 42%,rgba(64,48,32,0) 70%);
}
/* Desktop plate, 1672×941. Scale follows the physical package. */
.cc-sh-art--mask{left:39cqw;bottom:15.2cqw;width:16cqw;height:15cqw;z-index:5}
.cc-sh-art--shampoo{left:52.3cqw;bottom:21.2cqw;width:12cqw;height:27cqw;z-index:4}
.cc-sh-art--oil{left:76.9cqw;bottom:18.6cqw;width:7cqw;height:17cqw;z-index:5}
.cc-sh-art--silver{left:72.2cqw;bottom:31.2cqw;width:8.5cqw;height:20cqw;z-index:3}
.cc-sh-art__note{
  position:absolute;z-index:6;left:56.5cqw;bottom:51cqw;margin:0;font-family:var(--s-disp);font-style:italic;
  font-size:clamp(17px,1.5cqw,24px);line-height:1.3;color:var(--s-ink);text-align:left;
}
.cc-sh-art__rule{display:block;width:40px;height:1px;background:var(--s-ink);margin-top:10px}

/* Entrance: copy first, then the products in a short stagger. Opacity and
   transform only, so nothing moves in layout; reduced motion skips it. */
.cc-sh-hero__copy>*{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.cc-sh-hero__copy>*:nth-child(2){transition-delay:.06s}
.cc-sh-hero__copy>*:nth-child(3){transition-delay:.12s}
.cc-sh-hero__copy>*:nth-child(4){transition-delay:.18s}
.cc-sh-art{opacity:0;transform:translateY(10px);transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1);transition-delay:calc(.22s + var(--i,1) * .08s)}
.cc-sh-art__note{opacity:0;transition:opacity .6s ease .7s}
body.cc-hero-in .cc-sh-hero__copy>*,
body.cc-hero-in .cc-sh-art,
body.cc-hero-in .cc-sh-art__note{opacity:1;transform:none}
body.cc-shop:not(.cc-js) .cc-sh-hero__copy>*,
body.cc-shop:not(.cc-js) .cc-sh-art,
body.cc-shop:not(.cc-js) .cc-sh-art__note{opacity:1;transform:none}

@media(max-width:1080px){
  /* Mobile plate, 1122×1402: copy in flow above, products on the lower plinths. */
  .cc-sh-art__note{display:none}
  .cc-sh-hero__cwrap{position:static;transform:none;width:auto;padding:28px 18px 8px}
  .cc-sh-h1{max-width:none;font-size:clamp(38px,9.4vw,56px)}
  .cc-sh-lede{margin-bottom:22px;font-size:16px}
  .cc-sh-stage{height:auto;aspect-ratio:1122/1000;background:#F4EAE0}
  .cc-sh-plate-box{width:100%}
  .cc-sh-art--mask{left:10cqw;bottom:33.7cqw;width:30cqw;height:29cqw}
  .cc-sh-art--shampoo{left:39cqw;bottom:45cqw;width:18cqw;height:42cqw}
  .cc-sh-art--oil{left:76.5cqw;bottom:37.5cqw;width:11cqw;height:26cqw}
  .cc-sh-art--silver{left:71cqw;bottom:55.6cqw;width:14cqw;height:31cqw}
  .cc-sh-art__shadow{bottom:-1.4cqw;height:3cqw}
}
/* Tablets: the mobile composition, but the plate is capped and centred so
   the hero does not run to 1400px on a 1024px screen. */
@media(min-width:700px) and (max-width:1080px){
  .cc-sh-stage{aspect-ratio:auto;height:calc(min(100vw,780px) * .9)}
  .cc-sh-plate-box{width:min(100%,780px);right:auto;left:50%;transform:translateX(-50%)}
  .cc-sh-plate{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%)}
  .cc-sh-hero__cwrap{max-width:720px;margin:0 auto;padding:30px 32px 14px}
}
@media(max-width:480px){
  .cc-sh-hero__cwrap{padding:22px 18px 4px}
  .cc-sh-hero__acts{gap:16px}
}

/* family rail */
.cc-sh-rail{border-top:1px solid var(--s-rule);border-bottom:1px solid var(--s-rule);background:var(--s-ivory)}
.cc-sh-rail__in{
  list-style:none;margin:0;padding:0;display:flex;gap:4px;align-items:stretch;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.cc-sh-rail__in::-webkit-scrollbar{display:none}
.cc-sh-rail__in>li{flex:0 0 auto}
body.cc-shop .cc-sh-rail__link{
  display:inline-flex;align-items:center;min-height:56px;padding:16px 22px;
  font-size:15px;color:var(--s-muted);text-decoration:none;white-space:nowrap;
  border-bottom:2px solid transparent;transition:color .18s ease,border-color .18s ease;
}
body.cc-shop .cc-sh-rail__link:hover{color:var(--s-ink)}
body.cc-shop .cc-sh-rail__link.is-on{color:var(--s-ink);font-weight:500;border-bottom-color:var(--s-yellow)}

/* trust strip */
.cc-sh-trust{
  list-style:none;display:flex;gap:0;margin:0;padding-top:26px;padding-bottom:26px;
  border-bottom:1px solid var(--s-rule);
}
.cc-sh-trust>li{
  flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:12px;
  font-size:15px;color:var(--s-ink);border-left:1px solid var(--s-rule);padding:0 16px;
}
.cc-sh-trust>li:first-child{border-left:0}
.cc-sh-trust svg{color:var(--s-ink);flex:0 0 auto}
@media(max-width:760px){
  .cc-sh-trust{flex-direction:column;gap:14px;align-items:flex-start}
  .cc-sh-trust>li{justify-content:flex-start;border-left:0;padding:0;font-size:14px}
}

/* ------------------------------------------------------------ catalogue head */
.cc-sh-cat{padding-top:52px}
.cc-sh-cat__head{
  display:grid;grid-template-columns:minmax(0,1fr);gap:0;
  padding-bottom:26px;border-bottom:1px solid var(--s-rule);
}
.cc-sh-cat__head .cc-sh-h2{margin-bottom:0;max-width:20ch}

/* ------------------------------------------------------------------ toolbar */
.cc-sh-tb{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:16px 0;border-bottom:1px solid var(--s-rule);
}
.cc-sh-tb__count{margin:0;font-size:14px;color:var(--s-muted);flex:0 0 auto}
.cc-sh-tb__count strong{color:var(--s-ink);font-weight:500}
.cc-sh-tb__panels{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:1 1 auto;margin:0}
.cc-sh-tb__mobile{display:none}

.cc-sh-fg{position:relative}
body.cc-shop .cc-sh-fg__btn{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;
  background:transparent;border:1px solid transparent;border-radius:999px;cursor:pointer;
  font-family:var(--s-body);font-size:15px;color:var(--s-ink);
}
body.cc-shop .cc-sh-fg__btn:hover{border-color:var(--s-rule)}
body.cc-shop .cc-sh-fg__btn[aria-expanded="true"]{border-color:var(--s-rule);background:var(--s-white)}
body.cc-shop .cc-sh-fg__btn svg{transition:transform .18s ease}
body.cc-shop .cc-sh-fg__btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.cc-sh-fg__n{
  display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;
  padding:0 6px;border-radius:999px;background:var(--s-yellow);color:var(--s-ink);
  font-family:var(--s-mono);font-size:10.5px;font-weight:600;
}

.cc-sh-fg__panel{
  position:absolute;z-index:30;top:calc(100% + 8px);left:0;min-width:250px;max-width:320px;
  background:var(--s-white);border:1px solid var(--s-rule);border-radius:2px;
  padding:10px;box-shadow:0 12px 32px rgba(27,26,23,.08);
  max-height:340px;overflow-y:auto;
}
/* Without JS the panels are simply open in flow, so every option is reachable. */
.cc-sh-fg__panel{display:block}
body.cc-shop.cc-js .cc-sh-fg__panel{display:none}
body.cc-shop.cc-js .cc-sh-fg.is-open .cc-sh-fg__panel{display:block}
.cc-sh-fg__panel ul{list-style:none;margin:0;padding:0}
body.cc-shop .cc-sh-fg__opt{
  display:flex;align-items:center;gap:10px;padding:9px 10px;min-height:42px;
  color:var(--s-ink);text-decoration:none;font-size:14.5px;border-radius:2px;
}
body.cc-shop .cc-sh-fg__opt:hover{background:var(--s-paper)}
.cc-sh-fg__box{
  flex:0 0 auto;width:16px;height:16px;border:1px solid var(--s-rule-2);border-radius:2px;
  position:relative;background:var(--s-white);
}
.cc-sh-fg__opt.is-on .cc-sh-fg__box{background:var(--s-ink);border-color:var(--s-ink)}
.cc-sh-fg__opt.is-on .cc-sh-fg__box::after{
  content:"";position:absolute;left:4.5px;top:1px;width:4px;height:9px;
  border:solid var(--s-ivory);border-width:0 1.6px 1.6px 0;transform:rotate(45deg);
}
.cc-sh-fg__label{flex:1 1 auto;min-width:0}
.cc-sh-fg__c{font-family:var(--s-mono);font-size:11px;color:var(--s-muted)}

.cc-sh-fg__panel--price{min-width:270px}
.cc-sh-price{display:flex;align-items:flex-end;gap:10px}
.cc-sh-price__l{display:flex;flex-direction:column;gap:5px;margin:0;flex:1 1 0}
.cc-sh-price__l label{font-family:var(--s-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--s-muted)}
body.cc-shop .cc-sh-price__l input{
  width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--s-rule);border-radius:2px;
  background:var(--s-white);font-family:var(--s-body);font-size:15px;color:var(--s-ink);
}
body.cc-shop .cc-sh-price__go,
body.cc-shop .cc-sh-sort__go{
  min-height:44px;padding:11px 18px;border-radius:2px;cursor:pointer;
  background-color:var(--s-ink)!important;color:var(--s-ivory)!important;
  -webkit-text-fill-color:var(--s-ivory)!important;border:1px solid var(--s-ink)!important;
  font-family:var(--s-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}

.cc-sh-sort{display:inline-flex;align-items:center;gap:10px;margin-left:auto}
.cc-sh-sort label{font-size:14px;color:var(--s-muted);white-space:nowrap}
body.cc-shop .cc-sh-sort select{
  min-height:44px;padding:10px 34px 10px 14px;border:1px solid var(--s-rule);border-radius:999px;
  background-color:transparent;font-family:var(--s-body);font-size:15px;color:var(--s-ink);
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B1A17' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:14px;
}

/* active filter chips */
.cc-sh-active{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 0 0}
.cc-sh-active__l{margin:0;font-family:var(--s-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--s-muted)}
.cc-sh-active ul{list-style:none;display:flex;gap:8px;flex-wrap:wrap;margin:0;padding:0}
body.cc-shop .cc-sh-chip{
  display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:8px 14px;
  border:1px solid var(--s-rule-2);border-radius:999px;font-size:13.5px;
  color:var(--s-ink);text-decoration:none;background:var(--s-white);
}
body.cc-shop .cc-sh-chip:hover{border-color:var(--s-ink);background:var(--s-paper)}
body.cc-shop .cc-sh-clear{font-size:13.5px;color:var(--s-muted);text-decoration:underline;text-underline-offset:4px}
body.cc-shop .cc-sh-clear:hover{color:var(--s-ink)}

@media(max-width:1080px){
  .cc-sh-sort{margin-left:0}
}
@media(max-width:860px){
  .cc-sh-tb{gap:12px;justify-content:space-between}
  body.cc-shop.cc-js .cc-sh-tb__mobile{
    display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:12px 18px;
    border:1px solid var(--s-rule-2);border-radius:999px;background:transparent;cursor:pointer;
    font-family:var(--s-body);font-size:15px;color:var(--s-ink);
  }
  body.cc-shop.cc-js .cc-sh-tb__panels{
    position:fixed;inset:0;z-index:100000;display:none;flex-direction:column;align-items:stretch;
    gap:0;background:var(--s-ivory);padding:22px 18px 26px;overflow-y:auto;
  }
  body.cc-shop.cc-js .cc-sh-tb__panels.is-open{display:flex}
  body.cc-shop.cc-js .cc-sh-tb__panels .cc-sh-fg{border-bottom:1px solid var(--s-rule)}
  body.cc-shop.cc-js .cc-sh-tb__panels .cc-sh-fg__btn{width:100%;justify-content:space-between;min-height:54px;border-radius:0}
  body.cc-shop.cc-js .cc-sh-tb__panels .cc-sh-fg__panel{
    position:static;box-shadow:none;border:0;padding:0 0 12px;max-width:none;min-width:0;max-height:none;
  }
  body.cc-shop.cc-js .cc-sh-tb__panels .cc-sh-sort{
    margin:22px 0 0;flex-direction:column;align-items:stretch;gap:8px;
  }
  body.cc-shop.cc-js .cc-sh-tb__panels .cc-sh-sort select{width:100%}
  .cc-sh-fg__close{
    position:sticky;bottom:0;margin-top:auto;padding-top:14px;background:var(--s-ivory);
  }
}

/* ----------------------------------------------------------------- the grid */
body.cc-shop ul.products{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 24px;
  list-style:none;margin:36px auto 0!important;padding-top:0;padding-bottom:0;
}
body.cc-shop ul.products::before,
body.cc-shop ul.products::after{display:none!important}
body.cc-shop ul.products li.product{
  width:auto!important;margin:0!important;float:none!important;clear:none!important;
  display:flex;flex-direction:column;
}
@media(max-width:1199px){body.cc-shop ul.products{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:767px){body.cc-shop ul.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}}

.cc-pc__media{
  position:relative;background:var(--s-paper);border-radius:2px;overflow:hidden;
  aspect-ratio:1/1;margin-bottom:14px;
}
/* A cut-out is shown whole, centred, with air around it - never cropped. */
body.cc-shop .cc-pc--cut .cc-pc__img--a{object-fit:contain!important;object-position:center!important;padding:9%;box-sizing:border-box}
.cc-pc--cut .cc-pc__img--b{opacity:0}
.cc-pc--cut.cc-pc--swap:hover .cc-pc__img--a,
.cc-pc--cut.cc-pc--swap:focus-within .cc-pc__img--a{opacity:0}
/* Both layers are taken out of flow so the square keeps its ratio and the
   cut-out can never be sized by the featured photo underneath it. */
.cc-pc__imglink{position:absolute;inset:0;display:block}
/* A sitewide hover-swap script (Elementor widget "cchoverswap") wraps the
   first image of every `li.product` in a <span class="cc-hov"> at runtime and
   injects its own second image. Inside this card that span is a zero-height
   relative box, which collapses the absolutely positioned layers to nothing.
   The wrapper is made to fill the square and its injected image is dropped;
   the card already carries the correct second image itself. */
body.cc-shop ul.products li.product .cc-pc__media .cc-hov{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  display:block!important;overflow:visible!important;border-radius:0!important;
}
body.cc-shop ul.products li.product .cc-pc__media .cc-hov-alt{display:none!important}

/* The theme styles every `ul.products li.product ... img` with
   object-fit:cover!important at high specificity; these selectors are
   deliberately heavier so the card, not the theme, decides how it is drawn. */
body.cc-shop ul.products li.product .cc-pc__media img.cc-pc__img--a,
body.cc-shop ul.products li.product .cc-pc__media img.cc-pc__img--b{
  position:absolute!important;top:0!important;left:0!important;
  width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
  margin:0!important;display:block!important;
}
body.cc-shop ul.products li.product .cc-pc__media img.cc-pc__img--b{opacity:0;object-fit:cover!important}
/* The swap itself, at the same weight as the rule above so it can win. */
body.cc-shop ul.products li.product.cc-pc--swap:hover .cc-pc__media img.cc-pc__img--b,
body.cc-shop ul.products li.product.cc-pc--swap:focus-within .cc-pc__media img.cc-pc__img--b{opacity:1}
body.cc-shop ul.products li.product.cc-pc--swap:hover .cc-pc__media img.cc-pc__img--a,
body.cc-shop ul.products li.product.cc-pc--swap:focus-within .cc-pc__media img.cc-pc__img--a{opacity:0}
@media (hover:none){
  /* Touch: the primary stays put; nothing lives only in the hover state. */
  body.cc-shop ul.products li.product.cc-pc--swap:hover .cc-pc__media img.cc-pc__img--a{opacity:1}
  body.cc-shop ul.products li.product.cc-pc--swap:hover .cc-pc__media img.cc-pc__img--b{opacity:0}
}
body.cc-shop ul.products li.product.cc-pc--cut .cc-pc__media img.cc-pc__img--a{
  object-fit:contain!important;object-position:center!important;padding:9%!important;box-sizing:border-box!important;
}
body.cc-shop .cc-pc--cut.cc-pc--swap:hover .cc-pc__img--b,
body.cc-shop .cc-pc--cut.cc-pc--swap:focus-within .cc-pc__img--b{opacity:1}
body.cc-shop .cc-pc__img{
  width:100%!important;height:100%!important;max-width:none!important;
  object-fit:cover;display:block;
  transition:opacity .35s ease,transform .5s cubic-bezier(.2,.7,.2,1);
}
.cc-pc__img--b{position:absolute;inset:0;opacity:0}
.cc-pc--swap:hover .cc-pc__img--a,
.cc-pc--swap:focus-within .cc-pc__img--a{opacity:0}
.cc-pc--swap:hover .cc-pc__img--b,
.cc-pc--swap:focus-within .cc-pc__img--b{opacity:1}
.cc-pc:hover .cc-pc__img,
.cc-pc:focus-within .cc-pc__img{transform:scale(1.02)}
.cc-pc__noimg{
  display:flex;width:100%;height:100%;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,var(--s-paper) 0 12px,#EFE9DC 12px 24px);
}
.cc-pc__badge{
  position:absolute;top:12px;left:12px;z-index:2;
  background:var(--s-yellow);color:var(--s-ink);border-radius:2px;
  font-family:var(--s-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;padding:6px 10px;
}
.cc-pc__wl{position:absolute;top:10px;right:10px;z-index:3}

.cc-pc__body{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.cc-pc__name{
  margin:0 0 4px;font-family:var(--s-disp);font-weight:400;font-size:21px;line-height:1.18;
  color:var(--s-ink);text-wrap:pretty;
}
body.cc-shop .cc-pc__name a{color:var(--s-ink);text-decoration:none}
body.cc-shop .cc-pc__name a:hover{text-decoration:underline;text-decoration-color:var(--s-yellow);text-underline-offset:4px}
.cc-pc__type{
  margin:0 0 8px;font-family:var(--s-mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--s-muted);
}
.cc-pc__price{font-size:16px;color:var(--s-ink);font-variant-numeric:tabular-nums;margin:0 0 14px}
body.cc-shop .cc-pc__price del{color:var(--s-muted);margin-right:6px;opacity:.7}
body.cc-shop .cc-pc__price ins{text-decoration:none;font-weight:500}
.cc-pc__stock{margin:-8px 0 12px;font-family:var(--s-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--s-clay)}
.cc-pc__acts{margin-top:auto;display:flex;flex-direction:column;gap:8px;align-items:flex-start}

body.cc-shop .cc-pc__add{
  display:inline-flex;align-items:center;justify-content:center;width:100%;
  min-height:48px;padding:13px 20px;border-radius:2px;text-decoration:none;cursor:pointer;
  background-color:var(--s-ink)!important;color:var(--s-ivory)!important;
  -webkit-text-fill-color:var(--s-ivory)!important;border:1px solid var(--s-ink)!important;
  font-family:var(--s-body);font-size:15px;font-weight:500;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
body.cc-shop .cc-pc__add:hover,
body.cc-shop .cc-pc__add:focus-visible{
  background-color:var(--s-yellow)!important;color:var(--s-ink)!important;
  -webkit-text-fill-color:var(--s-ink)!important;border-color:var(--s-yellow)!important;
}
body.cc-shop .cc-pc__add.loading{opacity:.7;pointer-events:none}
body.cc-shop .cc-pc__add.added{background-color:var(--s-yellow)!important;color:var(--s-ink)!important;-webkit-text-fill-color:var(--s-ink)!important}
/* WooCommerce injects its own "View cart" link after an ajax add. */
body.cc-shop li.product a.added_to_cart{
  display:inline-flex;align-items:center;min-height:36px;font-size:14px;color:var(--s-ink);
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--s-rule-2);
}
body.cc-shop .cc-pc__view{
  font-size:14.5px;color:var(--s-ink);text-decoration:underline;
  text-decoration-color:var(--s-rule-2);text-underline-offset:5px;
}
body.cc-shop .cc-pc__view:hover{text-decoration-color:var(--s-yellow)}
.cc-pc--oos .cc-pc__media{opacity:.72}

/* pagination */
body.cc-shop .woocommerce-pagination{margin:52px auto 0;padding-top:28px;border-top:1px solid var(--s-rule)}
body.cc-shop .woocommerce-pagination ul{border:0!important;display:flex;gap:8px;justify-content:center;margin:0;padding:0}
body.cc-shop .woocommerce-pagination li{border:0!important;margin:0}
body.cc-shop .woocommerce-pagination a,
body.cc-shop .woocommerce-pagination span{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
  padding:10px 14px;border:1px solid var(--s-rule);border-radius:999px;
  color:var(--s-ink)!important;background:transparent!important;text-decoration:none;font-size:15px;
}
body.cc-shop .woocommerce-pagination span.current{
  background:var(--s-ink)!important;color:var(--s-ivory)!important;border-color:var(--s-ink);
}
body.cc-shop .woocommerce-pagination a:hover{border-color:var(--s-ink)}

/* ------------------------------------------------------------- empty result */
.cc-sh-empty{padding:72px 32px 96px;text-align:center}
.cc-sh-empty__p{margin:0 auto 26px;max-width:52ch;font-size:16px;line-height:1.6;color:var(--s-muted)}
.cc-sh-empty__acts{display:flex;gap:22px;align-items:center;justify-content:center;flex-wrap:wrap;margin:0}

/* -------------------------------------------------------- bestseller spotlight */
.cc-sh-best{background:var(--s-ivory);padding:88px 0 0}
.cc-sh-best__in{
  position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:0;align-items:stretch;
}
/* The dark panel's backdrop: the product's own moody photograph, dimmed. */
.cc-sh-best__bg{
  position:absolute;left:0;top:0;bottom:0;width:52.4%;z-index:0;
  background-size:cover;background-position:center;
}
.cc-sh-best__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(42,33,26,.78),rgba(42,33,26,.9))}
.cc-sh-best__head,.cc-sh-best__card--1{position:relative;z-index:1;background:transparent!important}
.cc-sh-best__card--2{position:relative;z-index:1}
.cc-sh-best__card--1 .cc-sh-best__media{padding:16px 0 0}
.cc-sh-best__card--1 .cc-sh-best__img,.cc-sh-best__card--2 .cc-sh-best__img{
  object-fit:contain;max-height:420px;width:auto;margin:0 auto;
  border-radius:0;
}
body.cc-shop .cc-sh-best .cc-sh-btn--accent{
  border-radius:2px!important;font-family:var(--s-mono);font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;min-height:48px;padding:14px 26px;
}
.cc-sh-best__rail{
  position:absolute;left:6px;top:50%;margin:0;transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;font-family:var(--s-mono);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--s-muted);
}
.cc-sh-best__head{grid-column:1/2;background:var(--s-espresso);padding:56px 48px 12px}
.cc-sh-best__sub{
  margin:20px 0 0;font-family:var(--s-mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(245,241,232,.62);line-height:1.9;
}
.cc-sh-best__card{display:grid;grid-template-rows:auto auto}
.cc-sh-best__card--1{grid-column:1/2;background:var(--s-espresso);padding:0 48px 56px}
.cc-sh-best__card--2{grid-column:2/3;grid-row:1/3;background:var(--s-paper);padding:56px 48px;display:flex;flex-direction:column;justify-content:center}
.cc-sh-best__media{margin:0 0 26px}
.cc-sh-best__img{width:100%;height:auto;display:block;}
.cc-sh-best__card--1 .cc-sh-best__img{border-radius:2px}
.cc-sh-best__n{
  margin:0 0 12px;font-family:var(--s-mono);font-size:11px;letter-spacing:.2em;color:var(--s-muted);
  display:flex;align-items:center;gap:12px;
}
.cc-sh-best__n::before{content:"";width:34px;height:1px;background:currentColor;display:inline-block}
.cc-sh-best__card--1 .cc-sh-best__n{color:rgba(245,241,232,.6)}
.cc-sh-best__name{margin:0 0 10px;font-family:var(--s-disp);font-weight:400;font-size:27px;line-height:1.16}
body.cc-shop .cc-sh-best__card--1 .cc-sh-best__name a{color:var(--s-paper);text-decoration:none}
body.cc-shop .cc-sh-best__card--2 .cc-sh-best__name a{color:var(--s-ink);text-decoration:none}
body.cc-shop .cc-sh-best__name a:hover{text-decoration:underline;text-decoration-color:var(--s-yellow);text-underline-offset:5px}
.cc-sh-best__line{margin:0 0 16px;font-size:15px;line-height:1.6;max-width:44ch;color:var(--s-muted)}
.cc-sh-best__card--1 .cc-sh-best__line{color:rgba(245,241,232,.78)}
.cc-sh-best__price{margin:0 0 22px;font-size:17px;font-variant-numeric:tabular-nums}
.cc-sh-best__card--1 .cc-sh-best__price{color:var(--s-paper)}
.cc-sh-best__acts{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.cc-sh-best__say{
  position:absolute;right:48px;bottom:14%;margin:0;max-width:9ch;
  font-family:var(--s-disp);font-size:22px;line-height:1.35;color:var(--s-muted);text-align:left;
}
@media(max-width:1080px){
  .cc-sh-best__bg{width:100%;height:auto;bottom:auto}
  .cc-sh-best__head,.cc-sh-best__card--1{background:var(--s-espresso)!important}
  .cc-sh-best{padding-top:64px}
  .cc-sh-best__in{grid-template-columns:1fr}
  .cc-sh-best__head,.cc-sh-best__card--1,.cc-sh-best__card--2{grid-column:1/-1;grid-row:auto;padding:36px 22px}
  .cc-sh-best__head{padding-bottom:8px}
  .cc-sh-best__card--1{padding-top:12px}
  .cc-sh-best__rail,.cc-sh-best__say{display:none}
}


/* The second bestseller sits on the light panel: its text link reads as ink. */
body.cc-shop .cc-sh-best__card--2 .cc-sh-textlink--light{color:var(--s-ink);text-decoration-color:var(--s-rule-2)}
body.cc-shop .cc-sh-best__card--2 .cc-sh-textlink--light:hover{text-decoration-color:var(--s-yellow)}
.cc-sh-best__card--2 .cc-sh-best__n{color:var(--s-muted)}

/* ---------------------------------------------------------- concern slices */
.cc-sh-con{background:var(--s-ivory);padding:96px 0 88px}
.cc-sh-con__head{max-width:64ch;margin-bottom:34px}
.cc-sh-con__sub{margin:0 0 16px;font-size:17px;line-height:1.6;color:var(--s-muted)}

.cc-sh-con__slices{display:flex;gap:6px;align-items:stretch;min-height:520px}
.cc-sh-slice{
  position:relative;flex:0 0 auto;width:132px;overflow:hidden;border-radius:2px;
  background:var(--s-paper);display:flex;flex-direction:column;justify-content:flex-end;
  transition:width .42s cubic-bezier(.2,.7,.2,1);
}
.cc-sh-slice.is-open{flex:1 1 auto;width:auto;min-width:300px}
.cc-sh-slice__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
/* !important because the theme sets a global img{height:auto}, which otherwise
   keeps the photograph at its intrinsic ratio and leaves the slice half empty. */
.cc-sh-slice__bg{background:linear-gradient(180deg,#F4EDDE 0%,#E6DCC8 100%)}
body.cc-shop .cc-sh-slice__img{
  position:absolute;left:0;right:0;bottom:0;top:auto;width:100%!important;height:82%!important;
  max-width:none!important;object-fit:contain;object-position:bottom center;display:block;
  padding:6% 8% 0;box-sizing:border-box;
}
.cc-sh-slice.is-open .cc-sh-slice__img{height:70%!important;object-position:top right;padding:4% 4% 0 40%}
.cc-sh-slice::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(27,26,23,0) 55%,rgba(27,26,23,.55) 100%);
}
.cc-sh-slice.is-open::after{background:linear-gradient(90deg,rgba(251,247,239,.96) 0%,rgba(251,247,239,.96) 42%,rgba(251,247,239,0) 62%)}
.cc-sh-slice.is-open{background:var(--s-ivory);box-shadow:0 20px 40px -24px rgba(27,26,23,.35)}
.cc-sh-slice.is-open .cc-sh-slice__panel,.cc-sh-slice.is-open .cc-sh-slice__h{max-width:46%}
.cc-sh-slice__h{margin:0;position:relative;z-index:2}
body.cc-shop .cc-sh-slice__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:transparent;border:0;cursor:pointer;padding:20px;min-height:64px;
  font-family:var(--s-disp);font-size:24px;line-height:1.15;color:var(--s-paper);text-align:left;
}
.cc-sh-slice.is-open .cc-sh-slice__btn{color:var(--s-ink);font-size:30px}
.cc-sh-slice__ic{
  flex:0 0 auto;width:28px;height:28px;border-radius:999px;border:1px solid currentColor;
  display:inline-flex;align-items:center;justify-content:center;
}
.cc-sh-slice.is-open .cc-sh-slice__ic svg{transform:rotate(45deg)}
.cc-sh-slice__panel{position:relative;z-index:2;padding:0 24px 28px;max-width:44ch}
.cc-sh-slice__copy{margin:0 0 16px;font-size:15.5px;line-height:1.6;color:var(--s-ink)}
.cc-sh-slice__panel .cc-sh-textlink{margin-left:16px}

/* Slices that are only tall thin labels keep their text upright and readable. */
.cc-sh-slice:not(.is-open) .cc-sh-slice__btn{
  font-size:20px;align-items:flex-end;padding-bottom:22px;
}
.cc-sh-slice:not(.is-open) .cc-sh-slice__label{
  display:block;max-width:8ch;text-wrap:balance;
}

@media(max-width:900px){
  .cc-sh-con{padding:64px 0 56px}
  .cc-sh-con__slices{flex-direction:column;min-height:0;gap:0;border-top:1px solid var(--s-rule)}
  .cc-sh-slice,.cc-sh-slice.is-open{width:auto;min-width:0;border-radius:0;border-bottom:1px solid var(--s-rule);background:transparent}
  .cc-sh-slice__bg{position:relative;inset:auto;width:64px;height:64px;flex:0 0 auto;border-radius:2px;overflow:hidden}
  .cc-sh-slice::after,.cc-sh-slice.is-open::after{display:none}
  .cc-sh-slice{display:grid;grid-template-columns:64px 1fr;grid-template-areas:"img head" ". panel";gap:0 14px;padding:12px 0;align-items:center}
  .cc-sh-slice__bg{grid-area:img}
  .cc-sh-slice__h{grid-area:head}
  .cc-sh-slice__panel{grid-area:panel;padding:6px 0 12px;max-width:none}
  body.cc-shop .cc-sh-slice__btn,
  body.cc-shop .cc-sh-slice.is-open .cc-sh-slice__btn{color:var(--s-ink);font-size:21px;padding:8px 0;min-height:48px;align-items:center}
  .cc-sh-slice:not(.is-open) .cc-sh-slice__label{max-width:none}
  .cc-sh-slice__panel .cc-sh-textlink{margin-left:0;margin-top:10px}
  .cc-sh-slice__panel .cc-sh-btn{margin-right:14px;white-space:nowrap}
  .cc-sh-slice.is-open .cc-sh-slice__panel,.cc-sh-slice.is-open .cc-sh-slice__h{max-width:none}
  .cc-sh-slice__panel{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
  .cc-sh-slice__copy{flex:1 1 100%;margin:0}
}

.cc-sh-con__steps{
  list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;
  margin:44px 0 0;padding:28px 0 0;border-top:1px solid var(--s-rule);
}
.cc-sh-con__steps li{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:baseline}
.cc-sh-con__num{
  grid-row:1/3;font-family:var(--s-disp);font-size:34px;color:var(--s-rule-2);line-height:1;
}
.cc-sh-con__steps strong{font-weight:500;font-size:15.5px;color:var(--s-ink)}
.cc-sh-con__steps span:not(.cc-sh-con__num){font-size:14px;line-height:1.55;color:var(--s-muted)}
@media(max-width:760px){.cc-sh-con__steps{grid-template-columns:1fr;gap:18px}}

/* ------------------------------------------------- bundles / quiz / proof */
.cc-sh-close{background:var(--s-ivory);padding:0 0 0}
.cc-sh-close__in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:0;align-items:stretch}
.cc-sh-close__light{background:var(--s-paper);padding:64px 56px;position:relative}
.cc-sh-close__dark{background:var(--s-espresso);padding:64px 48px;display:flex;flex-direction:column;align-items:flex-start;position:relative}
.cc-sh-close__copy{margin:0 0 26px;font-size:16.5px;line-height:1.6;color:var(--s-muted);max-width:44ch}
.cc-sh-close__copy--light{color:rgba(245,241,232,.8)}
.cc-sh-close__dark .cc-sh-textlink{margin-top:20px}
.cc-sh-close__art{position:relative;margin:34px 0 0;height:clamp(240px,26vw,380px)}
.cc-sh-plinth--bundle{left:6%;right:6%;bottom:0;height:22%}
body.cc-shop .cc-sh-close__img{
  position:absolute;left:0;right:0;bottom:8%;width:100%!important;height:96%!important;max-width:none!important;
  object-fit:contain;object-position:bottom center;display:block;
}
.cc-sh-close__groups{
  list-style:none;display:flex;gap:0;margin:30px 0 0;padding:22px 0 0;border-top:1px solid var(--s-rule);
}
.cc-sh-close__groups li{
  flex:1 1 0;text-align:center;font-family:var(--s-disp);font-size:20px;color:var(--s-ink);
  border-left:1px solid var(--s-rule);padding:0 12px;
}
.cc-sh-close__groups li:first-child{border-left:0}
.cc-sh-close__say{
  margin:auto 0 0;padding-top:34px;font-family:var(--s-disp);font-size:22px;line-height:1.35;
  color:rgba(245,241,232,.55);
}
@media(max-width:960px){
  .cc-sh-close__in{grid-template-columns:1fr}
  .cc-sh-close__light,.cc-sh-close__dark{padding:44px 22px}
  .cc-sh-close__groups{flex-direction:column;gap:10px}
  .cc-sh-close__groups li{border-left:0;text-align:left;padding:0}
}

.cc-sh-proof{
  list-style:none;display:flex;gap:0;margin:0;padding-top:26px;padding-bottom:34px;
  border-top:1px solid var(--s-rule);
}
.cc-sh-proof>li{
  flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:12px;
  font-size:15px;color:var(--s-ink);border-left:1px solid var(--s-rule);padding:0 16px;
}
.cc-sh-proof>li:first-child{border-left:0}
body.cc-shop .cc-sh-proof a{color:var(--s-ink);text-decoration:underline;text-decoration-color:var(--s-rule-2);text-underline-offset:4px}
body.cc-shop .cc-sh-proof a:hover{text-decoration-color:var(--s-yellow)}
@media(max-width:860px){
  .cc-sh-proof{flex-direction:column;gap:14px;align-items:flex-start;padding-bottom:26px}
  .cc-sh-proof>li{justify-content:flex-start;border-left:0;padding:0;font-size:14px}
}

@media (prefers-reduced-motion: reduce){
  body.cc-shop *,
  body.cc-shop *::before,
  body.cc-shop *::after{transition:none!important;animation:none!important}
  .cc-pc:hover .cc-pc__img,.cc-pc:focus-within .cc-pc__img{transform:none}
}


/* ================================================================
   Master 020 — visual-fidelity correction layer
   ================================================================ */

/* --- global rhythm: content width and the dead band under the header --- */
.cc-sh-cat,.cc-sh-best__in,.cc-sh-con__in,.cc-sh-close__in,body.cc-shop ul.products,
body.cc-shop .woocommerce-pagination,.cc-sh-proof,.cc-sh-trust,.cc-sh-rail,.cc-sh-empty,
body.cc-shop .woocommerce-notices-wrapper{max-width:1360px}
body.cc-shop .woocommerce-breadcrumb{
  max-width:1360px;margin:0 auto 6px!important;padding:8px 32px 6px!important;line-height:1.4;
  font-family:var(--s-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--s-muted);
}
body.cc-shop .woocommerce-breadcrumb a{color:var(--s-muted)}
/* Anything the theme/WooCommerce pads above the archive is collapsed here. */
body.cc-shop .site-main>.woocommerce>*:first-child{margin-top:0}
/* The theme pads main.site-main by 220px under its sticky header; on the
   archive that is the dead band. Heavier than the theme's own selector. */
html body.cc-shop main.site-main.site-main,
html body.cc-shop .site-main.site-main{padding-top:0!important;margin-top:0!important}
body.cc-shop .woocommerce{padding-top:0!important}

/* --- rail flush against the hero, trust line tight beneath --- */
.cc-sh-rail{margin:0;border-top:1px solid var(--s-rule-2);border-bottom:1px solid var(--s-rule)}
body.cc-shop .cc-sh-rail__link{min-height:58px;padding:18px 24px;font-size:15.5px;transition:color .2s ease,border-color .2s ease}
body.cc-shop .cc-sh-rail__link.is-on{font-weight:600;border-bottom:2px solid var(--s-yellow)}
body.cc-shop .cc-sh-rail__link:hover{color:var(--s-ink);border-bottom-color:var(--s-rule-2)}
body.cc-shop .cc-sh-rail__link:active{transform:translateY(1px)}
.cc-sh-trust{padding-top:22px;padding-bottom:22px;border-bottom:1px solid var(--s-rule)}
/* The fade + gutter only belong on the widths where the row really scrolls;
   above that they would push the centred row off its own centre line. */
@media(max-width:959px){
  .cc-sh-rail__in{padding-right:40px;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
}

/* --- catalogue heading + sticky toolbar --- */
.cc-sh-cat{padding-top:88px}
.cc-sh-cat__head{
  grid-template-columns:minmax(0,1fr) minmax(0,.7fr);grid-template-areas:"eye lede" "h2 lede";
  gap:0 32px;align-items:end;padding-bottom:22px;
}
.cc-sh-cat__head .cc-sh-eyebrow{grid-area:eye}
.cc-sh-cat__head .cc-sh-h2{grid-area:h2}
.cc-sh-cat__lede{grid-area:lede}
.cc-sh-cat__head .cc-sh-h2{margin:0;max-width:16ch}
.cc-sh-cat__lede{margin:0 0 6px;justify-self:end;max-width:40ch;font-size:15.5px;line-height:1.6;color:var(--s-muted);text-align:left;padding-bottom:10px;border-bottom:1px solid var(--s-rule-2)}
@media(max-width:900px){.cc-sh-cat{padding-top:64px}.cc-sh-cat__head{grid-template-columns:1fr;grid-template-areas:"eye" "h2"}.cc-sh-cat__lede{display:none}}

.cc-sh-tb{
  position:sticky;top:var(--cc-hdr,0px);z-index:60;background:var(--s-ivory);
  padding:12px 0;border-bottom:1px solid var(--s-rule);align-items:center;
}
body.cc-shop.cc-js .cc-sh-tb.is-stuck{box-shadow:0 12px 24px -20px rgba(27,26,23,.35)}
.cc-sh-tb__count{font-size:14.5px}
.cc-sh-tb__panels{align-items:center}
body.cc-shop .cc-sh-fg__btn{min-height:42px;padding:9px 14px;font-size:15px;transition:border-color .2s ease,background-color .2s ease}
body.cc-shop .cc-sh-fg__btn:active{transform:translateY(1px)}
.cc-sh-fg+.cc-sh-fg .cc-sh-fg__btn::before{content:"";display:inline-block;width:1px;height:16px;background:var(--s-rule-2);margin-right:14px}
body.cc-shop .cc-sh-sort select{min-height:42px;font-size:15px}
.cc-sh-tb__mobile{display:none}
/* Collapse to Filters (n) + Sort before six controls get squeezed. */
@media(max-width:1100px){
  .cc-sh-tb{gap:10px;justify-content:space-between}
  body.cc-shop.cc-js .cc-sh-tb__count{margin-right:auto}
  body.cc-shop.cc-js .cc-sh-tb__mobile{
    display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:12px 18px;
    border:1px solid var(--s-rule-2);border-radius:999px;background:transparent;cursor:pointer;
    font-family:var(--s-body);font-size:15px;color:var(--s-ink);
  }
  body.cc-shop.cc-js .cc-sh-tb__panels{
    position:fixed;inset:0;z-index:100000;display:none;flex-direction:column;align-items:stretch;
    gap:0;background:var(--s-ivory);padding:22px 18px 26px;overflow-y:auto;
  }
  body.cc-shop.cc-js .cc-sh-tb__panels.is-open{display:flex}
  body.cc-shop.cc-js .cc-sh-tb__panels .cc-sh-fg{border-bottom:1px solid var(--s-rule)}
  body.cc-shop.cc-js .cc-sh-tb__panels .cc-sh-fg__btn{width:100%;justify-content:space-between;min-height:54px;border-radius:0}
  .cc-sh-fg+.cc-sh-fg .cc-sh-fg__btn::before{display:none}
  body.cc-shop.cc-js .cc-sh-tb__panels .cc-sh-fg__panel{position:static;box-shadow:none;border:0;padding:0 0 12px;max-width:none;min-width:0;max-height:none}
  body.cc-shop.cc-js .cc-sh-tb__panels .cc-sh-sort{margin:22px 0 0;flex-direction:column;align-items:stretch;gap:8px}
  body.cc-shop.cc-js .cc-sh-tb__panels .cc-sh-sort select{width:100%}
}

/* --- product-card system --- */
body.cc-shop ul.products{gap:34px 24px;margin-top:32px!important}
@media(max-width:767px){body.cc-shop ul.products{gap:26px 14px}}
/* A small, cohesive surface system instead of one flat beige everywhere. */
.cc-pc__media{background:#F4EFE5;border-radius:3px;margin-bottom:16px}
body.cc-shop ul.products li.product:nth-child(4n+2) .cc-pc__media{background:#F1EBDF}
body.cc-shop ul.products li.product:nth-child(4n+3) .cc-pc__media{background:#F6F2EA}
body.cc-shop ul.products li.product:nth-child(4n+4) .cc-pc__media{background:#EFE9DC}
/* Contact shadow under the package base (the base line is at 86%). */
.cc-pc__ground{
  position:absolute;left:18%;right:18%;top:83.5%;height:5%;border-radius:50%;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(60,45,30,.22) 0%,rgba(60,45,30,.08) 48%,rgba(60,45,30,0) 72%);
  transition:opacity .35s ease;
}
.cc-pc--swap:hover .cc-pc__ground,.cc-pc--swap:focus-within .cc-pc__ground{opacity:0}
.cc-pc__imglink,.cc-pc__img{z-index:2}
/* Quiet typographic mark for a record with no photograph. */
.cc-pc__noimg{background:none;position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.cc-pc__noimg-mark{font-family:var(--s-disp);font-style:italic;font-size:22px;color:var(--s-rule-2);text-align:center;padding:0 18px}
/* One content block so price and actions align across a row. */
.cc-pc__name{min-height:2.36em;font-size:20px}
.cc-pc__type{min-height:1.2em}
.cc-pc__acts{margin-top:auto}
body.cc-shop .cc-pc__add{transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .12s ease}
body.cc-shop .cc-pc__add:active{transform:scale(.985)}
body.cc-shop .cc-pc__view{transition:text-decoration-color .2s ease}
.cc-pc:hover .cc-pc__img,.cc-pc:focus-within .cc-pc__img{transform:scale(1.02)}

/* --- bestseller spotlight: one asymmetric composition, 58/42 --- */
.cc-sh-best{padding-top:120px}
.cc-sh-best__in{grid-template-columns:minmax(0,58fr) minmax(0,42fr)}
.cc-sh-best__bg{width:58%}
.cc-sh-best__head{padding:52px 48px 6px}
.cc-sh-best__card--1{padding:0 48px 48px}
.cc-sh-best__card--1 .cc-sh-best__media{padding:6px 0 0}
.cc-sh-best__card--1 .cc-sh-best__img{max-height:400px}
.cc-sh-best__card--2{padding:44px 40px 44px;justify-content:space-between}
.cc-sh-best__card--2 .cc-sh-best__media{
  position:relative;flex:1 1 auto;display:flex;align-items:flex-end;justify-content:center;
  min-height:420px;margin:0 0 22px;
  background:linear-gradient(180deg,#F7F2E9 0%,#EEE7DA 100%);border-radius:3px;
}
.cc-sh-best__card--2 .cc-sh-best__img{max-height:520px;width:auto;max-width:78%;margin:0 auto 6%;position:relative;z-index:2}
.cc-sh-best__card--2 .cc-sh-best__media::after{
  content:"";position:absolute;left:22%;right:22%;bottom:4%;height:5%;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(60,45,30,.3) 0%,rgba(60,45,30,.1) 46%,rgba(60,45,30,0) 72%);
}
.cc-sh-best__card--1 .cc-sh-best__media{position:relative}
.cc-sh-best__card--1 .cc-sh-best__media::after{
  content:"";position:absolute;left:22%;right:22%;bottom:-2%;height:5%;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.45) 0%,rgba(0,0,0,.15) 46%,rgba(0,0,0,0) 72%);
}
.cc-sh-best__say{right:40px;bottom:auto;top:52px;text-align:right;color:var(--s-muted)}
@media(max-width:1080px){
  .cc-sh-best{padding-top:88px}
  .cc-sh-best__in{grid-template-columns:1fr}
  .cc-sh-best__bg{width:100%}
  .cc-sh-best__card--2{padding:36px 22px}
  .cc-sh-best__card--2 .cc-sh-best__media{min-height:0;height:min(72vw,440px)}
  .cc-sh-best__card--2 .cc-sh-best__img{max-height:82%}
}

/* --- concern discovery: photographic slices, 480px, one open at ~38% --- */
.cc-sh-con{padding:120px 0 104px}
.cc-sh-con__slices{min-height:480px;height:480px;gap:8px}
.cc-sh-slice{width:0;flex:1 1 0;min-width:0;border-radius:3px;background:#E9E1D3}
.cc-sh-slice.is-open{flex:0 0 38%;width:38%;min-width:0}
.cc-sh-slice__bg{background:#E9E1D3}
body.cc-shop .cc-sh-slice__img{
  position:absolute!important;inset:0!important;top:0!important;width:100%!important;height:100%!important;
  max-width:none!important;object-fit:cover!important;object-position:center!important;padding:0!important;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.cc-sh-slice.is-open .cc-sh-slice__img{height:100%!important;object-position:center!important;padding:0!important}
.cc-sh-slice:hover .cc-sh-slice__img{transform:scale(1.02)}
/* Controlled overlays so labels keep contrast on any photograph. */
.cc-sh-slice::after{background:linear-gradient(180deg,rgba(27,26,23,.04) 0%,rgba(27,26,23,.12) 50%,rgba(27,26,23,.66) 100%)}
.cc-sh-slice.is-open::after{background:linear-gradient(90deg,rgba(251,247,239,.96) 0%,rgba(251,247,239,.92) 44%,rgba(251,247,239,.18) 66%,rgba(251,247,239,0) 100%)}
.cc-sh-slice.is-open .cc-sh-slice__panel,.cc-sh-slice.is-open .cc-sh-slice__h{max-width:48%}
.cc-sh-slice.is-open .cc-sh-slice__panel{padding:0 26px 28px}
.cc-sh-slice.is-open .cc-sh-slice__btn{padding:22px 26px 10px}
body.cc-shop .cc-sh-slice__btn{transition:color .2s ease}
.cc-sh-slice:not(.is-open) .cc-sh-slice__btn{font-size:21px;color:var(--s-ivory);text-shadow:0 1px 2px rgba(0,0,0,.25)}
.cc-sh-slice:not(.is-open) .cc-sh-slice__btn:hover .cc-sh-slice__ic,
.cc-sh-slice__btn:focus-visible .cc-sh-slice__ic{background:var(--s-yellow);color:var(--s-ink);border-color:var(--s-yellow)}
.cc-sh-slice__ic{transition:background-color .2s ease,color .2s ease,transform .3s ease}
.cc-sh-con__steps{margin-top:40px}
@media(max-width:900px){
  .cc-sh-con{padding:88px 0 72px}
  .cc-sh-con__slices{height:auto;min-height:0}
  /* Real vertical accordion: a cropped image band on every concern. */
  .cc-sh-slice,.cc-sh-slice.is-open{display:block;width:auto;flex:none;padding:0;border-bottom:0;margin:0 0 10px;overflow:hidden;background:#E9E1D3}
  .cc-sh-slice__bg{position:relative;width:100%;height:150px;border-radius:0}
  .cc-sh-slice.is-open .cc-sh-slice__bg{height:190px}
  .cc-sh-slice::after,.cc-sh-slice.is-open::after{display:none}
  .cc-sh-slice__h{margin:0}
  body.cc-shop .cc-sh-slice__btn,body.cc-shop .cc-sh-slice.is-open .cc-sh-slice__btn,
  body.cc-shop .cc-sh-slice:not(.is-open) .cc-sh-slice__btn{
    padding:14px 16px;min-height:56px;font-size:22px;color:var(--s-ink);text-shadow:none;background:var(--s-white);
  }
  body.cc-shop .cc-sh-slice:not(.is-open) .cc-sh-slice__ic{border-color:var(--s-rule-2);color:var(--s-ink);background:transparent}
  .cc-sh-slice.is-open .cc-sh-slice__panel,.cc-sh-slice.is-open .cc-sh-slice__h{max-width:none}
  .cc-sh-slice__panel{padding:0 16px 18px;background:var(--s-white);display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
  .cc-sh-slice__copy{flex:1 1 100%;margin:0}
  .cc-sh-slice__panel .cc-sh-textlink{margin:0}
}

/* Without JavaScript every concern panel is readable (the buttons cannot open them). */
body.cc-shop:not(.cc-js) .cc-sh-slice__panel[hidden]{display:block}
/* Paginated views: compact header carrying the single H1. */
.cc-sh-paged{max-width:1360px;margin:0 auto;padding:8px 32px 28px;border-bottom:1px solid var(--s-rule)}
.cc-sh-paged .cc-sh-h1--paged{font-size:clamp(34px,4vw,54px);max-width:18ch;margin:0}
@media(max-width:700px){.cc-sh-paged{padding:6px 18px 22px}}

/* --- bundle / quiz close: 61/39, product set grounded on the plate --- */
.cc-sh-close{padding-top:8px}
.cc-sh-close__in{grid-template-columns:minmax(0,61fr) minmax(0,39fr)}
.cc-sh-close__light{padding:56px 56px 40px;overflow:hidden}
.cc-sh-close__dark{padding:56px 44px}
.cc-sh-close__art{position:relative;height:clamp(300px,30vw,420px);margin:26px -56px 0;border-radius:0;overflow:hidden}
body.cc-shop .cc-sh-close__env{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;
  object-fit:cover!important;object-position:62% 70%!important;display:block;
}
.cc-sh-close__art::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(245,241,232,.9) 0%,rgba(245,241,232,.35) 34%,rgba(245,241,232,0) 60%);z-index:1}
.cc-sh-close__shadow{
  position:absolute;left:36%;right:14%;bottom:12.5%;height:5%;border-radius:50%;z-index:2;
  background:radial-gradient(ellipse at center,rgba(60,45,30,.4) 0%,rgba(60,45,30,.14) 46%,rgba(60,45,30,0) 72%);
}
body.cc-shop .cc-sh-close__img{
  position:absolute!important;left:34%!important;right:12%!important;bottom:15%!important;top:auto!important;
  width:54%!important;height:66%!important;max-width:none!important;object-fit:contain!important;object-position:bottom center!important;z-index:3;
}
.cc-sh-close__groups{margin-top:0;padding-top:22px;border-top:1px solid var(--s-rule);position:relative;z-index:2;background:var(--s-paper)}
@media(max-width:960px){
  .cc-sh-close__in{grid-template-columns:1fr}
  .cc-sh-close__light{padding:44px 22px 28px}
  .cc-sh-close__art{margin:22px -22px 0;height:min(64vw,360px)}
  body.cc-shop .cc-sh-close__img{left:12%!important;right:12%!important;width:76%!important;height:64%!important}
  .cc-sh-close__shadow{left:16%;right:16%}
  .cc-sh-close__art::before{background:linear-gradient(180deg,rgba(245,241,232,.6),rgba(245,241,232,0) 40%)}
}
.cc-sh-proof{padding-top:24px;padding-bottom:40px;border-top:1px solid var(--s-rule-2)}

/* --- restrained motion everywhere --- */
body.cc-shop .cc-sh-btn,body.cc-shop .cc-sh-textlink,body.cc-shop .cc-sh-chip,body.cc-shop .cc-sh-fg__opt{transition-duration:.2s}
@media (prefers-reduced-motion: reduce){
  .cc-sh-hero__copy>*,.cc-sh-art,.cc-sh-art__note{opacity:1!important;transform:none!important;transition:none!important}
}

/* Strips are capped at the content width; on wider screens they must sit centred,
   not against the left edge (later shorthand margins had reset the auto margins). */
.cc-sh-proof,.cc-sh-trust,.cc-sh-rail{margin-left:auto;margin-right:auto}

/* The family tabs sit centred inside that strip whenever the row fits. `safe`
   drops back to the start edge on its own the moment the row is wider than the
   rail, so the first tab can never be scrolled out of reach; the width query
   does the same job for engines that do not know the keyword. The row measures
   ~858px and the rail keeps 32px gutters, so 1000px is the first width where it
   fits with room to spare; between 960 and 999 `safe center` handles it and the
   scroll fade is already out of the way. */
.cc-sh-rail__in{justify-content:safe center}
@media(min-width:1000px){
  .cc-sh-rail__in{justify-content:center}
}

/* A product that must be configured first links to its own page; it reads as a
   quieter control than the add button so the bag action stays the loud one. */
body.cc-shop .cc-pc__add--choose{
  background-color:transparent!important;color:var(--s-ink)!important;
  -webkit-text-fill-color:var(--s-ink)!important;border:1px solid var(--s-ink)!important;
}
body.cc-shop .cc-pc__add--choose:hover,
body.cc-shop .cc-pc__add--choose:focus-visible{
  background-color:var(--s-ink)!important;color:var(--s-ivory)!important;
  -webkit-text-fill-color:var(--s-ivory)!important;border-color:var(--s-ink)!important;
}

/* --- Master 019 follow-up: editorial photograph leads the card, the result
   visualization is the hover. Its two panel labels ride along with the hover
   so the comparison is never shown unlabelled. --- */
.cc-pc__vizlab{
  position:absolute;bottom:10px;z-index:3;pointer-events:none;opacity:0;transition:opacity .35s ease;
  max-width:calc(50% - 16px);font-family:var(--s-mono);font-size:8.5px;font-weight:600;line-height:1.2;
  letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;border-radius:999px;
  background:rgba(27,26,23,.74);color:#FBF7EF;
}
.cc-pc__vizlab--l{left:10px}
.cc-pc__vizlab--r{right:10px;text-align:right}
.cc-pc--viz.cc-pc--swap:hover .cc-pc__vizlab,.cc-pc--viz.cc-pc--swap:focus-within .cc-pc__vizlab{opacity:1}
@media (hover:none){.cc-pc--viz.cc-pc--swap:hover .cc-pc__vizlab{opacity:0}}

/* ================================================================
   Owner's finished Shop photography (hero composite + bestseller editorials)
   ================================================================ */

/* The hero is one photograph now: no cut-out layer, so nothing to stack and
   nothing to keep in register. The stage geometry, the left-edge fade and the
   bleed under the rail all stay exactly as they were. */
.cc-sh-stage--photo .cc-sh-art{display:none}

/* The empty plate could be cropped to a shallow band because everything above
   the plinths was wall. The composite has a bottle near its top edge, so under
   1081px the stage takes the picture's own 4:5 proportion and the plate sits
   flush instead of bleeding down under the rail. Above that the stage still
   crops, but only into the composite's own calm wall. */
@media(max-width:1080px){
  .cc-sh-stage--photo{aspect-ratio:1122/1402}
  .cc-sh-stage--photo .cc-sh-plate-box{bottom:0}
}
@media(min-width:700px) and (max-width:1080px){
  .cc-sh-stage--photo{aspect-ratio:auto;height:calc(min(100vw,780px) * 1.249)}
}

/* Bestseller spotlight, supplied editorial. Each photograph fills its frame and
   carries its own light, so the tinted panel and the drawn contact shadow that a
   cut-out needed are removed rather than layered over a shadow the photograph
   already has. Every rule here is prefixed the same way as the cut-out rules it
   replaces, so it out-ranks them instead of half-winning. */
body.cc-shop .cc-sh-best__card--photo .cc-sh-best__media{
  position:relative;display:block;overflow:hidden;border-radius:2px;
  background:none;padding:0;margin:0 0 26px;min-height:0;height:auto;max-height:none;
  /* The dark card is a grid and the light one a flex column; say the width out
     loud so the frame fills its column in both instead of shrinking to fit. */
  width:100%;justify-self:stretch;align-self:start;
}
body.cc-shop .cc-sh-best__card--photo .cc-sh-best__media::after{content:none}
body.cc-shop .cc-sh-best__card--photo .cc-sh-best__img{
  display:block;width:100%;height:auto;max-width:none;max-height:none;margin:0;
  aspect-ratio:1122/1402;object-fit:cover;object-position:center;border-radius:2px;
}
/* On the two-column composition each panel is taller than a 4:5 frame, so the
   photographs are cropped to a fixed band rather than left to set the height. */
@media(min-width:1081px){
  body.cc-shop .cc-sh-best__card--1.cc-sh-best__card--photo .cc-sh-best__media{height:440px;flex:0 0 auto}
  /* The light card is a flex column that already ends level with the dark one,
     so its photograph takes whatever height is left rather than a fixed band -
     no pool of empty paper under it, whatever the copy runs to. */
  body.cc-shop .cc-sh-best__card--2.cc-sh-best__card--photo .cc-sh-best__media{
    flex:1 1 auto;height:auto;min-height:340px;max-height:none;margin:0 0 22px;
  }
  body.cc-shop .cc-sh-best__card--2.cc-sh-best__card--photo .cc-sh-best__img{
    position:absolute;inset:0;height:100%;width:100%;aspect-ratio:auto;
  }
  body.cc-shop .cc-sh-best__card--1.cc-sh-best__card--photo .cc-sh-best__img{height:100%;aspect-ratio:auto}
}

/* A later unconditional rule had re-applied the desktop 48px side padding to the
   dark bestseller card at every width, so on a phone its photograph and its copy
   sat 26px further in than the light card's. Both cards use the same gutter. */
@media(max-width:1080px){
  body.cc-shop .cc-sh-best__card--1{padding:12px 22px 36px}
}