/* shop.kovacija.si: the few pieces the main stylesheet (tokens.css) does not have.
   Everything else on these pages is main-site markup. Built by tools/build_shop.py. */

/* announcement strip + shop bar under the main top bar */
.shop-announce{background:var(--dark);color:var(--on-dark-mute);text-align:center;font-size:13px;letter-spacing:.04em;padding:9px 16px}
.shop-announce b{color:var(--gold-bright);font-weight:500;letter-spacing:.12em}
@media (max-width:600px){.shop-announce{font-size:12px;letter-spacing:0;padding:8px 12px}}
.sh-subnav{background:var(--bg-raised);border-bottom:1px solid var(--line)}
.sh-subnav .wrap{display:flex;align-items:center;gap:30px}
.sh-subnav .sh-links{display:flex;gap:30px;overflow-x:auto;scrollbar-width:none;min-width:0}
.sh-subnav .sh-links::-webkit-scrollbar{display:none}
.sh-subnav a{font:500 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);
  padding:15px 0 13px;border-bottom:2px solid transparent;white-space:nowrap}
.sh-subnav a:hover{color:var(--ink)}.sh-subnav a[aria-current]{color:var(--gold-ink);border-bottom-color:var(--gold)}
.sh-subnav .sh-cartlink{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--ink)}
.sh-cartlink svg{width:18px;height:18px;flex:none}
.sh-count{display:inline-block;min-width:20px;padding:3px 6px;border-radius:10px;background:var(--gold);color:var(--dark);
  font:600 11px/14px var(--sans);letter-spacing:0;text-align:center}
.sh-count[data-n="0"]{display:none}
@media (max-width:600px){.sh-subnav .wrap{gap:16px}.sh-subnav .sh-links{gap:18px}
  .sh-subnav a{font-size:11px;letter-spacing:.1em;padding:13px 0 11px}.sh-cartlink .sh-cartword{display:none}}
/* more categories than fit: fade the edge until the strip is scrolled to its end (shop.js sets .sh-more) */
.sh-subnav .sh-links.sh-more{-webkit-mask-image:linear-gradient(90deg,#000 78%,transparent);mask-image:linear-gradient(90deg,#000 78%,transparent)}

/* product cards */
.shop .product-card{position:relative}
.shop .product-card figure{aspect-ratio:4/5}
.shop .product-card img{width:100%;height:100%;object-fit:cover}
.product-card .p-dims{display:block;font-size:13.5px;color:var(--ink-mute);margin-top:6px}
.product-card .p-buy{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:10px;font-size:13px;color:var(--ink-mute)}
.product-card .p-buy b{font:500 21px/1 var(--serif);color:var(--ink)}
.product-card .p-buy .mto{color:var(--gold-ink)}
.p-badge{position:absolute;top:12px;left:12px;z-index:1;background:var(--dark);color:var(--gold-bright);
  font:500 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:7px 10px}
.shop .product-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.shop .product-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.shop .product-grid.three{grid-template-columns:minmax(0,1fr)}}
.shop .cat-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1024px){.shop .cat-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.shop .cat-grid.four{grid-template-columns:minmax(0,1fr)}}

/* perks strip */
.sh-perks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-bottom:1px solid var(--line);background:var(--bg-card)}
.sh-perks div{padding:20px var(--sp-gutter);border-left:1px solid var(--line);font-size:14px;color:var(--ink-mute);line-height:1.4}
.sh-perks div:first-child{border-left:0}
.sh-perks b{display:block;font:500 19px/1.2 var(--serif);color:var(--ink);margin-bottom:2px}
@media (max-width:820px){.sh-perks{grid-template-columns:repeat(2,minmax(0,1fr))}.sh-perks div:nth-child(3){border-left:0}
  .sh-perks div:nth-child(n+3){border-top:1px solid var(--line)}}
.sh-proof{font-size:15px;color:var(--ink-mute);max-width:640px;margin:14px auto 0}

