/* ==========================================================================
   Style Avenue — minimal / neutral editorial fashion theme (child of Storefront)
   CJ Dropshipping-aware storefront styling
   ========================================================================== */

:root{
  --sa-white:        #FFFFFF;
  --sa-paper:        #FAF9F7;
  --sa-beige:        #EDE7DC;
  --sa-beige-dark:   #DCD3C0;
  --sa-black:        #111111;
  --sa-black-70:     rgba(17,17,17,.7);
  --sa-black-50:     rgba(17,17,17,.5);
  --sa-gray:         #6F6B66;
  --sa-border:       #E3E0DA;
  --sa-radius:       0px;
  --sa-radius-sm:    0px;
  --sa-shadow:       none;
  --sa-font-head:    'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
  --sa-font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
}

/* -------------------------------------------------------------------------
   Layout
   ---------------------------------------------------------------------- */
.col-full{
  max-width: 1300px;
}

/* -------------------------------------------------------------------------
   Base / typography
   ---------------------------------------------------------------------- */
body{
  background: var(--sa-white);
  color: var(--sa-black);
  font-family: var(--sa-font-body);
  font-size: 16px;
  line-height: 1.6;
}

h1,h2,h3,h4,h5,h6,
.site-title, .sa-font-head{
  font-family: var(--sa-font-head);
  font-weight: 400;
  color: var(--sa-black);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

a{ color: var(--sa-black); }
a:hover{ color: var(--sa-gray); }

/* -------------------------------------------------------------------------
   Announcement bar
   ---------------------------------------------------------------------- */
.sa-announcement-bar{
  background: var(--sa-black);
  color: var(--sa-white);
  text-align: center;
  font-family: var(--sa-font-body);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 10px 16px;
}
.sa-announcement-bar span{ opacity: .92; }

/* -------------------------------------------------------------------------
   Header / nav
   ---------------------------------------------------------------------- */
#masthead.site-header{
  background: var(--sa-white);
  border-bottom: 1px solid var(--sa-border);
  box-shadow: none;
  padding: 0;
}
/* Single row: nav (left) — logo (true center) — search + bag (right).
   See sa_restructure_header() in functions.php — it removes Storefront's
   second nav wrapper so #site-navigation, .site-branding and
   .sa-header-actions all end up as siblings inside the one `.col-full`.

   A 3-column grid (not flex) is what actually centers the logo: nav (340px)
   and the actions group (169px) are different widths, so with flex's
   `justify-content:space-between` + a `flex:1 1 auto` branding item, the
   logo only centers within the *leftover* space between them — which isn't
   symmetric, so it visibly drifts toward the (narrower) actions side. Grid's
   middle `auto` column is centered against the row as a whole regardless of
   how wide the two `1fr` side columns' content is. */
#masthead > .col-full{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap: 14px 24px;
  padding: 20px 0;
}
/* Storefront's legacy float/percentage grid CSS (.site-branding, .main-navigation
   ship with width:73.9%, calc(100% - 120px), etc. from its old 2-row layout)
   fights the grid layout above and forces everything onto its own line —
   neutralize it so track sizing is driven by actual content width instead. */
#masthead > .col-full > *{
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  clear: none !important;
}
/* Explicit column/row placement, not `order` — with `order` alone the two
   absolutely-positioned (but still counted) skip-links plus these 3 items
   made this grid's auto-placement land all 3 in a second implicit row
   instead of together on row 1 (reliably reproducible; root cause unclear,
   but explicit placement sidesteps it entirely and is more robust anyway). */
#masthead #site-navigation{ grid-column: 1; grid-row: 1; justify-self: start; }
#masthead .site-branding{ grid-column: 2; grid-row: 1; text-align: center; justify-self: center; }
#masthead .sa-header-actions{
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display:flex;
  align-items:center;
  flex-wrap: nowrap;
  gap: 22px;
  white-space: nowrap;
}
.site-branding .site-title a{
  font-family: var(--sa-font-head);
  font-size: 22px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sa-black);
}
.site-branding .site-description{
  display:none;
}
.main-navigation ul{ display:flex; gap: 26px; list-style:none; margin:0; padding:0; }
.main-navigation ul li a{
  font-family: var(--sa-font-body);
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sa-black);
  font-weight: 500;
}
.main-navigation ul li a:hover{ color: var(--sa-gray); }
.main-navigation ul ul{ display:none; }

