/* Base resets for WooCommerce's default loop/tab markup, kept minimal since
   there's no parent theme to fight against anymore. */
.woocommerce ul.products,
.woocommerce-page ul.products{margin:0;}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{width:auto;margin:0;padding:0;float:none;}
.woocommerce div.product .woocommerce-tabs ul.tabs{display:none;} /* replaced by our accordion */

.logo-image img{display:block;max-height:44px;width:auto;}

:root{
  --ink:#1C2024;
  --paper:#EEEFE7;
  --paper-2:#E4E5DA;
  --amber:#B5652A;
  --amber-dim:#8f4f20;
  --teal:#3D5A66;
  --olive:#77815F;
  --line:#C9C6BB;
  --line-dark:#3A4046;
  --disp:'Fraunces', serif;
  --body:'Inter', sans-serif;
  --mono:'IBM Plex Mono', monospace;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img,svg{display:block;max-width:100%;}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;}
.wrap{width:100%;padding:0 clamp(20px,4vw,56px);}

/* ---------- top bar ---------- */
.topbar{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--ink);color:var(--paper-2);padding:8px 0;text-align:center;
}

/* ---------- nav ---------- */
nav.main-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:22px;padding-bottom:22px;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:60;background:var(--paper);
}
.logo{font-family:var(--disp);font-weight:600;font-size:24px;letter-spacing:.01em;text-decoration:none;}
.logo span{color:var(--amber);font-style:italic;font-weight:500;}
.nav-links{display:flex;gap:36px;list-style:none;margin:0;padding:0;font-size:14px;font-weight:500;}
.nav-links a{text-decoration:none;position:relative;padding-bottom:4px;}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--amber);transition:width .25s ease;}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;}
.nav-icons{display:flex;gap:18px;align-items:center;}
.nav-icons button{background:none;border:none;cursor:pointer;color:var(--ink);position:relative;padding:4px;}
.cart-count{
  font-family:var(--mono);font-size:10px;background:var(--amber);color:var(--paper);
  border-radius:50%;width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;
  position:absolute;top:-4px;right:-6px;
}
.nav-hamburger{display:none;}
@media (max-width:900px){
  .nav-links{display:none;}
  .nav-hamburger{display:flex;background:none;border:none;cursor:pointer;color:var(--ink);}
}

/* ---------- breadcrumb ---------- */
.breadcrumb{
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:#5b6067;padding:22px 0;
}
.breadcrumb a{text-decoration:none;}
.breadcrumb a:hover{color:var(--amber);}
.breadcrumb .sep{margin:0 8px;opacity:.5;}
.breadcrumb .current{color:var(--ink);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--amber);color:var(--paper);padding:15px 26px;text-decoration:none;
  width:fit-content;border:1px solid var(--amber);cursor:pointer;
  transition:background .2s ease,color .2s ease;
}
.btn:hover{background:transparent;color:var(--amber);}
.btn-outline{background:transparent;color:var(--ink);border:1px solid var(--ink);}
.btn-outline:hover{background:var(--ink);color:var(--paper);}
.btn-block{width:100%;}
.icon-btn{
  background:none;border:1px solid var(--line);width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);
  transition:border-color .2s ease,color .2s ease;flex:0 0 auto;
}
.icon-btn:hover{border-color:var(--amber);color:var(--amber);}

/* ---------- hero (home only) ---------- */
.hero{position:relative;background:var(--ink);color:var(--paper);overflow:hidden;min-height:640px;}
.slide{position:absolute;inset:0;display:grid;grid-template-columns:1.1fr 1fr;opacity:0;visibility:hidden;transition:opacity .7s ease;}
.slide.active{opacity:1;visibility:visible;position:relative;}
.slide-text{padding:90px 40px 90px 32px;display:flex;flex-direction:column;justify-content:center;max-width:560px;margin-left:auto;}
.eyechart-line{font-family:var(--disp);line-height:.98;margin:0;font-weight:600;}
.eyechart-line .big{display:block;font-size:clamp(48px,6vw,88px);}
.eyechart-line .mid{display:block;font-size:clamp(28px,3.4vw,44px);color:var(--paper-2);opacity:.75;margin-top:6px;}
.eyechart-line .small{display:block;font-size:16px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--amber);opacity:.9;margin-top:14px;}
.slide-copy{font-size:15px;line-height:1.65;color:var(--paper-2);opacity:.85;margin:22px 0 30px;max-width:400px;}
.btn.btn-outline-light{background:transparent;color:var(--paper);border:1px solid var(--paper);}
.btn.btn-outline-light:hover{background:var(--paper);color:var(--ink);}
.slide-visual{
  position:relative;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 65% 40%, rgba(181,101,42,.28), transparent 55%), var(--line-dark);
}
.slide-visual svg{width:78%;max-width:420px;}
.hero-nav{position:absolute;bottom:36px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:22px;z-index:5;}
.hero-dots{display:flex;gap:10px;}
.hero-dots button{width:26px;height:2px;background:rgba(238,239,231,.35);border:none;cursor:pointer;padding:0;}
.hero-dots button.active{background:var(--amber);}
.hero-arrow{
  background:none;border:1px solid rgba(238,239,231,.4);color:var(--paper);width:38px;height:38px;border-radius:50%;
  cursor:pointer;display:flex;align-items:center;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);
  transition:border-color .2s ease,background .2s ease;
}
.hero-arrow:hover{border-color:var(--amber);background:rgba(181,101,42,.15);}
.hero-arrow.prev{left:32px;} .hero-arrow.next{right:32px;}
@media (max-width:820px){
  .slide{grid-template-columns:1fr;}
  .slide-visual{display:none;}
  .slide-text{margin:0;max-width:none;padding:70px 24px 120px;}
}

