/*
Theme Name: Aizmira
Theme URI: https://aizmira.com
Author: Aizmira Studio
Description: Custom modern modest fashion theme for Aizmira.
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
Text Domain: aizmira
*/

/* =========================================================
   AIZMIRA — Complete Master Stylesheet
   Palette: Pearl Ivory / Champagne Gold / Blush Rose / Ink / Umber
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ivory:        #F9F5F0;
  --ivory-deep:   #F1E9DE;
  --ink:          #2B2622;
  --ink-soft:     #5B534B;
  --gold:         #B68D40;
  --gold-light:   #D9BC85;
  --blush:        #D9AFA4;
  --blush-light:  #EDD9D2;
  --umber:        #2E2019;
  --sand:         #E7DDCF;
  --line:         #E2D6C4;

  --display: 'Fraunces', Georgia, serif;
  --body: 'Inter', -apple-system, sans-serif;

  --container: 1240px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family: var(--display); font-weight:500; margin:0; line-height:1.1; }
p{ margin:0; }
button{ font-family: var(--body); cursor:pointer; }

.wrap{ max-width: var(--container); margin:0 auto; padding:0 32px; }

a:focus-visible, button:focus-visible, input:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ---------- EYEBROW / LABELS ---------- */
.eyebrow{
  font-size:12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight:600;
}

/* ---------- ANNOUNCEMENT BAR ---------- */
.announce{
  background: var(--umber);
  color: var(--ivory);
  text-align:center;
  font-size:12.5px;
  letter-spacing:.04em;
  padding:9px 12px;
}
.announce strong{ color: var(--gold-light); font-weight:600; }

/* ---------- UTILITY BAR ---------- */
.utility-bar{
  border-bottom:1px solid var(--line);
  font-size:12.5px;
  color: var(--ink-soft);
}
.utility-bar .wrap{
  display:flex; justify-content:space-between; align-items:center; padding:8px 32px;
}
.utility-bar .help-line{
  display:flex; align-items:center; gap:7px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.utility-bar .help-line:hover{ color: var(--gold); }
.utility-bar .help-line svg{ flex-shrink:0; color: #25D366; }
.utility-bar nav ul{ display:flex; gap:22px; }
.utility-bar nav a:hover{ color: var(--gold); }

@media (max-width: 700px) {
  .utility-bar .wrap{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    text-align: center;
  }
  .utility-bar .help-line{
    white-space: normal;
    justify-content: center;
  }
  .utility-bar nav ul{
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 4px;
    gap: 14px;
  }
}

/* ---------- SITE HEADER ---------- */
header.site-header{
  position: sticky; top:0; z-index:50;
  background: rgba(249,245,240,0.96);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 32px;
  min-height:76px;
}
.header-row .logo{ display:flex; align-items:center; }
.header-row .logo img{
  height:48px;
  max-height:52px;
  width:auto;
  object-fit:contain;
  transition: transform 0.25s ease;
}
.header-row .logo:hover img{ transform: scale(1.02); }

.main-nav{ display:flex; gap:32px; align-items:center; }
.main-nav a{
  font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  font-weight:600; color: var(--ink); position:relative; padding:4px 0;
}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background: var(--gold); transition: width .25s ease;
}
.main-nav a:hover::after{ width:100%; }

/* Mobile Menu Toggle Element */
.nav-toggle{
  display: none !important;
  visibility: hidden;
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nav-toggle-label{
  display:none;
  cursor:pointer;
  padding:10px;
  z-index: 60;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after{
  display:block;
  background: var(--ink);
  height:2px;
  width:22px;
  position:relative;
  transition: all .35s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-toggle-label span::before{ content:''; top:-7px; position:absolute; }
.nav-toggle-label span::after{ content:''; top:7px; position:absolute; }

.header-icons{ display:flex; gap:22px; align-items:center; }
.header-icons a, .header-icons button{
  background:none; border:none; color: var(--ink); display:flex; align-items:center;
  transition: color 0.2s ease;
}
.header-icons a:hover, .header-icons button:hover{ color: var(--gold); }
.header-icons svg{ width:20px; height:20px; max-width:20px; max-height:20px; }
.bag-count{
  font-size:10px; background: var(--gold); color:#fff; border-radius:50%;
  width:16px; height:16px; display:flex; align-items:center; justify-content:center;
  position:relative; top:-8px; left:-6px;
}

/* ---------- MOBILE NAV (was missing entirely — hamburger + menu now functional) ---------- */
@media (max-width: 900px) {
  .header-row {
    padding: 10px 20px;
    min-height: 64px;
    flex-wrap: wrap;
  }

  .nav-toggle-label {
    display: flex;
    align-items: center;
    order: 3;
  }

  .header-row .logo {
    order: 1;
  }

  .header-icons {
    order: 2;
    margin-left: auto;
    gap: 16px;
  }

  .main-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    order: 4;
    transition: max-height 0.35s ease, opacity 0.25s ease;
  }

  .main-nav a {
    width: 100%;
    padding: 14px 4px;
    border-bottom: 1px solid var(--line);
  }

  .nav-toggle:checked ~ .main-nav {
    max-height: 600px;
    opacity: 1;
    margin-top: 16px;
  }

  .nav-toggle:checked ~ .nav-toggle-label span {
    background: transparent;
  }

  .nav-toggle:checked ~ .nav-toggle-label span::before {
    top: 0;
    transform: rotate(45deg);
  }

  .nav-toggle:checked ~ .nav-toggle-label span::after {
    top: 0;
    transform: rotate(-45deg);
  }
}

/* =========================================================
   HERO SECTION (FIXED ABSOLUTE FULL-WIDTH BACKDROP)
   ========================================================= */

.hero {
  position: relative !important;
  min-height: calc(100vh - 80px) !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  background: var(--umber) !important;
}

.hero-bg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
}

.hero-bg img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 20% !important;
  display: block !important;
}

.hero-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2 !important;
  background: linear-gradient(
    90deg, 
    rgba(20, 15, 12, 0.85) 0%, 
    rgba(20, 15, 12, 0.45) 55%, 
    rgba(20, 15, 12, 0.10) 100%
  ) !important;
}

