/*
Theme Name: Bane Capsule — Cinematic
Theme URI: https://banecapsule.co.za
Description: Bane Capsule — CINEMATIC direction (warm editorial). OceanWP child applying the Bane Capsule storefront system: Bodoni Moda Didone headings + Archivo, warm ink-on-paper, 3-column editorial product grid, square serif-captioned cards, restrained motion. Includes a warm⇄mono tone toggle. Built by LogsOfN from the Design System.
Author: LogsOfN
Template: oceanwp
Version: 2.0.0
Text Domain: bane-capsule-cinematic
*/

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;1,6..96,400;1,6..96,500&family=Archivo:wght@400;500;600;700&display=swap');

/* ===== TOKENS — Cinematic (warm) ============================ */
:root{
  --ink:#1b1a18; --ink-soft:#524e46; --paper:#f1ece4; --paper-2:#e9e3d8; --white:#fff;
  --ash-900:#6f6d6a; --ash-700:#8a857c; --ash-500:#a8a6a3; --ash-300:#c9c7c4; --ash-100:#e6e4e1;
  --azure:#a6c0d4; --camel:#c9ae86; --navy:#20242e;
  --line:#d8d1c5; --line-strong:#b9b6b1;
  --shadow-paper:0 1px 2px rgba(27,26,24,.05),0 18px 40px -24px rgba(27,26,24,.28);
  --shadow-lift:0 2px 6px rgba(27,26,24,.06),0 40px 90px -44px rgba(27,26,24,.50);
  --serif:"Bodoni Moda",Georgia,"Times New Roman",serif;
  --sans:"Archivo",system-ui,"Helvetica Neue",sans-serif;
  --track-wordmark:.34em; --track-eyebrow:.26em; --track-caps:.14em;
  --r-sm:2px; --r-md:4px; --r-pill:999px;
}
.mono{ --ink:#0b0b0b; --ink-soft:#454545; --paper:#fff; --paper-2:#f3f2f0; --line:#e4e3e1; --line-strong:#cfcdca; --ash-700:#8c8c8c; }
.mono img{ filter:grayscale(1) contrast(1.04); }

/* ===== BASE ================================================= */
body,.oceanwp-default-style #wrap{
  background:var(--paper); color:var(--ink-soft);
  font-family:var(--sans); font-weight:400; line-height:1.7; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,.entry-title,.page-header-title,.product_title,
.woocommerce-loop-product__title,.related h2,.cross-sells h2,.cart_totals h2,
.woocommerce-billing-fields h3,.woocommerce-column__title,.widget-title{
  font-family:var(--serif)!important; font-weight:400!important; color:var(--ink);
  letter-spacing:-.015em; line-height:1.02;
}
h1,.entry-title{ font-size:clamp(2.6rem,5.2vw,4.5rem); line-height:.92; }
h2{ font-size:clamp(1.9rem,3.4vw,3rem); }
h3{ font-size:1.6rem; }
em,i,.italic{ font-style:italic; }
p,.entry-content,li{ color:var(--ink-soft); }
a{ color:var(--ink); text-underline-offset:3px; }
a:hover{ color:var(--ash-900); }

/* eyebrow */
.bc-eyebrow,.woocommerce-breadcrumb{
  font-family:var(--sans); font-weight:500; font-size:.7rem; text-transform:uppercase;
  letter-spacing:var(--track-eyebrow); color:var(--ash-700);
}

/* ===== HEADER / NAV — centred wordmark, hairline bar ========= */
#site-header,.oceanwp-default-style #site-header{ background:var(--paper); border-bottom:1px solid var(--line); box-shadow:none; }
.site-logo-text,.logo-text a,#site-logo .site-logo-text{
  font-family:var(--sans)!important; font-weight:600!important; text-transform:uppercase;
  letter-spacing:var(--track-wordmark); color:var(--ink)!important; font-size:1rem;
}
#site-navigation-wrap .dropdown-menu>li>a,#site-header .navigation a,.oceanwp-mobile-menu-icon a{
  font-family:var(--sans); font-weight:500; text-transform:uppercase;
  letter-spacing:var(--track-caps); font-size:.76rem; color:var(--ink);
}

/* ===== BUTTONS — ink fill, paper text, near-square ========== */
.button,.wp-block-button__link,.woocommerce a.button,.woocommerce button.button,
.woocommerce input.button,.woocommerce #respond input#submit,.woocommerce .button.alt,
.single_add_to_cart_button,.checkout-button,.wc-block-components-button{
  font-family:var(--sans)!important; font-weight:600!important; font-size:.74rem!important;
  text-transform:uppercase!important; letter-spacing:var(--track-caps)!important;
  padding:15px 30px!important; border:1px solid var(--ink)!important; background:var(--ink)!important;
  color:var(--paper)!important; border-radius:var(--r-sm)!important; box-shadow:none!important;
  transition:opacity .25s ease!important;
}
.button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,
.single_add_to_cart_button:hover,.checkout-button:hover{ opacity:.72!important; }
.woocommerce a.added_to_cart,.woocommerce .button.wc-backward{ background:transparent!important; color:var(--ink)!important; }