/* Search field, restyled to read as a plain "Search" label rather than a boxed input.
   Storefront's legacy grid CSS ships `.site-search{width:21.7%;float:right}` from
   its old layout — that's not neutralized by the `#masthead > .col-full > *` reset
   above because .site-search sits one level deeper (inside .sa-header-actions), so
   it was clipping the box to ~37px and letting the 92px input overflow into the
   Bag link next to it. Override it directly here. */
.sa-header-actions .site-search{
  order:1;
  flex: 0 0 auto;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}
.sa-header-actions .widget_product_search{ margin:0; }
.sa-header-actions .woocommerce-product-search{ display:flex; align-items:center; margin:0; white-space:nowrap; }
.sa-header-actions .woocommerce-product-search .search-field{
  width: 92px;
  border: none;
  background: transparent;
  padding: 4px 0;
  font-family: var(--sa-font-body);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sa-black);
  transition: width .2s ease;
}
.sa-header-actions .woocommerce-product-search .search-field::placeholder{
  color: var(--sa-black);
  text-transform: uppercase;
  opacity: 1;
}
.sa-header-actions .woocommerce-product-search .search-field:focus{ width: 160px; outline: none; }
/* Visually hidden, not display:none — a display:none submit button can stop
   some browsers from treating Enter-in-the-input as an implicit form submit. */
.sa-header-actions .woocommerce-product-search button[type="submit"]{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Cart / "Bag (N)" link */
.sa-header-actions .site-header-cart{ order:2; flex: 0 0 auto; list-style:none; margin:0; padding:0; position:relative; white-space:nowrap; }
.sa-header-actions .site-header-cart > li{ display:inline-block; }
.sa-header-actions .site-header-cart > li:last-child{ display:none; } /* hide the WC_Widget_Cart hover dropdown markup, keep the plain link */
.sa-header-actions a.cart-contents{
  display:inline-block;
  white-space: nowrap;
  font-family: var(--sa-font-body);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sa-black);
}
/* Storefront renders a Font Awesome basket glyph via ::after on the cart link —
   the minimal reference design uses plain "Bag (N)" text with no icon. */
.sa-header-actions a.cart-contents::after{
  content: none !important;
  display: none !important;
}
.sa-header-actions a.cart-contents:hover{ color: var(--sa-gray); }

/* -------------------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------------- */
.sa-btn,
a.button, button.button, input.button,
.woocommerce #respond input#submit,
.woocommerce a.button, .woocommerce button.button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--sa-black);
  color: var(--sa-white) !important;
  border: 1px solid var(--sa-black);
  border-radius: var(--sa-radius);
  padding: 14px 32px;
  font-family: var(--sa-font-body);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  transition: background .2s ease, color .2s ease;
}
.sa-btn:hover, a.button:hover, button.button:hover, input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover{
  background: var(--sa-white);
  color: var(--sa-black) !important;
}
.sa-btn-outline{
  background: transparent;
  color: var(--sa-white) !important;
  border: 1px solid var(--sa-white);
}
.sa-btn-outline:hover{
  background: var(--sa-white);
  color: var(--sa-black) !important;
}
.sa-btn-outline-dark{
  background: transparent;
  color: var(--sa-black) !important;
  border: 1px solid var(--sa-black);
}
.sa-btn-outline-dark:hover{
  background: var(--sa-black);
  color: var(--sa-white) !important;
}

/* -------------------------------------------------------------------------
   Hero
   ---------------------------------------------------------------------- */
.sa-hero{
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 620px;
  background: linear-gradient(180deg, #cfcac3, #b9b4ac 55%, #a7a29a);
  overflow: hidden;
}
.sa-hero img.sa-hero-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  object-position: center center;
}
.sa-hero::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(17,17,17,.55) 0%, rgba(17,17,17,0) 45%);
}
.sa-hero-inner{
  position: relative;
  z-index: 1;
  max-width: 640px;
  padding: 60px 6vw 56px;
}
.sa-hero-eyebrow{
  display:block;
  color: var(--sa-white);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 18px;
  opacity:.9;
}
.sa-hero h1{
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 0.98;
  color: var(--sa-white);
  margin: 0 0 26px;
}
.sa-hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* -------------------------------------------------------------------------
   Category strip (text links, not tiles)
   ---------------------------------------------------------------------- */