.hero-content {
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

.hero-copy {
  max-width: 580px !important;
  color: #ffffff !important;
}

.hero-copy .eyebrow {
  color: var(--gold-light) !important;
  display: block;
  margin-bottom: 12px;
}

.hero-copy h1 {
  font-family: var(--display) !important;
  font-size: clamp(36px, 5vw, 62px) !important;
  line-height: 1.1 !important;
  margin: 0 0 20px 0 !important;
  color: #ffffff !important;
  font-weight: 400 !important;
}

.hero-copy h1 em {
  font-style: italic !important;
  color: var(--gold-light) !important;
  font-weight: 300 !important;
}

.hero-copy p {
  font-size: 15.5px !important;
  color: var(--ivory-deep) !important;
  margin-bottom: 32px !important;
  line-height: 1.65 !important;
  opacity: 0.92 !important;
}

.hero-btns {
  display: flex !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

/* ---- About page hero: shorter (50vh) and centered text ---- */
.category-hero {
  min-height: 50vh !important;
}

/* ---- Shop category pages (Abaya, Kaftan, Activewear): taller hero ---- */
.shop-cat-hero {
  min-height: 72vh !important;
}

.category-hero .hero-content,
.shop-cat-hero .hero-content {
  display: flex !important;
  justify-content: center !important;
}

.category-hero .hero-copy,
.shop-cat-hero .hero-copy {
  text-align: center !important;
  margin: 0 auto !important;
}

.category-hero .hero-btns,
.shop-cat-hero .hero-btns {
  justify-content: center !important;
}

/* ---- Shorter on smaller screens so it doesn't dominate the viewport ---- */
@media (max-width: 700px) {
  .shop-cat-hero {
    min-height: 56vh !important;
  }
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:600; border-radius:2px; border:1px solid var(--ink);
  transition: all .25s ease;
}
.btn-primary{ background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.btn-primary:hover{ background: var(--gold); border-color: var(--gold); color: #fff; }
.btn-outline{ background:transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover{ background: var(--ink); color: var(--ivory); }
.btn-outline-light{ background:transparent; color: var(--ivory); border-color: rgba(255,255,255,0.6); }
.btn-outline-light:hover{ background: var(--ivory); color: var(--ink); border-color: var(--ivory); }

/* ---------- TRUST STRIP ---------- */
.trust-strip{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background: var(--ivory);
}
.trust-strip .wrap{
  display:grid; grid-template-columns: repeat(4,1fr); padding: 26px 32px;
}
.trust-item{
  display:flex; align-items:center; gap:12px; justify-content:center;
  text-align:left; font-size:12.5px; color: var(--ink-soft);
  border-left:1px solid var(--line); padding-left:20px;
}
.trust-item:first-child{ border-left:none; padding-left:0; justify-content:flex-start; }
.trust-item svg{ width:24px; height:24px; color: var(--gold); flex-shrink:0; }
.trust-item strong{ display:block; color: var(--ink); font-size:13px; font-weight:600; }

/* ---- Trust strip stacks to 2 cols on tablet, 1 col on phones ---- */
@media (max-width: 900px) {
  .trust-strip .wrap{
    grid-template-columns: repeat(2,1fr);
    row-gap: 24px;
    padding: 24px 20px;
  }
  .trust-item{
    justify-content:flex-start;
  }
  .trust-item:nth-child(2n+1){
    border-left:none; padding-left:0;
  }
}

@media (max-width: 560px) {
  .trust-strip .wrap{
    grid-template-columns: 1fr;
    row-gap: 20px;
    padding: 24px 20px;
  }
  .trust-item{
    border-left:none !important;
    padding-left:0 !important;
    border-bottom:1px solid var(--line);
    padding-bottom:18px;
  }
  .trust-item:last-child{
    border-bottom:none;
    padding-bottom:0;
  }
}


/* ---------- CATEGORY TILES ---------- */
.category-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:24px;
}
.category-card{
  position:relative; overflow:hidden; border-radius:4px; aspect-ratio:4/5;
}
.category-card img{ width:100%; height:100%; object-fit:cover; transition: transform .6s ease; }
.category-card:hover img{ transform: scale(1.06); }
.category-card .tag{
  position:absolute; left:20px; bottom:20px; background: rgba(249,245,240,0.92);
  padding:10px 18px; border-radius:2px; backdrop-filter: blur(4px);
}
.category-card .tag span{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--gold); display:block; margin-bottom:2px; font-weight:600;}
.category-card .tag strong{ font-family: var(--display); font-size:18px; font-weight:500; }

/* =========================================================
   SINGLE PRODUCT VIEW STYLES (FIXED THUMBNAIL CONTAINMENT)
   ========================================================= */

.single-product-page {
  padding-top: 32px;
  padding-bottom: 96px;
}

.product-layout-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 48px;
  align-items: start;
}

.product-media-column {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
  position: sticky;
  top: 90px;
}

.thumb-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.thumb-card {
  width: 76px !important;
  height: 114px !important;
  aspect-ratio: 2 / 3 !important;
  border-radius: 4px;
  overflow: hidden !important;
  cursor: pointer;
  border: 1px solid #e2d6c4;
  opacity: 0.75;
  transition: all 0.2s ease;
  background: #f4ede4;
  position: relative;
}

.thumb-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
}

.thumb-card.active,
.thumb-card:hover {
  opacity: 1;
  border-color: var(--ink);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.hero-image-viewer {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #f4ede4;
  aspect-ratio: 2 / 3;
}

.hero-image-viewer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transform: scale(1);
  transition: transform 0.4s ease;
  will-change: transform;
}

/* Desktop: hover to zoom, image pans to follow the cursor (Khaadi-style) */
@media (hover: hover) and (pointer: fine) {
  .hero-image-viewer {
    cursor: zoom-in;
  }
  .hero-image-viewer.zoom-active img {
    transform: scale(2);
    transition: transform 0.25s ease;
  }
  .hero-expand-hint {
    display: none;
  }
}

/* Mobile / touch: tap the photo to open the enlarged lightbox view */
@media (hover: none), (pointer: coarse) {
  .hero-image-viewer {
    cursor: pointer;
  }
  .hero-expand-hint {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    pointer-events: none;
  }
}

.product-meta-subtitle {
  font-size: 11.5px;
  color: #888888;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.product-title-main {
  font-size: 28px;
  margin: 6px 0 12px;
  font-weight: 500;
  color: var(--ink);
}

.product-price-block {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}

.sku-tag {
  font-size: 11.5px;
  color: #888888;
  font-weight: 400;
}

/* Size Pills */
.option-group {
  margin-bottom: 24px;
}

.option-head-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.option-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.soft-text {
  color: #777777;
  font-weight: 500;
}

.size-guide-link {
  background: none;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  cursor: pointer;
}

.size-pill-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.size-pill {
  min-width: 48px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 21px;
  background: #ffffff;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}

.size-pill.active,
.size-pill:hover {
  background: var(--ink) !important;
  color: #ffffff !important;
  border-color: var(--ink) !important;
}

.btn-dark-pill {
  width: 100%;
  background: #262626;
  color: #ffffff;
  border: none;
  padding: 18px;
  border-radius: 30px;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease;
  margin-bottom: 32px;
}

.btn-dark-pill:hover {
  background: var(--gold);
}

/* Accordions */
.product-info-accordions details {
  border-top: 1px solid var(--line);
  padding: 14px 0;
}
.product-info-accordions details:last-child {
  border-bottom: 1px solid var(--line);
}
.product-info-accordions summary {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
}
.product-info-accordions summary::-webkit-details-marker {
  display: none;
}
.acc-body {
  padding-top: 10px;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* Size Guide Modal Popup Dialog */
.aizmira-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(20, 15, 12, 0.55);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.aizmira-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.size-guide-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 32px;
  max-width: 680px;
  width: 90%;
  position: relative;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15);
}

.size-guide-card h3 {
  font-family: var(--body);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  color: var(--ink);
}

.size-guide-card p {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-bottom: 20px;
}

.modal-close {
  position: absolute;
  top: 18px;
  right: 20px;
  background: none;
  border: none;
  font-size: 26px;
  cursor: pointer;
  color: var(--ink-soft);
  line-height: 1;
}

/* Image Lightbox (mobile tap-to-enlarge viewer) */
.image-lightbox-modal .modal-close {
  color: #ffffff;
  z-index: 2;
}

.image-lightbox-modal .lightbox-image-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 56px;
}

