/*
Theme Name: Mika
Theme URI: https://mika.ge
Author: Mika
Description: Lean, image-led theme for Mika — handmade gemstone bracelets, Tbilisi. No page builder, no jQuery, CSS only.
Version: 1.9.9
Requires at least: 6.5
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: mika
*/

/* Self-hosted Georgian faces. Latin type keeps the Palatino-style serif; these
   only ever render Georgian glyphs (they sit last in the font stacks), so the
   default phone Georgian font never shows. */
@font-face{font-family:'Noto Serif Georgian';font-style:normal;font-weight:400;
  font-display:swap;src:url('fonts/NotoSerifGeorgian-400.woff2') format('woff2')}
@font-face{font-family:'Noto Serif Georgian';font-style:normal;font-weight:600;
  font-display:swap;src:url('fonts/NotoSerifGeorgian-600.woff2') format('woff2')}
@font-face{font-family:'Noto Sans Georgian';font-style:normal;font-weight:400;
  font-display:swap;src:url('fonts/NotoSansGeorgian-400.woff2') format('woff2')}
@font-face{font-family:'Noto Sans Georgian';font-style:normal;font-weight:600;
  font-display:swap;src:url('fonts/NotoSansGeorgian-600.woff2') format('woff2')}

/* Paper is sampled from Natalia's packshot backgrounds (#EFEFEF–#F3F2F0)
   so product photographs dissolve into the page instead of sitting on tiles. */
:root{
  --paper:#F1F1EF;
  --paper-2:#FAFAF9;
  --ink:#131417;
  --muted:#6C6E76;
  --line:#DDDDD9;
  --sodalite:#24365F;

  --serif:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,'Noto Serif Georgian',serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,'Noto Sans Georgian',sans-serif;

  --gut:clamp(18px,4vw,40px);
  --max:1280px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--sodalite); outline-offset:3px}

.wrap{max-width:var(--max); margin:0 auto; padding-inline:var(--gut)}
.lbl{font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--muted)}
.serif{font-family:var(--serif); font-weight:400}

/* ---------- header ---------- */
.site-head{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:22px var(--gut); border-bottom:1px solid var(--line);
}
.brand{font-family:var(--serif); font-size:22px; letter-spacing:.34em; text-transform:uppercase}
.nav{display:flex; gap:26px}
.nav a,.utils a,.utils span{font-size:10.5px; letter-spacing:.19em; text-transform:uppercase; font-weight:600; color:var(--muted)}
.nav a:hover,.utils a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink)}
.utils{display:flex; gap:16px; align-items:center}
@media(max-width:760px){ .nav{display:none} }

/* ---------- hero ---------- */
.hero{display:grid; grid-template-columns:1fr; border-bottom:1px solid var(--line)}
@media(min-width:860px){ .hero{grid-template-columns:1fr 1.1fr} }
.hero-img{aspect-ratio:1/1; overflow:hidden; background:var(--paper)}
.hero-img img{width:100%; height:100%; object-fit:cover}
.hero-copy{
  display:flex; flex-direction:column; justify-content:center; gap:20px;
  padding:clamp(34px,6vw,72px) var(--gut);
}
.hero-copy h1{
  font-family:var(--serif); font-weight:400; margin:0;
  font-size:clamp(39px,6vw,69px); line-height:1.08; letter-spacing:-.01em;
  text-wrap:balance;
}
.hero-copy p{margin:0; color:var(--muted); max-width:46ch; font-size:16.5px}
.cta{
  align-self:flex-start; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  font-weight:600; padding-bottom:5px; border-bottom:1px solid currentColor;
}

/* ---------- filter strip ---------- */
.strip{
  display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(16px,4vw,46px);
  padding:24px var(--gut); border-bottom:1px solid var(--line);
}
.strip a{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--muted)}
.strip a:hover,.strip a.on{color:var(--ink)}

/* ---------- product grid ---------- */
.section{padding:clamp(38px,6vw,72px) 0}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:clamp(22px,3vw,34px)}
.section-head h2{margin:0; font-family:var(--serif); font-weight:400; font-size:clamp(21px,2.6vw,28px)}

.grid{display:grid; gap:clamp(24px,3.4vw,42px) clamp(16px,2.4vw,28px); grid-template-columns:repeat(2,1fr)}
@media(min-width:860px){ .grid{grid-template-columns:repeat(3,1fr)} }

.card figure{margin:0; aspect-ratio:1/1; overflow:hidden; background:var(--paper-2)}
.card figure img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.card:hover figure img{transform:scale(1.03)}
@media(prefers-reduced-motion:reduce){ .card figure img{transition:none} .card:hover figure img{transform:none} }
.card .info{padding-top:12px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:3px}
.card .nm{font-family:var(--serif); font-size:16px; line-height:1.3}
.card .st{font-size:12.5px; color:var(--muted)}
.card .pz{font-size:13px; font-variant-numeric:tabular-nums; margin-top:2px}

