*{box-sizing:border-box;margin:0;padding:0}

:root{
  --gold:#f7c76b;
  --gold-soft:#ffe8a6;
  --dark:#2b1208;
  --choco:#351408;
  --red-brown:#68190d;
  --premium-red:#b83218;
  --soft:#fff8ef;
  --orange:#f15b22;
  --brown:#4b1d10;
  --text:#3d2618;
  --flash-bg:#D10000;
  --flash-border:#a80000;
}

html{
  scroll-behavior:smooth;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

body{
  font-family:Poppins,Arial,sans-serif;
  background:var(--soft);
  color:var(--text);
  line-height:1.6;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}

/* ════════════════════════════════
   TOP FLASH BAR
════════════════════════════════ */
.top-flash{
  width:100%;
  background:var(--flash-bg);
  border-bottom:2px solid var(--flash-border);
  overflow:hidden;
  height:38px;
  position:relative;
}
.top-flash-slider{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
}
.top-flash-slide{
  position:absolute;
  width:100%;height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:13px;
  font-weight:600;
  letter-spacing:.4px;
  text-align:center;
  white-space:normal;
  padding:0 16px;
  opacity:0;
  animation:slideRun 18s infinite;
}
.top-flash-slide:nth-child(1){animation-delay:0s}
.top-flash-slide:nth-child(2){animation-delay:6s}
.top-flash-slide:nth-child(3){animation-delay:12s}

@keyframes slideRun{
  0%  {opacity:0;transform:translateX(100%)}
  3%  {opacity:1;transform:translateX(100%)}
  18% {opacity:1;transform:translateX(-10%)}
  20% {opacity:1;transform:translateX(0)}
  30% {opacity:1;transform:translateX(0)}
  33% {opacity:0;transform:translateX(-110%)}
  100%{opacity:0;transform:translateX(100%)}
}

/* ════════════════════════════════
   IMAGE HEADER
   FIX: Remove aspect-ratio so the image determines
   its own height at every screen width.
   width:100% + height:auto = always full-width,
   never cropped or short on mobile.
════════════════════════════════ */
.jfp-image-header{
  position:relative;       /* anchor for home-menu-wrap */
  width:100%;
  display:block;
  background:#0d0402;
  line-height:0;
  /* overflow:visible so the dropdown submenu can
     extend below the banner without being clipped */
  overflow:visible;
}

.jfp-image-header img{
  width:100%;
  height:auto;             /* natural ratio — no cropping */
  display:block;
  object-fit:unset;        /* let image use its natural dimensions */
}

/* ════════════════════════════════
   HOME MENU — fixed top-left, always visible
════════════════════════════════ */
.home-menu-wrap{
  position:fixed;
  top:12px;
  left:12px;
  z-index:999999;
  font-family:Poppins,Arial,sans-serif;
}

/* Glowing circle button */
.circle-home-btn{
  width:74px;
  height:74px;
  border-radius:50%;
  border:3px solid #f7c76b;
  background:radial-gradient(circle, #d94a19, #651b0c 75%);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  cursor:pointer;
  box-shadow:0 0 18px rgba(247,199,107,.95), inset 0 0 16px rgba(255,255,255,.18);
  animation:homeFlash 1.2s infinite alternate;
  border-style:solid;
  /* Button itself never clips the dropdown */
  overflow:visible;
}

.circle-home-btn i{
  font-size:25px;
  margin-bottom:2px;
  pointer-events:none;
}
.circle-home-btn span{
  font-size:10px;
  font-weight:900;
  letter-spacing:1px;
  pointer-events:none;
}

@keyframes homeFlash{
  0%  {box-shadow:0 0 10px rgba(247,199,107,.6),inset 0 0 12px rgba(255,255,255,.12);transform:scale(1)}
  100%{box-shadow:0 0 28px rgba(255,190,65,1),0 0 45px rgba(241,91,34,.75);transform:scale(1.05)}
}

/* ── Submenu: slides DOWN from button ── */
.circle-submenu{
  position:fixed;
  top:98px;               /* below the button (button top:12px + height:74px + 12px gap) */
  left:12px;
  width:240px;
  background:rgba(35,12,5,.97);
  border:1px solid rgba(247,199,107,.75);
  border-radius:18px;
  box-shadow:0 8px 32px rgba(0,0,0,.55);
  backdrop-filter:blur(8px);
  overflow:hidden;
  max-height:0;
  transition:max-height .38s cubic-bezier(.4,0,.2,1);
  z-index:999998;
}

/* When .open is added by JS, JS sets max-height inline */
/* (transition still fires because max-height changes) */

.circle-submenu a{
  color:#ffe8a6;
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 14px;
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.4px;
  border-bottom:1px solid rgba(247,199,107,.13);
  transition:.22s ease;
  text-decoration:none;
  min-height:46px;
}
.circle-submenu a:last-child{border-bottom:none}

.circle-submenu a i{
  width:32px;height:32px;
  min-width:32px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#3a1609;
  border:1px solid rgba(247,199,107,.7);
  color:#f7c76b;
  font-size:13px;
  font-style:normal;
}

.circle-submenu a:hover{
  background:linear-gradient(90deg,#b83218,#f15b22);
  color:#fff;
  padding-left:20px;
}
.circle-submenu a:hover i{
  background:#fff;
  color:#b83218;
}

/* ════════════════════════════════
   HERO SLIDER
   FIX: Use a consistent wide aspect-ratio at ALL sizes.
   Banners are 1500×420 (landscape). Do NOT change
   ratio at small breakpoints — that's what was causing
   banners 4 & 5 (and any image a little different in
   size) to appear cut off or misaligned.
   object-fit:cover fills the frame regardless of the
   exact pixel dimensions of each individual image.
════════════════════════════════ */
.food-hero-slider{
  position:relative;
  width:100%;
  /* One ratio for all screen sizes — keeps banners correct */
  aspect-ratio:1500/420;
  overflow:hidden;
  border:4px solid #D10000;
  border-radius:10px;
  background:#0d0402;
}

.food-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1s ease-in-out;
}
.food-slide img{
  width:100%;
  height:100%;
  object-fit:cover;      /* fills entire frame for ALL banners regardless of their exact size */
  object-position:center;
  display:block;
}
.food-slide.active{
  opacity:1;
  z-index:2;
}
.food-hero-slider::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to right,rgba(0,0,0,.22),transparent);
  z-index:3;
  pointer-events:none;
}

