/* ---------- Reset & base ---------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Poppins, Cairo, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}

body.arabic { font-family: Cairo, Poppins, system-ui; }

/* ---------- Theme variables ---------- */
/* Light */
:root{
  --brand-1:#7C5A3A; --brand-2:#C98B45; --brand-3:#5C4634; --brand-4:#E8DCCB;

  --bg:#FFFAF2;           /* page bg */
  --ink:#2E241B;          /* text */
  --card:#FFFFFF;         /* card/bg surfaces */
  --border: rgba(124,90,58,.15);
  --nav-bg: rgba(255,250,242,.92);
  --alt: var(--brand-4);  /* alt section bg */
  --shadow: 0 10px 30px rgba(46,36,27,.15);

  /* Toggle animation drivers (0 = light, 1 = dark) */
  --x: 0;
  --glow: 0;
}

/* Dark */
:root[data-theme="dark"]{
  --bg:#0f0d0a;
  --ink:#f3e9db;
  --card:#17130f;
  --border: rgba(243,233,219,.15);
  --nav-bg: rgba(15,13,10,.85);
  --alt:#18140f;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* ---------- Links ---------- */
a{ color: inherit; text-decoration: none; font-weight: 600; }
a:hover{ color: var(--brand-2); text-decoration: none; }
/* Optional: underline only in nav/footer */
.nav a:hover, .footer a:hover { text-decoration: none; }

.nav nav{
  display: flex;
  align-items: center;   /* 👈 keep items vertically centered */
  gap: 10px;
}

/* ---------- Layout ---------- */
.container{ max-width:1200px; margin-inline:auto; padding:0 24px; }
.section{ padding:80px 0; }
.section.alt{ background: var(--alt); }
.center{ text-align:center; }
.spread{ display:flex; align-items:center; justify-content:space-between; }
.two{ display:grid; grid-template-columns:1.1fr .9fr; gap:32px; }

.grid{ display:grid; gap:16px; }
.grid.cards{ grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
.grid.products{ grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }

/* ---------- Nav (matches main screen) ---------- */
.nav{
  position: sticky; top: 0; z-index: 30;
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 24px;
}
.nav .brand{ display:flex; gap:12px; align-items:center; color:inherit; text-decoration:none; }
.nav img{ height:36px; }
.nav a{ margin:0 8px; color:inherit; text-decoration:none; font-weight:600; }
.nav a.active{ color: var(--brand-2); }
.nav .btn{ margin-left: 8px; }
.nav button.ghost{
  background:transparent; border:1px solid rgba(124,90,58,.25);
  border-radius:12px; padding:8px 12px; cursor:pointer;
}

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:82vh; display:flex; align-items:center; overflow:hidden; }
.hero-inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; position:relative; z-index:1; }
.hero h1{ font-size:48px; line-height:1.05; margin:0 0 8px; }
.grad{ background: linear-gradient(90deg, var(--brand-2), #F1C27D); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p{ opacity:.9; }
.cta-row{ display:flex; gap:12px; margin-top:20px; }
.trust{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:18px; padding:0; list-style:none; }

.hero-visual{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.hero-visual img{ width:220px; height:auto; filter: drop-shadow(0 16px 40px rgba(46,36,27,.25)); }
.hero-visual .caption{ opacity:.8; }

.hero-bg .blob{ position:absolute; filter:blur(20px); opacity:.16; }
.hero-bg .b1{ width:600px; height:600px; background:#C98B45; top:-100px; left:-120px; border-radius:50%; }
.hero-bg .b2{ width:520px; height:520px; background:#7C5A3A; bottom:-140px; right:-120px; border-radius:50%; }
.hero-bg .ring{ position:absolute; border:2px dashed rgba(124,90,58,.35); border-radius:50%; }
.hero-bg .r1{ width:540px; height:540px; top:10%; left:5%; }
.hero-bg .r2{ width:420px; height:420px; bottom:10%; right:8%; }

:root[data-theme="dark"] .hero-bg .b1{ background:#3b2a1d; opacity:.35; }
:root[data-theme="dark"] .hero-bg .b2{ background:#5a3f2c; opacity:.28; }
:root[data-theme="dark"] .hero-bg .ring{ border-color: rgba(243,233,219,.25); }

.scroll-hint{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); opacity:.8; }
.scroll-hint .iconify{ font-size:28px; }

/* ---------- Cards / Buttons / Pills ---------- */
.card{
  background: var(--card);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow);
}
.card.link{ transition: transform .2s, box-shadow .2s; }
.card.link:hover{ transform: translateY(-4px); box-shadow: 0 18px 40px rgba(46,36,27,.18); }

.card.kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; text-align:center; }
.card.kpis h3{ font-size:32px; margin:0; color:var(--brand-1); }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--brand-1); color:#fff; border:none; border-radius:14px;
  padding:12px 18px; font-weight:700; text-decoration:none; box-shadow:var(--shadow);
}
.btn.ghost{ background:transparent; color:var(--brand-1); border:1.5px solid var(--brand-1); }

.pill{
  display:inline-block; background:var(--brand-4); color:var(--brand-3);
  border-radius:999px; padding:6px 10px; font-weight:600;
}

.list{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }

.form input, .form textarea, .form select{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--border); background: var(--card);
}
.form button{ margin-top:8px; }

/* ---------- Product pieces (thumb etc.) ---------- */
.product .product-head{ display:flex; justify-content:flex-end; }
.product-actions{ margin-top:12px; display:flex; gap:8px; }

/* Product thumb (for lists/cards that use it) */
.card.product .thumb{
  width:100%; aspect-ratio:1/1; border-radius:14px; overflow:hidden; margin-bottom:12px;
  display:grid; place-items:center;
  background: radial-gradient(140% 100% at 30% 20%, rgba(201,139,69,.15), transparent 55%),
              radial-gradient(120% 100% at 70% 70%, rgba(124,90,58,.12), transparent 45%),
              var(--card);
  box-shadow: var(--shadow);
}
.card.product .thumb img{
  width:70%; height:70%; object-fit:contain; image-rendering:auto;
  filter: drop-shadow(0 10px 24px rgba(46,36,27,.25));
  transition: transform .25s ease;
}
.card.product.lift:hover .thumb img{ transform: translateY(-2px) rotate(-1.5deg); }

/* ---------- Footer ---------- */
.footer{ padding:24px 0; border-top:1px solid var(--border); background: var(--card); }

/* ---------- Hover lift utility ---------- */
.lift{ transform: translateY(0); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.lift:hover{ transform: translateY(-6px); box-shadow: 0 20px 44px rgba(46,36,27,.22); }

/* ---------- Spacing tweaks requested ---------- */
/* No underline on product cards in the main screen */
.grid.cards .card.link:hover,
.grid.cards .card.link:hover h3,
.grid.cards .card.link:hover p{ text-decoration:none; }

/* Add space between product grid and the CTA button under it */
.grid.cards + .center{ margin-top:36px; }
/* Slightly larger gap between cards */
.grid.cards{ gap:20px; }

/* ---------- Theme toggle (smooth GSAP-driven) ---------- */
/* The JS animates --x (0→1) and --glow for a buttery glide */
.theme-toggle{
  --w:56px;             /* slightly smaller so it doesn't dwarf links */
  --h:32px;
  --pad:3px;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;  /* 👈 centers content inside */
  width: var(--w);
  height: var(--h);
  margin: 0 8px 0 4px;  /* small left margin so it hugs the links */
  padding: 0;
  line-height: 0;       /* avoid baseline wobble */
  vertical-align: middle;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.06)), var(--card);
  box-shadow: var(--shadow);
  cursor: pointer;
  outline: none;
}