.sa-category-strip{
  display:flex;
  border-top: 1px solid var(--sa-border);
  border-bottom: 1px solid var(--sa-border);
}
.sa-category-strip a{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 22px 6vw;
  font-family: var(--sa-font-body);
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sa-black);
  border-right: 1px solid var(--sa-border);
}
.sa-category-strip a:last-child{ border-right:none; }
.sa-category-strip a span.sa-arrow{ opacity:.6; transition: transform .2s ease; }
.sa-category-strip a:hover span.sa-arrow{ transform: translateX(4px); }
.sa-category-strip a:hover{ color: var(--sa-gray); }

/* -------------------------------------------------------------------------
   Section headings
   ---------------------------------------------------------------------- */
.sa-section{ padding: 64px 0; }
.sa-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom: 32px;
}
.sa-section-head h2{
  font-size: 30px;
  margin: 0;
}
.sa-view-all{
  font-family: var(--sa-font-body);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sa-black);
  border-bottom: 1px solid var(--sa-black);
  padding-bottom: 2px;
}

/* -------------------------------------------------------------------------
   PLP toolbar — breadcrumb, archive title, sort/result-count bar, pagination.
   These were unstyled (raw browser <select>, default WooCommerce spacing)
   and clashed badly against the rest of the custom design system.
   ---------------------------------------------------------------------- */
.storefront-breadcrumb{
  padding: 18px 0;
  border-bottom: 1px solid var(--sa-border);
}
.storefront-breadcrumb .col-full{ padding-top:0; padding-bottom:0; }
.woocommerce-breadcrumb{
  font-family: var(--sa-font-body);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sa-gray);
}
.woocommerce-breadcrumb a{ color: var(--sa-gray); }
.woocommerce-breadcrumb a:hover{ color: var(--sa-black); }

.woocommerce-products-header{ padding: 48px 0 0; }
.woocommerce-products-header__title{
  font-size: 40px;
  margin: 0;
}
.term-description{
  max-width: 560px;
  margin-top: 14px;
  color: var(--sa-gray);
  font-size: 14px;
}

.storefront-sorting{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap: 14px;
  padding: 28px 0 20px;
  margin: 0 0 8px !important;
  border-bottom: 1px solid var(--sa-border);
}
.storefront-sorting .woocommerce-notices-wrapper:empty{ display:none; }
.woocommerce-ordering{ margin:0 !important; order:2; }
.woocommerce-ordering select.orderby{
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--sa-black);
  border-radius: 0;
  background: var(--sa-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23111111' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 14px center;
  padding: 10px 34px 10px 16px;
  font-family: var(--sa-font-body);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sa-black);
  cursor: pointer;
}
.woocommerce-ordering select.orderby:focus{ outline: 1px solid var(--sa-black); }
.woocommerce-result-count{
  order:1;
  margin:0 !important;
  font-family: var(--sa-font-body);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--sa-gray);
}

.woocommerce-pagination{ margin: 40px 0 0; }
.woocommerce-pagination ul.page-numbers{
  display:flex;
  gap: 6px;
  list-style:none;
  margin:0; padding:0;
  border: none !important;
}
.woocommerce-pagination ul.page-numbers li{ border:none !important; }
.woocommerce-pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  font-family: var(--sa-font-body);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--sa-black);
  border: 1px solid var(--sa-border);
}
.woocommerce-pagination .page-numbers.current{
  background: var(--sa-black);
  color: var(--sa-white);
  border-color: var(--sa-black);
}
.woocommerce-pagination .page-numbers:hover:not(.current){ border-color: var(--sa-black); }

/* -------------------------------------------------------------------------
   Product grid / cards (WooCommerce loop)
   ---------------------------------------------------------------------- */
ul.products{
  display:grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 !important;
}
/* WooCommerce/Storefront add a clearfix ::before/::after (display:table) for the
   old float-based grid; under display:grid those pseudo-elements become phantom
   grid items and shift every real item over by one cell, so drop them. */
