/*
Theme Name: The New YK
Theme URI: https://thenewyk.com
Author: SMVD Enterprises
Description: Custom WooCommerce-ready theme for The New YK — women's denim, built around indigo wash, stitched typography and rivet detailing.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: the-new-yk
*/

/* ==========================================================================
   TOKENS
   ========================================================================== */
:root{
  --ink:        #1F2E4D;   /* deep indigo, headers/dark bg */
  --denim:      #3E5C82;   /* core brand blue */
  --stonewash:  #7C97B8;   /* mid wash, secondary */
  --fade:       #C9D6E4;   /* light wash, backgrounds */
  --ecru:       #F4F1EA;   /* off-white canvas */
  --thread:     #C97A3D;   /* copper/gold stitching accent */
  --rivet:      #8A6A3F;   /* rivet bronze */
  --ink-70: rgba(31,46,77,0.7);
  --ink-40: rgba(31,46,77,0.4);

  --font-display: 'Bebas Neue', Impact, sans-serif;
  --font-body: 'Work Sans', -apple-system, sans-serif;
  --font-label: 'Space Mono', monospace;

  --container: 1240px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--ecru);
  font-size: 16px;
  line-height: 1.6;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width: var(--container); margin:0 auto; padding: 0 24px; }

h1,h2,h3{
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  line-height: 1.05;
  margin: 0 0 16px;
  text-transform: uppercase;
}
h1{ font-size: clamp(48px, 8vw, 104px); }
h2{ font-size: clamp(28px, 4vw, 44px); }
h3{ font-size: 22px; }

.eyebrow{
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--thread);
}

/* ==========================================================================
   STITCH DIVIDER — signature element
   ========================================================================== */
.stitch-divider{
  width:100%; height: 14px;
  background-image: repeating-linear-gradient(
    90deg, var(--thread) 0 10px, transparent 10px 20px
  );
  background-position: center;
  background-size: 20px 2px;
  background-repeat: repeat-x;
  opacity: 0.85;
  margin: 0;
}
.stitch-divider.double{ height:20px; }
.stitch-divider.double::after{ content:''; }

/* ==========================================================================
   ANNOUNCEMENT BAR
   ========================================================================== */
.announce-bar{
  background: var(--thread); color: var(--ink); text-align:center;
  font-family: var(--font-label); font-size:12px; letter-spacing:0.1em;
  text-transform:uppercase; padding: 9px 12px;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  background: var(--ink);
  color: var(--ecru);
  padding: 18px 0;
  position: sticky; top:0; z-index: 100;
  border-bottom: 3px solid var(--thread);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand-mark{ font-family: var(--font-display); font-size: 26px; letter-spacing: 0.06em; color: var(--ecru); }
.brand-mark span{ color: var(--thread); }

.main-nav ul{ list-style:none; display:flex; gap:28px; margin:0; padding:0; }
.main-nav > ul > li{ position:relative; }
.main-nav a{
  font-family: var(--font-label); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fade); transition: color .2s;
}
.main-nav a:hover{ color: var(--thread); }

/* Collections dropdown (mega-menu style) */
.main-nav .has-dropdown .dropdown-panel{
  display:none;
  position:absolute; top: calc(100% + 18px); left: -20px;
  background: var(--ecru); color: var(--ink);
  min-width: 260px; padding: 22px 24px;
  border-top: 3px solid var(--thread);
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}
.main-nav .has-dropdown:hover .dropdown-panel{ display:block; }
.dropdown-panel ul{ display:block !important; }
.dropdown-panel li{ margin-bottom: 10px; }
.dropdown-panel a{ color: var(--ink); font-family: var(--font-body); font-size:14px; letter-spacing:normal; text-transform:none; }
.dropdown-panel a:hover{ color: var(--thread); }
.dropdown-panel .dd-view-all{ font-family: var(--font-label); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color: var(--thread); margin-top:6px; display:inline-block; }

.header-actions{ display:flex; align-items:center; gap:18px; }
.header-actions a, .header-actions button{ color: var(--ecru); font-size:13px; font-family: var(--font-label); letter-spacing:0.06em; background:none; border:none; cursor:pointer; }
.nav-toggle{ display:none; background:none; border:none; color:var(--ecru); font-size:22px; cursor:pointer; }

