/* Touman Studio store. Uses only the V3 role tokens from tokens.css; phone first. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--step-0)/1.6 var(--font-sans);text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-offset)}
h1,h2,h3{font-weight:600;line-height:1.2;letter-spacing:-.01em;margin:0 0 var(--space-s)}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-2)}
h3{font-size:var(--step-1)}
p{margin:0 0 var(--space-s)}
.wrap{width:100%;max-width:72rem;margin-inline:auto;padding-inline:var(--gutter)}
.measure{max-width:var(--measure)}
.soft{color:var(--text-soft)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--space-s);top:-10rem;z-index:20;display:inline-flex;align-items:center;min-height:var(--target);background:var(--bg-raised);color:var(--text);padding:var(--space-xs) var(--space-s);border-radius:var(--radius-sm)}
.skip:focus{top:var(--space-s)}

/* Header */
.site-header{border-bottom:1px solid var(--line);background:var(--bg)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--space-s);min-height:var(--header-height)}
.brand{display:inline-flex;align-items:baseline;gap:.5ch;color:var(--text);text-decoration:none;font-weight:600;font-size:var(--step-1);min-height:var(--target);align-items:center}
.brand small{font-weight:400;font-size:var(--step--1);color:var(--text-soft)}
.site-nav ul{display:flex;flex-wrap:wrap;gap:0 var(--space-s);list-style:none;margin:0;padding:0}
.site-nav a{display:inline-flex;align-items:center;min-height:var(--target);color:var(--text);text-decoration:none}
.site-nav a:hover,.site-nav a[aria-current=page]{text-decoration:underline}
.cart-link .count{display:inline-grid;place-items:center;min-width:1.6em;height:1.6em;margin-inline-start:.4ch;padding:0 .35em;border-radius:999px;background:var(--bg-sunken);border:1px solid var(--line-strong);font-size:var(--step--1)}
@media (max-width:40rem){
  .site-header .wrap{flex-wrap:wrap;padding-block:var(--space-xs)}
  .site-nav{width:100%}
  .site-nav ul{gap:0 var(--space-m)}
}

/* Sections */
main{display:block}
.section{padding-block:var(--space-xl)}
.section+.section{border-top:1px solid var(--line)}
.eyebrow{font-size:var(--step--1);color:var(--accent);font-weight:600;letter-spacing:.02em;margin-bottom:var(--space-xs)}
.lead{font-size:var(--step-1);color:var(--text-soft);max-width:var(--measure)}
.hero{padding-block:var(--space-2xl) var(--space-xl)}
.hero h1{max-width:20ch}
.actions{display:flex;flex-wrap:wrap;gap:var(--space-s);margin-top:var(--space-m)}
.actions.end{justify-content:flex-end}

/* Buttons */
.button{display:inline-flex;align-items:center;justify-content:center;gap:.5ch;min-height:var(--action-target);padding:.6rem 1.25rem;border-radius:var(--radius-sm);border:1px solid var(--accent-solid);background:var(--accent-solid);color:var(--button-text);font:600 var(--step-0)/1.2 var(--font-sans);text-decoration:none;cursor:pointer}
.button:hover{filter:brightness(1.08)}
.button.secondary{background:transparent;color:var(--text);border-color:var(--line-strong)}
.button.secondary:hover{border-color:var(--text-soft);filter:none}
.button.small{min-height:var(--target);padding:.4rem .9rem;font-size:var(--step--1)}
.button[disabled]{opacity:.6;cursor:not-allowed}
.linkish{background:none;border:0;padding:0;min-height:var(--target);color:var(--link);font:inherit;text-decoration:underline;cursor:pointer}

/* Grids and cards */
.grid{display:grid;gap:var(--space-m);grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));margin:0;padding:0;list-style:none}
.card{position:relative;display:flex;flex-direction:column;gap:var(--space-xs);height:100%;padding:var(--space-m);background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--radius)}
.card h3{margin:0;font-size:var(--step-1)}
.card h3 a{color:var(--text);text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}
.card:hover{border-color:var(--line-strong)}
.card:focus-within{outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-offset)}
.card h3 a:focus-visible{outline:none}
.card .meta{margin-top:auto;font-size:var(--step--1);color:var(--text-soft)}
.badge{display:inline-block;align-self:flex-start;padding:.1rem .55rem;border-radius:999px;border:1px solid var(--line-strong);font-size:var(--step--1);color:var(--text-soft)}
.badge.accent{border-color:var(--accent);color:var(--accent)}

