/*
Theme Name: Rudo Art
Theme URI: https://rudoart.com
Author: Rudo Art
Author URI: https://rudoart.com
Description: A single-purpose WooCommerce landing page theme built to sell the Dakar Haori Jacket — a numbered, limited-edition capsule by Rudo Art. Built around the brand's terracotta / cream / black palette taken directly from the product photography.
Version: 1.4.1
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
Requires Plugins: woocommerce
Text Domain: rudo-art
*/

/* ==========================================================================
   0. Design tokens
   ========================================================================== */

:root{
  --rudo-cream:        #F5F0E6;
  --rudo-cream-dark:    #EAE2D2;
  --rudo-rust:          #B8532E;
  --rudo-rust-dark:     #9A4425;
  --rudo-black:         #151311;
  --rudo-charcoal:      #2B2622;
  --rudo-white:         #FFFFFF;

  --rudo-font-display:  'Archivo Black', 'Arial Black', sans-serif;
  --rudo-font-heading:  'Space Grotesk', 'Archivo Black', sans-serif;
  --rudo-font-mono:     'Space Mono', 'Courier New', monospace;

  --rudo-container:     1180px;
  --rudo-gutter:        clamp(24px, 5vw, 80px);
  --rudo-section-gap:   clamp(64px, 10vw, 140px);
}

/* ==========================================================================
   1. Reset / base
   ========================================================================== */

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--rudo-cream);
  color: var(--rudo-black);
  font-family: var(--rudo-font-mono);
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }

a{ color: inherit; text-decoration: none; }

ul{ list-style: none; margin: 0; padding: 0; }

button{ font-family: inherit; cursor: pointer; }

.rudo-container{
  max-width: var(--rudo-container);
  margin: 0 auto;
  padding: 0 var(--rudo-gutter);
}

.rudo-eyebrow-divider{
  width: 64px;
  height: 4px;
  background: var(--rudo-rust);
  margin: 18px 0 28px;
}

.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline: 2px solid var(--rudo-rust);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   2. Header
   ========================================================================== */

.rudo-header{
  padding: clamp(28px, 5vw, 56px) var(--rudo-gutter) 0;
  text-align: center;
}

.rudo-header__logo{
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
}

.rudo-header__logo img{ width: 100%; height: 100%; object-fit: contain; }

.rudo-header__wordmark{
  font-family: var(--rudo-font-display);
  font-weight: 900;
  color: var(--rudo-rust);
  font-size: clamp(52px, 12vw, 148px);
  line-height: 0.85;
  letter-spacing: -0.01em;
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: clamp(20px,10vw,120px);
}

.rudo-header__wordmark span{ display: inline-block; }

.rudo-nav{
  margin: clamp(18px, 3vw, 32px) 0 0;
}

.rudo-nav__list{
  display: flex;
  justify-content: center;
  gap: clamp(20px, 4vw, 56px);
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.12em;
  font-weight: 700;
}

.rudo-nav a{
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: border-color .2s ease;
}
.rudo-nav a:hover, .rudo-nav a:focus-visible{ border-color: var(--rudo-rust); }
.rudo-nav .current-menu-item > a{ border-color: var(--rudo-rust); }

/* mobile nav toggle (hidden on desktop) */
.rudo-nav-toggle{ display: none; }

/* ==========================================================================
   3. Hero / product section
   ========================================================================== */

.rudo-hero{
  padding: var(--rudo-section-gap) 0 0;
}

.rudo-hero__grid{
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: stretch;
}

.rudo-hero__copy{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.rudo-hero__join-btn{
  margin-top: auto;
  align-self: flex-start;
}

.rudo-hero__title{
  font-family: var(--rudo-font-heading);
  font-weight: 700;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0;
}

.rudo-hero__copy p{
  margin: 0 0 20px;
  max-width: 46ch;
  color: var(--rudo-charcoal);
}

.rudo-hero__meta{
  text-transform: uppercase;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--rudo-rust-dark);
  margin: 28px 0 32px;
}

.rudo-hero__gallery{
  position: relative;
  overflow: hidden;
  background: var(--rudo-cream-dark);
}

.rudo-hero__gallery-track{
  display: flex;
  transition: transform .5s cubic-bezier(.65,0,.35,1);
}