@media (max-width: 820px){
  .main-nav{ display:none; }
  .nav-toggle{ display:block; }
}

/* ==========================================================================
   MINI CART DRAWER
   ========================================================================== */
.cart-drawer{
  position: fixed; top:0; right:-420px; width: 400px; max-width:92vw; height:100vh;
  background: var(--ecru); z-index: 200; transition: right .3s ease;
  box-shadow: -12px 0 40px rgba(0,0,0,0.25);
  display:flex; flex-direction:column;
}
.cart-drawer.open{ right:0; }
.cart-drawer-head{ display:flex; justify-content:space-between; align-items:center; padding:20px 22px; border-bottom:1px solid var(--fade); }
.cart-drawer-head h3{ margin:0; font-size:20px; }
.cart-drawer-close{ background:none; border:none; font-size:22px; cursor:pointer; color:var(--ink); }
.cart-drawer-body{ padding: 20px 22px; overflow-y:auto; flex:1; }
.cart-drawer-empty{ font-family: var(--font-label); font-size:13px; color: var(--ink-70); }
.cart-drawer-item{ display:flex; gap:14px; margin-bottom:18px; }
.cart-drawer-item img{ width:70px; height:90px; object-fit:cover; }
.cart-drawer-item .title{ font-size:14px; font-weight:600; margin:0 0 4px; }
.cart-drawer-item .meta{ font-family: var(--font-label); font-size:12px; color: var(--ink-70); }
.cart-drawer-foot{ padding: 20px 22px; border-top:1px solid var(--fade); }
.cart-overlay{
  position:fixed; inset:0; background: rgba(31,46,77,0.5); z-index:190;
  opacity:0; pointer-events:none; transition: opacity .3s;
}
.cart-overlay.open{ opacity:1; pointer-events:auto; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  background: linear-gradient(180deg, var(--ink) 0%, var(--denim) 100%);
  color: var(--ecru);
  padding: 90px 0 70px;
  position: relative;
  overflow: hidden;
}
.hero::before{
  content:'';
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 26px);
  pointer-events:none;
}
.hero .wrap{ position:relative; }
.hero-tag{ font-family: var(--font-label); font-size:13px; letter-spacing:0.2em; color: var(--thread); margin-bottom:18px; display:block; }
.hero h1{ max-width: 780px; margin-bottom: 20px; }
.hero p{ max-width: 480px; font-size:18px; color: var(--fade); margin-bottom: 34px; }

.btn{
  display:inline-block; font-family: var(--font-label); font-size:13px;
  letter-spacing:0.14em; text-transform:uppercase; padding: 16px 32px;
  border: 2px solid var(--thread); color: var(--ecru); background: transparent;
  cursor:pointer; transition: all .25s;
}
.btn:hover{ background: var(--thread); color: var(--ink); }
.btn-solid{ background: var(--thread); color: var(--ink); }
.btn-solid:hover{ background: var(--ecru); border-color: var(--ecru); }

/* ==========================================================================
   COLLECTION TILES
   ========================================================================== */
.collections-strip{ padding: 60px 0; }
.collections-strip .section-head{ margin-bottom: 30px; }
.collections-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.collection-tile{ position:relative; display:block; overflow:hidden; aspect-ratio: 3/4; background: var(--fade); }
.collection-tile img{ width:100%; height:100%; object-fit:cover; transition: transform .5s; }
.collection-tile:hover img{ transform: scale(1.05); }
.collection-tile .tile-label{
  position:absolute; left:0; right:0; bottom:0; padding: 20px;
  background: linear-gradient(0deg, rgba(31,46,77,0.85), transparent);
  color: var(--ecru); font-family: var(--font-display); font-size: 22px; letter-spacing:0.03em;
}
@media (max-width: 820px){ .collections-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .collections-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   CATEGORY PATCHES
   ========================================================================== */
.patch-strip{ padding: 60px 0 20px; background: var(--ecru); }
.patch-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.patch{
  background: var(--denim); color: var(--ecru); padding: 26px 20px;
  position: relative; text-align:center; transition: transform .2s;
  border: 1px dashed var(--thread);
}
.patch:hover{ transform: translateY(-4px); }
.patch .eyebrow{ color: var(--fade); }
.patch h3{ margin:8px 0 0; font-size: 20px; }

@media (max-width: 820px){ .patch-grid{ grid-template-columns: repeat(2,1fr); } }

/* ==========================================================================
   PRODUCTS / WOOCOMMERCE
   ========================================================================== */
.shop-section{ padding: 70px 0 90px; }
.shop-section .section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:34px; flex-wrap:wrap; gap:12px; }

