/* ==========================================================================
   TAKAPO — feature & page styles (studio · finder · kit · product · checkout …)
   ========================================================================== */

/* ——— shared: product art sizing ——— */
.art { display: block; width: 100%; height: auto; }

/* ——— SPORT PRODUCT STUDIO (signature) ——— */
.studio { display: grid; gap: clamp(1rem, .6rem + 2vw, 2rem); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: clamp(.9rem, .6rem + 1.6vw, 1.6rem); position: relative; overflow: hidden; }
@media (min-width: 1000px) { .studio { grid-template-columns: 1.05fr .95fr; } }
.studio[class*="is-pulse"] { animation: none; }
.studio__stage-wrap { position: relative; border-radius: var(--r-lg); background: linear-gradient(170deg, color-mix(in srgb, var(--sc, var(--c-accent)) 16%, var(--c-surface)), var(--c-surface-2)); overflow: hidden; min-height: 360px; display: grid; }
.studio__bgword { position: absolute; top: .2rem; inset-inline-start: .8rem; font-family: var(--font-en); font-weight: 700; font-size: clamp(2.4rem, 1.2rem + 7vw, 5.6rem); letter-spacing: .06em; color: color-mix(in srgb, var(--sc, var(--c-accent)) 22%, transparent); pointer-events: none; z-index: 0; }
.studio__stage { position: relative; z-index: 1; min-height: 320px; display: grid; }
.studio__tools { position: absolute; bottom: .8rem; inset-inline-start: .8rem; display: flex; gap: .3rem; flex-wrap: wrap; z-index: 4; }
.tool { display: inline-flex; align-items: center; gap: .35rem; padding: .45em .75em; border-radius: var(--r-pill); background: rgba(251, 250, 247, .9); border: 1px solid var(--c-border); font-size: var(--fs-xs); backdrop-filter: blur(6px); transition: all var(--t-fast) var(--e1); }
.tool:hover { border-color: var(--c-text); background: #fff; }
.tool.is-on { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.tool.is-loading { pointer-events: none; opacity: .8; }
.studio__hint { position: absolute; bottom: 1rem; inset-inline-end: 1rem; margin: 0; font-size: var(--fs-xs); color: var(--c-muted); display: inline-flex; align-items: center; gap: .35rem; z-index: 4; }
.studio__hotspots { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hot { position: absolute; inset-inline-start: var(--x); top: var(--y); pointer-events: auto; width: 26px; height: 26px; transform: translate(-50%, -50%); }
.hot__dot { position: absolute; inset: 6px; border-radius: 50%; background: rgba(20, 22, 27, .6); box-shadow: 0 0 0 4px rgba(255, 255, 255, .6); animation: hotPulse 3s var(--e1) infinite; animation-delay: var(--d, 0ms); }
.hot__tip { position: absolute; bottom: 130%; inset-inline-start: 50%; transform: translateX(50%) translateY(4px); background: var(--c-ink); color: #fff; font-size: var(--fs-xs); padding: .4em .7em; border-radius: var(--r-sm); white-space: nowrap; opacity: 0; transition: all var(--t-fast) var(--e1); pointer-events: none; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; }
.hot:hover .hot__tip, .hot:focus-visible .hot__tip, .hot.is-on .hot__tip { opacity: 1; transform: translateX(50%); }
@keyframes hotPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(255, 255, 255, .55); } 50% { box-shadow: 0 0 0 9px rgba(255, 255, 255, .12); } }
.studio__panel { display: grid; gap: .2rem; }
.st-step { border: 0; margin: 0; padding: .55rem 0; border-bottom: 1px dashed var(--c-border); }
.st-step legend { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); color: var(--c-muted); padding-bottom: .5rem; }
.st-num { font-family: var(--font-en); font-weight: 700; color: var(--c-accent); font-size: .72rem; letter-spacing: .1em; }
.st-val { color: var(--c-text); font-weight: 600; }
.st-opts { display: flex; flex-wrap: wrap; gap: .4rem; }
.st-opts--scroll { overflow-x: auto; flex-wrap: nowrap; padding-bottom: .3rem; scrollbar-width: none; }
.st-opts--scroll::-webkit-scrollbar { display: none; }
.st-opt { display: inline-flex; align-items: center; gap: .4rem; padding: .45em .85em; border-radius: var(--r-pill); border: 1px solid var(--c-border); font-size: var(--fs-sm); background: var(--c-bg); white-space: nowrap; transition: all var(--t-fast) var(--e1); }
.st-opt:hover { border-color: var(--c-text); }
.st-opt.is-on { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.st-opt.is-on svg { color: var(--c-accent); }
.st-opt[data-st-set="product"] { flex-direction: column; gap: .3rem; padding: .5rem .6rem; border-radius: var(--r-md); }
.st-opt[data-st-set="product"] .st-thumb { width: 54px; }
.st-opt[data-st-set="product"] span:last-child { font-size: var(--fs-xs); }
.st-personal { display: grid; grid-template-columns: 1.4fr .6fr; gap: .5rem; }
.st-personal label { display: grid; gap: .3rem; font-size: var(--fs-xs); color: var(--c-muted); }
.st-personal input { border: 1px solid var(--c-border); border-radius: var(--r-sm); padding: .55em .7em; background: var(--c-bg); }
.st-summary { display: grid; gap: .7rem; padding-top: 1rem; margin-top: .4rem; }
.st-summary__name { font-weight: 600; margin: 0; }
.st-summary__meta { margin: .2rem 0 0; }
.st-summary__price { font-size: 1.3rem; font-weight: 700; margin: 0; display: flex; align-items: baseline; gap: .5rem; }
.st-summary__price s { font-size: .7em; color: var(--c-muted-l); font-weight: 400; }
.st-summary__price small { font-size: .6em; color: var(--c-muted); font-weight: 400; }
.st-summary__cta { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 520px) { .st-summary__cta .btn { flex: 1; } }

/* ——— turntable (pseudo-3D) ——— */
.tt__stage { perspective: 1100px; position: relative; display: grid; place-items: center; padding: 1rem; cursor: grab; touch-action: pan-y; outline-offset: -3px; }
.tt__stage:active { cursor: grabbing; }
.tt__obj { position: relative; transform-style: preserve-3d; transition: transform .12s linear; width: min(100%, 420px); }
.tt__face { backface-visibility: hidden; }
.tt__face--back { position: absolute; inset: 0; transform: rotateY(180deg); }
.tt__face .art { width: 100%; height: auto; }
.tt__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17, 19, 24, .55), transparent 45%); border-radius: 50%; opacity: 0; pointer-events: none; mix-blend-mode: multiply; }
.tt__floor { position: absolute; bottom: 6%; inset-inline: 22%; height: 16px; border-radius: 50%; background: radial-gradient(ellipse, rgba(20, 22, 27, .18), transparent 70%); transition: transform .12s linear; }
.tt.is-drag .tt__obj { transition: none; }
.tt__stage:focus-visible { outline: 2px solid var(--c-accent); }