/* moving glow trail that follows the knob */
.theme-toggle::after{
  content:"";
  position:absolute; top:50%;
  left: calc(6px + var(--x) * (var(--w) - 12px));
  transform: translate(-50%, -50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(201,139,69,.55), rgba(201,139,69,0));
  filter: blur(7px);
  opacity: calc(var(--glow) * 0.9);
  pointer-events: none;
}

.theme-toggle .knob{
  position:absolute; top:var(--pad); left:var(--pad);
  width: calc(var(--h) - var(--pad) * 2);
  height: calc(var(--h) - var(--pad) * 2);
  border-radius: 50%;
  background:
    radial-gradient(120% 100% at 30% 20%, rgba(255,255,255,.85), rgba(255,255,255,.35)),
    #fff;
  transform:
    translateX(calc(var(--x) * (var(--w) - var(--h))))
    rotate(calc((var(--x) * 12deg) - 6deg));
  transition: background .25s;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  will-change: transform;
}

.theme-toggle .sun,
.theme-toggle .moon{
  position:absolute; top:50%; transform:translateY(-50%);
  font-size:14px; line-height:1; pointer-events:none;
}
.theme-toggle .sun{
  left:9px;
  opacity: calc(1 - var(--x));
  transform: translateY(-50%) rotate(calc(-12deg * var(--x))) scale(calc(1 - var(--x)*0.1));
}
.theme-toggle .moon{
  right:9px;
  opacity: var(--x);
  transform: translateY(-50%) rotate(calc(20deg * (1 - var(--x)))) scale(calc(.85 + var(--x)*0.15));
}