ul.products::before,
ul.products::after{
  content: none !important;
  display: none !important;
}
ul.products li.product{
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  position: relative;
}
/* Storefront's WooCommerce stylesheet (loaded AFTER this file) ships
   `.site-main ul.products.columns-3 li.product{width:29.4118%;float:left;
   margin-right:5.88235%}` — its old 3-column float grid. That selector has
   more classes than the plain `ul.products li.product` above, so it wins on
   specificity regardless of load order, shrinking every card to ~30% of its
   grid COLUMN (not the row) since percentage widths on a grid item resolve
   against its own column track. It went unnoticed because every badge was
   left-anchored (top:12px;left:12px), which still lines up with the card's
   left edge either way — a right-anchored badge (the .onsale "Sale!" flash)
   exposed it sitting ~200px too far left. Match their specificity and force
   the fill back to the full column. */
.site-main ul.products.columns-3 li.product,
.site-main ul.products li.product{
  width: 100% !important;
  float: none !important;
  margin-right: 0 !important;
}
ul.products li.product a img{
  display: block;
  width: 100%;
  border-radius: 0;
  aspect-ratio: 4/5;
  object-fit: cover;
  background: var(--sa-paper);
}
ul.products li.product .woocommerce-loop-product__title{
  font-family: var(--sa-font-body);
  text-transform: none;
  font-weight: 500;
  letter-spacing: 0;
  font-size: 14px;
  margin: 14px 0 4px;
  color: var(--sa-black);
}
ul.products li.product .price{
  padding: 0;
  color: var(--sa-gray);
  font-family: var(--sa-font-body);
  font-weight: 400;
  font-size: 14px;
}
ul.products li.product .button{
  display:none;
}
ul.products li.product .price ins{ text-decoration:none; color: var(--sa-black); }
ul.products li.product .price del{ color: var(--sa-gray); opacity:.6; }

/* Product meta row: title left, price right */
ul.products li.product a{
  display:block;
}

/* CJ Dropshipping badges — solid rectangular tags to match the minimal system.
   Both badges are pinned to the top-left, stacked vertically, so their combined
   width never has to fit across the card — safe at any grid/column width,
   including a long word like "Bestseller" next to "Ships Worldwide". */
.cj-ship-badge{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display:inline-flex;
  align-items:center;
  background: rgba(255,255,255,.92);
  color: var(--sa-black);
  border: 1px solid var(--sa-black);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--sa-font-body);
  padding: 5px 10px;
  white-space: nowrap;
}
.cj-new-badge{
  position:absolute;
  top:12px; left:12px;
  z-index:2;
  background: var(--sa-black);
  color: var(--sa-white);
  font-size: 10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight: 600;
  font-family: var(--sa-font-body);
  padding: 5px 10px;
  white-space: nowrap;
}
/* When a NEW/BESTSELLER badge is present, push the ships-worldwide badge below it. */
.cj-new-badge + .cj-ship-badge{
  top: 40px;
}

/* WooCommerce's own "Sale!" flash — restyled to match the badge system above
   and repositioned (it renders after the title in the DOM, but li.product is
   position:relative so absolute placement still overlays the image) into the
   free top-right corner, since NEW/BESTSELLER + Ships Worldwide occupy the left.
   WooCommerce core ships `.woocommerce ul.products li.product .onsale{top:0;
   right:0;left:auto;margin:-.5em -.5em 0 0}` which out-specifies a plain
   `ul.products li.product .onsale` rule (4 classes vs 3) — match its selector
   and use !important on the geometry so ours reliably wins. */
.woocommerce ul.products li.product .onsale{
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 2;
  margin: 0 !important;
  min-height: 0;
  min-width: 0;
  line-height: normal;
  background: var(--sa-black);
  color: var(--sa-white);
  border: none;
  border-radius: 0 !important;
  font-family: var(--sa-font-body);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 5px 10px;
}

/* Single product: CJ sourcing / shipping info box */
.cj-shipping-info{
  margin: 24px 0;
  padding: 18px 20px;
  background: var(--sa-paper);
  border: 1px solid var(--sa-border);
  border-radius: 0;
  font-size: 13.5px;
  color: var(--sa-black);
}
.cj-shipping-info strong{
  display:block;
  margin-bottom:8px;
  font-family: var(--sa-font-body);
  font-size: 11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
}
.cj-shipping-info .cj-row{ display:flex; gap:8px; align-items:flex-start; margin-top:7px; color: var(--sa-black-70); }
.cj-source-note{
  font-size: 11.5px;
  color: var(--sa-gray);
  margin-top: 10px;
}