/* ---------- editorial band ---------- */
.band{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper-2)}
.band .inner{display:grid; gap:clamp(20px,3vw,40px); padding:clamp(40px,6vw,76px) 0; grid-template-columns:1fr}
@media(min-width:860px){ .band .inner{grid-template-columns:.9fr 1.1fr; align-items:center} }
.band h2{margin:0; font-family:var(--serif); font-weight:400; font-size:clamp(24px,3.2vw,34px); line-height:1.15; text-wrap:balance}
.band p{margin:0; color:var(--muted); max-width:52ch}
.band .three{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.band .three figure{margin:0; aspect-ratio:1/1; overflow:hidden; background:var(--paper)}
.band .three img{width:100%;height:100%;object-fit:cover}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line); padding:clamp(34px,5vw,58px) 0}
.foot-in{display:flex; flex-wrap:wrap; gap:24px 48px; justify-content:space-between}
.foot-in p{margin:0; font-size:13px; color:var(--muted)}
.foot-links{display:flex; gap:22px; flex-wrap:wrap}
.foot-links a{font-size:10.5px; letter-spacing:.19em; text-transform:uppercase; font-weight:600; color:var(--muted)}
.foot-links a:hover{color:var(--ink)}

/* ---------- woocommerce trims ---------- */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  border:1px solid var(--line); background:var(--paper-2); padding:14px 16px; margin-bottom:20px; font-size:14px;
}
.screen-reader-text{
  position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap;
}
.skip-link{position:absolute; left:-9999px}
.skip-link:focus{left:var(--gut); top:10px; background:var(--ink); color:var(--paper); padding:9px 14px; z-index:99}

/* ============================================================
   WooCommerce pages — margins, price, archive header
   ============================================================ */

/* Give every shop/archive/product page the site container's breathing room. */
.wc-wrap{padding-block:clamp(28px,4vw,52px)}

/* Kill WooCommerce's default green price everywhere. Price must read as the
   single most decisive fact on the card and the product page: dark, clear,
   tabular so digits line up. */
.woocommerce-Price-amount,
.price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.card .pz{
  color:var(--ink)!important;
  font-variant-numeric:tabular-nums;
  font-family:var(--sans);
}

/* Card price — a touch larger and more assertive than the stone line. */
.card .pz{font-size:14px; font-weight:600; letter-spacing:.01em; margin-top:4px}

/* Archive header: breadcrumb, title, result count / sorting row. */
.woocommerce-breadcrumb{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  margin-bottom:18px;
}
.woocommerce-breadcrumb a{color:var(--muted)}
.woocommerce-breadcrumb a:hover{color:var(--ink)}
.woocommerce-products-header__title,
.wc-wrap h1.page-title{
  font-family:var(--serif); font-weight:400; font-size:clamp(26px,3.4vw,38px);
  margin:0 0 20px; letter-spacing:-.01em;
}
.woocommerce-result-count{font-size:12.5px; color:var(--muted); margin:0}
.woocommerce-ordering{margin:0}
.woocommerce-ordering select,
.orderby{
  font-family:var(--sans); font-size:12.5px; padding:8px 12px;
  border:1px solid var(--line); background:var(--paper-2); color:var(--ink); border-radius:0;
}
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{
  display:flex; align-items:center;
}
.woocommerce-notices-wrapper:empty{display:none}

/* WooCommerce's own product grid → match our card grid exactly. */
.woocommerce ul.products,
.woocommerce-page ul.products{
  display:grid!important;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(24px,3.4vw,42px) clamp(16px,2.4vw,28px);
  margin:0; padding:0; list-style:none;
}
@media(min-width:860px){
  .woocommerce ul.products,
  .woocommerce-page ul.products{grid-template-columns:repeat(3,1fr)}
}
.woocommerce ul.products li.product{
  width:auto!important; margin:0!important; float:none!important; padding:0!important;
}
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after{display:none}

/* Woo clearfix ::before/::after on the UL itself become stray GRID CELLS
   (empty top-left slot + a trailing gap before pagination). Neutralise. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after{content:none!important; display:none!important}

/* The row above the grid (count + sorting) needs to sit apart from it. */
.woocommerce .woocommerce-result-count,
.woocommerce-ordering{margin-bottom:22px}

/* ============================================================
   Single product page — bring Woo's default template into brand
   ============================================================ */
.woocommerce div.product{display:grid; grid-template-columns:1fr; gap:clamp(28px,4vw,56px)}
@media(min-width:860px){ .woocommerce div.product{grid-template-columns:1fr 1fr; align-items:start} }
.woocommerce div.product .woocommerce-product-gallery{margin:0}
.woocommerce div.product .summary{margin:0; display:flex; flex-direction:column; gap:20px}

/* Title in the serif, like every product name across the site. */
.woocommerce div.product .product_title{
  font-family:var(--serif); font-weight:400; font-size:clamp(26px,3.4vw,38px);
  line-height:1.12; letter-spacing:-.01em; margin:0;
}
/* Price: the decisive number. Large, dark, tabular. */
.woocommerce div.product p.price,
.woocommerce div.product .summary .price{
  font-size:22px!important; font-weight:600; margin:0; color:var(--ink)!important;
}
/* Short description = the spec block; give it room and a rule above. */
.woocommerce div.product .woocommerce-product-details__short-description{
  border-top:1px solid var(--line); padding-top:18px; color:var(--muted); font-size:14.5px; line-height:1.6;
}
.woocommerce div.product .woocommerce-product-details__short-description p{margin:0 0 6px}