.image-lightbox-modal #lightbox-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  user-select: none;
  -webkit-user-drag: none;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
  z-index: 2;
}

.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.3);
}

.lightbox-prev {
  left: 14px;
}

.lightbox-next {
  right: 14px;
}

.lightbox-counter {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: #ffffff;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  background: rgba(0, 0, 0, 0.35);
  padding: 4px 12px;
  border-radius: 20px;
}

.table-responsive {
  overflow-x: auto;
}

.size-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  text-align: center;
}

.size-table th,
.size-table td {
  padding: 12px 10px;
  border-bottom: 1px solid #f0f0f0;
}

.size-table th {
  background: #2d5a44;
  color: #ffffff;
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.size-table td strong {
  color: var(--ink);
}

.size-disclaimer {
  font-size: 11.5px !important;
  color: #888888 !important;
  margin-top: 16px !important;
  margin-bottom: 0 !important;
}

/* =========================================================
   KHAADI EXACT PRODUCT CARD & MORPHING PILL BUTTON
   ========================================================= */

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px 20px;
}

.product-card.khaadi-card-style {
  position: relative;
  display: flex;
  flex-direction: column;
}

.product-card.khaadi-card-style .img-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: #f4ede4;
  aspect-ratio: 2 / 3 !important;
  margin-bottom: 12px;
}

.product-card.khaadi-card-style .img-link {
  display: block;
  width: 100%;
  height: 100%;
}

.product-card.khaadi-card-style img.primary-img,
.product-card.khaadi-card-style img.hover-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  image-rendering: -webkit-optimize-contrast;
  transition: opacity 0.4s ease, transform 0.5s ease;
}

.product-card.khaadi-card-style img.hover-img {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.product-card.khaadi-card-style:hover img.hover-img {
  opacity: 1;
  transform: scale(1.03);
}

.product-card.khaadi-card-style:hover img.primary-img {
  transform: scale(1.03);
}

/* Floating Top-Right Heart Wishlist Button */
.card-wishlist-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(4px);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #222222;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: all 0.25s ease;
}

.card-wishlist-btn:hover,
.card-wishlist-btn.active {
  background: #ffffff;
  color: #eb001b;
}

.card-wishlist-btn.active svg {
  fill: #eb001b;
  stroke: #eb001b;
}

/* Khaadi Bottom-Left Morphing Circular-to-Capsule Add Button */
.khaadi-quick-add-pill {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 10;
  height: 42px;
  min-width: 42px;
  border-radius: 21px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.khaadi-quick-add-pill .pill-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111111;
  flex-shrink: 0;
}

.khaadi-quick-add-pill .icon-check {
  display: none;
}

.khaadi-quick-add-pill .pill-label {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #111111;
  white-space: nowrap;
}