/* ════════════════════════════════
   BUTTONS
════════════════════════════════ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:999px;
  padding:14px 30px;
  font-weight:800;
  font-size:15px;
  transition:.25s ease;
  cursor:pointer;
}
.btn:hover{transform:translateY(-2px)}
.primary{
  background:linear-gradient(90deg,#b83218,#f15b22);
  color:#fff;
  box-shadow:0 6px 20px rgba(184,50,24,.35);
}
.secondary{border:2px solid #fff;color:#fff}
.secondary:hover{background:rgba(255,255,255,.12)}

/* ════════════════════════════════
   PRODUCTS SECTION
════════════════════════════════ */
.section{padding:60px 5%}
.section-head{margin-bottom:36px}
.section h2{
  font-size:clamp(28px,5vw,56px);
  color:#24120a;
  line-height:1.05;
  font-weight:900;
}
.eyebrow{
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:var(--premium-red);
  margin-bottom:8px;
}

.product-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
}
.product-card{
  background:#fff;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 8px 30px rgba(85,39,13,.10);
  transition:.3s ease;
  display:flex;
  flex-direction:column;
  min-width:0;
}
.product-card:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 40px rgba(85,39,13,.16);
}
.product-img{
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#f5ede3;
}
.product-img img{
  width:100%;height:100%;
  object-fit:cover;
  transition:.4s ease;
}
.product-card:hover .product-img img{transform:scale(1.06)}
.product-body{
  padding:14px 16px 18px;
  display:flex;flex-direction:column;
  gap:5px;flex:1;
}
.product-cat{
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:1px;
  color:var(--premium-red);background:#fff0ec;
  border-radius:999px;padding:3px 10px;
  display:inline-block;width:fit-content;
}
.product-body h3{font-size:15px;font-weight:700;color:#1e0c04;margin-top:2px}
.product-body p{font-size:12px;color:#7a5540;line-height:1.5;flex:1}
.product-price{font-size:18px;font-weight:800;color:var(--premium-red);margin-top:4px}
.btn-wa{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;background:#25D366;color:#fff;
  border-radius:999px;padding:10px 14px;
  font-size:12px;font-weight:700;margin-top:8px;
  transition:.25s ease;text-align:center;
}
.btn-wa:hover{background:#1ebe5d;transform:translateY(-2px)}
.btn-wa i{font-size:15px;flex-shrink:0}

/* ════════════════════════════════
   CATALOGUE BANNER
════════════════════════════════ */
.catalogue-banner{
  background:linear-gradient(120deg,#2b1208,#68190d);
  color:#fff;
  padding:60px 6%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
}
.catalogue-banner .eyebrow{color:var(--gold)}
.catalogue-banner h2{
  font-size:clamp(22px,4vw,46px);
  font-weight:900;margin:10px 0 12px;line-height:1.1;
}
.catalogue-banner p{font-size:15px;color:#ffd9b0;max-width:600px}
.catalogue-banner .btn{flex-shrink:0;white-space:nowrap}

/* ════════════════════════════════
   STORY / ABOUT
════════════════════════════════ */
.story{
  padding:70px 5%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items:center;
}
.story-images{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.story-images img{border-radius:14px;width:100%;aspect-ratio:4/5;object-fit:cover}
.story-images img:first-child{margin-top:24px}
.story-text h2{
  font-size:clamp(26px,4vw,50px);font-weight:900;
  color:#1e0c04;margin:10px 0 14px;line-height:1.1;
}
.story-text p{font-size:15px;color:#5c3a27;margin-bottom:24px;line-height:1.8}
.features{display:flex;flex-wrap:wrap;gap:10px}
.features span{
  background:#fff0ec;color:var(--premium-red);
  border-radius:999px;padding:8px 18px;
  font-size:13px;font-weight:700;
  display:inline-flex;align-items:center;gap:8px;
}
.features span i{color:#25a244}

/* ════════════════════════════════
   FOOTER
════════════════════════════════ */
.footer{
  background:#1a0904;color:#e8c9a8;
  padding:55px 5% 0;
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;
}
.footer-col{min-width:0}
.footer h3{font-size:20px;font-weight:800;color:#fff;margin-bottom:12px}
.footer h4{
  font-size:14px;font-weight:700;color:var(--gold);
  margin-bottom:12px;text-transform:uppercase;letter-spacing:1px;
}
.footer p{
  font-size:13px;line-height:1.9;color:#c9a07a;
  display:flex;align-items:flex-start;gap:8px;
  margin-bottom:6px;word-break:break-word;
}
.footer p i{color:var(--gold);margin-top:4px;flex-shrink:0}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer ul li a{font-size:13px;color:#c9a07a;transition:.2s}
.footer ul li a:hover{color:var(--gold);padding-left:6px}
.footer-socials{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.footer-socials a{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:16px;transition:.25s;
}
.footer-socials a:hover{background:var(--premium-red);transform:translateY(-3px)}
.copyright{
  grid-column:1/-1;
  border-top:1px solid rgba(255,255,255,.08);
  text-align:center;padding:18px 0;
  font-size:12px;color:#7a5540;
  margin-top:10px;word-break:break-word;
}

/* ════════════════════════════════
   WHATSAPP FLOAT
════════════════════════════════ */
.whatsapp{
  position:fixed;
  bottom:24px;right:20px;
  width:54px;height:54px;
  background:#25D366;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:26px;
  box-shadow:0 6px 20px rgba(37,211,102,.45);
  z-index:999;transition:.25s ease;
}
.whatsapp:hover{transform:scale(1.1) translateY(-3px);box-shadow:0 10px 28px rgba(37,211,102,.55)}

/* ════════════════════════════════
   RESPONSIVE
════════════════════════════════ */

@media(max-width:1100px){
  .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer{grid-template-columns:1fr 1fr}
  .footer-col:first-child{grid-column:1/-1}
}

@media(max-width:900px){
  .story{grid-template-columns:1fr;gap:32px}
  .story-images img:first-child{margin-top:0}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:768px){
  .top-flash{height:34px}
  .top-flash-slide{font-size:11px;padding:0 10px}

  /* Slider: keep the wide landscape ratio */
  .food-hero-slider{
    border-width:3px;
    border-radius:8px;
  }

  /* Home button: slightly smaller */
  .circle-home-btn{width:60px;height:60px}
  .circle-home-btn i{font-size:20px}
  .circle-home-btn span{font-size:9px}
  /* submenu top = 12px(top) + 60px(btn) + 10px(gap) */
  .circle-submenu{top:82px;left:12px;width:210px}
  .circle-submenu a{font-size:12px;padding:10px 12px;min-height:42px}

  .catalogue-banner{flex-direction:column;text-align:center;padding:48px 5%}
  .catalogue-banner .btn{align-self:center}
  .footer{grid-template-columns:1fr;gap:28px;padding:44px 5% 0}
  .footer-col:first-child{grid-column:auto}
  .copyright{grid-column:1}
  .section{padding:50px 4%}
  .story{padding:50px 4%}
}

@media(max-width:600px){
  .top-flash{height:30px}
  .top-flash-slide{font-size:10px;padding:0 8px}

  /* Home button: compact */
  .home-menu-wrap{top:10px;left:10px}
  .circle-home-btn{width:52px;height:52px}
  .circle-home-btn i{font-size:18px;margin-bottom:1px}
  .circle-home-btn span{font-size:8px;letter-spacing:.5px}
  /* submenu top = 10px(top) + 52px(btn) + 10px(gap) */
  .circle-submenu{top:72px;left:10px;width:190px}
  .circle-submenu a{font-size:11px;padding:9px 10px;min-height:38px;gap:8px}
  .circle-submenu a i{width:28px;height:28px;min-width:28px;font-size:12px}

  /* Slider border thinner on very small screens */
  .food-hero-slider{border-width:2px;border-radius:6px}

  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .product-body{padding:12px 12px 16px}
  .product-body h3{font-size:13px}
  .product-body p{font-size:11px}
  .product-price{font-size:16px}
  .btn-wa{font-size:11px;padding:9px 10px}
  .section{padding:44px 4%}
  .story{padding:44px 4%}
  .catalogue-banner{padding:42px 5%}
  .story-images{grid-template-columns:1fr 1fr;gap:10px}
  .whatsapp{width:48px;height:48px;font-size:22px;bottom:18px;right:16px}
}

@media(max-width:400px){
  .product-grid{grid-template-columns:1fr 1fr;gap:10px}
  .btn{padding:12px 22px;font-size:14px}
  .footer h3{font-size:18px}
  .home-menu-wrap{top:8px;left:8px}
  .circle-home-btn{width:46px;height:46px}
  .circle-home-btn i{font-size:16px}
  .circle-home-btn span{font-size:7px}
  /* submenu top = 8px(top) + 46px(btn) + 10px(gap) */
  .circle-submenu{top:64px;left:8px;width:175px}
}

@media(max-width:360px){
  .product-grid{grid-template-columns:1fr}
}

/* ════════════════════════════════
   DEVICE SWITCHER BAR
════════════════════════════════ */
.switcher-bar{
  display:flex;align-items:center;justify-content:center;
  gap:8px;background:#1a0904;padding:10px 20px;
  width:100%;position:sticky;top:0;
  z-index:99999;border-bottom:2px solid #b83218;flex-wrap:wrap;
}
.switcher-label{
  font-size:12px;font-weight:600;color:#c9a07a;
  text-transform:uppercase;letter-spacing:1px;margin-right:6px;
}
.sw-btn{
  display:inline-flex;align-items:center;gap:7px;
  background:transparent;border:1.5px solid rgba(255,255,255,.2);
  border-radius:999px;color:#c9a07a;font-size:12px;font-weight:600;
  padding:7px 16px;cursor:pointer;transition:all .2s ease;
  font-family:Poppins,sans-serif;white-space:nowrap;
}
.sw-btn i{font-size:14px}
.sw-btn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4);color:#fff}
.sw-btn.active{background:#b83218;border-color:#b83218;color:#fff}

#device-frame-wrap{
  background:#0d0402;min-height:calc(100vh - 52px);
  display:flex;flex-direction:column;align-items:center;
  padding:24px 16px 40px;
}
#device-chrome{transition:all .35s ease;overflow:hidden;background:#222}
.chrome-desktop{width:100%;max-width:1280px;border:2px solid #333;border-radius:8px}
.chrome-tablet{width:768px;max-width:100%;border:6px solid #333;border-radius:14px}
.chrome-phone{
  width:390px;max-width:100%;
  border:8px solid #222;border-radius:40px;
  box-shadow:inset 0 0 0 2px #444;
}
.chrome-phone .chrome-bar{border-radius:0;padding:10px 0 6px}
.chrome-phone .chrome-bar::before{
  content:'';display:block;width:60px;height:5px;
  background:#444;border-radius:999px;margin:0 auto 8px;
}
.chrome-bar{
  background:#2a2a2a;padding:8px 14px;
  display:flex;align-items:center;gap:10px;
  border-bottom:1px solid #333;
}
.chrome-dots{display:flex;gap:5px;flex-shrink:0}
.chrome-dots span{width:10px;height:10px;border-radius:50%;display:block}
.chrome-dots span:nth-child(1){background:#ff5f57}
.chrome-dots span:nth-child(2){background:#febc2e}
.chrome-dots span:nth-child(3){background:#28c840}
.chrome-url{
  flex:1;background:#1a1a1a;border-radius:6px;
  padding:4px 12px;font-size:11px;color:#888;
  font-family:monospace;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#site-frame{
  display:block;width:100%;min-height:100vh;
  border:none;background:#fff;transition:width .35s ease;
}
.frame-size-label{
  margin-top:14px;font-size:12px;color:#555;
  font-family:monospace;text-align:center;
}

@media(max-width:480px){
  .switcher-bar{gap:6px;padding:8px 10px}
  .sw-btn{font-size:11px;padding:6px 12px}
  .switcher-label{display:none}
}