/* Add-to-bag button — solid ink, wide, quiet caps. */
.woocommerce div.product form.cart{margin:0; display:flex; gap:12px; align-items:stretch; flex-wrap:wrap}
.woocommerce div.product form.cart .quantity input.qty{
  width:64px; padding:13px 8px; border:1px solid var(--line); background:var(--paper-2);
  text-align:center; font-variant-numeric:tabular-nums;
}
.woocommerce div.product form.cart .button,
.woocommerce a.button, .woocommerce button.button, .woocommerce .button{
  background:var(--ink)!important; color:var(--paper)!important; border:0!important; border-radius:0!important;
  font-size:11px!important; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  padding:15px 26px!important; line-height:1; cursor:pointer;
  transition:opacity .2s;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button:hover{opacity:.86}
.woocommerce div.product .product_meta{font-size:12px; color:var(--muted); border-top:1px solid var(--line); padding-top:16px}
.woocommerce div.product .product_meta > span{display:block; margin-bottom:4px}

/* Tabs: keep them, quiet them. */
.woocommerce div.product .woocommerce-tabs{grid-column:1/-1; margin-top:8px}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0; margin:0 0 18px; border-bottom:1px solid var(--line); display:flex; gap:22px}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{background:none; border:0; border-radius:0; padding:0 0 10px; margin:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--muted)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--ink)}

/* Related products heading in serif. */
.woocommerce .related > h2, .woocommerce .upsells > h2{
  font-family:var(--serif); font-weight:400; font-size:clamp(20px,2.6vw,26px); margin:0 0 24px;
}
.woocommerce .related, .woocommerce .upsells{grid-column:1/-1; border-top:1px solid var(--line); padding-top:clamp(30px,4vw,48px); margin-top:clamp(20px,3vw,36px)}

/* Empty (coming-soon) category message. */
.mika-soon{
  font-family:var(--serif); font-size:clamp(18px,2.4vw,24px); color:var(--muted);
  padding:clamp(30px,6vw,64px) 0; text-align:center; max-width:32ch; margin:0 auto;
}

/* Language switcher — EN | KA, current one emphasised. */
.lang-switch{display:inline-flex;gap:9px;align-items:center}
.lang-switch a{font-size:10.5px;letter-spacing:.19em;font-weight:600;color:var(--muted)}
.lang-switch a.on{color:var(--ink)}
.lang-switch a:hover{color:var(--ink)}

/* ============================================================
   Single product — two-column layout + Messika-style drawer
   ============================================================ */
.woocommerce div.product.product-layout{
  display:grid; grid-template-columns:1fr; gap:clamp(24px,4vw,52px); align-items:start;
}
@media(min-width:900px){
  .woocommerce div.product.product-layout{
    grid-template-columns:minmax(0,58%) minmax(360px,42%);
    gap:clamp(24px,4vw,56px);
  }
}

/* Image dominant, clean, no frame. */
.product-gallery{margin:0}
.product-gallery img{width:100%; max-width:none; height:auto; object-fit:contain; display:block}
.woocommerce div.product .product-gallery .woocommerce-product-gallery{margin:0}

/* Summary column sits close to the image, generous internal rhythm. */
.woocommerce div.product .summary.entry-summary{display:flex; flex-direction:column; gap:20px; margin:0}
@media(min-width:900px){
  .woocommerce div.product .summary.entry-summary{position:sticky; top:24px}
}

/* Info rows — thin dividers, quiet labels, plus icon. */
.product-info-panels{display:flex; flex-direction:column; border-top:1px solid var(--line); margin-top:4px}
.product-info-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:100%; padding:16px 2px; background:none; border:0; border-bottom:1px solid var(--line);
  font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; color:var(--ink); cursor:pointer; text-align:left; transition:color .2s;
}
.product-info-row:hover{color:var(--muted)}
.product-info-row .pir-icon{font-size:16px; font-weight:400; color:var(--muted); line-height:1}