/* Focus ring so it looks like a control when tabbed */
.theme-toggle:focus-visible{
  box-shadow: 0 0 0 3px rgba(201,139,69,.25), var(--shadow);
}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .two, .hero-inner{ grid-template-columns:1fr; }
  .trust{ grid-template-columns: 1fr 1fr 1fr; }
  .hero h1{ font-size:36px; }
  .grid.cards + .center{ margin-top:44px; }
}

/* Desktop vs mobile */
.nav .nav-links { display:flex; align-items:center; gap:10px; }
.hamburger{ display:none; }

@media (max-width: 860px){
  .nav .nav-links { display:none; }
  .hamburger{
    display:inline-flex; flex-direction:column; justify-content:center; gap:4px;
    width:40px; height:40px; padding:0; background:transparent; border:none; cursor:pointer;
  }
  .hamburger span{
    display:block; width:22px; height:2px; background: var(--ink);
    transition: transform .25s, opacity .25s;
    margin-left: 9px;
  }
  /* X state */
  .hamburger[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  .hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .hamburger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
}

/* --- Mobile product grid: 2 small squares per row, name only --- */
@media (max-width: 600px){
  /* 2 columns */
  .grid.cards{
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* Square cards */
  .grid.cards .card.link{
    padding: 0;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    border-radius: 14px;
  }

  /* Name only */
  .grid.cards .card.link p{ display:none; }
  .grid.cards .card.link h3{
    margin: 0;
    font-size: 14px;
    text-align: center;
    padding: 8px 10px;
    line-height: 1.2;
  }
}

/* Drawer */
.mobile-drawer{
  position: fixed; inset: 0 0 0 auto; width:min(86vw, 360px);
  background: var(--card); color: var(--ink);
  border-left: 1px solid var(--border);
  box-shadow: -20px 0 50px rgba(0,0,0,.2);
  transform: translateX(100%); /* off-canvas by default */
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  z-index: 70;
}
.mobile-drawer.open{ transform: translateX(0); }
.drawer-inner{ padding:20px; display:grid; gap:14px; }
.drawer-close{
  justify-self:end; width:36px; height:36px; border:none; border-radius:10px;
  background:transparent; color:var(--ink); font-size:24px; cursor:pointer;
}
.m-link{ display:block; padding:12px 8px; border-radius:12px; color:inherit; text-decoration:none; }
.m-link:hover{ background: rgba(124,90,58,.08); }
.m-theme{ display:flex; align-items:center; justify-content:space-between; padding:6px 4px; }

/* Backdrop */
.drawer-backdrop{
  position: fixed; inset:0; background: rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
  opacity:0; transition: opacity .25s; z-index:60;
}
.drawer-backdrop.show{ opacity:1; }

/* ===== About: Magnetic style ===== */
.about-magnetic{ position:relative; overflow:hidden; }
.about-magnetic .container{ position:relative; z-index:1; }
.about-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;
}
@media (max-width:980px){
  .about-grid{ grid-template-columns:1fr; gap:28px; }
}

/* Background decor (matches hero aesthetic) */
.about-bg .blob{ position:absolute; filter:blur(28px); opacity:.18; pointer-events:none; }
.about-bg .b1{ width:560px; height:560px; background:var(--brand-2); top:-90px; left:-120px; border-radius:50%; }
.about-bg .b2{ width:520px; height:520px; background:var(--brand-1); bottom:-140px; right:-140px; border-radius:50%; opacity:.16; }
.about-bg .ring{ position:absolute; border:2px dashed rgba(124,90,58,.28); border-radius:50%; pointer-events:none; }
.about-bg .r1{ width:520px; height:520px; top:8%; left:6%; }
.about-bg .r2{ width:420px; height:420px; bottom:8%; right:8%; }
:root[data-theme="dark"] .about-bg .ring{ border-color:rgba(243,233,219,.22); }

/* Copy */
.about-copy h2{ margin-bottom:8px; }
.about-copy .lead{ font-size:18px; opacity:.9; margin:10px 0 16px; }
.about-copy .sub{ opacity:.85; }

/* Chips (magnetic) */
.chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 18px; }
.chip{
  border:none; background:var(--card); color:var(--ink); padding:10px 12px;
  border-radius:999px; box-shadow:var(--shadow); font-weight:600;
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  transition: transform .15s ease, box-shadow .2s ease;
}
.chip:hover{ transform: translateY(-2px); box-shadow: 0 18px 40px rgba(46,36,27,.18); }