/* -------------------------------------------------------------------------
   Product tabs (Description / Additional information) + rich CJ content.

   Storefront ships these as a narrow floated sidebar list ("ul.tabs{width:
   29.4%;float:left}") with panels floated alongside — a leftover from its
   2-column default layout. CJ Dropshipping listings paste in long, heavily
   art-directed descriptions (stacked full-bleed marketing images, spec
   lists, infographics) that need the FULL content width to read well, so
   this converts the tabs into a simple horizontal strip above a full-width
   panel instead, and gives that panel's content (particularly images, which
   arrive with no spacing of their own) real typography and breathing room.
   ---------------------------------------------------------------------- */
.woocommerce-tabs{
  clear: both;
  width: auto;
  float: none;
  margin-top: 56px;
  padding: 0;
}
.woocommerce-tabs ul.tabs{
  display: flex;
  gap: 36px;
  list-style: none;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0;
  border-top: none;
  border-bottom: 1px solid var(--sa-border);
}
.woocommerce-tabs ul.tabs::before{ content: none; }
.woocommerce-tabs ul.tabs li{
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}
.woocommerce-tabs ul.tabs li a{
  display: block;
  padding: 0 0 16px;
  font-family: var(--sa-font-body);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sa-gray);
}
.woocommerce-tabs ul.tabs li.active{
  border-bottom: 2px solid var(--sa-black);
  margin-bottom: -1px;
}
.woocommerce-tabs ul.tabs li.active a{ color: var(--sa-black); }
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after{ content: none !important; }

.woocommerce-tabs .woocommerce-Tabs-panel{
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 32px 0 0;
  max-width: 760px;
  font-family: var(--sa-font-body);
  font-size: 15px;
  line-height: 1.75;
  color: var(--sa-black-70);
}
.woocommerce-Tabs-panel h2{ display:none; } /* redundant with the tab label above it */
.woocommerce-Tabs-panel h3{
  font-size: 15px;
  letter-spacing: .06em;
  margin: 2em 0 .8em;
}
.woocommerce-Tabs-panel h3:first-child{ margin-top: 0; }
.woocommerce-Tabs-panel p{ margin: 0 0 1.2em; }
.woocommerce-Tabs-panel ul{
  list-style: none;
  margin: 0 0 1.5em;
  padding: 0;
}
.woocommerce-Tabs-panel ul li{
  padding: 10px 0;
  border-bottom: 1px solid var(--sa-border);
  font-size: 14px;
}
.woocommerce-Tabs-panel ul li strong{ color: var(--sa-black); font-weight: 600; }
/* Full-bleed marketing/lifestyle images pasted in from the CJ listing —
   stack them with real spacing instead of touching edge-to-edge, and cap
   the width so a giant supplier image doesn't blow out the text column. */
.woocommerce-Tabs-panel img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 28px 0;
  border-radius: 0;
}
.woocommerce-Tabs-panel > img:first-child{ margin-top: 0; }

/* Additional information tab — attribute table */
table.shop_attributes{
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 14px;
}
table.shop_attributes th,
table.shop_attributes td{
  padding: 12px 0;
  border-bottom: 1px solid var(--sa-border);
  text-align: left;
  font-weight: 400;
}
table.shop_attributes th{
  width: 200px;
  font-family: var(--sa-font-body);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sa-gray);
}
table.shop_attributes td p{ margin: 0; }

/* Variation form (color/size dropdowns on CJ-imported variable products) */
.variations{ width: 100%; margin: 20px 0; border-collapse: collapse; }
.variations tr{ display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.variations th.label{
  font-family: var(--sa-font-body);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sa-gray);
  font-weight: 600;
  padding: 0;
  width: auto;
}
.variations td.value{ padding: 0; flex: 1; }
.variations select{
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  max-width: 280px;
  border: 1px solid var(--sa-black);
  border-radius: 0;
  background: var(--sa-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23111111' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 14px center;
  padding: 12px 34px 12px 14px;
  font-family: var(--sa-font-body);
  font-size: 13px;
}
.woocommerce-variation-price .price{ color: var(--sa-black); }
.woocommerce-variation-add-to-cart{ margin-top: 20px; }
.reset_variations{
  display: inline-block;
  margin-left: 10px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sa-gray);
}