/* Drawer + overlay. */
html.drawer-open{overflow:hidden}
.product-drawer-overlay{
  position:fixed; inset:0; background:rgba(19,20,23,.34); z-index:1000;
  opacity:0; pointer-events:none; transition:opacity .28s ease;
}
.product-drawer-overlay.is-open{opacity:1; pointer-events:auto}
.product-drawer{
  position:fixed; top:0; right:0; width:min(520px,92vw); height:100vh; height:100dvh;
  background:var(--paper-2); color:var(--ink); z-index:1001;
  transform:translateX(100%); transition:transform .28s ease;
  display:flex; flex-direction:column; box-shadow:-16px 0 40px rgba(19,20,23,.08);
}
.product-drawer.is-open{transform:translateX(0)}
.product-drawer-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:26px clamp(24px,4vw,40px) 18px; border-bottom:1px solid var(--line);
}
.product-drawer-title{
  margin:0; font-family:var(--serif); font-weight:400; font-size:22px; letter-spacing:-.01em;
}
.product-drawer-close{
  background:none; border:0; font-size:28px; line-height:1; color:var(--muted);
  cursor:pointer; padding:0 4px; transition:color .2s;
}
.product-drawer-close:hover{color:var(--ink)}
.product-drawer-body{padding:clamp(22px,4vw,34px) clamp(24px,4vw,40px); overflow-y:auto; font-size:15px; line-height:1.7}
.product-drawer-body p{margin:0 0 12px; color:var(--ink)}
.product-drawer-body .spec-list{margin:0; display:grid; grid-template-columns:max-content 1fr; column-gap:28px; row-gap:0}
.product-drawer-body .spec-list > div{
  display:grid; grid-template-columns:subgrid; grid-column:1 / -1; align-items:baseline;
  padding:12px 0; border-bottom:1px solid var(--line);
}
.product-drawer-body .spec-list > div:last-child{border-bottom:0}
.product-drawer-body dt{color:var(--muted); font-size:14px}
.product-drawer-body dd{margin:0; text-align:left; font-size:14px; color:var(--ink)}

/* Mobile — bottom sheet. */
@media(max-width:768px){
  .product-drawer{
    top:auto; bottom:0; right:0; width:100%; height:min(82vh,720px);
    transform:translateY(100%); border-radius:18px 18px 0 0;
    box-shadow:0 -16px 40px rgba(19,20,23,.12);
  }
  .product-drawer.is-open{transform:translateY(0)}
}

@media(prefers-reduced-motion:reduce){
  .product-drawer,.product-drawer-overlay{transition:none}
}

/* WooCommerce's default stylesheet floats the gallery at width:48% for its own
   layout — override it so our grid controls the columns and the image fills. */
.woocommerce div.product.product-layout .woocommerce-product-gallery{
  width:100%!important; float:none!important; margin:0!important;
}
.woocommerce div.product.product-layout .woocommerce-product-gallery .flex-viewport,
.woocommerce div.product.product-layout .woocommerce-product-gallery__wrapper{width:100%}
/* thumbnail strip below the main image */
.woocommerce div.product.product-layout .flex-control-thumbs{
  display:flex; gap:10px; margin:12px 0 0; padding:0; list-style:none;
}
.woocommerce div.product.product-layout .flex-control-thumbs li{width:auto; margin:0; flex:0 0 auto}
.woocommerce div.product.product-layout .flex-control-thumbs img{
  width:64px; height:64px; object-fit:cover; opacity:.55; cursor:pointer; transition:opacity .2s;
}
.woocommerce div.product.product-layout .flex-control-thumbs img.flex-active,
.woocommerce div.product.product-layout .flex-control-thumbs img:hover{opacity:1}

/* "Wears well together" — combination suggestions, full width under the product. */
.woocommerce div.product.product-layout .combination{
  grid-column:1/-1; border-top:1px solid var(--line);
  padding-top:clamp(30px,4vw,48px); margin-top:clamp(24px,4vw,44px);
}
.combination .section-head{align-items:center}
.combination .section-head h2{font-size:clamp(20px,2.6vw,26px)}
.combo-hint{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color:var(--muted); border:1px solid var(--line); border-radius:100px; padding:4px 12px; cursor:help;
}

/* --- Gallery containment fixes -------------------------------------------
   The flexslider track and the zoom overlay were escaping their column and
   spilling across the product text. Clip them, and make each slide exactly one
   column wide. Also drop the sticky summary: it was taller than the gallery,
   which made it hang oddly while scrolling. */
.woocommerce div.product.product-layout .woocommerce-product-gallery{position:relative; overflow:hidden}
.woocommerce div.product.product-layout .flex-viewport{overflow:hidden!important; width:100%}
.woocommerce div.product.product-layout .woocommerce-product-gallery__image img{
  width:100%; height:auto; max-width:100%;
}
/* the jQuery zoom overlay must never paint outside its frame */
.woocommerce div.product.product-layout .zoomImg{max-width:none; pointer-events:none}

/* Summary scrolls with the page (no sticky) — predictable on every page length. */
@media(min-width:900px){
  .woocommerce div.product.product-layout .summary.entry-summary{position:static; top:auto}
}

/* Drawer: keep its title bar fixed while the content scrolls. */
.product-drawer-head{position:sticky; top:0; background:var(--paper-2); z-index:2}

/* WooCommerce also forces .summary to width:48%/float:right for its own layout —
   that squeezed our right column to half its width. Let the grid own it. */
.woocommerce div.product.product-layout .summary.entry-summary{
  width:100%!important; float:none!important; clear:none!important;
}

/* Recommended pairings: deliberately small so they never compete with the piece
   the customer is actually looking at. */