/* Mini cards (magnetic) */
.mini-cards{ display:flex; gap:12px; flex-wrap:wrap; }
.mini-card{
  background:var(--card); border:1px solid var(--border);
  padding:12px 14px; border-radius:14px; display:flex; align-items:center; gap:8px;
  box-shadow:var(--shadow); font-weight:600;
  transition: transform .15s ease, box-shadow .2s ease;
}

/* Right side */
.about-side{ display:grid; gap:14px; }
.stat-card{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  background:var(--card); border-radius:18px; padding:18px; box-shadow:var(--shadow);
}
.stat h3{ margin:0; font-size:28px; color:var(--brand-1); }
.stat small{ opacity:.75; }

.badge-stack{ display:grid; gap:10px; }
.badge{
  background:var(--brand-4); color:var(--brand-3);
  padding:10px 12px; border-radius:12px; font-weight:700; width:max-content;
  display:inline-flex; align-items:center; gap:8px; box-shadow:var(--shadow);
}
.badge .dot{
  width:8px; height:8px; border-radius:50%; background:var(--brand-2);
}

/* Magnetic hover helpers (works with [data-magnet]) */
.magnet{ will-change: transform; perspective:600px; transform-style:preserve-3d; }
.magnet:active{ transform: translateZ(6px) scale(.98); }

/* Optional: reduce motion */
@media (prefers-reduced-motion: reduce){
  .chip, .mini-card, .magnet{ transition:none !important; }
}

/* ===== Press zoom ===== */
.pressable{
  transform-origin: center;
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}

/* When pressed (via :active or JS class) */
.pressable:active,
.pressable.is-pressed{
  transform: scale(.96);
  box-shadow: 0 10px 24px rgba(46,36,27,.16);
}


/* About: same zoom-in reveal for all [data-reveal] items */
#about [data-reveal]{
  opacity: 0;
  transform: scale(.96);
  will-change: transform, opacity;
  transition: opacity .45s ease-out, transform .45s ease-out;
}
#about [data-reveal].reveal-in{
  opacity: 1;
  transform: scale(1);
}

/* Optional: tiny hover lift on desktop only (keeps feel consistent) */
@media (hover:hover){
  #about .chip[data-reveal]:hover,
  #about .mini-card[data-reveal]:hover,
  #about .badge[data-reveal]:hover{
    transform: scale(1.02);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #about [data-reveal]{ opacity:1; transform:none !important; transition:none !important; }
}

/* === About: unified zoom-in for ALL [data-reveal] items === */
#about [data-reveal]{
  opacity: 0;
  transform: scale(.96);
  will-change: transform, opacity;
  transition: opacity .45s ease-out, transform .45s ease-out;
}
#about [data-reveal].reveal-in{
  opacity: 1;
  transform: scale(1);
}

/* optional tiny hover lift on desktop */
@media (hover:hover){
  #about .chip[data-reveal]:hover,
  #about .mini-card[data-reveal]:hover,
  #about .badge[data-reveal]:hover{
    transform: scale(1.02);
  }
}

/* accessibility */
@media (prefers-reduced-motion: reduce){
  #about [data-reveal]{ opacity:1; transform:none !important; transition:none !important; }
}


/* ===== About slider ===== */
.about-slider{
  position: relative;
  overflow: hidden;
  padding: 0;                    /* card already gives padding; slider edge-to-edge */
  border-radius: 18px;
}