/* 3D host */
.pd__3d { position: absolute; inset: 0; border-radius: var(--r-xl); overflow: hidden; background: radial-gradient(90% 80% at 50% 0%, #2a2e37, #14161b); z-index: 3; }
.pd__3d canvas { width: 100%; height: 100%; display: block; }

/* ——— SMART FINDER ——— */
.finder-sec__grid { display: grid; gap: clamp(1.4rem, 1rem + 3vw, 3rem); }
@media (min-width: 1000px) { .finder-sec__grid { grid-template-columns: .85fr 1.15fr; align-items: start; } }
.finder-sec__photo { margin: 1.6rem 0 0; border-radius: var(--r-lg); overflow: hidden; }
.finder-sec__photo img { width: 100%; height: 240px; object-fit: cover; }
.finder { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: clamp(1rem, .6rem + 1.6vw, 1.8rem); position: relative; }
.finder__progress { height: 3px; background: var(--c-surface-2); border-radius: 2px; overflow: hidden; margin-bottom: 1.4rem; }
.finder__progress span { display: block; height: 100%; background: var(--c-accent); width: 5%; transition: width .5s var(--e2); }
.f-step__k { font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); margin-bottom: .5rem; }
.f-step__q { font-size: var(--fs-h3); font-weight: 500; margin-bottom: 1.2rem; }
.f-grid { display: grid; gap: .5rem; }
.f-grid--sports { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px) { .f-grid--sports { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .f-grid--sports { grid-template-columns: repeat(4, 1fr); } }
.f-grid--3 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.f-grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .f-grid--4 { grid-template-columns: repeat(4, 1fr); } }
.f-opt { display: flex; align-items: center; gap: .5rem; padding: .7rem .8rem; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-bg); font-size: var(--fs-sm); transition: all var(--t-fast) var(--e1); text-align: start; }
.f-opt:hover { border-color: var(--c-text); transform: translateY(-2px); }
.f-opt.is-on { border-color: var(--sc, var(--c-accent)); box-shadow: inset 0 0 0 1px var(--sc, var(--c-accent)); background: var(--c-surface); }
.f-opt__ico { color: var(--sc); }
.f-opt--card { flex-direction: column; align-items: flex-start; gap: .3rem; padding: 1rem; }
.f-bars { display: flex; align-items: end; gap: 3px; height: 22px; }
.f-bars i { width: 6px; background: var(--c-stone); border-radius: 2px; }
.f-bars i:nth-child(1) { height: 8px; } .f-bars i:nth-child(2) { height: 15px; } .f-bars i:nth-child(3) { height: 22px; }
.f-bars i.on { background: var(--c-accent); }
.f-back { margin-top: 1.2rem; }
.f-result__head { display: grid; gap: 1rem; margin-bottom: 1.4rem; }
@media (min-width: 900px) { .f-result__head { grid-template-columns: 1.5fr auto; align-items: start; } }
.f-result__cta { display: flex; gap: .5rem; flex-wrap: wrap; }
.f-recs { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.f-rec { display: grid; gap: .5rem; }
.f-why { display: grid; gap: .25rem; }
.f-why li { display: flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); color: var(--c-muted); }
.f-why svg { color: var(--c-success); }
.finder__notes { display: grid; gap: .5rem; margin-top: 1.6rem; font-size: var(--fs-sm); color: var(--c-muted); }
.finder__notes p { display: flex; align-items: flex-start; gap: .5rem; margin: 0; }

