/* ============================================================
   ANG YOON 鸿运 — site tokens and layout (v3 "quiet / stone").
   Type, hairlines and photographs only. One dark panel.
   ============================================================ */
:root{
  --bg:#e9e5de; --bg-2:#e1dcd3; --paper:#f2efea;
  --ink:#1f1b18; --ink-2:rgba(31,27,24,.72); --ink-3:rgba(31,27,24,.5);
  --line:rgba(31,27,24,.16); --line-soft:rgba(31,27,24,.09);
  --dark:#1c1917; --dark-ink:#efe9df; --dark-ink-2:rgba(239,233,223,.7); --dark-line:rgba(239,233,223,.18);
  --mark:#8a3a2b;
  --ok:#3f6b4a; --warn:#8a3a2b;
  --serif:'Newsreader','Iowan Old Style',Georgia,serif;
  --han:'Noto Serif SC','Songti SC','SimSun',serif;
  --mono:'IBM Plex Mono','SF Mono',Consolas,monospace;
  --pad:clamp(20px,5vw,80px);
  --navh:64px;
  --fs-h1:clamp(2.6rem,7vw,5.6rem);
  --fs-h2:clamp(2rem,4.4vw,3.4rem);
  --fs-body:clamp(1.05rem,1.15vw,1.2rem);
  --fs-small:.95rem;
  --fs-mono:.72rem;
}
html.ay *,html.ay *::before,html.ay *::after{box-sizing:border-box}
html.ay h1,html.ay h2,html.ay h3,html.ay h4,html.ay p,html.ay figure,html.ay ul{margin:0;padding:0}
html.ay button,html.ay input,html.ay select,html.ay textarea{font:inherit;color:inherit}
html.ay{background:var(--bg);color-scheme:light;scroll-behavior:smooth}
html.ay[lang="zh-Hans"] body,html.ay[lang="zh-Hans"] h1,html.ay[lang="zh-Hans"] h2,html.ay[lang="zh-Hans"] h3,html.ay[lang="zh-Hans"] h4{font-family:var(--serif),var(--han)}
html.ay[lang="zh-Hans"] h1,html.ay[lang="zh-Hans"] h2{font-weight:400;letter-spacing:0}
html.ay body{background:var(--bg);color:var(--ink);font-family:var(--serif);font-size:var(--fs-body);line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased;font-variation-settings:'opsz' 16;margin:0}
.ay ::selection{background:var(--ink);color:var(--bg)}
.ay img{max-width:100%;height:auto;display:block}
.ay a{color:inherit;text-decoration:none}
.ay a:focus-visible,.ay button:focus-visible,.ay input:focus-visible,.ay select:focus-visible,.ay textarea:focus-visible{outline:1px solid var(--ink);outline-offset:4px}

.ay .mono{font-family:var(--mono);font-size:var(--fs-mono);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);font-weight:400}
.ay h1,.ay h2,.ay h3{font-weight:400;letter-spacing:-.015em;text-wrap:balance;margin:0}
.ay h1{font-size:var(--fs-h1);line-height:1;font-variation-settings:'opsz' 72}
.ay h2{font-size:var(--fs-h2);line-height:1.08;font-variation-settings:'opsz' 72}
.ay h3{font-size:1.35rem;line-height:1.2;font-variation-settings:'opsz' 24}
.ay p{max-width:58ch;margin:0}
.ay em{font-style:italic;font-weight:300}

/* header */
.ay header.top{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line);height:var(--navh);display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad)}
.ay .brand{display:flex;gap:12px;min-height:44px;align-items:center}
.ay .brand .han{font-family:var(--han);font-weight:600;font-size:1.3rem;color:var(--mark);letter-spacing:.08em}
.ay .brand .name{font-size:1.15rem;letter-spacing:-.01em}
.ay nav.links{display:none;gap:34px}
.ay nav.links a{font-family:var(--mono);font-size:var(--fs-mono);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-2);padding:12px 0}
.ay nav.links a:hover{color:var(--ink)}
.ay .top .cta{font-family:var(--mono);font-size:var(--fs-mono);text-transform:uppercase;letter-spacing:.14em;border:1px solid var(--ink);padding:12px 16px;min-height:44px;display:inline-flex;align-items:center;transition:background .2s,color .2s}
.ay .top .cta:hover{background:var(--ink);color:var(--bg)}
@media(min-width:900px){.ay nav.links{display:flex}}

