/* ==========================================================================
   Site-wide pass 2: transparent packshots, expanding ritual panels,
   product-coloured product pages, collage headers, split contact, concern pills.
   Loaded after redesign.css.
   ========================================================================== */

/* transparent packshots (Body Lotion, Cocoa Butter) */
img.png{object-fit:contain!important;object-position:50% 50%!important;padding:7% 16%;transform:none!important;mix-blend-mode:normal!important;clip-path:none!important}
.pc .ph{background:color-mix(in srgb,var(--acc,#9C7A32) 11%,#F6EEE2)}
.pc:hover .ph img.png{transform:scale(1.05)!important}
.gal .car-slide img.png{padding:5% 22%}
.rc .im img.png{padding:5% 10%}
.opt img.png{background:#F1E7D6;padding:3px}

/* expanding ritual panels */
.strips{display:flex;flex-direction:column;gap:10px}
.strip{position:relative;height:108px;border-radius:24px;overflow:hidden;cursor:pointer;background:var(--wine);color:#fff;transition:height .7s var(--ease)}
.strip.on{height:420px}
.strip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease),filter .6s}
.strip:not(.on) img{filter:brightness(.6)}
.strip.on img{transform:scale(1.04)}
.strip::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(74,16,38,.04) 25%,rgba(74,16,38,.9));pointer-events:none}
.strip .cap{position:absolute;z-index:2;left:20px;right:20px;bottom:16px}
.strip .no{font-family:var(--serif);font-size:15px;color:var(--gold-l)}
.strip h3{color:#fff;font-size:23px;margin-top:2px}
.strip .body{max-height:0;overflow:hidden;opacity:0;transition:max-height .6s var(--ease),opacity .5s .1s}
.strip.on .body{max-height:200px;opacity:1}
.strip .body p{font-size:14px;color:#f1dfe0;margin:8px 0 10px;max-width:420px}
.strip .body a{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-l);border-bottom:1px solid var(--gold-l)}
@media(min-width:900px){
  .strips{flex-direction:row;height:580px;gap:12px}
  .strip,.strip.on{height:auto}
  .strip{flex:1;border-radius:30px;transition:flex .85s var(--ease)}
  .strip.on{flex:4.4}
  .strip .cap{left:26px;right:26px;bottom:26px}
  .strip:not(.on) h3{writing-mode:vertical-rl;transform:rotate(180deg);font-size:20px;white-space:nowrap;margin-top:12px}
  .strip.on h3{font-size:32px}
  .strip:not(.on) .no{display:none}
}

/* product page: themed by the product's own colour */
.ptheme{background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 9%,var(--bg)) 0,var(--bg) 78%)}
.ptheme h1{color:color-mix(in srgb,var(--acc) 82%,#2a1018)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tiles li{list-style:none;padding:14px 16px;border-radius:14px;background:color-mix(in srgb,var(--acc) 8%,#fff);border:1px solid color-mix(in srgb,var(--acc) 22%,var(--line));font-weight:700;font-size:13.5px;line-height:1.35;color:color-mix(in srgb,var(--acc) 80%,#2a1018)}
.chiprow{display:flex;flex-wrap:wrap;gap:8px}
.chiprow span{padding:8px 16px;border-radius:30px;background:var(--acc);color:#fff;font-size:13px;font-weight:700}

/* collage header (About, Ingredients) */
.collage{position:relative;aspect-ratio:1/1;width:100%;max-width:540px;margin-left:auto}
.collage figure{position:absolute;border-radius:22px;overflow:hidden;box-shadow:0 22px 40px -18px rgba(74,16,38,.38)}
.collage img{width:100%;height:100%;object-fit:cover}
.collage .c1{inset:0 30% 28% 0}
.collage .c2{right:0;top:10%;width:44%;height:52%}
.collage .c3{left:20%;bottom:0;width:48%;height:44%}

/* split contact */
.csplit{display:grid;gap:16px}
.cpanel{position:relative;border-radius:28px;overflow:hidden;color:#fff;padding:34px 26px;min-height:380px;display:flex;flex-direction:column;justify-content:flex-end;gap:18px}
.cpanel>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cpanel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(74,16,38,.35),rgba(74,16,38,.92))}
.cpanel>*:not(img){position:relative;z-index:2}
.cpanel h3{color:#fff;font-size:26px}
.cpanel p{font-size:14.5px;color:#f1dfe0;margin-top:4px}
.cform{padding:30px 22px;background:#fff;border:1px solid var(--line);border-radius:28px}
@media(min-width:900px){
  .csplit{grid-template-columns:1fr 1.15fr;gap:0;border-radius:36px;overflow:hidden;box-shadow:var(--shadow)}
  .cpanel{border-radius:0;padding:48px 44px;min-height:620px}
  .cform{border:0;border-radius:0;padding:52px 52px}
}

/* shop-by-concern pills */
.cpills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;align-items:center}
.cpills b{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-right:6px}
.cpills a{padding:9px 16px;border-radius:30px;font-size:13px;font-weight:700;color:#fff;transition:transform .25s var(--ease),filter .25s}
.cpills a:hover{transform:translateY(-3px);filter:brightness(1.12)}


/* ---- depth & separation: tinted collection panel, glass filter bar, soft card shadows ---- */
.coll{background:linear-gradient(180deg,#F5E8E2,#F6EEE3);border-radius:32px;margin:0 10px;padding:56px 0}
@media(min-width:900px){.coll{border-radius:44px;margin:0 20px;padding:104px 0}}
.coll .filters{margin:0 0 28px;padding:8px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.9);border-radius:40px;box-shadow:0 10px 26px -14px rgba(74,16,38,.25);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);width:fit-content;max-width:100%}
.coll .filters button{border-color:transparent;background:transparent}
.coll .filters button:hover{background:rgba(255,255,255,.75)}
.coll .filters button.on{background:var(--burg);color:#fff}
.pc{border:0;box-shadow:0 18px 34px -18px rgba(74,16,38,.32),0 2px 8px rgba(74,16,38,.05)}
.pc:hover{box-shadow:0 30px 48px -18px rgba(74,16,38,.42)}


/* ==========================================================================
   One panel system: every coloured section is an inset rounded panel with the
   same margin, radius and gap. White sections sit on the page background.
   (The home hero panel is locked and is not part of this rule.)
   ========================================================================== */
:root{--pm:10px;--pr:32px}
@media(min-width:900px){:root{--pm:20px;--pr:44px}}
.coll,.psec,.band,.bandimg,.phead,.ptheme,.finder-hero,.ftr{margin-left:var(--pm);margin-right:var(--pm);border-radius:var(--pr);overflow:clip}
.coll,.psec,.band,.bandimg{margin-top:10px;margin-bottom:10px}
.phead,.ptheme,.finder-hero{margin-top:6px}
.ftr{margin-top:10px;margin-bottom:12px}
.phead,.ptheme{margin-bottom:0}
.psec.dark{background:var(--wine)}
/* light variant of the ingredient panel */
.psec.tint{background:linear-gradient(180deg,#F5E8E2,#F6EEE3)}
.tint .acard{border:0;background:#fff;box-shadow:0 18px 34px -18px rgba(74,16,38,.3)}
.tint .acard:hover{background:#fff;transform:translateY(-4px)}
.tint .acard b{color:var(--gold)}
.tint .acard h3{color:var(--burg)}
.tint .acard p{color:var(--mute)}