/* ===== SHOP — 3-col editorial grid ========================== */
.woocommerce ul.products,.woocommerce-page ul.products{
  display:grid!important; grid-template-columns:repeat(3,1fr)!important;
  gap:52px 30px!important; margin:0; padding:0;
}
@media(max-width:1024px){ .woocommerce ul.products{ grid-template-columns:repeat(2,1fr)!important; gap:40px 22px!important; } }
@media(max-width:560px){ .woocommerce ul.products{ grid-template-columns:1fr!important; } }
.woocommerce ul.products li.product{
  width:auto!important; margin:0!important; padding:0!important; float:none!important;
  background:transparent; border:none; box-shadow:none; text-align:left;
}
.woocommerce ul.products li.product a img{
  aspect-ratio:3/4; object-fit:cover; width:100%; margin:0 0 16px; border-radius:0;
  background:var(--paper-2); transition:opacity .35s ease;
}
.woocommerce ul.products li.product a:hover img{ opacity:.9; }
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--serif)!important; font-size:1.5rem!important; line-height:1.05;
  font-weight:400; color:var(--ink); padding:0; margin:0;
}
.woocommerce ul.products li.product .price{
  font-family:var(--sans)!important; font-weight:600!important; font-size:.82rem!important;
  color:var(--ink)!important; letter-spacing:.02em; margin-top:6px; display:block; padding:0;
}
.woocommerce ul.products li.product .price del{ color:var(--ash-500); font-weight:400; }
.woocommerce ul.products li.product .price ins{ text-decoration:none; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{ margin-top:14px; display:inline-block; }
.woocommerce ul.products li.product .onsale,.woocommerce span.onsale{
  position:absolute; background:var(--ink)!important; color:var(--paper)!important;
  font-family:var(--sans); font-weight:600; font-size:.58rem; text-transform:uppercase;
  letter-spacing:var(--track-caps); border-radius:0; min-height:0; min-width:0; line-height:1;
  padding:6px 10px; top:10px; left:10px; right:auto; margin:0;
}

/* shop header */
.woocommerce-products-header__title,.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{ font-family:var(--sans); }
.woocommerce-products-header__title.page-title{ font-family:var(--serif)!important; font-size:clamp(2.4rem,5vw,4rem); }
.woocommerce .woocommerce-ordering select{ font-family:var(--sans); text-transform:uppercase; letter-spacing:var(--track-caps); font-size:.7rem; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--white); padding:10px 14px; color:var(--ink); }

/* widget product categories as pill chips */
.widget_product_categories ul li a,.wc-block-product-categories-list a{
  font-family:var(--sans); text-transform:uppercase; letter-spacing:var(--track-caps);
  font-size:.68rem; color:var(--ash-900);
}