/* hero */
.ay .hero{padding:clamp(56px,9vw,120px) var(--pad) clamp(40px,6vw,72px);display:grid;gap:34px}
.ay .hero .eyebrow{display:flex;gap:18px;flex-wrap:wrap}
.ay .hero h1{max-width:16ch;margin-top:28px}
.ay .hero p{font-size:clamp(1.15rem,1.5vw,1.45rem);line-height:1.4;color:var(--ink-2);max-width:40ch}
.ay .btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:var(--fs-mono);text-transform:uppercase;letter-spacing:.16em;border:1px solid var(--ink);padding:0 28px;min-height:52px;color:var(--ink);background:transparent;cursor:pointer;transition:background .2s,color .2s}
.ay .btn:hover{background:var(--ink);color:var(--bg)}
.ay .btn.fill{background:var(--ink);color:var(--bg)}
.ay .btn.fill:hover{background:var(--mark);border-color:var(--mark);color:var(--dark-ink)}
.ay .btn.sm{min-height:40px;padding:0 16px;letter-spacing:.12em}
.ay .btn.danger{border-color:var(--mark);color:var(--mark)}
.ay .btn.danger:hover{background:var(--mark);color:var(--dark-ink)}
.ay .hero .actions{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:899px){.ay .hero .actions .btn{flex:1 1 0;padding:0 14px;white-space:nowrap}}
@media(min-width:900px){
  .ay .hero{grid-template-columns:1.1fr .9fr;align-items:end;gap:60px}
  .ay .hero .right{display:grid;gap:34px;padding-bottom:6px}
}

/* full-width photo */
.ay .plate{padding:0 var(--pad);margin:0}
.ay .plate img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:60% 50%}
@media(max-width:899px){.ay .plate img{aspect-ratio:4/5;object-position:58% 50%}}
.ay .plate .cap{display:flex;justify-content:space-between;gap:16px;padding:14px 0 0;border-top:1px solid var(--line-soft);margin-top:14px}

/* section head */
.ay .sec{padding:clamp(72px,10vw,140px) var(--pad) 0}
.ay .sec-head{display:grid;gap:22px;padding-bottom:clamp(36px,5vw,64px)}
@media(min-width:900px){.ay .sec-head{grid-template-columns:1fr 1fr;align-items:end}.ay .sec-head p{justify-self:end;max-width:46ch}}
.ay .sec-head p{color:var(--ink-2)}