.khaadi-quick-add-pill:hover {
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

.khaadi-quick-add-pill.loading {
  opacity: 0.55;
  pointer-events: none;
}

.khaadi-quick-add-pill.added {
  background: #ffffff !important;
  border-color: #2d8a4e !important;
  padding: 0 18px !important;
  box-shadow: 0 6px 16px rgba(45, 138, 78, 0.18) !important;
}

.khaadi-quick-add-pill.added .icon-add {
  display: none !important;
}

.khaadi-quick-add-pill.added .icon-check {
  display: flex !important;
}

.khaadi-quick-add-pill.added .pill-label {
  color: #2d8a4e !important;
  font-weight: 800 !important;
}

/* ---------- Product Card Info Hierarchy (Category / Name / Price) ---------- */
.product-card.khaadi-card-style .product-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.product-card.khaadi-card-style .cat-subtitle {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  font-weight: 500;
}

.product-card.khaadi-card-style .name {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.product-card.khaadi-card-style .name a {
  color: var(--ink);
}

.product-card.khaadi-card-style .price {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  margin-top: 2px;
}

.product-card.khaadi-card-style .price del {
  font-weight: 400;
  color: #9a9088;
  text-decoration: line-through;
  margin-right: 6px;
}

.product-card.khaadi-card-style .price ins {
  text-decoration: none;
  font-weight: 700;
  color: var(--ink);
}

/* ---------- Quick Add Morph Container (Add -> Sizes -> Added) ---------- */
.quick-add-morph-wrap {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* The pill/button itself no longer needs its own absolute position —
   the wrapper above handles placement on the card now */
.quick-add-morph-wrap .khaadi-quick-add-pill {
  position: static;
  bottom: auto;
  left: auto;
}

/* Expanded state: row of circular size choices, replacing the ADD pill */
.inline-sizes-row {
  display: flex;
  gap: 8px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 6px;
  border-radius: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  animation: sizesRowIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes sizesRowIn {
  from { opacity: 0; transform: translateY(4px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.size-choice-circle {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #ffffff;
  font-family: var(--body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.size-choice-circle:hover {
  background: var(--ink);
  color: #ffffff;
  border-color: var(--ink);
  transform: translateY(-1px);
}

.size-choice-circle.loading {
  opacity: 0.5;
  pointer-events: none;
}

/* Final "Added" capsule state for variable products */
.added-state {
  animation: sizesRowIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Orange Discount Percentage Pill */
.discount-badge {
  display: inline-block;
  margin-top: 8px;
  background: #ff5a36;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 12px;
  align-self: flex-start;
}

/* =========================================================
   KHAADI STYLE SLIDE-OUT QUICK CART DRAWER
   ========================================================= */

.cart-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 15, 12, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.cart-drawer-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

aside.cart-drawer,
.cart-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  width: 420px !important;
  max-width: 90vw !important;
  height: 100vh !important;
  background: #ffffff !important;
  z-index: 9999 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 24px 20px !important;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.12) !important;
  transform: translateX(100%) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

aside.cart-drawer.active,
.cart-drawer.active {
  transform: translateX(0) !important;
}

.drawer-header h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  font-family: var(--body);
}

.drawer-body {
  flex: 1;
  padding: 16px 0;
  overflow-y: auto;
}

.drawer-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.drawer-item-img img {
  width: 100px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 2px;
}

.drawer-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.drawer-title-row strong {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}

.drawer-remove-item {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--ink);
  opacity: 0.7;
}

.drawer-item-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin: 6px 0 4px;
}

.drawer-item-size {
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 4px;
}

.drawer-item-size span {
  font-weight: 700;
  color: var(--ink);
  margin-left: 12px;
}

.drawer-qty-picker {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fcfcfc;
  overflow: hidden;
}

.drawer-qty-btn {
  background: #e5e5e5;
  border: none;
  width: 28px;
  height: 28px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

.drawer-qty-val {
  width: 32px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.drawer-footer {
  padding-top: 16px;
  border-top: 1px solid var(--line);
  background: #ffffff;
}

.drawer-order-summary-card {
  background: #f8f8f8;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
}

.drawer-order-summary-card h4 {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin-bottom: 14px;
  font-family: var(--body);
}

.drawer-summary-line {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.drawer-summary-line strong {
  color: var(--ink);
  font-weight: 700;
}

.drawer-summary-divider {
  height: 1px;
  background: #e2e2e2;
  margin: 12px 0;
}

.drawer-buttons-row {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 10px;
}

.btn-drawer-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink);
  background: #ffffff;
  color: var(--ink);
  border-radius: 30px;
  padding: 14px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.btn-drawer-dark {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #262626;
  border: 1px solid #262626;
  color: #ffffff;
  border-radius: 30px;
  padding: 14px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cart-drawer .remove,
.cart-drawer a.remove,
.cart-drawer .remove_from_cart_button,
.cart-drawer button#close-drawer:not(.drawer-close) {
  display: none !important;
}

.drawer-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--line) !important;
}

.drawer-close {
  background: none !important;
  border: none !important;
  font-size: 24px !important;
  line-height: 1 !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  padding: 0 !important;
}

/* =========================================================
   KHAADI EXACT MINIMALIST CHECKOUT STYLES
   ========================================================= */

body.woocommerce-checkout .site-header,
body.woocommerce-checkout .utility-bar,
body.woocommerce-checkout .announce,
body.woocommerce-checkout footer {
  display: none !important;
}

body.woocommerce-checkout {
  background: #f6f5f2;
}

.checkout-minimal-header {
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.header-checkout-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.checkout-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}

.checkout-logo img {
  height: 42px;
  width: auto;
  object-fit: contain;
}

.checkout-secure-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #2d8a4e;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.aizmira-step-checkout {
  padding-top: 48px;
  padding-bottom: 96px;
  max-width: 1140px;
  margin: 0 auto;
}

.checkout-grid-container {
  display: grid;
  grid-template-columns: 1fr 390px;
  gap: 48px;
  align-items: start;
}

.checkout-step-card {
  background: #ffffff;
  border-radius: 12px !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 4px 16px rgba(43, 38, 34, 0.03) !important;
  margin-bottom: 24px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.checkout-step-card.active {
  border-color: var(--ink) !important;
  box-shadow: 0 6px 20px rgba(43, 38, 34, 0.06) !important;
}

.step-header {
  padding: 24px 28px;
  background: #ffffff;
  cursor: pointer;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.step-header h2 {
  font-family: var(--body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: #111111 !important;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
}

.step-body {
  padding: 20px 24px 28px;
  border-top: 1px solid #f0f0f0;
}

.step-summary-view {
  display: none;
  padding: 20px 24px 28px !important;
  font-size: 13.5px;
  color: #111111;
  border-top: 1px solid #f2f2f2;
}

.checkout-step-card.collapsed .step-body,
.checkout-step-card.collapsed .step-summary-view {
  display: none !important;
}

.checkout-step-card.completed .step-summary-view {
  display: block !important;
}

.checkout-step-card.completed .step-body {
  display: none !important;
}

.checkout-step-card.active .step-body {
  display: block !important;
}

.checkout-step-card.active .step-summary-view {
  display: none !important;
}

.step-badge-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #111111;
  color: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
}

.step-badge-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2d8a4e;
  display: none;
  align-items: center;
  justify-content: center;
}

.checkout-step-card.completed .step-badge-num { display: none; }
.checkout-step-card.completed .step-badge-check { display: flex; }

.step-edit-icon {
  background: none;
  border: none;
  color: #111111;
  cursor: pointer;
  display: none;
  padding: 4px;
}

.checkout-step-card.completed .step-edit-icon { display: flex; align-items: center; justify-content: center; }

.line-input-group {
  margin-bottom: 22px;
}

.line-input-group label {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: #767676;
  margin-bottom: 4px;
}

.underline-input,
.underline-select {
  width: 100%;
  border: none !important;
  border-bottom: 1px solid #dcdcdc !important;
  border-radius: 0 !important;
  padding: 8px 0 !important;
  font-size: 13.5px !important;
  color: #111111 !important;
  background: transparent !important;
  transition: border-color 0.2s ease;
}

.underline-input:focus,
.underline-select:focus {
  border-bottom-color: #111111 !important;
  outline: none !important;
}

.shipping-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.shipping-option-card {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  position: relative;
  background: #ffffff;
}

.shipping-option-card input[type="radio"] {
  display: none;
}

.option-radio-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #b0b0b0;
  margin-top: 2px;
  position: relative;
  flex-shrink: 0;
}

.shipping-option-card.active {
  border-color: #111111;
}

.shipping-option-card.active .option-radio-dot::after {
  content: "";
  position: absolute;
  top: 4px; left: 4px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #111111;
}

.option-card-content strong {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: #111111;
  margin-bottom: 2px;
}

.option-card-content span {
  display: block;
  font-size: 11.5px;
  color: #767676;
  line-height: 1.4;
}

.option-price {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 700;
  color: #111111;
}

.summary-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px !important;
  font-size: 13px;
  line-height: 1.6;
}

.summary-two-col strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888888;
  margin-bottom: 8px !important;
}

.summary-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid var(--line);
  padding: 28px;
  margin-bottom: 28px;
  box-shadow: 0 4px 16px rgba(43, 38, 34, 0.03);
}

.summary-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}

.summary-cart-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  margin-bottom: 16px;
  align-items: center;
}

.summary-item-media img {
  width: 64px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 6px;
}

.summary-card h4 {
  margin-bottom: 20px;
}

.coupon-card h4 {
  margin-bottom: 16px;
}

.promo-input-row {
  display: flex;
  gap: 8px;
}

.promo-input-row input {
  flex: 1;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 24px;
  font-size: 12.5px;
  background: var(--ivory);
}

.btn-apply-code {
  background: var(--ink);
  color: #ffffff;
  border: none;
  padding: 0 20px;
  border-radius: 24px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.totals-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 10px;
}

.order-totals-card .totals-row {
  margin-bottom: 16px;
  font-size: 14px;
}

.order-totals-card .totals-divider {
  margin: 18px 0;
}

.order-totals-card .totals-row.total-grand {
  margin-bottom: 0;
}

.totals-divider {
  height: 1px;
  background: var(--line);
  margin: 14px 0;
}

.totals-row.total-grand {
  font-size: 16px;
  color: var(--ink);
  font-weight: 700;
}

.btn-checkout-step {
  width: 100%;
  margin-top: 8px;
  background: #262626;
  color: #ffffff;
  border: none;
  padding: 18px;
  border-radius: 30px;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}

/* =========================================================
   KHAADI-STYLE SHOP CATALOG & ARCHIVE PAGE
   ========================================================= */

.shop-catalog-page {
  padding-top: 36px;
  padding-bottom: 96px;
}

.shop-header {
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 28px;
}

.breadcrumbs-inner {
  font-size: 11.5px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}

.shop-title {
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 48px);
  margin: 8px 0 12px;
  color: var(--ink);
  font-weight: 500;
}

.shop-category-desc {
  font-size: 14.5px;
  color: var(--ink-soft);
  max-width: 540px;
  line-height: 1.6;
}

.shop-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

.shop-toolbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-filter-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border: 1px solid var(--ink);
  border-radius: 24px;
  background: #ffffff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  cursor: pointer;
}

