/*
Theme Name: Kode Men's Wear
Theme URI: https://kodebd.com
Author: M80 Branding and Communication
Author URI: #
Description: Editorial e-commerce theme for Kode Men's Wear — t-shirts, jeans, polos and the Old Money collection. Built for WooCommerce.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: kode
Tags: e-commerce, woocommerce, custom-menu, custom-logo, featured-images
*/

/* =========================================================
   0. DESIGN TOKENS
   ========================================================= */
:root{
  --kode-charcoal: #1B1A1D;
  --kode-charcoal-soft: #26242A;
  --kode-cream: #F3EEE4;
  --kode-cream-dim: #E9E1D2;
  --kode-oxblood: #5C2333;
  --kode-oxblood-dark: #3E1723;
  --kode-copper: #9C6259;
  --kode-stone: #B4A688;
  --kode-ink: #1D1A18;
  --kode-line: rgba(29,26,24,0.14);
  --kode-line-dark: rgba(243,238,228,0.16);

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Archivo', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  --radius-s: 2px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --content-max: 1320px;
}

/* =========================================================
   1. RESET & BASE
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--kode-cream);
  color: var(--kode-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }
input, select, textarea{ font-family: inherit; font-size: 1rem; }

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

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.4rem, 5vw, 4.6rem); font-weight: 480; }
h2{ font-size: clamp(1.8rem, 3vw, 2.6rem); }
h3{ font-size: 1.3rem; }

.eyebrow{
  font-family: var(--font-body);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--kode-stone);
  font-weight: 600;
}

:focus-visible{
  outline: 2px solid var(--kode-oxblood);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior:auto !important; }
}

/* =========================================================
   2. SIGNATURE MOTIF — the knot divider
   ========================================================= */
.kode-knot-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 1rem;
  margin: 0 auto;
  width: 100%;
}
.kode-knot-divider .rule{ height:1px; flex:1; background: var(--kode-line); max-width: 220px; }
.kode-knot-divider.on-dark .rule{ background: var(--kode-line-dark); }
.kode-knot-divider svg{ width:28px; height:28px; flex-shrink:0; }

/* =========================================================
   3. BUTTONS
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding: .95rem 1.9rem;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: var(--radius-s);
  border: 1px solid transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--kode-oxblood); color: var(--kode-cream); }
.btn-primary:hover{ background: var(--kode-oxblood-dark); }
.btn-ghost{ background: transparent; color: var(--kode-ink); border-color: currentColor; }
.btn-ghost:hover{ background: var(--kode-ink); color: var(--kode-cream); }
.btn-buy-now{ background: var(--kode-ink); color: var(--kode-cream); }
.btn-buy-now:hover{ background: var(--kode-oxblood); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* =========================================================
   4. TOP BAR + HEADER
   ========================================================= */
.kode-topbar{
  background: var(--kode-charcoal);
  color: var(--kode-cream-dim);
  font-size: .78rem;
}
.kode-topbar .kode-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: .55rem var(--gutter);
  gap: 1rem;
}
.kode-topbar a{ color: var(--kode-stone); }
.kode-topbar a:hover{ color: var(--kode-cream); }
.kode-topbar-links{ display:flex; gap:1.4rem; align-items:center; }
.kode-topbar-links svg{ width:14px; height:14px; margin-right:.4em; vertical-align:-2px; }

.kode-header{
  background: var(--kode-cream);
  border-bottom: 1px solid var(--kode-line);
  position: sticky; top:0; z-index: 60;
}
.kode-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 1rem var(--gutter);
  gap: 1.5rem;
}
.kode-logo{ display:flex; align-items:center; gap:.7rem; }
.kode-logo img{ height: 46px; width:auto; }
.kode-logo-text{ font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -0.02em; }
.kode-logo-text small{
  display:block; font-family: var(--font-body); font-size: .58rem; letter-spacing: .3em;
  color: var(--kode-stone); font-weight:600; margin-top:.15em;
}

.kode-nav{ display:flex; gap: 2.1rem; }
.kode-nav a{
  font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  padding: .3rem 0; border-bottom: 1px solid transparent;
}
.kode-nav a:hover, .kode-nav .current-menu-item a{ border-color: var(--kode-oxblood); color: var(--kode-oxblood); }