/* ---------- page header (shop/product) ---------- */
.page-header{padding-top:20px;padding-bottom:44px;border-bottom:1px solid var(--line);}
.page-header .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);display:block;margin-bottom:8px;}
.page-header h1{font-family:var(--disp);font-weight:600;font-size:38px;margin:0 0 8px;}
.page-header .count{font-family:var(--mono);font-size:12px;color:#5b6067;}

/* ---------- shape strip ---------- */
.shape-strip{border-bottom:1px solid var(--line);background:var(--paper-2);}
.shape-strip .wrap{display:flex;gap:0;overflow-x:auto;}
.shape-item{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 34px;border-right:1px solid var(--line);cursor:pointer;transition:background .2s ease;background:none;border-top:none;border-bottom:none;border-left:none;font-family:inherit;color:inherit;}
.shape-item:hover{background:var(--paper);}
.shape-item svg{width:44px;height:24px;stroke:var(--ink);}
.shape-item span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;}

/* ---------- sections ---------- */
.section{padding:80px 0;}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:44px;border-bottom:1px solid var(--line);padding-bottom:22px;}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);display:block;margin-bottom:8px;}
.section-head h2{font-family:var(--disp);font-weight:600;font-size:34px;margin:0;}
.view-all{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:2px;}

/* ---------- shop layout ---------- */
.shop-layout{display:grid;grid-template-columns:240px 1fr;gap:48px;padding:44px 0 90px;align-items:start;}
.shop-layout > div{min-width:0;}
.filters{position:sticky;top:24px;}
.filter-group{border-bottom:1px solid var(--line);padding:22px 0;}
.filter-group:first-child{padding-top:0;}
.filter-group h4{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 16px;}
.filter-check{display:flex;align-items:center;gap:10px;font-size:13px;margin-bottom:10px;cursor:pointer;}
.filter-check input{accent-color:var(--amber);width:15px;height:15px;}
.filter-swatches{display:flex;flex-wrap:wrap;gap:8px;}
.filter-swatches button{width:24px;height:24px;border-radius:50%;border:1px solid rgba(0,0,0,.15);cursor:pointer;position:relative;}
.filter-swatches button.active::after{content:"";position:absolute;inset:-3px;border:1px solid var(--ink);border-radius:50%;}
.price-range{font-family:var(--mono);font-size:12px;display:flex;justify-content:space-between;margin-top:10px;color:#5b6067;}
.price-range input[type=range]{width:100%;accent-color:var(--amber);margin-top:8px;}

.toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;flex-wrap:wrap;gap:14px;}
.toolbar .result-count{font-size:13px;color:#5b6067;}
.toolbar-right{display:flex;align-items:center;gap:16px;}
.sort-select{
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid var(--line);background:var(--paper);padding:10px 14px;cursor:pointer;color:var(--ink);
}
.view-toggle{display:flex;border:1px solid var(--line);}
.view-toggle button{background:none;border:none;padding:9px 11px;cursor:pointer;color:#5b6067;}
.view-toggle button.active{color:var(--ink);background:var(--paper-2);}

.pagination{display:flex;justify-content:center;gap:8px;margin-top:56px;font-family:var(--mono);font-size:12px;}
.pagination a{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);text-decoration:none;color:var(--ink);
}
.pagination a.active{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.pagination a:hover:not(.active){border-color:var(--amber);color:var(--amber);}

/* ---------- product grid + cards ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}

/* WooCommerce's own product loop wraps everything in <ul class="products">
   before our .card markup — that <ul> is what CSS Grid sees as the single
   direct child of .grid, not the individual products, which is what was
   collapsing the whole shop into one column. display:contents removes the
   <ul> from the box model so its <li> children become the real grid items,
   while list-style/margin resets clean up the leftover bullet-list styling. */
.grid > ul.products{display:contents !important;}
.grid li.product{list-style:none;margin:0;padding:0;}
.grid.grid-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:980px){ .grid.grid-3{grid-template-columns:repeat(2,1fr);} }
/* Deliberately no further collapse to 1 column at phone widths — shop grid
   stays 2 columns all the way down, as requested. */
.card{background:var(--paper);padding:0 0 20px;position:relative;}
.card-media{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:var(--paper-2);}
.card-media svg{width:64%;transition:transform .4s ease;}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.card:hover .card-media svg,
.card:hover .card-media img{transform:scale(1.08);}
.lens-ring{position:absolute;inset:0;border-radius:50%;margin:auto;width:0;height:0;border:1px solid var(--amber);opacity:0;transition:width .35s ease,height .35s ease,opacity .35s ease;}
.card:hover .lens-ring{width:78%;height:78%;opacity:1;}
.tag{position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:var(--paper);padding:4px 8px;z-index:2;}
.quick-view-btn{
  position:absolute;bottom:-40px;left:12px;right:12px;
  background:var(--ink);color:var(--paper);border:none;padding:11px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  transition:bottom .25s ease;z-index:2;
}
.card:hover .quick-view-btn{bottom:12px;}
@media (max-width:900px){
  /* Hover doesn't fire reliably on touch devices, so the button would
     otherwise stay hidden below the visible edge forever on phones/tablets. */
  .quick-view-btn{bottom:12px;}
}
.card-body{padding:18px 18px 0;}
.card-sku{font-family:var(--mono);font-size:10px;color:var(--olive);letter-spacing:.04em;display:block;margin-bottom:6px;text-transform:uppercase;}
.card-body h3{font-family:var(--body);font-weight:600;font-size:15px;margin:0 0 4px;}
.card-body .desc{font-size:12.5px;color:#5b6067;margin:0 0 10px;}
.card-foot{display:flex;align-items:center;justify-content:space-between;}
.price{font-family:var(--mono);font-size:14px;font-weight:500;}
.price .was{text-decoration:line-through;opacity:.5;margin-right:8px;font-size:12px;}
.swatches{display:flex;gap:6px;}
.swatches i{width:12px;height:12px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.15);}
@media (max-width:980px){ .grid{grid-template-columns:repeat(2,1fr);} .shop-layout{grid-template-columns:1fr;} .filters{position:static;} }
/* Deliberately no further collapse to 1 column at phone widths — the shop
   grid stays 2 columns down to the smallest common phone screens. */

/* ---------- USP bar ---------- */
.usp-bar{background:var(--ink);color:var(--paper);}
.usp-bar .wrap{display:grid;grid-template-columns:repeat(4,1fr);}
.usp{padding:30px 24px;border-right:1px solid rgba(238,239,231,.15);display:flex;gap:14px;align-items:flex-start;}
.usp:last-child{border-right:none;}
.usp svg{width:26px;height:26px;flex:0 0 auto;stroke:var(--amber);margin-top:2px;}
.usp h4{margin:0 0 4px;font-size:13px;letter-spacing:.03em;}
.usp p{margin:0;font-size:12px;color:var(--paper-2);opacity:.75;line-height:1.5;}
@media (max-width:820px){ .usp-bar .wrap{grid-template-columns:repeat(2,1fr);} .usp{border-bottom:1px solid rgba(238,239,231,.15);} }

/* ---------- rx / testimonial ---------- */
.rx-section{background:var(--paper-2);}
.rx-card{max-width:760px;margin:0 auto;background:var(--paper);border:1px solid var(--line);padding:44px 48px;position:relative;}
.rx-card::before{content:"RX";position:absolute;top:-14px;left:44px;background:var(--amber);color:var(--paper);font-family:var(--mono);font-size:11px;letter-spacing:.1em;padding:5px 10px;}
.rx-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--olive);border-bottom:1px dashed var(--line);padding-bottom:18px;margin-bottom:22px;}
.rx-grid b{display:block;color:var(--ink);font-size:15px;font-family:var(--body);text-transform:none;margin-top:4px;}
.quote{font-family:var(--disp);font-style:italic;font-size:22px;line-height:1.5;margin:0 0 18px;}
.cite{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:#5b6067;}
@media (max-width:640px){ .rx-card{padding:32px 24px;} .rx-grid{grid-template-columns:repeat(2,1fr);} }

/* ---------- newsletter ---------- */
.news{background:var(--amber);color:var(--paper);text-align:center;padding:70px 24px;}
.news .eyebrow{color:var(--ink);opacity:.6;}
.news h2{font-family:var(--disp);font-weight:600;font-size:32px;margin:0 0 26px;max-width:520px;margin-left:auto;margin-right:auto;}
.news-form{display:flex;max-width:440px;margin:0 auto;border:1px solid var(--paper);}
.news-form input{flex:1;background:transparent;border:none;padding:15px 16px;color:var(--paper);font-family:var(--body);font-size:14px;}
.news-form input::placeholder{color:rgba(238,239,231,.7);}
.news-form button{background:var(--ink);color:var(--paper);border:none;padding:0 22px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--paper-2);padding:60px 0 26px;}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px;padding-bottom:40px;border-bottom:1px solid rgba(238,239,231,.15);}
.foot-grid h5{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper);margin:0 0 16px;}
.foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:13px;}
.foot-grid ul a{text-decoration:none;opacity:.8;}
.foot-grid ul a:hover{opacity:1;color:var(--amber);}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;font-family:var(--mono);font-size:11px;letter-spacing:.03em;opacity:.6;flex-wrap:wrap;gap:12px;}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr 1fr;} }

