/* ===== Bella Rae shared component layer (themed by each variant's tokens) ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.br-locked,html.br-locked body{overflow:hidden}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
h1,h2,h3{text-wrap:balance;margin:0}
p{margin:0}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fine{font-size:12.5px;color:var(--muted);line-height:1.5}
.num,.tab{font-variant-numeric:tabular-nums}
[data-view]{animation:none}
[data-view].enter{animation:viewIn .7s var(--ease) both}
@keyframes viewIn{from{opacity:.001;transform:translateY(14px)}to{opacity:1;transform:none}}
[data-reveal]{transition:transform .9s var(--ease),opacity .9s var(--ease);transition-delay:var(--d,0ms)}
[data-reveal]:not(.in){transform:translateY(18px);opacity:.35}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:var(--r-btn,999px);font-weight:600;font-size:14.5px;letter-spacing:.01em;transition:transform .18s var(--ease),background-color .2s,color .2s,box-shadow .25s;user-select:none;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);color:var(--accent-fg)}
.btn-primary:hover{box-shadow:0 8px 24px -10px var(--accent)}
.btn-ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--fg)}
.btn-block{width:100%}
.btn-sm{min-height:36px;padding:0 14px;font-size:13px}
.link{color:var(--accent);font-weight:600;font-size:13px;text-decoration:underline;text-underline-offset:3px}
.icon-btn{width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);font-size:20px;display:grid;place-items:center}
.icon-btn:disabled{opacity:.3;cursor:default}
.pill{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--accent-soft);color:var(--fg);white-space:nowrap}
.pill-hot{background:var(--hot);color:var(--hot-fg)}
.pill-ok{background:var(--ok);color:var(--ok-fg)}
.pill-soft{background:var(--surface-2);color:var(--muted)}

/* packages */
.pkg{display:grid;grid-template-columns:1fr;background:var(--surface);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--card-shadow,none)}
.pkg-media{position:relative;aspect-ratio:4/3;overflow:hidden;max-width:100%}
.pkg-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.pkg:hover .pkg-media img{transform:scale(1.04)}
.pkg-tag{position:absolute;left:12px;top:12px;background:var(--bg);color:var(--fg);font-size:11px;font-weight:600;padding:5px 10px;border-radius:999px;letter-spacing:.04em}
.pkg-body{padding:20px;display:grid;gap:12px}
.pkg-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.pkg-head h3{font-family:var(--display);font-weight:var(--display-w,400);font-size:24px;line-height:1.1}
.pkg-price{font-family:var(--display);font-size:24px;white-space:nowrap;font-variant-numeric:tabular-nums}
.pkg-price small{font-family:var(--body);font-size:12px;color:var(--muted)}
.pkg-line{color:var(--muted);font-size:14.5px}
.pkg-inc{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:13.5px}
.pkg-inc li{padding-left:16px;position:relative}
.pkg-inc li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.pkg-split{font-size:12.5px;color:var(--muted)}
.pkg-cta{display:flex;gap:8px;flex-wrap:wrap}
.pkg-cta .btn{flex:1}

