/* Storefront styling.
   Fonts are SELF-HOSTED with absolute src urls: the LiteSpeed CSS combiner eats an external
   Google-Fonts <link> and leaves only its dns-prefetch, and a relative url() inside the
   combined file resolves against /wp-content/litespeed/css/ and 404s. */

/* The @font-face rules are injected from PHP with ABSOLUTE urls so that they survive being
   combined into /wp-content/litespeed/css/<hash>.css. */

:root{
  --ink:#101A2B; --ink-2:#1B2739; --amber:#F2A33C; --amber-d:#D8842A;
  --cream:#FBF7F0; --paper:#FFFFFF; --muted:#5D6B7F; --line:#E6DFD4;
}

/* `html body` — Astra's own body rule loads later and would otherwise win */
html body{font-family:'SGSans',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
html body h1,html body h2,html body h3,html body .sg-display{
  font-family:'SGDisplay',Georgia,'Times New Roman',serif;font-weight:700;letter-spacing:-.015em;
  color:var(--ink)}

/* ---------- LiteSpeed JS-defer leaves the single-product image at opacity:0 ---------- */
.woocommerce-product-gallery{opacity:1!important}

/* ---------- Astra WooCommerce loop belts ----------------------------------------
   NOTE: no `.woocommerce` ancestor — the Astra shop loop has none, so a
   `.woocommerce ul.products` selector silently no-ops.                              */
ul.products li.product{display:flex!important;flex-direction:column!important;
  background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  padding:0 0 18px!important;transition:box-shadow .18s ease,transform .18s ease}
ul.products li.product:hover{box-shadow:0 14px 34px rgba(16,26,43,.10);transform:translateY(-2px)}
ul.products li.product img{margin:0 0 14px!important;border-radius:0;width:100%;height:auto;display:block}
ul.products li.product .woocommerce-loop-product__title{
  font-family:'SGSans',sans-serif!important;font-size:1rem!important;font-weight:600!important;
  padding:0 16px!important;margin:0 0 6px!important;color:var(--ink)}
/* Astra absolutely-positions the loop price + add-to-cart, so they overlap */
ul.products li.product .price,
ul.products li.product .button,
ul.products li.product .added_to_cart{
  position:static!important;float:none!important;transform:none!important;
  margin:0 16px!important;display:block!important}
ul.products li.product .price{color:var(--muted)!important;font-size:1.02rem!important;
  font-weight:600!important;margin-bottom:12px!important}
ul.products li.product .button{background:var(--ink)!important;color:var(--cream)!important;
  border-radius:9px!important;text-align:center;padding:11px 14px!important;font-weight:600!important;
  font-size:.9rem!important;border:0!important}
ul.products li.product .button:hover{background:var(--amber-d)!important;color:#fff!important}
/* Modern Astra also renders a SEPARATE absolutely-positioned on-card button that the
   price/button belt above does not touch */
.ast-on-card-button,.ast-card-action-tooltip,.ast-select-options-trigger{display:none!important}
.astra-shop-summary-wrap{display:flex;flex-direction:column}

/* ---------- header ---------- */
.site-header,.ast-primary-header-bar,.ast-below-header-bar{background:var(--ink)!important;
  border-bottom:0!important}
.site-header .ast-site-identity{padding:14px 0}
.main-header-menu > li > a,.ast-masthead-custom-menu-items a,
.main-header-menu .menu-link{color:var(--cream)!important;font-weight:500!important;
  font-size:.95rem!important;letter-spacing:.01em}
.main-header-menu > li > a:hover,.main-header-menu .menu-item:hover > a{color:var(--amber)!important}
.ast-header-break-point .main-header-bar{background:var(--ink)!important}
.custom-logo-link img{max-height:52px!important;width:auto!important}
/* mobile toggle must be visible on the dark bar */
.ast-mobile-menu-trigger-minimal,.ast-button-wrap .menu-toggle{color:var(--cream)!important;
  background:transparent!important;border:1px solid rgba(251,247,240,.35)!important;border-radius:8px}
/* The mobile dropdown panel is WHITE by default, so cream links render invisible.
   Paint the whole panel ink and keep the links cream. */
.ast-mobile-header-wrap .ast-mobile-header-content,
.ast-mobile-header-wrap .main-header-bar-navigation,
#ast-mobile-site-navigation,#ast-hf-mobile-menu,
.ast-mobile-popup-content,#ast-mobile-popup{background:var(--ink)!important}
#ast-hf-mobile-menu li,.ast-mobile-header-wrap .main-header-bar-navigation li{
  border-color:rgba(251,247,240,.14)!important}
/* Astra paints the mobile menu ANCHORS themselves white, so recolouring the panel alone
   still leaves cream-on-white text. The anchor background has to go transparent too. */
.ast-mobile-header-wrap .main-header-bar-navigation .menu-item > a,
#ast-mobile-site-navigation a,#ast-hf-mobile-menu a,
.ast-mobile-popup-content a{color:var(--cream)!important;background:transparent!important;
  background-color:transparent!important}
#ast-hf-mobile-menu .menu-item.current-menu-item > a,
#ast-mobile-site-navigation .current-menu-item > a{color:var(--amber)!important;
  background:transparent!important}