/* Steps (how ordering works) */
.steps{counter-reset:step;display:grid;gap:var(--space-m);grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));list-style:none;margin:0;padding:0}
.steps li{counter-increment:step;padding-top:var(--space-s);border-top:2px solid var(--accent)}
.steps li::before{content:counter(step);display:block;font-weight:600;color:var(--accent);margin-bottom:var(--space-xs)}

/* Breadcrumbs */
.crumbs ol{display:flex;flex-wrap:wrap;gap:.5ch;list-style:none;margin:0;padding:var(--space-s) 0 0;font-size:var(--step--1);color:var(--text-soft)}
.crumbs li+li::before{content:"/";margin-inline-end:.5ch;color:var(--line-strong)}
.crumbs a{color:var(--text-soft)}

/* Product */
.product{display:grid;gap:var(--space-l);padding-block:var(--space-l) var(--space-xl)}
@media (min-width:56rem){.product{grid-template-columns:minmax(0,3fr) minmax(18rem,2fr);align-items:start}}
.buy{position:sticky;top:var(--space-m);display:flex;flex-direction:column;gap:var(--space-s);padding:var(--space-m);background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--radius)}
.price{font-size:var(--step-3);font-weight:600;line-height:1.1}
.price small{display:block;font-size:var(--step--1);font-weight:400;color:var(--text-soft);margin-top:.25rem}
.facts{display:grid;grid-template-columns:auto 1fr;gap:var(--space-xs) var(--space-m);margin:0}
.facts dt{color:var(--text-soft)}
.facts dd{margin:0}

/* Forms */
.form{display:grid;gap:var(--space-m)}
fieldset{margin:0;padding:var(--space-m);border:1px solid var(--line);border-radius:var(--radius)}
legend{padding:0 .5ch;font-weight:600}
.field{display:grid;gap:.35rem}
.field label{font-weight:600}
.field .hint{font-size:var(--step--1);color:var(--text-soft)}
.field-row{display:grid;gap:var(--space-m)}
@media (min-width:40rem){.field-row{grid-template-columns:1fr 1fr}}
input:not([type]),input[type=text],input[type=email],input[type=tel],input[type=number],input[type=search],input[type=password],input[type=url],input[type=date],select,textarea{width:100%;min-height:var(--target);padding:.55rem .75rem;border:1px solid var(--field-border);border-radius:var(--radius-sm);background:var(--bg);color:var(--text);font:inherit}
textarea{min-height:7rem;resize:vertical}
input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--danger)}
.error{color:var(--danger);font-size:var(--step--1)}
.check{display:flex;gap:.6rem;align-items:flex-start}
.check input{width:1.25rem;height:1.25rem;margin-top:.2rem;flex:none;accent-color:var(--accent-solid)}
.notice{padding:var(--space-s) var(--space-m);border:1px solid var(--line-strong);border-left:4px solid var(--accent);border-radius:var(--radius-sm);background:var(--bg-raised)}
.notice.danger{border-left-color:var(--danger)}
.notice.ok{border-left-color:var(--ok)}
.notice > :last-child{margin-bottom:0}

/* Cart */
.cart-table{width:100%;border-collapse:collapse}
.cart-table th,.cart-table td{padding:var(--space-s) var(--space-xs);border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.cart-table th{font-size:var(--step--1);color:var(--text-soft);font-weight:600}
.cart-table .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.qty{display:flex;gap:var(--space-xs);align-items:center}
.qty input{width:5rem}
.totals{display:grid;grid-template-columns:1fr auto;gap:var(--space-xs) var(--space-m);max-width:24rem;margin-left:auto;margin-top:var(--space-m);font-variant-numeric:tabular-nums}
.totals dt{color:var(--text-soft)}
.totals dd{margin:0;text-align:right}
.totals .grand{font-weight:600;font-size:var(--step-1);color:var(--text)}
@media (max-width:40rem){
  .cart-table thead{display:none}
  .cart-table,.cart-table tbody,.cart-table tr,.cart-table td{display:block;width:100%}
  .cart-table tr{padding-block:var(--space-s);border-bottom:1px solid var(--line)}
  .cart-table td{border:0;padding:.2rem 0}
  .cart-table td[data-label]::before{content:attr(data-label);display:inline-block;min-width:7rem;color:var(--text-soft);font-size:var(--step--1)}
  .cart-table .num{text-align:left}
}
.checkout{display:grid;gap:var(--space-l);padding-block:var(--space-l) var(--space-xl)}
@media (min-width:56rem){.checkout{grid-template-columns:minmax(0,3fr) minmax(18rem,2fr);align-items:start}}
.summary{padding:var(--space-m);background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--radius)}
.summary ul{list-style:none;margin:0 0 var(--space-s);padding:0}
.summary li{display:flex;justify-content:space-between;gap:var(--space-s);padding-block:.35rem;border-bottom:1px solid var(--line)}