.about-slider .slides{
  display: flex;
  gap: 0;
  width: 100%;
  height: 100%;
  transform: translateX(0);
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}

.about-slider .slide{
  min-width: 100%;
  aspect-ratio: 16 / 10;         /* nice landscape; adjusts fluidly */
  background: var(--card);
  display: grid;
  place-items: center;
}
.about-slider .slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Arrows */
.about-slider .arrow{
  position: absolute; inset: 50% auto auto 12px;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px; height: 40px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--card) 85%, transparent);
  border-radius: 12px;
  cursor: pointer;
  display: grid; place-items: center;
  box-shadow: var(--shadow);
}
.about-slider .arrow.next{ left: auto; right: 12px; }
.about-slider .arrow .iconify{ font-size: 20px; }
.about-slider .arrow:hover{ filter: brightness(1.02); }

/* Dots */
.about-slider .dots{
  position: absolute; inset: auto 0 10px 0;
  display: flex; justify-content: center; gap: 8px;
  z-index: 2;
}
.about-slider .dot{
  width: 8px; height: 8px; border-radius: 999px;
  background: rgba(124,90,58,.35);
  border: 1px solid var(--border);
  cursor: pointer;
}
.about-slider .dot.is-active{
  background: var(--brand-2);
  border-color: transparent;
}

/* Dark theme tweaks */
:root[data-theme="dark"] .about-slider .arrow{
  background: color-mix(in oklab, var(--card) 92%, transparent);
}

/* Small screens: keep it compact */
@media (max-width: 980px){
  .about-slider .slide{ aspect-ratio: 16 / 11; }
}

/* === About Us: solid background, no hero bleed === */
#about{
  margin-top: 0;                 /* undo any overlap tricks */
  background: var(--alt);       /* solid block; try var(--alt) if you want the tan */
  position: relative;
}

/* hide decorative background inside About */
#about .about-bg{ display:none; }

/* optional: subtle top divider so the seam feels intentional */
#about{
  border-top: 1px solid var(--border);
}

/* if you previously added extra hero padding for blending, normalize it */
.hero{ padding-bottom: 0; }

/* === About Us: solid block, clearly separated from Products === */
#about{
  background: var(--card);          /* solid white block */
  border-top: 1px solid var(--border);
  position: relative;
}

/* turn off hero-like decor in About so it doesn't blend with hero */
#about .about-bg{ display:none; }

/* give Products (alt section) a clear start edge */
.section.alt{
  background: var(--alt);           /* tan */
  border-top: 1px solid var(--border);
}

/* optional: consistent vertical rhythm */
#about.section{ padding: 72px 0; }
.section.alt{ padding: 72px 0; }

/* === Mobile text utilities (summarize on phones) === */
.show-sm{ display:none; }
.hide-sm{ display:block; }

@media (max-width: 720px){
  .show-sm{ display:block; }
  .hide-sm{ display:none !important; }
}

/* Optional section title styling (if you add titles) */
.section-title{
  margin: 0 0 14px;
  font-size: 28px;
  line-height: 1.2;
}

/* === About Us: match Contact Us background === */
#about{
  background: var(--bg);     /* same as Contact section */
  border-top: 0;             /* no divider */
}

/* keep the hero-style blobs/rings off in About (like Contact) */
#about .about-bg{ display:none; }

/* ===== Nav active styles ===== */
.nav-links a{
  position: relative;
  padding: 8px 6px;
  border-radius: 10px;
  font-weight: 600;
}

.nav-links a.active{
  color: var(--brand-2);
}

.nav-links a.active::after{
  content:"";
  position:absolute;
  left:10px; right:10px; bottom:-10px;
  height: 3px;
  border-radius: 3px;
  background: var(--brand-2);
  box-shadow: 0 4px 10px rgba(201,139,69,.35);
}

/* Mobile drawer active */
.m-link.active{
  background: rgba(124,90,58,.10);
  font-weight: 700;
}

/* (optional) hover polish */
.nav-links a:hover{
  color: var(--brand-2);
}

/* Product thumbs: fixed square with single image */
.card.product .thumb{
  width: 100%;
  aspect-ratio: 1 / 1;     /* square */
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--card);
}

.card.product .thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;        /* fill square nicely; change to 'contain' if you prefer no cropping */
  display: block;
}