/* ——— COMPLETE YOUR KIT ——— */
.kit__tabs { margin-bottom: 1.2rem; overflow-x: auto; }
.kit__body { display: grid; gap: clamp(1rem, .6rem + 1.6vw, 1.8rem); }
@media (min-width: 1000px) { .kit__body { grid-template-columns: 1.1fr .9fr; align-items: start; } }
.kit__lay { position: relative; border-radius: var(--r-xl); background: linear-gradient(160deg, color-mix(in srgb, var(--sc) 14%, var(--c-surface)), var(--c-surface-2)); min-height: 380px; overflow: hidden; }
.kit__word { position: absolute; top: .4rem; inset-inline-start: 1rem; font-family: var(--font-en); font-weight: 700; font-size: clamp(2rem, 1rem + 6vw, 4.4rem); color: color-mix(in srgb, var(--sc) 20%, transparent); }
.kit__piece { position: absolute; width: 38%; transition: opacity .4s var(--e1), transform .5s var(--e2), filter .4s; }
.kit__piece.is-off { opacity: .18; filter: grayscale(1); }
.kit__piece:nth-of-type(1) { top: 12%; inset-inline-start: 4%; }
.kit__piece:nth-of-type(2) { top: 8%; inset-inline-end: 6%; width: 34%; }
.kit__piece:nth-of-type(3) { bottom: 10%; inset-inline-start: 8%; width: 30%; }
.kit__piece:nth-of-type(4) { bottom: 6%; inset-inline-end: 8%; width: 32%; }
.kit__piece:nth-of-type(5) { top: 40%; inset-inline-start: 36%; width: 26%; }
.kit__piece:nth-of-type(6) { top: 42%; inset-inline-end: 36%; width: 24%; }
.kit__piece:nth-of-type(n+7) { display: none; }
.kit__list { display: grid; gap: .6rem; }
.kit__list ul { display: grid; gap: .5rem; }
.kit-row { display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); transition: opacity .3s, border-color .3s; }
.kit-row.is-off { opacity: .55; }
.kit-row__art { width: 56px; flex: none; border-radius: var(--r-sm); background: color-mix(in srgb, var(--tint) 8%, var(--c-bg)); }
.kit-row__info { display: grid; gap: .15rem; min-width: 0; }
.kit-row__name { font-size: .9rem; }
.kit-row__name:hover { color: var(--c-accent); }
.kit-row__info b { font-size: var(--fs-sm); }
.kit-row__ctl { margin-inline-start: auto; display: flex; align-items: center; gap: .35rem; }
.kit__sum { display: grid; gap: .6rem; padding-top: .6rem; }
.kit__totals p { display: flex; align-items: baseline; gap: .6rem; margin: 0; }
.kit__totals b { font-size: 1.3rem; font-weight: 700; }
.kit__totals s { color: var(--c-muted-l); font-size: .9rem; }
.kit__note { display: flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); color: var(--c-accent); margin: .4rem 0 0; }
.sportkit .kit__tabs { display: none; }

