/* ==========================================================================
   Luxe Lane — warm boho fashion theme (child of Storefront)
   CJ Dropshipping-aware storefront styling.
   The "Warm boho" block at the end of this file overrides the older
   minimal rules above; the tokens here feed both.
   ========================================================================== */

:root{
  --sa-white:        #FFFAF3;  /* warm white: cards, inputs, text on dark */
  --sa-cream:        #F7F0E6;  /* page background */
  --sa-paper:        #EFE3D3;  /* sand panels */
  --sa-beige:        #EFE3D3;
  --sa-beige-dark:   #E9D3BD;
  --sa-black:        #3B2A21;  /* espresso: text, dark fills, footer */
  --sa-black-70:     rgba(59,42,33,.78);
  --sa-black-50:     rgba(59,42,33,.55);
  --sa-gray:         #6B5546;
  --sa-border:       #E6D8C6;
  --sa-terracotta:   #A4553B;
  --sa-terracotta-dk:#8A4630;
  --sa-sage:         #DDE2D0;
  --sa-sage-dk:      #4F5A42;
  --sa-radius:       999px;
  --sa-radius-sm:    16px;
  --sa-shadow:       none;
  --sa-font-head:    'Fraunces', Georgia, serif;
  --sa-font-body:    'DM Sans', 'Helvetica Neue', Arial, sans-serif;
}

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

/* -------------------------------------------------------------------------
   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); }
a:focus{ outline: none; }

/* -------------------------------------------------------------------------
   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;
  margin:0 auto;
}
.sa-announcement-bar span{ opacity: .92; }

/* -------------------------------------------------------------------------
   Header / nav
   ---------------------------------------------------------------------- */
#masthead.site-header{
  background: var(--sa-black);
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: none;
  padding: 0;
  margin-bottom:0px;
    border-top: solid 1px #3b3b3b;
}
/* 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;
  padding: 30px 40px 20px;
}
.storefront-container, .sa-category-tiles {padding: 0 3.617924em;}
.sa-campaign {
    margin: 0 3.617924em;
}
/* 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-white);
}
.site-branding .site-description{
  display:none;
}
/* Storefront's own button styling gives .menu-toggle a solid white
   background by default — invisible against the black header until
   overridden, and it was rendering as a blank white box. The theme already
   ships working hamburger bars (::before/::after/span::before), so once the
   background is fixed those become the icon; the "Menu" text stays for
   screen readers only, visually hidden instead of shown next to the icon. */
#masthead .menu-toggle{
  background: transparent;
  color: var(--sa-white);
}
#masthead .menu-toggle::before,
#masthead .menu-toggle::after,
#masthead .menu-toggle span::before{ background-color: var(--sa-white) !important; }
#masthead .menu-toggle span{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.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-white);
  font-weight: 500;
}
.main-navigation ul li a:hover{ color: rgba(255,255,255,.65); }
/* Phone menu: full-width panel under the header bar. */
@media (max-width: 767px){
  #masthead{ position: relative; }
  .main-navigation .handheld-navigation{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    background: var(--sa-white);
    border-bottom: 1px solid var(--sa-border);
    box-shadow: 0 12px 24px rgba(17,17,17,.08);
  }
  .main-navigation .handheld-navigation ul{ display: block; }
  .main-navigation .handheld-navigation ul li{ position: relative; border-bottom: 1px solid var(--sa-border); }
  .main-navigation .handheld-navigation ul li:last-child{ border-bottom: 0; }
  .main-navigation .handheld-navigation ul li a{ display: block; padding: 14px 0; color: var(--sa-black); }
  .main-navigation .handheld-navigation ul ul.sub-menu{ padding-left: 16px; background: transparent !important; }
  .main-navigation .handheld-navigation li.menu-item-has-children > a::after{
    content: "+";
    float: right;
    font-family: inherit;
    font-size: 18px;
    line-height: 1;
  }
  .main-navigation .handheld-navigation li.sa-open > a::after{ content: "\2212"; }
  .main-navigation .handheld-navigation li.sa-open > ul.sub-menu{
    visibility: visible;
    opacity: 1;
    max-height: 600px;
    position: static;
  }
  .main-navigation .handheld-navigation ul ul.sub-menu li a{ padding: 11px 0; font-weight: 400; }
}

/* "Categories" dropdown (desktop). Sub-menus stay closed until hover/keyboard
   focus; on mobile Storefront's own toggle button + .toggled-on handle it. */
@media (min-width: 768px){
  .main-navigation ul > li > a{ white-space: nowrap; }
  .main-navigation > .primary-navigation > ul{ gap: 22px; }
  .main-navigation ul li.menu-item-has-children{ position: relative; }
  /* Flex row instead of relying on the chevron sitting inline after the text
     node — at some nav widths that pseudo-element was wrapping onto its own
     line below "Categories" instead of staying beside it. Flex guarantees
     text + chevron stay on one row and are centered together regardless. */
  .main-navigation ul li.menu-item-has-children > a{
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }
  .storefront-full-width-content.woocommerce-cart .entry-header, .storefront-full-width-content.woocommerce-checkout .entry-header, .storefront-full-width-content.woocommerce-account .entry-header, .storefront-full-width-content .woocommerce-products-header {
        padding: 3.9968353111em 0!important;
    }
      .storefront-breadcrumb {
        margin: 0 2.706326em!important;
    }
      .col-full {padding: 0px;!important}

  .main-navigation ul.menu > li.menu-item-has-children > a::after, .main-navigation ul.menu > li.page_item_has_children > a::after, .main-navigation ul.nav-menu > li.menu-item-has-children > a::after, .main-navigation ul.nav-menu > li.page_item_has_children > a::after {
        content: "";
    }
  .main-navigation ul li.menu-item-has-children > a::after{
    content: "";
    flex: 0 0 auto;
    display: block;
    width: 6px; height: 6px;
    margin-top: -3px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
  }
  .main-navigation ul ul.sub-menu{
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 100%;
    left: -18px;
    z-index: 50;
    min-width: 210px;
    padding: 10px 0;
    background: var(--sa-white) !important; /* Storefront paints sub-menus #efefef */
    border: 1px solid var(--sa-border);
    box-shadow: 0 12px 28px rgba(17,17,17,.08);
    visibility: hidden;
    opacity: 0;
    max-height: none;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .main-navigation ul li:hover > ul.sub-menu,
  .main-navigation ul li:focus-within > ul.sub-menu,
  .main-navigation ul li.focus > ul.sub-menu{
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }
  .main-navigation ul ul.sub-menu li{ width: 100%; }
}
@media (min-width: 768px) and (max-width: 1100px){
  .main-navigation > .primary-navigation > ul{ gap: 14px; }
  .main-navigation ul > li > a{ font-size: 11.5px; letter-spacing: .06em; }
}
@media (min-width: 768px){
  .main-navigation ul ul.sub-menu li a{
    display: block;
    padding: 10px 20px;
    white-space: nowrap;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .08em;
    color: var(--sa-black);
  }
  .main-navigation ul ul.sub-menu li a:hover{ background: var(--sa-paper); color: var(--sa-black); }
}

/* 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-white);
  transition: width .2s ease;
}
.sa-header-actions .woocommerce-product-search .search-field::placeholder{
  color: var(--sa-white);
  text-transform: uppercase;
  opacity: .8;
}
.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;
}

/* Account / Sign In link */
.sa-header-actions .sa-account-link{
  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-white);
  order: 0;
}
.sa-header-actions .sa-account-link:hover{ color: rgba(255,255,255,.65); }
.sa-header-actions .sa-account-link--icon{ display: flex; align-items: center; color: var(--sa-white); }
.sa-header-actions .sa-account-link--icon svg{ display: block; }
.sa-header-actions .sa-account-link--icon:hover{ color: rgba(255,255,255,.65); }

/* 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:flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--sa-font-body);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sa-white);
}
/* 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: rgba(255,255,255,.65); }
/* "Bag (N)" as text on wider screens; icon-only below 480px, where the
   header's nav + logo + actions were crowding the text version out. */
.sa-header-actions .sa-cart-icon{ display: none; }
@media (max-width: 480px){
  .sa-header-actions .sa-cart-text{ display: none; }
  .sa-header-actions .sa-cart-icon{ display: block; }
}

