/* =========================================================
   ETERNA — brand stylesheet
   Display: Fraunces (editorial serif, soft optical contrast)
   Utility: Archivo (architectural grotesk, tracked uppercase)
   ========================================================= */

:root{
  --white:#ffffff;
  --paper:#faf9f6;
  --ink:#181818;
  --charcoal:#414141;
  --red:#c4232d;
  --red-deep:#8f1a21;
  --line:#e6e2db;
  --line-strong:#c9c3b8;

  --serif: 'Fraunces Variable', 'Fraunces', 'Times New Roman', serif;
  --sans: 'Archivo Variable', 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1360px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--white);
  color:var(--charcoal);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }

h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; color:var(--ink); margin:0; letter-spacing:-.01em; }

.eyebrow{
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--red);
  display:flex;
  align-items:center;
  gap:12px;
}
.eyebrow::before{
  content:'';
  width:26px; height:1px;
  background:var(--red);
  display:inline-block;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 30px;
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--white);
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
  white-space:nowrap;
}
.btn:hover{ background:var(--red); border-color:var(--red); transform:translateY(-2px); }
.btn svg{ width:14px; height:14px; transition:transform .35s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }

.btn-outline{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--ink);
}
.btn-outline:hover{ background:var(--ink); color:var(--white); border-color:var(--ink); }

.btn-red{ background:var(--red); border-color:var(--red); }
.btn-red:hover{ background:var(--red-deep); border-color:var(--red-deep); }

.btn-ghost{
  background:transparent;
  border:1px solid rgba(255,255,255,.6);
  color:var(--white);
}
.btn-ghost:hover{ background:var(--white); color:var(--ink); border-color:var(--white); }

/* =========================== THREAD MOTIF ============================
   A running-stitch red line acts as the site's signature device: it
   threads down the left gutter of the page, drawing itself in as the
   visitor scrolls, and reappears as the underline on numbered tags. */

.thread-rail{
  position:fixed;
  top:0; left:18px;
  width:2px; height:100vh;
  z-index:5;
  pointer-events:none;
  display:none;
}
@media (min-width:1000px){ .thread-rail{ display:block; } }
.thread-rail svg{ width:100%; height:100%; }
.thread-rail path{
  stroke:var(--red);
  stroke-width:2;
  stroke-dasharray:5 7;
  stroke-linecap:round;
  fill:none;
  opacity:.55;
}

.tag-number{
  display:inline-flex;
  flex-direction:column;
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--red);
  font-weight:600;
}
.tag-number span{ padding-bottom:5px; position:relative; }
.tag-number span::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:100%; height:1px;
  background-image:linear-gradient(to right, var(--red) 60%, transparent 0%);
  background-size:8px 1px;
  background-repeat:repeat-x;
}

/* =============================== HEADER =============================== */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:transform .5s var(--ease), background .4s ease;
}
.site-header.hide{ transform:translateY(-100%); }
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:14px;
  padding-bottom:14px;
}
.logo img{ height:28px; width:auto; }
.main-nav{ display:none; }
@media (min-width:940px){
  .main-nav{
    display:flex;
    align-items:center;
    gap:38px;
  }
  .main-nav a{
    font-size:12px;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--ink);
    position:relative;
    padding-bottom:4px;
  }
  .main-nav a::after{
    content:'';
    position:absolute;
    left:0; bottom:0;
    width:0; height:1px;
    background:var(--red);
    transition:width .35s var(--ease);
  }
  .main-nav a:hover::after,
  .main-nav a.active::after{ width:100%; }
}
.header-actions{ display:flex; align-items:center; gap:20px; }
.icon-btn{
  width:20px; height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--ink);
}
.icon-btn svg{ width:100%; height:100%; }

.menu-toggle{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:28px; height:20px;
  background:none;
  border:none;
  padding:0;
  z-index:210;
}
@media (min-width:940px){ .menu-toggle{ display:none; } }
.menu-toggle span{
  display:block;
  width:100%; height:1.5px;
  background:var(--ink);
  transition:transform .4s var(--ease), opacity .3s ease, background .3s ease;
}
.menu-toggle.is-open span{ background:var(--ink); }
.menu-toggle.is-open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2){ opacity:0; }
.menu-toggle.is-open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ============================ MOBILE MENU ============================ */
.mobile-menu{
  position:fixed;
  inset:0;
  z-index:200;
  background:var(--white);
  clip-path:circle(2% at calc(100% - 34px) 34px);
  transition:clip-path .7s var(--ease);
  display:flex;
  flex-direction:column;
  visibility:hidden;
}
.mobile-menu.is-open{
  clip-path:circle(150% at calc(100% - 34px) 34px);
  visibility:visible;
}
.menu-close{
  position:absolute;
  top:22px;
  right:var(--gutter);
  z-index:5;
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  background:none;
  border:none;
  color:var(--ink);
  opacity:0;
  transform:rotate(-45deg);
  transition:opacity .4s var(--ease) .1s, transform .5s var(--ease) .1s;
}
.mobile-menu.is-open .menu-close{ opacity:1; transform:rotate(0deg); }
.menu-close svg{ width:100%; height:100%; }
.mobile-menu-inner{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 var(--gutter);
}
.mobile-menu nav{ display:flex; flex-direction:column; gap:2px; }
.mobile-menu nav a{
  font-family:var(--serif);
  font-size:clamp(34px,10vw,54px);
  color:var(--ink);
  padding:12px 0;
  border-bottom:1px solid var(--line);
  opacity:0;
  transform:translateY(24px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  display:flex;
  align-items:baseline;
  gap:16px;
}
.mobile-menu nav a small{
  font-family:var(--sans);
  font-size:12px;
  color:var(--red);
  letter-spacing:.1em;
}
.mobile-menu.is-open nav a{ opacity:1; transform:translateY(0); }
.mobile-menu.is-open nav a:nth-child(1){ transition-delay:.15s; }
.mobile-menu.is-open nav a:nth-child(2){ transition-delay:.22s; }
.mobile-menu.is-open nav a:nth-child(3){ transition-delay:.29s; }
.mobile-menu.is-open nav a:nth-child(4){ transition-delay:.36s; }
.mobile-menu-foot{
  padding:24px var(--gutter) 40px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--line);
  opacity:0;
  transition:opacity .5s var(--ease) .4s;
}
.mobile-menu.is-open .mobile-menu-foot{ opacity:1; }
.mobile-menu-foot .socials{ display:flex; gap:18px; }
.mobile-menu-foot .socials svg{ width:18px; height:18px; }

body.menu-open{ overflow:hidden; }

/* =========================== REVEAL SYSTEM ============================ */
.reveal{
  opacity:0;
  transform:translateY(36px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--d, 0ms);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }

.reveal-mask{ overflow:hidden; }
.reveal-mask span{
  display:inline-block;
  transform:translateY(110%);
  transition:transform 1s var(--ease);
  transition-delay:var(--d, 0ms);
}
.reveal-mask.is-visible span{ transform:translateY(0); }

.reveal-scale{
  opacity:0;
  transform:scale(1.08);
  transition:opacity 1.1s var(--ease), transform 1.3s var(--ease);
}
.reveal-scale.is-visible{ opacity:1; transform:scale(1); }