/* ——— PRODUCT DETAIL ——— */
.pd { display: grid; gap: clamp(1.2rem, .8rem + 2.4vw, 2.6rem); margin-bottom: clamp(2rem, 1.4rem + 3vw, 3.6rem); }
@media (min-width: 1000px) { .pd { grid-template-columns: 1.08fr .92fr; align-items: start; } }
.pd__media { display: grid; gap: .6rem; }
@media (min-width: 1000px) { .pd__media { position: sticky; top: calc(var(--hdr-h) + 1.2rem); } }
.pd__stage { position: relative; border-radius: var(--r-xl); background: linear-gradient(170deg, color-mix(in srgb, var(--tint) 12%, var(--c-surface)), var(--c-surface)); border: 1px solid var(--c-border); overflow: hidden; min-height: 320px; }
.pd__stage.is-pulse .tt__obj { animation: artIn .4s var(--e2); }
.pd__stage.is-3d .pd__tools .tool:not(.tool--3d) { display: none; }
.pd__stage.is-3d .pd__thumbs { opacity: .45; }
.pd__badges { position: absolute; top: .8rem; inset-inline-start: .8rem; display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; z-index: 4; }
.pd__tools { position: absolute; bottom: .8rem; inset-inline-start: .8rem; display: flex; flex-direction: column; gap: .35rem; z-index: 4; }
.pd__thumbs { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .3rem; }
.pd__thumb { flex: 0 0 76px; border-radius: var(--r-md); border: 1px solid var(--c-border); background: var(--c-surface); padding: .3rem; display: grid; gap: .2rem; place-items: center; }
.pd__thumb span { font-size: .58rem; color: var(--c-muted); }
.pd__thumb.is-on { border-color: var(--c-text); }
.pd__info { display: grid; align-content: start; }
.pd__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pd__acts { display: flex; gap: .35rem; }
.pd__title { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem); font-weight: 500; margin: .2rem 0 .7rem; letter-spacing: -.02em; }
.pd__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.rating-link:hover { color: var(--c-accent); }
.pd__stock { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-sm); }
.pd__stock--ok { color: var(--c-success); }
.pd__stock--warn { color: var(--c-warning); }
.pd__short { color: var(--c-muted); font-size: var(--fs-lead); }
.pd__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0; padding-block: 1rem; border-block: 1px solid var(--c-border); }
.pd__now { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); font-weight: 700; }
.pd__price s { color: var(--c-muted-l); }
.pd__buy { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-block: 1.2rem; }
.pd__add { flex: 1 1 12rem; }
.pd__buy-now { flex: 0 1 auto; }
.pd__usp { display: grid; gap: .6rem; margin: 1.4rem 0; padding-top: 1.2rem; border-top: 1px dashed var(--c-border); }
.pd__usp li { display: flex; align-items: flex-start; gap: .6rem; font-size: var(--fs-sm); color: var(--c-muted); }
.pd__usp svg { color: var(--c-accent); flex: none; margin-top: .15rem; }
.pd__usp b { color: var(--c-text); font-weight: 600; }
.pd__spec { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 1rem 1.1rem; }
.pd__spec dl { display: grid; gap: .5rem; margin: 0; }
.pd__spec dl > div { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--fs-sm); }
.pd__spec dt { color: var(--c-muted); }
.pd__spec dd { margin: 0; font-weight: 500; text-align: end; }
.pd__tabs { margin-bottom: clamp(2rem, 1.4rem + 3vw, 3.6rem); }
.pd__panel { padding-top: 1.4rem; }
.prose { max-width: 72ch; }
.prose h3 { font-size: 1.05rem; margin: 1.2rem 0 .5rem; font-weight: 600; }
.prose p { color: #33373d; }
.prose ul { display: grid; gap: .4rem; margin: 1rem 0; }
.prose li { position: relative; padding-inline-start: 1.3rem; font-size: var(--fs-sm); color: var(--c-muted); }
.prose li::before { content: ''; position: absolute; inset-inline-start: .2rem; top: .7em; width: 6px; height: 6px; background: var(--c-accent); border-radius: 50%; }
.reviews { display: grid; gap: 1.6rem; }
@media (min-width: 900px) { .reviews { grid-template-columns: .8fr 1.2fr; align-items: start; } }
.reviews__sum { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 1.2rem; display: grid; gap: .5rem; justify-items: start; }
.reviews__score { font-size: 2.4rem; font-weight: 700; margin: 0; line-height: 1; }
.reviews__score small { font-size: .4em; color: var(--c-muted); font-weight: 400; }
.reviews__bars { display: grid; gap: .3rem; width: 100%; margin: .6rem 0; }
.reviews__bars li { display: grid; grid-template-columns: 2.4rem 1fr 1.6rem; align-items: center; gap: .5rem; font-size: var(--fs-xs); }
.reviews__bars i { height: 5px; background: var(--c-surface-2); border-radius: 3px; overflow: hidden; display: block; }
.reviews__bars b { display: block; height: 100%; background: var(--c-accent); }
.reviews__list { display: grid; gap: 1.2rem; }
.reviews__list li { padding-bottom: 1.2rem; border-bottom: 1px solid var(--c-border); }
.reviews__head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .3rem; }
.verified { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--fs-xs); color: var(--c-success); }
.reviews__tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
.pd__kit, .pd__similar { margin-bottom: clamp(2rem, 1.4rem + 3vw, 3.4rem); }
.pd__kit .rail, .pd__similar .rail, .sflow .rail, .collblock .rail, .wl__recs .rail { padding-inline: 0; }