.category-pill-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cat-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 24px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  background: #ffffff;
  letter-spacing: 0.04em;
}

.cat-pill.active {
  background: var(--ink);
  color: #ffffff;
  border-color: var(--ink);
}

.shop-toolbar-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.shop-sort-wrap select.custom-khaadi-select {
  appearance: none;
  -webkit-appearance: none;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232B2622' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center !important;
  border: 1px solid #d0d0d0 !important;
  padding: 10px 36px 10px 18px !important;
  border-radius: 12px !important;
  font-family: var(--body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  min-width: 170px;
}

.shop-expandable-filter-card {
  display: none;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 32px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.03);
}

.filter-card-grid {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.price-range-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.price-range-inputs input {
  width: 110px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
}

.btn-filter-apply {
  background: var(--ink);
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.shop-pagination-wrap {
  margin-top: 64px;
  display: flex;
  justify-content: center;
}

.shop-pagination-wrap ul.page-numbers {
  display: flex;
  gap: 8px;
  align-items: center;
}

.shop-pagination-wrap ul.page-numbers li a,
.shop-pagination-wrap ul.page-numbers li span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.shop-pagination-wrap ul.page-numbers li span.current {
  background: var(--ink);
  color: #ffffff;
  border-color: var(--ink);
}

/* =========================================================
   REPAIRED FOOTER SECTION
   ========================================================= */

footer,
footer.site-footer {
  background: var(--umber) !important;
  color: #cfc4b8 !important;
  padding-top: 70px !important;
  margin-top: 60px !important;
  display: block !important;
}

.footer-grid {
  display: grid !important;
  grid-template-columns: 1.5fr 1fr 1fr 1fr !important;
  gap: 48px !important;
  padding-bottom: 50px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  align-items: start !important;
}

.footer-grid img {
  height: 44px;
  width: auto;
  margin-bottom: 22px;
  filter: brightness(1.1) contrast(1.05);
}

.footer-grid p {
  font-size: 13.5px;
  line-height: 1.7;
  max-width: 320px;
  color: #c2b6a8;
}

.footer-col h4 {
  font-family: var(--body);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ivory);
  margin-bottom: 20px;
  font-weight: 600;
}

.footer-col li {
  margin-bottom: 12px;
  font-size: 13.5px;
}

.footer-col a {
  color: #cfc4b8;
  transition: color 0.2s ease;
}

.footer-col a:hover {
  color: var(--gold-light);
}

.footer-social {
  display: flex;
  gap: 14px;
  margin-top: 18px;
}

.footer-social a {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-social a:hover {
  border-color: var(--gold-light);
  color: var(--gold-light);
}

.footer-social svg {
  width: 15px;
  height: 15px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px 0;
  font-size: 12px;
  color: #948a7d;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-bottom .legal ul {
  display: flex;
  gap: 20px;
}

.footer-credit {
  color: #948a7d;
}

.footer-credit a {
  color: #cfc4b8;
  transition: color 0.2s ease;
}

.footer-credit a:hover {
  color: var(--gold-light);
}

.contact-social-icons a:hover {
  border-color: var(--gold) !important;
  background: var(--gold);
  color: #fff !important;
}

/* =========================================================
   AIZMIRA — Cart Page Styles (add to style.css)
   Fixes: unstyled cart page + oversized SVG icons
   ========================================================= */
 
/* ---- Page wrap & header ---- */
.cart-page {
  max-width: 1240px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}
 
.cart-header {
  margin-bottom: 32px;
}
 
.cart-header .eyebrow {
  display: block;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
 
.cart-header h1 {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}
 
.cart-header h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-soft);
  font-size: 0.7em;
}
 
/* ---- Two-column layout: items + summary ---- */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 40px;
  align-items: start;
}
 
@media (max-width: 900px) {
  .cart-layout {
    grid-template-columns: 1fr;
  }
}
 
/* ---- Free shipping progress bar ---- */
.free-shipping-progress {
  background: var(--ivory-deep);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 24px;
}
 
.free-shipping-progress p {
  margin: 0 0 10px;
  font-size: 13.5px;
  color: var(--ink);
}
 
.progress-bar {
  height: 6px;
  border-radius: 4px;
  background: var(--sand);
  overflow: hidden;
}
 
.progress-fill {
  height: 100%;
  background: var(--gold);
  border-radius: 4px;
  transition: width 0.3s ease;
}
 
/* ---- Column headers (desktop only) ---- */
.cart-table-head {
  display: grid;
  grid-template-columns: 1fr 140px 120px;
  gap: 16px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
 
.cart-table-head span:nth-child(2),
.cart-table-head span:nth-child(3) {
  text-align: center;
}
 
@media (max-width: 700px) {
  .cart-table-head { display: none; }
}
 
/* ---- Individual cart item row ---- */
.cart-item {
  display: grid;
  grid-template-columns: 90px 1fr 140px 120px;
  gap: 16px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
 
@media (max-width: 700px) {
  .cart-item {
    grid-template-columns: 80px 1fr;
    grid-template-areas:
      "media info"
      "qty   price";
    row-gap: 12px;
  }
  .cart-item-media { grid-area: media; }
  .cart-item-info  { grid-area: info; }
  .cart-item-qty   { grid-area: qty; }
  .cart-item-price { grid-area: price; text-align: right; }
}
 
.cart-item-media img {
  width: 90px;
  height: 110px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
 
.cart-item-info .item-cat {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}
 
.cart-item-info .item-title {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 6px;
}
 
.cart-item-info .item-title a {
  color: var(--ink);
  text-decoration: none;
}
 
.cart-item-info .item-meta {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
 
.remove-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--ink-soft);
  text-decoration: none;
}
 
.remove-btn:hover {
  color: #b23b3b;
}
 
.remove-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
 
/* ---- Quantity stepper ---- */
.cart-item-qty {
  display: flex;
  justify-content: center;
}
 
.custom-qty-picker {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
 
.custom-qty-picker .qty-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--ivory-deep);
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
}
 
.custom-qty-picker .qty-input {
  width: 40px;
  height: 32px;
  border: none;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  text-align: center;
  font-size: 13.5px;
  -moz-appearance: textfield;
}
 
.custom-qty-picker .qty-input::-webkit-outer-spin-button,
.custom-qty-picker .qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
 
/* ---- Line price ---- */
.cart-item-price {
  text-align: right;
  font-family: var(--body);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
}
 
/* ---- Below-table actions ---- */
.cart-actions-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
}
 
.continue-shopping {
  font-size: 13.5px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}
 
/* ---- Gift note / tailoring accordion ---- */
.cart-gift-note {
  margin-top: 28px;
}
 
.cart-gift-note summary {
  cursor: pointer;
  font-size: 13.5px;
  color: var(--ink);
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
 
.cart-gift-note textarea {
  width: 100%;
  min-height: 90px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--body);
  font-size: 13px;
  resize: vertical;
}
 
/* ---- Order summary sidebar ---- */
.cart-summary-card {
  background: var(--ivory-deep);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px;
  position: sticky;
  top: 24px;
}
 
.cart-summary-card h2 {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 18px;
  color: var(--ink);
}
 