/* builder */
.bld{display:grid;gap:20px}
@media(min-width:900px){.bld{grid-template-columns:minmax(0,1fr) 360px;align-items:start}.bld-sum{position:sticky;top:calc(env(safe-area-inset-top,0px) + 90px)}}
.bld-main{display:grid;gap:28px;min-width:0}
.bld-step{display:grid;gap:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px;font-weight:500;transition:background-color .2s,color .2s,transform .15s var(--ease)}
.chip span{opacity:.6;font-variant-numeric:tabular-nums}
.chip:active{transform:scale(.96)}
.chip.on{background:var(--fg);color:var(--bg);box-shadow:none}
.range{display:grid;gap:8px;font-size:14px}
.range span{display:flex;justify-content:space-between}
.range input{width:100%;accent-color:var(--accent)}
.addons{display:grid;gap:2px;background:var(--line);border-radius:var(--r);overflow:hidden}
.addon{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:var(--surface);transition:background-color .2s}
.addon.on{background:var(--surface-2)}
.addon-txt{display:grid;min-width:0}
.addon-txt b{font-weight:600;font-size:14.5px}
.addon-txt small{color:var(--muted);font-size:12.5px}
.addon-ctl{display:flex;align-items:center;gap:12px;flex-shrink:0}
.addon-price{font-size:13.5px;font-variant-numeric:tabular-nums;color:var(--muted)}
.toggle{width:46px;height:28px;border-radius:999px;background:var(--line);position:relative;transition:background-color .25s var(--ease)}
.toggle i{position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:var(--bg);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .35s var(--spring,var(--ease))}
.toggle.on{background:var(--accent)}
.toggle.on i{transform:translateX(18px)}
.stepper{display:flex;align-items:center;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line)}
.stepper button{width:32px;height:32px;font-size:18px}
.stepper output{min-width:18px;text-align:center;font-variant-numeric:tabular-nums}
.bld-sum{background:var(--surface);border-radius:var(--r-lg);padding:22px;display:grid;gap:14px;box-shadow:var(--card-shadow,none)}
.sum-total{font-family:var(--display);font-size:48px;line-height:1;letter-spacing:-.02em}
.sum-meta{display:flex;flex-wrap:wrap;gap:6px}
.sum-meta span{font-size:12px;padding:4px 10px;border-radius:999px;background:var(--surface-2)}
.sum-lines{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:13.5px}
.sum-lines li{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums}
.sum-lines li span:first-child{min-width:0}
.sum-lines li small{display:block;color:var(--muted);font-size:12px}
.sum-lines .tot{border-top:1px solid var(--line);padding-top:10px;font-weight:700;font-size:15px}
.sum-pay{display:grid;gap:4px;font-size:13.5px;padding:12px;border-radius:var(--r);background:var(--accent-soft)}

/* minis */
.tiers{display:grid;gap:10px;margin-bottom:22px}
@media(min-width:760px){.tiers{grid-template-columns:repeat(3,1fr)}}
.tier{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line)}
.tier-len{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--accent);color:var(--accent-fg);flex-shrink:0;line-height:1}
.tier-len b{font-family:var(--display);font-size:24px}
.tier-len span{font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.tier-name{font-weight:600}
.tier-sub{font-size:12.5px;color:var(--muted)}
.minis{display:grid;gap:16px}
@media(min-width:760px){.minis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mini{background:var(--surface);border-radius:var(--r-lg);overflow:hidden;display:grid;box-shadow:var(--card-shadow,none)}
.mini-media{position:relative;aspect-ratio:16/9;overflow:hidden;max-width:100%}
.mini-media img{width:100%;height:100%;object-fit:cover}
.mini-date{position:absolute;left:12px;bottom:12px;background:var(--bg);color:var(--fg);border-radius:12px;padding:6px 10px;display:grid;text-align:center;font-size:11px;text-transform:uppercase;letter-spacing:.08em;line-height:1.1}
.mini-date b{font-family:var(--display);font-size:22px;letter-spacing:0}
.mini-body{padding:18px;display:grid;gap:8px}
.mini-top{display:flex;justify-content:space-between;gap:10px;align-items:start}
.mini-top h3{font-family:var(--display);font-weight:var(--display-w,400);font-size:22px;line-height:1.15}
.mini-meta{font-size:13.5px;color:var(--muted)}
.mini-wait{font-size:14px}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:6px;margin-top:6px}
.slot{min-height:40px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;transition:background-color .2s,transform .15s var(--ease)}
.slot:hover:not(.taken){background:var(--fg);color:var(--bg)}
.slot:active:not(.taken){transform:scale(.95)}
.slot.taken{opacity:.35;text-decoration:line-through;cursor:not-allowed}

/* reviews / process / locs / faq / gift */
.reviews{display:grid;gap:14px}
@media(min-width:860px){.reviews{grid-template-columns:repeat(3,1fr)}}
.review{margin:0;padding:22px;border-radius:var(--r-lg);background:var(--surface);display:grid;gap:12px;align-content:start}
.stars{color:var(--accent);letter-spacing:2px;font-size:13px}
.review blockquote{margin:0;font-family:var(--display);font-size:19px;line-height:1.35}
.review figcaption{font-size:12.5px;color:var(--muted);display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.sample{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.process{list-style:none;padding:0;margin:0;display:grid;gap:14px}
@media(min-width:900px){.process{grid-template-columns:repeat(5,1fr)}}
.process li{display:flex;gap:14px;align-items:start}
@media(min-width:900px){.process li{flex-direction:column}}
.step-n{width:34px;height:34px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:12px;box-shadow:inset 0 0 0 1px var(--line)}
.process b{font-weight:600}
.process p{font-size:13.5px;color:var(--muted)}
.locs{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));margin-bottom:12px}
.loc{padding:16px;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:2px}
.loc span{font-size:12px;color:var(--muted);font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}
.loc p{font-size:13.5px;margin-top:4px}
.faq{display:grid}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:18px 32px 18px 0;font-weight:600;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:14px;font-size:22px;font-weight:300;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 18px;color:var(--muted);max-width:62ch}
.gift{display:grid;gap:16px;padding:24px;border-radius:var(--r-lg);background:var(--surface)}
.gift h3{font-family:var(--display);font-weight:var(--display-w,400);font-size:26px;margin:6px 0}
.gift p{color:var(--muted);font-size:14.5px}
.gift-amts{display:flex;gap:8px;flex-wrap:wrap}
@media(min-width:900px){.gift{grid-template-columns:1.3fr 1fr auto;align-items:center}}