/* =============================== HERO =============================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--ink);
}
.hero video, .hero .hero-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:.82;
}
.hero::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.08) 40%, rgba(0,0,0,.72) 100%);
}
.hero-content{
  position:relative;
  z-index:2;
  width:100%;
  padding:0 var(--gutter) 64px;
  color:var(--white);
}
.hero-content .eyebrow{ color:#f0b9bd; }
.hero-content .eyebrow::before{ background:#f0b9bd; }
.hero-title{
  font-size:clamp(44px, 8vw, 108px);
  line-height:.98;
  color:var(--white);
  margin:14px 0 22px;
}
.hero-sub{
  max-width:520px;
  font-size:16px;
  color:#e9e6e0;
  margin-bottom:30px;
}
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.scroll-cue{
  position:absolute;
  right:var(--gutter); bottom:36px;
  z-index:2;
  display:flex; align-items:center; gap:10px;
  color:var(--white);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.scroll-cue svg{ width:12px; height:18px; animation:scrollcue 1.8s infinite; }
@keyframes scrollcue{ 0%,100%{ transform:translateY(0); opacity:.5;} 50%{ transform:translateY(6px); opacity:1;} }
.page-hero{
  position:relative;
  padding:170px var(--gutter) 60px;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.page-hero-title{ font-size:clamp(38px,6vw,72px); margin-top:14px; }
.page-hero-sub{ max-width:560px; margin-top:18px; color:var(--charcoal); font-size:16px; }

/* Generic page content (page.php) — used for Cart/Checkout/My Account
   (WooCommerce's own markup, styled by its own re-enabled stylesheet;
   this just sets base font/color so headings and any plain text WC
   outputs match the site rather than browser defaults) and any
   genuinely plain WordPress page content. Deliberately light-touch —
   doesn't override table/form layout, which WooCommerce's own CSS
   needs to keep control of. */
.page-content{
  font-family:var(--sans);
  color:var(--charcoal);
}
.page-content h2{
  font-family:var(--serif);
  font-size:clamp(24px,3vw,32px);
  color:var(--ink);
  margin:0 0 24px;
}
.page-content h3{
  font-family:var(--serif);
  font-size:20px;
  color:var(--ink);
  margin:32px 0 12px;
}
.page-content p{ font-size:16px; line-height:1.7; margin:0 0 18px; }
.page-content a:not(.button):not(.btn){ color:var(--red); text-decoration:underline; }
.page-content .button,
.page-content .btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 30px;
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  border:1px solid var(--ink) !important;
  background:var(--ink) !important;
  color:var(--white) !important;
  border-radius:0 !important;
  text-decoration:none !important;
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
.page-content .button:hover,
.page-content .btn:hover{ background:var(--red) !important; border-color:var(--red) !important; color:var(--white) !important; }

/* ============================ CART PAGE (WooCommerce) ============================
   Targets WooCommerce's own stable, long-standing class names directly
   (woocommerce-cart-form, shop_table, cart_totals, product-remove,
   etc. — unchanged across WC versions for years) rather than relying
   on WooCommerce's own stylesheet loading correctly, which has proven
   hard to verify from outside a browser devtools session. This makes
   the cart correctly styled either way. Some color/decoration
   properties use !important specifically to guarantee our styling
   wins even if WooCommerce's own stylesheet also happens to load
   (inc/woocommerce.php re-enables it on cart/checkout/account) —
   scoped to color/background/text-decoration only, not layout, so it
   doesn't fight WooCommerce's own structural CSS.
   Checkout and My Account still rely on WooCommerce's own generic
   stylesheet for now — a fully custom version of those is a larger
   task not done here. */

.woocommerce-cart-form{ margin-bottom:50px; }

table.shop_table{
  width:100%;
  border-collapse:collapse !important;
  margin:0 0 40px;
  font-family:var(--sans) !important;
  font-size:14.5px !important;
}
table.shop_table th{
  text-align:left;
  padding:14px 12px;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink) !important;
  border:none !important;
  border-bottom:1px solid var(--line-strong) !important;
  background:none !important;
}
table.shop_table td{
  padding:20px 12px;
  border:none !important;
  border-bottom:1px solid var(--line) !important;
  vertical-align:middle;
  color:var(--charcoal) !important;
  background:none !important;
}
table.shop_table tr:last-child td{ border-bottom:none !important; }

.product-remove{ width:32px; }
.product-remove a.remove{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px; height:26px;
  border-radius:50% !important;
  border:1px solid var(--line-strong) !important;
  color:var(--charcoal) !important;
  background:none !important;
  font-size:16px;
  line-height:1;
  text-decoration:none !important;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.product-remove a.remove:hover{
  background:var(--red) !important;
  border-color:var(--red) !important;
  color:var(--white) !important;
}

.product-thumbnail{ width:90px; }
.product-thumbnail img{
  width:80px; height:100px;
  object-fit:cover;
  display:block;
}

.product-name a{
  font-family:var(--serif) !important;
  font-size:17px !important;
  color:var(--ink) !important;
  text-decoration:none !important;
}
.product-name a:hover{ color:var(--red) !important; }

.product-price, .product-subtotal{ font-weight:600 !important; color:var(--ink) !important; white-space:nowrap; }

.product-quantity .qty{
  width:64px;
  padding:10px;
  border:1px solid var(--line-strong) !important;
  border-radius:0 !important;
  background:var(--white) !important;
  font-family:var(--sans) !important;
  font-size:14px !important;
  color:var(--ink) !important;
  text-align:center;
}
.product-quantity label{
  /* WooCommerce's own label here is meant for screen readers, not
     visible text — hidden the standard accessible way rather than
     display:none, which would remove it from the accessibility tree. */
  position:absolute !important;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}

tr .actions{ padding-top:24px; border-bottom:none !important; }
tr .actions button[name="update_cart"]{
  display:inline-flex;
  align-items:center;
  padding:14px 26px;
  font-family:var(--sans) !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:.14em;
  text-transform:uppercase;
  border:1px solid var(--ink) !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--ink) !important;
  cursor:pointer;
  transition:background .3s ease, color .3s ease;
}
tr .actions button[name="update_cart"]:hover{ background:var(--ink) !important; color:var(--white) !important; }
tr .actions button[name="update_cart"][disabled]{ opacity:.35; cursor:default; }

.cart_totals{
  max-width:420px;
  margin-left:auto;
  padding:36px;
  background:var(--paper) !important;
  border:1px solid var(--line) !important;
}
.cart_totals table{
  width:100%;
  border-collapse:collapse !important;
  font-family:var(--sans) !important;
  font-size:14.5px !important;
  background:none !important;
}
.cart_totals th{
  text-align:left;
  padding:14px 0;
  font-weight:600 !important;
  color:var(--ink) !important;
  border:none !important;
  border-bottom:1px solid var(--line) !important;
  background:none !important;
  width:40%;
}
.cart_totals td{
  padding:14px 0;
  border:none !important;
  border-bottom:1px solid var(--line) !important;
  background:none !important;
  text-align:right;
  color:var(--charcoal) !important;
}
.cart_totals tr:last-child th,
.cart_totals tr:last-child td{ border-bottom:none !important; font-size:17px !important; font-weight:700 !important; color:var(--ink) !important; }
.cart_totals #shipping_method{ list-style:none; margin:0 0 8px; padding:0; text-align:right; }
.cart_totals .woocommerce-shipping-destination{ text-align:right; font-size:13px !important; color:var(--charcoal) !important; }