.summary-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13.5px;
  color: var(--ink);
  margin-bottom: 12px;
}
 
.summary-line .free-badge {
  color: #2d8a4e;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.drawer-summary-line .free-badge {
  color: #2d8a4e;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
 
.summary-divider {
  height: 1px;
  background: var(--line);
  margin: 16px 0;
}
 
.total-line {
  font-size: 15px;
  font-weight: 600;
}
 
.total-line .total-val {
  font-family: var(--display);
  font-size: 20px;
}
 
/* ---- BNPL widget (Tabby / Tamara) ---- */
.bnpl-widget {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 16px 0;
}
 
.bnpl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--ink-soft);
  padding: 6px 0;
}
 
.bnpl-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  color: #111;
}
 
.bnpl-badge.tabby { background: #7CFC9A; }
.bnpl-badge.tamara { background: #E8B4FF; }
 
/* ---- Checkout button ---- */
.checkout-btn {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 16px;
  padding: 15px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
}
 
.checkout-btn:hover {
  background: var(--umber);
}
 
/* ---- Trust / guarantee icons — fixes the oversized SVG bug ---- */
.guarantee-box {
  margin-top: 18px;
}
 
.guarantee-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
 
.guarantee-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--gold);
}
 
/* ---- Payment methods row ---- */
.payment-methods {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
 
.payment-methods > span {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
 
.payment-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
 
.payment-badges span {
  font-size: 11px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink-soft);
}
 
/* ---- Empty cart state ---- */
.empty-cart-wrap {
  text-align: center;
  padding: 64px 24px;
}
 
.empty-cart-wrap .stitch {
  width: 48px;
  height: 48px;
  margin: 0 auto 20px;
}
 
.empty-cart-wrap .stitch svg {
  width: 100%;
  height: 100%;
}
 
.empty-cart-wrap h2 {
  font-family: var(--display);
  font-size: 24px;
  margin-bottom: 8px;
}
 
.empty-cart-wrap p {
  color: var(--ink-soft);
  margin-bottom: 24px;
}
/* =========================================================
   HOME PAGE — CATEGORY SHOWCASE / NEW ARRIVALS / CRAFT TEASER
   ========================================================= */

.home-category-showcase,
.home-new-arrivals {
  padding: 72px 0;
}

.section-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 36px;
  gap: 24px;
}

.section-head-row h2 {
  font-family: var(--display);
  font-size: 34px;
  color: var(--ink);
  margin-top: 8px;
}

.section-subtext {
  color: var(--ink-soft);
  max-width: 480px;
  margin-top: 10px;
  line-height: 1.6;
}

.section-head-link {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: underline;
  white-space: nowrap;
}

/* ---- Category grid ---- */
.home-category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.home-category-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 4px;
  overflow: hidden;
  background: var(--sand);
}

.home-category-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.home-category-card:hover img {
  transform: scale(1.04);
}

.home-category-badge {
  position: absolute;
  left: 20px;
  bottom: 20px;
  background: #fff;
  padding: 12px 18px;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.home-category-badge .cat-count {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold);
}

.home-category-badge .cat-name {
  font-family: var(--display);
  font-size: 20px;
  color: var(--ink);
}

/* ---- New arrivals "NEW" / "BESTSELLER" flags ---- */
.home-card-flag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: var(--umber);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 2px;
}

/* ---- Craft / About teaser ---- */
.home-craft-teaser {
  padding: 0 0 96px;
}

.craft-teaser-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  border-radius: 6px;
  overflow: hidden;
  min-height: 460px;
}

.craft-teaser-media {
  position: relative;
}

.craft-teaser-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.craft-teaser-copy {
  background: var(--umber);
  color: #F5EFE6;
  padding: 56px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.craft-teaser-copy .eyebrow {
  color: var(--gold-light);
}

.craft-teaser-copy h2 {
  font-family: var(--display);
  font-size: 34px;
  color: #fff;
  margin: 10px 0 16px;
}

.craft-teaser-copy p {
  color: #D9CFC2;
  line-height: 1.7;
  margin-bottom: 24px;
}

.craft-teaser-copy .btn-outline {
  align-self: flex-start;
  border: 1px solid var(--gold-light);
  color: #fff;
  padding: 14px 28px;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
}

.craft-teaser-copy .btn-outline:hover {
  background: var(--gold-light);
  color: var(--umber);
}

@media (max-width: 900px) {
  .home-category-grid {
    grid-template-columns: 1fr;
  }
  .craft-teaser-grid {
    grid-template-columns: 1fr;
  }
  .craft-teaser-media {
    min-height: 320px;
  }
  .section-head-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================================================
   CATEGORY LANDING PAGE — SECTION SPACING
   (was missing entirely, causing sections to sit flush together)
   ========================================================= */

.category-editorial {
  padding: 64px 0 16px;
}

.category-editorial p {
  color: var(--ink-soft);
  line-height: 1.7;
  max-width: 720px;
}

.category-product-showcase {
  padding: 56px 0 96px;
}

.showcase-head {
  margin-bottom: 32px;
}

.showcase-head h2 {
  font-family: var(--display);
  font-size: 30px;
  color: var(--ink);
  margin-top: 8px;
}

.showcase-cta {
  text-align: center;
  margin-top: 40px;
}

/* =========================================================
   CHECKOUT — PAYMENT METHOD CARDS
   (was completely unstyled, causing the cramped/plain look)
   ========================================================= */

.khaadi-payment-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 12px;
}

.payment-method-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  transition: border-color 0.2s ease;
}

.payment-method-card.active {
  border-color: var(--gold);
}

.payment-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
}

.payment-card-head label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 14.5px;
}

.payment-card-head input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
}

.gateway-logos {
  font-size: 12px;
  color: var(--ink-soft);
}

.payment-card-body {
  padding: 4px 20px 24px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
  padding-top: 18px;
}

.payment-card-body p {
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.6;
  margin-bottom: 12px;
}

.payment-card-body label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--ink);
  margin-top: 8px;
}

.hint-text {
  color: var(--ink-soft);
  font-size: 13px;
}

/* =========================================================
   ORDER CONFIRMATION (THANK YOU) PAGE
   ========================================================= */

.order-confirmation-page {
  padding: 64px 0 96px;
  max-width: 760px;
}

.confirmation-header {
  text-align: center;
  margin-bottom: 40px;
}

.confirmation-check {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #E9F5EC;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.confirmation-header .eyebrow {
  display: block;
  margin-bottom: 10px;
}

.confirmation-header h1 {
  font-family: var(--display);
  font-size: 28px;
  color: var(--ink);
  max-width: 560px;
  margin: 0 auto;
}

.confirmation-subtext {
  color: var(--ink-soft);
  margin-top: 14px;
}

.confirmation-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px 32px;
  margin-bottom: 24px;
}

.confirmation-card h2,
.confirmation-card h3 {
  font-family: var(--display);
  font-size: 19px;
  color: var(--ink);
  margin-bottom: 20px;
}

.order-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.order-meta-grid .meta-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.order-meta-grid strong {
  font-size: 14.5px;
  color: var(--ink);
}

.order-item-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.order-item-row:last-child {
  border-bottom: none;
}