/* product page buy box */
.sh-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:22px 0 4px}
.sh-price b{font:500 34px/1 var(--serif);color:var(--ink)}
.sh-price span{font-size:14px;color:var(--ink-mute)}
.sh-opt{margin:20px 0 0}
.sh-opt .sh-olabel{font:500 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);margin:0 0 10px}
.sh-opt .sh-olabel b{color:var(--ink);font-weight:500;letter-spacing:.04em;text-transform:none;font-size:14px;margin-left:6px}
.sh-chips{display:flex;flex-wrap:wrap;gap:8px}
.sh-chips label{position:relative;cursor:pointer}
.sh-chips input{position:absolute;opacity:0;pointer-events:none}
.sh-chips span{display:block;padding:10px 14px;border:1px solid var(--line);background:var(--bg-card);font-size:14.5px;color:var(--ink);line-height:1.2}
.sh-chips span small{color:var(--ink-faint);font-size:12.5px;margin-left:4px}
.sh-chips input:checked+span{border-color:var(--gold-ink);box-shadow:inset 0 0 0 1px var(--gold-ink)}
.sh-chips input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.sh-row{display:flex;gap:12px;align-items:stretch;margin-top:24px}
.sh-qty{display:flex;border:1px solid var(--line);background:var(--bg-card)}
.sh-qty button{width:42px;border:0;background:none;font:400 20px/1 var(--sans);color:var(--ink);cursor:pointer}
.sh-qty input{width:44px;border:0;background:none;text-align:center;font:500 16px/1 var(--sans);color:var(--ink);-moz-appearance:textfield}
.sh-qty input::-webkit-inner-spin-button,.sh-qty input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.sh-row .btn{flex:1;width:auto;padding-left:18px;padding-right:18px}
.sh-stock{margin:14px 0 0;font-size:14.5px;color:var(--ink)}
.sh-stock i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#5E7F4A;margin-right:8px;vertical-align:1px}
.sh-stock.mto i{background:var(--gold)}.sh-stock.out i{background:#9B3A24}
.sh-added{margin:12px 0 0;font-size:14.5px;color:var(--ink)}
.sh-added a{color:var(--gold-ink);text-decoration:underline}
.sh-mini{list-style:none;margin:22px 0 0;padding:16px 0 0;border-top:1px solid var(--line);font-size:14px;color:var(--ink-mute)}
.sh-mini li{padding:3px 0}.sh-mini b{color:var(--ink);font-weight:500}
.sh-mini a{color:var(--gold-ink);text-decoration:underline}
.sh-pnote{font-size:13.5px;color:var(--ink-mute);margin:10px 0 0}
.product-info .p-desc{margin-top:28px}

/* basket */
.sh-cart{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
@media (max-width:900px){.sh-cart{grid-template-columns:minmax(0,1fr)}}
.sh-lines{border-top:1px solid var(--line)}
.sh-line{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);align-items:start}
.sh-line img{width:96px;height:96px;object-fit:cover;background:var(--bg-inset)}
.sh-line h3{font-size:21px;margin:0 0 4px}.sh-line h3 a{color:var(--ink)}
.sh-line .opts{font-size:13.5px;color:var(--ink-mute)}
.sh-line .lead{font-size:13px;color:var(--gold-ink);margin-top:2px}
.sh-line .ctl{display:flex;gap:14px;align-items:center;margin-top:10px}
.sh-line .rm{border:0;background:none;padding:0;color:var(--ink-faint);font-size:13px;text-decoration:underline;cursor:pointer}
.sh-line .amt{font:500 21px/1 var(--serif);white-space:nowrap;padding-top:4px}
@media (max-width:480px){.sh-line{grid-template-columns:72px minmax(0,1fr)}.sh-line img{width:72px;height:72px}
  .sh-line .amt{grid-column:2;padding-top:0}}
.sh-box{border:1px solid var(--line);background:var(--bg-card);padding:clamp(20px,3vw,28px)}
.sh-box h2{font-size:28px;margin:0 0 14px}
.sh-sum{display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:15px;color:var(--ink-mute);padding-bottom:14px;border-bottom:1px solid var(--line)}
.sh-sum .tot{font:500 26px/1.1 var(--serif);color:var(--ink);padding-top:8px}
.sh-pay{display:grid;gap:8px;margin:18px 0 0}
.sh-pay label{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);cursor:pointer;background:var(--bg)}
.sh-pay input{margin-top:4px;accent-color:var(--gold-ink)}
.sh-pay b{display:block;font-weight:500;color:var(--ink);font-size:15px}
.sh-pay small{display:block;color:var(--ink-mute);font-size:13px;line-height:1.4}
.sh-pay label:has(input:checked){border-color:var(--gold-ink)}
.sh-pay label.off{opacity:.45;cursor:not-allowed}
.sh-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.sh-fields .full{grid-column:1/-1}
.sh-fields label{display:block;font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
.sh-fields input,.sh-fields textarea{display:block;width:100%;margin-top:7px;padding:11px 12px;border:1px solid var(--line);background:var(--bg-inset);
  font:400 16px/1.3 var(--sans);color:var(--ink);text-transform:none;letter-spacing:0}
.sh-fields textarea{min-height:84px;resize:vertical}
.sh-fields .bad{border-color:#9B3A24}
.sh-fields small{display:block;margin-top:6px;font:400 12.5px/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink-faint)}
@media (max-width:480px){.sh-fields{grid-template-columns:minmax(0,1fr)}}
.sh-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.sh-box .btn{width:100%;margin-top:18px}
.sh-box .btn[disabled]{opacity:.6;cursor:wait}
.sh-msg{margin-top:12px;font-size:14px;color:#8E2F22}.sh-msg:empty{display:none}
.sh-fine{font-size:12.5px;color:var(--ink-faint);margin:12px 0 0;line-height:1.5}
.sh-fine a{color:var(--gold-ink)}
.sh-empty{border:1px solid var(--line);background:var(--bg-card);padding:clamp(24px,4vw,40px);max-width:640px}
.sh-done{max-width:620px}
.sh-done .bank{border:1px solid var(--line);background:var(--bg-card);padding:18px 20px;margin:18px 0;font-size:15px;line-height:1.7}
.product-info .sh-lede{font-size:18px;line-height:1.55;color:var(--ink-mute);margin:0}
.product-info .sh-pnote{color:var(--gold-ink)}
/* light product photos (white walls) need a darker veil than the main site's covers */
.shop .world-card::after{background:linear-gradient(0deg,rgba(8,6,4,.82) 0%,rgba(8,6,4,.42) 48%,rgba(8,6,4,.08) 78%)}
@media (min-width:761px){.sh-hero .hero-bg::after{background:linear-gradient(90deg,rgba(10,8,6,.86) 0%,rgba(10,8,6,.62) 42%,rgba(10,8,6,.18) 78%,rgba(10,8,6,.1) 100%)}}
@media (max-width:760px){.sh-hero .hero-bg::after{background:linear-gradient(0deg,rgba(10,8,6,.88) 0%,rgba(10,8,6,.55) 100%)}}
.shop [hidden]{display:none!important}
/* tokens.css leaves .gallery-hero inline, so its border shows as a short line beside the photo (main site too) */
.shop .gallery-hero{display:block}