/* -------------------------------------------------------------------------
   Campaign / editorial split section
   ---------------------------------------------------------------------- */
.sa-campaign{
  background: var(--sa-beige);
  display:flex;
  align-items:stretch;
  flex-wrap:wrap;
}
.sa-campaign-media{
  flex: 1 1 480px;
  min-height: 420px;
}
.sa-campaign-media img{
  width:100%; height:100%;
  min-height:420px;
  object-fit: cover;
  display:block;
}
.sa-campaign-copy{
  flex: 1 1 380px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: 60px 6vw;
}
.sa-campaign-copy .sa-eyebrow{
  font-size: 11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: var(--sa-gray);
  margin-bottom: 16px;
  display:block;
}
.sa-campaign-copy h2{
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  margin: 0 0 18px;
}
.sa-campaign-copy p{
  font-size: 15px;
  color: var(--sa-black-70);
  max-width: 420px;
  margin-bottom: 26px;
}

.sa-eyebrow{
  display:block;
  font-family: var(--sa-font-body);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sa-gray);
  margin-bottom: 8px;
}

/* -------------------------------------------------------------------------
   Newsletter
   ---------------------------------------------------------------------- */
.sa-newsletter{
  background: var(--sa-white);
  color: var(--sa-black);
  padding: 72px 6vw;
  text-align:center;
  border-top: 1px solid var(--sa-border);
}
.sa-newsletter h2{ margin-bottom:10px; }
.sa-newsletter p{ color: var(--sa-gray); margin-bottom: 26px; font-size: 14px; }
.sa-newsletter-form{
  display:flex;
  max-width: 420px;
  margin: 0 auto;
  gap: 0;
  flex-wrap:wrap;
  justify-content:center;
  border: 1px solid var(--sa-black);
}
.sa-newsletter-form input[type=email]{
  flex:1;
  min-width: 220px;
  padding: 14px 18px;
  border: none;
  background: transparent;
  color: var(--sa-black);
  font-family: var(--sa-font-body);
  font-size: 13px;
}
.sa-newsletter-form input[type=email]::placeholder{ color: var(--sa-gray); }
.sa-newsletter-form .sa-btn{ border: none; border-left: 1px solid var(--sa-black); }

/* -------------------------------------------------------------------------
   Footer
   ---------------------------------------------------------------------- */
#colophon.site-footer{
  background: var(--sa-black);
  border-top: none;
  color: var(--sa-white);
  padding-top: 50px;
}
#colophon .sa-footer-brand-block{
  display:flex;
  flex-direction: column;
  align-items:center;
  text-align:center;
}
#colophon .sa-footer-brand{
  font-family: var(--sa-font-head);
  font-size: 4em;
  letter-spacing:.04em;
  text-transform:uppercase;
  color: var(--sa-white);
  margin-bottom: 12px;
  display:block;
}
#colophon .sa-footer-tagline{
  display:block;
  color: rgba(255,255,255,.55);
  font-size: 14px;
}
#colophon .footer-widgets{
  display:flex;
  flex-wrap:wrap;
  gap: 40px 32px;
}
#colophon .footer-widgets .block{ flex: 1 1 180px; }
#colophon .widget-title{
  font-family: var(--sa-font-body);
  font-size: 17px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 14px;
}
#colophon .widget ul{ list-style:none; margin:0; padding:0; }
#colophon .widget ul li{ margin-bottom: 10px; }
#colophon a{ color: rgba(255,255,255,.82); font-size: 13.5px; }
#colophon a:hover{ color: var(--sa-white); }
#colophon .site-info{
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.5);
  font-size: 13px;
  margin-top: 40px;
  padding: 20px 0;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
}

/* -------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */
@media (max-width: 900px){
  ul.products{ grid-template-columns: repeat(2,1fr) !important; }
  .sa-category-strip{ flex-wrap: wrap; }
  .sa-category-strip a{ flex: 1 1 50%; border-bottom: 1px solid var(--sa-border); }
}
@media (max-width: 600px){
  .sa-hero{ min-height: 480px; }
  ul.products{ grid-template-columns: 1fr !important; }
  .sa-section{ padding: 44px 0; }
  .sa-category-strip a{ flex: 1 1 100%; }
}