.rudo-hero__gallery-slide{
  min-width: 100%;
}

.rudo-hero__gallery-slide img{ width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }

.rudo-hero__gallery-nav{
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(21,19,17,0.55);
  color: var(--rudo-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.rudo-hero__gallery-nav:hover{ background: var(--rudo-rust); }

/* Purchase / WooCommerce form styling */
.rudo-purchase{
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(21,19,17,0.15);
}

.rudo-purchase__price{
  font-family: var(--rudo-font-heading);
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 16px;
}
.rudo-purchase__price del{ opacity: .45; font-size: 18px; margin-right: 10px; }

.rudo-purchase .cart{ display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }

.rudo-purchase table.variations{ width: 100%; margin-bottom: 6px; }
.rudo-purchase table.variations td{ padding: 6px 0; }
.rudo-purchase table.variations label{
  text-transform: uppercase; font-size: 12px; letter-spacing: .08em; font-weight: 700;
}
.rudo-purchase select{
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--rudo-black);
  background: var(--rudo-white);
  font-family: var(--rudo-font-mono);
  font-size: 14px;
}

.rudo-purchase .quantity input.qty{
  width: 64px;
  padding: 14px 10px;
  border: 1.5px solid var(--rudo-black);
  background: var(--rudo-white);
  font-family: var(--rudo-font-mono);
  text-align: center;
}

.rudo-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  background: var(--rudo-rust);
  color: var(--rudo-white);
  border: 1.5px solid var(--rudo-rust);
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  transition: background .2s ease, color .2s ease, transform .15s ease;
  white-space: nowrap;
}
.rudo-btn:hover, .rudo-btn:focus-visible{
  background: var(--rudo-rust-dark);
  border-color: var(--rudo-rust-dark);
}
.rudo-btn:active{ transform: translateY(1px); }

.rudo-btn--outline{
  background: transparent;
  color: var(--rudo-black);
  border-color: var(--rudo-black);
}
.rudo-btn--outline:hover, .rudo-btn--outline:focus-visible{
  background: var(--rudo-black);
  color: var(--rudo-white);
}

.rudo-btn--outline-light{
  background: transparent;
  color: var(--rudo-white);
  border-color: var(--rudo-white);
}
.rudo-btn--outline-light:hover, .rudo-btn--outline-light:focus-visible{
  background: var(--rudo-white);
  color: var(--rudo-black);
}

.rudo-purchase button.single_add_to_cart_button{
  padding: 16px 34px;
  background: var(--rudo-rust);
  color: var(--rudo-white);
  border: 1.5px solid var(--rudo-rust);
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-family: var(--rudo-font-mono);
}
.rudo-purchase button.single_add_to_cart_button:hover{ background: var(--rudo-rust-dark); }

.rudo-purchase .stock{
  margin-top: 14px;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--rudo-rust-dark);
  font-weight: 700;
}
.rudo-purchase .stock.out-of-stock{ color: #8a1f1f; }

/* ==========================================================================
   4. Story section
   ========================================================================== */

.rudo-story{
  padding: var(--rudo-section-gap) 0;
}

.rudo-story__grid{
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: stretch;
}

/* Default mode: image stretches to exactly match the text column's
   height, which is what keeps the image bottom and text bottom aligned
   regardless of how long the story text is. */
.rudo-story__image--auto{ align-self: stretch; height: 100%; }
.rudo-story__image--auto .rudo-hero__gallery-track,
.rudo-story__image--auto .rudo-hero__gallery-slide{ height: 100%; }
.rudo-story__image--auto .rudo-hero__gallery-slide img{
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto;
}

/* Fixed-shape modes: the admin has explicitly chosen a shape, so the
   image no longer stretches to match the text — it keeps its ratio,
   which may leave a gap below it if the text runs longer. */
.rudo-story__image--compact{ align-self: start; }
.rudo-story__image--compact .rudo-hero__gallery-slide img{ aspect-ratio: 3/4; object-fit: cover; }
.rudo-story__image--tall{ align-self: start; }
.rudo-story__image--tall .rudo-hero__gallery-slide img{ aspect-ratio: 2/3; object-fit: cover; }
.rudo-story__image--square{ align-self: start; }
.rudo-story__image--square .rudo-hero__gallery-slide img{ aspect-ratio: 1/1; object-fit: cover; }

.rudo-story__title{
  font-family: var(--rudo-font-heading);
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 40px);
  text-transform: uppercase;
  margin: 0;
}