.order-item-media img {
  width: 56px;
  height: 70px;
  object-fit: cover;
  border-radius: 4px;
}

.order-item-name {
  flex: 1;
  font-size: 14.5px;
  color: var(--ink);
}

.order-item-qty {
  color: var(--ink-soft);
  margin-left: 6px;
}

.order-item-total {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.order-totals-mini {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.order-totals-mini .totals-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 10px;
  color: var(--ink-soft);
}

.order-totals-mini .totals-divider {
  border-top: 1px solid var(--line);
  margin: 10px 0;
}

.order-totals-mini .total-grand {
  color: var(--ink);
  font-size: 16px;
}

.order-totals-mini .total-grand strong {
  font-family: var(--display);
}

.confirmation-address-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.confirmation-address-grid address {
  font-style: normal;
  color: var(--ink-soft);
  line-height: 1.7;
}

.confirmation-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}

@media (max-width: 700px) {
  .order-meta-grid,
  .confirmation-address-grid {
    grid-template-columns: 1fr 1fr;
  }
  .confirmation-actions {
    flex-direction: column;
  }
}

/* =========================================================
   SITE-WIDE RESPONSIVE PASS
   ========================================================= */

/* ---- Container padding tightens on small screens ---- */
@media (max-width: 600px) {
  .wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ---- Hero text scales down ---- */
@media (max-width: 700px) {
  .hero-copy h1 {
    font-size: 34px !important;
    line-height: 1.15 !important;
  }
  .hero-copy p {
    font-size: 15px !important;
  }
  .hero-btns {
    flex-direction: column;
    align-items: stretch !important;
  }
}

/* ---- Shop / category product grid ---- */
@media (max-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 14px;
  }
}

@media (max-width: 420px) {
  .product-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px 10px;
  }
  .pill-label,
  .cat-subtitle {
    font-size: 10px;
  }
}

/* ---- Single product page ---- */
@media (max-width: 900px) {
  .product-layout-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .product-title-main {
    font-size: 24px !important;
  }

  /* The desktop layout relies on position:sticky to keep the photo
     pinned while the details column scrolls beside it. Once the grid
     collapses to one column there's nothing beside it any more, so the
     sticky image ends up pinned on top of the details column instead —
     that's the overlap in the screenshot. Turn sticky off here. */
  .product-media-column {
    position: static;
    top: auto;
    display: flex;
    flex-direction: column-reverse; /* hero renders visually above the thumb strip */
    grid-template-columns: unset;
    gap: 12px;
  }

  .vertical-gallery-wrapper {
    width: 100%;
  }

  .thumb-list {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-bottom: 2px;
  }

  .thumb-card {
    flex: 0 0 auto;
    width: 64px !important;
    height: 96px !important;
  }
}

/* ---- Footer ---- */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

/* ---- Checkout stacks to one column on tablet/mobile ---- */
@media (max-width: 900px) {
  .checkout-grid-container {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .checkout-wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .order-meta-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- Cart line items restructure into two rows on mobile
        instead of overflowing a fixed 4-column grid ---- */
@media (max-width: 600px) {
  .cart-item {
    grid-template-columns: 76px 1fr;
    grid-template-areas:
      "media info"
      "media qty"
      "media price";
    row-gap: 8px;
  }
  .cart-item-media { grid-area: media; }
  .cart-item-info { grid-area: info; }
  .cart-item-qty { grid-area: qty; }
  .cart-item-price { grid-area: price; font-weight: 600; }
}

/* ---- Shop header / hero text on mobile ---- */
@media (max-width: 600px) {
  .shop-title,
  .shop-header-content h1 {
    font-size: 26px !important;
  }
  .section-head-row h2 {
    font-size: 24px !important;
  }
}

/* =========================================================
   MOBILE STICKY CART SUMMARY BAR
   ========================================================= */

.mobile-cart-sticky {
  display: none;
}

@media (max-width: 900px) {
  /* The desktop sidebar summary is replaced by this sticky bar on mobile */
  .cart-summary-card {
    display: none;
  }

  .cart-page {
    padding-bottom: 100px; /* keep content clear of the fixed bar */
  }

  .mobile-cart-sticky {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px rgba(43, 38, 34, 0.08);
    padding: 0 20px calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .sticky-toggle-handle {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 8px 0 2px;
    background: none;
    border: none;
    color: var(--ink-soft);
    cursor: pointer;
  }

  .sticky-toggle-handle .chevron {
    transition: transform 0.25s ease;
  }

  .mobile-cart-sticky.is-open .sticky-toggle-handle .chevron {
    transform: rotate(180deg);
  }

  .sticky-breakdown {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.2s ease;
  }

  .mobile-cart-sticky.is-open .sticky-breakdown {
    max-height: 160px;
    opacity: 1;
    padding-top: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 10px;
  }

  .sticky-row {
    display: flex;
    justify-content: space-between;
    font-size: 13.5px;
    color: var(--ink-soft);
    padding: 4px 0;
  }

  .sticky-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
  }

  .sticky-total {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
  }

  .sticky-total span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-soft);
  }

  .sticky-total strong {
    font-family: var(--display);
    font-size: 19px;
    color: var(--ink);
  }

  .sticky-checkout-btn {
    flex: 1;
    max-width: 220px;
    text-align: center;
    padding: 14px 20px;
    border-radius: 999px;
    font-size: 12.5px;
  }
}
/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-page {
  padding: 60px 0 80px;
}

.contact-header {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 48px;
}

.contact-header h1 {
  margin-top: 12px;
}

.contact-header p {
  margin-top: 16px;
  color: var(--ink-soft);
  line-height: 1.6;
}

.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}

.contact-info-card {
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 32px 20px;
}

.contact-info-card svg {
  margin: 0 auto 14px;
}

.contact-info-card strong {
  display: block;
  font-family: var(--display);
  font-size: 16px;
  margin-bottom: 6px;
}

.contact-info-card span {
  color: var(--ink-soft);
  font-size: 14px;
}

.contact-socials {
  text-align: center;
  max-width: 560px;
  margin: 64px auto 0;
}

.contact-socials h2 {
  margin-top: 12px;
  font-size: 26px;
}

.contact-socials p {
  margin-top: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
}

.contact-social-icons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