.kode-header-actions{ display:flex; align-items:center; gap:1.1rem; }
.kode-icon-btn{ position:relative; display:inline-flex; padding:.3rem; }
.kode-icon-btn svg{ width:21px; height:21px; }
.kode-cart-count{
  position:absolute; top:-4px; right:-6px; background: var(--kode-oxblood); color:#fff;
  font-size: .62rem; font-weight:700; border-radius:50%; min-width:16px; height:16px;
  display:flex; align-items:center; justify-content:center; padding: 0 3px;
}
.kode-menu-toggle{ display:none; background:none; border:none; padding:.4rem; }
.kode-menu-toggle svg{ width:24px; height:24px; }

@media (max-width: 900px){
  .kode-nav{ display:none; }
  .kode-menu-toggle{ display:inline-flex; }
  .kode-topbar-links{ gap: 1rem; }
}
.kode-mobile-nav{
  display:none; flex-direction:column; background: var(--kode-cream);
  border-bottom: 1px solid var(--kode-line); padding: .5rem var(--gutter) 1.2rem;
}
.kode-mobile-nav.is-open{ display:flex; }
.kode-mobile-nav a{
  padding: .7rem 0; border-bottom: 1px solid var(--kode-line);
  font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
}

/* =========================================================
   5. HOME — HERO
   ========================================================= */
.kode-hero{
  background: var(--kode-charcoal);
  color: var(--kode-cream);
  position: relative;
  overflow:hidden;
}
.kode-hero-inner{
  max-width: var(--content-max);
  margin:0 auto;
  padding: clamp(3.5rem,10vw,7.5rem) var(--gutter) clamp(3rem,8vw,6rem);
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 3rem;
  align-items:center;
}
.kode-hero-eyebrow{ color: var(--kode-stone); margin-bottom: 1.1rem; }
.kode-hero h1{ margin-bottom: 1.3rem; }
.kode-hero p{ max-width: 46ch; color: var(--kode-cream-dim); font-size: 1.05rem; margin-bottom: 2.1rem; }
.kode-hero-ctas{ display:flex; gap: 1rem; flex-wrap:wrap; }
.kode-hero-ctas .btn-ghost{ color: var(--kode-cream); }
.kode-hero-ctas .btn-ghost:hover{ background: var(--kode-cream); color: var(--kode-ink); }
.kode-hero-visual{
  position:relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-s);
  overflow:hidden;
  background: var(--kode-charcoal-soft);
  display:flex; align-items:center; justify-content:center;
}
.kode-hero-visual img{ width:100%; height:100%; object-fit:cover; }
.kode-hero-visual .knot-watermark{
  position:absolute; width: 62%; opacity:.14; pointer-events:none;
}
@media (max-width: 900px){
  .kode-hero-inner{ grid-template-columns: 1fr; }
  .kode-hero-visual{ order:-1; aspect-ratio: 16/10; }
}

/* =========================================================
   6. CATEGORY STRIP
   ========================================================= */
.kode-cats{ padding: clamp(3rem,7vw,5rem) 0; }
.kode-cats-head{ text-align:center; margin-bottom: 2.4rem; }
.kode-cats-head h2{ margin-top:.5rem; }
.kode-cat-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
  padding: 0 var(--gutter);
}
.kode-cat-card{
  position:relative;
  aspect-ratio: 3/4;
  border-radius: var(--radius-s);
  overflow:hidden;
  background: var(--kode-charcoal-soft);
  display:block;
}
.kode-cat-card img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.kode-cat-card:hover img{ transform: scale(1.06); }
.kode-cat-card::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.72) 100%);
}
.kode-cat-label{
  position:absolute; left:1.1rem; bottom:1.1rem; z-index:2;
  color: var(--kode-cream); font-family: var(--font-display); font-size: 1.15rem;
}
.kode-cat-label span{
  display:block; font-family: var(--font-body); font-size:.62rem; letter-spacing:.2em;
  color: var(--kode-stone); text-transform:uppercase; margin-top:.3em; font-weight:600;
}
@media (max-width: 900px){ .kode-cat-grid{ grid-template-columns: repeat(2,1fr); } }

