/* Clawora extras (2026-11) — wishlist, recently viewed, complete-the-routine, bag offer, skin quiz, home polish.
   Built only from the theme's own tokens (--bg, --bg2, --text, --muted, --border, --radius, --ease-out) so it inherits admin colour changes. */
svg.ph,.hdr svg.ph,.icon-btn svg.ph{ stroke-width:16; }
.ph-fill{ fill:currentColor; }

/* ---- small heart on cards (top-right of the photo; the theme's quick-add stays alone bottom-right) ---- */
.card__acts{ position:absolute; top:8px; right:8px; z-index:3; }
.card__act{ width:32px; height:32px; border-radius:50%; border:0; background:var(--bg); color:var(--text); display:grid; place-items:center; padding:0; box-shadow:0 2px 10px rgba(0,0,0,.07); transition:background .3s, color .3s, transform .35s var(--ease-out); }
.card__act svg{ width:16px; height:16px; }
.card__act{ position:relative; }
.card__act::after{ content:''; position:absolute; inset:-6px; }
.card__act:active{ transform:scale(.92); }
@media (hover:hover){ .card__act:hover{ background:var(--text); color:var(--bg); } }
@media (min-width:750px){ .card__acts{ top:10px; right:10px; } .card__act{ width:36px; height:36px; } .card__act svg{ width:18px; height:18px; } }
[data-wish] .ph-fill{ display:none; }
[data-wish].is-on .ph-fill{ display:block; }
[data-wish].is-on .ph-heart:not(.ph-fill){ display:none; }
[data-wish].is-pop svg{ animation:wishpop .5s cubic-bezier(.3,1.8,.5,1); }
@keyframes wishpop{ 0%{ transform:scale(1); } 35%{ transform:scale(.78); } 70%{ transform:scale(1.18); } 100%{ transform:scale(1); } }

/* header heart */
.wish-btn__ico{ position:relative; display:inline-grid; place-items:center; }
.wish-count{ position:absolute; top:-6px; right:-9px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--text); color:var(--bg); box-shadow:0 0 0 2px var(--bg); font-size:10.5px; font-weight:700; line-height:18px; text-align:center; transform:scale(0); transition:transform .35s cubic-bezier(.3,1.8,.5,1); }
.wish-count.has{ transform:scale(1); }
.wish-btn.is-bounce .wish-btn__ico{ animation:wishpop .6s cubic-bezier(.3,1.8,.5,1); }
@media (max-width:420px){ .hdr__r .icon-btn{ min-width:38px; padding:0 6px; } }

/* product page heart (same chip as the zoom button) */
.pdp-wish{ position:absolute; right:14px; top:68px; width:44px; height:44px; border-radius:50%; background:var(--bg); border:0; display:grid; place-items:center; box-shadow:0 4px 14px rgba(0,0,0,.08); z-index:2; color:var(--text); }
.pdp-wish svg{ width:21px; height:21px; }