.wc-proceed-to-checkout{ margin-top:24px; }
.checkout-button{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:16px 30px;
  font-family:var(--sans) !important;
  font-size:12.5px !important;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  border:1px solid var(--red) !important;
  background:var(--red) !important;
  color:var(--white) !important;
  text-decoration:none !important;
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
.checkout-button:hover{ background:var(--red-deep) !important; border-color:var(--red-deep) !important; }

/* Mobile: stack cells instead of a cramped scrolling table, using the
   data-title attribute WooCommerce already outputs on every <td>. */
@media (max-width:760px){
  table.shop_table thead{ display:none; }
  table.shop_table td{ display:flex; justify-content:space-between; align-items:center; gap:16px; border-bottom:none; padding:8px 0; }
  table.shop_table td::before{ content: attr(data-title); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--charcoal); }
  table.shop_table td.product-thumbnail::before,
  table.shop_table td.product-remove::before{ content:none; }
  table.shop_table tr{ display:block; padding:20px 0; border-bottom:1px solid var(--line); }
  .cart_totals{ max-width:none; margin-left:0; }
}

/* ============================ WOOCOMMERCE FORM FIELDS (shared) ============================
   Checkout and My Account (billing/shipping fields, login, register,
   edit-account, addresses) all use the same row-based field markup —
   .form-row in some WC template versions, .woocommerce-form-row in
   others. Styled once here, shared by both pages below. */

.form-row, .woocommerce-form-row{ margin:0 0 22px; }
.form-row label, .woocommerce-form-row label{
  display:block;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink) !important;
  margin-bottom:8px;
}
.form-row label .required, .woocommerce-form-row label .required{
  color:var(--red) !important;
  text-decoration:none !important;
}
.form-row label .optional, .woocommerce-form-row label .optional{
  text-transform:none;
  letter-spacing:0;
  font-weight:400 !important;
  color:#8a877f !important;
}
.form-row input.input-text,
.form-row textarea,
.form-row select,
.woocommerce-form-row input.input-text,
.woocommerce-form-row textarea,
.woocommerce-form-row select,
.select2-container .select2-selection--single{
  width:100%;
  padding:13px 14px;
  border:1px solid var(--line-strong) !important;
  background:var(--white) !important;
  font-family:var(--sans) !important;
  font-size:14.5px !important;
  color:var(--ink) !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.form-row input.input-text:focus,
.form-row textarea:focus,
.form-row select:focus,
.woocommerce-form-row input.input-text:focus,
.woocommerce-form-row textarea:focus,
.woocommerce-form-row select:focus{
  outline:none;
  border-color:var(--red) !important;
  box-shadow:none !important;
}
.form-row textarea{ min-height:100px; }

/* ============================ CHECKOUT PAGE (WooCommerce) ============================
   Same approach as the cart CSS above: targets WooCommerce's own
   stable class/id names (#customer_details, #order_review,
   .wc_payment_methods, #place_order, etc.) directly. */

.woocommerce-checkout .col-1,
.woocommerce-checkout .col-2{ margin-bottom:36px; }
.woocommerce-checkout h3{
  font-family:var(--serif) !important;
  font-size:22px !important;
  color:var(--ink) !important;
  margin:0 0 20px;
}
#order_review_heading{
  font-family:var(--serif) !important;
  font-size:22px !important;
  color:var(--ink) !important;
  margin:0 0 20px;
}

@media (min-width:900px){
  .woocommerce-checkout form.checkout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:start;
  }
  .woocommerce-checkout #customer_details{ grid-column:1; grid-row:1 / span 2; }
  #order_review_heading{ grid-column:2; grid-row:1; }
  #order_review{ grid-column:2; grid-row:2; }
  /* #payment is nested INSIDE #order_review (both render via the same
     woocommerce_checkout_order_review hook, not as siblings) — so it
     naturally sits in the right column already, right below the order
     table, with no grid placement of its own needed. */
}

/* Order review table reuses table.shop_table styling from the cart
   section above — no separate rules needed for the table itself. */

#payment{ margin-top:24px; }
ul.wc_payment_methods{
  list-style:none;
  margin:0 0 24px;
  padding:0;
  border:1px solid var(--line) !important;
  background:none !important;
}
li.wc_payment_method{
  padding:18px 20px;
  border:none !important;
  border-bottom:1px solid var(--line) !important;
  background:none !important;
}
li.wc_payment_method:last-child{ border-bottom:none !important; }
li.wc_payment_method input.input-radio{
  accent-color:var(--red);
  margin-right:10px;
}
li.wc_payment_method label{
  font-family:var(--sans) !important;
  font-size:14.5px !important;
  font-weight:600 !important;
  color:var(--ink) !important;
  cursor:pointer;
}
li.wc_payment_method .payment_box{
  margin-top:14px;
  padding:16px;
  background:var(--paper) !important;
  border:none !important;
  font-size:13.5px !important;
  color:var(--charcoal) !important;
  line-height:1.6;
}
li.wc_payment_method .payment_box::before{ display:none !important; } /* WC's default speech-bubble arrow — omitted, doesn't fit this design language */

.woocommerce-terms-and-conditions-wrapper{ margin:20px 0; font-size:13.5px !important; color:var(--charcoal) !important; }
.woocommerce-terms-and-conditions-wrapper a{ color:var(--red) !important; }

#place_order{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:18px 30px;
  margin-top:20px;
  font-family:var(--sans) !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  letter-spacing:.16em;
  text-transform:uppercase;
  border:1px solid var(--red) !important;
  border-radius:0 !important;
  background:var(--red) !important;
  color:var(--white) !important;
  cursor:pointer;
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
#place_order:hover{ background:var(--red-deep) !important; border-color:var(--red-deep) !important; }

/* Validation/status notices — used on Checkout and elsewhere WC shows them. */
.woocommerce-error, .woocommerce-message, .woocommerce-info{
  list-style:none !important;
  margin:0 0 28px !important;
  padding:16px 20px !important;
  font-size:14px !important;
  border:none !important;
  border-left:3px solid var(--red) !important;
  border-radius:0 !important;
  background:var(--paper) !important;
  color:var(--ink) !important;
}
.woocommerce-error::before, .woocommerce-message::before, .woocommerce-info::before{
  display:none !important; /* WooCommerce's default icon-font glyph — this theme uses SVG icons only, never icon fonts. */
}
.woocommerce-message{ border-left-color:#4a7a5c !important; }
.woocommerce-info{ border-left-color:var(--charcoal) !important; }
.woocommerce-error a, .woocommerce-message a, .woocommerce-info a{ color:var(--red) !important; }

/* ============================ MY ACCOUNT PAGE (WooCommerce) ============================ */

.woocommerce-account .woocommerce{
  display:block;
}
@media (min-width:820px){
  .woocommerce-account .woocommerce{
    display:grid;
    grid-template-columns:220px 1fr;
    gap:60px;
    align-items:start;
  }
}

.woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; }
.woocommerce-MyAccount-navigation li{
  border:none !important;
  border-bottom:1px solid var(--line) !important;
  background:none !important;
}
.woocommerce-MyAccount-navigation li a{
  display:block;
  padding:14px 0;
  font-family:var(--sans) !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--charcoal) !important;
}
.woocommerce-MyAccount-navigation li.is-active a{
  color:var(--red) !important;
}
.woocommerce-MyAccount-navigation li a:hover{ color:var(--red) !important; }