/* ================= POPUPS / OVERLAYS ================= */
.backdrop{
  position:fixed;inset:0;background:rgba(28,32,36,.5);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;z-index:90;
}
.backdrop.open{opacity:1;visibility:visible;}

/* ---- cart drawer ---- */
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);
  background:var(--paper);z-index:100;
  transform:translateX(100%);transition:transform .35s ease;
  display:flex;flex-direction:column;
}
.cart-drawer.open{transform:translateX(0);}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:24px 26px;border-bottom:1px solid var(--line);}
.drawer-head h3{font-family:var(--disp);font-weight:600;font-size:20px;margin:0;}
.drawer-close{background:none;border:none;cursor:pointer;color:var(--ink);}
.cart-items{flex:1;overflow-y:auto;padding:10px 26px;}
.cart-item{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);}
.cart-item .thumb{width:74px;height:74px;background:var(--paper-2);flex:0 0 auto;display:flex;align-items:center;justify-content:center;}
.cart-item .thumb svg{width:70%;}
.cart-item .thumb img{width:100%;height:100%;object-fit:cover;}
.cart-item-info{flex:1;}
.cart-item-info h4{margin:0 0 4px;font-size:14px;font-weight:600;}
.cart-item-info .meta{font-family:var(--mono);font-size:11px;color:#5b6067;text-transform:uppercase;margin-bottom:10px;}
.qty-stepper{display:inline-flex;align-items:center;border:1px solid var(--line);}
.qty-stepper button{background:none;border:none;width:26px;height:26px;cursor:pointer;font-size:14px;}
.qty-stepper span{width:26px;text-align:center;font-family:var(--mono);font-size:12px;}
.cart-item-price{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;}
.cart-item-price .price{font-size:13px;}
.remove-item{background:none;border:none;color:#5b6067;font-size:11px;font-family:var(--mono);text-transform:uppercase;cursor:pointer;text-decoration:underline;}
.drawer-foot{padding:22px 26px 28px;border-top:1px solid var(--line);}
.drawer-subtotal{display:flex;justify-content:space-between;font-family:var(--mono);font-size:14px;margin-bottom:16px;}
.cart-empty{padding:60px 26px;text-align:center;color:#5b6067;font-size:14px;}

/* ---- search overlay ---- */
.search-overlay{
  position:fixed;top:0;left:0;right:0;background:var(--paper);z-index:100;
  transform:translateY(-100%);transition:transform .35s ease;
  border-bottom:1px solid var(--line);
}
.search-overlay.open{transform:translateY(0);}
.search-overlay-inner{max-width:760px;margin:0 auto;padding:70px 32px;position:relative;}
.search-close{position:absolute;top:26px;right:32px;background:none;border:none;cursor:pointer;color:var(--ink);}
.search-input-row{display:flex;align-items:center;gap:16px;border-bottom:2px solid var(--ink);padding-bottom:16px;}
.search-input-row svg{flex:0 0 auto;}
.search-input-row input{flex:1;border:none;background:none;font-family:var(--disp);font-size:26px;outline:none;color:var(--ink);}
.trending{margin-top:28px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.trending span.label{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#5b6067;}
.trending a{
  font-size:12px;border:1px solid var(--line);padding:7px 14px;text-decoration:none;color:var(--ink);
}
.trending a:hover{border-color:var(--amber);color:var(--amber);}

/* ---- quick view modal ---- */
.modal-quickview{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-46%);
  width:min(880px,92vw);max-height:88vh;overflow-y:auto;
  background:var(--paper);z-index:101;
  opacity:0;visibility:hidden;transition:opacity .3s ease,transform .3s ease,visibility .3s ease;
}
.modal-quickview.open{opacity:1;visibility:visible;transform:translate(-50%,-50%);}
.modal-close{position:absolute;top:18px;right:18px;background:none;border:none;cursor:pointer;color:var(--ink);z-index:2;}
.modal-body{display:grid;grid-template-columns:1fr 1fr;}
.modal-media{background:var(--paper-2);display:flex;align-items:center;justify-content:center;padding:50px;}
.modal-media svg{width:80%;}
.modal-media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}
.modal-info{padding:44px 44px 44px 8px;}
.modal-info .eyebrow{margin-bottom:10px;}
.modal-info h2{font-family:var(--disp);font-weight:600;font-size:26px;margin:0 0 10px;}
.modal-info .price{font-size:18px;margin-bottom:16px;display:block;}
.modal-info p.desc{font-size:13.5px;line-height:1.6;color:#5b6067;margin-bottom:22px;}
.option-row{margin-bottom:20px;}
.option-row h5{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 10px;color:#5b6067;}
.option-swatches{display:flex;gap:8px;}
.option-swatches button{width:28px;height:28px;border-radius:50%;border:1px solid rgba(0,0,0,.15);cursor:pointer;position:relative;}
.option-swatches button.active::after{content:"";position:absolute;inset:-4px;border:1px solid var(--ink);border-radius:50%;}
.option-chips{display:flex;gap:8px;}
.option-chips button{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;padding:8px 14px;
  border:1px solid var(--line);background:none;cursor:pointer;color:var(--ink);
}
.option-chips button.active{border-color:var(--ink);background:var(--ink);color:var(--paper);}

/* Injected by WooCommerce's variation JS once a variation matches — was
   completely unstyled default browser text before. */
.woocommerce-variation-price{font-size:20px;margin-bottom:16px;}
.woocommerce-variation-price .price{font-family:var(--mono);}
.woocommerce-variation-availability{font-size:13px;color:#5b6067;margin-bottom:12px;}
.woocommerce-variation-availability .stock.in-stock{color:var(--olive);}
.woocommerce-variation-availability .stock.out-of-stock{color:#b3413a;}
.woocommerce-variation-description{font-size:13.5px;line-height:1.6;color:#454a50;margin-bottom:16px;}
.modal-actions{display:flex;gap:12px;margin-top:26px;}
@media (max-width:720px){ .modal-body{grid-template-columns:1fr;} .modal-media{padding:30px;} .modal-info{padding:30px;} }

/* ---- mobile nav drawer ---- */
.mobile-drawer{
  position:fixed;top:0;left:0;bottom:0;width:min(320px,85%);
  background:var(--paper);z-index:100;transform:translateX(-100%);transition:transform .3s ease;
  padding:26px;
}
.mobile-drawer.open{transform:translateX(0);}
.mobile-drawer ul{list-style:none;margin:36px 0 0;padding:0;display:flex;flex-direction:column;gap:22px;}
.mobile-drawer ul a{text-decoration:none;font-family:var(--disp);font-size:20px;font-weight:500;}

/* ---- toast ---- */
.toast{
  position:fixed;bottom:26px;left:50%;transform:translate(-50%,20px);
  background:var(--ink);color:var(--paper);padding:14px 22px;font-size:13px;
  display:flex;align-items:center;gap:10px;z-index:110;opacity:0;visibility:hidden;
  transition:opacity .25s ease,transform .25s ease,visibility .25s ease;
}
.toast.open{opacity:1;visibility:visible;transform:translate(-50%,0);}
.toast svg{stroke:var(--amber);}

/* ================= PRODUCT PAGE — FROM SCRATCH ================= */

.pp-hero{position:relative;min-height:52vh;display:flex;align-items:flex-end;background:var(--line-dark) center/cover no-repeat;}
.pp-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(28,32,36,.05) 0%, rgba(28,32,36,.85) 100%);}
.pp-hero-inner{position:relative;z-index:1;padding:60px 32px 44px;width:100%;color:var(--paper);}
.pp-breadcrumb{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:rgba(238,239,231,.7);margin-bottom:18px;}
.pp-breadcrumb a{color:inherit;text-decoration:none;}
.pp-breadcrumb a:hover{color:var(--amber);}
.pp-breadcrumb .sep{margin:0 8px;opacity:.5;}
.pp-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.pp-title{font-family:var(--disp);font-weight:600;font-size:clamp(34px,5vw,64px);margin:0;line-height:1.02;}
.pp-title-meta{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:rgba(238,239,231,.75);margin-top:10px;}
.pp-hero-price{text-align:right;}
.pp-hero-price .price{font-size:26px;color:var(--paper);}
.pp-hero-price .stars{color:var(--amber);font-size:14px;letter-spacing:2px;display:block;margin-top:6px;}

.pp-body{display:grid !important;grid-template-columns:1fr 1fr !important;gap:60px;padding-top:36px;padding-bottom:20px;align-items:start;}
.pp-gallery-col,.pp-info-col{min-width:0;}

/* Gallery: main image on top, thumbnail row below it — not a side rail */
.pp-gallery-col .gallery{display:flex;flex-direction:column;gap:16px;}
.pp-gallery-col .gallery-main{aspect-ratio:1/1;order:1;overflow:hidden;}
.pp-gallery-col .gallery-main img{width:100%;height:100%;object-fit:cover;display:block;}
.pp-gallery-col .gallery-thumbs{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px;margin:0;order:2;}
.pp-gallery-col .gallery-thumbs button{width:76px;height:76px;flex:0 0 auto;padding:0;border:1px solid var(--line);background:var(--paper-2);overflow:hidden;cursor:pointer;}
.pp-gallery-col .gallery-thumbs button img{width:100%;height:100%;object-fit:cover;display:block;}
.pp-gallery-col .gallery-thumbs button.active{border-color:var(--ink);}

.pp-info-col .eyebrow{margin-bottom:10px;}
.pp-info-col .pp-title{font-family:var(--disp);font-weight:600;font-size:clamp(28px,3vw,40px);margin:0 0 12px;line-height:1.05;}
.pp-info-col .stars{color:var(--amber);font-size:14px;letter-spacing:2px;display:block;margin-bottom:12px;}
.pp-info-col .pp-price{font-size:22px;display:block;margin-bottom:20px;}
@media (max-width:860px){
  .pp-body{grid-template-columns:1fr !important;}
}
.pp-desc{font-size:14px;line-height:1.75;color:#454a50;margin:0 0 28px;max-width:460px;}

.pp-option-row{margin-bottom:26px;}
.pp-option-row h5{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;margin:0 0 14px;color:#5b6067;}
.pp-swatches{display:flex;flex-wrap:wrap;gap:10px;}
.pp-swatch{
  width:34px;height:34px;border-radius:50%;border:1px solid rgba(0,0,0,.15);cursor:pointer;position:relative;
  padding:0;background:none;
}
.pp-swatch.active::after{content:"";position:absolute;inset:-4px;border:1.5px solid var(--ink);border-radius:50%;}
.pp-pills{display:flex;flex-wrap:wrap;gap:10px;}
.pp-pill{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  padding:11px 18px;border:1px solid var(--line);background:none;cursor:pointer;color:var(--ink);
}
.pp-pill.active{border-color:var(--ink);background:var(--ink);color:var(--paper);}
.pp-pill[disabled]{opacity:.35;cursor:not-allowed;text-decoration:line-through;}

.pp-buy-row{display:flex;gap:12px;align-items:stretch;margin:8px 0 22px;flex-wrap:wrap;}
.pp-buy-row .single_add_to_cart_button{flex:1;min-width:160px;}
.pp-buy-row .quantity{border:1px solid var(--line);display:flex;align-items:center;}
.pp-buy-row .quantity .qty{width:56px;border:none;text-align:center;font-family:var(--mono);font-size:13px;padding:15px 0;background:none;}
.pp-buy-row button[type="submit"],
.pp-buy-row .single_add_to_cart_button{
  flex:1;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--amber);color:var(--paper);border:1px solid var(--amber);padding:0 26px;cursor:pointer;
}
.pp-buy-row .single_add_to_cart_button:hover{background:transparent;color:var(--amber);}

.pp-trust-row{display:flex;gap:22px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--line);}
.pp-trust-row .item{display:flex;align-items:center;gap:8px;font-size:12px;color:#5b6067;}
.pp-trust-row svg{width:18px;height:18px;stroke:var(--amber);flex:0 0 auto;}

/* Spec sheet — optometrist-chart styled attribute grid */
.pp-specs{padding-top:50px;padding-bottom:50px;border-top:1px solid var(--line);}
.pp-specs h2{font-family:var(--disp);font-weight:600;font-size:24px;margin:0 0 28px;}
.pp-specs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);}
.pp-specs-grid .spec{padding:22px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);}
.pp-specs-grid .spec:nth-child(4n){border-right:none;}
.pp-specs-grid .spec h6{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--olive);margin:0 0 6px;}
.pp-specs-grid .spec p{margin:0;font-size:14px;font-weight:600;}
@media (max-width:820px){ .pp-specs-grid{grid-template-columns:repeat(2,1fr);} .pp-specs-grid .spec:nth-child(4n){border-right:1px solid var(--line);} .pp-specs-grid .spec:nth-child(2n){border-right:none;} }

/* Sticky add-to-cart bar */
.sticky-add-bar{
  position:fixed;left:0;right:0;bottom:0;background:var(--ink);color:var(--paper);z-index:80;
  transform:translateY(100%);transition:transform .3s ease;
  display:flex;align-items:center;justify-content:space-between;padding:16px 32px;
}
.sticky-add-bar.visible{transform:translateY(0);}
.sticky-add-bar .sab-info{display:flex;align-items:center;gap:16px;}
.sticky-add-bar .sab-info img{width:44px;height:44px;object-fit:cover;}
.sticky-add-bar h4{margin:0;font-size:14px;}
.sticky-add-bar .price{font-size:14px;color:rgba(238,239,231,.8);}
.sticky-add-bar button{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  background:var(--amber);color:var(--paper);border:none;padding:13px 24px;cursor:pointer;
}
@media (max-width:640px){ .sticky-add-bar .sab-info h4{display:none;} }

/* Related — horizontal scroll strip, not a grid */
.pp-related{padding:70px 0 90px;border-top:1px solid var(--line);}
.pp-related-track{display:flex;gap:1px;overflow-x:auto;background:var(--line);border:1px solid var(--line);}
.pp-related-track .card{flex:0 0 260px;}

/* ================= WOOCOMMERCE GLOBAL — cart, checkout, my-account =================
   These pages keep WooCommerce's default templates/logic (safer for payment
   gateways and plugin compatibility) but every visible element is restyled
   with the theme's fonts, colors, and spacing via WooCommerce's standard
   classes — no template overrides needed here. */

/* div.woocommerce, not plain .woocommerce — WordPress also adds a literal
   "woocommerce" class straight onto <body> on shop/product pages (via
   is_woocommerce()), which a bare .woocommerce{} rule would also match,
   pushing this padding onto the whole <body> element and shifting the
   header/footer strips inward from the browser edge on exactly those two
   page types. Scoping to the actual <div class="woocommerce"> shortcode
   wrapper (used on cart/checkout/account) avoids matching body at all. */
div.woocommerce{width:100%;padding:0 clamp(20px,4vw,56px) 90px;font-family:var(--body);color:var(--ink);}
@media (max-width:640px){
  /* Cart/checkout/account content should touch the phone screen's edges —
     the page-header banner above it keeps its own margin independently
     (separate element), only the actual order/form blocks go full-bleed here. */
  div.woocommerce{padding-left:0;padding-right:0;}
}

/* Buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  background:var(--amber);color:var(--paper);border:1px solid var(--amber);border-radius:0;
  padding:14px 24px;cursor:pointer;transition:background .2s ease,color .2s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{background:transparent;color:var(--amber);}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt{background:var(--ink);border-color:var(--ink);}
.woocommerce a.button.alt:hover{background:transparent;color:var(--ink);}

/* Tables (cart, order review, order history) */
.woocommerce table.shop_table{
  border-collapse:collapse;width:100%;border:1px solid var(--line);font-size:13.5px;margin-bottom:26px;
}
.woocommerce table.shop_table th{
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  text-align:left;padding:16px;border-bottom:1px solid var(--line);background:var(--paper-2);
}
.woocommerce table.shop_table td{padding:16px;border-bottom:1px solid var(--line);}
.woocommerce table.shop_table td.product-thumbnail img{width:64px;height:64px;object-fit:cover;}
.woocommerce .cart-subtotal, .woocommerce .order-total{font-family:var(--mono);}

@media (max-width:640px){
  /* Recreates WooCommerce's own responsive table behavior (lost when its
     default stylesheet was dequeued): each row becomes a stacked card with
     a label in front of every value, using the data-title attribute
     WooCommerce already outputs on every <td> — no markup changes needed.
     Applied to every .shop_table directly, not just ones carrying the extra
     .shop_table_responsive class — the checkout page's order-review table
     doesn't have that class at all, which is why it was falling through to
     a horizontal-scroll fallback instead (showing as a cut-off "PRODUCT"
     column) rather than getting this stacked treatment. */
  .woocommerce table.shop_table thead{display:none;}
  .woocommerce table.shop_table,
  .woocommerce table.shop_table tbody,
  .woocommerce table.shop_table tr,
  .woocommerce table.shop_table td{display:block;width:100%;}
  .woocommerce table.shop_table tr{border-bottom:2px solid var(--line);padding:14px clamp(16px,4vw,24px);}
  .woocommerce table.shop_table td{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    border-bottom:none;padding:6px 0;text-align:right;
  }
  .woocommerce table.shop_table td::before{
    content:attr(data-title);font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;
    text-transform:uppercase;color:#5b6067;text-align:left;
  }
  .woocommerce table.shop_table td.product-thumbnail{justify-content:flex-start;}
  .woocommerce table.shop_table td.product-thumbnail::before{content:none;}
  /* The coupon/update-cart row isn't a label:value pair like the others —
     let it lay out normally instead of inheriting the flex/label treatment. */
  .woocommerce table.shop_table td.actions{display:block;text-align:left;}
  .woocommerce table.shop_table td.actions::before{content:none;}
}

/* Quantity input */
.woocommerce .quantity .qty{
  border:1px solid var(--line);padding:12px;font-family:var(--mono);width:60px;text-align:center;background:none;
}

/* Coupon / cart totals boxes */
.woocommerce .cart_totals, .woocommerce-checkout .woocommerce-checkout-review-order{
  border:1px solid var(--line);padding:26px;background:var(--paper-2);
}
.woocommerce .cart_totals h2, .woocommerce-checkout h3{font-family:var(--disp);font-weight:600;}

/* Cart page: totals box sits right-aligned like a summary sidebar on desktop
   (WooCommerce's own default stylesheet used to position this via float —
   removed along with the rest of its default CSS — so it needs its own
   width/alignment here or it just sits full-width and disconnected from
   the cart table above it). Full width again on mobile, no float to undo. */
.woocommerce .cart_totals{max-width:420px;margin-left:auto;}
.woocommerce .cart_totals table.shop_table{border:none;background:transparent;}
.woocommerce .cart-collaterals::after{content:"";display:table;clear:both;}
@media (max-width:780px){
  .woocommerce .cart_totals{max-width:none;margin-left:0;}
}

/* Coupon form + Update Cart button (default cart.php markup, unstyled by
   us until now): stack cleanly instead of running together as bare
   inline elements now that WooCommerce's own layout CSS is gone. */
.woocommerce .coupon{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px;}
.woocommerce .coupon .input-text{border:1px solid var(--line);padding:12px 14px;font-family:var(--body);font-size:14px;width:auto;flex:1;min-width:140px;}
.woocommerce table.shop_table .actions{padding-top:20px;}
@media (max-width:480px){
  .woocommerce .coupon{flex-direction:column;align-items:stretch;}
  .woocommerce .coupon .input-text{width:100%;}
}

/* Form fields (checkout, my-account edit forms) */
.woocommerce form .form-row label{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#5b6067;margin-bottom:6px;display:block;}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea{
  width:100%;border:1px solid var(--line);padding:13px 14px;font-family:var(--body);font-size:14px;background:var(--paper);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus{outline:2px solid var(--amber);outline-offset:1px;}

/* Notices (added-to-cart, errors, info) */
.woocommerce-message, .woocommerce-error, .woocommerce-info{
  border:none;border-left:3px solid var(--amber);background:var(--paper-2);
  padding:16px 20px;font-size:13.5px;list-style:none;margin-bottom:24px;
}
.woocommerce-error{border-left-color:#b3413a;}

/* My Account navigation */
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;border:1px solid var(--line);}
.woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--line);}
.woocommerce-MyAccount-navigation li:last-child{border-bottom:none;}
.woocommerce-MyAccount-navigation li a{
  display:block;padding:14px 18px;text-decoration:none;font-family:var(--mono);font-size:12px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink);
}
.woocommerce-MyAccount-navigation li.is-active a{background:var(--ink);color:var(--paper);}
.woocommerce-account .woocommerce-MyAccount-content{padding-top:30px;}

/* Checkout — proper two-column orientation: fields left, order review +
   payment sticky on the right. Overrides the old flat .col2-set styling
   now that woocommerce/checkout/form-checkout.php controls the real layout. */
.pp-checkout-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:start;padding:10px 0 40px;}
.pp-checkout-fields,
.pp-checkout-summary{min-width:0;} /* Grid items don't shrink below their content's natural width by
   default — without this, a wide child (a dropdown, an unstacked table)
   can force the whole column wider than the viewport on a phone, which is
   what was pushing the checkout form's right side off-screen. */