/* -------------------------------------------------------------------------
   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: center;
  min-height: 620px;
  background: linear-gradient(180deg, #cfcac3, #b9b4ac 55%, #a7a29a);
  overflow: hidden;
  /* .sa-hero renders inside Storefront's #content > .col-full wrapper
     (opened in header.php, closed in footer.php — front-page.php can't
     escape it without breaking that tag balance), so without this it
     would inherit .col-full's 1300px cap instead of being full-bleed.
     Standard breakout: span the full viewport regardless of the
     constrained ancestor; .sa-hero-container inside stays centered at
     1300px via its own margin. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.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-container{
  width: 100%;
}
.sa-hero-inner{
  position: relative;
  z-index: 1;
  max-width: 640px;
  padding: 60px 6vw 56px;
}
.sa-hero-eyebrow{
  display:block;
  color: #000;
  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: #000;
  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--tight{ padding: 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;
}
.main-navigation ul li a:hover, .main-navigation ul li:hover > a, .site-title a:focus {
    color: rgba(255,255,255,.65);
    border: none;
}

/* -------------------------------------------------------------------------
   Shop by Category tiles — edge-to-edge like the product grid, image with a
   bottom gradient + uppercase label overlaid rather than a caption underneath.
   ---------------------------------------------------------------------- */
.sa-category-tiles{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-top: 32px;
}
.sa-category-tiles--4{ grid-template-columns: repeat(4, 1fr); }
.sa-category-tile{
  position: relative;
  display: block;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--sa-paper);
}
.sa-category-tile img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.sa-category-tile:hover img{ transform: scale(1.06); }
.sa-category-tile::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(17,17,17,.55) 0%, rgba(17,17,17,0) 45%);
}
.sa-category-tile__label{
  position: absolute;
  left: 18px;
  bottom: 16px;
  z-index: 1;
  color: var(--sa-white);
  font-family: var(--sa-font-head);
  font-size: 17px;
  letter-spacing: .02em;
}

/* -------------------------------------------------------------------------
   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;
}
.wc-block-components-sidebar-layout {
    justify-content: center;
}
.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);
}

.storefront-sorting::before, .storefront-sorting::after {
        display:none!important;
    }
.single-product div.product {
    margin-top: 4em!important;
}
.woocommerce-pagination{ margin: 0px 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;
  margin-top: 6em;
}
.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 .sa-form-notice{ text-align: left; }
.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); }

/* -------------------------------------------------------------------------
   Generic content pages (About, Contact, Sustainability, etc.)
   ---------------------------------------------------------------------- */
.page .entry-header{
  margin: 0 auto;
  padding: 64px 6vw 4vw;
  text-align: center;
}
.page .entry-title{
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin: 0;
}
/* Content area itself matches the rest of the site's standard container
   (Storefront's .col-full already caps this at 1300px, same as the shop
   grid / hero / campaign sections) — only the actual text elements get
   narrowed back down to a comfortable reading width, so paragraphs read
   well while images (direct children, e.g. <figure>/<img>) span the full
   page width like the rest of the site's full-bleed sections. */
.page .entry-content{
  margin: 0 auto;
  padding: 28px 6vw 88px;
  font-family: var(--sa-font-body);
  font-size: 16px;
  line-height: 1.8;
  color: var(--sa-black-70);
}
.page .entry-content > p,
.page .entry-content > ul,
.page .entry-content > h2,
.page .entry-content > dl{
  margin-left: auto;
  margin-right: auto;
}
.page .entry-content > p:first-of-type{
  font-size: 18px;
  color: var(--sa-black);
}
.page .entry-content h2{
  font-size: 22px;
  margin: 2.2em auto .7em;
  color: var(--sa-black);
}
.page .entry-content h2:first-child{ margin-top: 0; }
/* margin-bottom only, not the shorthand — a `margin: 0 0 1.4em` here has the
   same specificity as (and comes after) the `> p{margin-left/right:auto}`
   centering rule above, so it was winning the tie and zeroing the
   horizontal auto-margins back out, pinning every paragraph to the left
   edge of the wide container instead of centering it. */
.page .entry-content p{ margin-bottom: 1.4em; }
.page .entry-content ul{ margin-bottom: 1.4em; padding-left: 1.2em; }
.page .entry-content li{ margin-bottom: .5em; }
.page .entry-content a{
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page .entry-content a:hover{ color: var(--sa-gray); }

.page .entry-content figure{
  margin: 48px 0;
}
.page .entry-content figure img{
  display: block;
  width: 100%;
  height: auto;
  max-height: 640px;
  object-fit: cover;
}
.page .entry-content figcaption{
  max-width: 720px;
  margin: 12px auto 0;
  text-align: center;
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--sa-gray);
}
.page .entry-content figure:first-child{ margin-top: 8px; }

.sa-contact-card{
  margin-top: 12px;
  padding: 28px 30px;
  background: var(--sa-paper);
  border: 1px solid var(--sa-border);
  text-align: left;
}
.sa-contact-card dt{
  font-family: var(--sa-font-body);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sa-gray);
  margin-top: 18px;
}
.sa-contact-card dt:first-child{ margin-top: 0; }
.sa-contact-card dd{ margin: 4px 0 0; font-size: 15px; color: var(--sa-black); }
.sa-contact-card .sa-btn{ margin-top: 22px; }

.sa-contact-layout{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  align-items: start;
  max-width: none;
  margin: 8px 0 0;
}
.sa-contact-layout h2{ margin-top: 0; }
.sa-contact-form-col,
.sa-contact-direct-col{ max-width: none; }

.sa-contact-form{
  margin-top: 8px;
  max-width: 100%;
}
.sa-form-row{ margin-bottom: 20px; text-align: left; }
.sa-form-row label{
  display: block;
  font-family: var(--sa-font-body);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sa-gray);
  margin-bottom: 6px;
}
.sa-form-row input,
.sa-form-row textarea{
  width: 100%;
  border: 1px solid var(--sa-black);
  border-radius: 0;
  padding: 12px 14px;
  font-family: var(--sa-font-body);
  font-size: 14px;
  color: var(--sa-black);
  background: var(--sa-white);
}
.sa-form-row textarea{ resize: vertical; }
.sa-form-row input:focus,
.sa-form-row textarea:focus{ outline: 1px solid var(--sa-black); }
.sa-form-honeypot{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.sa-contact-form .sa-btn{
  border: 1px solid var(--sa-black);
  cursor: pointer;
}

.sa-form-notice{
  max-width: 720px;
  margin: 0 auto 28px;
  padding: 16px 20px;
  border: 1px solid var(--sa-black);
  background: var(--sa-paper);
  color: var(--sa-black);
  font-size: 14px;
}

/* -------------------------------------------------------------------------
   My Account — Login / Register (WooCommerce default markup, restyled)
   ---------------------------------------------------------------------- */
.woocommerce #customer_login{
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
  max-width: none;
  margin: 8px 0 0;
}
.woocommerce #customer_login > div{
  flex: 1 1 320px;
  max-width: none;
}
.woocommerce-form-row label{
  display: block;
  font-family: var(--sa-font-body);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sa-gray);
  margin-bottom: 6px;
}
.woocommerce-form-row label .required{ color: var(--sa-black); text-decoration: none; }
.woocommerce form .woocommerce-Input,
.woocommerce form input.input-text{
  width: 100%;
  border: 1px solid var(--sa-black);
  border-radius: 0;
  padding: 12px 14px;
  font-family: var(--sa-font-body);
  font-size: 14px;
  color: var(--sa-black);
  background: var(--sa-white);
  margin-bottom: 20px;
}
.woocommerce form input[type=password]{ padding-right: 44px; }
.woocommerce-form__label-for-checkbox{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--sa-gray);
  margin-bottom: 20px;
  cursor: pointer;
}
.woocommerce-form-row + p{ font-size: 13px; margin-bottom: 8px; }
.woocommerce-form-row + p a{ color: var(--sa-black); text-decoration: underline; }
.woocommerce-privacy-policy-text{ font-size: 12px; color: var(--sa-gray); margin: 0 0 20px; }
.woocommerce-privacy-policy-text p{ margin: 0; }
.woocommerce form .woocommerce-button,
.woocommerce #customer_login button[type=submit]{
  display: inline-block;
  background: var(--sa-black);
  color: var(--sa-white);
  border: 1px solid var(--sa-black);
  border-radius: 0;
  padding: 14px 30px;
  font-family: var(--sa-font-body);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.woocommerce form .woocommerce-button:hover,