.woocommerce-MyAccount-content{ margin-top:0; }
@media (max-width:819px){ .woocommerce-MyAccount-content{ margin-top:36px; } }

/* Login / Register — WooCommerce places these in a two-column
   .u-columns/.col-1/.col-2 layout when both forms show together. */
.u-columns{ display:block; }
@media (min-width:760px){
  .u-columns{ display:grid; grid-template-columns:1fr 1fr; gap:70px; }
}
.u-columns .col-1, .u-columns .col-2{ margin-bottom:0; }
.woocommerce-form-login, .woocommerce-form-register{
  padding:32px;
  background:var(--paper) !important;
  border:1px solid var(--line) !important;
}
.woocommerce-form-login h2, .woocommerce-form-register h2{
  font-family:var(--serif) !important;
  font-size:22px !important;
  color:var(--ink) !important;
  margin:0 0 22px;
}
.woocommerce-form-login .woocommerce-form-login__rememberme{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13.5px !important;
  color:var(--charcoal) !important;
  margin:16px 0;
}
.woocommerce-form-login .lost_password a,
.woocommerce-LostPassword a{ color:var(--red) !important; font-size:13.5px !important; }

.woocommerce-form-login button[type="submit"],
.woocommerce-form-register button[type="submit"],
.woocommerce-EditAccountForm button[type="submit"],
.woocommerce-address-fields button[type="submit"]{
  display:inline-flex;
  align-items:center;
  padding:15px 28px;
  font-family:var(--sans) !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:.14em;
  text-transform:uppercase;
  border:1px solid var(--ink) !important;
  border-radius:0 !important;
  background:var(--ink) !important;
  color:var(--white) !important;
  cursor:pointer;
  transition:background .3s ease, border-color .3s ease;
}
.woocommerce-form-login button[type="submit"]:hover,
.woocommerce-form-register button[type="submit"]:hover,
.woocommerce-EditAccountForm button[type="submit"]:hover,
.woocommerce-address-fields button[type="submit"]:hover{ background:var(--red) !important; border-color:var(--red) !important; }

/* Orders table reuses table.shop_table from the cart section above. */
.woocommerce-orders-table__cell-order-actions .button,
.woocommerce-orders-table__cell-order-actions a.button{
  display:inline-block;
  margin:2px 6px 2px 0;
  padding:8px 16px;
  font-size:11px !important;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid var(--line-strong) !important;
  border-radius:0 !important;
  background:none !important;
  color:var(--ink) !important;
  text-decoration:none !important;
}
.woocommerce-orders-table__cell-order-actions .button:hover{ background:var(--ink) !important; color:var(--white) !important; }

/* Addresses tab */
.woocommerce-Addresses{ display:block; }
@media (min-width:760px){ .woocommerce-Addresses{ display:grid; grid-template-columns:1fr 1fr; gap:50px; } }
.woocommerce-Address-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}
.woocommerce-Address-title h2{ font-family:var(--serif) !important; font-size:19px !important; color:var(--ink) !important; margin:0; }
.woocommerce-Address-title .edit{ font-size:11px !important; letter-spacing:.08em; text-transform:uppercase; color:var(--red) !important; }
address{ font-style:normal; font-size:14.5px !important; color:var(--charcoal) !important; line-height:1.7; }

/* =========================== SECTION SCAFFOLD =========================== */
section{ position:relative; }
.section{ padding:100px 0; }
.section-tight{ padding:64px 0; }
.section-paper{ background:var(--paper); }
.section-ink{ background:var(--ink); color:#d8d6d1; }
.section-ink h2, .section-ink h3{ color:var(--white); }

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  margin-bottom:52px;
  flex-wrap:wrap;
}
.section-head h2{ font-size:clamp(30px,4.4vw,50px); margin-top:14px; }
.section-head p{ max-width:380px; font-size:15px; color:var(--charcoal); }
.section-ink .section-head p{ color:#b9b6b0; }

/* ============================ MANIFESTO ============================ */
.manifesto{
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  align-items:center;
}
@media (min-width:900px){ .manifesto{ grid-template-columns:.7fr 1fr; gap:80px; } }
.manifesto-mark img{ width:64px; opacity:.9; }
.manifesto-quote{
  font-family:var(--serif);
  font-size:clamp(24px, 3.4vw, 38px);
  line-height:1.35;
  color:var(--ink);
}
.manifesto-quote em{ color:var(--red); font-style:italic; }
.manifesto-foot{
  margin-top:28px;
  display:flex;
  gap:28px;
  align-items:center;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--red);
}

