/* ============================================================
   NOORY LIFESTYLE — Design Tokens
   A quiet, boutique-catalog aesthetic: deep forest green + brass
   gold on warm ivory, with a recurring "prayer bead" motif drawn
   from the logo's twin tasbeeh rings.
============================================================ */

@font-face{
  font-family:'Plus Jakarta Sans';
  src:url('../assets/fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Plus Jakarta Sans';
  src:url('../assets/fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Plus Jakarta Sans';
  src:url('../assets/fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Plus Jakarta Sans';
  src:url('../assets/fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Plus Jakarta Sans';
  src:url('../assets/fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2');
  font-weight:800;font-style:normal;font-display:swap;
}

:root{
  /* ---- Color: core palette ---- */
  --forest-950:#052A20;   /* primary brand green (from logo) */
  --forest-900:#0A3A2B;
  --forest-800:#134D3A;
  --forest-700:#1C6349;
  --forest-050:#EEF3EF;

  --ink:#141613;          /* near-black, warmed not tinted grey */
  --ink-soft:#3A3F3A;

  --gold-700:#9C7A32;
  --gold-500:#C9A24B;     /* brass accent */
  --gold-300:#DFC077;
  --gold-100:#F3E7C8;

  --ivory-100:#FBF8F2;    /* page background */
  --ivory-200:#F4EFE3;
  --ivory-300:#EAE2CF;
  --white:#FFFFFF;

  --line:#DED4BC;         /* hairline borders on ivory */
  --card-line:#E9E7E1;    /* soft neutral border for cards on white backgrounds */
  --line-dark:rgba(251,248,242,0.18); /* hairline borders on forest */

  --error:#9A3B2E;
  --success:#2F5D3A;

  /* ---- Type ---- */
  --font-display:'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-body:'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif;

  /* ---- Radius & shadow (used sparingly, boutique not SaaS) ---- */
  --radius-sm:2px;
  --radius-md:3px;
  --shadow-card:0 1px 2px rgba(20,22,19,0.06);
  --shadow-pop:0 18px 40px -12px rgba(5,42,32,0.35);

  /* ---- Layout ---- */
  --container:1320px;
  --gutter:clamp(20px, 6vw, 80px);
}

/* ============ Reset ============ */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* BUG FIX: horizontal overflow cutting off content on BOTH edges on
   mobile — visible sitewide (even the header ribbon), not just on
   pages with a 2-column grid, because nothing contained it once it
   started. Root cause: CSS Grid/Flexbox items default to
   min-width:auto, meaning a grid/flex child refuses to shrink narrower
   than its own CONTENT's natural minimum width — and nothing in this
   stylesheet ever reset that. .checkout-layout's "Your Order" column
   contains .order-line rows with a fixed 52px image plus a price
   deliberately set to white-space:nowrap (so ৳ amounts never break
   mid-number) — that combination has a natural minimum width wider
   than a phone screen, so even though .checkout-layout correctly
   switches to a single column under 900px, that ONE column still
   refused to shrink below its content's minimum size, forcing the
   entire grid — and with nothing clipping it, the whole page — wider
   than the viewport. See the min-width:0 rules on .checkout-layout,
   .cart-layout, .form-two and .order-line further down for the actual
   per-component fix; overflow-x:hidden here is a deliberate backstop
   so the SAME class of bug (an unshrinkable child forcing the page
   wide) can't silently reintroduce a sideways scrollbar/cut-off layout
   again somewhere this stylesheet doesn't yet anticipate. */
html,body{overflow-x:hidden;}
body{
  margin:0;
  background:#FFFFFF;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;font-size:16px;}
h1,h2,h3,h4,p{margin:0;}

:focus-visible{
  outline:2px solid var(--gold-700);
  outline-offset:3px;
}

/* ============ Type scale ============ */
.h-display{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.1;
  color:var(--forest-950);
}
.h1{font-size:clamp(2.8rem,6vw,5.2rem);}
.h2{font-size:clamp(2rem,3.8vw,3rem);}
.h3{font-size:clamp(1.4rem,2.2vw,1.9rem);}
.h4{font-size:1.2rem;}

@media (max-width:600px){
  .h1{font-size:1.9rem;}
  .h2{font-size:1.6rem;}
  .h3{font-size:1.3rem;}
}

.eyebrow{
  font-family:var(--font-body);
  font-size:0.72rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--gold-700);
  font-weight:600;
}

.lede{
  font-size:1.1rem;
  color:var(--ink-soft);
  max-width:52ch;
  line-height:1.7;
  font-weight:400;
}

.price{
  font-family:var(--font-body);
  font-weight:600;
  color:var(--forest-950);
  letter-spacing:0.01em;
}

/* ============ Layout utilities ============ */
.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{padding-block:clamp(64px,10vw,140px);}
.section-tight{padding-block:clamp(40px,6vw,72px);}

.grid{display:grid;gap:28px;}

.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;padding:0;margin:-1px;
}

/* ============ Recurring bead-motif divider ============
   Echoes the two tasbeeh rings in the logotype; used as the
   single decorative signature repeated across the site. */
.bead-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:var(--gold-500);
  margin-block:18px;
}
.bead-divider::before,
.bead-divider::after{
  content:"";
  height:1px;
  width:clamp(28px,6vw,64px);
  background:linear-gradient(90deg,transparent,currentColor);
}
.bead-divider::after{background:linear-gradient(90deg,currentColor,transparent);}
.bead-divider svg{flex-shrink:0;}

.bead-divider--light{color:var(--gold-300);}