/*
Theme Name: Demure Fashions
Theme URI: https://demurefashions.com
Author: Demure Fashions (built with Claude)
Author URI: https://demurefashions.com
Description: An elegant, WooCommerce-ready theme for a modest fashion boutique — abayas, hijabs, modest dresses, kaftans and modest activewear. Quiet-luxury aesthetic with a refined serif/grotesque type pairing and a soft "veil" signature motif. Hosted & supported by nextgensystems.ai.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: demure-fashions
Tags: e-commerce, woocommerce, fashion, elegant, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =========================================================
   DEMURE FASHIONS — DESIGN SYSTEM
   Palette: "Veil & Ink" — deliberately avoids the cream+serif+terracotta cliche.
   Deep muted plum as brand primary, dusty blush + muted sage accents,
   soft oat ground, deep aubergine-black ink.
   ========================================================= */

:root {
  /* Color */
  --df-ground: #EFE9E4;   /* soft oat — page ground */
  --df-paper:  #F7F3EF;   /* lighter panel */
  --df-ink:    #241E22;   /* deep aubergine-black — text */
  --df-plum:   #5B3A4B;   /* brand primary — deep muted plum */
  --df-plum-d: #47303D;   /* darker plum for hovers */
  --df-blush:  #C9A6A6;   /* dusty rose accent */
  --df-sage:   #8A9A8B;   /* muted sage — secondary accent */
  --df-pewter: #9A9089;   /* taupe — captions, hairlines */
  --df-line:   #D9CEC4;   /* hairline dividers */

  /* Type */
  --df-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --df-body:    "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Scale */
  --df-step-eyebrow: 0.72rem;
  --df-step-body: 1.02rem;
  --df-step-lg: 1.35rem;
  --df-step-h3: clamp(1.4rem, 2.2vw, 1.9rem);
  --df-step-h2: clamp(1.9rem, 4vw, 3rem);
  --df-step-hero: clamp(2.8rem, 7vw, 5.6rem);

  /* Space */
  --df-maxw: 1240px;
  --df-gutter: clamp(1.1rem, 4vw, 3rem);
  --df-section: clamp(3.5rem, 8vw, 7rem);

  --df-radius: 2px; /* restrained, tailored — not pillowy */
  --df-shadow: 0 18px 50px -28px rgba(36,30,34,0.45);
  --df-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--df-ground);
  color: var(--df-ink);
  font-family: var(--df-body);
  font-size: var(--df-step-body);
  line-height: 1.65;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--df-plum); text-decoration: none; transition: color .25s var(--df-ease); }
a:hover { color: var(--df-plum-d); }

h1, h2, h3, h4 {
  font-family: var(--df-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0.01em;
  color: var(--df-ink);
  margin: 0 0 .5em;
}
h1 { font-size: var(--df-step-h2); }
h2 { font-size: var(--df-step-h2); }
h3 { font-size: var(--df-step-h3); }
p { margin: 0 0 1.1em; }

.df-eyebrow {
  font-family: var(--df-body);
  font-size: var(--df-step-eyebrow);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--df-plum);
  display: inline-block;
  margin-bottom: 1.1rem;
}

/* ---------- Layout ---------- */
.df-wrap { max-width: var(--df-maxw); margin-inline: auto; padding-inline: var(--df-gutter); }
.df-section { padding-block: var(--df-section); }

/* ---------- Buttons ---------- */
.df-btn, .df-btn:visited {
  display: inline-block;
  font-family: var(--df-body);
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 400;
  padding: 0.95em 2.4em;
  background: var(--df-plum);
  color: #fff;
  border: 1px solid var(--df-plum);
  border-radius: var(--df-radius);
  cursor: pointer;
  transition: background .3s var(--df-ease), color .3s var(--df-ease), transform .3s var(--df-ease);
}
.df-btn:hover { background: var(--df-plum-d); border-color: var(--df-plum-d); color:#fff; transform: translateY(-1px); }
.df-btn--ghost { background: transparent; color: var(--df-ink); border-color: var(--df-ink); }
.df-btn--ghost:hover { background: var(--df-ink); color: var(--df-ground); }
.df-btn--light { background: #fff; color: var(--df-plum); border-color:#fff; }
.df-btn--light:hover { background: transparent; color:#fff; border-color:#fff; }

/* =========================================================
   HEADER
   ========================================================= */
.df-topbar {
  background: var(--df-ink);
  color: var(--df-ground);
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 0.6em 1em;
}
.df-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(239,233,228,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--df-line);
}
.df-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  min-height: 84px;
}
.df-brand {
  grid-column: 2;
  font-family: var(--df-display);
  font-size: 1.9rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--df-ink);
  text-align: center;
  line-height: 1;
}
.df-brand small {
  display:block;
  font-family: var(--df-body);
  font-size: 0.56rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--df-pewter);
  margin-top: .35rem;
}
.df-nav { display: flex; gap: 1.8rem; align-items:center; }
.df-nav ul { list-style:none; display:flex; gap:1.6rem; margin:0; padding:0; }
.df-nav a {
  color: var(--df-ink);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  position: relative;
}
.df-nav a::after {
  content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0;
  background: var(--df-plum); transition: width .3s var(--df-ease);
}
.df-nav a:hover::after { width:100%; }
.df-header__tools { grid-column:3; display:flex; justify-content:flex-end; gap:1.2rem; align-items:center; }
.df-icon-btn { background:none;border:none;cursor:pointer;color:var(--df-ink);padding:.25rem; display:inline-flex; }
.df-cart-count {
  font-size:.7rem; background:var(--df-plum); color:#fff; border-radius:50%;
  min-width:18px; height:18px; display:inline-grid; place-items:center; margin-left:.3rem;
}
.df-burger { display:none; }