/* ---------- page shell ----------------------------------------------------
   The logo already carries the brand, so Astra's site-title text beside it is a
   duplicate wordmark; and hand-built pages supply their own headings, so the theme
   entry-header is a stray "Home"/"About Us" above the hero.                        */
.site-header .site-title,.site-header .site-description,
.ast-site-title-wrap .site-title,.ast-site-identity .site-title{display:none!important}
.page .entry-header,.page .ast-single-entry-banner,.page .entry-title{display:none!important}

/* full-bleed sections: widen the Astra container instead of a 100vw trick
   (100vw includes the scrollbar and causes horizontal overflow) */
.page .site-content > .ast-container,
.home .site-content > .ast-container{max-width:100%!important;padding-left:0!important;
  padding-right:0!important}
.page .ast-article-single,.home .ast-article-single{padding:0!important;border:0!important}
.page .entry-content > *:first-child{margin-top:0}

.sg-wrap{max-width:1180px;margin:0 auto;padding:0 22px}
/* Astra underlines content links; our buttons are not text links */
.sg-btn,.sg-btn-ghost,.sg-cat,.sg-foot a{text-decoration:none!important}
.sg-btn:hover,.sg-cat:hover{text-decoration:none!important}
.sg-eyebrow{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--amber-d);
  font-weight:700;margin:0 0 12px}

/* ---------- hero ---------- */
.sg-hero{position:relative;background:var(--ink);color:var(--cream);overflow:hidden}
.sg-hero .sg-wrap{position:relative;z-index:2;padding-top:96px;padding-bottom:104px;max-width:1180px}
.sg-hero-inner{max-width:620px}
.sg-hero h1{color:var(--cream)!important;font-size:clamp(2.3rem,5.1vw,3.9rem);line-height:1.05;
  margin:0 0 20px}
.sg-hero h1 em{font-style:normal;color:var(--amber)}
.sg-hero p{font-size:1.1rem;line-height:1.65;color:rgba(251,247,240,.84);margin:0 0 30px;max-width:52ch}
.sg-hero .sg-eyebrow{color:var(--amber)}
.sg-hero-media{position:absolute;inset:0;z-index:1;background-position:center right;
  background-size:cover;opacity:.44}
.sg-hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,var(--ink) 6%,rgba(16,26,43,.86) 44%,rgba(16,26,43,.35) 100%)}

.sg-btn{display:inline-block;background:var(--amber);color:#221503;font-weight:700;
  padding:15px 30px;border-radius:10px;text-decoration:none;font-size:1rem;
  transition:background .16s ease,transform .16s ease}
