/* ROKA storefront. Built on the site's own tokens (--roka-*), fonts and rust accent, with the
   layout rules of the best product pages: one column on phones, 7/5 split with a held gallery on
   desktop, 8-point spacing, 44 px tap targets, pills and swatches for options, a drawer basket.
   Light and dark follow the site's .dark class through the tokens. */
:root{--shop-accent:#965129;--shop-accent-ink:#fff;--shop-line:color-mix(in srgb,var(--roka-body) 28%,transparent);--shop-soft:color-mix(in srgb,var(--roka-body) 8%,transparent);--shop-r:14px;--shop-gap:16px}

/* ---- page frame ---- */
.shop-wrap{padding:0 16px 96px;color:var(--roka-body);font-size:17px;line-height:1.55}
@media(min-width:900px){.shop-wrap{padding:0 max(48px,calc((100vw - 1320px)/2)) 120px}}
.shop-wrap img{width:100%;height:auto;display:block}
.shop-wrap p{margin:0 0 12px}
.shop-wrap a{color:inherit}
.shop-wrap h1,.shop-wrap h2{font-family:'BeirutDisplay',serif;color:var(--roka-heading);letter-spacing:-.02em;font-weight:400}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{flex:none}

/* ---- shop bar: breadcrumb and basket ---- */
.sb{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0 16px;margin-bottom:8px;border-bottom:1px solid var(--shop-line)}
.sb-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;font-size:14px;min-width:0}
.sb-sep{margin:0 8px;opacity:.5}
.sb-crumbs a{text-decoration:none}
.sb-crumbs a:hover{text-decoration:underline}
.sb-crumbs [aria-current]{color:var(--roka-heading);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:44vw}
.sb-basket{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--shop-line);text-decoration:none;color:var(--roka-heading);font-size:15px;flex:none}
.sb-basket:hover{border-color:var(--roka-heading)}
.sb-count{min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--shop-accent);color:var(--shop-accent-ink);font-size:13px;line-height:22px;text-align:center}
@media(max-width:480px){.sb-label{display:none}.sb-basket{padding:0 12px}}