.pp-checkout-fields #customer_details{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;}
.pp-checkout-fields #customer_details .col-1,
.pp-checkout-fields #customer_details .col-2{min-width:0;}
.pp-checkout-fields h3{font-family:var(--disp);font-weight:600;font-size:20px;margin:0 0 18px;}
.pp-checkout-summary{position:sticky;top:24px;border:1px solid var(--line);padding:28px;background:var(--paper-2);}
.pp-checkout-summary #order_review_heading{font-family:var(--disp);font-weight:600;font-size:20px;margin:0 0 20px;}
.pp-checkout-summary table.shop_table{background:var(--paper);border:none;}
@media (max-width:960px){
  .pp-checkout-grid{grid-template-columns:1fr;}
  .pp-checkout-fields #customer_details{grid-template-columns:1fr;}
  .pp-checkout-summary{position:static;}
}

/* ================= REPLACEMENTS FOR DEQUEUED WOOCOMMERCE DEFAULTS =================
   Now that woocommerce_enqueue_styles is disabled, these fill in the handful
   of things that stylesheet quietly provided everywhere on the site. */

/* Star ratings — recreated with plain characters instead of WooCommerce's
   icon font, so nothing breaks by losing that font file. */
.star-rating{
  overflow:hidden;position:relative;height:1.1em;line-height:1.1em;
  width:5.5em;font-size:14px;letter-spacing:2px;
}
.star-rating::before{
  content:"☆☆☆☆☆";position:absolute;top:0;left:0;color:var(--line);
}
.star-rating span{overflow:hidden;position:absolute;top:0;left:0;height:100%;}
.star-rating span::before{content:"★★★★★";position:absolute;top:0;left:0;color:var(--amber);}