.woocommerce #customer_login button[type=submit]:hover{
  background: var(--sa-gray);
  border-color: var(--sa-gray);
}
.woocommerce-error,
.woocommerce-message,
.woocommerce-info{
  max-width: none;
  margin: 0 0 28px;
  padding: 16px 20px;
  border: 1px solid var(--sa-black);
  background: var(--sa-paper);
  color: var(--sa-black);
  font-size: 14px;
  list-style: none;
}
.woocommerce-error{ background: #FBEEEE; border-color: #C0504D; color: #7A2E2C; }
.woocommerce-error a,
.woocommerce-message a,
.woocommerce-info a{ color: inherit; text-decoration: underline; }

.wc-block-must-login-prompt{
  max-width: 560px;
  margin: 0 0 28px;
  padding: 20px 24px;
  border: 1px solid var(--sa-black);
  background: var(--sa-paper);
  color: var(--sa-black);
  font-family: var(--sa-font-body);
  font-size: 15px;
}
.wc-block-must-login-prompt a{ color: var(--sa-black); text-decoration: underline; }

/* Standalone Sign In / Sign Up pages */
.sa-auth-page{ max-width: 420px; margin: 0 auto; }
.sa-auth-page .woocommerce-form-login,
.sa-auth-page .woocommerce-form-register{ max-width: 420px; margin: 0 auto; }
.sa-auth-page .woocommerce-error,
.sa-auth-page .woocommerce-message,
.sa-auth-page .woocommerce-info{ max-width: 420px; margin: 0 auto 28px; }
.sa-auth-page .woocommerce-form-row-first,
.sa-auth-page .woocommerce-form-row-last{
  width: calc(50% - 10px);
  display: inline-block;
}
.sa-auth-page .woocommerce-form-row-first{ margin-right: 20px; }
.sa-auth-switch{
  margin-top: 24px;
  font-size: 14px;
  color: var(--sa-gray);
  text-align: center;
}
.sa-auth-switch a{ color: var(--sa-black); text-decoration: underline; margin-left: 4px; }
.sa-auth-switch a:hover{ color: var(--sa-gray); }
.sa-form-notice--error{
  background: #FBEEEE;
  border-color: #C0504D;
  color: #7A2E2C;
}

/* -------------------------------------------------------------------------
   Footer
   ---------------------------------------------------------------------- */
#colophon.site-footer{
  background: var(--sa-black);
  border-top: none;
  color: var(--sa-white);
  padding-top: 50px;
}
#colophon > .col-full{
  padding: 0 40px;
}
#colophon .sa-footer-brand-block{
  display:flex;
  flex-direction: column;
  align-items:center;
  text-align:center;
}
.site-content {
  padding: 0px 40px 20px!important;
}
#colophon .sa-footer-brand{
  font-family: var(--sa-font-head);
  font-size: 4em;
  line-height: 1em;
  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;
  margin-top: 24px;
}
#colophon .footer-widgets{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 32px;
}
/* Storefront's own ".fix" clearfix class (also present on .footer-widgets)
   adds a `content:"";display:table` ::before/::after pair to contain its
   old float-based columns — under display:grid those become phantom grid
   items and shift every real column over by one track, wrapping the last
   one to a second row (same issue already fixed once for ul.products). */
#colophon .footer-widgets::before,
#colophon .footer-widgets::after{
  content: none !important;
  display: none !important;
}
/* Storefront's own stylesheet ships `.footer-widgets.col-4 .block{width:
   21.7%;float:left;margin-right:4.3%}` (and .col-2/.col-3 variants) from its
   legacy float grid — neutralize it so the grid above actually controls
   layout instead of every column being squeezed to ~22% width. */
#colophon .footer-widgets .block{
  width: auto !important;
  float: none !important;
  margin-right: 0 !important;
}
#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;
  text-align: center;
}

ul.products li.product, ul.products .wc-block-grid__product, .wc-block-grid__products li.product, .wc-block-grid__products .wc-block-grid__product {
    margin-bottom: 1.235801032em!important;
}

/* -------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */
@media (max-width: 1000px){
.storefront-container, .sa-category-tiles {
    padding: 0px;
}
.sa-campaign
 {
    margin: 4em 0px 0px;
}
}
@media (max-width: 900px){
  ul.products{ grid-template-columns: repeat(2,1fr) !important; }
  .sa-category-tiles{ grid-template-columns: repeat(2,1fr); }
  .sa-contact-layout{ grid-template-columns: 1fr; gap: 40px; }
  #colophon .footer-widgets{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px){
#colophon .sa-footer-brand-block {
    margin-bottom: 4em;
}}
@media (max-width: 600px){
  .sa-hero{ min-height: 480px; }
  ul.products{ grid-template-columns: 1fr !important; }
  .sa-section{ padding: 44px 0; }
  .sa-category-tiles{ grid-template-columns: repeat(2,1fr); }
  #colophon .footer-widgets{ grid-template-columns: 1fr; text-align: center; }
  .storefront-container, .sa-category-tiles {padding: 0 0.617924em;}
.sa-campaign {
   margin: 4em 0.617924em 0em;
}
}
@media (max-width: 450px){
  .site-content {
    padding: 0px 20px 20px !important;
}
#masthead > .col-full {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px 24px;
    padding: 20px 0;
    padding: 20px 5px;
}}

/* ==========================================================================
   Warm boho — overrides the minimal rules above (cream ground, espresso
   text, terracotta accent, sage panels; Fraunces display + DM Sans body;
   arched images and pill buttons). Keep new site-wide styling here.
   ========================================================================== */

/* -------- Base -------- */
html, body{ overflow-x: hidden; }
body{ background: var(--sa-cream); color: var(--sa-black); }
h1,h2,h3,h4,h5,h6,
.site-title, .sa-font-head{
  font-weight: 300;
  text-transform: none;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
h1 em, h2 em, h3 em{ font-style: italic; }
a:hover{ color: var(--sa-terracotta); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--sa-terracotta);
  outline-offset: 2px;
}
.sa-eyebrow{
  font-size: 12.5px;
  letter-spacing: .14em;
  color: var(--sa-terracotta-dk);
  margin-bottom: 10px;
}

/* -------- Announcement + header -------- */
.sa-announcement-bar{
  background: var(--sa-terracotta);
  color: var(--sa-white);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: none;
}
#masthead.site-header{
  background: var(--sa-cream);
  border-top: 0;
  border-bottom: 1px solid var(--sa-border);
}
#masthead > .col-full{ padding: 22px 40px; }
.site-branding .site-title a{
  font-family: var(--sa-font-head);
  font-style: italic;
  font-weight: 400;
  font-size: 32px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sa-black);
}
.main-navigation ul li a{
  font-size: 14px;
  letter-spacing: .01em;
  text-transform: none;
  font-weight: 400;
  color: var(--sa-black);
}
.main-navigation ul li a:hover,
.main-navigation ul li:hover > a,
.site-title a:focus{ color: var(--sa-terracotta); }
#masthead .menu-toggle{ color: var(--sa-black); }
#masthead .menu-toggle::before,
#masthead .menu-toggle::after,
#masthead .menu-toggle span::before{ background-color: var(--sa-black) !important; }
@media (min-width: 768px){
  .main-navigation ul ul.sub-menu{
    background: var(--sa-white) !important;
    border-color: var(--sa-border);
    border-radius: var(--sa-radius-sm);
    box-shadow: 0 16px 32px rgba(59,42,33,.10);
  }
  .main-navigation ul ul.sub-menu li a{ font-size: 14px; letter-spacing: 0; text-transform: none; font-weight: 400; }
  .main-navigation ul ul.sub-menu li a:hover{ background: var(--sa-cream); color: var(--sa-terracotta); }
}
.sa-header-actions .woocommerce-product-search .search-field,
.sa-header-actions .woocommerce-product-search .search-field::placeholder{
  color: var(--sa-black);
  font-size: 14px;
  letter-spacing: .01em;
  text-transform: none;
}
.sa-header-actions .woocommerce-product-search .search-field{
  border-bottom: 1px solid transparent;
}
.sa-header-actions .woocommerce-product-search .search-field:focus{ border-bottom-color: var(--sa-black); }
.sa-header-actions .sa-account-link,
.sa-header-actions .sa-account-link--icon{ color: var(--sa-black); }
.sa-header-actions .sa-account-link:hover,
.sa-header-actions .sa-account-link--icon:hover{ color: var(--sa-terracotta); }
.sa-header-actions a.cart-contents{
  height: 44px;
  padding: 0 18px;
  gap: 8px;
  border-radius: var(--sa-radius);
  background: var(--sa-black);
  color: var(--sa-white);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
}
.sa-header-actions a.cart-contents:hover{ background: var(--sa-terracotta); color: var(--sa-white); }
.sa-header-actions .sa-cart-icon{ display: block; }
.sa-header-actions .sa-cart-icon circle{ fill: var(--sa-terracotta); }
.sa-header-actions .sa-cart-icon text{ fill: var(--sa-white); }
@media (max-width: 480px){
  .sa-header-actions a.cart-contents{ padding: 0 12px; }
}
@media (max-width: 767px){
  .main-navigation .handheld-navigation{ background: var(--sa-cream); }
}