/* =========================================================
   HERO — the "veil" signature
   ========================================================= */
.df-hero {
  position: relative;
  min-height: min(86vh, 760px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(160deg, #6a4657 0%, #47303d 55%, #2b1f28 100%);
  color: var(--df-ground);
}
.df-hero__content { position: relative; z-index: 3; max-width: 640px; }
.df-hero .df-eyebrow { color: var(--df-blush); }
.df-hero h1 {
  color: #fff;
  font-size: var(--df-step-hero);
  font-weight: 500;
  margin-bottom: .3em;
}
.df-hero p { font-size: var(--df-step-lg); color: rgba(245,241,236,.82); max-width: 46ch; font-weight:300; }
.df-hero__actions { margin-top: 2rem; display:flex; gap:1rem; flex-wrap:wrap; }

/* the veil: layered translucent curved drapes */
.df-veil { position:absolute; inset:0; z-index:1; pointer-events:none; }
.df-veil svg { width:100%; height:100%; }
.df-hero__scrim { position:absolute; inset:0; z-index:2;
  background: radial-gradient(120% 120% at 15% 30%, rgba(43,31,40,.15), transparent 60%); }

/* =========================================================
   COLLECTION TILES
   ========================================================= */
.df-collections { background: var(--df-ground); }
.df-sec-head { text-align:center; max-width: 60ch; margin: 0 auto 3rem; }
.df-sec-head h2 { margin-bottom:.3em; }
.df-sec-head p { color: var(--df-pewter); }

.df-tiles { display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.df-tile {
  position:relative; overflow:hidden; border-radius: var(--df-radius);
  aspect-ratio: 3/4; background: var(--df-paper);
  display:flex; align-items:flex-end;
}
.df-tile__img { position:absolute; inset:0; }
.df-tile__img img { width:100%; height:100%; object-fit:cover; transition: transform .8s var(--df-ease); }
.df-tile:hover .df-tile__img img { transform: scale(1.05); }
.df-tile__grad { position:absolute; inset:0; background: linear-gradient(to top, rgba(36,30,34,.72), transparent 55%); }
.df-tile__cap { position:relative; z-index:2; padding: 1.6rem; color:#fff; width:100%; }
.df-tile__cap .df-eyebrow { color: var(--df-blush); margin-bottom:.35rem; }
.df-tile__cap h3 { color:#fff; margin:0; }

/* =========================================================
   PRODUCT GRID (WooCommerce + generic)
   ========================================================= */
.df-products ul.products,
.df-products .products {
  display:grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem 1.4rem;
  list-style:none; margin:0; padding:0;
}
.woocommerce ul.products li.product,
.df-product-card { text-align:left; margin:0 !important; width:auto !important; }
.woocommerce ul.products li.product a img,
.df-product-card img {
  border-radius: var(--df-radius); margin-bottom: .9rem;
  aspect-ratio: 3/4; object-fit: cover; width:100%;
  transition: opacity .3s var(--df-ease);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.df-product-card__title {
  font-family: var(--df-body) !important;
  font-size: 0.92rem !important; font-weight: 400 !important;
  letter-spacing: 0.02em; padding: 0 !important; color: var(--df-ink);
}
.woocommerce ul.products li.product .price,
.df-product-card__price {
  color: var(--df-plum) !important; font-family: var(--df-display);
  font-size: 1.15rem !important; font-weight: 500;
}
.woocommerce ul.products li.product .price del { color: var(--df-pewter); font-size:.85em; }
.woocommerce span.onsale {
  background: var(--df-sage); color:#fff; border-radius:0;
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; min-height:auto; min-width:auto; padding:.4em .9em; line-height:1;
}

/* WooCommerce buttons inherit our style */
.woocommerce a.button, .woocommerce button.button, .woocommerce .button,
.woocommerce #respond input#submit, .woocommerce input.button {
  background: var(--df-plum) !important; color:#fff !important;
  border-radius: var(--df-radius) !important; text-transform: uppercase;
  letter-spacing:.16em; font-size:.78rem !important; font-weight:400 !important;
  padding:.85em 1.8em !important; border:1px solid var(--df-plum) !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button:hover {
  background: var(--df-plum-d) !important; border-color: var(--df-plum-d) !important;
}
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--df-plum); }

/* =========================================================
   EDITORIAL / VALUE STRIP
   ========================================================= */
.df-values { background: var(--df-paper); border-block: 1px solid var(--df-line); }
.df-values__grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 2.5rem; text-align:center; }
.df-value h3 { font-size: 1.2rem; margin-bottom:.3rem; }
.df-value p { color: var(--df-pewter); font-size:.95rem; margin:0; }
.df-value .df-mark { color: var(--df-sage); margin-bottom: .8rem; display:inline-flex; }

/* =========================================================
   NEWSLETTER
   ========================================================= */
.df-news { background: var(--df-ink); color: var(--df-ground); text-align:center; }
.df-news h2 { color:#fff; }
.df-news p { color: rgba(245,241,236,.75); max-width: 48ch; margin-inline:auto; }
.df-news__form { display:flex; gap:.6rem; max-width: 460px; margin: 2rem auto 0; flex-wrap:wrap; justify-content:center; }
.df-news__form input[type=email] {
  flex:1 1 240px; background: transparent; border:1px solid rgba(245,241,236,.35);
  color:#fff; padding:.9em 1.1em; border-radius: var(--df-radius); font-family:var(--df-body);
}
.df-news__form input::placeholder { color: rgba(245,241,236,.5); }

/* =========================================================
   FOOTER
   ========================================================= */
.df-footer { background: var(--df-ground); border-top:1px solid var(--df-line); }
.df-footer__grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; padding-block: 3.5rem; }
.df-footer h4 { font-family: var(--df-body); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color: var(--df-pewter); margin-bottom:1.1rem; }
.df-footer ul { list-style:none; margin:0; padding:0; }
.df-footer li { margin-bottom:.6rem; }
.df-footer a { color: var(--df-ink); font-size:.92rem; }
.df-footer__brand { font-family:var(--df-display); font-size:1.6rem; color:var(--df-ink); }
.df-footer__brand small { display:block; font-family:var(--df-body); font-size:.85rem; color:var(--df-pewter); margin-top:.6rem; max-width:34ch; letter-spacing:0; text-transform:none; line-height:1.6; }
.df-footer__bottom { border-top:1px solid var(--df-line); padding-block:1.6rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.8rem; color:var(--df-pewter); }

/* =========================================================
   GENERIC PAGE / POST
   ========================================================= */
.df-page-head { text-align:center; padding-block: 3.5rem 2rem; }
.df-entry { max-width: 760px; margin-inline:auto; }
.df-entry img { border-radius: var(--df-radius); margin-block:1.5rem; }
.df-breadcrumb { color: var(--df-pewter); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 960px) {
  .df-tiles { grid-template-columns: repeat(2, 1fr); }
  .df-products ul.products, .df-products .products { grid-template-columns: repeat(3,1fr); }
  .df-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .df-header__inner { grid-template-columns: auto 1fr auto; min-height:68px; }
  .df-brand { grid-column:2; font-size:1.5rem; }
  .df-nav { display:none; }
  .df-burger { display:inline-flex; grid-column:1; }
  .df-header__tools { grid-column:3; gap:.9rem; }
  .df-nav.is-open {
    display:flex; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; background:var(--df-ground); border-bottom:1px solid var(--df-line);
    padding: 1.2rem var(--df-gutter);
  }
  .df-nav.is-open ul { flex-direction:column; gap:1rem; }
  .df-values__grid { grid-template-columns:1fr; gap:1.8rem; }
  .df-products ul.products, .df-products .products { grid-template-columns: repeat(2,1fr); }
  .df-footer__grid { grid-template-columns: 1fr; }
  .df-hero { min-height: 78vh; }
}
@media (max-width: 420px) {
  .df-tiles { grid-template-columns: 1fr; }
}

/* Accessibility */
:focus-visible { outline: 2px solid var(--df-plum); outline-offset: 3px; }
.df-skip { position:absolute; left:-999px; top:0; background:var(--df-ink); color:#fff; padding:.8em 1.2em; z-index:999; }
.df-skip:focus { left:0; }
.screen-reader-text { position:absolute!important; clip:rect(1px,1px,1px,1px); width:1px; height:1px; overflow:hidden; }

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