.rudo-story__body p{ color: var(--rudo-charcoal); margin: 0 0 18px; max-width: 58ch; }

.rudo-story__list{ margin-top: 30px; }
.rudo-story__list li{
  color: var(--rudo-rust);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .04em;
  font-size: 15px;
  padding: 6px 0;
}

/* ==========================================================================
   5. Deadline banner
   ========================================================================== */

.rudo-deadline{
  padding: clamp(48px,7vw,90px) 0;
  text-align: center;
  border-top: 1px solid rgba(21,19,17,.12);
  border-bottom: 1px solid rgba(21,19,17,.12);
}

.rudo-deadline__marquee{
  overflow: hidden;
  cursor: pointer;
}

.rudo-deadline__text{
  margin: 0;
  font-family: var(--rudo-font-heading);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(22px, 4vw, 40px);
  color: var(--rudo-rust);
  white-space: nowrap;
}

/* Only added while hovered (see main.js): duplicates the text into two
   spans side by side and scrolls them continuously right-to-left. When
   not hovered, .rudo-deadline__text stays as plain static centered text. */
.rudo-deadline__marquee.is-marquee .rudo-deadline__text{
  display: flex;
  justify-content: flex-start;
  gap: 80px;
  width: max-content;
  margin: 0 auto;
  animation: rudo-marquee 9s linear infinite;
}

@keyframes rudo-marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ==========================================================================
   6. Feature strip
   ========================================================================== */

.rudo-features{
  padding: var(--rudo-section-gap) 0;
}

.rudo-features__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.rudo-features__item figure{ margin: 0; }

.rudo-features__item img{ width: 100%; aspect-ratio: 3/4; object-fit: cover; }

.rudo-features__item figcaption{
  margin-top: 14px;
  text-align: center;
  text-transform: uppercase;
  font-size: 12.5px;
  letter-spacing: .06em;
  font-weight: 700;
}

/* ==========================================================================
   7. Closing / mailing list banner
   ========================================================================== */

.rudo-closing{
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--rudo-white);
}

.rudo-closing__bg{
  position: absolute; inset: 0;
  z-index: 0;
}
.rudo-closing__bg img{ width: 100%; height: 100%; object-fit: cover; }
.rudo-closing__bg::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(21,19,17,.05) 0%, rgba(21,19,17,.55) 100%);
}

.rudo-closing__inner{
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 48px var(--rudo-gutter) 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px;
}

.rudo-mailing-form{
  display: flex;
  gap: 0;
  max-width: 420px;
  width: 100%;
}

.rudo-mailing-form input[type="email"]{
  flex: 1;
  padding: 16px 18px;
  border: 1.5px solid var(--rudo-white);
  border-right: none;
  background: transparent;
  color: var(--rudo-white);
  font-family: var(--rudo-font-mono);
  font-size: 13px;
}
.rudo-mailing-form input[type="email"]::placeholder{ color: rgba(255,255,255,.7); }

.rudo-mailing-form button{
  border: 1.5px solid var(--rudo-white);
  background: transparent;
  color: var(--rudo-white);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 12.5px;
  font-weight: 700;
  padding: 0 24px;
  font-family: var(--rudo-font-mono);
}
.rudo-mailing-form button:hover{ background: var(--rudo-white); color: var(--rudo-black); }

.rudo-mailing-note{
  margin-top: 10px;
  font-size: 12px;
  opacity: .8;
}