/* sticky add-to-cart bar (appears after the buy box scrolls away) */
.stickybar { position: fixed; inset-inline: 0; bottom: 58px; z-index: var(--z-tray); background: rgba(251, 250, 247, .96); backdrop-filter: blur(12px); border-top: 1px solid var(--c-border); transform: translateY(120%); transition: transform .35s var(--e2); padding-block: .5rem; }
@media (min-width: 1080px) { .stickybar { bottom: 0; } }
.stickybar.is-on { transform: none; }
.stickybar__in { display: flex; align-items: center; gap: .8rem; }
.stickybar__art { width: 44px; flex: none; }
.stickybar__info { display: grid; gap: .1rem; min-width: 0; }
.stickybar__info b { font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stickybar__price { margin-inline-start: auto; font-size: var(--fs-sm); }
@media (prefers-reduced-motion: reduce) { .stickybar { transition: none; } }

/* ——— CART & CHECKOUT ——— */
.cartpage { display: grid; gap: clamp(1rem, .6rem + 2vw, 2rem); }
@media (min-width: 1000px) { .cartpage { grid-template-columns: 1.5fr .8fr; align-items: start; } }
.cartpage__main .clines { padding: 0; }
.cartpage__main .cline__art { width: 92px; }
.cartpage__aside { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: 1.2rem; display: grid; gap: .9rem; position: sticky; top: calc(var(--hdr-h) + 1.2rem); }
.steps { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-bottom: 1.6rem; }
.steps li { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); color: var(--c-muted); }
.steps__n { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--c-border); display: grid; place-items: center; font-size: .72rem; font-family: var(--font-en); }
.steps li.is-on { color: var(--c-text); font-weight: 600; }
.steps li.is-on .steps__n { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.steps li.is-done .steps__n { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.checkout__grid { display: grid; gap: clamp(1rem, .6rem + 2vw, 2rem); }
@media (min-width: 1000px) { .checkout__grid { grid-template-columns: 1.4fr .8fr; align-items: start; } }
.cstep { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: clamp(1rem, .7rem + 1.6vw, 1.8rem); }
.cstep h2 { font-size: var(--fs-h3); margin-bottom: 1.2rem; }
.cstep .field { margin-bottom: 1rem; }
.cstep__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.4rem; }
.checkout__aside { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: 1.2rem; display: grid; gap: 1rem; position: sticky; top: calc(var(--hdr-h) + 1.2rem); }
.checkout__aside h2 { font-size: 1.05rem; }
.checkout__aside .clines { padding: 0; }
.checkout__help { display: grid; gap: .4rem; font-size: var(--fs-xs); color: var(--c-muted); border-top: 1px solid var(--c-border); padding-top: .8rem; }
.checkout__help p { display: flex; align-items: center; gap: .4rem; margin: 0; }
.shipopts, .paymock__methods { display: grid; gap: .6rem; }
.paymock { display: grid; gap: .8rem; }
.paymock__note { display: flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); color: var(--c-muted); background: var(--c-bg); padding: .6rem .8rem; border-radius: var(--r-md); margin: 0; }
.review-card { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 1.1rem; margin-bottom: 1.2rem; }
.review-card dl { display: grid; gap: .6rem; margin: 0; }
.review-card dl > div { display: grid; grid-template-columns: 8rem 1fr; gap: .8rem; font-size: var(--fs-sm); }
.review-card dt { color: var(--c-muted); }
.review-card dd { margin: 0; }
.success { text-align: center; display: grid; gap: .4rem; justify-items: center; padding-block: clamp(1.6rem, 1rem + 3vw, 3rem); }
.success__mark { width: 88px; height: 88px; border-radius: 50%; background: var(--c-accent); color: #fff; display: grid; place-items: center; margin-bottom: 1rem; animation: artIn .5s var(--e2); }
.success__card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: 1.4rem; margin: 1.6rem 0; width: 100%; max-width: 640px; text-align: start; }
.success__card dl { display: grid; gap: .6rem; margin: 0; }
@media (min-width: 620px) { .success__card dl { grid-template-columns: repeat(2, 1fr); gap: .8rem 1.6rem; } }
.success__card dl > div { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--fs-sm); border-bottom: 1px dashed var(--c-border); padding-bottom: .4rem; }
.success__card dt { color: var(--c-muted); }
.success__card dd { margin: 0; }
.success__items { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.success__items li { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-xs); background: var(--c-bg); border-radius: var(--r-pill); padding: .25rem .7rem .25rem .3rem; }
.success__art { width: 30px; }
.success__cta { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }

/* ——— ACCOUNT ——— */
.auth { display: grid; gap: clamp(1rem, .6rem + 2vw, 2rem); }
@media (min-width: 900px) { .auth { grid-template-columns: 1fr .9fr; align-items: start; } }
.auth__form, .auth__side { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: 1.4rem; }
.auth__hint { font-size: var(--fs-xs); color: var(--c-muted); display: block; line-height: 2; }
.auth__hint button { text-decoration: underline; color: var(--c-accent); }
.auth__side ul { display: grid; gap: .5rem; margin-bottom: 1rem; }
.auth__side li { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); }
.auth__side svg { color: var(--c-success); }
.account { display: grid; gap: 1rem; }
@media (min-width: 1000px) { .account { grid-template-columns: 1fr 1fr; } .account__card--wide { grid-column: span 2; } }
.account__card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: 1.2rem; }
.account__card h2 { font-size: 1.05rem; margin-bottom: .9rem; }
.account__dl { display: grid; gap: .5rem; margin: 0; }
.account__dl > div { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--fs-sm); border-bottom: 1px dashed var(--c-border); padding-bottom: .4rem; }
.account__dl dd { margin: 0; }
.orders { display: grid; gap: .6rem; }
.orders li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .8rem; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-bg); font-size: var(--fs-sm); }
.orders p { margin: 0; }
.wl__acts { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.2rem; }
.wl__recs { margin-top: 2.4rem; }