/* Info pages */
.prose{max-width:var(--measure);padding-block:var(--space-l) var(--space-xl)}
.prose h2{margin-top:var(--space-l);font-size:var(--step-1)}
.prose p{white-space:pre-line}

/* Footer */
.site-footer{margin-top:var(--space-xl);border-top:1px solid var(--line);background:var(--bg-raised);font-size:var(--step--1);color:var(--text-soft)}
.site-footer .wrap{display:grid;gap:var(--space-l);padding-block:var(--space-l)}
@media (min-width:48rem){.site-footer .wrap{grid-template-columns:3fr 2fr 2fr}}
.site-footer h2{font-size:var(--step-0);color:var(--text);margin-bottom:var(--space-xs)}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li a{display:inline-flex;align-items:center;min-height:var(--target);color:var(--text-soft)}
.company dl{display:grid;grid-template-columns:auto 1fr;gap:.25rem var(--space-s);margin:0}
.company dt{color:var(--text-soft)}
.company dd{margin:0;color:var(--text)}
.legal-line{border-top:1px solid var(--line);padding-block:var(--space-s);font-size:var(--step--1)}

@media (prefers-reduced-motion:no-preference){
  .button,.card,.site-nav a{transition:border-color var(--dur-fast) ease,filter var(--dur-fast) ease}
}
@media print{.site-header nav,.site-footer,.actions,.buy form{display:none}}

/* Search */
.search{display:flex;gap:var(--space-xs);align-items:center;flex:1 1 16rem;max-width:24rem}
.search input{flex:1;min-width:0}
@media (max-width:40rem){.search{max-width:none;width:100%;padding-bottom:var(--space-xs)}}

/* Catalog helpers */
.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.section-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-s);margin-bottom:var(--space-s)}
.section-head h2{margin:0}
.filters ul{display:flex;flex-wrap:wrap;gap:var(--space-xs);list-style:none;margin:0 0 var(--space-m);padding:0}
.filters a{display:inline-flex;align-items:center;min-height:var(--target);padding:.25rem .9rem;border:1px solid var(--line-strong);border-radius:999px;color:var(--text);text-decoration:none;font-size:var(--step--1)}
.filters a[aria-current=page]{border-color:var(--accent);color:var(--accent);font-weight:600}
.item-image{border-radius:var(--radius);border:1px solid var(--line);margin-bottom:var(--space-m);width:100%;aspect-ratio:16/10;object-fit:cover}
.prewrap{white-space:pre-line}

/* Checkout choices */
.choice{display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-m);align-items:center}
.choice .label{width:100%;margin:0;font-weight:600}
.choice .check{min-height:var(--target);align-items:center}
.choice .check input{margin-top:0}
.shipping:has(#f-same:checked) .shipping-fields{display:none}
.cart-table tr.invalid td{opacity:.85}
::placeholder{color:var(--text-soft);opacity:1}
input[type=search]{-webkit-appearance:none;appearance:none}
/* Card controls sit above the stretched title link. */
.card-actions{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-top:var(--space-xs)}
.card .meta{margin-top:auto}
/* The summary precedes the form in source order (totals before submit on phones); wide screens place it right. */
@media (min-width:56rem){.checkout > .summary{grid-column:2;grid-row:1}.checkout > section{grid-column:1;grid-row:1}}
.notice{margin-block:0 var(--space-m)}
.facts{margin-block:0 var(--space-m)}
.facts + p,.totals + p{margin-top:var(--space-s)}
.page-title{margin-top:var(--space-l)}
.checkout{padding-top:0}