/* ============================ PRODUCT GRID ============================ */
.product-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2px;
  background:var(--line);
}
@media (min-width:760px){ .product-grid{ grid-template-columns:1fr 1fr; } }
.product-card{
  background:var(--white);
  position:relative;
  display:block;
  overflow:hidden;
}
.product-media{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  background:#efece6;
}
.product-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease), opacity .5s ease;
}
.product-media img.img-alt{ position:absolute; inset:0; opacity:0; }
.product-card:hover .product-media img.img-main{ transform:scale(1.06); opacity:0; }
.product-card:hover .product-media img.img-alt{ opacity:1; transform:scale(1.06); }
.product-badge{
  position:absolute; top:18px; left:18px;
  background:var(--white);
  padding:7px 12px;
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--red);
  z-index:2;
}
.product-badge.out{ color:var(--charcoal); }
.product-info{
  padding:26px 28px 32px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
}
.product-info h3{ font-size:22px; margin-bottom:8px; }
.product-info .price{ font-family:var(--sans); font-weight:600; color:var(--ink); font-size:15px; }
.product-info .meta{ font-size:12.5px; color:var(--charcoal); }
.product-arrow{
  width:38px; height:38px;
  border:1px solid var(--ink);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.product-arrow svg{ width:14px; height:14px; transition:transform .3s var(--ease); }
.product-card:hover .product-arrow{ background:var(--red); border-color:var(--red); }
.product-card:hover .product-arrow svg{ transform:rotate(45deg); color:var(--white); }

/* ============================ STORY TEASER ============================ */
.story-teaser{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
}
@media (min-width:900px){ .story-teaser{ grid-template-columns:1.05fr .95fr; } }
.story-teaser-img{ aspect-ratio:4/5; overflow:hidden; }
.story-teaser-img img{ width:100%; height:100%; object-fit:cover; }
.story-teaser-copy{
  padding:60px var(--gutter);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
@media (min-width:900px){ .story-teaser-copy{ padding:60px 0 60px 80px; } }
.story-teaser-copy p{ font-size:17px; color:var(--charcoal); margin:20px 0 28px; max-width:460px; }

/* ============================ VALUES STRIP ============================ */
.values-strip{
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  background:var(--line);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
@media (min-width:760px){ .values-strip{ grid-template-columns:repeat(3,1fr); } }
.value-item{
  background:var(--white);
  padding:44px var(--gutter);
}
@media (min-width:760px){ .value-item{ padding:52px 44px; } }
.value-item svg{ width:30px; height:30px; color:var(--red); margin-bottom:22px; }
.value-item h4{ font-size:19px; margin-bottom:10px; }
.value-item p{ font-size:14.5px; color:var(--charcoal); }

/* ============================ NEWSLETTER ============================ */
.newsletter{
  background:var(--ink);
  color:var(--white);
  padding:80px 0;
}
.newsletter-inner{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:30px;
}
.newsletter h2{ color:var(--white); font-size:clamp(26px,3.6vw,40px); max-width:420px; }
.newsletter-form{
  display:flex;
  gap:0;
  width:100%;
  max-width:420px;
  border-bottom:1px solid rgba(255,255,255,.4);
  padding-bottom:12px;
}
.newsletter-form input{
  flex:1;
  background:transparent;
  border:none;
  color:var(--white);
  font-family:var(--sans);
  font-size:15px;
  outline:none;
}
.newsletter-form input::placeholder{ color:#9a978f; }
.newsletter-form button{
  background:none; border:none; color:var(--white);
  display:flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
}
.newsletter-form button svg{ width:14px; height:14px; }

/* ============================ SUPPORT / PARTNERS ============================ */
.support-strip{
  padding:56px 0;
  border-top:1px solid var(--line);
}
.support-strip .wrap{ display:flex; flex-wrap:wrap; align-items:center; gap:40px; justify-content:space-between; }
.support-text{ font-size:12.5px; color:var(--charcoal); max-width:280px; }
.support-logos{ display:flex; align-items:center; gap:34px; flex-wrap:wrap; }
.support-logos img{ height:34px; width:auto; filter:grayscale(1); opacity:.75; }

.payment-strip{ padding:34px 0; border-top:1px solid var(--line); }
.payment-strip .wrap{ display:flex; flex-wrap:wrap; gap:22px; align-items:center; }
.payment-strip img{ height:22px; width:auto; opacity:.85; }

/* =============================== FOOTER =============================== */
footer{ background:var(--white); border-top:1px solid var(--line); }
.footer-top{
  padding:80px 0 60px;
  display:grid;
  grid-template-columns:1fr;
  gap:50px;
}
@media (min-width:860px){ .footer-top{ grid-template-columns:1.3fr .7fr .7fr 1fr; gap:30px; } }
.footer-brand img{ height:26px; margin-bottom:20px; }
.footer-brand p{ font-size:13.5px; color:var(--charcoal); max-width:280px; }
.footer-col h5{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
  margin-bottom:18px; font-weight:700; font-family:var(--sans);
}
.footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.footer-col a{ font-size:14px; color:var(--charcoal); transition:color .25s ease; }
.footer-col a:hover{ color:var(--red); }
.footer-socials{ display:flex; gap:16px; margin-top:20px; }
.footer-socials svg{ width:17px; height:17px; }
.footer-socials a{ color:var(--ink); transition:color .25s ease; }
.footer-socials a:hover{ color:var(--red); }
.footer-bottom{
  border-top:1px solid var(--line);
  padding:26px 0;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:14px;
  font-size:12.5px;
  color:var(--charcoal);
}

/* =============================== UTILITIES =============================== */
.grid-2{ display:grid; grid-template-columns:1fr; gap:60px; }
@media (min-width:900px){ .grid-2{ grid-template-columns:1fr 1fr; gap:90px; } }
.center{ text-align:center; }
.mt0{ margin-top:0; }
.tag-strip{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.tag-pill{
  border:1px solid var(--line-strong);
  padding:7px 14px;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--charcoal);
}

/* ============================ SHOP TOOLBAR ============================ */
.shop-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  padding:26px 0;
  border-bottom:1px solid var(--line);
  font-size:12.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--charcoal);
}
.shop-toolbar .sort{ display:flex; align-items:center; gap:8px; }
.shop-toolbar svg{ width:12px; height:12px; }

/* Real WooCommerce result-count (<p>) and ordering (<form><select>)
   markup — different tags/structure than a plain <span>, so browser
   default margins need resetting and the <select> needs our
   typography applied explicitly (native <select> styling doesn't
   inherit from surrounding text the way a span would). */
.shop-toolbar .woocommerce-result-count{
  margin:0;
  font: inherit;
  order:1;
}
.shop-toolbar .woocommerce-ordering{
  margin:0;
  order:2;
}
.shop-toolbar .woocommerce-ordering select{
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:inherit;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--charcoal);
  background:none;
  border:none;
  cursor:pointer;
  padding:0 18px 0 0;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23414141' stroke-width='1.8'%3E%3Cpath d='M6 9l6 6 6-6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right center;
  background-size:12px 12px;
}
.shop-toolbar .woocommerce-ordering select:focus-visible{
  outline:2px solid var(--red);
  outline-offset:3px;
}

/* ============================ PRODUCT DETAIL ============================ */
.product-detail{
  display:grid;
  grid-template-columns:1fr;
  gap:50px;
  padding:150px 0 40px;
}
@media (min-width:960px){ .product-detail{ grid-template-columns:1.15fr .85fr; gap:70px; padding-top:160px; } }

.gallery-main{
  aspect-ratio:3/4;
  overflow:hidden;
  background:#efece6;
  margin-bottom:12px;
}
.gallery-main img{ width:100%; height:100%; object-fit:cover; }
.gallery-thumbs{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
}
.gallery-thumbs button{
  padding:0; border:1px solid transparent; background:none;
  aspect-ratio:3/4; overflow:hidden;
}
.gallery-thumbs button img{ width:100%; height:100%; object-fit:cover; opacity:.72; transition:opacity .3s ease; }
.gallery-thumbs button.active img,
.gallery-thumbs button:hover img{ opacity:1; }
.gallery-thumbs button.active{ border-color:var(--red); }

.product-head{ margin-bottom:22px; }
.product-head .price{ font-size:20px; font-weight:600; color:var(--ink); margin-top:10px; }
.product-desc p{ margin:0 0 14px; font-size:15.5px; color:var(--charcoal); }
.product-desc p:last-child{ margin-bottom:0; }

.stock-row{
  display:flex; align-items:center; gap:10px;
  margin:22px 0; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
}
.stock-dot{ width:8px; height:8px; border-radius:50%; background:var(--red); }
.stock-row.out .stock-dot{ background:var(--charcoal); }

.option-row{ margin-bottom:24px; }
.option-row label{ display:block; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); font-weight:700; margin-bottom:12px; }
.swatches{ display:flex; gap:12px; }
.swatch{
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line-strong);
  cursor:pointer; position:relative;
}
.swatch.active::after{
  content:''; position:absolute; inset:-5px; border:1px solid var(--ink); border-radius:50%;
}
.swatch[data-color="blue"]{ background:#33465c; }
.swatch[data-color="green"]{ background:#4b5842; }

.qty-cart{ display:flex; gap:14px; align-items:stretch; margin-top:30px; flex-wrap:wrap; }
.qty-select{
  display:flex; align-items:center; border:1px solid var(--ink); width:120px;
}
.qty-select button{ width:38px; background:none; border:none; font-size:16px; color:var(--ink); }
.qty-select input{
  width:100%; border:none; text-align:center; font-family:var(--sans); font-size:14px; background:none; -moz-appearance:textfield;
}
.qty-cart .btn{ flex:1; justify-content:center; }

.notify-form{ display:flex; gap:0; border-bottom:1px solid var(--ink); max-width:360px; margin-top:26px; padding-bottom:10px; }
.notify-form input{ flex:1; border:none; background:none; font-family:var(--sans); font-size:14.5px; outline:none; }
.notify-form button{ background:none; border:none; display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--red); }
.notify-form button svg{ width:13px; height:13px; }

.accordion{ margin-top:40px; border-top:1px solid var(--line); }
.accordion-item{ border-bottom:1px solid var(--line); }
.accordion-trigger{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  background:none; border:none; padding:20px 0; text-align:left;
  font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink);
}
.accordion-trigger .plus{ width:16px; height:16px; position:relative; flex-shrink:0; }
.accordion-trigger .plus::before,.accordion-trigger .plus::after{
  content:''; position:absolute; background:var(--ink); transition:transform .35s var(--ease), opacity .35s;
}
.accordion-trigger .plus::before{ top:50%; left:0; width:100%; height:1.5px; transform:translateY(-50%); }
.accordion-trigger .plus::after{ left:50%; top:0; width:1.5px; height:100%; transform:translateX(-50%); }
.accordion-item.open .plus::after{ transform:translateX(-50%) rotate(90deg); opacity:0; }
.accordion-panel{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease); }
.accordion-panel-inner{ padding:0 0 22px; font-size:14.5px; color:var(--charcoal); }
.accordion-panel-inner p{ margin:0 0 10px; }
.accordion-panel-inner p:last-child{ margin-bottom:0; }