ul.products{ display:grid !important; grid-template-columns: repeat(4, 1fr); gap: 30px 24px; list-style:none; margin:0; padding:0; }
ul.products li.product{
  background:#fff; border:1px solid var(--fade); padding: 0 0 18px; position:relative;
}
ul.products li.product img{ width:100%; aspect-ratio: 3/4; object-fit:cover; }
ul.products li.product .woocommerce-loop-product__title{
  font-family: var(--font-body); font-weight:600; font-size:15px; margin: 14px 16px 4px; text-transform:none;
}
ul.products li.product .price{ margin: 0 16px; font-family: var(--font-label); color: var(--denim); font-size:14px; }
ul.products li.product .button{
  margin: 14px 16px 0; display:inline-block; font-family: var(--font-label); font-size:11px;
  letter-spacing:0.1em; text-transform:uppercase; color: var(--ink); border-bottom:2px solid var(--thread); padding-bottom:2px;
}
ul.products li.product::before{
  content: '';
  position:absolute; top:12px; right:12px; width:10px; height:10px; border-radius:50%;
  background: var(--rivet);
}
@media (max-width: 980px){ ul.products{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ ul.products{ grid-template-columns: 1fr; } }

.woocommerce div.product .summary{ font-family: var(--font-body); }
.woocommerce div.product .summary .price{ font-family: var(--font-label); font-size:22px; color: var(--denim); }
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
  background: var(--thread); color: var(--ink); border-radius:0; font-family: var(--font-label);
  letter-spacing:0.08em; text-transform:uppercase; padding: 14px 26px; border:none;
}
.woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover{
  background: var(--ink); color: var(--ecru);
}

/* ==========================================================================
   BRAND STRIP
   ========================================================================== */
.brand-strip{ background: var(--ink); color: var(--fade); padding: 70px 0; }
.brand-strip .wrap{ display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:center; }
.brand-strip h2{ color: var(--ecru); }
.brand-strip p{ color: var(--fade); font-size:17px; }
@media (max-width: 820px){ .brand-strip .wrap{ grid-template-columns:1fr; } }

/* ==========================================================================
   NEWSLETTER BAND
   ========================================================================== */
.newsletter-band{ background: var(--denim); color: var(--ecru); padding: 60px 0; text-align:center; }
.newsletter-band h2{ color: var(--ecru); margin-bottom: 10px; }
.newsletter-band p{ color: var(--fade); margin-bottom: 26px; }
.newsletter-form{ display:flex; max-width: 420px; margin:0 auto; border: 1px solid var(--ecru); }
.newsletter-form input[type="email"]{
  flex:1; background:transparent; border:none; padding: 14px 16px; color: var(--ecru); font-family: var(--font-body);
}
.newsletter-form input[type="email"]::placeholder{ color: var(--fade); }
.newsletter-form button{
  background: var(--thread); color: var(--ink); border:none; padding: 0 22px;
  font-family: var(--font-label); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background: var(--ecru); border-top: 3px solid var(--thread); padding: 50px 0 30px; }
.footer-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:40px; margin-bottom:36px; }
.footer-social{ display:flex; gap:14px; margin-top:14px; }
.footer-social a{ font-family: var(--font-label); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color: var(--ink-70); }
.footer-grid h4{ font-family: var(--font-label); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color: var(--thread); margin-bottom:14px; }
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid li{ margin-bottom:8px; font-size:14px; }
.footer-bottom{ font-family: var(--font-label); font-size:11px; letter-spacing:0.08em; color: var(--ink-70); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
@media (max-width: 820px){ .footer-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   GENERIC PAGE
   ========================================================================== */
.page-content{ padding: 70px 0; max-width: 820px; margin:0 auto; }
.page-content .wrap{ padding:0; }