/* catalogue */
.ay .cat{border-top:1px solid var(--line);padding-top:28px;margin-top:clamp(40px,6vw,72px)}
.ay .cat:first-of-type{margin-top:0}
.ay .cat-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;padding-bottom:28px}
.ay .cat-head h3{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.ay .cat-head .han{font-family:var(--han);color:var(--ink-3);font-size:1.1rem;margin-left:12px}
.ay .cat-head p{color:var(--ink-2);font-size:var(--fs-small);max-width:44ch}
.ay .range{display:grid;gap:40px 22px;grid-template-columns:1fr 1fr}
@media(min-width:900px){.ay .range{grid-template-columns:repeat(3,1fr);gap:56px 32px}}
.ay .item{display:block}
.ay .item .ph{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--bg-2)}
.ay .item .ph.empty{display:flex;align-items:center;justify-content:center;border:1px solid var(--line-soft)}
.ay .item .ph.empty span{font-family:var(--han);font-size:2.4rem;color:var(--ink-3)}
.ay .item .t{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line-soft)}
.ay .item h4{font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:400;margin:0;letter-spacing:-.01em}
.ay .item .han{font-family:var(--han);font-size:1rem;color:var(--ink-3);flex:none}
.ay .item p{color:var(--ink-2);font-size:var(--fs-small);margin-top:6px;max-width:32ch}
@media(max-width:899px){.ay .item p{display:none}}
.ay .item .price{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.ay .item .price .ask-s{color:var(--ink-3)}
.ay .item:hover .price .ask-s{color:var(--mark)}
.ay .askbox{display:flex;flex-direction:column;justify-content:flex-end;border:1px solid var(--line);padding:24px;margin-top:clamp(40px,6vw,72px)}
@media(min-width:900px){.ay .askbox{padding:40px;display:grid;grid-template-columns:1fr auto;align-items:end;gap:40px}}
.ay .askbox h3{font-size:clamp(1.4rem,2.2vw,1.9rem);max-width:22ch;margin-top:12px}
.ay .askbox p{margin:12px 0 22px;color:var(--ink-2);font-size:var(--fs-small)}
@media(min-width:900px){.ay .askbox p{margin-bottom:0}}

/* dark panel */
.ay .dark{margin-top:clamp(72px,10vw,140px);background:var(--dark);color:var(--dark-ink);position:relative;overflow:hidden}
.ay .dark .bg{position:absolute;inset:0}
.ay .dark .bg img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;opacity:.42;filter:saturate(.75)}
.ay .dark .bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,25,23,.35),rgba(28,25,23,.85))}
.ay .dark .in{position:relative;z-index:1;padding:clamp(120px,22vw,260px) var(--pad) clamp(64px,9vw,120px);display:grid;gap:26px;max-width:760px;margin:0 auto;text-align:center;justify-items:center}
.ay .dark .mono{color:var(--dark-ink-2)}
.ay .dark h2{font-weight:300;letter-spacing:.08em;text-transform:uppercase;font-size:clamp(1.4rem,3vw,2.3rem);line-height:1.25}
.ay .dark p{color:var(--dark-ink-2);font-size:clamp(1.05rem,1.3vw,1.25rem);line-height:1.55;text-wrap:pretty}
.ay .dark .names{display:flex;gap:10px 28px;flex-wrap:wrap;justify-content:center;font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dark-ink-2);padding-top:10px;border-top:1px solid var(--dark-line);margin-top:8px}

/* services */
.ay .services{border-top:1px solid var(--line)}
.ay .svc{display:grid;gap:8px;padding:26px 0;border-bottom:1px solid var(--line-soft)}
@media(min-width:900px){.ay .svc{grid-template-columns:1fr 1fr;gap:40px;padding:30px 0}.ay .svc p{grid-column:2}}
.ay .svc h3{font-size:clamp(1.25rem,2vw,1.6rem)}
.ay .svc p{color:var(--ink-2);font-size:var(--fs-small);max-width:56ch}

/* services from db */
.ay .svc h3 .han{font-family:var(--han);font-size:1rem;color:var(--ink-3);margin-left:12px;letter-spacing:0}
.ay .svc-meta{grid-column:2;display:block;margin-top:2px}
@media(max-width:899px){.ay .svc-meta{grid-column:auto}}
.ay a.svc:hover h3{color:var(--mark)}
.ay .adm-kind{margin-top:44px;padding-bottom:8px;border-bottom:1px solid var(--ink);color:var(--ink)}

/* visit */
.ay .visit{display:grid;gap:40px;border-top:1px solid var(--line);padding-top:40px}
@media(min-width:900px){.ay .visit{grid-template-columns:1fr 1fr 1fr;gap:32px}}
.ay .visit .k{padding-bottom:12px;border-bottom:1px solid var(--line-soft);margin-bottom:14px}
.ay .visit .addr{font-size:1.15rem;line-height:1.45}
.ay .visit .addr b{font-weight:500}
.ay .visit .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.ay .hours{width:100%;border-collapse:collapse}
.ay .hours td{padding:8px 0;border-bottom:1px solid var(--line-soft);color:var(--ink-2);font-size:var(--fs-small)}
.ay .hours td:last-child{text-align:right;font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.06em;color:var(--ink)}
.ay .hours tr.today td{color:var(--ink);font-weight:500}
.ay .rating{font-size:clamp(3rem,6vw,4.5rem);line-height:1;font-weight:300;font-variation-settings:'opsz' 72}
.ay .rating small{display:block;font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:12px}