/* ===== SINGLE PRODUCT — gallery + info ====================== */
.woocommerce div.product{ font-family:var(--sans); }
.woocommerce div.product .product_title{ font-size:clamp(2.2rem,4.4vw,3.5rem); margin-top:.2em; }
.woocommerce div.product p.price,.woocommerce div.product span.price{
  font-family:var(--sans); font-weight:600; color:var(--ink); font-size:1.25rem;
}
.woocommerce div.product .woocommerce-product-details__short-description{ color:var(--ink-soft); max-width:42ch; }
.woocommerce div.product div.images img{ border-radius:0; background:var(--paper-2); }
.woocommerce .quantity .qty{ border:1px solid var(--line); border-radius:var(--r-sm); background:var(--white); font-family:var(--sans); color:var(--ink); padding:12px; }
/* size / variation as square chips */
.woocommerce div.product form.cart .variations td.value select,
.woocommerce div.product form.cart .variations select{
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--white);
  font-family:var(--sans); text-transform:uppercase; letter-spacing:var(--track-caps);
  font-size:.74rem; padding:12px 14px; color:var(--ink);
}
.woocommerce div.product form.cart .variations th{ font-family:var(--sans); text-transform:uppercase; letter-spacing:var(--track-caps); font-size:.68rem; color:var(--ash-900); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{ font-family:var(--sans); text-transform:uppercase; letter-spacing:var(--track-caps); font-size:.72rem; color:var(--ash-900); }
.woocommerce div.product .woocommerce-tabs .panel h2,.woocommerce #reviews h2{ font-family:var(--serif)!important; }

/* ===== CART / CHECKOUT / ACCOUNT =========================== */
.woocommerce table.shop_table{ border:1px solid var(--line); border-radius:0; }
.woocommerce table.shop_table th{ font-family:var(--sans); text-transform:uppercase; letter-spacing:var(--track-caps); font-size:.7rem; color:var(--ash-900); }
.woocommerce-cart table.cart td.product-name a,.woocommerce-checkout .product-name{ font-family:var(--serif); }
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text,.select2-container--default .select2-selection--single{
  border:1px solid var(--line-strong)!important; border-radius:var(--r-sm)!important; background:var(--white)!important;
  font-family:var(--sans); color:var(--ink); padding:13px 15px; box-shadow:none!important;
}
.woocommerce form .form-row input.input-text:focus{ outline:2px solid var(--ink); outline-offset:1px; border-color:var(--ink)!important; }
.woocommerce form .form-row label,.woocommerce-checkout label{ font-family:var(--sans); font-size:.72rem; text-transform:uppercase; letter-spacing:var(--track-caps); color:var(--ash-900); }
.woocommerce #payment,.woocommerce-checkout-review-order{ background:var(--paper-2); border:1px solid var(--line); border-radius:0; }
.woocommerce-message,.woocommerce-info{ border-top-color:var(--ink); background:var(--paper-2); font-family:var(--sans); color:var(--ink); }
.woocommerce-error{ border-top-color:var(--brick,#9e5b4a); }
.woocommerce-MyAccount-navigation ul li a{ font-family:var(--sans); text-transform:uppercase; letter-spacing:var(--track-caps); font-size:.72rem; }

/* ===== FOOTER ============================================== */
#footer,.footer-bottom{ background:var(--paper-2); color:var(--ink-soft); border-top:1px solid var(--line); }
#footer a{ color:var(--ink); }
#footer .widget-title{ font-family:var(--sans)!important; text-transform:uppercase; letter-spacing:var(--track-eyebrow); font-size:.72rem; color:var(--ash-900); }
#footer h2,#footer h3{ font-family:var(--serif)!important; }

/* ===== TONE TOGGLE BUTTON ================================== */
#bc-tone-toggle{
  position:fixed; right:18px; bottom:18px; z-index:99999;
  font-family:var(--sans); font-weight:600; font-size:.62rem; text-transform:uppercase;
  letter-spacing:var(--track-caps); padding:11px 17px; border:1px solid var(--ink);
  background:var(--ink); color:var(--paper); border-radius:var(--r-pill); cursor:pointer;
  box-shadow:var(--shadow-paper); transition:opacity .25s;
}
#bc-tone-toggle:hover{ opacity:.8; }

/* motion: quiet */
*{ scroll-behavior:smooth; }
img{ transition:opacity .35s ease, transform .6s cubic-bezier(.2,.6,.2,1); }

/* ===== HOMEPAGE (front-page.php) =========================== */
#bc-home{ font-family:var(--sans); }
.bc-eyebrow.bc-on-dark{ color:#fff!important; }
/* hero */
.bc-hero{ position:relative; min-height:88vh; background:#111; overflow:hidden; display:flex; }
.bc-hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 20%; }
.bc-hero-overlay{ position:absolute; inset:0; background:linear-gradient(to top,rgba(12,11,10,.66),transparent 48%),linear-gradient(to bottom,rgba(12,11,10,.4),transparent 22%); }
.bc-hero-in{ position:relative; align-self:flex-end; padding:0 40px 64px; max-width:920px; }
.bc-hero-h1{ font-family:var(--serif)!important; font-weight:400!important; color:#fff!important; font-size:clamp(2.6rem,7vw,6.5rem); line-height:.9; letter-spacing:-.01em; margin:.25em 0 0; }
.bc-hero-h1 em{ font-style:italic; }
.bc-hero-cta{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.bc-hero .button{ background:#fff!important; color:var(--ink)!important; border-color:#fff!important; }
.bc-btn-ghost-light{ background:transparent!important; color:#fff!important; border-color:#fff!important; }
/* collection */
.bc-collection{ padding:90px 40px; }
.bc-sec-head{ display:flex; justify-content:space-between; align-items:flex-end; border-bottom:1px solid var(--line); padding-bottom:30px; margin-bottom:46px; }
.bc-sec-head h2{ font-size:clamp(2rem,4vw,3.4rem); margin:.1em 0 0; }
.bc-viewall{ font-family:var(--sans); font-weight:500; text-transform:uppercase; letter-spacing:var(--track-caps); font-size:.72rem; border-bottom:1px solid var(--ink); padding-bottom:3px; white-space:nowrap; }
.bc-collection .woocommerce,.bc-collection ul.products{ margin:0!important; }
/* feature spread */
.bc-feature{ display:grid; grid-template-columns:46% 1fr; min-height:74vh; align-items:stretch; border-top:1px solid var(--line); }
.bc-feature-img{ overflow:hidden; background:var(--paper-2); }
.bc-feature-img img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; }
.bc-feature-txt{ align-self:center; padding:0 84px 0 56px; }
.bc-feature-txt h2{ font-size:clamp(2.2rem,4.5vw,4rem); margin:.18em 0 .45em; line-height:.98; }
.bc-feature-txt h2 em{ font-style:italic; }
.bc-feature-txt p{ max-width:46ch; margin-bottom:28px; }
@media(max-width:860px){ .bc-feature{ grid-template-columns:1fr; } .bc-feature-img{ min-height:62vh; } .bc-feature-txt{ padding:48px 28px; } }
/* newsletter */
.bc-news{ text-align:center; padding:100px 40px; background:var(--paper); border-top:1px solid var(--line); }
.bc-news h2{ font-size:clamp(2.2rem,4.5vw,4rem); margin:.12em 0 .3em; }
.bc-news h2 em{ font-style:italic; }
.bc-news p{ max-width:42ch; margin:0 auto; }