/* ---- complete the routine (product page) ---- */
.pairs{ margin:22px 0 6px; border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px 16px 16px; }
.pairs__h h2{ font-size:19px; letter-spacing:-.01em; }
.pairs__h p{ font-size:13px; color:var(--muted); margin-top:3px; }
.pairs__list{ margin-top:12px; display:grid; }
.pairs__item{ display:grid; grid-template-columns:auto 56px 1fr auto; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--border); }
.pairs__item:first-child{ border-top:0; }
.pairs__item label{ position:relative; display:grid; place-items:center; width:22px; height:22px; }
.pairs__item input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.pairs__chk{ width:22px; height:22px; border-radius:6px; border:1px solid var(--text); display:grid; place-items:center; background:var(--bg); transition:background .25s, color .25s; color:transparent; }
.pairs__chk svg{ width:14px; height:14px; stroke-width:24; }
.pairs__item input:checked + .pairs__chk{ background:var(--text); color:var(--bg); }
.pairs__item input:disabled + .pairs__chk{ opacity:.55; }
.pairs__item input:focus-visible + .pairs__chk{ outline:2px solid var(--accent); outline-offset:2px; }
.pairs__img{ display:block; width:56px; height:56px; border-radius:10px; overflow:hidden; background:var(--bg2); }
.pairs__img img{ width:100%; height:100%; object-fit:cover; }
.pairs__t{ min-width:0; display:grid; gap:1px; }
.pairs__t .card__vendor{ margin:0; }
.pairs__t a{ font-size:14px; line-height:1.3; text-decoration:none; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pairs__p{ font-size:14px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.pairs__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; padding-top:14px; border-top:1px solid var(--border); }
.pairs__tot{ display:grid; font-size:12px; color:var(--muted); }
.pairs__tot b{ font-size:18px; color:var(--text); font-variant-numeric:tabular-nums; }
.pairs__add{ min-height:46px; }
.pairs__add:disabled{ opacity:.5; }

/* ---- recently viewed ---- */
.rv-row__clear{ font-size:13px; background:none; border:0; padding:0 4px; color:var(--muted); }
.rv-pdp[hidden],.rv-host[hidden]{ display:none; }

/* ---- bag offer (same shape as the theme's free-delivery bar) ---- */
.offerbar{ position:relative; padding:14px 14px 14px; border-radius:14px; border:1px solid var(--border); background:var(--bg); font-size:13px; margin:0 0 8px; }
.offerbar p{ display:flex; align-items:center; gap:8px; }
.offerbar p svg{ width:18px; height:18px; flex:none; }
.offerbar__track{ position:relative; height:5px; border-radius:6px; background:color-mix(in srgb, var(--text) 10%, transparent); margin-top:10px; overflow:hidden; }
.offerbar__track span{ position:absolute; inset:0 auto 0 0; background:var(--text); border-radius:6px; transition:width .6s var(--ease-out); }
.offerbar.is-done{ background:var(--bg2); }
.offerbar small{ display:block; margin-top:8px; color:var(--muted); font-size:11.5px; }
.offerbar__ex{ position:absolute; top:-9px; left:12px; padding:2px 8px; border-radius:6px; background:var(--text); color:var(--bg); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.summary .offerbar{ margin-bottom:14px; }

/* ---- search polish ---- */
.srch__sold{ margin-left:8px; font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.srch__p.is-sold .srch__thumb{ opacity:.55; }

/* ---- wishlist page ---- */
.wl__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.wl__n{ color:var(--muted); font-size:14px; padding-bottom:28px; }
.wl__note{ color:var(--muted); font-size:13px; text-align:center; padding:28px 0 56px; }
.wl__grid,.qz__grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px var(--gap); }
@media (min-width:750px){ .wl__grid,.qz__grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (min-width:1100px){ .wl__grid{ grid-template-columns:repeat(4, minmax(0,1fr)); } }

/* ---- skin quiz ---- */
.qz{ max-width:760px; margin:0 auto; padding:26px 0 70px; }
.qz__top{ display:flex; justify-content:space-between; align-items:center; }
.qz__top .eyebrow{ margin:0; }
.qz__count{ font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.qz__count b{ color:var(--text); }
.qz__bar{ height:2px; background:var(--border); margin:14px 0 30px; border-radius:2px; overflow:hidden; }
.qz__bar span{ display:block; height:100%; width:25%; background:var(--text); transition:width .5s var(--ease-out); }
.qz__h{ font-size:clamp(34px, 8.6vw, 54px); line-height:1; letter-spacing:-.035em; font-family:var(--font-display, var(--font-head)); font-weight:500; }
.qz__hint{ color:var(--muted); margin-top:10px; }
.qz__opts{ display:grid; gap:10px; margin-top:26px; }
@media (min-width:750px){ .qz__opts{ grid-template-columns:1fr 1fr; } }
.qz__opt{ position:relative; display:grid; gap:2px; text-align:left; padding:16px 50px 16px 18px; min-height:60px; border-radius:14px; border:1px solid var(--border); background:var(--bg); transition:border-color .25s, background .25s, color .25s, transform .3s var(--ease-out); }
.qz__opt:hover{ border-color:var(--text); }
.qz__opt:active{ transform:scale(.985); }
.qz__ot{ font-size:16px; font-weight:600; }
.qz__os{ font-size:13px; color:var(--muted); }
.qz__ok{ position:absolute; right:16px; top:50%; width:24px; height:24px; margin-top:-12px; border-radius:50%; border:1px solid var(--border); display:grid; place-items:center; color:transparent; transition:all .25s; }
.qz__ok svg{ width:13px; height:13px; stroke-width:26; }
.qz__opt.is-on{ background:var(--text); color:var(--bg); border-color:var(--text); }
.qz__opt.is-on .qz__os{ color:color-mix(in srgb, var(--bg) 70%, transparent); }
.qz__opt.is-on .qz__ok{ background:var(--bg); color:var(--text); border-color:var(--bg); }
.qz__back{ margin-top:22px; background:none; border:0; padding:0; font-size:14px; }
.qz__q.is-next{ animation:qzin .5s var(--ease-out) both; }
.qz__q.is-prev{ animation:qzback .5s var(--ease-out) both; }
@keyframes qzin{ from{ opacity:0; transform:translateX(22px); } }
@keyframes qzback{ from{ opacity:0; transform:translateX(-22px); } }
.qz__res{ animation:qzin .5s var(--ease-out) both; }
.qz__res .eyebrow{ margin-bottom:10px; }
.qz__sum{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 26px; }
.qz__sum li{ padding:7px 14px; border-radius:999px; border:1px solid var(--border); font-size:13px; }
.qz__note{ color:var(--muted); font-size:14px; margin:-8px 0 20px; }
.qz__acts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.qz__fine{ font-size:12.5px; color:var(--muted); margin-top:18px; }
@media (min-width:1100px){ .qz{ max-width:1100px; } .qz__q{ max-width:760px; } .qz__grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }

/* ---- home: skin quiz invite ---- */
.quizcta__box{ display:grid; gap:26px; padding:30px 22px; border-radius:var(--radius-lg); background:var(--bg2); overflow:hidden; }
@media (min-width:750px){ .quizcta__box{ grid-template-columns:1.1fr 1fr; align-items:center; padding:56px; gap:48px; } }
.quizcta__txt .sub{ margin-top:12px; max-width:44ch; }
.quizcta__steps{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:0 18px; margin:22px 0 26px; padding:0; }
.quizcta__steps li{ display:flex; gap:10px; align-items:baseline; padding:10px 0; border-top:1px solid color-mix(in srgb, var(--text) 14%, transparent); font-size:14px; }
.quizcta__steps span{ font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; letter-spacing:.08em; }
.quizcta__media{ position:relative; height:220px; }
@media (min-width:750px){ .quizcta__media{ height:340px; } }
.quizcta__ph{ position:absolute; width:52%; aspect-ratio:1/1; border-radius:var(--radius-lg); overflow:hidden; background:var(--bg); box-shadow:0 20px 40px -26px rgba(0,0,0,.35); transition:transform 1.1s var(--ease-out), opacity .8s; }
.quizcta__ph img{ width:100%; height:100%; object-fit:cover; }
.quizcta__ph--0{ left:0; top:12%; transform:rotate(-5deg); }
.quizcta__ph--1{ left:24%; top:0; z-index:2; transform:rotate(1.5deg); }
.quizcta__ph--2{ right:0; top:18%; transform:rotate(6deg); }
.quizcta__box:not(.in) .quizcta__ph{ opacity:0; }
.quizcta__box:not(.in) .quizcta__ph--0{ transform:translateY(24px) rotate(-5deg); }
.quizcta__box:not(.in) .quizcta__ph--1{ transform:translateY(36px) rotate(1.5deg); }
.quizcta__box:not(.in) .quizcta__ph--2{ transform:translateY(48px) rotate(6deg); }
.quizcta__ph--1{ transition-delay:.08s; } .quizcta__ph--2{ transition-delay:.16s; }

/* ---- home polish: softer, smoother scroll-in for photo tiles (transform/opacity only, cheap on phones) ---- */
.tile .tile__img img,.ccard .ccard__img img{ transition:transform 1.4s var(--ease-out); }
.tile:not(.in) .tile__img img,.ccard:not(.in) .ccard__img img{ transform:scale(1.08); }
@media (prefers-reduced-motion:reduce){ .quizcta__ph,.tile .tile__img img,.ccard .ccard__img img{ transition:none!important; transform:none!important; opacity:1!important; } [data-wish].is-pop svg,.wish-btn.is-bounce .wish-btn__ico,.qz__q,.qz__res{ animation:none!important; } }