.combination .grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(0,132px));
  gap:22px 20px; justify-content:start;
}
.combination .card figure{aspect-ratio:1/1}
.combination .card .info{padding-top:9px; gap:2px}
.combination .card .nm{font-size:13.5px; line-height:1.25}
.combination .card .st{font-size:11px}
.combination .card .pz{font-size:11.5px; font-weight:600; margin-top:2px}
@media(max-width:600px){
  .combination .grid{grid-template-columns:repeat(auto-fill,minmax(0,104px)); gap:16px 14px}
}

/* ============================================================
   Pages (About, Contact, Shipping, Care) + Cart / Checkout
   ============================================================ */
.page-head{margin-bottom:clamp(20px,3vw,32px)}
.page-head h1{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(28px,4vw,44px); line-height:1.1; letter-spacing:-.01em;
}
.page-narrow .page-article{max-width:64ch}
.entry-content{font-size:16.5px; line-height:1.75}
.entry-content > * + *{margin-top:1.1em}
.entry-content p{margin:0}
.entry-content h2{font-family:var(--serif); font-weight:400; font-size:clamp(20px,2.6vw,26px); margin-top:1.6em}
.entry-content a{border-bottom:1px solid var(--line)}
.entry-content a:hover{border-color:var(--ink)}
.entry-content ul,.entry-content ol{padding-left:1.2em}
.entry-content li + li{margin-top:.4em}

/* ---- Cart & Checkout ---- */
.page-wide .entry-content{font-size:15.5px}

/* tables (classic cart) */
.woocommerce table.shop_table{
  border:1px solid var(--line); border-radius:0; border-collapse:collapse; width:100%; background:var(--paper-2);
}
.woocommerce table.shop_table th{
  font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted);
  font-weight:600; padding:14px 16px; border-bottom:1px solid var(--line); text-align:left;
}
.woocommerce table.shop_table td{padding:16px; border-top:1px solid var(--line); vertical-align:middle}
.woocommerce table.shop_table img{width:64px; height:64px; object-fit:contain; background:var(--paper-2)}
.woocommerce table.shop_table .product-name a{font-family:var(--serif); font-size:16px}
.woocommerce .quantity input.qty{
  width:64px; padding:10px 8px; border:1px solid var(--line); background:var(--paper-2);
  text-align:center; font-variant-numeric:tabular-nums;
}

/* totals + review order */
.woocommerce-cart-form{margin-bottom:28px}
.cart_totals,.woocommerce-checkout-review-order{
  border:1px solid var(--line); background:var(--paper-2); padding:clamp(18px,3vw,26px);
}
.cart_totals h2,.woocommerce-billing-fields h3,.woocommerce-additional-fields h3,
#order_review_heading{
  font-family:var(--serif); font-weight:400; font-size:20px; margin:0 0 16px;
}
.woocommerce-checkout #payment{background:transparent; border-radius:0}
.woocommerce-checkout #payment ul.payment_methods{
  border:0; padding:0; margin:0 0 16px; list-style:none;
}
.woocommerce-checkout #payment div.payment_box{
  background:var(--paper); border:1px solid var(--line); border-radius:0; font-size:14px; color:var(--ink);
}
.woocommerce-checkout #payment div.payment_box::before{display:none}

/* form fields */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single{
  width:100%; padding:12px 14px; border:1px solid var(--line); background:var(--paper-2);
  font-family:var(--sans); font-size:15px; color:var(--ink); border-radius:0; height:auto;
}
.woocommerce form .form-row label{
  display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin-bottom:6px;
}
.woocommerce form .form-row{margin:0 0 16px}
.woocommerce .col2-set{display:grid; gap:clamp(20px,4vw,44px); grid-template-columns:1fr}
@media(min-width:900px){
  .woocommerce .checkout.col2-set{grid-template-columns:1.1fr .9fr}
  .woocommerce .col2-set .col-1,.woocommerce .col2-set .col-2{width:auto; float:none}
}
.woocommerce-checkout .checkout{display:grid; gap:clamp(22px,4vw,48px)}
@media(min-width:900px){ .woocommerce-checkout .checkout{grid-template-columns:1.1fr .9fr; align-items:start} }
#customer_details{min-width:0}
#order_review,#order_review_heading{min-width:0}

/* block cart/checkout (WooCommerce 8+ blocks) */
.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout{max-width:none}
.wc-block-components-title,.wc-block-cart__submit-container{font-family:var(--serif)}
.wc-block-components-button,.wc-block-cart__submit-button{
  background:var(--ink)!important; color:var(--paper)!important; border-radius:0!important;
  font-size:11px!important; letter-spacing:.2em; text-transform:uppercase; font-weight:600; padding:15px 26px!important;
}
.wc-block-components-text-input input,.wc-block-components-textarea{
  border:1px solid var(--line)!important; border-radius:0!important; background:var(--paper-2)!important;
}

/* ---- Block cart & checkout polish (WooCommerce 11 renders these in React) ---- */