/* Checkout/account form-row widths — WooCommerce's own CSS used to pair
   first/last name, city/postcode, etc. side by side. */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper,
.woocommerce-address-fields{display:flex;flex-wrap:wrap;gap:0 4%;}
.woocommerce form .form-row{width:100%;margin-bottom:16px;}
.woocommerce form .form-row-first,
.woocommerce form .form-row-last{width:48%;}
.woocommerce form .form-row-wide{width:100%;}

/* AJAX update loading overlay (cart qty changes, checkout totals refresh) */
.woocommerce.processing{position:relative;}
.woocommerce.processing::after{
  content:"";position:absolute;inset:0;background:rgba(238,239,231,.6);z-index:5;
}

/* Select2 country/state dropdowns — restyle the trigger to match our inputs
   (Select2's own JS-generated markup/positioning CSS still loads separately,
   this only touches colors/border to match the theme). */
.select2-container .select2-selection--single{
  height:auto !important;border:1px solid var(--line) !important;border-radius:0 !important;
  padding:13px 14px !important;
}
.select2-container .select2-selection__rendered{padding:0 !important;line-height:1.4 !important;font-family:var(--body);}
.select2-container .select2-selection__arrow{height:100% !important;}

/* ================= GENERIC WOOCOMMERCE PRODUCT LOOPS =================
   Covers output WooCommerce generates itself outside our own .grid wrapper
   — cross-sells on the cart page being the main one — so it's never left
   as a bare, unstyled, potentially overflowing bullet list. The !important
   on .grid > ul.products above guarantees this never fights the shop grid. */