/* ——— ABOUT ——— */
.about { padding-bottom: var(--sec-y); }
.about__hero { padding-block: clamp(1.4rem, 1rem + 2vw, 2.6rem) clamp(1.4rem, 1rem + 2vw, 2.4rem); }
.about__title { font-size: clamp(1.7rem, 1.1rem + 3.2vw, 3.4rem); font-weight: 400; letter-spacing: -.02em; max-width: 22ch; }
.about__lead { color: var(--c-muted); font-size: var(--fs-lead); max-width: 62ch; margin-top: 1.2rem; }
.about__img { margin: 0; }
.about__img img { width: 100%; max-height: 520px; object-fit: cover; }
.about__cols { display: grid; gap: 1.2rem; margin-block: clamp(2rem, 1.4rem + 3vw, 3.6rem); }
@media (min-width: 760px) { .about__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .about__cols { grid-template-columns: repeat(4, 1fr); } }
.about__cols h2 { font-size: 1.05rem; margin-bottom: .6rem; }
.about__cols p { font-size: var(--fs-sm); color: var(--c-muted); }
.about__stats { background: var(--c-ink); color: #fff; border-radius: var(--r-xl); padding: clamp(1.2rem, .8rem + 2vw, 2rem); margin-bottom: clamp(2rem, 1.4rem + 3vw, 3.4rem); }
.about__stats ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
@media (min-width: 900px) { .about__stats ul { grid-template-columns: repeat(4, 1fr); } }
.about__stats li { display: grid; gap: .2rem; }
.about__stats b { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); color: var(--c-accent); }
.about__stats span { font-size: var(--fs-sm); color: rgba(255, 255, 255, .75); }
.about__stats .muted { color: rgba(255, 255, 255, .5); display: flex; gap: .4rem; align-items: center; margin-top: 1.2rem; }
.about__story { display: grid; gap: 1.6rem; align-items: center; margin-bottom: clamp(2rem, 1.4rem + 3vw, 3.4rem); }
@media (min-width: 900px) { .about__story { grid-template-columns: 1.1fr .9fr; } }
.about__story h2 { font-size: var(--fs-h2); margin-bottom: 1rem; font-weight: 500; }
.about__story p { color: var(--c-muted); }
.about__story .btn { margin-top: 1rem; }
.about__img2 { margin: 0; border-radius: var(--r-xl); overflow: hidden; }
.about__img2 img { width: 100%; height: 100%; object-fit: cover; }
.about__note { background: var(--c-surface); border: 1px dashed var(--c-border); border-radius: var(--r-xl); padding: 1.4rem; }
.about__note h2 { font-size: 1.05rem; margin-bottom: .5rem; }
.about__note p { font-size: var(--fs-sm); color: var(--c-muted); margin: 0; }