/* Step headings in the serif, matching the rest of the site. */
.wc-block-components-checkout-step__heading,
.wc-block-components-checkout-step__title,
.wc-block-components-title{
  font-family:var(--serif)!important; font-weight:400!important; letter-spacing:-.005em;
}
.wc-block-components-checkout-step__heading{font-size:19px!important; margin-bottom:4px}
.wc-block-components-checkout-step__description{color:var(--muted); font-size:13.5px}
.wc-block-components-checkout-step{
  border:0; padding-block:clamp(18px,3vw,26px); border-top:1px solid var(--line);
}
.wc-block-components-checkout-step:first-of-type{border-top:0; padding-top:0}

/* Calmer field labels. */
.wc-block-components-text-input label,
.wc-block-components-textarea label,
.wc-block-components-select__label{
  font-size:13px!important; color:var(--muted)!important;
}
.wc-block-components-text-input.is-active label{font-size:11.5px!important}

/* Order summary as a quiet panel, like our cards. */
.wc-block-components-sidebar{
  background:var(--paper-2); border:1px solid var(--line);
  padding:clamp(18px,3vw,26px)!important;
}
@media(max-width:900px){ .wc-block-components-sidebar{margin-top:24px} }
.wc-block-components-order-summary__content,
.wc-block-components-totals-wrapper{border-color:var(--line)}
.wc-block-components-product-name{font-family:var(--serif); font-size:15px}
.wc-block-components-totals-item__value,
.wc-block-formatted-money-amount{font-variant-numeric:tabular-nums}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-size:19px; font-weight:600;
}

/* Payment method box — our bank-transfer explanation should read calmly. */
.wc-block-components-radio-control__option{border-color:var(--line)}
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-content{
  background:var(--paper); border:1px solid var(--line); font-size:14px; line-height:1.6;
}

/* Buttons everywhere in blocks. */
.wc-block-components-button:not(.is-link){
  background:var(--ink)!important; color:var(--paper)!important; border:0!important;
  border-radius:0!important; font-size:11px!important; letter-spacing:.2em;
  text-transform:uppercase; font-weight:600; padding:15px 26px!important;
}
.wc-block-components-button:not(.is-link):hover{opacity:.86}

/* Cart page: keep the item list airy. */
.wc-block-cart-items__row{border-color:var(--line)}
.wc-block-cart-item__image img{width:64px; height:64px; object-fit:contain; background:var(--paper-2); border-radius:2px}
.wc-block-cart__submit-container{padding-top:8px}