/* sheet */
.br-sheet-wrap{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-end;justify-content:center}
.br-scrim{position:absolute;inset:0;background:var(--scrim,rgba(10,10,10,.45));opacity:0;transition:opacity .4s var(--ease);backdrop-filter:blur(2px)}
.br-sheet{position:relative;width:100%;max-height:calc(100% - env(safe-area-inset-top,0px) - 24px);overflow:auto;overscroll-behavior:contain;background:var(--bg);color:var(--fg);border-radius:22px 22px 0 0;padding:8px max(18px,env(safe-area-inset-left,0px)) calc(18px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-right,0px));transform:translateY(100%);transition:transform .5s var(--sheet-ease,cubic-bezier(.32,.72,0,1));box-shadow:0 -20px 60px -20px rgba(0,0,0,.35)}
.br-sheet-wrap.open .br-scrim{opacity:1}
.br-sheet-wrap.open .br-sheet{transform:none}
.br-sheet-wrap.closing .br-sheet{transform:translateY(100%)}
.br-grab{display:flex;justify-content:center;padding:6px 0 10px;cursor:grab;touch-action:none}
.br-grab span{width:40px;height:5px;border-radius:5px;background:var(--line)}
.br-x{position:absolute;right:max(12px,env(safe-area-inset-right,0px));top:10px;width:36px;height:36px;border-radius:50%;font-size:22px;line-height:1;background:var(--surface-2);z-index:3}
.br-sheet-body{display:grid;gap:14px}
.br-sheet-body>h2,.bk-pane h2{font-family:var(--display);font-weight:var(--display-w,400);font-size:28px;line-height:1.1;padding-right:40px}
.br-sheet-wrap.is-full .br-sheet{height:calc(100% - env(safe-area-inset-top,0px) - 10px);max-height:none}
@media(min-width:760px){
  .br-sheet-wrap{align-items:center;padding:24px}
  .br-sheet{max-width:560px;border-radius:24px;max-height:calc(100% - 48px);transform:translateY(24px) scale(.98);opacity:0;transition:transform .45s var(--sheet-ease,cubic-bezier(.32,.72,0,1)),opacity .3s}
  .br-sheet-wrap.open .br-sheet{opacity:1}
  .br-sheet-wrap.closing .br-sheet{transform:translateY(24px) scale(.98);opacity:0}
  .br-sheet-wrap.is-wide .br-sheet{max-width:720px}
  .br-sheet-wrap.is-full .br-sheet{max-width:1180px;height:calc(100% - 48px)}
  .br-grab{display:none}
  .br-sheet{padding-top:22px}
}
#br-toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;z-index:200;background:var(--fg);color:var(--bg);padding:12px 18px;border-radius:999px;font-size:14px;font-weight:500;max-width:calc(100% - 32px);text-align:center;transition:transform .45s var(--spring,var(--ease)),opacity .3s;pointer-events:none}
#br-toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:900px){#br-toast{bottom:32px}}