/* Map embed: responsive, rounded, matches cards */
.map-embed{
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  border-radius: 16px;
  overflow: hidden;
}
.map-embed iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* Home products: square, consistent thumbs that crop cleanly */
.products-home .card{
  padding: 10px;                /* tighter than default */
  border-radius: 18px;
}

.products-home .p-thumb{
  width: 100%;
  aspect-ratio: 1 / 1;          /* perfect square */
  border-radius: 14px;
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow);
}

.products-home .p-thumb img{
  width: 100%;
  height: 100%;
  display: block;               /* removes inline-gap/whitespace */
  object-fit: cover;            /* no squish, crops edges nicely */
}

.products-home h3{
  margin: 8px 4px 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;      /* avoids multi-line wrapping on tiny screens */
}

/* Mobile: 2 columns, tight gaps for a gallery look */
@media (max-width: 600px){
  .products-home{
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .products-home .card{ padding: 8px; }
  .products-home h3{ font-size: 13px; }
}

/* === PRODUCT GRID FIX (Desktop + Mobile) === */
.products-home {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  align-items: start;
}

/* Make every product card clean and consistent */
.products-home .card.link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  border-radius: 20px;
  padding: 16px;
  background: var(--card, #fff);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  text-align: center;
  overflow: hidden;
}

.products-home .card.link:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* Perfect square image container */
/* --- Home Products grid (clean image container + text) --- */
.products-home{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Card wrapper (TEXT + IMAGE) */
.products-home .p-card{
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}

/* Inner IMAGE container (fixed square) */
.products-home .p-media{
  width: 100%;
  aspect-ratio: 1 / 1;         /* forces a square */
  overflow: hidden;
  display: block;
  background: radial-gradient(140% 100% at 30% 20%, rgba(201,139,69,.10), transparent 55%),
              radial-gradient(120% 100% at 70% 70%, rgba(124,90,58,.08), transparent 45%),
              var(--card);
}

/* Image fills the inner container */
.products-home .p-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;            /* crops nicely without distortion */
  display: block;
}

/* Title below the image, always outside the image box */
.products-home h3{
  margin: 0;
  padding: 10px 12px;
  line-height: 1.25;
  font-size: 0.98rem;
  text-align: center;
  background: var(--card);
}

/* Hover lift (nice but mild) */
@media (hover:hover){
  .products-home .p-card:hover{ transform: translateY(-4px); box-shadow: 0 18px 40px rgba(46,36,27,.18); }
}

/* Mobile: 2 columns + tighter title */
@media (max-width: 600px){
  .products-home{
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .products-home h3{ font-size: .9rem; padding: 8px 10px; }
}

/* --- Fancy hover for home product cards --- */
.products-home .p-card{
  position: relative;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s;
  will-change: transform, box-shadow;
}

/* image anim */
.products-home .p-media img{
  transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s;
  will-change: transform, filter;
}

/* sheen (hidden by default) */
.products-home .p-card::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background: linear-gradient(120deg,
              transparent 0%,
              rgba(255,255,255,.22) 42%,
              rgba(255,255,255,.06) 52%,
              transparent 60%);
  transform: translateX(-120%) skewX(-18deg);
  opacity: 0;
}

/* hover/focus states */
@media (hover:hover){
  .products-home .p-card:hover,
  .products-home .p-card:focus-visible{
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 22px 46px rgba(46,36,27,.22);
    outline: none;
  }
  .products-home .p-card:hover .p-media img,
  .products-home .p-card:focus-visible .p-media img{
    transform: scale(1.06) rotate(-0.4deg);
    filter: saturate(1.05) contrast(1.02);
  }
  .products-home .p-card:hover::after,
  .products-home .p-card:focus-visible::after{
    animation: sheen .9s ease-out forwards;
    opacity: 1;
  }
}

/* press feedback */
.products-home .p-card:active{
  transform: translateY(-2px) scale(.997);
}

/* Sheen pass */
@keyframes sheen{
  0%   { transform: translateX(-120%) skewX(-18deg); opacity:.0; }
  25%  { opacity:.55; }
  100% { transform: translateX(120%) skewX(-18deg); opacity:.0; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .products-home .p-card,
  .products-home .p-media img{ transition: none !important; }
  .products-home .p-card::after{ display:none; }
}