.woocommerce ul.products{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;
  list-style:none;margin:20px 0 0;padding:0;
}
.woocommerce ul.products li.product{
  list-style:none;margin:0;border:1px solid var(--line);padding:16px;background:var(--paper);
}
.woocommerce ul.products li.product img{width:100%;aspect-ratio:1/1;object-fit:cover;margin-bottom:10px;}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:14px;font-weight:600;margin:0 0 6px;}
.woocommerce .cross-sells h2{font-family:var(--disp);font-weight:600;font-size:20px;margin:34px 0 0;}
@media (max-width:480px){
  .woocommerce ul.products{grid-template-columns:repeat(2,1fr);}
}

/* Checkout fields — First/Last name, City/Postcode etc. sit at 48% width
   side by side; on a narrow phone that's cramped enough to look broken
   rather than just tight, so drop to full-width single column below 480px. */
@media (max-width:480px){
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last{width:100%;}
}

/* Select2 (country/state dropdowns on checkout) calculates its own width
   via JS at init time and sets it as an inline style — if that happens
   before the responsive layout has settled, it can lock in a pixel width
   wider than the phone's viewport, which pushes the entire checkout form
   wider than the page and overflows past the header/footer. Forcing 100%
   here overrides that inline style regardless of what JS calculated. */
.select2-container{width:100% !important;max-width:100%;}