/* ---- buttons ---- */
.btn,.shop-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;font:inherit;font-size:17px;letter-spacing:.01em;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background .15s,border-color .15s,color .15s,transform .05s}
.btn:active,.shop-btn:active{transform:translateY(1px)}
.btn-primary{background:var(--shop-accent);color:var(--shop-accent-ink)}
.btn-primary:hover{background:#7f441f}
.btn-ghost{background:transparent;color:var(--roka-heading);border-color:var(--roka-heading)}
.btn-ghost:hover{background:var(--roka-heading);color:var(--roka-bg)}
.btn-wide{width:100%}
.shop-btn{background:transparent;color:var(--roka-heading);border-color:var(--roka-heading)}
.shop-btn:hover:not([disabled]){background:var(--roka-heading);color:var(--roka-bg)}
.btn[disabled],.shop-btn[disabled]{opacity:.4;cursor:not-allowed}
.btn:focus-visible,.shop-btn:focus-visible,.pill input:focus-visible+span,.sw-item input:focus-visible+.sw-chip,.qty-b:focus-visible,.chip:focus-visible,.acc summary:focus-visible,.sb-basket:focus-visible{outline:2px solid var(--shop-accent);outline-offset:3px}
.shop-cta{margin:16px 0 0!important}

/* ---- product page layout ---- */
.pdp{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
@media(min-width:900px){.pdp{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:start}.pdp-media{position:sticky;top:24px}}
.pdp-eyebrow{font-size:13px!important;letter-spacing:.09em;text-transform:uppercase;margin:0 0 8px!important}
.pdp-title{font-size:clamp(34px,4.6vw,56px);line-height:1.02;margin:0 0 12px}
.pdp-price{font-family:'BeirutDisplay',serif;font-size:26px;color:var(--roka-heading);margin:0 0 16px!important}
.pdp-lede{font-size:18px;margin:0 0 24px!important}

/* ---- gallery ---- */
.g{position:relative;margin:0 -16px}
@media(min-width:900px){.g{margin:0}}
.g-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;list-style:none;margin:0;padding:0;outline:none;border-radius:0}
.g-track::-webkit-scrollbar{display:none}
@media(min-width:900px){.g-track{border-radius:var(--shop-r)}}
.g-slide{flex:0 0 100%;scroll-snap-align:start;background:var(--roka-bg-tint)}
.g-slide img{aspect-ratio:4/3;object-fit:cover}
.g-nav{position:absolute;right:12px;top:12px;display:flex;align-items:center;gap:4px;background:color-mix(in srgb,var(--roka-bg) 88%,transparent);border-radius:999px;padding:2px;font-size:13px;color:var(--roka-heading)}
.g-nav button{width:40px;height:40px;border:0;background:none;color:inherit;border-radius:50%;cursor:pointer;display:grid;place-items:center}
.g-count{min-width:40px;text-align:center}
.g-thumbs{display:none;list-style:none;margin:12px 0 0;padding:0;gap:10px;grid-template-columns:repeat(5,1fr)}
@media(min-width:900px){.g-thumbs{display:grid}}
.g-thumbs a{display:block;border-radius:8px;overflow:hidden;border:2px solid transparent;opacity:.7}
.g-thumbs a[aria-current]{border-color:var(--roka-heading);opacity:1}
.g-thumbs img{aspect-ratio:1;object-fit:cover}
.g-cap{font-size:14px!important;margin:8px 16px 0!important}
@media(min-width:900px){.g-cap{margin:8px 0 0!important}}

/* ---- options ---- */
.shop-buy{margin:0;padding:0;background:none}
.opt{border:0;padding:0;margin:0 0 24px;min-width:0}
.opt legend,.opt-label{display:block;font-size:15px;font-weight:500;color:var(--roka-heading);margin:0 0 10px;padding:0;letter-spacing:.01em}
.opt-val{font-weight:400;color:var(--roka-body)}
.opt-help{font-size:14px!important;margin:10px 0 0!important}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{position:relative;cursor:pointer}
.pill input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pill span{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:44px;padding:8px 18px;border:1px solid var(--shop-line);border-radius:999px;font-size:15px;color:var(--roka-heading);text-align:center;line-height:1.25;transition:border-color .15s,background .15s}
.pill small{font-size:13px}
.pill:hover span{border-color:var(--roka-heading)}
.pill input:checked+span{background:var(--roka-heading);border-color:var(--roka-heading);color:var(--roka-bg)}
.pill input:checked+span small{}
.sw{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:12px 8px}
.sw-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;min-height:44px}
.sw-item input{position:absolute;opacity:0;width:44px;height:44px;margin:0;cursor:pointer}
.sw-chip{width:40px;height:40px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);outline:1px solid var(--shop-line);outline-offset:3px;transition:outline-color .15s}
.sw-item:hover .sw-chip{outline-color:var(--roka-body)}
.sw-item input:checked+.sw-chip{outline:2px solid var(--roka-heading);outline-offset:3px}
.sw-name{font-size:13px;color:var(--roka-heading)}
.dims{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dim label,.shop-coverage label{display:block;font-size:14px;margin:0 0 6px}
.dim small{display:block;font-size:13px;margin-top:4px}
.dim-in{display:flex;align-items:center;border:1px solid var(--shop-line);border-radius:10px;padding-right:12px;max-width:240px;background:transparent}
.dim-in:focus-within{border-color:var(--roka-heading)}
.dim-in input{flex:1;min-width:0;font:inherit;font-size:17px;padding:12px 14px;border:0;background:transparent;color:var(--roka-heading);outline:none}
.dim-in span{font-size:14px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--shop-line);border-radius:999px}
.qty input{width:56px;text-align:center;font:inherit;font-size:17px;border:0;background:transparent;color:var(--roka-heading);padding:12px 0;-moz-appearance:textfield;appearance:textfield}
.qty input::-webkit-inner-spin-button,.qty input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.qty-b{width:44px;height:44px;border:0;background:none;color:var(--roka-heading);display:grid;place-items:center;border-radius:50%;cursor:pointer}
.qty-b[disabled]{opacity:.3;cursor:default}
.qty-sm .qty-b{width:36px;height:36px}
.qty-n{min-width:28px;text-align:center;font-size:15px;color:var(--roka-heading)}
.shop-total{font-family:'BeirutDisplay',serif;font-size:21px!important;color:var(--roka-heading)!important;margin:4px 0 16px!important;min-height:1.5em}
.pdp-actions{display:grid;gap:10px}
.pdp-actions .btn,.pdp-actions .shop-btn{width:100%}
.shop-small{font-size:14px!important;margin:10px 0 0!important}
.shop-closed{padding:12px 14px;border-radius:10px;background:var(--shop-soft)}
.shop-error{font-size:15px!important;color:#a3261b;margin:12px 0 0!important}
.dark .shop-error{color:#ff9b8f}
.cov{margin:0 0 20px;border:1px solid var(--shop-line);border-radius:10px;padding:0 14px}
.cov summary{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-size:15px;color:var(--roka-heading);list-style:none}
.cov summary::-webkit-details-marker{display:none}
.cov .shop-coverage{padding:4px 0 8px}
.shop-use{font:inherit;font-size:15px;background:none;border:0;padding:0;text-decoration:underline;cursor:pointer;color:inherit;min-height:44px}

/* ---- reassurance and details ---- */
.usp{list-style:none;margin:28px 0 8px;padding:20px 0 0;border-top:1px solid var(--shop-line);display:grid;gap:14px}
.usp li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.45}
.usp .ico{color:var(--shop-accent);margin-top:1px}
.acc{margin-top:16px;border-bottom:1px solid var(--shop-line)}
.acc details{border-top:1px solid var(--shop-line)}
.acc summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;cursor:pointer;list-style:none;font-size:17px;color:var(--roka-heading)}
.acc summary::-webkit-details-marker{display:none}
.acc summary .ico{transition:transform .2s}
.acc details[open] summary .ico{transform:rotate(45deg)}
.acc-body{padding:0 0 20px;font-size:16px}
.acc-body p:last-child{margin-bottom:0}