/* -------- Buttons -------- */
.sa-btn,
a.button, button.button, input.button,
.woocommerce #respond input#submit,
.woocommerce a.button, .woocommerce button.button,
.woocommerce form .woocommerce-button,
.woocommerce #customer_login button[type=submit],
.single_add_to_cart_button,
.wc-block-components-button:not(.is-link){
  min-height: 52px;
  padding: 0 30px;
  border-radius: var(--sa-radius) !important;
  background: var(--sa-black);
  border: 1px solid var(--sa-black);
  color: var(--sa-white) !important;
  font-family: var(--sa-font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.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,
.woocommerce form .woocommerce-button:hover,
.woocommerce #customer_login button[type=submit]:hover,
.single_add_to_cart_button:hover,
.wc-block-components-button:not(.is-link):hover{
  background: var(--sa-terracotta);
  border-color: var(--sa-terracotta);
  color: var(--sa-white) !important;
}
.sa-btn-accent,
.woocommerce a.button.checkout-button,
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
#place_order{
  background: var(--sa-terracotta) !important;
  border-color: var(--sa-terracotta) !important;
}
.sa-btn-accent:hover,
.woocommerce a.button.checkout-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover,
#place_order:hover{
  background: var(--sa-terracotta-dk) !important;
  border-color: var(--sa-terracotta-dk) !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); border-color: var(--sa-black); color: var(--sa-white) !important; }
.sa-view-all{
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  border-bottom-color: currentColor;
}
.sa-view-all:hover{ color: var(--sa-terracotta); }