.credit-note{
  margin-top:30px; padding:22px 24px; background:var(--paper); border-left:2px solid var(--red);
  font-size:13.5px; color:var(--charcoal);
}
.credit-note strong{ color:var(--ink); }

.product-strip-images{
  display:grid; grid-template-columns:1fr 1fr; gap:2px; margin-top:2px;
}
.product-strip-images img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; }

.related{ padding:90px 0 100px; border-top:1px solid var(--line); }

/* ============================ STORY PAGE ============================ */
.story-hero-img{ width:100%; aspect-ratio:16/10; overflow:hidden; margin-top:50px; }
.story-hero-img img{ width:100%; height:100%; object-fit:cover; }

.story-block{
  max-width:720px; margin:0 auto;
  padding:70px var(--gutter);
}
.story-block p{ font-size:18px; line-height:1.75; color:var(--charcoal); margin:0 0 24px; }
.story-block p:last-child{ margin-bottom:0; }
.story-lede{ font-family:var(--serif); font-size:clamp(22px,2.6vw,30px); color:var(--ink); line-height:1.5; }

.pictogram-divider{ display:flex; justify-content:center; padding:20px 0 50px; }
.pictogram-divider img{ width:44px; opacity:.85; }

.story-trio{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line);
}
.story-trio img{ width:100%; height:100%; object-fit:cover; aspect-ratio:3/4; }
@media (max-width:700px){ .story-trio{ grid-template-columns:1fr; } }

.story-full-img{ aspect-ratio:16/9; overflow:hidden; }
.story-full-img img{ width:100%; height:100%; object-fit:cover; }