/* A previous "safety net" here (overflow-x:hidden on html/body) was removed —
   it's a well-known conflict: any ancestor with overflow-x other than
   visible breaks position:sticky (used on the nav bar) by turning that
   ancestor into an unexpected scroll container. The actual overflow causes
   (grid items not shrinking, Select2's inline width) are now fixed directly
   at their source above instead of being masked at the body level. */

/* ================= REVIEWS SLIDER ================= */
.review-slider{position:relative;}
.review-slide{display:none;}
.review-slide.active{display:block;}
.review-stars{color:var(--amber);font-size:13px;letter-spacing:1px;margin-left:10px;}
.review-dots{display:flex;justify-content:center;gap:10px;margin-top:26px;}
.review-dots button{width:26px;height:2px;background:var(--line);border:none;cursor:pointer;padding:0;}
.review-dots button.active{background:var(--amber);}

/* ================= PRICE FILTER (shop sidebar) =================
   Plain min/max number inputs, not WooCommerce's jQuery-UI slider widget —
   that slider depends on WooCommerce's own default stylesheet/behavior for
   its draggable handles, which wasn't rendering reliably. This is simpler
   and functionally identical from WooCommerce's own filtering perspective. */
.price-filter-inputs{display:flex;align-items:center;gap:8px;}
.price-filter-inputs input{
  width:0;flex:1;border:1px solid var(--line);padding:10px;
  font-family:var(--mono);font-size:12px;background:var(--paper);
}
.price-filter-inputs span{color:#5b6067;}

/* ================= SHIPPING CALCULATOR (cart page) =================
   Baseline styling (was completely unstyled bare browser defaults before). */
.woocommerce-shipping-calculator{margin-top:10px;width:100%;box-sizing:border-box;}
.woocommerce-shipping-calculator .form-row{margin-bottom:12px;width:100%;}
.woocommerce-shipping-calculator label{
  display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  color:#5b6067;margin-bottom:6px;font-family:var(--mono);
}
.woocommerce-shipping-calculator select,
.woocommerce-shipping-calculator input[type="text"]{
  width:100%;max-width:100%;box-sizing:border-box;border:1px solid var(--line);
  padding:12px;background:var(--paper);font-family:var(--body);font-size:14px;
}
.woocommerce-shipping-calculator .button{width:100%;margin-top:4px;}
.shipping-calculator-button{
  font-family:var(--mono);font-size:11px;text-decoration:underline;color:var(--amber);
}

/* Un-scoped from any media query on purpose — targets WooCommerce's own
   known ".shipping" row class directly (more reliable across mobile
   browsers than the :has() selector this replaced), and applies at every
   screen size the mobile table-stacking rule could possibly be active at.
   Two separate bugs addressed:
   1. That stacking rule turns each <td> into a flex container meant for
      simple label:value pairs — completely wrong for a multi-field form,
      forcing squeezed/right-aligned layout.
   2. A flex/grid item won't shrink below its content's natural width by
      default (min-width:auto) — if anything inside (a long dropdown, etc.)
      is wider than the available column, the whole td overflows and only
      part of the form is visible, exactly matching "half hidden". */
.woocommerce table.shop_table tr.shipping td,
.woocommerce table.shop_table td:has(.woocommerce-shipping-calculator){
  display:block !important;
  text-align:left !important;
  min-width:0 !important;
  width:100% !important;
  overflow:visible;
}
.woocommerce table.shop_table tr.shipping td::before,
.woocommerce table.shop_table td:has(.woocommerce-shipping-calculator)::before{
  content:none !important;
}