/* -------- Forms + notices -------- */
.woocommerce form .woocommerce-Input,
.woocommerce form input.input-text,
.woocommerce form textarea,
.woocommerce form select,
.sa-form-row input,
.sa-form-row textarea,
.woocommerce-ordering select.orderby,
.variations select{
  border: 1px solid #CDB9A3;
  border-radius: 14px;
  background-color: var(--sa-white);
  color: var(--sa-black);
}
.woocommerce-ordering select.orderby,
.variations select{ border-radius: var(--sa-radius); }
.woocommerce-form-row label,
.sa-form-row label,
table.shop_attributes th,
.variations th.label{
  font-size: 13px;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--sa-gray);
}
.woocommerce-error,
.woocommerce-message,
.woocommerce-info,
.sa-form-notice,
.wc-block-must-login-prompt{
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-radius-sm);
  background: var(--sa-white);
}
.woocommerce-message, .sa-form-notice--success{ border-left: 0; background: #EEF1E6; border-color: #C9D1B8; color: #3F4636; }
.woocommerce-error, .sa-form-notice--error{ background: #F8E8E2; border-color: #E2B6A6; color: #7A3A26; }

/* -------- Shop: breadcrumb, headers, sorting, pagination -------- */
.storefront-breadcrumb{ border-bottom-color: var(--sa-border); }
.woocommerce-breadcrumb{ font-size: 13px; letter-spacing: .02em; text-transform: none; }
.woocommerce-products-header__title, .page .entry-title{ font-size: clamp(2.4rem, 4.5vw, 3.6rem); }
.woocommerce-pagination .page-numbers{ border-radius: 50%; min-width: 44px; height: 44px; border-color: var(--sa-border); }
.woocommerce-tabs ul.tabs li a{ font-size: 14px; letter-spacing: 0; text-transform: none; font-weight: 500; }
.woocommerce-tabs ul.tabs li.active{ border-bottom-color: var(--sa-terracotta); }

/* -------- Product cards -------- */
ul.products{ gap: 36px 24px !important; }
ul.products li.product a img{
  border-radius: var(--sa-radius-sm);
  background: var(--sa-paper);
  transition: transform .5s ease;
}
ul.products li.product a.woocommerce-LoopProduct-link{ overflow: hidden; border-radius: var(--sa-radius-sm) var(--sa-radius-sm) 0 0; }
ul.products li.product a:hover img{ transform: scale(1.03); }
ul.products li.product .woocommerce-loop-product__title{
  font-size: 16px;
  font-weight: 400;
  margin: 16px 0 4px;
}
ul.products li.product .price{ color: var(--sa-black); font-weight: 500; font-size: 15px; }
ul.products li.product .price del{ color: var(--sa-gray); font-weight: 400; opacity: 1; }
.cj-ship-badge,
.cj-new-badge,
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale{
  border: 0;
  border-radius: var(--sa-radius) !important;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .01em;
  text-transform: none;
}
.cj-ship-badge{ background: var(--sa-cream); color: var(--sa-black); }
.cj-new-badge{ background: var(--sa-black); color: var(--sa-white); }
.cj-new-badge + .cj-ship-badge{ top: 44px; }
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale{ background: var(--sa-terracotta); color: var(--sa-white); }

/* -------- Single product -------- */
.single-product div.product .product_title{ font-size: clamp(2rem, 3.4vw, 2.8rem); }
.single-product div.product p.price{ color: var(--sa-black); font-size: 22px; }
.single-product div.product .woocommerce-product-gallery img{ border-radius: var(--sa-radius-sm); }
.cj-shipping-info{ background: var(--sa-white); border-radius: var(--sa-radius-sm); }
.cj-shipping-info strong{ font-size: 13px; letter-spacing: .02em; text-transform: none; font-weight: 600; color: var(--sa-terracotta-dk); }
.quantity .qty{ border-radius: var(--sa-radius); border: 1px solid #CDB9A3; background: var(--sa-white); min-height: 52px; }

/* -------- Journal (blog index + single post) -------- */
.blog .site-main, .single-post .site-main, .archive.category .site-main{ max-width: 1300px; margin: 0 auto; }
.blog .site-main{ display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 40px 32px; padding-top: 48px; }
.blog .site-main > article.post{ margin: 0; }
.blog .site-main > .storefront-pagination, .blog .site-main > nav{ grid-column: 1 / -1; }
.blog article.post .post-thumbnail img,
.single-post article.post .post-thumbnail img{ border-radius: 20px; width: 100%; height: auto; }
.blog article.post .post-thumbnail img{ aspect-ratio: 4 / 3; object-fit: cover; }
.blog article.post .entry-title,
.single-post article.post .entry-title{ font-weight: 300; }
.blog article.post .entry-title{ font-size: 26px; }
.single-post article.post{ margin: 48px auto 0; }
.single-post article.post .entry-title{ font-size: clamp(2.4rem, 5vw, 3.6rem); text-align: center; }
.single-post .entry-content{ font-size: 17px; line-height: 1.8; color: var(--sa-black-70); }
.single-post .entry-content h2{ font-size: 28px; margin-top: 1.6em; color: var(--sa-black); }
.blog .entry-meta, .single-post .entry-meta,
.blog .posted-on, .single-post .posted-on,
.blog .post-author, .single-post .post-author,
.blog .post-comments, .single-post .post-comments{ color: var(--sa-gray); font-size: 13px; }
.single-post .storefront-product-pagination, .single-post .post-navigation{ max-width: 760px; margin: 48px auto 0; }

/* -------- Footer -------- */
#colophon.site-footer{ background: var(--sa-black); color: #EADCCB; padding-top: 72px; }
#colophon .sa-footer-brand{
  font-family: var(--sa-font-head);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  letter-spacing: 0;
  text-transform: none;
  color: var(--sa-cream);
}
#colophon .sa-footer-tagline{ color: #CBB9A6; font-size: 15px; }
#colophon .widget-title{ font-family: var(--sa-font-body); font-size: 13px; letter-spacing: .12em; color: var(--sa-cream); }
#colophon a{ color: #CBB9A6; font-size: 15px; text-decoration: none; }
#colophon a:hover{ color: var(--sa-cream); }
#colophon .site-info{ border-top-color: #5A4537; color: #CBB9A6; justify-content: space-between; text-align: left; gap: 12px 24px; }
.sa-footer-payments{ display: inline-flex; align-items: center; gap: 8px; }

/* -------- Homepage layout helpers -------- */
.sa-bleed{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.sa-wrap{ max-width: 1300px; margin: 0 auto; padding: 0 40px; }
.sa-home .sa-section-head{ margin-bottom: 40px; }
.sa-home .sa-section-head h2,
.sa-home h2{ font-size: clamp(2.2rem, 3.6vw, 3rem); margin: 0; }
.sa-section-head--center{ justify-content: center; text-align: center; }
.sa-home-section{ padding: 96px 0 24px; }
.sa-home-center{ display: flex; justify-content: center; margin-top: 24px; }

/* Hero */
.sa-home-hero{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px;
  padding: 64px 0 72px;
}
.sa-home-hero__copy{ flex: 1 1 440px; min-width: 0; }
.sa-home-hero h1{
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 10px 0 24px;
}
.sa-home-hero h1 em{ color: var(--sa-terracotta-dk); }
.sa-home-hero__lead{ max-width: 460px; font-size: 18px; color: var(--sa-gray); margin-bottom: 36px; }
.sa-home-hero__actions{ display: flex; flex-wrap: wrap; gap: 12px; }
.sa-home-hero__media{ flex: 1 1 420px; min-width: 0; position: relative; display: flex; justify-content: center; }
.sa-home-hero__media img{
  position: relative;
  width: 82%;
  max-width: 500px;
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 999px 999px 24px 24px;
}
.sa-home-hero__arch{
  position: absolute;
  width: 78%;
  max-width: 476px;
  aspect-ratio: 3 / 4;
  right: 2%;
  top: 6%;
  border-radius: 999px 999px 24px 24px;
  background: var(--sa-beige-dark);
}
.sa-home-hero__badge{
  position: absolute;
  left: 0;
  bottom: 10%;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: var(--sa-black);
  color: var(--sa-cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.4;
}
.sa-home-hero__badge em{ font-family: var(--sa-font-head); font-size: 22px; letter-spacing: 0; text-transform: none; }

/* Perks strip */
.sa-home-perks{ background: var(--sa-paper); }
.sa-home-perks__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  padding-top: 28px;
  padding-bottom: 28px;
}
.sa-home-perk{ display: flex; align-items: center; gap: 14px; }
.sa-home-perk .sa-icon{ color: var(--sa-terracotta-dk); flex: none; }
.sa-home-perk strong{ display: block; font-weight: 500; }
.sa-home-perk span{ display: block; font-size: 14px; color: var(--sa-gray); }

/* Categories */
.sa-home-cats{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 900px){ .sa-home-cats{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; } }
.sa-home-cat{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; color: var(--sa-black); }
.sa-home-cat img{
  width: 100%;
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
  border-radius: 999px 999px 16px 16px;
  margin-bottom: 12px;
  transition: transform .5s ease;
}
.sa-home-cat:hover img{ transform: translateY(-4px); }
.sa-home-cat__name{ font-family: var(--sa-font-head); font-size: 24px; }
.sa-home-cat__count{ font-size: 14px; color: var(--sa-gray); }
.sa-home-cat:hover .sa-home-cat__name{ color: var(--sa-terracotta-dk); }

/* Pills */
.sa-home-pills{ display: flex; flex-wrap: wrap; gap: 8px; }
.sa-home-pills a{
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 22px;
  border-radius: var(--sa-radius);
  border: 1px solid #CDB9A3;
  color: var(--sa-black);
  font-size: 14px;
}
.sa-home-pills a.is-active,
.sa-home-pills a:hover{ background: var(--sa-black); border-color: var(--sa-black); color: var(--sa-white); }
.sa-home .woocommerce.columns-4{ margin-bottom: 24px; }

/* Lookbook */
.sa-home-lookbook{ background: var(--sa-sage); margin-top: 72px; }
.sa-home-lookbook__grid{ display: flex; flex-wrap: wrap; align-items: center; gap: 64px; padding-top: 96px; padding-bottom: 120px; }
.sa-home-lookbook__media{ flex: 1 1 460px; min-width: 0; position: relative; }
.sa-home-lookbook__main{ width: 88%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; border-radius: 24px; }
.sa-home-lookbook__detail{
  position: absolute;
  right: 0;
  bottom: -40px;
  width: 40%;
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
  border-radius: 999px 999px 16px 16px;
  border: 8px solid var(--sa-sage);
}
.sa-home-lookbook__copy{ flex: 1 1 400px; min-width: 0; }
.sa-home-lookbook__copy .sa-eyebrow{ color: var(--sa-sage-dk); }
.sa-home-lookbook__copy h2{ font-size: clamp(2.4rem, 4.5vw, 4rem) !important; line-height: 1.05; margin-bottom: 24px !important; }
.sa-home-lookbook__copy p{ font-size: 17px; color: #3F4636; }
.sa-home-lookbook__copy .sa-btn{ margin-top: 20px; }

/* Shop the look */
.sa-home-look__grid{ display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.sa-home-look__media{ flex: 1 1 420px; min-width: 0; position: relative; }
.sa-home-look__media img{ width: 100%; aspect-ratio: 5 / 4; height: auto; object-fit: cover; border-radius: 24px; }
.sa-home-look__spot{
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sa-cream);
  box-shadow: 0 0 0 6px rgba(247,240,230,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  transform: translate(-50%, -50%);
}
.sa-home-look__list{ flex: 1 1 380px; min-width: 0; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.sa-home-look__item{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px;
  border-radius: 18px;
  background: var(--sa-white);
  border: 1px solid var(--sa-border);
}
.sa-home-look__num{ font-family: var(--sa-font-head); font-size: 20px; width: 20px; color: var(--sa-terracotta-dk); flex: none; }
.sa-home-look__item img{ width: 76px; height: 92px; object-fit: cover; border-radius: 12px; display: block; }
.sa-home-look__info{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sa-home-look__info > a{ color: var(--sa-black); }
.sa-home-look__meta{ font-size: 14px; color: var(--sa-gray); }
.sa-home-look__price{ font-weight: 500; margin-top: 4px; }
.sa-home-look__price del{ font-weight: 400; color: var(--sa-gray); }
.sa-home-look__add{
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--sa-black);
  color: var(--sa-black);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sa-home-look__add:hover{ background: var(--sa-black); color: var(--sa-white); }
.sa-home-look__add.added{ background: var(--sa-terracotta); border-color: var(--sa-terracotta); color: var(--sa-white); }
.sa-home-look .added_to_cart{ display: none; }

/* Reviews */
.sa-home-reviews{ background: var(--sa-paper); margin-top: 96px; padding: 96px 0; }
.sa-home-reviews__grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.sa-home-review{ margin: 0; padding: 32px; border-radius: 20px; background: var(--sa-white); display: flex; flex-direction: column; gap: 20px; }
.sa-home-review__stars{ color: var(--sa-terracotta); letter-spacing: 4px; }
.sa-home-review blockquote{ margin: 0; padding: 0; border: 0; font-family: var(--sa-font-head); font-size: 20px; line-height: 1.5; font-style: normal; color: var(--sa-black); }
.sa-home-review figcaption{ margin-top: auto; font-size: 14px; color: var(--sa-gray); }

/* Journal */
.sa-home-journal{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; }
.sa-home-post{ display: block; color: var(--sa-black); }
.sa-home-post img{ width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 20px; margin-bottom: 20px; }
.sa-home-post h3{ font-size: 24px; font-weight: 400; margin: 0 0 8px; }
.sa-home-post p{ margin: 0; color: var(--sa-gray); }
.sa-home-post:hover h3{ color: var(--sa-terracotta-dk); }

/* Social strip */
.sa-home-social{ padding: 96px 0 96px; }
.sa-home-social .sa-section-head{ margin-bottom: 32px; }
.sa-home-social h2{ font-size: clamp(2rem, 3vw, 2.6rem) !important; }
.sa-home-social__handle{ display: inline-block; margin-top: 6px; color: var(--sa-terracotta-dk); }
.sa-home-social__grid{ display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; padding: 0 8px; box-sizing: border-box; }
.sa-home-social__grid img{ width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; border-radius: 12px; }

/* Newsletter band */
.sa-home .sa-newsletter{
  background: var(--sa-terracotta);
  color: var(--sa-white);
  padding: 0;
  text-align: left;
  border-top: 0;
  margin-bottom: -2.617924em; /* sit flush on the footer (Storefront's #content bottom margin) */
}
.sa-newsletter__grid{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 40px; padding-top: 80px; padding-bottom: 80px; }
.sa-newsletter__copy, .sa-newsletter__form-col{ flex: 1 1 420px; min-width: 0; }
.sa-home .sa-newsletter h2{ color: var(--sa-white); font-size: clamp(2.2rem, 4vw, 3.4rem); margin-bottom: 12px; }
.sa-home .sa-newsletter p{ color: var(--sa-white); font-size: 17px; margin: 0; max-width: 480px; }
.sa-home .sa-newsletter-form{ display: block; max-width: none; margin: 0; border: 0; }
.sa-home .sa-newsletter-form label{ display: block; font-size: 14px; margin-bottom: 8px; color: var(--sa-white); }
.sa-newsletter-form__row{ display: flex; flex-wrap: wrap; gap: 10px; }
.sa-home .sa-newsletter-form input[type=email]{
  flex: 1 1 240px;
  min-width: 0;
  height: 54px;
  padding: 0 22px;
  border-radius: var(--sa-radius);
  border: 0;
  background: var(--sa-white);
  color: var(--sa-black);
  font-size: 16px;
}
.sa-home .sa-newsletter-form .sa-btn{ border: 0; background: var(--sa-black); min-height: 54px; }
.sa-home .sa-newsletter-form .sa-btn:hover{ background: var(--sa-terracotta-dk); }
.sa-home .sa-newsletter .sa-newsletter-form__note{ font-size: 13px; margin-top: 10px; }
.sa-home .sa-newsletter .sa-form-notice{ margin: 0 0 16px; max-width: none; }

/* -------- Responsive -------- */
@media (max-width: 1000px){
  .sa-wrap{ padding: 0 24px; }
  .sa-home-social__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px){
  ul.products{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px){
  ul.products{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px 12px !important; }
  .sa-home-hero{ padding: 32px 0 48px; gap: 40px; }
  .sa-home-hero__badge{ width: 104px; height: 104px; font-size: 10px; }
  .sa-home-hero__badge em{ font-size: 18px; }
  .sa-home-section{ padding-top: 64px; }
  .sa-wrap{ padding: 0 20px; }
  .sa-home-lookbook__grid{ padding-top: 64px; padding-bottom: 96px; }
  #masthead > .col-full{ padding: 16px 12px; }
  .site-branding .site-title a{ font-size: 26px; }
  #colophon .site-info{ justify-content: center; text-align: center; }
}

/* Storefront's phone bottom bar (account / search / cart) */
.storefront-handheld-footer-bar{ background: var(--sa-cream); border-top: 1px solid var(--sa-border); box-shadow: none; }
.storefront-handheld-footer-bar ul li > a{ background: var(--sa-cream); border: 0; color: var(--sa-black); }
.storefront-handheld-footer-bar ul li > a::before{ color: var(--sa-black); }
.storefront-handheld-footer-bar ul li.cart .count{ background: var(--sa-terracotta); border-color: var(--sa-cream); color: var(--sa-white); }
@media (max-width: 600px){
  .sa-home-cat__name{ font-size: 20px; width: 100%; }
}

/* ==========================================================================
   Inner pages — same language as the homepage
   ========================================================================== */

/* -------- Breadcrumb -------- */
.storefront-breadcrumb{ border-bottom: 0; padding: 16px 0 0; margin-bottom: 0 !important; }
.woocommerce-breadcrumb{ font-size: 13px; color: var(--sa-gray); }
.woocommerce-breadcrumb a{ color: var(--sa-gray); text-decoration: none; }
.woocommerce-breadcrumb a:hover{ color: var(--sa-terracotta); }
.woocommerce-breadcrumb a:first-of-type::before{ display: none; }

/* -------- Page hero band (pages, journal, shop) -------- */
.sa-page-hero,
.page .entry-header.sa-page-hero,
.storefront-full-width-content.woocommerce-cart .entry-header.sa-page-hero,
.storefront-full-width-content.woocommerce-checkout .entry-header.sa-page-hero,
.storefront-full-width-content.woocommerce-account .entry-header.sa-page-hero{
  position: relative;
  width: 100vw;
  margin: 16px calc(50% - 50vw) 56px;
  padding: 72px 24px 64px !important;
  background: var(--sa-paper);
  text-align: center;
  border: 0;
}
.sa-page-hero .sa-eyebrow{ display: block; margin-bottom: 14px; }
.sa-page-hero .sa-eyebrow a{ color: inherit; text-decoration: none; }
.sa-page-hero .entry-title,
.sa-page-hero h1{
  max-width: 900px;
  margin: 0 auto;
  font-size: clamp(2.6rem, 5.5vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.sa-page-hero h1 em{ color: var(--sa-terracotta-dk); }
.sa-page-hero__intro{ max-width: 620px; margin: 20px auto 0; font-size: 18px; color: var(--sa-gray); }
.sa-page-hero .sa-home-pills{ justify-content: center; margin-top: 32px; }

/* -------- Generic page content -------- */
.page .entry-content{ padding: 0 0 96px; color: var(--sa-black-70); font-size: 17px; }
.page .entry-content > p,
.page .entry-content > ul,
.page .entry-content > ol,
.page .entry-content > h2,
.page .entry-content > h3,
.page .entry-content > dl,
.page .entry-content > table{ margin-left: auto; margin-right: auto; }
.page .entry-content > p:first-of-type{ font-size: 17px; color: var(--sa-black-70); }
.page .entry-content h2{ font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin: 2em auto .6em; color: var(--sa-black); }
.page .entry-content h3{ font-size: 22px; color: var(--sa-black); }
.page .entry-content a{ color: var(--sa-terracotta-dk); text-decoration-thickness: 1px; }
.page .entry-content a:hover{ color: var(--sa-black); }
.page .entry-content a.sa-btn{ text-decoration: none; }
.page .entry-content ul li::marker{ color: var(--sa-terracotta); }
.page .entry-content strong{ color: var(--sa-black); font-weight: 600; }

/* Policy pages get a framed reading column */
.sa-policy .entry-content{ margin: 0 auto; padding: 56px 56px 64px !important; background: var(--sa-white); border: 1px solid var(--sa-border); border-radius: 24px; margin-bottom: 96px; }
.sa-policy .entry-content > *:first-child{ margin-top: 0; }
.sa-policy .entry-content h2{ font-size: 24px; margin-top: 1.8em; padding-top: 1.2em; border-top: 1px solid var(--sa-border); }
.sa-policy .entry-content h2:first-of-type{ border-top: 0; padding-top: 0; }

/* Lead paragraph */
.page .entry-content > p.sa-lead{
  max-width: 860px;
  margin: 0 auto 72px;
  font-family: var(--sa-font-head);
  font-weight: 300;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.45;
  text-align: center;
  color: var(--sa-black);
}

/* Image + text split (About, Sustainability) */
.sa-split{ display: flex; flex-wrap: wrap; align-items: center; gap: 64px; max-width: 1200px; margin: 0 auto 96px; }
.sa-split--reverse{ flex-direction: row-reverse; }
.sa-split__media{ flex: 1 1 400px; min-width: 0; margin: 0 !important; }
.page .entry-content .sa-split__media img{ width: 100%; max-height: none; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px; }
.page .entry-content .sa-split__media img.is-arch{ border-radius: 999px 999px 24px 24px; }
.sa-split__copy{ flex: 1 1 380px; min-width: 0; }
.page .entry-content .sa-split__copy h2{ margin: 0 0 20px; font-size: clamp(2.2rem, 3.8vw, 3.2rem); line-height: 1.05; max-width: none; }
.sa-split__copy h2 em, .sa-band h2 em, .sa-cta h2 em, .sa-contact-layout h2 em{ color: var(--sa-terracotta-dk); }

/* Full-bleed sage band with cards */
.sa-band{ width: 100vw; margin: 0 calc(50% - 50vw) 96px; background: var(--sa-sage); }
.sa-band__inner{ max-width: 1300px; margin: 0 auto; padding: 88px 40px; text-align: center; }
.sa-band .sa-eyebrow{ color: var(--sa-sage-dk); }
.page .entry-content .sa-band h2{ margin: 0 auto 40px; font-size: clamp(2.2rem, 3.6vw, 3rem); max-width: none; }
.sa-cards{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; text-align: left; }
.sa-card{ background: var(--sa-white); border-radius: 20px; padding: 32px; }
.page .entry-content .sa-card h3{ margin: 0 0 10px; font-size: 24px; font-weight: 400; }
.sa-card p{ margin: 0 0 12px; font-size: 16px; color: var(--sa-gray); }
.sa-card p:last-child{ margin-bottom: 0; }

/* Closing call to action */
.sa-cta{ max-width: 760px; margin: 0 auto; text-align: center; }
.page .entry-content .sa-cta h2{ margin: 0 0 12px; font-size: clamp(2.2rem, 4vw, 3.2rem); }
.page .entry-content .sa-cta p{ margin: 0 auto 28px; color: var(--sa-gray); }
.sa-cta__actions{ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* -------- Contact -------- */
.sa-contact-layout{ max-width: 1200px; margin: 0 auto 96px; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 56px; }
.page .entry-content .sa-contact-layout h2{ margin: 0 0 24px; font-size: clamp(1.9rem, 3vw, 2.4rem); }
.sa-contact-form .sa-form-row label{ margin-bottom: 8px; }
.sa-contact-form .sa-form-row input,
.sa-contact-form .sa-form-row textarea{ padding: 14px 18px; font-size: 16px; }
.sa-contact-form .sa-btn{ border: 0; }
.sa-contact-card{ margin: 0; padding: 40px; background: var(--sa-paper); border: 0; border-radius: 24px; }
.sa-contact-card dl{ margin: 0 0 28px; }
.sa-contact-card dt{ font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--sa-terracotta-dk); margin-top: 20px; }
.sa-contact-card dd{ margin: 4px 0 0; font-size: 17px; color: var(--sa-black); }
.page .entry-content .sa-contact-card .sa-btn{ margin: 0; color: var(--sa-white) !important; }

/* -------- Sign in / sign up -------- */
.sa-auth-page{ max-width: 480px; padding: 40px; background: var(--sa-white); border: 1px solid var(--sa-border); border-radius: 24px; margin-bottom: 96px; }
.sa-auth-page .woocommerce-form-login,
.sa-auth-page .woocommerce-form-register{ border: 0; padding: 0; margin: 0; }
.sa-auth-page .woocommerce-form-login__submit,
.sa-auth-page .woocommerce-form-register__submit{ width: 100%; }
.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input{ top: 14px; right: 12px; background: transparent; color: var(--sa-gray); }
.woocommerce form .show-password-input::after{ color: var(--sa-gray); }
.sa-auth-switch{ margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--sa-border); }
.sa-auth-switch a{ color: var(--sa-terracotta-dk); }
.woocommerce form.login, .woocommerce form.register{ border: 0; padding: 0; }

/* -------- Journal -------- */
.sa-journal .site-main{ display: block !important; padding-top: 0 !important; max-width: none; }
.sa-journal-grid{ margin-bottom: 64px; }
.sa-home-post__meta{ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; font-size: 13px; color: var(--sa-gray); }
.sa-home-post__meta .sa-eyebrow{ margin: 0; }
.sa-home-post h2{ font-size: 26px; font-weight: 400; margin: 8px 0 8px; line-height: 1.2; }
.sa-home-post:hover h2{ color: var(--sa-terracotta-dk); }
.sa-home-post__more{ display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 15px; font-weight: 500; color: var(--sa-black); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.sa-journal .navigation.pagination{ display: flex; justify-content: center; margin-bottom: 96px; }
.sa-journal .nav-links{ display: flex; gap: 8px; }
.sa-journal .nav-links .page-numbers{ display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--sa-border); color: var(--sa-black); text-decoration: none; }
.sa-journal .nav-links .page-numbers.current{ background: var(--sa-black); border-color: var(--sa-black); color: var(--sa-white); }
.sa-empty{ text-align: center; padding: 48px 0 96px; color: var(--sa-gray); }

.sa-post__header .entry-title{ max-width: 960px; }
.sa-post__meta{ margin: 20px 0 0; font-size: 14px; color: var(--sa-gray); }
.sa-post__image{ max-width: 1100px; margin: 0 auto 64px; }
.sa-post__image img{ width: 100%; height: auto; max-height: 640px; object-fit: cover; border-radius: 24px; }
.sa-post__content{ margin: 0 auto; font-size: 18px; line-height: 1.8; color: var(--sa-black-70); }
.sa-post__content > p:first-child{ font-family: var(--sa-font-head); font-weight: 300; font-size: 24px; line-height: 1.5; color: var(--sa-black); }
.sa-post__content h2{ font-size: 30px; margin: 1.8em 0 .5em; color: var(--sa-black); }
.sa-post__content ul{ margin: 0 0 1.4em 1.2em; }
.sa-post__content li{ margin-bottom: .4em; }
.sa-post__content li::marker{ color: var(--sa-terracotta); }
.sa-post__footer{ max-width: 720px; margin: 56px auto 0; padding-top: 32px; border-top: 1px solid var(--sa-border); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.sa-post__more{ padding-bottom: 96px; }

/* -------- 404 -------- */
.sa-404{ display: flex; flex-wrap: wrap; align-items: center; gap: 56px; padding: 64px 0 96px; }
.sa-404__copy{ flex: 1 1 420px; min-width: 0; }
.sa-404 h1{ font-size: clamp(2.8rem, 5.5vw, 4.6rem); line-height: 1.02; margin: 10px 0 20px; }
.sa-404 h1 em{ color: var(--sa-terracotta-dk); }
.sa-404 p{ font-size: 18px; color: var(--sa-gray); max-width: 460px; }
.sa-404__search{ display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 16px; max-width: 520px; }
.sa-404__search input[type=search]{ flex: 1 1 220px; min-width: 0; height: 52px; padding: 0 22px; border-radius: var(--sa-radius); border: 1px solid #CDB9A3; background: var(--sa-white); font-size: 16px; }
.sa-404__actions{ display: flex; flex-wrap: wrap; gap: 12px; }
.sa-404__media{ flex: 1 1 360px; min-width: 0; display: flex; justify-content: center; }
.sa-404__media img{ width: 80%; max-width: 440px; aspect-ratio: 3 / 4; height: auto; object-fit: cover; border-radius: 999px 999px 24px 24px; }

/* -------- Shop archive -------- */
/* Eyebrow + products header together form one sand band, like .sa-page-hero */
.sa-shop-eyebrow{
  display: block;
  width: 100vw;
  margin: 16px calc(50% - 50vw) 0;
  padding: 64px 24px 14px;
  background: var(--sa-paper);
  text-align: center;
}
.woocommerce-products-header,
.storefront-full-width-content .woocommerce-products-header{
  width: 100vw;
  margin: 0 calc(50% - 50vw) 24px;
  padding: 0 24px 56px !important;
  background: var(--sa-paper);
  text-align: center;
}
.woocommerce-products-header__title{ margin: 0; }
.woocommerce-products-header__title{ font-size: clamp(2.6rem, 5.5vw, 4.4rem) !important; line-height: 1.05; }
.woocommerce-products-header__title em{ color: var(--sa-terracotta-dk); }
.woocommerce-products-header .term-description{ margin: 16px auto 0; font-size: 17px; }
.sa-shop-pills{ justify-content: center; margin: 28px 0 0; }
.storefront-sorting{ border-bottom: 1px solid var(--sa-border); padding: 24px 0 20px; margin-bottom: 32px !important; }
.woocommerce-result-count{ font-size: 14px; letter-spacing: 0; }
.woocommerce-ordering select.orderby{ font-size: 14px; letter-spacing: 0; text-transform: none; padding: 12px 40px 12px 18px; }
.storefront-sorting + ul.products, ul.products + .storefront-sorting{ margin-top: 0; }
.woocommerce-pagination .page-numbers{ text-decoration: none; }
.woocommerce-info.woocommerce-no-products-found{ text-align: center; padding: 40px; }

/* -------- Single product -------- */
.single-product div.product{ margin-top: 32px !important; }
.single-product div.product .woocommerce-product-gallery{ border-radius: 24px; overflow: hidden; }
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs img{ border-radius: 12px; }
.single-product div.product .summary .product_title{ margin-bottom: 12px; line-height: 1.05; }
.single-product div.product .summary .woocommerce-product-details__short-description{ font-size: 17px; color: var(--sa-gray); }
.single-product div.product form.cart{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 24px 0; border-top: 1px solid var(--sa-border); border-bottom: 1px solid var(--sa-border); }
.single-product div.product form.cart .quantity{ margin: 0; }
.single-product div.product form.cart .quantity .qty{ width: 88px; text-align: center; }
.single-product div.product form.cart .single_add_to_cart_button{ flex: 1 1 220px; background: var(--sa-terracotta); border-color: var(--sa-terracotta); }
.single-product div.product form.cart .single_add_to_cart_button:hover{ background: var(--sa-terracotta-dk); border-color: var(--sa-terracotta-dk); }
.single-product div.product .product_meta{ font-size: 14px; color: var(--sa-gray); border-top: 0; }
.single-product div.product .product_meta a{ color: var(--sa-terracotta-dk); }
.cj-shipping-info{ border: 0; background: var(--sa-paper); padding: 22px 24px; }
.cj-shipping-info .cj-row{ font-size: 15px; }
.woocommerce-tabs ul.tabs li a{ font-family: var(--sa-font-head); font-size: 22px; font-weight: 300; color: var(--sa-gray); padding-bottom: 14px; }
.woocommerce-tabs ul.tabs li.active a{ color: var(--sa-black); }
.related.products, .upsells.products{ padding-top: 72px; }
.related.products > h2, .upsells.products > h2{ font-size: clamp(2rem, 3.4vw, 2.8rem); text-align: center; margin-bottom: 40px; }
.storefront-product-pagination a{ background: var(--sa-white); border-radius: 18px; border: 1px solid var(--sa-border); }

/* -------- Cart + checkout (WooCommerce blocks) -------- */
.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout{ margin-bottom: 96px; }
.wc-block-cart .wc-block-cart__totals-title,
.wc-block-cart-items__header,
.wc-block-components-checkout-step__title,
.wc-block-components-title{ font-family: var(--sa-font-body) !important; font-size: 13px !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--sa-terracotta-dk) !important; font-weight: 500 !important; }
.wc-block-components-checkout-step__title{ font-family: var(--sa-font-head) !important; font-size: 26px !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--sa-black) !important; font-weight: 300 !important; }
.wc-block-cart-items, .wc-block-cart-items td, .wc-block-cart-items th{ border-color: var(--sa-border) !important; }
.wc-block-cart-item__image img{ border-radius: 14px; }
.wc-block-components-product-name{ font-family: var(--sa-font-head); font-size: 20px !important; font-weight: 400; color: var(--sa-black) !important; text-decoration: none !important; }
.wc-block-components-product-metadata{ color: var(--sa-gray); }
.wc-block-cart__sidebar .wp-block-woocommerce-cart-totals-block,
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block{
  background: var(--sa-white);
  border: 1px solid var(--sa-border) !important;
  border-radius: 24px;
  padding: 28px !important;
}
.wc-block-components-totals-wrapper{ border-color: var(--sa-border) !important; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{ font-family: var(--sa-font-head); font-size: 22px !important; font-weight: 400 !important; }
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-textarea{
  border: 1px solid #CDB9A3 !important;
  border-radius: 14px !important;
  background: var(--sa-white) !important;
  color: var(--sa-black) !important;
}
.wc-block-components-text-input.is-active input,
.wc-block-components-text-input input:focus,
.wc-blocks-components-select .wc-blocks-components-select__select:focus{ border-color: var(--sa-terracotta) !important; box-shadow: 0 0 0 1px var(--sa-terracotta) !important; }
.wc-block-components-text-input label,
.wc-blocks-components-select__label{ color: var(--sa-gray) !important; }
.wc-block-components-quantity-selector{ border-radius: var(--sa-radius) !important; border-color: #CDB9A3 !important; background: var(--sa-white); }
.wc-block-components-quantity-selector::after{ border: 0 !important; }
.wc-block-components-quantity-selector input{ background: transparent; }
.wc-block-cart-item__remove-link{ color: var(--sa-gray) !important; font-size: 13px !important; }
.wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-option{ border-radius: 16px; }
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted{ box-shadow: inset 0 0 0 1.5px var(--sa-terracotta) !important; border-radius: 16px; background: var(--sa-white); }
.wc-block-components-radio-control__input:checked{ border-color: var(--sa-terracotta) !important; }
.wc-block-components-radio-control__input:checked::before{ background: var(--sa-terracotta) !important; }
.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]:checked{ background: var(--sa-terracotta); border-color: var(--sa-terracotta); }
.wc-block-components-checkbox .wc-block-components-checkbox__mark{ fill: var(--sa-white); }
.wc-block-components-button:not(.is-link){ min-height: 54px; }
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button{ width: 100%; }
.wc-block-components-notice-banner{ border-radius: 16px; }
.wc-block-components-panel__button, .wc-block-components-totals-coupon-link{ color: var(--sa-black); }
.wc-block-cart .wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title{ font-family: var(--sa-font-head); font-weight: 300; }
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before{ background-color: var(--sa-terracotta); }
.wp-block-woocommerce-empty-cart-block .wp-block-separator{ border-color: var(--sa-border); }

/* -------- My account -------- */
.woocommerce-account .woocommerce{ display: flex; flex-wrap: wrap; gap: 40px; margin-bottom: 96px; }
.woocommerce-MyAccount-navigation{ flex: 0 1 260px; float: none !important; width: auto !important; }
.woocommerce-MyAccount-navigation ul{ list-style: none; margin: 0; padding: 12px; background: var(--sa-white); border: 1px solid var(--sa-border); border-radius: 24px; }
.woocommerce-MyAccount-navigation ul li{ border: 0 !important; padding: 0; }
.woocommerce-MyAccount-navigation ul li a{ display: block; padding: 12px 18px; border-radius: 14px; color: var(--sa-black); text-decoration: none; }
.woocommerce-MyAccount-navigation ul li a::before{ display: none; }
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover{ background: var(--sa-paper); color: var(--sa-terracotta-dk); }
.woocommerce-MyAccount-content{ flex: 1 1 520px; min-width: 0; float: none !important; width: auto !important; }
.woocommerce-MyAccount-content table.shop_table{ border: 1px solid var(--sa-border); border-radius: 18px; overflow: hidden; border-collapse: separate; background: var(--sa-white); }
.woocommerce-MyAccount-content table.shop_table th{ font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--sa-gray); background: var(--sa-paper); }
.woocommerce-MyAccount-content .woocommerce-Address{ background: var(--sa-white); border: 1px solid var(--sa-border); border-radius: 18px; padding: 24px; }

/* -------- Responsive -------- */
@media (max-width: 900px){
  .sa-contact-layout{ grid-template-columns: minmax(0, 1fr); }
  .sa-split, .sa-split--reverse{ gap: 40px; }
}
@media (max-width: 600px){
  .sa-page-hero,
  .page .entry-header.sa-page-hero{ padding: 48px 20px 44px !important; margin-bottom: 40px; }
  .sa-page-hero__intro{ font-size: 16px; }
  .sa-split, .sa-split--reverse{ flex-direction: column; margin-bottom: 64px; }
  .sa-split__media, .sa-split__copy{ flex-basis: auto; width: 100%; }
  .sa-band{ margin-bottom: 64px; }
  .sa-band__inner{ padding: 64px 20px; }
  .sa-card{ padding: 24px; }
  .sa-policy .entry-content{ padding: 32px 22px 40px !important; border-radius: 18px; }
  .sa-contact-card{ padding: 28px; }
  .sa-auth-page{ padding: 28px 22px; }
  .sa-post__content{ font-size: 17px; }
  .sa-post__content > p:first-child{ font-size: 20px; }
  .sa-404{ padding-top: 32px; }
}
@media (max-width: 767px){
  .storefront-breadcrumb{ margin: 0 20px !important; }
  .sa-shop-pills,
  .sa-journal-pills{
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    margin-left: -24px;
    margin-right: -24px;
    padding: 0 24px 4px;
    scrollbar-width: none;
  }
  .sa-shop-pills::-webkit-scrollbar,
  .sa-journal-pills::-webkit-scrollbar{ display: none; }
  .sa-shop-pills a, .sa-journal-pills a{ flex: none; }
}

/* -------- Logo -------- */
.sa-logo{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--sa-black);
  text-decoration: none;
  line-height: 1;
}
.sa-logo:hover{ color: var(--sa-black); }
.sa-logo:hover .sa-logo__sun{ transform: translateY(-2px); }
.sa-logo__mark{ display: block; width: 30px; height: 36px; flex: none; overflow: visible; }
.sa-logo__sun{ fill: var(--sa-terracotta); transition: transform .4s ease; }
.sa-logo__word{
  font-family: var(--sa-font-head);
  font-style: italic;
  font-weight: 400;
  font-size: 30px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.site-branding .site-title{ margin: 0; line-height: 1; }
.site-branding .site-title a.sa-logo{ font-size: inherit; color: var(--sa-black); }

/* Footer: stacked, larger, on espresso */
#colophon a.sa-logo--stacked{
  display: inline-flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 14px;
  color: var(--sa-cream);
  font-size: inherit;
}
#colophon .sa-logo--stacked .sa-logo__mark{ width: 52px; height: 62px; }
#colophon .sa-logo--stacked .sa-logo__word{ font-size: clamp(2.6rem, 6vw, 4.2rem); font-weight: 300; }
#colophon .sa-logo--stacked .sa-logo__sun{ fill: #D27C5C; }

@media (max-width: 600px){
  .sa-logo{ gap: 9px; }
  .sa-logo__mark{ width: 24px; height: 29px; }
  .sa-logo__word{ font-size: 24px; }
}

/* A page that ends with a sage band (e.g. Contact's "Before you write")
   sits it directly on the footer instead of leaving a cream gap. */
.page .entry-content > .sa-band:last-child{ margin-bottom: 0; }
body.page:has(.entry-content > .sa-band:last-child) .entry-content,
body.page:has(.entry-content > .sa-band:last-child) .hentry,
body.page:has(.entry-content > .sa-band:last-child) .site-main,
body.page:has(.entry-content > .sa-band:last-child) .content-area{ padding-bottom: 0 !important; margin-bottom: 0 !important; }
body.page:has(.entry-content > .sa-band:last-child) .site-content{ padding-bottom: 0 !important; margin-bottom: 0 !important; }