/* booking */
.bk{display:grid;gap:18px}
.bk-prog{display:flex;gap:6px;padding-right:44px;overflow-x:auto}
.bk-prog span{flex:1;min-width:60px;display:grid;gap:6px;font-size:11px;color:var(--muted);letter-spacing:.04em}
.bk-prog i{height:3px;border-radius:3px;background:var(--line);position:relative;overflow:hidden}
.bk-prog i::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.bk-prog .done i::after,.bk-prog .cur i::after{transform:scaleX(1)}
.bk-prog .cur{color:var(--fg);font-weight:600}
.bk-pane{display:grid;gap:14px;animation:viewIn .5s var(--ease) both}
.bk-pkgs{display:grid;gap:8px}
.bk-pkg{display:flex;align-items:center;gap:12px;padding:8px;border-radius:14px;text-align:left;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s,background-color .2s}
.bk-pkg img{width:56px;height:56px;border-radius:10px;object-fit:cover;flex-shrink:0}
.bk-pkg span{display:grid;flex:1;min-width:0}
.bk-pkg small{color:var(--muted);font-size:12.5px}
.bk-pkg em{font-style:normal;font-weight:600;font-variant-numeric:tabular-nums;padding-right:6px;white-space:nowrap}
.bk-pkg.on{box-shadow:inset 0 0 0 2px var(--accent);background:var(--accent-soft)}
.bk-addon-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.cal-head{display:flex;align-items:center;justify-content:space-between}
.cal-head div{display:grid;text-align:center}
.cal-head small{font-size:12px;color:var(--accent);font-weight:600}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-dow{text-align:center;font-size:11px;color:var(--muted);padding:4px 0;font-family:var(--mono)}
.cal-d{aspect-ratio:1;border-radius:12px;font-size:14px;font-weight:500;font-variant-numeric:tabular-nums;position:relative;transition:background-color .2s,transform .15s var(--ease);max-width:100%}
.cal-d:hover:not(.off){background:var(--surface-2)}
.cal-d:active:not(.off){transform:scale(.92)}
.cal-d.off{color:var(--muted);opacity:.35;cursor:default}
.cal-d.sel{background:var(--fg);color:var(--bg)}
.cal-d .sun,.fine .sun{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold,var(--accent))}
.cal-d .sun{position:absolute;left:50%;bottom:6px;transform:translateX(-50%)}
.bk-slots{display:grid;gap:8px}
@media(min-width:560px){.bk-slots{grid-template-columns:repeat(3,1fr)}}
.bk-slot{display:grid;text-align:left;padding:12px 14px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line);gap:2px;transition:box-shadow .2s,background-color .2s}
.bk-slot b{font-size:17px;font-variant-numeric:tabular-nums}
.bk-slot span{font-size:13px;font-weight:600}
.bk-slot small{font-size:11.5px;color:var(--muted)}
.bk-slot.best{box-shadow:inset 0 0 0 1px var(--gold,var(--accent))}
.bk-slot.on{box-shadow:inset 0 0 0 2px var(--accent);background:var(--accent-soft)}
.bk-slot.taken{opacity:.4;cursor:not-allowed}
.fields{display:grid;gap:12px}
@media(min-width:560px){.fields{grid-template-columns:1fr 1fr}.fld-wide{grid-column:1/-1}}
.fld{display:grid;gap:6px;font-size:13px;font-weight:600;min-width:0}
.fld input,.fld select,.fld textarea{width:100%;min-height:48px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-size:16px;font-weight:400;transition:border-color .2s,box-shadow .2s}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.fld.err input{border-color:var(--hot)}
.fld em,.err-txt{font-style:normal;font-weight:500;font-size:12.5px;color:var(--hot)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--accent);flex-shrink:0;margin-top:1px}
.bk-review{display:grid;gap:14px}
.bk-rv-head{display:flex;gap:12px;align-items:center}
.bk-rv-head img{width:64px;height:64px;border-radius:12px;object-fit:cover}
.bk-rv-head div{display:grid}
.bk-rv-head span{font-size:13px;color:var(--muted)}
.bk-due{display:flex;justify-content:space-between;align-items:center;padding:14px;border-radius:14px;background:var(--accent-soft)}
.bk-due b{font-size:22px;font-variant-numeric:tabular-nums}
.bk-foot{position:sticky;bottom:calc(-18px - env(safe-area-inset-bottom,0px));margin:0 -18px calc(-18px - env(safe-area-inset-bottom,0px));padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px));background:var(--bg);border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.bk-foot-sum{display:grid;min-width:0}
.bk-foot-sum small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-foot-sum b{font-variant-numeric:tabular-nums}
.bk-foot-btns{display:flex;gap:8px}
.bk-done{display:grid;gap:14px;text-align:center;justify-items:center;padding:12px 0}
.bk-done h2{font-family:var(--display);font-weight:var(--display-w,400);font-size:32px}
.bk-check svg{width:72px;height:72px;fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.bk-check circle{stroke-dasharray:151;stroke-dashoffset:151;animation:draw .8s var(--ease) forwards}
.bk-check path{stroke-dasharray:40;stroke-dashoffset:40;animation:draw .5s .55s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.bk-next{display:grid;gap:10px;text-align:left;width:100%}
.bk-next div{display:grid;padding:12px 14px;border-radius:12px;background:var(--surface)}
.bk-next span{font-size:13px;color:var(--muted)}

/* proof gallery */
.pg{display:grid;gap:16px}
.pg-head{display:flex;align-items:center;gap:14px;padding-right:44px;flex-wrap:wrap}
.pg-brand{font-family:var(--display);font-size:20px}
.pg-for{display:grid;flex:1;min-width:160px}
.pg-for small{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.pg-for b{font-family:var(--display);font-weight:var(--display-w,400);font-size:22px;line-height:1.15}
.pg-for span{font-size:12.5px;color:var(--muted)}
.pg-banner{padding:12px 14px;border-radius:12px;background:var(--accent-soft);font-size:13.5px}
.pg-banner.ok{background:var(--ok);color:var(--ok-fg)}
.pg-stage{display:grid;gap:16px}
@media(min-width:900px){.pg-stage{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start}}
.pg-side{display:grid;gap:14px;min-width:0}
.seg{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--surface-2);overflow-x:auto}
.seg button{flex:1;white-space:nowrap;min-height:36px;padding:0 12px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--muted);transition:background-color .25s,color .25s}
.seg button.on{background:var(--bg);color:var(--fg);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.pg-now{display:flex;justify-content:space-between;gap:10px;font-size:13.5px}
.pg-now span{color:var(--muted)}
.pg-buy{display:grid;gap:6px}
.pg-prod{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);text-align:left;transition:box-shadow .2s,transform .15s var(--ease)}
.pg-prod:hover{box-shadow:inset 0 0 0 1px var(--fg)}
.pg-prod:active{transform:scale(.98)}
.pg-prod span{display:grid;min-width:0}
.pg-prod small{font-size:12px;color:var(--muted)}
.pg-prod em{font-style:normal;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pg-prod s{font-weight:400;color:var(--muted)}
.pg-prod.best{box-shadow:inset 0 0 0 2px var(--accent)}
.pg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
@media(min-width:760px){.pg-grid{grid-template-columns:repeat(6,1fr)}}
.pg-tile{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:4/5;max-width:100%}
.pg-pick{display:block;width:100%;height:100%;position:relative}
.pg-pick img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.pg-tile.on{outline:2px solid var(--accent);outline-offset:2px}
.heart{position:absolute;right:6px;bottom:6px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.88);color:#999;font-size:15px;display:grid;place-items:center;transition:transform .3s var(--spring,var(--ease)),color .2s}
.heart.on{color:#d0344a;transform:scale(1.12)}
.heart:active{transform:scale(.85)}
.wm{position:absolute;inset:0;pointer-events:none;background-image:var(--wm);background-size:180px 120px;opacity:.55;mix-blend-mode:screen}
.nudge{padding:10px 12px;border-radius:10px;background:var(--accent-soft);font-size:13px}

/* mockups */
.mk{display:grid;gap:8px}
.mk-label{font-size:12px;color:var(--muted);font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}
.mk-photo{position:relative;overflow:hidden;width:100%;height:100%}
.mk-photo img{width:100%;height:100%;object-fit:cover}
.mk-room{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:linear-gradient(180deg,#e9e3da 0%,#e2dbd0 72%,#cfc4b4 72%,#c7bba9 100%);max-width:100%}
.mk-wall .mk-frame{position:absolute;left:50%;top:9%;width:36%;aspect-ratio:4/5;transform:translateX(-50%);background:#f7f4ee;padding:4.5%;box-shadow:0 0 0 5px #c9a978,0 18px 30px -10px rgba(40,25,10,.45);transition:transform .6s var(--ease)}
.mk-console{position:absolute;left:22%;right:22%;top:68%;height:5%;background:#6e5440;border-radius:2px}
.mk-vase{position:absolute;left:28%;top:52%;width:5%;height:16%;background:#9aa58f;border-radius:40% 40% 20% 20%}
.mk-trio .mk-frame{position:absolute;top:12%;width:21%;aspect-ratio:4/5;background:#f7f4ee;padding:3%;box-shadow:0 0 0 4px #2d2621,0 14px 24px -10px rgba(0,0,0,.4)}
.mk-trio .f0{left:18%}.mk-trio .f1{left:39.5%;top:8%;width:21%}.mk-trio .f2{left:61%}
.mk-sofa{position:absolute;left:12%;right:12%;top:62%;height:18%;background:#b9a48c;border-radius:16px 16px 6px 6px;box-shadow:inset 0 -10px 0 #a48e75}
.mk-album .mk-book{aspect-ratio:2/1.15;display:grid;grid-template-columns:1fr 1fr;padding:5%;border-radius:var(--r);background:radial-gradient(ellipse at 50% 120%,#cdbfae,#e6ddd1 60%);max-width:100%}
.mk-page{background:#fbf8f3;padding:9%;box-shadow:0 10px 24px -12px rgba(0,0,0,.5);position:relative;display:grid}
.mk-page.l{border-radius:4px 0 0 4px;background:linear-gradient(90deg,#fbf8f3 85%,#e8e1d6)}
.mk-page.r{border-radius:0 4px 4px 0;background:linear-gradient(90deg,#e8e1d6,#fbf8f3 15%);grid-template-rows:1fr auto;gap:8%}
.mk-page.r .mk-photo{height:auto;aspect-ratio:1}
.mk-cap{font-family:var(--display);font-size:clamp(9px,1.4vw,13px);color:#5a4a3c;text-align:center;line-height:1.3}
.mk-phone{justify-items:center}
.mk-phone .mk-dev{position:relative;width:min(240px,62%);aspect-ratio:9/19.5;border-radius:34px;padding:9px;background:#161412;box-shadow:0 30px 50px -20px rgba(0,0,0,.5)}
.mk-phone .mk-photo{border-radius:26px}
.mk-lock{position:absolute;inset:0;display:grid;align-content:start;justify-items:center;padding-top:22%;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.mk-lock b{font-size:clamp(34px,7vw,52px);font-weight:600;letter-spacing:-.02em;line-height:1}
.mk-lock span{font-size:12px}

/* studio */
.studio{display:grid;gap:20px}
@media(min-width:960px){.studio{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:start}}
.studio-new,.studio-list{background:var(--surface);border-radius:var(--r-lg);padding:20px;display:grid;gap:12px;min-width:0}
.studio-new h3{font-family:var(--display);font-weight:var(--display-w,400);font-size:26px}
.st-pick{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
@media(min-width:560px){.st-pick{grid-template-columns:repeat(6,1fr)}}
.st-ph{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;max-width:100%;opacity:.5;transition:opacity .2s,transform .2s var(--ease)}
.st-ph img{width:100%;height:100%;object-fit:cover}
.st-ph i{position:absolute;right:5px;top:5px;width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--accent-fg);font-style:normal;font-size:12px;display:grid;place-items:center;transform:scale(0);transition:transform .3s var(--spring,var(--ease))}
.st-ph.on{opacity:1}
.st-ph.on i{transform:scale(1)}
.st-ph:active{transform:scale(.94)}
.st-link{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;padding:14px;border-radius:14px;background:var(--accent-soft);animation:viewIn .5s var(--ease) both}
.st-link div:first-child{display:grid;min-width:0}
.st-link small{font-size:11.5px;color:var(--muted)}
.st-link b{word-break:break-all;font-family:var(--mono);font-size:13px}
.st-link-btns{display:flex;gap:6px}
.st-row{display:grid;grid-template-columns:auto 1fr;gap:10px 12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
@media(min-width:560px){.st-row{grid-template-columns:auto minmax(0,1fr) auto auto}}
.st-thumbs{display:flex}
.st-thumbs img{width:36px;height:46px;object-fit:cover;border-radius:6px;box-shadow:0 0 0 2px var(--surface)}
.st-thumbs img+img{margin-left:-14px}
.st-info{display:grid;min-width:0}
.st-info span{font-size:12.5px;color:var(--muted)}
.st-info .st-stats{font-variant-numeric:tabular-nums}
.st-btns{display:flex;gap:6px;grid-column:1/-1}
@media(min-width:560px){.st-btns{grid-column:auto}}
.st-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
.st-kpis div{display:grid;padding:12px;border-radius:12px;background:var(--surface-2)}
.st-kpis b{font-family:var(--display);font-size:22px;font-variant-numeric:tabular-nums}
.st-kpis span{font-size:11.5px;color:var(--muted)}
.gal-card{display:flex;gap:14px;align-items:center;text-align:left;padding:10px;border-radius:var(--r-lg);background:var(--surface);transition:transform .2s var(--ease)}
.gal-card:active{transform:scale(.98)}
.gal-card img{width:84px;height:100px;border-radius:12px;object-fit:cover}
.gal-card span{display:grid}
.gal-card small{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.gal-card b{font-family:var(--display);font-weight:var(--display-w,400);font-size:20px}
.gal-card em{font-style:normal;font-size:13px;color:var(--accent);font-weight:600}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}[data-reveal]:not(.in){transform:none;opacity:1}}

/* online payment buttons (Stripe Checkout + PayPal) */
.pay-btns{display:grid;gap:10px;margin:6px 0 2px}
.pay-btns .btn{min-height:52px}
.pay-pp{background:#ffc439;color:#1d2a52;border:0;font-weight:600;letter-spacing:.06em}
.pay-pp b{font-family:Verdana,Arial,sans-serif;font-style:italic;font-weight:800;letter-spacing:0;text-transform:none;color:#003087;margin-left:.35em}
.pay-pp:hover{background:#f2ba36}
.pay-safe{display:flex;gap:6px;align-items:center;justify-content:center}
.pay-safe svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;flex:none}
.pay-alt{border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.pay-alt summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--muted);list-style:none;text-align:center}
.pay-alt summary::-webkit-details-marker{display:none}
.pay-alt[open] summary{margin-bottom:8px}
.pay-alt p{font-size:13px;color:var(--muted);margin-bottom:10px}
a.btn{text-decoration:none}
.pay-btns{width:100%;justify-self:stretch}
.pay-btns .btn{width:100%;display:flex;justify-content:center;align-items:center}