/* footer */
.ay footer.foot{margin-top:clamp(72px,10vw,140px);border-top:1px solid var(--line);padding:36px var(--pad) calc(36px + env(safe-area-inset-bottom));display:flex;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;align-items:flex-end;background:var(--bg-2)}
.ay footer .han{font-family:var(--han);font-size:1.6rem;color:var(--mark)}
.ay footer p{font-size:var(--fs-small);color:var(--ink-2);margin-top:8px;max-width:40ch}
.ay footer .meta{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);line-height:2}

/* motion: one fade */
.ay.js .rev{opacity:0;transform:translateY(12px);transition:opacity .9s ease,transform .9s ease}
.ay .rev.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.ay.js .rev{opacity:1;transform:none;transition:none}html.ay{scroll-behavior:auto}}

/* ============ admin ============ */
.ay .adm{max-width:1080px;margin:0 auto;padding:clamp(28px,4vw,56px) var(--pad) 120px}
.ay .adm-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;padding-bottom:24px;border-bottom:1px solid var(--line);margin-bottom:28px}
.ay .adm-top h1{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.ay .adm-top .tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ay .msg{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.1em;text-transform:uppercase;padding:12px 14px;border:1px solid var(--line);margin-bottom:24px;color:var(--ok)}
.ay .msg.bad{color:var(--warn);border-color:var(--warn)}
.ay .adm-cat{margin-top:36px}
.ay .adm-cat .k{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.ay .adm-cat .k h2{font-size:clamp(1.3rem,2vw,1.7rem)}
.ay .adm-cat .k .han{font-family:var(--han);color:var(--ink-3);margin-left:10px;font-size:1rem}
.ay .row{display:grid;grid-template-columns:56px 1fr auto;gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.ay .row .th{width:56px;height:72px;object-fit:cover;background:var(--bg-2)}
.ay .row .th.empty{border:1px solid var(--line-soft)}
.ay .row .nm{display:flex;flex-direction:column;gap:3px;min-width:0}
.ay .row .nm b{font-weight:500;font-size:1.05rem}
.ay .row .nm span{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ay .row .nm .hidden{color:var(--warn)}
.ay .row .act{display:flex;gap:8px;align-items:center}
.ay .empty-note{padding:18px 0;color:var(--ink-3);font-size:var(--fs-small)}

.ay .form{display:grid;gap:22px;max-width:720px}
.ay .form .f{display:grid;gap:8px}
.ay .form label{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.ay .form input[type=text],.ay .form input[type=number],.ay .form input[type=password],.ay .form select,.ay .form textarea{
  width:100%;font:inherit;font-size:1.05rem;color:var(--ink);background:var(--paper);border:1px solid var(--line);padding:12px 14px;border-radius:0;appearance:none;-webkit-appearance:none}
.ay .form textarea{min-height:120px;resize:vertical;line-height:1.45}
.ay .form select{background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.ay .form .two{display:grid;gap:22px}
@media(min-width:640px){.ay .form .two{grid-template-columns:1fr 1fr}}
.ay .form .hint{font-size:.85rem;color:var(--ink-3)}
.ay .form .check{display:flex;gap:10px;align-items:center;font-size:1rem}
.ay .form .check input{width:20px;height:20px;accent-color:var(--ink)}
.ay .form .img-cur{display:flex;gap:16px;align-items:flex-start}
.ay .form .img-cur img{width:120px;aspect-ratio:3/4;object-fit:cover;background:var(--bg-2)}
.ay .form input[type=file]{font:inherit;font-size:.95rem}
.ay .form .actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between;padding-top:12px;border-top:1px solid var(--line)}
.ay .login{min-height:100dvh;display:grid;place-items:center;padding:var(--pad)}
.ay .login .card{width:100%;max-width:380px;display:grid;gap:22px}
.ay .login .card .brand{justify-content:center}
.ay details.pw{margin-top:48px;border-top:1px solid var(--line);padding-top:20px}
.ay details.pw summary{cursor:pointer;font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);list-style:none}
.ay details.pw .form{margin-top:20px}

/* ============ header: language + cart ============ */
.ay .top-right{display:flex;align-items:center;gap:14px}
.ay .top .lang{font-family:var(--han),var(--mono);font-size:.85rem;letter-spacing:.06em;color:var(--ink-2);padding:10px 4px;min-height:44px;display:inline-flex;align-items:center}
.ay .top .lang:hover{color:var(--mark)}
.ay .top .cartlink{position:relative;font-family:var(--mono);font-size:var(--fs-mono);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-2);padding:10px 4px;min-height:44px;display:inline-flex;align-items:center;gap:6px}
.ay .top .cartlink:hover{color:var(--ink)}
.ay .top .cartlink .badge[hidden]{display:none}
.ay .top .cartlink .badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border:1px solid var(--ink);font-size:.62rem;letter-spacing:0;color:var(--ink)}
@media(max-width:899px){.ay .top-right{gap:6px}.ay .top .cta{padding:10px 10px}.ay .top .lang,.ay .top .cartlink{padding:10px 2px}.ay .brand .name{display:none}}

/* ============ product card: add + view ============ */
.ay .item .item-link{display:block}
.ay .item .price .acts{display:inline-flex;gap:14px;align-items:center}
.ay .item .price .view{color:var(--ink-3)}
.ay .item:hover .price .view{color:var(--mark)}
.ay .btn.xs{min-height:32px;padding:0 12px;letter-spacing:.12em;font-size:.66rem}
.ay .addbtn.done{background:var(--ink);color:var(--bg)}
.ay .btn.fill.addbtn.done{background:var(--ok);border-color:var(--ok);color:var(--dark-ink)}

/* ============ product page ============ */
.ay .pdp{max-width:1180px;margin:0 auto;padding:clamp(24px,4vw,56px) var(--pad) 120px}
.ay .pdp .back{display:inline-block;margin-bottom:24px}
.ay .pdp .back:hover{color:var(--ink)}
.ay .pdp-grid{display:grid;gap:36px}
@media(min-width:900px){.ay .pdp-grid{grid-template-columns:1.05fr .95fr;gap:64px;align-items:start}}
.ay .pdp-media img{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--bg-2)}
.ay .pdp-media .ph.big{aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;border:1px solid var(--line-soft)}
.ay .pdp-media .ph.big span{font-family:var(--han);font-size:4rem;color:var(--ink-3)}
.ay .pdp-body{display:grid;gap:16px;align-content:start}
@media(min-width:900px){.ay .pdp-body{position:sticky;top:calc(var(--navh) + 24px)}}
.ay .pdp-body h1{font-size:clamp(2rem,4vw,3.2rem);line-height:1.05}
.ay .pdp-body .alt{font-family:var(--han);font-size:1.3rem;color:var(--ink-3);margin-top:-8px}
.ay .pdp-price{font-family:var(--mono);font-size:1rem;letter-spacing:.08em;text-transform:uppercase;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line-soft)}
.ay .pdp-price.ask{color:var(--ink-3)}
.ay .pdp-body .lead{font-size:clamp(1.1rem,1.4vw,1.3rem);line-height:1.45;color:var(--ink-2)}
.ay .pdp-details{display:grid;gap:12px;padding-top:8px}
.ay .pdp-details .k{padding-bottom:8px;border-bottom:1px solid var(--line-soft)}
.ay .pdp-details p{color:var(--ink-2);font-size:var(--fs-small);line-height:1.6;max-width:60ch}
.ay .pdp-buy{display:grid;gap:16px;padding-top:12px;border-top:1px solid var(--line)}
.ay .qty{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ay .stepper{display:inline-flex;align-items:center;border:1px solid var(--ink)}
.ay .stepper button{font:inherit;font-size:1.1rem;width:44px;height:44px;background:transparent;border:0;color:var(--ink);cursor:pointer}
.ay .stepper button:hover{background:var(--ink);color:var(--bg)}
.ay .stepper span{min-width:44px;text-align:center;font-family:var(--mono);font-size:.95rem}
.ay .pdp-actions{display:grid;gap:10px}
@media(min-width:640px){.ay .pdp-actions{grid-template-columns:1fr 1fr}}
.ay .pdp-actions .btn{width:100%;text-align:center}
.ay .pdp-buy .hint{font-size:.85rem;color:var(--ink-3);line-height:1.5}

/* ============ cart page ============ */
.ay .cartpg{max-width:900px;margin:0 auto;padding:clamp(28px,4vw,56px) var(--pad) 120px}
.ay .cart-empty{display:grid;gap:22px;justify-items:start;padding:24px 0}
.ay .cart-empty p{color:var(--ink-2)}
.ay .cart-lines{border-top:1px solid var(--line)}
.ay .cart-line{display:grid;grid-template-columns:72px 1fr auto;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line-soft)}
@media(min-width:640px){.ay .cart-line{grid-template-columns:72px 1fr auto auto;gap:24px}}
.ay .cart-line .cl-img img{width:72px;height:96px;object-fit:cover;background:var(--bg-2)}
.ay .cart-line .th.empty{width:72px;height:96px;border:1px solid var(--line-soft)}
.ay .cl-body{display:grid;gap:6px;min-width:0}
.ay .cl-name{font-size:1.1rem}
.ay .cl-name:hover{color:var(--mark)}
.ay .cl-sub{display:grid;gap:6px;justify-items:end;font-family:var(--mono);font-size:.9rem;grid-column:3}
@media(min-width:640px){.ay .cl-sub{grid-column:auto;min-width:110px}}
@media(max-width:639px){.ay .cart-line .stepper{grid-column:2;justify-self:start}}
.ay .linkbtn{font:inherit;font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);background:none;border:0;padding:6px 0;cursor:pointer}
.ay .linkbtn:hover{color:var(--mark)}
.ay .cart-foot{display:grid;gap:16px;justify-items:end;padding-top:24px}
.ay .cart-total{display:flex;gap:24px;align-items:baseline}
.ay .cart-total b{font-weight:400;font-size:clamp(1.6rem,3vw,2.2rem);font-variation-settings:'opsz' 72}
.ay .cart-foot .hint{font-size:.85rem;color:var(--ink-3);text-align:right;max-width:48ch}
.ay .cartpg .adm-top{align-items:center}