/* Cart / checkout structural parity with Fighters G. */
.woocommerce-cart .page-head{display:none}
.woocommerce-cart .wp-block-woocommerce-empty-cart-block{padding-top:10px}
.woocommerce-cart .wc-block-cart__empty-cart__title{
  margin:0 0 34px!important; text-align:left!important;
  font-family:var(--serif)!important; font-weight:400!important;
  font-size:clamp(28px,4vw,42px)!important; line-height:1.08!important;
}
.woocommerce-cart .wc-block-cart__empty-cart__title.with-empty-cart-icon::before{
  content:none!important; display:none!important; background:none!important;
  -webkit-mask:none!important; mask:none!important;
}
.woocommerce-cart .wp-block-woocommerce-empty-cart-block>.wp-block-separator{display:none!important}
.woocommerce-cart .wp-block-woocommerce-empty-cart-block>h2:not(.wc-block-cart__empty-cart__title){
  margin:0 0 22px!important; text-align:left!important;
  font-family:var(--serif)!important; font-weight:400!important;
  font-size:clamp(24px,3vw,34px)!important;
}
.woocommerce-cart .wc-block-grid .wc-block-grid__products{
  display:grid!important; width:100%!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:24px 20px!important; margin:0!important; padding:0!important;
}
.woocommerce-cart .wc-block-grid.has-4-columns .wc-block-grid__product{
  display:flex!important; flex:initial!important; flex-direction:column!important;
  width:auto!important; max-width:none!important; margin:0!important;
  padding:0!important; border:0!important; text-align:left!important;
}
.woocommerce-cart .wc-block-grid__product-link{display:block}
.woocommerce-cart .wc-block-grid__product-image{
  width:100%; aspect-ratio:1; overflow:hidden; background:var(--paper-2);
  border:1px solid var(--line);
}
.woocommerce-cart .wc-block-grid__product-image img{
  display:block; width:100%!important; height:100%!important;
  margin:0!important; object-fit:cover;
}
.woocommerce-cart .wc-block-grid__product-title{
  margin:12px 0 4px; min-height:2.4em; color:var(--ink);
  font-family:var(--serif); font-size:16px; line-height:1.2;
}
.woocommerce-cart .wc-block-grid__product-price{margin:4px 0 0; color:var(--ink); font-weight:600}
.woocommerce-cart .wc-block-grid__product-add-to-cart{width:100%; margin:auto 0 0; padding-top:12px}
.woocommerce-cart .wc-block-grid__product-add-to-cart .wp-block-button__link{
  display:block; width:100%; margin:0; padding:11px; text-align:center;
  border:1px solid var(--ink); border-radius:0; background:transparent; color:var(--ink);
}
.woocommerce-cart .wc-block-grid__product-add-to-cart .wp-block-button__link:hover{background:var(--ink); color:var(--paper)}
.wc-block-components-sidebar-layout{align-items:flex-start!important}
.woocommerce-checkout .wc-block-components-address-form__country{margin-top:12px!important}
.woocommerce-checkout .wc-block-checkout__use-address-for-billing{display:none!important}
.woocommerce-checkout .wc-block-components-text-input,
.woocommerce-checkout .wc-block-components-select,
.woocommerce-checkout .wc-block-components-combobox{box-sizing:border-box; min-width:0}
@media(max-width:900px){
  .woocommerce-cart .wc-block-grid .wc-block-grid__products{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* --- Gallery slider fix ---------------------------------------------------
   flexslider moves a track that is deliberately wider than the frame (one
   slide per image). Constraining that track stops the slide entirely — which
   broke thumbnail switching. Clip at the viewport instead and let the track be
   as wide as it needs, with each slide exactly one frame wide. */
.woocommerce div.product.product-layout .woocommerce-product-gallery{overflow:visible}
.woocommerce div.product.product-layout .flex-viewport{overflow:hidden!important; width:100%}
.woocommerce div.product.product-layout .woocommerce-product-gallery__image img{
  width:100%; height:auto; display:block;
}

/* Gallery: clip at the frame only. flexslider owns the track/slide widths via
   inline styles — never override those or the slides cannot move. */
.woocommerce div.product.product-layout .flex-viewport{overflow:hidden!important; width:100%}
.woocommerce div.product.product-layout .woocommerce-product-gallery__wrapper{margin:0; padding:0; list-style:none}
.woocommerce div.product.product-layout .woocommerce-product-gallery__image img{width:100%; height:auto; display:block}

/* Our own product gallery (replaces flexslider). */
.product-gallery .pg-main{margin:0; background:var(--paper-2); overflow:hidden}
.product-gallery .pg-main img{width:100%; height:auto; display:block}
.product-gallery .pg-thumbs{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}
.product-gallery .pg-thumb{
  padding:0; border:0; background:none; cursor:pointer; line-height:0;
  width:72px; opacity:.5; transition:opacity .2s;
}
.product-gallery .pg-thumb img{width:72px; height:72px; object-fit:cover; display:block}
.product-gallery .pg-thumb:hover{opacity:.85}
.product-gallery .pg-thumb.is-active{opacity:1; outline:1px solid var(--ink); outline-offset:2px}

/* ============================================================
   Footer — brand · shop · info · contact
   ============================================================ */
.site-foot{border-top:1px solid var(--line); padding:clamp(40px,6vw,72px) 0 0}
.foot-grid{
  display:grid; gap:clamp(28px,4vw,56px);
  grid-template-columns:1fr; padding-bottom:clamp(30px,5vw,52px);
}
@media(min-width:720px){ .foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr} }
.foot-col h4{
  margin:0 0 14px; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  font-weight:600; color:var(--muted);
}
.foot-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.foot-col a{color:var(--ink); font-size:14.5px}
.foot-col a:hover{color:var(--muted)}
.foot-brandmark{font-family:var(--serif); font-size:26px; letter-spacing:.32em; text-transform:uppercase; margin-bottom:14px}
.foot-tagline{margin:0 0 18px; color:var(--muted); font-size:14.5px; max-width:36ch; line-height:1.55}
.foot-social{display:flex; flex-wrap:wrap; gap:14px}
.foot-social a{
  display:inline-flex; align-items:center; gap:8px; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--muted);
  padding:8px 12px 8px 10px; border:1px solid var(--line); border-radius:100px;
}
.foot-social a:hover{color:var(--ink); border-color:var(--ink)}
.foot-social svg{flex:0 0 auto}
.foot-address,.foot-hours{color:var(--muted); font-size:14px; line-height:1.55}

.foot-legal{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px 30px;
  padding:22px 0 44px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted);
}
.foot-legal p{margin:0}

/* Kill the old .foot-in styling — replaced by .foot-grid + .foot-legal */
.foot-in{display:none}

/* --- Logo (Mika Parker) --------------------------------------------------
   The .brand mark in the header is now an image; keep the sizing calm and
   let the site padding do the framing. Footer uses the monogram alone. */
.brand{display:inline-block; line-height:0; letter-spacing:normal; text-transform:none}
.brand img{
  display:block; width:auto; height:44px;
  max-width:220px; object-fit:contain;
}
@media(min-width:900px){ .brand img{height:52px; max-width:260px} }
.brand:focus-visible{outline:2px solid var(--sodalite); outline-offset:4px}

/* Footer monogram: keep the calligraphic mark at its natural aspect (1.5:1)
   so it reads as a signature, not a boxed icon. Height drives the size; width
   follows automatically. */
.foot-brandmark{display:inline-block; line-height:0; margin-bottom:18px}
.foot-brandmark img{display:block; width:170px; height:auto; max-width:70vw}

/* --- Hero, updated for the Mika Parker editorial photo --------------------
   Mobile: portrait aspect (3:4) — natural for a phone screen.
   Desktop: the wider crop, image column ~55% width, copy column vertically
   centred beside it. Copy sits closer to the image so it reads as one moment. */