.rudo-footer-meta{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.rudo-footer-meta small{ font-size: 12px; letter-spacing: .04em; }

.rudo-social{ display: flex; gap: 14px; }
.rudo-social a{
  width: 38px; height: 38px;
  border: 1.5px solid var(--rudo-white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.rudo-social a:hover{ background: var(--rudo-white); color: var(--rudo-black); }
.rudo-social svg{ width: 16px; height: 16px; fill: currentColor; }

/* ==========================================================================
   8. WooCommerce — shop, cart, checkout
   ========================================================================== */

/* --- Page width: keep every WooCommerce screen inside the same
   container as the rest of the site, and neutralize WordPress core's
   .alignfull / .alignwide bleed classes, which is what causes the
   shop / cart / checkout content to stretch edge-to-edge. --- */

.rudo-woocommerce-wrap{
  padding: clamp(32px, 6vw, 64px) 0 var(--rudo-section-gap);
}

.rudo-woocommerce-wrap .rudo-container,
.rudo-page-content{
  max-width: var(--rudo-container);
}

.rudo-woocommerce-wrap .alignfull,
.rudo-page-content .alignfull{
  width: 100% !important;
  max-width: var(--rudo-container) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.rudo-woocommerce-wrap .alignwide,
.rudo-page-content .alignwide{
  max-width: var(--rudo-container) !important;
}

/* Defensive: if WooCommerce's own default wrapper markup
   (#primary.content-area > #main.site-main) also renders — nested
   inside ours — strip any width/margin/padding it might otherwise
   add, so there's only ever one layer of spacing. */
.rudo-woocommerce-wrap .content-area,
.rudo-woocommerce-wrap .site-main{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

.woocommerce-breadcrumb{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 30px;
  color: var(--rudo-charcoal);
}

/* --- Shop archive product grid ---
   Selectors are deliberately over-specific and fully !important here:
   WooCommerce's own bundled stylesheet (woocommerce.css) uses selectors
   like ".woocommerce ul.products li.product", which can outrank a bare
   "ul.products" rule depending on stylesheet load order. Matching or
   exceeding that specificity, on every property, is what actually makes
   this override reliable. */

body.woocommerce ul.products,
body.woocommerce-page ul.products,
.woocommerce ul.products{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(24px, 3vw, 48px) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  box-sizing: border-box !important;
}
body.woocommerce ul.products::before,
body.woocommerce ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after{
  content: none !important;
  display: none !important;
}

body.woocommerce ul.products li.product,
body.woocommerce-page ul.products li.product,
.woocommerce ul.products li.product{
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

.woocommerce ul.products li.product a{
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.woocommerce ul.products li.product img{
  width: 100% !important;
  aspect-ratio: 3/4 !important;
  object-fit: cover !important;
  margin-bottom: 16px !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family: var(--rudo-font-heading);
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.woocommerce ul.products li.product .price{
  font-family: var(--rudo-font-mono);
  color: var(--rudo-rust-dark);
  font-weight: 700;
  margin-top: auto;
}

.woocommerce ul.products li.product .price ins{ text-decoration: none; }
.woocommerce ul.products li.product .price del{ opacity: .5; margin-right: 6px; }

/* Safety net: if the shop page is ever built with the block-based
   Products/Product Collection block instead of the classic loop above
   (different markup: ul.wc-block-grid__products / li.wc-block-grid__product),
   apply the same 3-column layout there too. */
ul.wc-block-grid__products{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(24px, 3vw, 48px) !important;
}
li.wc-block-grid__product{
  width: 100% !important;
  margin: 0 !important;
}

.woocommerce-pagination ul.page-numbers{
  display: flex;
  gap: 10px;
  margin-top: 50px;
  list-style: none;
  padding: 0;
}
.woocommerce-pagination .page-numbers{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1.5px solid var(--rudo-black);
  font-family: var(--rudo-font-mono);
  font-size: 13px;
}
.woocommerce-pagination .page-numbers.current,
.woocommerce-pagination a.page-numbers:hover{
  background: var(--rudo-rust);
  border-color: var(--rudo-rust);
  color: var(--rudo-white);
}

@media (max-width: 900px){
  .woocommerce ul.products,
  body.woocommerce ul.products,
  body.woocommerce-page ul.products{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px){
  .woocommerce ul.products,
  body.woocommerce ul.products,
  body.woocommerce-page ul.products{ grid-template-columns: minmax(0, 1fr) !important; }
}

/* --- Single product page --- */

.woocommerce div.product{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  max-width: 100%;
  align-items: start;
}

.woocommerce div.product div.images,
.woocommerce div.product div.summary{
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

/* WooCommerce renders the description tabs, upsells, and related
   products as siblings of .images/.summary, still inside div.product.
   Left unstyled, the grid above would squeeze them into a single
   half-width column too — force them to span both columns instead. */
.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > .woocommerce-Tabs-panel,
.woocommerce div.product > .related.products,
.woocommerce div.product > .upsells.products,
.woocommerce div.product > .rudo-size-guide-panel{
  grid-column: 1 / -1;
}

.woocommerce div.product > .woocommerce-tabs{ margin-top: clamp(32px, 5vw, 56px); }
.woocommerce div.product > .related.products,
.woocommerce div.product > .upsells.products{
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: clamp(32px, 5vw, 56px);
  border-top: 1px solid rgba(21,19,17,.12);
}
.woocommerce div.product > .related.products > h2,
.woocommerce div.product > .upsells.products > h2{
  font-family: var(--rudo-font-heading);
  text-transform: uppercase;
  font-size: clamp(22px, 3vw, 30px);
  margin: 0 0 24px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs{
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  border-bottom: 1px solid rgba(21,19,17,.15);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li{ margin: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  display: inline-block;
  padding: 0 0 14px;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .08em;
  font-weight: 700;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{ border-bottom: 2px solid var(--rudo-rust); }
.woocommerce div.product .woocommerce-tabs .panel{ max-width: 70ch; color: var(--rudo-charcoal); }

.woocommerce div.product div.images img{
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
}

.woocommerce div.product .flex-control-thumbs{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding: 0;
}
.woocommerce div.product .flex-control-thumbs li{ list-style: none; width: 72px; }
.woocommerce div.product .flex-control-thumbs img{
  width: 72px;
  height: 90px;
  object-fit: cover;
  opacity: .6;
}
.woocommerce div.product .flex-control-thumbs img.flex-active,
.woocommerce div.product .flex-control-thumbs img:hover{ opacity: 1; }

.woocommerce div.product .summary{ max-width: 46ch; }

.woocommerce div.product .product_title{
  font-family: var(--rudo-font-heading);
  text-transform: uppercase;
  font-size: clamp(26px, 3vw, 36px);
  margin: 0 0 10px;
}

.woocommerce div.product p.price{
  font-family: var(--rudo-font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--rudo-rust-dark);
  margin-bottom: 20px;
}

.woocommerce div.product div.woocommerce-product-details__short-description{
  color: var(--rudo-charcoal);
  margin-bottom: 20px;
}

@media (max-width: 900px){
  .woocommerce div.product{ grid-template-columns: 1fr; }
}

/* --- Variation size selector: default WooCommerce dropdown renders
   far too large for this layout — constrain it to a sensible width
   on both the shop archive quick-view and the single product page. --- */

.rudo-purchase select,
.woocommerce div.product form.cart table.variations select,
.woocommerce div.product form.cart .value select{
  width: auto !important;
  min-width: 120px;
  max-width: 200px;
  padding: 8px 12px !important;
  font-size: 13px !important;
  border: 1.5px solid var(--rudo-black) !important;
}

.woocommerce div.product form.cart table.variations td.label{
  padding-right: 12px;
  vertical-align: middle;
}
.woocommerce div.product form.cart table.variations td{
  padding: 8px 0 !important;
}

/* --- Size guide (optional per product) --- */

.woocommerce div.product form.cart{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.rudo-size-guide-trigger{ margin: 10px 0 0; }
.rudo-size-guide-link{
  background: none;
  border: none;
  padding: 0;
  font-family: var(--rudo-font-mono);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--rudo-rust-dark);
  text-decoration: underline;
  cursor: pointer;
}
.rudo-size-guide-link:hover{ color: var(--rudo-rust); }

.rudo-modal{ position: fixed; inset: 0; z-index: 1000; }
.rudo-modal[hidden]{ display: none; }
.rudo-modal__backdrop{
  position: absolute; inset: 0;
  background: rgba(21,19,17,.6);
}
.rudo-modal__dialog{
  position: relative;
  max-width: 560px;
  width: calc(100% - 48px);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  margin: 40px auto;
  background: var(--rudo-cream);
  padding: clamp(28px, 4vw, 44px);
}
.rudo-modal__close{
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border: 1.5px solid var(--rudo-black);
  border-radius: 50%;
  background: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.rudo-modal__close:hover{ background: var(--rudo-black); color: var(--rudo-white); }
.rudo-modal__content table{ width: 100%; border-collapse: collapse; margin-top: 10px; }
.rudo-modal__content th, .rudo-modal__content td{
  border: 1px solid rgba(21,19,17,.2);
  padding: 8px 10px;
  font-size: 13px;
  text-align: left;
}
.rudo-modal__content th{ background: var(--rudo-cream-dark); text-transform: uppercase; font-size: 12px; }

/* --- Notices --- */

.woocommerce-message, .woocommerce-error, .woocommerce-info{
  max-width: var(--rudo-container);
  margin: 0 auto 24px !important;
  padding: 16px 20px !important;
  border-top: none !important;
  background: var(--rudo-cream-dark) !important;
  color: var(--rudo-black) !important;
  font-family: var(--rudo-font-mono);
  list-style: none !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.woocommerce-message::before, .woocommerce-error::before, .woocommerce-info::before{ display:none !important; }

/* --- Buttons: every WooCommerce button, classic markup ---
   Covers: shop-loop "Add to cart", single-product "Reserve Now",
   cart's "Update cart" / "Apply coupon" / "Proceed to Checkout",
   and checkout's "Place order". WooCommerce mixes <a> and <button>
   for these, so both are targeted together. */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce button.checkout-button,
.woocommerce input.button,
.woocommerce #place_order,
.woocommerce .checkout-button,
.woocommerce .added_to_cart{
  background: var(--rudo-rust) !important;
  color: var(--rudo-white) !important;
  border: 1.5px solid var(--rudo-rust) !important;
  border-radius: 0 !important;
  text-transform: uppercase !important;
  font-family: var(--rudo-font-mono) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  padding: 14px 26px !important;
  box-shadow: none !important;
  transition: background .2s ease, color .2s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce button.checkout-button:hover,
.woocommerce input.button:hover,
.woocommerce #place_order:hover,
.woocommerce .checkout-button:hover{
  background: var(--rudo-rust-dark) !important;
  border-color: var(--rudo-rust-dark) !important;
  color: var(--rudo-white) !important;
}

/* Secondary / lower-emphasis actions ("Continue shopping", "Update cart",
   quantity remove "×") get the outline treatment instead of solid rust,
   so the page still has one clear primary action per screen. */
.woocommerce a.button.wc-backward,
.woocommerce button[name="update_cart"]{
  background: transparent !important;
  color: var(--rudo-black) !important;
  border: 1.5px solid var(--rudo-black) !important;
}
.woocommerce a.button.wc-backward:hover,
.woocommerce button[name="update_cart"]:hover{
  background: var(--rudo-black) !important;
  color: var(--rudo-white) !important;
}

.woocommerce a.remove{
  color: var(--rudo-rust-dark) !important;
  border: none !important;
  background: transparent !important;
}
.woocommerce a.remove:hover{ background: var(--rudo-rust) !important; color: var(--rudo-white) !important; }

/* --- Empty cart state (covers both the classic shortcode-based Cart
   page and the newer block-based Cart, since either could be in use) --- */

.woocommerce-cart .cart-empty,
.woocommerce-cart .wc-empty-cart-message,
.wc-block-cart__empty-cart__title{
  font-family: var(--rudo-font-heading);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(20px, 2.6vw, 28px);
  color: var(--rudo-black);
  text-align: center;
  background: var(--rudo-cream-dark);
  padding: clamp(48px, 8vw, 80px) clamp(24px, 5vw, 48px);
  margin: 0 0 24px;
  border-top: 4px solid var(--rudo-rust);
}

.woocommerce-cart .wc-proceed-to-checkout,
.woocommerce-cart p.return-to-shop{
  text-align: center;
}

.woocommerce-cart .return-to-shop .button,
.wc-block-cart__empty-cart__actions .wc-block-components-button{
  margin: 16px auto 0;
}

/* Block-based empty cart illustration/wrapper */
.wc-block-cart-empty__image,
.wc-empty-cart-message + p img{
  display: block;
  margin: 0 auto 20px;
  max-width: 160px;
  opacity: .8;
}

.wc-block-cart__empty-cart__wrapper,
.wp-block-woocommerce-cart .is-empty{
  background: var(--rudo-cream-dark);
  border-top: 4px solid var(--rudo-rust);
  padding: clamp(48px, 8vw, 80px) clamp(24px, 5vw, 48px);
  text-align: center;
}

/* --- Cart & checkout tables --- */

.woocommerce table.shop_table{
  border: none;
  border-collapse: collapse;
  width: 100%;
}
.woocommerce table.shop_table th{
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .06em;
  border-bottom: 1.5px solid var(--rudo-black);
  padding: 12px 10px;
  text-align: left;
}
.woocommerce table.shop_table td{
  border-bottom: 1px solid rgba(21,19,17,.12);
  padding: 16px 10px;
}
.woocommerce-checkout-review-order-table{ background: var(--rudo-cream-dark); }
.woocommerce-checkout #payment{ background: var(--rudo-cream-dark) !important; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea{
  border: 1.5px solid var(--rudo-black);
  border-radius: 0;
  padding: 12px 14px;
  font-family: var(--rudo-font-mono);
  background: var(--rudo-white);
}

/* ==========================================================================
   9. WooCommerce Blocks — Cart & Checkout (used when the Cart/Checkout
   pages are built with the block editor instead of shortcodes, which is
   WooCommerce's current default for new installs)
   ========================================================================== */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout{
  max-width: var(--rudo-container) !important;
  margin: 0 auto !important;
}

.wc-block-components-button,
.wc-block-cart__submit-container .wc-block-components-button,
.wc-block-components-checkout-place-order-button{
  border-radius: 0 !important;
  background: var(--rudo-rust) !important;
  border-color: var(--rudo-rust) !important;
  font-family: var(--rudo-font-mono) !important;
  text-transform: uppercase !important;
  font-size: 12.5px !important;
  letter-spacing: .08em !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.wc-block-components-button:hover,
.wc-block-components-checkout-place-order-button:hover{
  background: var(--rudo-rust-dark) !important;
  border-color: var(--rudo-rust-dark) !important;
}

.wc-block-components-button.wp-element-button.contained,
.wc-block-components-totals-coupon__button{
  background: transparent !important;
  color: var(--rudo-black) !important;
  border: 1.5px solid var(--rudo-black) !important;
}

.wc-block-components-totals-item__value,
.wc-block-components-product-price{
  font-family: var(--rudo-font-mono) !important;
  color: var(--rudo-black) !important;
}

/* ==========================================================================
   9b. Text alignment utilities (Home & About page admin controls)
   ========================================================================== */

.rudo-text-align-left{ text-align: left; }
.rudo-text-align-center{ text-align: center; }
.rudo-text-align-right{ text-align: right; }
.rudo-text-align-justify{ text-align: justify; }

/* Paragraphs/headings elsewhere are given a max-width for readability
   (e.g. 46ch), which keeps them left-aligned as a block even once their
   own text is centered/right-aligned — so also center or right-align
   the block itself when those modes are chosen. */
.rudo-text-align-center p,
.rudo-text-align-center h1,
.rudo-text-align-center h2{ margin-left: auto; margin-right: auto; }
.rudo-text-align-right p,
.rudo-text-align-right h1,
.rudo-text-align-right h2{ margin-left: auto; margin-right: 0; }

/* Justify needs a touch more line-height to stay readable. */
.rudo-text-align-justify p{ line-height: 1.85; }
.rudo-text-align-center .rudo-eyebrow-divider,
.rudo-text-align-right .rudo-eyebrow-divider{ margin-left: auto; }
.rudo-text-align-center .rudo-eyebrow-divider{ margin-right: auto; }
.rudo-text-align-center .rudo-purchase .cart,
.rudo-text-align-center .rudo-hero__join-btn{ justify-content: center; align-self: center; }
.rudo-text-align-right .rudo-purchase .cart,
.rudo-text-align-right .rudo-hero__join-btn{ justify-content: flex-end; align-self: flex-end; }

/* ==========================================================================
   10. About page
   ========================================================================== */

.rudo-about{
  padding: var(--rudo-section-gap) 0;
}

.rudo-about__title{
  font-family: var(--rudo-font-heading);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(32px, 4vw, 48px);
  margin: 0;
}

.rudo-about__grid{
  display: grid !important;
  grid-template-columns: 1fr 1.6fr !important;
  gap: clamp(32px, 5vw, 64px);
  align-items: stretch;
  margin-top: 10px;
}

.rudo-about__gallery{ height: 100%; }
.rudo-about__gallery .rudo-hero__gallery-track,
.rudo-about__gallery .rudo-hero__gallery-slide{ height: 100%; }
.rudo-about__gallery .rudo-hero__gallery-slide img{
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto;
}

.rudo-about__text p{
  color: var(--rudo-charcoal);
  margin: 0 0 20px;
  max-width: 62ch;
}
.rudo-about__text p:last-of-type{ margin-bottom: 0; }

.rudo-about__signature{
  display: block;
  width: auto;
  max-width: 140px;
  max-height: 70px;
  object-fit: contain;
  margin-top: 24px;
}

@media (max-width: 900px){
  .rudo-about__grid{ grid-template-columns: 1fr !important; }
  .rudo-about__gallery{ height: auto; }
  .rudo-about__gallery .rudo-hero__gallery-slide img{ aspect-ratio: 3/4; height: auto; }
}

/* ==========================================================================
   11. FAQ accordion
   ========================================================================== */

.rudo-faq-page{
  padding: var(--rudo-section-gap) 0;
}

.rudo-faq-page__title{
  font-family: var(--rudo-font-heading);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(32px, 4vw, 48px);
  margin: 0;
}

.rudo-faq-page__intro{
  max-width: 60ch;
  color: var(--rudo-charcoal);
  margin-bottom: 20px;
}

.rudo-faq{
  max-width: 760px;
  margin-top: 10px;
}

.rudo-faq__item{
  border-bottom: 1px solid rgba(21,19,17,.15);
}
.rudo-faq__item:first-child{ border-top: 1px solid rgba(21,19,17,.15); }

.rudo-faq__question{ margin: 0; }

.rudo-faq__trigger{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: none;
  border: none;
  padding: 22px 4px;
  text-align: left;
  font-family: var(--rudo-font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--rudo-black);
}

.rudo-faq__icon{
  flex: none;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--rudo-black);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}

.rudo-faq__item.is-open .rudo-faq__icon{
  background: var(--rudo-rust);
  border-color: var(--rudo-rust);
  color: var(--rudo-white);
  transform: rotate(45deg);
}

.rudo-faq__answer{ overflow: hidden; }
.rudo-faq__answer-inner{
  padding: 0 4px 24px;
  color: var(--rudo-charcoal);
  max-width: 65ch;
}
.rudo-faq__answer-inner p{ margin: 0 0 12px; }
.rudo-faq__answer-inner p:last-child{ margin-bottom: 0; }

/* --- Footer widgets (Appearance → Widgets → Footer) --- */

.rudo-footer-widgets{
  background: var(--rudo-black);
  color: var(--rudo-cream);
  padding: clamp(40px, 6vw, 64px) 0;
}
.rudo-footer-widgets .rudo-container{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
}
.rudo-footer-widgets .footer-widget h4{
  font-family: var(--rudo-font-heading);
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: .06em;
  margin: 0 0 14px;
}
.rudo-footer-widgets .footer-widget ul{ list-style: none; margin: 0; padding: 0; }
.rudo-footer-widgets .footer-widget li{ margin-bottom: 8px; }
.rudo-footer-widgets .footer-widget a{ opacity: .85; }
.rudo-footer-widgets .footer-widget a:hover{ opacity: 1; text-decoration: underline; }

/* ==========================================================================
   12. Responsive
   ========================================================================== */

@media (max-width: 900px){
  .rudo-hero__grid, .rudo-story__grid{ grid-template-columns: 1fr; }
  .rudo-story__image{ order: -1; }
  .rudo-features__grid{ grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .rudo-closing{ min-height: 460px; }
}

@media (max-width: 560px){
  .rudo-header__wordmark{ gap: 12px; }
  .rudo-nav__list{ gap: 16px; font-size: 11px; }
  .rudo-closing__inner{ flex-direction: column; align-items: flex-start; }
  .rudo-footer-meta{ flex-direction: column; align-items: flex-start; }
}