.sg-btn:hover{background:#ffb955;color:#221503;transform:translateY(-1px)}
.sg-btn-ghost{display:inline-block;margin-left:14px;color:var(--cream);text-decoration:none;
  font-weight:600;padding:15px 6px;border-bottom:2px solid rgba(251,247,240,.35)}
.sg-btn-ghost:hover{color:var(--amber);border-color:var(--amber)}

/* ---------- trust strip ---------- */
.sg-trust{background:var(--cream);border-bottom:1px solid var(--line)}
.sg-trust ul{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;list-style:none;margin:0;
  padding:26px 0}
.sg-trust li{display:flex;align-items:center;gap:11px;font-size:.92rem;color:var(--ink);
  font-weight:500;margin:0}
.sg-trust li::before{content:"";width:26px;height:26px;flex:0 0 26px;background-repeat:no-repeat;
  background-size:contain;background-position:center}
/* Class-based data-URI icons — KSES strips inline <svg> AND inline style from page CONTENT,
   so the icons live here instead.
   NOTE: in a STATIC stylesheet the colour hash MUST be written %23. A raw '#' inside a
   data: URI is parsed as the start of a fragment identifier and truncates the SVG, giving a
   silently blank icon. (The "leave the # raw" rule applies only to PHP-GENERATED css, where
   quote() does that encoding for you and pre-writing %23 would double-encode to %2523.) */
.sg-i-sun::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8842A' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M19.1 4.9l-1.4 1.4M6.3 17.7l-1.4 1.4'/></svg>")}
.sg-i-truck::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8842A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7h11v9H3z'/><path d='M14 10h4l3 3v3h-7z'/><circle cx='7' cy='18' r='1.6'/><circle cx='17.5' cy='18' r='1.6'/></svg>")}
.sg-i-shield::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8842A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l7 3v6c0 4.4-3 7.8-7 9-4-1.2-7-4.6-7-9V6z'/><path d='M9 12l2 2 4-4'/></svg>")}
.sg-i-leaf::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8842A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20c0-8 5-13 16-14 0 11-5 15-12 15H4z'/><path d='M9 15c2-3 5-5 8-6'/></svg>")}

/* ---------- sections ---------- */
.sg-section{padding:76px 0}
.sg-section-head{max-width:660px;margin:0 0 40px}
.sg-section-head h2{font-size:clamp(1.75rem,3.3vw,2.5rem);margin:0 0 14px;line-height:1.12}
.sg-section-head p{color:var(--muted);font-size:1.04rem;line-height:1.65;margin:0}
.sg-alt{background:var(--cream)}

.sg-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.sg-cat{position:relative;display:block;border-radius:15px;overflow:hidden;min-height:250px;
  background:var(--ink-2);text-decoration:none;background-size:cover;background-position:center}
.sg-cat::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,26,43,0) 34%,rgba(16,26,43,.87) 100%)}
.sg-cat span{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;color:var(--cream);
  font-weight:700;font-size:1.06rem;line-height:1.25}
.sg-cat:hover::after{background:linear-gradient(180deg,rgba(16,26,43,.1) 20%,rgba(16,26,43,.92) 100%)}

.sg-split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.sg-split img{width:100%;border-radius:16px;display:block}
.sg-split h2{margin-top:0}
.sg-split p{color:var(--muted);line-height:1.72;font-size:1.03rem}
.sg-steps{list-style:none;margin:26px 0 0;padding:0}
.sg-steps li{position:relative;padding-left:44px;margin:0 0 20px;line-height:1.6;color:var(--ink)}
.sg-steps li strong{display:block;margin-bottom:3px}
.sg-steps li span{color:var(--muted);font-size:.96rem}
.sg-steps li::before{counter-increment:sgstep;content:counter(sgstep);position:absolute;left:0;top:-1px;
  width:29px;height:29px;border-radius:50%;background:var(--amber);color:#221503;font-weight:800;
  font-size:.85rem;display:flex;align-items:center;justify-content:center}
.sg-steps{counter-reset:sgstep}

/* ---------- footer ---------- */
.sg-foot{background:var(--ink);color:rgba(251,247,240,.72);padding:52px 0 30px}
.sg-foot a{color:rgba(251,247,240,.72);text-decoration:none}
.sg-foot a:hover{color:var(--amber)}
.sg-foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:34px}
.sg-foot h4{color:var(--cream);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 14px;font-family:'SGSans',sans-serif;font-weight:700}
.sg-foot ul{list-style:none;margin:0;padding:0}
.sg-foot li{margin:0 0 9px;font-size:.94rem}
.sg-foot-bottom{border-top:1px solid rgba(251,247,240,.14);margin-top:34px;padding-top:20px;
  font-size:.85rem;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* ---------- shop / archive ---------- */
.woocommerce-products-header{padding-top:34px}
.woocommerce-products-header__title{font-size:2.2rem!important}
.term-description,.woocommerce-products-header p{color:var(--muted)}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .sg-cats{grid-template-columns:repeat(2,1fr)}
  .sg-split{grid-template-columns:1fr;gap:34px}
  .sg-trust ul{grid-template-columns:repeat(2,1fr)}
  .sg-foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .sg-hero .sg-wrap{padding-top:64px;padding-bottom:70px}
  .sg-section{padding:52px 0}
  .sg-cats{grid-template-columns:1fr}
  .sg-trust ul{grid-template-columns:1fr;padding:20px 0}
  .sg-foot-grid{grid-template-columns:1fr}
  .sg-btn,.sg-btn-ghost{display:block;text-align:center;margin:0 0 12px}
  .sg-btn-ghost{margin-left:0}
}