.hero{grid-template-columns:1fr; border-bottom:0}
.hero-img{
  aspect-ratio:3/4; overflow:hidden; background:var(--paper-2);
}
.hero-img picture, .hero-img img, .hero-img video{width:100%; height:100%; display:block}
.hero-img img, .hero-img video{object-fit:cover; object-position:center}
.hero-copy{padding:clamp(30px,6vw,64px) var(--gut) clamp(40px,7vw,72px); text-align:left}

@media(min-width:900px){
  .hero{
    grid-template-columns:1fr 1.1fr;
    align-items:stretch; min-height:min(78vh,720px);
    border-bottom:1px solid var(--line);
  }
  .hero-img{aspect-ratio:auto; height:100%}
  .hero-copy{
    padding:clamp(28px,4vw,56px) clamp(36px,5vw,72px);
    max-width:60ch;
  }
}
.hero-copy .lbl{color:var(--muted)}
.hero-copy h1{margin-top:6px}
.hero-copy p{max-width:50ch}


/* ---------- Mobile hero: copy overlaid on the bottom of the video ----------
   The video carries a black "Mika Parker" wordmark in its VERTICAL MIDDLE, so
   the copy is pinned to the BOTTOM (clear of it), set white, over a gradient
   scrim that darkens toward the base for legibility. Desktop is unaffected
   (its layout lives in @media(min-width:900px)). */
@media(max-width:899px){
  .hero{position:relative; display:grid; grid-template-columns:1fr; border-bottom:0}
  .hero-img{grid-area:1 / 1; aspect-ratio:3/4; width:100%; height:100%; background:#111}
  .hero-img video, .hero-img img{width:100%; height:100%; object-fit:cover; object-position:center}
  .hero-copy{
    grid-area:1 / 1; align-self:end; z-index:2; color:#fff; text-align:left;
    padding:clamp(120px,42vw,240px) var(--gut) clamp(20px,6vw,34px);
    background:linear-gradient(to top,
      rgba(10,10,12,.90) 0%,
      rgba(10,10,12,.80) 18%,
      rgba(10,10,12,.62) 38%,
      rgba(10,10,12,.38) 58%,
      rgba(10,10,12,.12) 80%,
      rgba(10,10,12,0) 100%);
  }
  .hero-copy .lbl{color:rgba(255,255,255,.82)}
  .hero-copy h1{color:#fff}
  .hero-copy p{display:none}
  .hero-copy .cta{color:#fff}
}

/* ---------- policy pages (Privacy / Cookie / Terms / Shipping / Returns) ----------
   The trader-details block repeats at the top of every policy page so each page
   stands alone legally (the texts refer to "the trader identified at the
   beginning of this document"). */
.policy-trader{
  border:1px solid var(--line); padding:clamp(18px,3vw,26px);
  margin:0 0 clamp(26px,4vw,38px); background:var(--paper-2);
}
.policy-trader h2{margin:0 0 12px; font-size:15px; letter-spacing:.12em; text-transform:uppercase; font-family:var(--sans); font-weight:600}
.policy-trader-list{list-style:none; margin:0 0 14px; padding:0; display:grid; gap:6px}
.policy-trader-list li{font-size:14px; line-height:1.6}
.policy-trader .pt-k{color:var(--muted)}
.policy-trader .pt-v{color:var(--ink)}
.policy-trader .policy-effective{margin:0 0 8px; font-size:13px; color:var(--muted)}
.policy-trader .policy-intro{margin:0; font-size:13.5px; color:var(--muted)}
.page .entry-content h2{font-family:var(--serif); font-weight:400; font-size:clamp(19px,2.3vw,24px); margin:clamp(26px,4vw,36px) 0 10px}
.page .entry-content p, .page .entry-content li{font-size:15px; line-height:1.75}
.page .entry-content ul{margin:0 0 14px; padding-left:20px}
.page .entry-content li{margin-bottom:6px}

/* ---------- cookie consent bar (no plugin; same concept as fighters.ge) ---------- */
.cookie-bar{position:fixed; left:0; right:0; bottom:0; z-index:120;
  background:var(--ink); color:var(--paper);
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:14px clamp(16px,4vw,32px); box-shadow:0 -8px 30px rgba(19,20,23,.22)}
.cookie-bar[hidden]{display:none}
.cookie-bar p{margin:0; font-size:13.5px; line-height:1.55; max-width:78ch; color:var(--paper)}
.cookie-bar a{color:var(--paper); text-decoration:underline; text-underline-offset:2px}
.cookie-bar a:hover{opacity:.82}
.cookie-accept{margin-left:auto; white-space:nowrap; cursor:pointer; border:0;
  font-size:10.5px; letter-spacing:.19em; text-transform:uppercase; font-weight:600;
  background:var(--paper); color:var(--ink); padding:11px 26px}
.cookie-accept:hover{opacity:.9}
@media(max-width:600px){ .cookie-accept{margin-left:0; width:100%} }