.credits-masthead{
  padding:80px var(--gutter);
  background:var(--ink); color:#cfccc6;
}
.credits-masthead .wrap-narrow{ max-width:760px; margin:0 auto; }
.credits-masthead h3{ color:var(--white); font-size:14px; }
.credits-list{
  display:grid; grid-template-columns:1fr 1fr; gap:14px 30px; margin-top:34px;
}
@media (max-width:600px){ .credits-list{ grid-template-columns:1fr; } }
.credit-row{ display:flex; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.12); padding-bottom:10px; font-size:13.5px; }
.credit-row .role{ letter-spacing:.06em; text-transform:uppercase; font-size:11px; color:#8f8c86; }
.credit-row .name{ font-family:var(--serif); color:var(--white); font-size:15px; }
.credits-foot{ margin-top:30px; font-size:12.5px; color:#9c9992; }

/* ============================ CONTACT PAGE ============================ */
.contact-layout{
  display:grid; grid-template-columns:1fr; gap:0;
}
@media (min-width:900px){ .contact-layout{ grid-template-columns:1fr 1fr; } }
.contact-img{ min-height:340px; overflow:hidden; }
.contact-img img{ width:100%; height:100%; object-fit:cover; }
.contact-panel{ padding:90px var(--gutter); }
@media (min-width:900px){ .contact-panel{ padding:170px 70px 90px; } }
.contact-address{ margin:26px 0 46px; font-size:15px; color:var(--charcoal); line-height:1.8; }
.contact-address strong{ display:block; color:var(--ink); font-family:var(--serif); font-size:19px; margin-bottom:8px; }

.field{ margin-bottom:26px; position:relative; }
.field label{
  position:absolute; left:0; top:14px;
  font-size:15px; color:#8a877f;
  transition:transform .25s var(--ease), font-size .25s var(--ease), color .25s ease;
  pointer-events:none;
}
.field input, .field textarea{
  width:100%; border:none; border-bottom:1px solid var(--line-strong);
  background:none; padding:14px 0 10px; font-family:var(--sans); font-size:15px; color:var(--ink);
  outline:none; resize:none;
}
.field input:focus, .field textarea:focus{ border-color:var(--red); }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label{
  transform:translateY(-20px); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--red);
}
.field.textarea textarea{ min-height:120px; }
.form-note{ font-size:12.5px; color:#8a877f; margin-top:-6px; margin-bottom:24px; }

/* ============================ MISC ============================ */
.jib{ font-size:12px; color:#8a877f; }

/* ============================ FLUENT FORMS OVERRIDES ============================
   Reskins Fluent Forms' own rendered markup to match the brand, rather
   than fighting its DOM structure to force the original hand-built
   .field/floating-label markup — that structure was designed before a
   real form plugin was in the picture. Class names below (ff-el-*)
   match Fluent Forms' documented BEM-style naming, stable across
   recent versions.

   !important throughout on visual properties (not layout) — same
   defensive pattern already proven necessary for WooCommerce's own
   Cart/Checkout/My Account CSS elsewhere in this file. Confirmed
   needed here too, not just theorized: on a real built form, input
   fields' resting state looked right (nothing in Fluent Forms'
   default stylesheet contests plain color/border there), but the
   focus state only changed to Fluent Forms' own default blue, the
   textarea didn't match at all (its own default styling is evidently
   more specific/aggressive than a plain text input's), and the submit
   button showed only the border color while background/text color
   were still Fluent Forms' own — all three are exactly the kind of
   "our rule matches but loses the cascade" symptom !important fixes. */

.eterna-form-wrap{ margin-top: 6px; }

.fluentform{ font-family: var(--sans) !important; }

.fluentform .ff-el-group{
  margin-bottom: 26px;
}

.fluentform label,
.fluentform .ff-el-input-label label{
  display: block;
  font-size: 11px !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red) !important;
  font-weight: 600 !important;
  margin-bottom: 8px;
}

.fluentform .ff-el-form-control,
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform textarea,
.fluentform textarea.ff-el-form-control,
.fluentform select{
  width: 100% !important;
  border: none !important;
  border-bottom: 1px solid var(--line-strong) !important;
  background: none !important;
  background-color: transparent !important;
  padding: 12px 0 10px !important;
  font-family: var(--sans) !important;
  font-size: 15px !important;
  color: var(--ink) !important;
  outline: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.fluentform .ff-el-form-control:focus,
.fluentform input:focus,
.fluentform textarea:focus,
.fluentform textarea.ff-el-form-control:focus,
.fluentform select:focus{
  border: none !important;
  border-bottom: 1px solid var(--red) !important;
  box-shadow: none !important;
  outline: none !important;
}

.fluentform textarea,
.fluentform textarea.ff-el-form-control{
  min-height: 120px !important;
  resize: none !important;
}

.fluentform button[type="submit"],
.fluentform .ff-btn-submit,
.fluentform input[type="submit"]{
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  width: auto !important;
  padding: 16px 30px !important;
  font-family: var(--sans) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 1px solid var(--red) !important;
  background: var(--red) !important;
  background-color: var(--red) !important;
  background-image: none !important;
  color: var(--white) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.fluentform button[type="submit"]:hover,
.fluentform .ff-btn-submit:hover,
.fluentform input[type="submit"]:hover{
  background: var(--red-deep) !important;
  background-color: var(--red-deep) !important;
  border-color: var(--red-deep) !important;
  color: var(--white) !important;
  transform: translateY(-2px);
}

.fluentform .ff-el-is-error .ff-el-form-control{
  border-color: var(--red) !important;
}
.fluentform .error,
.fluentform .ff-el-form-error{
  color: var(--red) !important;
  font-size: 12px !important;
  margin-top: 6px;
}

.fluentform .ff-message-success{
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red);
  margin-top: 16px;
}

/* Newsletter/notify forms are single-line (email + button side by
   side) in the static design — Fluent Forms renders fields stacked by
   default, so these two contexts get a layout override rather than
   trying to fight the plugin's row/column system generically.

   Confirmed against real rendered output (not guessed): Fluent Forms
   wraps its actual field content in a <fieldset> INSIDE the <form> —
   <form> itself only ever has that one child, so display:flex on
   <form> had no visible effect at all; <fieldset> is the real flex
   container. Also: there's a hidden honeypot spam-trap field
   (.ff-hpsf-container) that sits before the real email field in the
   DOM, so a positional :first-child selector was silently targeting
   the honeypot instead of the email input — targeting the email
   field's own class (.ff-el-form-hide_label) directly instead.

   The underline lives on <form> itself, NOT on <fieldset> — Fluent
   Forms puts an INLINE style="border: none!important; ..." directly
   on the fieldset, and inline !important cannot be beaten by any
   external stylesheet rule targeting that same element, no matter how
   the selector is written. <form> has no inline styles at all, so
   that's the safe target for the shared underline (matching the
   original static design, where .newsletter-form had ONE continuous
   border-bottom spanning the input and button together, not a border
   stopping short at the input's own edge). Default color here is the
   light-background variant (correct for Notify Me, on Shirt_001's
   white product page); overridden to a white-based variant below for
   .newsletter's dark background specifically. */
.eterna-form-wrap--newsletter .fluentform form{
  border-bottom: 1px solid var(--line-strong) !important;
  padding-bottom: 12px;
}
.eterna-form-wrap--newsletter .fluentform form:focus-within{
  border-bottom-color: var(--red) !important;
}
.eterna-form-wrap--newsletter .fluentform form fieldset{
  display: flex !important;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.eterna-form-wrap--newsletter .ff-el-group{
  margin-bottom: 0 !important;
}
.eterna-form-wrap--newsletter .ff-el-group.ff-el-form-hide_label{ flex: 1; min-width: 160px; }
.eterna-form-wrap--newsletter .fluentform .ff-el-form-control,
.eterna-form-wrap--newsletter .fluentform input{
  border-bottom: none !important; /* underline moved to <form> above */
}

/* The homepage newsletter form sits on the dark .newsletter section
   background (var(--ink)) — everything above assumes a light
   background, correctly, since that's what it was built against for
   Contact. Scoped to .newsletter specifically (not
   .eterna-form-wrap--newsletter, shared with the Notify Me form on
   Shirt_001's product page, which sits on a normal white background
   and needs the opposite color treatment) so this dark-mode override
   never leaks onto that other form. */
.newsletter .fluentform .ff-el-form-control,
.newsletter .fluentform input{
  color: var(--white) !important;
}
.newsletter .fluentform .ff-el-form-control::placeholder,
.newsletter .fluentform input::placeholder{
  color: #9a978f !important;
  opacity: 1 !important;
}
.newsletter .fluentform form{
  border-bottom-color: rgba(255,255,255,.4) !important;
}
.newsletter .fluentform form:focus-within{
  border-bottom-color: var(--red) !important;
}

/* Submit button, both forms: the static design used a minimal
   text-link style (no background, plus a small icon) rather than the
   solid red CTA block used for Contact/Checkout — a big red rectangle
   reads as an assertive "buy now" commerce action, which doesn't fit
   a quiet signup/notify request. Shared base rule below (no color set
   here — that's context-specific, see .newsletter/.eterna-form-wrap--notify
   further down), then each context sets its own icon and text color.

   Icons added via ::after with a static (not currentColor) SVG
   data-URI — Fluent Forms renders its own <button> with no slot for
   the inline SVG icon system the rest of this theme uses
   (eterna_icon(), a PHP function; nothing to hook into on
   plugin-generated markup). Each context bakes in its own color
   (white for newsletter's dark background, ink for Notify Me's light
   one) since a data-URI SVG can't inherit currentColor the way an
   inline SVG or icon font can.

   No color change on hover in either context, deliberately — the
   icon nudges right instead (matching the same non-color hover motion
   every other button on the site already uses via .btn:hover svg). */
.eterna-form-wrap--newsletter .fluentform button[type="submit"],
.eterna-form-wrap--newsletter .fluentform .ff-btn-submit{
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  padding: 12px 0 10px !important;
}
.eterna-form-wrap--newsletter .fluentform button[type="submit"]::after,
.eterna-form-wrap--newsletter .fluentform .ff-btn-submit::after{
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform .35s var(--ease);
}
.eterna-form-wrap--newsletter .fluentform button[type="submit"]:hover::after,
.eterna-form-wrap--newsletter .fluentform .ff-btn-submit:hover::after{
  transform: translateX(3px);
}

.newsletter .fluentform button[type="submit"],
.newsletter .fluentform .ff-btn-submit{ color: var(--white) !important; }
.newsletter .fluentform button[type="submit"]::after,
.newsletter .fluentform .ff-btn-submit::after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.newsletter .fluentform button[type="submit"]:hover,
.newsletter .fluentform .ff-btn-submit:hover{
  background: none !important;
  color: var(--white) !important;
}

/* Notify Me (Shirt_001 product page) — light background, so text
   needs to be dark, not white; icon is 'send' (a paper-airplane
   shape), matching the original static design's icon choice for this
   specific action rather than reusing the newsletter's arrow. */
.eterna-form-wrap--notify .fluentform button[type="submit"],
.eterna-form-wrap--notify .fluentform .ff-btn-submit{ color: var(--ink) !important; }
.eterna-form-wrap--notify .fluentform button[type="submit"]::after,
.eterna-form-wrap--notify .fluentform .ff-btn-submit::after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23181818' stroke-width='1.6'%3E%3Cpath d='M4 20 20.5 12 4 4l2.5 7L4 20Zm2.7-8h9.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.eterna-form-wrap--notify .fluentform button[type="submit"]:hover,
.eterna-form-wrap--notify .fluentform .ff-btn-submit:hover{
  background: none !important;
  color: var(--ink) !important;
}

/* ============================ ACCESSIBILITY ============================ */

/* Skip link — visually hidden until focused, standard pattern so
   keyboard/screen-reader users can bypass the header/nav entirely. */
.skip-link{
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 300;
  background: var(--ink);
  color: var(--white);
  padding: 12px 20px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  transition: top .25s var(--ease);
}
.skip-link:focus{
  top: 0;
}

/* Screen-reader-only utility (WordPress' standard pattern), available
   for anything added later that needs a label without visible text. */
.screen-reader-text{
  border: 0;
  clip: rect(1px,1px,1px,1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute !important;
  word-wrap: normal !important;
}

/* Visible focus states. Contrast-checked: var(--red) #c4232d on white
   is 5.79:1 (WCAG AA requires 4.5:1 for normal text) — safe as an
   outline color against the light backgrounds used throughout. Scoped
   to :focus-visible so mouse/touch interaction doesn't show an
   outline that was really meant for keyboard navigation. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.swatch:focus-visible,
.gallery-thumbs button:focus-visible{
  outline: 2px solid var(--red);
  outline-offset: 3px;
}
.hero a:focus-visible,
.section-ink a:focus-visible,
.newsletter a:focus-visible,
.newsletter button:focus-visible{
  outline-color: var(--white);
}

/* ============================ EDITORIAL / COLLAB PAGE ============================ */

.editorial-hero{
  position:relative;
  min-height:78vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--ink);
}
.editorial-hero img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 10%;
  opacity:.9;
}
.editorial-hero::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.05) 35%, rgba(0,0,0,.78) 100%);
}
.editorial-hero-content{
  position:relative;
  z-index:2;
  padding:0 var(--gutter) 60px;
  color:var(--white);
}
.editorial-hero-content .eyebrow{ color:#f0b9bd; }
.editorial-hero-content .eyebrow::before{ background:#f0b9bd; }
.editorial-hero-title{
  font-size:clamp(32px,5.4vw,64px);
  color:var(--white);
  margin-top:14px;
  max-width:820px;
}

.editorial-block{
  max-width:760px; margin:0 auto;
  padding:70px var(--gutter);
}
.editorial-block p{ font-size:17px; line-height:1.75; color:var(--charcoal); margin:0 0 22px; }
.editorial-block p:last-child{ margin-bottom:0; }
.editorial-lede{ font-family:var(--serif); font-size:clamp(21px,2.4vw,27px); color:var(--ink); line-height:1.5; }

.editorial-section-head{
  max-width:760px; margin:0 auto;
  padding:0 var(--gutter);
}
.editorial-section-head .eyebrow{ margin-bottom: 4px; }

.editorial-cta-row{
  max-width:760px; margin:0 auto;
  padding:0 var(--gutter) 10px;
}

/* -------------------------------- Inline editorial images --------------------------------
   Images woven through the body copy, editorial/blog-article style,
   rather than collected into a separate gallery grid — generous
   vertical margins are the point here ("let the page breathe"), not
   density. Two treatments alternated for rhythm: .full breaks out to
   the full viewport width for an occasional dramatic pause; .inset
   stays within a comfortable reading-adjacent width and can align
   left or right. Neither assumes a particular photo orientation,
   since which actual images land in which slot depends on how many
   are in the ACF gallery field and in what order. */
.editorial-inline-image{
  margin:70px 0;
}
.editorial-inline-image img{
  width:100%;
  height:auto;
  display:block;
}
.editorial-inline-image.full{
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
}
.editorial-inline-image.full img{
  max-height:82vh;
  object-fit:cover;
}
.editorial-inline-image.inset{
  max-width:520px;
  padding:0 var(--gutter);
  margin-left:auto;
  margin-right:auto;
}
.editorial-inline-image.inset.align-left{ margin-left:0; }
.editorial-inline-image.inset.align-right{ margin-right:0; }
@media (min-width:900px){
  .editorial-inline-image.inset{ padding:0; }
  .editorial-inline-image.inset.align-left{ margin-left:max(var(--gutter), calc(50% - 630px)); }
  .editorial-inline-image.inset.align-right{ margin-right:max(var(--gutter), calc(50% - 630px)); }
}

/* -------------------------------- Gallery grid --------------------------------
   No longer used on the Marko Feher x Eterna page (images now flow
   inline through the copy instead — see .editorial-inline-image
   above), kept here in case a future page wants a dedicated grid +
   lightbox gallery. */
.editorial-gallery{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:2px;
  background:var(--line);
}
.editorial-gallery button{
  position:relative;
  padding:0; border:none; background:none;
  overflow:hidden;
  aspect-ratio:4/5;
  grid-column:span 2;
}
.editorial-gallery button.wide{
  grid-column:span 4;
  aspect-ratio:16/9;
}
@media (min-width:760px){
  .editorial-gallery button{ grid-column:span 1; }
  .editorial-gallery button.wide{ grid-column:span 2; aspect-ratio:16/9; }
}
.editorial-gallery img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.editorial-gallery button:hover img{ transform:scale(1.05); }
.editorial-gallery button::after{
  content:'';
  position:absolute; inset:0;
  background:rgba(20,20,20,0);
  transition:background .35s ease;
}
.editorial-gallery button:hover::after{ background:rgba(20,20,20,.12); }
.editorial-gallery button .expand-icon{
  position:absolute; top:14px; right:14px;
  width:30px; height:30px;
  border-radius:50%;
  background:rgba(255,255,255,.9);
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  transition:opacity .3s ease;
}
.editorial-gallery button:hover .expand-icon{ opacity:1; }
.editorial-gallery button .expand-icon svg{ width:14px; height:14px; color:var(--ink); }

/* -------------------------------- Lightbox -------------------------------- */
.lightbox{
  position:fixed; inset:0;
  z-index:400;
  background:rgba(12,12,12,.94);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility 0s linear .3s;
}
.lightbox.is-open{
  opacity:1;
  visibility:visible;
  transition:opacity .3s ease, visibility 0s linear 0s;
}
.lightbox-figure{
  position:relative;
  max-width:88vw;
  max-height:86vh;
}
.lightbox-figure img{
  max-width:88vw;
  max-height:86vh;
  width:auto; height:auto;
  display:block;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.lightbox-close,
.lightbox-prev,
.lightbox-next{
  position:fixed;
  background:rgba(255,255,255,.12);
  border:none;
  color:var(--white);
  width:44px; height:44px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s ease;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover{ background:rgba(255,255,255,.24); }
.lightbox-close{ top:22px; right:22px; }
.lightbox-close svg{ width:18px; height:18px; }
.lightbox-prev{ left:22px; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:22px; top:50%; transform:translateY(-50%); }
.lightbox-prev svg, .lightbox-next svg{ width:20px; height:20px; }
.lightbox-counter{
  position:fixed;
  bottom:26px; left:50%;
  transform:translateX(-50%);
  color:#cfccc6;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
@media (max-width:700px){
  .lightbox-prev{ left:10px; }
  .lightbox-next{ right:10px; }
  .lightbox-close{ top:14px; right:14px; }
}

/* ============================ 404 PAGE ============================ */
.not-found-hero{
  min-height:70vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:160px var(--gutter) 100px;
}
.not-found-title{
  font-size:clamp(36px,6vw,64px);
  margin-top:16px;
}
.not-found-sub{
  max-width:480px;
  margin:20px auto 0;
  color:var(--charcoal);
  font-size:16px;
}
.not-found-actions{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:34px;
}