/*
Theme Name: Optics Depot
Theme URI: https://opticsdepot.co
Author: Optics Depot
Description: Optics, mounts and accessories. Red #D10000 on pure white.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: opticsdepot
*/

:root{
  --od-red:#D10000; --od-red-dark:#A30000; --od-red-tint:#FDECEC;
  --od-ink:#141416; --od-muted:#5C5C65; --od-soft:#8A8A93;
  --od-panel:#F7F7F8; --od-line:#E8E8EA; --od-line2:#ECECEF; --od-white:#FFFFFF;
  --od-max:1280px; --od-pad:28px;
  --od-disp:'Barlow Condensed',Barlow,system-ui,sans-serif;
  --od-body:'Barlow',system-ui,-apple-system,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--od-white);color:var(--od-ink);font-family:var(--od-body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--od-red);text-decoration:none}
a:hover{color:var(--od-red-dark)}
h1,h2,h3,h4{font-family:var(--od-disp);font-style:italic;font-weight:700;text-transform:uppercase;letter-spacing:.005em;margin:0}
.od-wrap{max-width:var(--od-max);margin:0 auto;padding:0 var(--od-pad)}
.od-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.od-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:15px 30px;border-radius:8px;font-family:var(--od-disp);font-style:italic;font-weight:700;font-size:18px;letter-spacing:.07em;text-transform:uppercase;border:1px solid transparent;cursor:pointer}
.od-btn--red{background:var(--od-red);color:#fff}
.od-btn--red:hover{background:var(--od-red-dark);color:#fff}
.od-btn--ghost{background:#fff;color:var(--od-ink);border-color:#DCDCE0}
.od-btn--ghost:hover{border-color:var(--od-red);color:var(--od-ink)}

/* ticker */
@keyframes od-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes od-slide-rev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.od-ticker{background:var(--od-red);color:#fff;overflow:hidden;white-space:nowrap;padding:8px 0}
.od-ticker__track{display:inline-flex;animation:od-slide 30s linear infinite}
.od-ticker__grp{display:inline-flex;gap:44px;padding-right:44px;align-items:center}
.od-ticker span{font-family:var(--od-disp);font-style:italic;font-weight:700;font-size:14.5px;letter-spacing:.1em;text-transform:uppercase}

/* header */
.od-head{background:#fff;border-bottom:1px solid var(--od-line2);position:relative;z-index:40}
.od-head__row{display:flex;flex-wrap:wrap;align-items:center;gap:22px;padding-top:16px;padding-bottom:16px}
.od-logo{flex-shrink:0;line-height:0;display:block}
.od-logo img{width:54px;height:54px;border-radius:8px;display:block}
.od-search{flex:999 1 340px;min-width:0;display:flex;background:var(--od-panel);border:1px solid var(--od-line);border-radius:10px;overflow:hidden}
.od-search input{flex:1;min-width:0;border:0;background:transparent;padding:13px 16px;font-family:var(--od-body);font-size:15px;color:var(--od-ink);outline:0}
.od-search button{border:0;background:transparent;padding:0 16px;cursor:pointer;display:flex;align-items:center}
.od-head__act{display:flex;align-items:center;gap:18px;flex-shrink:0}
.od-pill{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:14px;color:var(--od-ink);background:var(--od-panel);border:1px solid var(--od-line);border-radius:999px;padding:10px 16px;min-height:44px}
.od-pill:hover{border-color:var(--od-red);color:var(--od-ink)}
.od-cart{display:inline-flex;align-items:center;gap:7px;color:var(--od-ink);font-weight:600;font-size:14px}
.od-nav{border-top:1px solid var(--od-line2)}
.od-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:26px}
.od-nav a{font-family:var(--od-disp);font-weight:600;font-style:normal;font-size:16.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--od-ink);padding:12px 0;display:inline-block;border-bottom:2px solid transparent}
.od-nav a:hover{border-bottom-color:var(--od-red);color:var(--od-ink)}

/* hero */
.od-hero{border-bottom:1px solid var(--od-line2)}
.od-hero__in{display:flex;flex-wrap:wrap;align-items:center;gap:48px}
.od-hero__copy{flex:999 1 400px;min-width:0;padding:62px 0}
.od-flag{display:inline-flex;align-items:center;gap:8px;background:var(--od-red-tint);color:var(--od-red);font-family:var(--od-disp);font-style:italic;font-weight:700;font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;padding:7px 13px;border-radius:999px;margin-bottom:20px}
.od-hero h1{font-size:76px;line-height:.92;margin-bottom:16px}
.od-hero h1 .od-red{color:var(--od-red)}
.od-hero p{margin:0 0 28px;font-size:18px;line-height:1.55;color:var(--od-muted);max-width:440px}
.od-hero__cta{display:flex;flex-wrap:wrap;gap:10px}
.od-hero__stage{flex:1 1 400px;min-width:0;padding:32px 0 44px}
.od-stage{background:var(--od-panel);border:1px solid var(--od-line2);border-radius:18px;padding:30px;display:flex;flex-direction:column;align-items:center;gap:16px}
.od-stage__img{display:flex;align-items:center;justify-content:center;min-height:230px;width:100%}
.od-stage__img img{max-height:230px;width:auto;object-fit:contain}
.od-stage__meta{text-align:center;display:flex;flex-direction:column;gap:5px}
.od-brandline{font-family:var(--od-disp);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--od-red)}
.od-stage__name{font-size:16px;font-weight:600;line-height:1.35;color:var(--od-ink)}
.od-price{font-family:var(--od-disp);font-weight:700;color:var(--od-ink)}
.od-stage .od-price{font-size:30px}
.od-dots{display:flex;gap:8px;margin-top:2px}
.od-dots button{width:9px;height:9px;border-radius:999px;border:0;padding:0;cursor:pointer;background:#D4D4DA;transition:width .2s ease,background .2s ease}
.od-dots button[aria-current="true"]{width:26px;background:var(--od-red)}

/* reels */
.od-reel{overflow:hidden;white-space:nowrap;padding-bottom:6px}
.od-reel__track{display:inline-flex}
.od-reel--a .od-reel__track{animation:od-slide 52s linear infinite}
.od-reel--b .od-reel__track{animation:od-slide-rev 64s linear infinite}
.od-reel--c .od-reel__track{animation:od-slide 76s linear infinite}
.od-reel:hover .od-reel__track{animation-play-state:paused}
.od-reel__grp{display:inline-flex;gap:14px;padding-right:14px}
.od-brandreel{border-bottom:1px solid var(--od-line2);padding:22px 0;overflow:hidden;white-space:nowrap;background:#fff}
.od-brandreel .od-reel__track{animation:od-slide 52s linear infinite}
.od-brandreel__grp{display:inline-flex;align-items:center;gap:50px;padding-right:50px}
.od-brandreel a{display:inline-flex;align-items:center;height:34px}
.od-brandreel img{height:30px;width:auto;filter:grayscale(1) brightness(.62);opacity:.85;transition:filter .18s ease,opacity .18s ease}
.od-brandreel a:hover img{filter:none;opacity:1}
.od-brandreel .od-wordmark{font-family:var(--od-disp);font-style:italic;font-weight:700;font-size:23px;letter-spacing:.08em;text-transform:uppercase;color:#9B9BA3}
.od-brandreel a:hover .od-wordmark{color:var(--od-ink)}

/* cards */
.od-card{display:flex;flex-direction:column;border:1px solid var(--od-line);border-radius:14px;background:#fff;overflow:hidden;white-space:normal;transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease}
.od-card:hover{border-color:#D7D7DB;box-shadow:0 10px 28px rgba(20,20,22,.10);transform:translateY(-2px)}
.od-card--reel{width:232px;flex:0 0 232px}
.od-card__img{background:var(--od-panel);padding:18px;display:flex;align-items:center;justify-content:center;min-height:148px;position:relative}
.od-card__img img{max-height:118px;width:auto;object-fit:contain;mix-blend-mode:multiply}
.od-card__body{padding:13px 14px 15px;display:flex;flex-direction:column;gap:5px}
.od-card__name{font-size:13.5px;font-weight:600;line-height:1.35;color:var(--od-ink)}
.od-card .od-price{font-size:21px}
.od-card__was{font-size:12.5px;color:var(--od-soft);text-decoration:line-through}
.od-badge{position:absolute;top:11px;left:11px;background:var(--od-red);color:#fff;font-family:var(--od-disp);font-style:italic;font-weight:700;font-size:11.5px;letter-spacing:.09em;padding:4px 9px;text-transform:uppercase;border-radius:999px;z-index:2}
.od-pricerow{display:flex;align-items:baseline;gap:7px}

/* sections */
.od-sec{padding:52px 0 18px}
.od-sec__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px}
.od-sec h2{font-size:38px}
.od-more{font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase}
.od-grid6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.od-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.od-chip{border:1px solid var(--od-line);background:#fff;border-radius:14px;padding:18px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:var(--od-ink)}
.od-chip:hover{border-color:var(--od-red);color:var(--od-ink)}
.od-chip__label{font-family:var(--od-disp);font-weight:700;font-size:16px;letter-spacing:.05em;text-transform:uppercase}
.od-chip__count{font-size:12px;font-weight:600;color:var(--od-soft)}
.od-chip img{height:60px;width:auto;object-fit:contain}

/* finder */
.od-finder{background:var(--od-panel);border-top:1px solid var(--od-line2);border-bottom:1px solid var(--od-line2);padding:56px 0;margin-top:56px}
.od-finder__head{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:8px}
.od-tag{background:var(--od-red);color:#fff;font-family:var(--od-disp);font-style:italic;font-weight:700;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.od-finder p.od-lead{margin:0 0 24px;font-size:16.5px;color:var(--od-muted);max-width:620px}
.od-fp{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:18px}
.od-fp button{font-family:var(--od-body);font-weight:600;font-size:14px;padding:11px 16px;min-height:44px;cursor:pointer;border-radius:999px;border:1px solid #DCDCE0;background:#fff;color:var(--od-ink);transition:all .15s ease}
.od-fp button:hover{border-color:var(--od-red)}
.od-fp button[aria-pressed="true"]{background:var(--od-red);border-color:var(--od-red);color:#fff}
.od-results{background:#fff;border:1px solid var(--od-line);border-radius:16px;padding:24px;box-shadow:0 1px 2px rgba(20,20,22,.04)}
.od-results__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--od-line2)}
.od-results__head h3{font-size:23px}
.od-results__note{font-size:14px;color:#6E6E76}
.od-empty{padding:28px 4px;color:var(--od-muted);font-size:15px}

/* promises + brand wall */
.od-promise{background:var(--od-panel);border:1px solid var(--od-line2);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:6px}
.od-promise h3{font-size:19px;letter-spacing:.04em;color:var(--od-red)}
.od-promise p{margin:0;font-size:14px;color:var(--od-muted);line-height:1.5}
.od-brandtile{border:1px solid var(--od-line);background:#fff;border-radius:10px;padding:16px 10px;min-height:76px;display:flex;align-items:center;justify-content:center;color:var(--od-ink)}
.od-brandtile:hover{border-color:var(--od-red)}
.od-brandtile img{max-height:34px;width:auto;object-fit:contain;filter:grayscale(1) brightness(.55)}
.od-brandtile:hover img{filter:none}
.od-brandtile span{font-family:var(--od-disp);font-weight:700;font-size:15.5px;letter-spacing:.05em;text-transform:uppercase;text-align:center}

/* footer */
.od-foot{background:#FAFAFB;border-top:1px solid var(--od-line2);padding:44px 0 28px;margin-top:52px}
.od-foot__row{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between}
.od-foot__brand{flex:0 1 300px}
.od-foot__brand img{width:62px;height:62px;border-radius:8px;display:block;margin-bottom:14px}
.od-foot__brand p{margin:0;font-size:14px;color:#6E6E76;line-height:1.55}
.od-foot__col{flex:0 1 180px}
.od-foot__col h4{font-family:var(--od-disp);font-style:normal;font-weight:700;font-size:14px;letter-spacing:.12em;margin-bottom:10px}
.od-foot__col a{display:block;font-size:14px;color:#6E6E76;padding:5px 0}
.od-foot__col a:hover{color:var(--od-red)}
.od-foot__legal{margin-top:26px;padding-top:18px;border-top:1px solid var(--od-line2);font-size:12.5px;color:var(--od-soft)}

/* woocommerce */
.od-main{padding:36px 0 0}
.woocommerce ul.products{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}
.woocommerce ul.products li.product{width:auto!important;margin:0!important;float:none!important;border:1px solid var(--od-line);border-radius:14px;overflow:hidden;background:#fff;transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease}
.woocommerce ul.products li.product:hover{border-color:#D7D7DB;box-shadow:0 10px 28px rgba(20,20,22,.10);transform:translateY(-2px)}
.woocommerce ul.products li.product a img{margin:0;background:var(--od-panel);padding:16px;mix-blend-mode:multiply}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:13.5px!important;font-weight:600;line-height:1.35;padding:12px 14px 0;color:var(--od-ink)}
.woocommerce ul.products li.product .price{display:block;padding:4px 14px 14px;font-family:var(--od-disp);font-weight:700;font-size:21px;color:var(--od-ink)}
.woocommerce ul.products li.product .price del{font-family:var(--od-body);font-size:12.5px;color:var(--od-soft);font-weight:400}
.woocommerce ul.products li.product .price ins{text-decoration:none}
.woocommerce ul.products li.product .button{margin:0 14px 14px;display:inline-flex;align-items:center;justify-content:center;min-height:40px;border-radius:8px;background:var(--od-red);color:#fff;font-family:var(--od-disp);font-style:italic;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.woocommerce span.onsale{background:var(--od-red);border-radius:999px;font-family:var(--od-disp);font-style:italic;font-weight:700;letter-spacing:.08em;min-height:auto;min-width:auto;padding:4px 10px;line-height:1.4;top:12px;left:12px;right:auto;margin:0}
.woocommerce .button,.woocommerce button.button,.woocommerce input.button,.woocommerce a.button.alt{background:var(--od-red);color:#fff;border-radius:8px;font-family:var(--od-disp);font-style:italic;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.woocommerce .button:hover,.woocommerce a.button.alt:hover{background:var(--od-red-dark);color:#fff}
.woocommerce div.product .product_title{font-family:var(--od-disp);font-style:italic;font-weight:700;text-transform:uppercase;font-size:36px}
.woocommerce div.product p.price{font-family:var(--od-disp);font-weight:700;font-size:32px;color:var(--od-ink)}
.woocommerce-breadcrumb{font-size:13px;color:var(--od-soft)}
.woocommerce .woocommerce-message,.woocommerce .woocommerce-info{border-top-color:var(--od-red)}
.woocommerce .woocommerce-message::before,.woocommerce .woocommerce-info::before{color:var(--od-red)}
.od-page-title{font-size:44px;margin-bottom:18px}

@media(max-width:1100px){
  .od-grid6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .od-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .woocommerce ul.products{grid-template-columns:repeat(3,minmax(0,1fr))}
  .od-hero h1{font-size:58px}
}
@media(max-width:720px){
  :root{--od-pad:16px}
  .od-grid6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .woocommerce ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}
  .od-hero h1{font-size:46px}
  .od-sec h2{font-size:30px}
  .od-head__act{width:100%;justify-content:space-between}
}
@media(prefers-reduced-motion:reduce){
  .od-ticker__track,.od-reel__track,.od-brandreel .od-reel__track{animation:none}
}