.contact-social-icons a {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.contact-extra-content {
  max-width: 700px;
  margin: 48px auto 0;
}

/* ---- Contact page stacks to one column on mobile ---- */
@media (max-width: 700px) {
  .contact-page {
    padding: 40px 0 56px;
  }
  .contact-header,
  .contact-socials {
    padding: 0 20px;
  }
  .contact-info-grid {
    grid-template-columns: 1fr;
    padding: 0 20px;
    gap: 16px;
  }
  .contact-extra-content {
    padding: 0 20px;
  }
}

/* =========================================================
   HEADER SEARCH PANEL — floating glass pill + live dropdown
   ========================================================= */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 15, 12, 0.22);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.search-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.search-panel {
  position: fixed;
  top: 112px;
  left: 50%;
  width: 92%;
  max-width: 560px;
  z-index: 9999;
  transform: translate(-50%, -14px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.search-panel.active {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

/* The glass pill itself */
.site-search-form {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  padding: 14px 20px;
  box-shadow: 0 8px 32px rgba(20, 15, 12, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.search-panel-icon {
  width: 19px;
  height: 19px;
  color: var(--gold);
  flex-shrink: 0;
}

.search-panel-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 15px;
  color: var(--ink);
}

.search-panel-input::placeholder {
  color: var(--ink-soft);
  opacity: 0.75;
}

.search-panel-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  flex-shrink: 0;
}

.search-panel-close:hover {
  color: var(--ink);
}

/* Live results dropdown — same glass treatment, sits just under the pill */
.search-live-results {
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(20, 15, 12, 0.16);
  padding: 8px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.2s ease;
}

.search-live-results.active {
  max-height: 420px;
  opacity: 1;
  overflow-y: auto;
}

.search-result-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 14px;
  transition: background 0.15s ease;
}

.search-result-row:hover {
  background: rgba(182, 141, 64, 0.12);
}

.search-result-thumb {
  width: 42px;
  height: 54px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.search-result-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.search-result-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-price {
  font-size: 12.5px;
  color: var(--gold);
}

.search-view-all {
  display: block;
  text-align: center;
  padding: 12px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  border-top: 1px solid var(--line);
  margin-top: 4px;
}

.search-view-all:hover {
  color: var(--ink);
}

.search-no-results {
  padding: 18px;
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-soft);
}

/* ---- Search panel adapts on small screens ---- */
@media (max-width: 700px) {
  .search-panel {
    top: 96px;
    width: 94%;
  }
  .site-search-form {
    padding: 12px 16px;
  }
  .search-panel-input {
    font-size: 14px;
  }
}


/* =========================================================
   SEARCH RESULTS PAGE
   ========================================================= */
.search-result-page-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px;
}

.search-result-page-card h3 {
  font-family: var(--display);
  font-size: 18px;
  margin-bottom: 8px;
}

.search-result-page-card p {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
}

/* =========================================================
   WOOCOMMERCE MY ACCOUNT — styled to match Aizmira
   (Only CSS here — no login/checkout logic touched. The one
   template override, my-account.php, just adds a layout div.)
   ========================================================= */

/* ---- Login / Register screen ---- */
#customer_login {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
}

#customer_login .u-column1,
#customer_login .u-column2 {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 36px 32px;
  box-shadow: 0 4px 16px rgba(43, 38, 34, 0.03);
}

#customer_login h2 {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 24px;
}

/* ---- Shared form styling: login, register, edit account, addresses ---- */
.woocommerce-form-login .form-row,
.woocommerce-form-register .form-row,
.woocommerce-EditAccountForm .form-row,
.woocommerce-address-fields .form-row {
  margin-bottom: 18px;
}

.woocommerce-form-login label,
.woocommerce-form-register label,
.woocommerce-EditAccountForm label,
.woocommerce-address-fields label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.woocommerce-form-login input.input-text,
.woocommerce-form-register input.input-text,
.woocommerce-EditAccountForm input.input-text,
.woocommerce-address-fields input.input-text,
.woocommerce-address-fields select {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  font-size: 14px;
  color: var(--ink);
  transition: border-color 0.2s ease;
}

.woocommerce-form-login input.input-text:focus,
.woocommerce-form-register input.input-text:focus,
.woocommerce-EditAccountForm input.input-text:focus,
.woocommerce-address-fields input.input-text:focus {
  outline: none;
  border-color: var(--gold);
}

.woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-soft);
  margin: 4px 0 20px;
}

.woocommerce-form-login .lost_password a,
.woocommerce-form-register .lost_password a {
  font-size: 12.5px;
  color: var(--gold);
  text-decoration: underline;
}

.woocommerce-form-login .lost_password a:hover,
.woocommerce-form-register .lost_password a:hover {
  color: var(--ink);
}

/* ---- Buttons across every account screen ---- */
.woocommerce #customer_login button.button,
.woocommerce-form-login button.button,
.woocommerce-form-register button.button,
.woocommerce-EditAccountForm button.button,
.woocommerce-address-fields button.button,
.woocommerce-MyAccount-content button.button,
.woocommerce-MyAccount-content a.button,
.woocommerce-Address .edit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 2px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.25s ease;
}

.woocommerce #customer_login button.button:hover,
.woocommerce-form-login button.button:hover,
.woocommerce-form-register button.button:hover,
.woocommerce-EditAccountForm button.button:hover,
.woocommerce-address-fields button.button:hover,
.woocommerce-MyAccount-content button.button:hover,
.woocommerce-MyAccount-content a.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--ink);
  color: var(--ivory);
}

/* The little "Edit" link on address cards reads better small, not full-size */
.woocommerce-Address .edit {
  padding: 8px 18px;
  font-size: 11px;
  margin-top: 12px;
}

/* ---- Dashboard layout: sidebar nav + content card ---- */
.aizmira-myaccount-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  align-items: start;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
}

.woocommerce-MyAccount-navigation li {
  margin: 0;
}

.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 12px 16px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  border-radius: 8px;
  transition: background 0.2s ease, color 0.2s ease;
}

.woocommerce-MyAccount-navigation li a:hover {
  background: rgba(182, 141, 64, 0.08);
  color: var(--ink);
}

.woocommerce-MyAccount-navigation li.is-active a {
  background: var(--ink);
  color: var(--ivory);
}

.woocommerce-MyAccount-content {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 4px 16px rgba(43, 38, 34, 0.03);
}

.woocommerce-MyAccount-content p {
  color: var(--ink-soft);
  line-height: 1.7;
  font-size: 14.5px;
}

.woocommerce-MyAccount-content a {
  color: var(--gold);
  font-weight: 600;
}

.woocommerce-MyAccount-content a:hover {
  color: var(--ink);
}

/* ---- Orders / downloads tables ---- */
.woocommerce-MyAccount-content table.shop_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.woocommerce-MyAccount-content table.shop_table th {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 2px solid var(--ink);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.woocommerce-MyAccount-content table.shop_table td {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}

.woocommerce-MyAccount-content table.shop_table tr:hover td {
  background: rgba(182, 141, 64, 0.04);
}

.woocommerce-orders-table__cell-order-status mark.order-status {
  background: rgba(182, 141, 64, 0.12);
  color: var(--gold);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---- Addresses tab ---- */
.woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.woocommerce-Address {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px;
}

.woocommerce-Address h3 {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 400;
  margin: 0 0 4px;
}

.woocommerce-Address address {
  font-style: normal;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.7;
}

/* ---- Orders list pagination ---- */
.woocommerce-pagination .woocommerce-button {
  border: none;
  color: var(--gold);
  font-weight: 600;
  background: none;
  padding: 6px 10px;
}

.woocommerce-pagination .woocommerce-button:hover {
  color: var(--ink);
  background: none;
}

/* ---- Mobile: stack the login columns and the dashboard layout ---- */
@media (max-width: 800px) {
  #customer_login {
    grid-template-columns: 1fr;
  }
  .aizmira-myaccount-layout {
    grid-template-columns: 1fr;
  }
  .woocommerce-MyAccount-navigation ul {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .woocommerce-MyAccount-navigation li a {
    padding: 10px 14px;
    font-size: 12px;
  }
}