/* ---- sticky bar (phones) ---- */
.stk{position:fixed;left:0;right:0;bottom:0;z-index:101;display:flex;align-items:center;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--roka-bg);border-top:1px solid var(--shop-line);box-shadow:0 -6px 24px rgba(0,0,0,.08);transform:translateY(110%);transition:transform .25s ease}
.stk.on{transform:none}
.stk-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.stk-title{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--roka-heading)}
.stk-price{font-family:'BeirutDisplay',serif;font-size:18px;color:var(--roka-heading)}
.stk .btn{min-height:46px;padding:0 20px}
.mobile-conversion-bar{transition:transform .25s ease}
html.stk-on .mobile-conversion-bar{transform:translateY(110%)}
@media(min-width:900px){.stk{display:none}}
@media(prefers-reduced-motion:reduce){.stk,.mobile-conversion-bar,.acc summary .ico{transition:none}}

/* ---- basket drawer ---- */
.dr{position:fixed;inset:0 0 0 auto;margin:0;width:min(440px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;padding:0;border:0;background:var(--roka-bg);color:var(--roka-body);display:none;flex-direction:column;box-shadow:-12px 0 40px rgba(0,0,0,.18)}
.dr[open]{display:flex;animation:dr-in .25s ease}
.dr::backdrop{background:rgba(20,20,18,.45)}
@keyframes dr-in{from{transform:translateX(100%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.dr[open]{animation:none}}
html.dr-lock{overflow:hidden}
.dr-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--shop-line)}
.dr-head h2{font-family:'BeirutDisplay',serif;font-size:26px;margin:0;color:var(--roka-heading);font-weight:400}
.dr-x{width:44px;height:44px;border:0;background:none;color:var(--roka-heading);border-radius:50%;display:grid;place-items:center;cursor:pointer}
.dr-added{margin:0!important;padding:12px 20px;font-size:15px;background:var(--shop-soft);color:var(--roka-heading)}
.dr-body{flex:1;overflow-y:auto;padding:4px 20px}
.dr-foot{padding:16px 20px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--shop-line);background:var(--roka-bg)}
.dr-empty{padding:48px 0;text-align:center}
.dr-empty p{font-size:18px;color:var(--roka-heading)}
.bls{list-style:none;margin:0;padding:0}
.bl{display:grid;grid-template-columns:80px minmax(0,1fr) auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--shop-line)}
.bl:last-child{border-bottom:0}
.bl-img{display:block;align-self:start;border-radius:8px;overflow:hidden;background:var(--roka-bg-tint)}
.bl-img img{width:80px;height:60px;object-fit:cover}
.bl-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.bl-name{font-size:16px;color:var(--roka-heading);text-decoration:none}
.bl-name:hover{text-decoration:underline}
.bl-sum{font-size:14px}
.bl-err{font-size:14px;color:#a3261b}
.bl-bad{background:color-mix(in srgb,#a3261b 6%,transparent)}
.bl-row{display:flex;align-items:center;gap:12px;margin-top:8px}
.bl-rm{font:inherit;font-size:14px;background:none;border:0;padding:8px 0;min-height:36px;text-decoration:underline;color:inherit;cursor:pointer}
.bl-price{font-size:16px;color:var(--roka-heading);white-space:nowrap}
.dr-sum{margin:0 0 8px;display:grid;gap:6px}
.dr-sum div{display:flex;justify-content:space-between;gap:12px;font-size:15px}
.dr-sum dt small{display:block;font-size:13px}
.dr-sum dd{margin:0;color:var(--roka-heading)}
.dr-total{padding-top:8px;border-top:1px solid var(--shop-line);font-family:'BeirutDisplay',serif;font-size:21px!important;color:var(--roka-heading)}
.dr-note{font-size:13px!important;margin:10px 0 0!important}
.dr-err{font-size:14px!important;color:#a3261b;margin:10px 0 0!important}

/* ---- basket page ---- */
.basket-page h1,.thanks-page h1,.plp-head h1{font-size:clamp(40px,7vw,80px);line-height:1;margin:24px 0 24px}
.bp{max-width:760px}
.bp-foot{margin-top:16px;padding-top:16px;border-top:1px solid var(--shop-line);max-width:420px;margin-left:auto}

/* ---- shop index ---- */
.plp-head p{font-size:18px;max-width:560px}
.plp-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:24px 0 8px}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px;margin:-2px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--shop-line);background:none;font:inherit;font-size:14px;color:var(--roka-heading);cursor:pointer;white-space:nowrap}
.chip[aria-pressed=true]{background:var(--roka-heading);border-color:var(--roka-heading);color:var(--roka-bg)}
.sort{display:flex;align-items:center;gap:8px;font-size:14px}
.sort select{font:inherit;font-size:14px;min-height:40px;padding:0 12px;border:1px solid var(--shop-line);border-radius:999px;background:transparent;color:var(--roka-heading)}
.plp-count{font-size:14px!important;margin:8px 0 16px!important}
.plp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}
@media(min-width:900px){.plp-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px}}
@media(min-width:1200px){.plp-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.shop-card{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit}
.shop-card[hidden]{display:none}
.card-img{position:relative;display:block;border-radius:var(--shop-r);overflow:hidden;background:var(--roka-bg-tint)}
.card-img img{aspect-ratio:4/5;object-fit:cover;transition:transform .4s ease}
.shop-card:hover .card-img img{transform:scale(1.03)}
@media(prefers-reduced-motion:reduce){.shop-card:hover .card-img img{transform:none}}
.card-badge{position:absolute;left:10px;top:10px;font-size:12px;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--roka-bg) 90%,transparent);color:var(--roka-heading)}
.card-txt{display:flex;flex-direction:column;gap:2px}
.card-cat{font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.shop-card h2{font-family:inherit!important;font-size:17px!important;letter-spacing:0!important;margin:0;color:var(--roka-heading);line-height:1.3}
.shop-card:hover h2{text-decoration:underline}
.card-price{font-size:15px}
.plp-usp{display:grid;gap:16px;margin-top:64px;padding-top:32px;border-top:1px solid var(--shop-line)}
@media(min-width:900px){.plp-usp{grid-template-columns:repeat(3,1fr)}}
.plp-usp p{display:flex;gap:12px;font-size:15px}
.plp-usp .ico{color:var(--shop-accent)}

/* ---- terms page (text) ---- */
.shop-terms{max-width:760px}
.shop-terms h1{font-size:clamp(40px,7vw,80px);line-height:1;margin:24px 0}
.shop-terms h2{font-size:26px;margin:40px 0 12px}

/* ---- guard against the site's text-page list and link styles (the shop sits in that frame) ---- */
.shop-wrap ul,.shop-wrap ol{list-style:none;margin:0;padding:0}
.shop-wrap li{margin:0;padding:0}
.shop-wrap li::marker{content:none}
.sb-crumbs ol{padding:0!important;margin:0!important}
.sb-crumbs a,.sb-crumbs a:visited{color:inherit!important;text-decoration:none!important;border:0!important}
.sb-crumbs a:hover{text-decoration:underline!important}
.g-track,.g-thumbs,.bls,.usp{padding:0!important;margin-left:0!important}
.g-track{margin:0!important}
.g-slide{margin:0!important;padding:0!important}
.shop-card,.shop-card:visited{color:inherit!important;text-decoration:none!important}
.bl-name,.bl-name:visited{color:var(--roka-heading)!important}