/* =========================================================
   7. OLD MONEY EDIT — lookbook feature
   ========================================================= */
.kode-feature{
  background: var(--kode-cream-dim);
  padding: clamp(3.5rem,8vw,6rem) 0;
}
.kode-feature-inner{
  display:grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2rem,5vw,4rem);
  align-items:center; padding: 0 var(--gutter);
}
.kode-feature-media{ aspect-ratio: 4/5; overflow:hidden; border-radius: var(--radius-s); background: var(--kode-charcoal-soft); }
.kode-feature-media img{ width:100%; height:100%; object-fit:cover; }
.kode-feature-quote{
  font-family: var(--font-display); font-size: clamp(1.5rem,2.6vw,2.1rem);
  line-height:1.3; margin: 1rem 0 1.6rem; color: var(--kode-oxblood-dark);
}
@media (max-width: 900px){ .kode-feature-inner{ grid-template-columns:1fr; } }

/* =========================================================
   8. PRODUCT GRID (shop + related + home)
   ========================================================= */
.kode-shop-head{
  padding: clamp(2.5rem,6vw,4rem) var(--gutter) 1.5rem;
  text-align:center;
}
ul.products{
  display:grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 2rem 1.4rem !important;
  padding: 0 var(--gutter) clamp(3rem,6vw,5rem) !important;
  margin:0 !important;
}
ul.products li.product{
  list-style:none; background:none; border:none; padding:0; text-align:left; width:auto;
}
ul.products li.product a{ display:block; text-decoration:none; }
ul.products li.product img{
  width:100%; aspect-ratio: 3/4; object-fit:cover; border-radius: var(--radius-s);
  background: var(--kode-charcoal-soft); margin-bottom: .9rem;
}
.kode-product-cat{ font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color: var(--kode-stone); font-weight:700; }
ul.products li.product h2, ul.products li.product .woocommerce-loop-product__title{
  font-family: var(--font-display); font-size: 1.05rem; font-weight:500; margin: .3rem 0 .25rem; color: var(--kode-ink);
}
ul.products li.product .price{
  font-family: var(--font-body); font-weight:700; font-size: .92rem; color: var(--kode-oxblood-dark);
}
ul.products li.product .price del{ color: #9a9188; font-weight:400; margin-right:.5em; }
ul.products li.product .price ins{ text-decoration:none; }
ul.products li.product .button{
  margin-top:.7rem; display:inline-block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; border-bottom: 1px solid var(--kode-ink); padding-bottom:2px;
}
@media (max-width: 1000px){ ul.products{ grid-template-columns: repeat(3,1fr) !important; } }
@media (max-width: 700px){ ul.products{ grid-template-columns: repeat(2,1fr) !important; gap: 1.5rem .9rem !important; } }

.woocommerce-pagination{ text-align:center; padding-bottom: 3rem; }
.woocommerce-pagination ul{ display:inline-flex; gap:.4rem; }
.woocommerce-pagination a, .woocommerce-pagination span{
  display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center;
  border:1px solid var(--kode-line); font-size:.82rem;
}
.woocommerce-pagination .current{ background: var(--kode-ink); color:#fff; }

/* =========================================================
   9. TRUST STRIP (hotline / facebook / delivery)
   ========================================================= */
.kode-trust{
  background: var(--kode-ink); color: var(--kode-cream-dim);
  padding: 1.4rem var(--gutter);
}
.kode-trust-inner{
  max-width: var(--content-max); margin:0 auto;
  display:flex; flex-wrap:wrap; gap: 1.3rem 2.4rem; align-items:center; justify-content:space-between;
}
.kode-trust-item{ display:flex; align-items:center; gap:.6rem; font-size:.82rem; letter-spacing:.03em; }
.kode-trust-item svg{ width:18px; height:18px; color: var(--kode-stone); flex-shrink:0; }
.kode-trust-item a{ font-weight:700; color: var(--kode-cream); }

/* =========================================================
   10. SINGLE PRODUCT PAGE
   ========================================================= */
.kode-product-crumb{ padding: 1.2rem var(--gutter) 0; font-size:.78rem; color:#7c766c; }
.kode-product-crumb a:hover{ color: var(--kode-oxblood); }

.woocommerce div.product{
  max-width: var(--content-max); margin: 1.5rem auto 0; padding: 0 var(--gutter) 4rem;
  display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,5vw,4.5rem);
}
.woocommerce div.product div.images{ margin:0; }
.woocommerce div.product div.images img{
  border-radius: var(--radius-s); background: var(--kode-charcoal-soft);
}
.woocommerce div.product div.images .flex-control-thumbs{
  display:flex; gap:.6rem; margin-top:.8rem; padding:0;
}
.woocommerce div.product div.images .flex-control-thumbs li{ list-style:none; width:70px; }
.woocommerce div.product div.images .flex-control-thumbs img{
  border-radius: var(--radius-s); opacity:.6; border: 1px solid transparent;
}
.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs img:hover{ opacity:1; border-color: var(--kode-oxblood); }

.woocommerce div.product div.summary{ margin:0; }
.woocommerce div.product .kode-cat-pill{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color: var(--kode-stone); font-weight:700; margin-bottom:.6rem; display:block;
}
.woocommerce div.product h1.product_title{ font-size: clamp(1.9rem,3vw,2.5rem); margin-bottom:.5rem; }
.woocommerce div.product p.price, .woocommerce div.product span.price{
  font-family: var(--font-display); font-size: 1.7rem; color: var(--kode-oxblood-dark); margin: .3rem 0 1.3rem;
}
.woocommerce div.product p.price del{ font-size: 1.1rem; color:#a49c8f; margin-right:.5em; }
.woocommerce div.product .woocommerce-product-details__short-description{
  color:#4b453e; margin-bottom: 1.6rem; padding-bottom:1.6rem; border-bottom:1px solid var(--kode-line);
}

/* size chart trigger + variation form */
.kode-size-chart-link{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.76rem; letter-spacing:.06em;
  text-transform:uppercase; font-weight:700; text-decoration:underline; text-underline-offset:3px;
  margin: .6rem 0 1.2rem; color: var(--kode-ink);
}
.woocommerce div.product form.cart{ margin-bottom: 1.6rem; }
.woocommerce div.product .variations{ margin-bottom: 1.2rem; width:100%; }
.woocommerce div.product .variations td.label{
  font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; font-weight:700; padding-bottom:.6rem; color: var(--kode-ink);
}
.woocommerce div.product .variations select{
  width:100%; padding:.85rem 1rem; border:1px solid var(--kode-line); border-radius: var(--radius-s);
  background: #fff; font-size:.9rem;
}
.woocommerce div.product .reset_variations{ font-size:.72rem; text-decoration:underline; margin-top:.4rem; display:inline-block; }
.woocommerce div.product .quantity{ margin-right:.8rem; }
.woocommerce div.product .quantity input{
  width:72px; padding:.85rem .8rem; border:1px solid var(--kode-line); border-radius: var(--radius-s); font-size:.9rem;
}
.kode-buy-buttons{ display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; margin-top: .4rem; }
.kode-buy-buttons .quantity{ order:1; }
.woocommerce div.product form.cart div.quantity{ float:none; }
.woocommerce div.product .single_add_to_cart_button{ order:2; flex:1; min-width: 160px; }
.kode-buy-now-btn{ order:3; flex:1; min-width: 160px; text-align:center; }
.woocommerce div.product .stock{ font-size:.78rem; color: var(--kode-copper); margin: .8rem 0 0; font-weight:600; }
.woocommerce div.product .stock.out-of-stock{ color: #a33; }
.kode-meta-row{ margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid var(--kode-line); font-size:.8rem; color:#6b655c; }
.kode-meta-row span{ display:block; margin-bottom:.3rem; }
.kode-meta-row a{ text-decoration:underline; }

/* description / size chart tabs */
.woocommerce-tabs{ max-width: var(--content-max); margin:0 auto; padding: 0 var(--gutter) 4rem; clear:both; }
.woocommerce-tabs ul.tabs{ display:flex; gap: 2.2rem; border-bottom: 1px solid var(--kode-line); margin-bottom: 2rem; padding:0; }
.woocommerce-tabs ul.tabs li{ list-style:none; }
.woocommerce-tabs ul.tabs li a{
  display:inline-block; padding: 0 0 1rem; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; color:#948d81; border-bottom: 2px solid transparent;
}
.woocommerce-tabs ul.tabs li.active a{ color: var(--kode-ink); border-color: var(--kode-oxblood); }
.woocommerce-tabs .panel{ max-width: 780px; color:#48423b; }
.woocommerce-tabs #reviews .panel{ max-width: 100%; }

.kode-size-table{ width:100%; border-collapse: collapse; font-size:.86rem; }
.kode-size-table caption{ text-align:left; font-family: var(--font-display); font-size:1.1rem; margin-bottom:1rem; color: var(--kode-ink); }
.kode-size-table th, .kode-size-table td{ padding: .8rem 1rem; border: 1px solid var(--kode-line); text-align:center; }
.kode-size-table th{ background: var(--kode-cream-dim); text-transform:uppercase; font-size:.7rem; letter-spacing:.1em; }
.kode-size-table td:first-child, .kode-size-table th:first-child{ text-align:left; font-weight:700; }
.kode-size-note{ font-size:.78rem; color:#7c766c; margin-top:1rem; }

/* related products heading reuse */
.related.products{ max-width: var(--content-max); margin: 0 auto; padding-top: 3rem; border-top: 1px solid var(--kode-line); }
.related.products > h2{ text-align:center; padding: 0 var(--gutter); }

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

/* =========================================================
   11. SIZE CHART MODAL (used on shop/home quick view too)
   ========================================================= */
.kode-modal{
  position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center;
  padding: 1.5rem; background: rgba(27,26,29,.62);
}
.kode-modal.is-open{ display:flex; }
.kode-modal-box{
  background:#fff; max-width:640px; width:100%; max-height:85vh; overflow:auto;
  border-radius: var(--radius-s); padding: 2rem clamp(1.2rem,4vw,2.4rem);
  position:relative;
}
.kode-modal-close{
  position:absolute; top:1rem; right:1rem; background:none; border:none; padding:.4rem; line-height:0;
}
.kode-modal-close svg{ width:20px; height:20px; }

/* =========================================================
   12. PAGES (about/contact) & GENERIC CONTENT
   ========================================================= */
.kode-page{ max-width: 820px; margin: 0 auto; padding: clamp(3rem,7vw,5rem) var(--gutter); }
.kode-page h1{ margin-bottom: 1.2rem; }
.kode-page p{ color:#48423b; margin-bottom:1.2rem; }
.kode-contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top:2rem; }
.kode-contact-card{ border:1px solid var(--kode-line); padding: 1.6rem; border-radius: var(--radius-s); }
.kode-contact-card .eyebrow{ display:block; margin-bottom:.6rem; }
.kode-contact-card a{ font-family: var(--font-display); font-size:1.3rem; }
@media (max-width:700px){ .kode-contact-grid{ grid-template-columns:1fr; } }

/* =========================================================
   13. FOOTER
   ========================================================= */
.kode-footer{ background: var(--kode-charcoal); color: var(--kode-cream-dim); padding-top: 3.5rem; }
.kode-footer-grid{
  display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2.5rem;
  padding: 0 var(--gutter) 2.5rem;
}
.kode-footer-brand .kode-logo-text{ color: var(--kode-cream); }
.kode-footer-brand p{ color:#a39c90; font-size:.86rem; margin-top:1rem; max-width: 32ch; }
.kode-footer h4{ font-family: var(--font-body); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color: var(--kode-stone); margin-bottom:1.1rem; }
.kode-footer ul li{ margin-bottom:.7rem; }
.kode-footer a{ font-size:.86rem; color: #d8d2c6; }
.kode-footer a:hover{ color: var(--kode-cream); }
.kode-footer-bottom{
  border-top: 1px solid var(--kode-line-dark); padding: 1.3rem var(--gutter);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; font-size:.76rem; color:#8c8579;
}
@media (max-width: 900px){ .kode-footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .kode-footer-grid{ grid-template-columns: 1fr; } }

/* Widget area fallback */
.widget-area{ padding: 2rem var(--gutter); }