/* mobile card price row: price on its own line, actions beneath */
@media(max-width:899px){
  .ay .item .price{flex-wrap:wrap;gap:10px 12px;letter-spacing:.06em}
  .ay .item .price>span:first-child{flex:1 1 100%}
  .ay .item .price .acts{margin-left:auto}
}

/* product gallery */
.ay .gallery{display:grid;gap:12px}
.ay .g-main img{width:100%;aspect-ratio:3/4;object-fit:contain;background:var(--bg-2)}
.ay .g-thumbs{display:none;gap:10px;flex-wrap:wrap}
.ay .g-thumb{border:1px solid var(--line);padding:0;background:var(--bg-2);cursor:pointer;width:72px;height:96px;overflow:hidden}
.ay .g-thumb img{width:100%;height:100%;object-fit:cover;opacity:.7;transition:opacity .2s}
.ay .g-thumb.on{border-color:var(--ink)}
.ay .g-thumb.on img,.ay .g-thumb:hover img{opacity:1}
.ay .g-stack{display:grid;gap:12px}
.ay .g-stack img{width:100%;height:auto;background:var(--bg-2)}
@media(min-width:900px){.ay .g-thumbs{display:flex}.ay .g-stack{display:none}}
@media(max-width:899px){.ay .g-main img{aspect-ratio:auto;object-fit:initial;height:auto}}