/* =========================================================
   NEHWELL — Global Stylesheet
   Design tokens, layout primitives and reusable components.
   Organised so it is simple to lift into a PHP templating
   layer later (tokens -> components -> page-level helpers).
   ========================================================= */

:root{
  /* ---- Color tokens ---- */
  --bg:        #FAFAF7;   /* soft white site background  */
  --surface:   #FFFFFF;   /* cards, panels                */
  --surface-2: #F2F0E9;   /* subtle alternate section bg  */
  --text:      #20241F;   /* primary text                 */
  --muted:     #6B6F66;   /* secondary text                */
  --border:    #E7E4DA;   /* hairline borders               */
  /*--primary:   #bd4871;   */
  --primary:   #00005f;
  --primary-d: #21503A;   /* primary, darker (hover)       */
  --accent:    #C8973A;   /* warm gold — CTAs / highlights */
  --accent-d:  #AD7C24;   /* accent, darker (hover)        */
  /*--danger:    #B3432B;*/
  --danger:    #00005f;
  --success:   #2F6B4F;

  /* ---- Type ---- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, Segoe UI, Roboto, sans-serif;

  /* ---- Radii / shadow ---- */
  --radius: 10px;
  --radius-sm: 6px;
  --shadow-sm: 0 1px 3px rgba(32,36,31,0.06);
  --shadow-md: 0 6px 24px rgba(32,36,31,0.08);
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

h1,h2,h3,h4,.font-display{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

a{ color: #00005f !important; text-decoration: none; }
a:hover{ color: var(--primary-d); }

:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.text-muted-soft{ color: var(--muted) !important; }
.bg-surface{ background: var(--surface); }
.bg-surface-2{ background: var(--surface-2); }
.section{ padding: 64px 0; }
.section-sm{ padding: 36px 0; }

.eyebrow{
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-d);
  font-weight: 600;
}

/* =========== Buttons =========== */
.btn-brand{
  background: #00005f !important;
  border: 1px solid #00005f !important;
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: .65rem 1.4rem;
  transition: background .15s ease, transform .1s ease;
  border-radius: 0px;
}
.btn-brand:hover{ background: var(--primary-d); color:#fff; }
.btn-brand:active{ transform: translateY(1px); }

.btn-accent{
  background: #00005f !important;
  border: 1px solid var(--accent);
  color: #ffff;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: .65rem 1.4rem;
}
.btn-accent:hover{ background: var(--accent-d); color:#1F1A0C; }

.btn-outline-brand{
  background: transparent;
  border: 1px solid #00005f !important;
  color: #00005f !important;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: .6rem 1.3rem;
}
.btn-outline-brand:hover{ background: #00005f !important; color:#fff; }

.btn-ghost{
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
}
.btn-ghost:hover{ background: var(--surface-2); }

/* =========== Header =========== */
.site-header{
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.topbar{
  background: #00005f !important;
  color: #EDEFE9;
  font-size: .8rem;
}
.topbar a{ color: #EDEFE9; }

.brand-mark{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--text);
  letter-spacing: -0.02em;
}
.brand-mark span{ color: #00005f !important; }

.main-nav .nav-link{
  color: var(--text);
  font-weight: 500;
  font-size: .93rem;
  padding: .5rem .85rem !important;
}
.main-nav .nav-link:hover,
.main-nav .nav-link.active{ color: #00005f !important; }

/* Country / currency switcher — the page's signature control */
.locale-pill{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .35rem .8rem .35rem .55rem;
  background: var(--surface);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
}
.locale-pill:hover{ border-color: #00005f !important; }
.locale-dot{
  width: 9px; height: 9px; border-radius: 50%;
  background: #00005f !important;
  box-shadow: 0 0 0 3px rgba(200,151,58,.18);
}
.mode-badge{
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: #00005f !important;
  color: #fff;
  border: 1px solid var(--border);
}

.icon-btn{
  width: 38px; height: 38px;
  display: inline-flex; align-items:center; justify-content:center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  position: relative;
  color: var(--text);
}
.icon-btn:hover{ border-color: #00005f !important; color: #00005f !important; }
.cart-count{
  position: absolute; top: -6px; right: -6px;
  background: #00005f !important; color:#ffff;
  font-size: .65rem; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  border: 2px solid var(--surface);
}

/* =========== Hero =========== */
.hero{
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
}
.hero-figure{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

/* =========== Cards =========== */
.product-card{
  background: var(--surface);
  border: 1px solid var(--border);
  /* border-radius: var(--radius); */
  overflow: hidden;
  transition: box-shadow .15s ease, transform .15s ease;
  height: 100%;
}
.product-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-2px); }
.product-card .thumb{
  aspect-ratio: 1/1;
  background: var(--surface-2);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display);
  color: #00005f !important;
  font-size: 2.4rem;
  border-bottom: 1px solid var(--border);
}
.product-card .body{ padding: 5px; }
.product-card .name{ font-weight: 600; font-size: .96rem; margin-bottom:.15rem; }
.product-card .cat{ font-size: .75rem; color: var(--muted); }
.price{ font-weight: 700; color: var(--text); }
.price-strike{ color: var(--muted); text-decoration: line-through; font-size:.85rem; font-weight:400; }
.b2b-note{ font-size: .72rem; color: var(--primary-d); background:#EAF1EC; border-radius: var(--radius-sm); padding: .15rem .5rem; display:inline-block; }

/* category chips */
.cat-chip{
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .4rem 1rem;
  background: var(--surface);
  font-size: .85rem;
  font-weight: 500;
  color: var(--text);
}
.cat-chip.active, .cat-chip:hover{ background: #00005f !important; border-color: #00005f !important; color:#fff; }

.cat-tile{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem 5px;
  text-align: center;
  display:block;
  color: var(--text);
}
.cat-tile:hover{ border-color: #00005f !important; box-shadow: var(--shadow-sm); color: var(--text); }
.cat-tile .ic{ font-size: 1.8rem; color: #00005f !important; margin-bottom:.4rem; }

/* =========== Forms =========== */
.form-control, .form-select{
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  padding: .6rem .8rem;
}
.form-control:focus, .form-select:focus{
  border-color: #00005f !important;
  box-shadow: 0 0 0 .2rem rgba(47,107,79,.12);
}
label{ font-weight: 600; font-size: .85rem; }

.card-panel{
  background: var(--surface);
  border: 1px solid #9aa59a95;
  /* border-radius: var(--radius); */
  padding: 1.5rem;
}

/* steps for checkout */
.step-track{ display:flex; gap:.5rem; align-items:center; }
.step{
  display:flex; align-items:center; gap:.5rem;
  font-size:.85rem; font-weight:600; color: var(--muted);
}
.step .num{
  width: 26px; height:26px; border-radius:50%;
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem;
}
.step.active{ color: #00005f !important; }
.step.active .num{ background: #00005f !important; border-color: #00005f !important; color:#fff; }
.step-sep{ width: 28px; height: 1px; background: var(--border); }

/* =========== Footer =========== */
.site-footer{
  background: #00005f !important;
  color: #ffffff;
  padding: 56px 0 24px;
}
.site-footer a{ color: #ffffff; }
.site-footer a:hover{ color: #fff; }
.site-footer h6{ color:#fff; font-family: var(--font-display); letter-spacing:.02em; margin-bottom:1rem;}
.footer-bottom{ border-top: 1px solid rgb(255, 255, 255); margin-top: 32px; padding-top: 20px; font-size:.8rem; color:#9AA59A;}
.payment-icons span{
  border:1px solid rgb(255, 255, 255); border-radius:4px; padding:.15rem .45rem; font-size:.7rem; margin-right:.3rem; display:inline-block; margin-bottom:.3rem;
  background-color: #fff;
  color:#000;
}

/* misc */
.divider-soft{ border-top:1px solid var(--border); }
.badge-soft{ 
  background: var(--surface-2); 
  color: var(--primary-d); 
  border:1px solid var(--border); 
  font-weight:600;
  border-radius: 0px;
}
.testimonial-card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 1.4rem; height:100%;}
.rating{ color: var(--accent); letter-spacing:2px; }
.qty-box{ display:inline-flex; align-items:center; border:1px solid var(--border); border-radius: var(--radius-sm); }
.qty-box button{ width:34px; height:34px; border:none; background:transparent; font-weight:700; }
.qty-box input{ width:42px; text-align:center; border:none; background:transparent; font-weight:600; }

@media (max-width: 767px){
  .section{ padding: 42px 0; }
  .hero{ text-align:center; }
}




.product-card{
    border:0;
    border-radius:0;
    overflow:hidden;
    background:#fff;
}

.product-card .thumb{
    width:100%;
    height:520px;              /* Image container */
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.product-card .product-img{
    width:100%;
    height:100%;               /* Parent ke equal */
    object-fit:cover;
    transition:.4s ease;
}

.product-card:hover .product-img{
    /* transform:scale(1.05); */
}

.product-card .body{
    padding:5px 0;
}

.product-card .name{
    font-size:18px;
    font-weight:500;
    line-height:1.5;
    /* min-height:54px; */
    color:#222;
}

.product-card .price{
    font-size:18px;
    font-weight:600;
}

/* Tablet */
@media (max-width:991px){
    .product-card .thumb{
        height:420px;
    }
}

/* Mobile */
@media (max-width:576px){
    .product-card .thumb{
        height:280px;
    }

    .product-card .name{
        font-size:15px;
        min-height:auto;
    }

    .product-card .price{
        font-size:16px;
    }
}