/* ——— INFO PAGES ——— */
.info__grid { display: grid; gap: 1rem; }
@media (min-width: 760px) { .info__grid { grid-template-columns: repeat(2, 1fr); } }
.icard { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: 1.4rem; }
.icard h2 { font-size: 1.05rem; margin: .8rem 0 .6rem; }
.icard p, .icard li { font-size: var(--fs-sm); color: var(--c-muted); }
.icard--accent { background: var(--c-accent); color: #fff; border-color: transparent; }
.icard--accent h2, .icard--accent p { color: #fff; }
.tlist { display: grid; gap: .6rem; }
.tlist li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .5rem; border-bottom: 1px dashed var(--c-border); }
.tlist span { display: grid; gap: .1rem; }
.tlist b { color: var(--c-text); font-weight: 600; }
.ol { display: grid; gap: .5rem; counter-reset: ol; margin-top: .8rem; }
.ol li { display: flex; gap: .6rem; align-items: flex-start; }
.ol li::before { counter-increment: ol; content: counter(ol); width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--c-bg); border: 1px solid var(--c-border); display: grid; place-items: center; font-size: .7rem; color: var(--c-text); }
.faq { display: grid; gap: .6rem; }
.faq details, .studio__faq details { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 1rem 1.1rem; }
.faq summary, .studio__faq summary { cursor: pointer; font-weight: 600; font-size: .95rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.faq summary::after, .studio__faq summary::after { content: '+'; color: var(--c-accent); font-size: 1.2rem; line-height: 1; }
.faq details[open] summary::after, .studio__faq details[open] summary::after { content: '−'; }
.faq p, .studio__faq p { margin: .8rem 0 0; font-size: var(--fs-sm); color: var(--c-muted); }
.studio__faq { display: grid; gap: .6rem; margin-top: clamp(1.2rem, .8rem + 2vw, 2rem); }
.contact__grid { display: grid; gap: 1.2rem; }
@media (min-width: 900px) { .contact__grid { grid-template-columns: 1.15fr .85fr; align-items: start; } }
.contact .form { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: 1.4rem; }
.contact__aside { display: grid; gap: 1rem; }
.contact__list { display: grid; gap: .8rem; }
.contact__list li { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--fs-sm); }
.contact__list svg { color: var(--c-accent); flex: none; margin-top: .2rem; }
.contact__list span { display: grid; gap: .1rem; color: var(--c-muted); }
.linklist { display: grid; gap: .5rem; }
.linklist a { font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--c-stone); }
.linklist a:hover { color: var(--c-accent); }
.page--narrow .form, .page--narrow .auth__form { max-width: 520px; }

/* ——— print & misc ——— */
@media print {
  .hdr, .tabbar, #toasts, .ctray, .stickybar, .ftr, .hero__studio { display: none !important; }
}
@media (max-width: 620px) {
  .stickybar__info b { max-width: 40vw; }
  .pd__spec dl > div { flex-direction: column; gap: .1rem; }
  .pd__spec dd { text-align: start; }
  .reviews__bars li { grid-template-columns: 2rem 1fr 1.4rem; }
}
/* touch devices have no hover: keep the card actions reachable */
@media (hover: none) {
  .pcard__actions { transform: none; opacity: 1; }
}
@media (max-width: 480px) {
  .pcard__btn span { display: none; }
  .pcard__btn { flex: 0 0 auto; padding: .65em; }
  .pcard__btn--add { flex: 1 1 auto; padding-inline: 1em; }
}

/* programmatic route focus should not paint a ring (screen readers still announce it) */
#main h1:focus, #main h1:focus-visible, #main [tabindex="-1"]:focus { outline: none; }