:root {
  --red:#B4121F; --red-light:#C44E41; --cream:#FFF8E8; --cream-dark:#ECDEC8;
  --white:#FFFFFC; --black:#171313; --text:#302724; --brown:#7F3627;
  --orange:#FF9F25; --border:#E8DDD1; --muted:#8A766E;
  --font-display:"Arial Black",Impact,Arial,sans-serif;
  --font-body:Arial,Helvetica,sans-serif;
  --radius-pill:999px; --radius-card:16px; --container:1180px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--cream);color:var(--text);font-family:var(--font-body);line-height:1.6}
a{color:inherit;text-decoration:none}.container{width:min(var(--container),92%);margin-inline:auto}.section{position:relative;padding:88px 0;overflow:hidden}
.nav-wrap{position:relative;z-index:20;padding-top:18px}.navbar{width:min(var(--container),94%);margin:0 auto;padding:14px 22px;background:var(--white);border-radius:0 0 28px 28px;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{display:inline-flex;align-items:center;gap:10px;color:var(--red);font-family:var(--font-display);font-weight:900;text-transform:uppercase}.brand-mark{width:34px;height:34px;border-radius:50%;background:var(--orange);position:relative;box-shadow:inset 0 0 0 7px #fff0c6}.brand-mark:after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--red)}.nav-links{display:flex;align-items:center;gap:22px}.nav-link{font-size:12px;font-weight:800;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 24px;border-radius:var(--radius-pill);border:0;font-size:12px;font-weight:900;text-transform:uppercase}.btn-primary{background:var(--red);color:var(--white)}.btn-light{background:var(--white);color:var(--red)}.btn-outline{background:transparent;color:var(--red);border:1px solid rgba(180,18,31,.25)}
.eyebrow{display:inline-block;background:var(--white);color:var(--red);padding:6px 12px;border-radius:3px;font-size:11px;font-weight:900;letter-spacing:.5px;text-transform:uppercase}.eyebrow.red{background:var(--red);color:var(--white)}.hero-title,.section-title,.card-title,.category-name{font-family:var(--font-display);font-weight:900;text-transform:uppercase}.hero-title{margin:14px 0 20px;font-size:clamp(54px,7vw,108px);line-height:.86;letter-spacing:-2px}.section-title{margin:12px 0 20px;color:var(--red);font-size:clamp(34px,4vw,58px);line-height:.95}.section-copy{max-width:720px;margin:0 auto;color:#665650}
.hero{position:relative;min-height:680px;background:var(--red);color:var(--white);overflow:hidden}.hero-inner{position:relative;z-index:3;text-align:center;padding:72px 0 110px}.hero-copy{max-width:760px;margin:0 auto}.hero-product{width:min(560px,78vw);height:360px;margin:24px auto 0;position:relative;filter:drop-shadow(0 24px 24px rgba(55,25,15,.20))}.hero-pack{position:absolute;border-radius:28px;background:linear-gradient(145deg,#f7b628,#ee4d22);box-shadow:0 22px 40px rgba(60,20,10,.18)}.hero-pack.a{width:42%;height:78%;left:12%;top:12%;transform:rotate(-8deg)}.hero-pack.b{width:44%;height:88%;left:31%;top:2%;background:linear-gradient(145deg,#ff9f25,#c72220)}.hero-pack.c{width:38%;height:72%;right:10%;top:17%;transform:rotate(8deg);background:linear-gradient(145deg,#d92f20,#8d1519)}.hero-pack:before{content:"SAJI AYAM";position:absolute;left:12%;right:12%;top:12%;padding:10px;background:#fff0b5;border-radius:10px;color:#9f201e;font-size:12px;font-weight:900}.hero-bowl{position:absolute;left:28%;right:23%;bottom:0;height:42%;border-radius:50% 50% 45% 45%;background:#fff5dc;border:10px solid #ead5a8}.hero-bowl:after{content:"";position:absolute;left:12%;right:12%;top:-18%;height:70%;border-radius:50%;background:radial-gradient(circle at 30% 40%,#8b4a22 0 7%,transparent 8%),radial-gradient(circle at 55% 45%,#b2662b 0 8%,transparent 9%),radial-gradient(circle at 72% 35%,#7e3f1c 0 7%,transparent 8%),radial-gradient(circle at 45% 68%,#ce7a2e 0 8%,transparent 9%),#f1a52c}.hero::after{content:"";position:absolute;z-index:2;left:-5%;bottom:-100px;width:110%;height:190px;background:var(--cream);border-radius:50% 50% 0 0/42% 42% 0 0}
.center{text-align:center}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:44px}.feature-item{text-align:center}.feature-icon{width:48px;height:48px;margin:0 auto;display:grid;place-items:center;border:1px dashed #D9C8BB;border-radius:10px;color:var(--red);font-weight:900}.feature-title{margin:12px 0 0;color:var(--black);font-size:13px;font-weight:900;text-transform:uppercase}
.background-heading{position:absolute;left:0;right:0;top:8px;text-align:center;font-family:var(--font-display);font-size:clamp(72px,10vw,150px);line-height:1;text-transform:uppercase;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(180,18,31,.07);pointer-events:none}.category-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));background:var(--white);border:1px solid var(--border)}.category-card{min-height:220px;padding:24px 16px;border-right:1px solid var(--border);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}.category-card:hover{background:#fff1df}.category-art{width:108px;height:108px;border-radius:50%;background:#fff4da;position:relative;overflow:hidden}.category-art:before,.category-art:after{content:"";position:absolute;border-radius:50%}.category-art:before{width:62%;height:62%;left:8%;bottom:10%;background:var(--orange)}.category-art:after{width:48%;height:48%;right:4%;top:8%;background:var(--red-light)}.category-name{font-size:16px;line-height:1.05}.category-link{font-size:10px;font-weight:900;color:var(--red);text-transform:uppercase}
.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.product-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;box-shadow:0 10px 35px rgba(80,45,25,.05);transition:.2s}.product-card:hover{transform:translateY(-4px)}.product-card-media{aspect-ratio:1/1;background:#F8EFD9;display:grid;place-items:center;padding:18px;position:relative;overflow:hidden}.product-card-media:before{content:"";width:64%;height:76%;border-radius:24px;background:linear-gradient(145deg,#ffab27,#ca2621);box-shadow:0 18px 28px rgba(60,20,10,.12)}.product-card-media:after{content:"SAJI AYAM";position:absolute;top:24%;left:27%;right:27%;padding:8px;background:#fff1b8;border-radius:8px;color:#a3231f;font-size:9px;font-weight:900;text-align:center}.product-card-body{padding:18px}.card-title{color:var(--black);font-size:18px;line-height:1.05;margin:0 0 10px}.product-cta{display:inline-block;margin-top:8px;color:var(--red);font-size:11px;font-weight:900;text-transform:uppercase}
.story{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:72px}.story-images{position:relative;min-height:460px}.story-image-main,.story-image-secondary{position:absolute;border-radius:4px;overflow:hidden}.story-image-main{top:0;left:0;width:75%;height:320px;background:linear-gradient(135deg,#281c18,#8d2a20)}.story-image-secondary{right:0;bottom:0;width:58%;height:240px;background:linear-gradient(135deg,#d4a86c,#f6c741);box-shadow:0 20px 45px rgba(60,30,15,.12)}.story-image-main:after,.story-image-secondary:after{content:"SAJI AYAM";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-family:var(--font-display);font-size:34px}.story-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 22px;margin:24px 0;padding:0;list-style:none}.story-list li:before{content:"•";color:var(--red);margin-right:8px}
.cta{background:var(--orange);color:var(--white);padding:58px 0;text-align:center}.cta .section-title{color:var(--white)}.cta-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:24px}.footer{background:var(--red);color:var(--white);padding:54px 0 30px}.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:36px}.footer h4{margin:0 0 14px;text-transform:uppercase}.footer small{color:rgba(255,255,255,.72)}.empty{padding:28px;background:var(--white);border:1px dashed var(--border);text-align:center}
.catalog-hero{padding:72px 0;text-align:center}.catalog-hero .section-title{margin-bottom:10px}
@media(max-width:980px){.nav-links{display:none}.feature-grid{grid-template-columns:repeat(2,1fr)}.product-grid{grid-template-columns:repeat(2,1fr)}.story{grid-template-columns:1fr}.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.section{padding:64px 0}.hero{min-height:600px}.hero-inner{padding-top:54px}.hero-product{height:280px}.feature-grid,.product-grid,.footer-grid{grid-template-columns:1fr 1fr}.category-grid{grid-template-columns:1fr 1fr}.category-card{min-height:170px}.category-art{width:82px;height:82px}.story-images{min-height:340px}}


/* ===== Mobile reliability override v1.0.1 ===== */
body{
  min-width:0;
  overflow-x:hidden;
}
img{
  max-width:100%;
  height:auto;
}
.sa-shell,
.rf-shell,
.tp-shell,
.container,
.wrap{
  width:100%;
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
  padding-left:20px;
  padding-right:20px;
}

/* Header / nav */
header,
.sa-nav,
.rf-nav,
.tp-nav{
  width:100%;
}
.sa-nav-in,
.rf-nav-in,
.tp-nav-inner{
  display:flex;
  align-items:center;
  gap:16px;
  min-height:68px;
}
.sa-brand,
.rf-brand,
.tp-brand{
  min-width:0;
}
.sa-navlinks,
.rf-navlinks,
.tp-links{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}

/* Hero */
.sa-hero-in,
.rf-hero-in,
.tp-hero-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:32px;
}
.sa-hero h1,
.rf-hero h1,
.tp-hero h1{
  overflow-wrap:anywhere;
}

/* Runtime grids */
.sa-cats,
.rf-cats,
.tp-categories{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:16px;
}
.sa-products,
.rf-products,
.tp-products,
.sa-catalog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:16px;
}
.sa-cat,
.rf-cat,
.tp-cat,
.sa-product,
.rf-product,
.tp-product,
.sa-catalog-card{
  min-width:0;
}
.sa-product h3,
.rf-product h3,
.tp-product h3,
.sa-catalog-card h3{
  overflow-wrap:anywhere;
}

/* Tablet/mobile */
@media (max-width: 760px){
  .sa-shell,
  .rf-shell,
  .tp-shell,
  .container,
  .wrap{
    padding-left:16px;
    padding-right:16px;
  }

  .sa-nav-in,
  .rf-nav-in,
  .tp-nav-inner{
    min-height:62px;
    gap:10px;
  }

  .sa-brand,
  .rf-brand,
  .tp-brand{
    font-size:18px;
  }

  .sa-navlinks,
  .rf-navlinks,
  .tp-links{
    display:none !important;
  }

  .sa-contact,
  .rf-contact,
  .tp-pill{
    font-size:12px;
    padding:10px 14px;
    margin-left:auto;
  }

  .sa-hero-in,
  .rf-hero-in,
  .tp-hero-inner{
    grid-template-columns:1fr !important;
    gap:22px;
    min-height:auto !important;
    padding-top:28px !important;
    padding-bottom:30px !important;
  }

  .sa-hero h1,
  .rf-hero h1,
  .tp-hero h1{
    font-size:38px !important;
    line-height:1.04 !important;
    margin-top:10px !important;
    margin-bottom:16px !important;
  }

  .sa-hero p,
  .rf-hero p,
  .tp-hero p{
    font-size:15px !important;
    line-height:1.6 !important;
  }

  .sa-actions,
  .rf-actions,
  .tp-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:10px !important;
  }

  .sa-btn,
  .rf-btn,
  .tp-btn{
    width:100%;
    padding:12px 14px !important;
    font-size:13px;
  }

  .sa-section,
  .rf-section,
  .tp-section{
    padding-top:38px !important;
    padding-bottom:38px !important;
  }

  .sa-card-panel,
  .rf-card-panel{
    padding:20px !important;
    border-radius:22px !important;
  }

  .sa-title,
  .rf-title,
  .tp-title{
    font-size:30px !important;
    line-height:1.1;
  }

  .sa-section-head,
  .rf-section-head,
  .tp-head{
    display:block !important;
  }

  .sa-section-head > a,
  .rf-section-head > a,
  .tp-head > a{
    margin-top:14px;
  }

  .sa-cats,
  .rf-cats,
  .tp-categories{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }

  .sa-cat,
  .rf-cat,
  .tp-cat{
    padding:10px !important;
    border-radius:18px !important;
  }

  .sa-cat h3,
  .rf-cat h3,
  .tp-cat h3{
    font-size:15px !important;
    line-height:1.25;
  }

  .sa-products,
  .rf-products,
  .tp-products,
  .sa-catalog-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }

  .sa-product,
  .rf-product,
  .tp-product,
  .sa-catalog-card{
    border-radius:18px !important;
  }

  .sa-product-body,
  .rf-product-body,
  .tp-product-body{
    padding:12px !important;
  }

  .sa-product h3,
  .rf-product h3,
  .tp-product h3,
  .sa-catalog-card h3{
    font-size:14px !important;
    min-height:0 !important;
    line-height:1.35;
  }

  .sa-benefits,
  .rf-benefits,
  .tp-benefits{
    grid-template-columns:1fr !important;
    gap:14px !important;
    padding:20px !important;
  }

  .sa-promo-copy,
  .rf-promo-copy{
    position:relative !important;
    padding:24px !important;
  }

  .sa-promo img,
  .rf-promo img{
    height:180px !important;
  }

  .sa-promo h2,
  .rf-promo h2,
  .tp-promo h2{
    font-size:30px !important;
  }

  .sa-footer,
  .rf-footer,
  .tp-footer{
    margin-top:38px !important;
    padding-top:30px !important;
  }

  .sa-footer-grid,
  .rf-footer-grid,
  .tp-footer-grid{
    grid-template-columns:1fr !important;
    gap:20px !important;
  }
}

/* Small phones */
@media (max-width: 420px){
  .sa-shell,
  .rf-shell,
  .tp-shell,
  .container,
  .wrap{
    padding-left:12px;
    padding-right:12px;
  }

  .sa-brand,
  .rf-brand,
  .tp-brand{
    font-size:16px;
  }

  .sa-logo,
  .rf-logo,
  .tp-logo{
    width:34px !important;
    height:34px !important;
  }

  .sa-contact,
  .rf-contact,
  .tp-pill{
    padding:9px 11px !important;
    font-size:11px !important;
  }

  .sa-hero h1,
  .rf-hero h1,
  .tp-hero h1{
    font-size:32px !important;
  }

  .sa-actions,
  .rf-actions,
  .tp-actions{
    grid-template-columns:1fr !important;
  }

  .sa-cats,
  .rf-cats,
  .tp-categories{
    grid-template-columns:1fr 1fr !important;
  }

  .sa-products,
  .rf-products,
  .tp-products,
  .sa-catalog-grid{
    grid-template-columns:1fr !important;
  }

  .sa-title,
  .rf-title,
  .tp-title{
    font-size:27px !important;
  }
}


/* ===== Professional Header + Hero v1.0.2 ===== */
:root{
  --pro-red:#b90f18;
  --pro-red-deep:#7f090f;
  --pro-red-bright:#dc1e1e;
  --pro-yellow:#f0b626;
  --pro-cream:#fff8e9;
  --pro-ink:#171313;
  --pro-muted:#6e625d;
}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,Helvetica,sans-serif !important;
  color:var(--pro-ink);
  background:var(--pro-cream);
}
.pro-shell{
  width:min(1180px,calc(100% - 32px));
  margin:0 auto;
}
.pro-header{
  background:var(--pro-red);
  padding:18px 0 0;
}
.pro-nav{
  min-height:70px;
  display:flex;
  align-items:center;
  gap:28px;
  background:#fff;
  border-radius:0 0 24px 24px;
  padding:0 28px;
  box-shadow:0 10px 28px rgba(62,8,8,.12);
}
.pro-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-right:auto;
}
.pro-brand-mark{
  width:38px;
  height:38px;
  border-radius:12px;
  background:
    radial-gradient(circle at 50% 48%,#f3b31f 0 26%,transparent 27%),
    linear-gradient(135deg,#d9151f,#ff8a1d);
  box-shadow:inset 0 0 0 4px #fff3d6;
}
.pro-brand-copy{display:flex;flex-direction:column;line-height:1}
.pro-brand-copy strong{
  font-size:18px;
  letter-spacing:.03em;
  font-weight:900;
  color:#b11119;
}
.pro-brand-copy small{
  font-size:9px;
  letter-spacing:.22em;
  color:#d37c24;
  margin-top:5px;
  font-weight:800;
}
.pro-menu{
  display:flex;
  align-items:center;
  gap:26px;
}
.pro-menu a{
  position:relative;
  font-size:13px;
  font-weight:800;
  color:#201818;
  padding:27px 0 23px;
}
.pro-menu a.is-active{color:#c5141d}
.pro-menu a.is-active:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:14px;
  height:2px;
  background:#d21d24;
  border-radius:999px;
}
.pro-order{
  background:linear-gradient(180deg,#e01e24,#c60e16);
  color:#fff;
  border-radius:999px;
  padding:13px 20px;
  font-size:12px;
  font-weight:900;
  box-shadow:0 7px 18px rgba(188,13,22,.25);
}
.pro-hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 75% 25%,rgba(255,79,27,.20),transparent 25%),
    radial-gradient(circle at 14% 18%,rgba(255,175,28,.10),transparent 18%),
    linear-gradient(135deg,#7b070c 0%,#a40d12 44%,#c01717 100%);
  color:#fff;
  padding:64px 0 0;
}
.pro-hero:after{
  content:"";
  position:absolute;
  left:-4%;
  right:-4%;
  bottom:112px;
  height:80px;
  background:var(--pro-cream);
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  transform:translateY(55px);
}
.pro-hero-grid{
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:50px;
  align-items:center;
  min-height:500px;
  padding-bottom:70px;
}
.pro-hero-copy{position:relative;z-index:2}
.pro-eyebrow{
  display:inline-flex;
  background:#e52b2e;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:10px 18px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
  margin-bottom:22px;
}
.pro-hero h1{
  margin:0;
  text-transform:uppercase;
  font-size:74px;
  line-height:.88;
  letter-spacing:-.035em;
  font-weight:950;
  max-width:650px;
  text-shadow:0 6px 0 rgba(74,0,0,.18);
}
.pro-hero h1 span{color:#fff}
.pro-hero h1 br + *{color:var(--pro-yellow)}
.pro-hero h2{
  margin:18px 0 10px;
  font-size:22px;
  line-height:1.25;
  font-weight:900;
}
.pro-hero p{
  margin:0;
  max-width:560px;
  color:#f9e9de;
  font-size:16px;
  line-height:1.65;
}
.pro-actions{
  display:flex;
  gap:14px;
  margin-top:26px;
}
.pro-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:160px;
  border-radius:999px;
  padding:14px 22px;
  font-size:13px;
  font-weight:900;
}
.pro-btn-main{
  background:#e51d23;
  color:#fff;
  box-shadow:0 10px 22px rgba(76,0,0,.24);
}
.pro-btn-ghost{
  border:2px solid rgba(255,255,255,.75);
  color:#fff;
  background:rgba(255,255,255,.04);
}
.pro-hero-visual{
  position:relative;
  height:410px;
  z-index:2;
}
.pro-card{
  position:absolute;
  width:230px;
  height:310px;
  border:8px solid #f3c33a;
  border-radius:24px;
  box-shadow:0 22px 42px rgba(55,0,0,.34);
  background:
    radial-gradient(circle at 50% 70%,#ef9a23 0 17%,transparent 18%),
    radial-gradient(circle at 48% 57%,#f5b535 0 14%,transparent 15%),
    linear-gradient(160deg,#74100d,#c21618 55%,#7e0b0b);
}
.pro-card:after{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:16px;
  border:1px solid rgba(255,229,149,.35);
}
.pro-card-label{
  position:absolute;
  left:20px;right:20px;bottom:18px;
  text-align:center;
  color:#fff;
  font-weight:950;
  letter-spacing:.05em;
  font-size:20px;
}
.pro-card-left{left:2%;top:60px;transform:rotate(-11deg)}
.pro-card-center{left:33%;top:0;z-index:3}
.pro-card-right{right:0;top:72px;transform:rotate(10deg)}
.pro-egg{
  position:absolute;
  right:-10px;
  bottom:-10px;
  width:190px;height:150px;
  border-radius:55% 45% 50% 50%;
  background:#f9efd6;
  box-shadow:0 12px 30px rgba(73,0,0,.22);
  z-index:4;
}
.pro-yolk{
  position:absolute;
  width:92px;height:92px;
  border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#ffc847,#ee8f17 72%);
  left:49px;top:27px;
}
.pro-benefit-bar{
  position:relative;
  z-index:5;
  padding:0 0 26px;
}
.pro-benefit-grid{
  background:#fff;
  border-radius:24px;
  padding:22px 26px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  box-shadow:0 12px 30px rgba(80,29,0,.12);
}
.pro-benefit-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:6px 20px;
  border-right:1px solid #eadfce;
  color:#1d1714;
}
.pro-benefit-item:last-child{border-right:0}
.pro-benefit-icon{
  width:42px;height:42px;
  border-radius:50%;
  border:2px solid #d91f27;
  color:#d91f27;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  flex:0 0 42px;
}
.pro-benefit-item strong{display:block;font-size:14px}
.pro-benefit-item small{display:block;font-size:11px;color:#6e615a;margin-top:4px;line-height:1.35}

/* Improve typography of existing sections */
h1,h2,h3,.rf-title,.sa-title,.tp-title{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,Helvetica,sans-serif !important;
  letter-spacing:-.025em;
}
.rf-title,.sa-title,.tp-title{
  font-weight:900 !important;
}
.rf-section,.sa-section,.tp-section{
  background:var(--pro-cream);
}
.rf-product,.sa-product,.tp-product,
.rf-cat,.sa-cat,.tp-cat{
  box-shadow:0 8px 22px rgba(70,30,10,.06);
}

/* Tablet */
@media(max-width:900px){
  .pro-menu{display:none}
  .pro-nav{padding:0 18px}
  .pro-hero-grid{grid-template-columns:1fr;gap:28px}
  .pro-hero h1{font-size:58px}
  .pro-hero-visual{height:350px}
  .pro-card{width:200px;height:270px}
  .pro-benefit-grid{grid-template-columns:1fr 1fr;gap:12px}
  .pro-benefit-item{border-right:0;border-bottom:1px solid #eadfce;padding:12px}
}

/* Mobile */
@media(max-width:600px){
  .pro-shell{width:min(100% - 24px,1180px)}
  .pro-header{padding-top:10px}
  .pro-nav{
    min-height:60px;
    border-radius:0 0 18px 18px;
    padding:0 14px;
  }
  .pro-brand-copy strong{font-size:15px}
  .pro-brand-copy small{font-size:7px}
  .pro-brand-mark{width:32px;height:32px}
  .pro-order{font-size:10px;padding:10px 13px}
  .pro-hero{padding-top:36px}
  .pro-hero-grid{
    min-height:auto;
    padding-bottom:42px;
  }
  .pro-eyebrow{font-size:10px;padding:8px 12px;margin-bottom:16px}
  .pro-hero h1{
    font-size:46px;
    line-height:.92;
  }
  .pro-hero h2{font-size:18px}
  .pro-hero p{font-size:14px}
  .pro-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .pro-btn{min-width:0;padding:12px 10px;font-size:11px}
  .pro-hero-visual{height:290px}
  .pro-card{
    width:150px;
    height:215px;
    border-width:5px;
    border-radius:18px;
  }
  .pro-card-label{font-size:13px;left:10px;right:10px}
  .pro-card-left{left:0;top:55px}
  .pro-card-center{left:28%;top:8px}
  .pro-card-right{right:0;top:65px}
  .pro-egg{width:130px;height:100px;right:-5px;bottom:3px}
  .pro-yolk{width:62px;height:62px;left:34px;top:20px}
  .pro-benefit-grid{
    grid-template-columns:1fr 1fr;
    border-radius:18px;
    padding:12px;
  }
  .pro-benefit-item{
    padding:10px 8px;
  }
  .pro-benefit-icon{width:34px;height:34px;flex-basis:34px}
  .pro-benefit-item strong{font-size:12px}
  .pro-benefit-item small{font-size:10px}
}
@media(max-width:390px){
  .pro-hero h1{font-size:40px}
  .pro-actions{grid-template-columns:1fr}
  .pro-benefit-grid{grid-template-columns:1fr}
}


/* ===== v1.0.3 Single Header + Mobile Readability ===== */
.pro-header + .pro-hero{margin-top:0}
.pro-header{position:relative;z-index:20}

/* Keep all legacy content sections readable below the professional hero */
.section,.cta,.footer{width:100%}
.container{
  width:min(1180px,calc(100% - 40px));
  margin-left:auto;
  margin-right:auto;
}
.section{
  padding:64px 0;
}
.section-title{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,Helvetica,sans-serif !important;
  font-size:38px;
  line-height:1.08;
  font-weight:900;
  letter-spacing:-.025em;
}
.section-copy{
  max-width:720px;
  margin-left:auto;
  margin-right:auto;
  font-size:15px;
  line-height:1.7;
}
.feature-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
.feature-item{
  min-width:0;
}
.category-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:18px;
}
.category-card{
  min-width:0;
  border-radius:22px;
}
.category-name{
  overflow-wrap:anywhere;
}
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:18px;
}
.product-card{
  min-width:0;
}
.card-title{
  overflow-wrap:anywhere;
  line-height:1.35;
}
.story{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:34px;
  align-items:center;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:28px;
}

/* Tablet */
@media(max-width:900px){
  .container{
    width:min(100% - 32px,1180px);
  }
  .section{
    padding:48px 0;
  }
  .feature-grid{
    grid-template-columns:1fr 1fr;
  }
  .story{
    grid-template-columns:1fr;
  }
  .footer-grid{
    grid-template-columns:1fr 1fr;
  }
}

/* Phone */
@media(max-width:600px){
  body{
    font-size:14px;
    overflow-x:hidden;
  }
  .pro-shell,
  .container{
    width:calc(100% - 24px) !important;
  }

  /* Header */
  .pro-header{
    padding-top:8px !important;
  }
  .pro-nav{
    min-height:58px !important;
    padding:0 12px !important;
    gap:8px !important;
    border-radius:0 0 16px 16px !important;
  }
  .pro-menu{
    display:none !important;
  }
  .pro-brand{
    margin-right:auto;
    gap:8px !important;
  }
  .pro-brand-mark{
    width:30px !important;
    height:30px !important;
    border-radius:9px !important;
  }
  .pro-brand-copy strong{
    font-size:14px !important;
  }
  .pro-brand-copy small{
    font-size:7px !important;
    letter-spacing:.15em !important;
  }
  .pro-order{
    font-size:10px !important;
    padding:9px 12px !important;
  }

  /* Hero */
  .pro-hero{
    padding-top:28px !important;
  }
  .pro-hero-grid{
    grid-template-columns:1fr !important;
    gap:18px !important;
    min-height:auto !important;
    padding-bottom:26px !important;
  }
  .pro-eyebrow{
    margin-bottom:12px !important;
    font-size:9px !important;
  }
  .pro-hero h1{
    font-size:42px !important;
    line-height:.9 !important;
    letter-spacing:-.04em !important;
  }
  .pro-hero h2{
    font-size:17px !important;
    margin-top:14px !important;
  }
  .pro-hero p{
    font-size:13px !important;
    line-height:1.55 !important;
  }
  .pro-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    margin-top:18px !important;
  }
  .pro-btn{
    min-width:0 !important;
    width:100% !important;
    padding:11px 9px !important;
    font-size:10px !important;
  }
  .pro-hero-visual{
    height:245px !important;
  }
  .pro-card{
    width:128px !important;
    height:185px !important;
    border-width:4px !important;
  }
  .pro-card-left{left:2% !important;top:45px !important}
  .pro-card-center{left:29% !important;top:4px !important}
  .pro-card-right{right:1% !important;top:48px !important}
  .pro-card-label{
    font-size:11px !important;
    left:6px !important;
    right:6px !important;
  }
  .pro-egg{
    width:110px !important;
    height:84px !important;
    right:0 !important;
    bottom:2px !important;
  }
  .pro-yolk{
    width:52px !important;
    height:52px !important;
    left:29px !important;
    top:16px !important;
  }
  .pro-hero:after{
    bottom:88px !important;
  }

  /* Benefit bar */
  .pro-benefit-bar{
    padding-bottom:16px !important;
  }
  .pro-benefit-grid{
    grid-template-columns:1fr 1fr !important;
    gap:0 !important;
    padding:10px !important;
    border-radius:16px !important;
  }
  .pro-benefit-item{
    padding:9px 7px !important;
    gap:7px !important;
    border-right:0 !important;
  }
  .pro-benefit-icon{
    width:30px !important;
    height:30px !important;
    flex-basis:30px !important;
    font-size:11px;
  }
  .pro-benefit-item strong{
    font-size:10px !important;
  }
  .pro-benefit-item small{
    font-size:8px !important;
    line-height:1.3 !important;
  }

  /* Content */
  .section{
    padding:36px 0 !important;
  }
  .section-title{
    font-size:28px !important;
  }
  .section-copy{
    font-size:13px !important;
  }
  .feature-grid{
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }
  .category-grid{
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }
  .category-card{
    border-radius:16px !important;
    overflow:hidden;
  }
  .category-name{
    font-size:14px !important;
  }
  .category-link{
    font-size:10px !important;
  }
  .product-grid{
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }
  .product-card{
    border-radius:16px !important;
    overflow:hidden;
  }
  .product-card-body{
    padding:11px !important;
  }
  .card-title{
    font-size:13px !important;
    min-height:0 !important;
  }
  .product-cta{
    font-size:10px !important;
  }
  .story{
    grid-template-columns:1fr !important;
    gap:20px !important;
  }
  .cta{
    padding:38px 0 !important;
  }
  .cta-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }
  .footer{
    padding:30px 0 20px !important;
  }
  .footer-grid{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }
}

/* Narrow phones */
@media(max-width:390px){
  .pro-hero h1{
    font-size:36px !important;
  }
  .pro-actions{
    grid-template-columns:1fr !important;
  }
  .pro-benefit-grid{
    grid-template-columns:1fr !important;
  }
  .feature-grid{
    grid-template-columns:1fr !important;
  }
  .category-grid{
    grid-template-columns:1fr 1fr !important;
  }
  .product-grid{
    grid-template-columns:1fr !important;
  }
  .cta-actions{
    grid-template-columns:1fr !important;
  }
}


/* ===== v1.0.4 Seamless Section Transition ===== */

/* Benefit strip removed */
.pro-benefit-bar,
.pro-benefit-grid,
.pro-benefit-item{
  display:none !important;
}

/* Hero now flows directly into content */
.pro-hero{
  padding-bottom:72px !important;
  margin-bottom:0 !important;
  background:
    radial-gradient(circle at 75% 25%,rgba(255,79,27,.18),transparent 25%),
    radial-gradient(circle at 14% 18%,rgba(255,175,28,.08),transparent 18%),
    linear-gradient(135deg,#7b070c 0%,#a40d12 44%,#c01717 100%) !important;
}

/* Replace old white hump with a subtle cream wave */
.pro-hero:after{
  content:"" !important;
  position:absolute !important;
  left:-3% !important;
  right:-3% !important;
  bottom:-1px !important;
  height:58px !important;
  background:#fff8e9 !important;
  border-radius:50% 50% 0 0 / 100% 100% 0 0 !important;
  transform:none !important;
  z-index:1 !important;
}

/* First content section should touch the hero visually */
.pro-hero + .section,
.pro-hero + section{
  margin-top:0 !important;
}

/* Remove hard visual breaks from remaining sections */
.section{
  border-top:0 !important;
  margin-top:0 !important;
}
.section.center,
.section.products,
.section.categories{
  background:#fff8e9 !important;
}
.section + .section{
  margin-top:0 !important;
}

/* Softer section rhythm */
.section{
  padding-top:56px !important;
  padding-bottom:56px !important;
}
.section:first-of-type{
  padding-top:48px !important;
}

/* Reduce abrupt background seams around CTA/footer */
.cta{
  margin-top:0 !important;
  border-radius:0 !important;
}
.footer{
  margin-top:0 !important;
}

/* Mobile seamless */
@media(max-width:600px){
  .pro-hero{
    padding-bottom:38px !important;
  }
  .pro-hero:after{
    height:34px !important;
  }
  .section{
    padding-top:34px !important;
    padding-bottom:34px !important;
  }
}


/* ===== v1.0.5 Brand Navbar Refinement ===== */
.pro-header{
  background:
    linear-gradient(180deg,#9d0a10 0%,#a90e14 100%) !important;
  padding:18px 0 16px !important;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.04);
}
.pro-nav{
  min-height:72px !important;
  border-radius:999px !important;
  padding:0 18px 0 14px !important;
  background:rgba(255,253,248,.985) !important;
  box-shadow:
    0 14px 30px rgba(69,0,4,.26),
    0 4px 10px rgba(69,0,4,.10),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
  border:1px solid rgba(255,255,255,.72);
}
.pro-brand{
  gap:10px !important;
}
.pro-brand-logo-wrap{
  width:46px;
  height:46px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex:0 0 46px;
  background:#fff;
  box-shadow:
    0 5px 12px rgba(121,22,14,.15),
    inset 0 0 0 1px rgba(143,40,20,.08);
}
.pro-brand-logo{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.pro-brand-copy strong{
  font-size:18px !important;
  letter-spacing:.02em !important;
  color:#a90e14 !important;
}
.pro-brand-copy small{
  margin-top:5px !important;
  font-size:8px !important;
  letter-spacing:.12em !important;
  color:#9a6d50 !important;
  font-weight:800 !important;
  white-space:nowrap;
}
.pro-menu a{
  font-size:13px !important;
}
.pro-order{
  padding:13px 20px !important;
  box-shadow:
    0 8px 18px rgba(185,15,24,.22),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.pro-hero{
  margin-top:-1px !important;
}

/* Phone refinements */
@media(max-width:600px){
  .pro-header{
    padding:8px 0 10px !important;
  }
  .pro-nav{
    min-height:58px !important;
    border-radius:999px !important;
    padding:0 9px !important;
    box-shadow:
      0 8px 18px rgba(69,0,4,.20),
      inset 0 1px 0 rgba(255,255,255,.8) !important;
  }
  .pro-brand-logo-wrap{
    width:36px !important;
    height:36px !important;
    flex-basis:36px !important;
  }
  .pro-brand-copy strong{
    font-size:13px !important;
  }
  .pro-brand-copy small{
    font-size:6px !important;
    letter-spacing:.07em !important;
    max-width:120px;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .pro-order{
    font-size:9px !important;
    padding:9px 11px !important;
  }
}

@media(max-width:390px){
  .pro-brand-copy small{
    display:none !important;
  }
  .pro-brand-copy strong{
    font-size:12px !important;
  }
  .pro-brand-logo-wrap{
    width:34px !important;
    height:34px !important;
    flex-basis:34px !important;
  }
}


/* ===== v1.0.6 Hero Product Sample ===== */
.pro-hero-grid{
  grid-template-columns:.88fr 1.12fr !important;
}
.pro-hero-photo-wrap{
  position:relative;
  height:auto !important;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}
.pro-hero-photo-frame{
  position:relative;
  width:min(100%,650px);
  border-radius:28px;
  padding:8px;
  background:linear-gradient(135deg,#ffd34f,#ff9d22);
  box-shadow:
    0 28px 54px rgba(46,0,0,.36),
    0 10px 24px rgba(105,0,0,.22);
  transform:rotate(-1deg);
}
.pro-hero-photo-frame:before{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:36px;
  background:radial-gradient(circle at 50% 50%,rgba(255,77,22,.23),transparent 66%);
  z-index:-1;
  filter:blur(6px);
}
.pro-hero-photo{
  display:block;
  width:100%;
  height:auto;
  border-radius:21px;
  object-fit:cover;
}
.pro-hero-copy{
  padding-right:10px;
}
.pro-hero h2{
  max-width:620px;
}

/* Tablet */
@media(max-width:900px){
  .pro-hero-grid{
    grid-template-columns:1fr !important;
  }
  .pro-hero-photo-frame{
    width:min(100%,620px);
    transform:none;
  }
}

/* Mobile */
@media(max-width:600px){
  .pro-hero-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:20px !important;
  }
  .pro-hero-photo-wrap{
    order:2;
    width:100%;
  }
  .pro-hero-photo-frame{
    width:100%;
    border-radius:20px;
    padding:5px;
    box-shadow:
      0 16px 30px rgba(46,0,0,.28),
      0 6px 14px rgba(105,0,0,.18);
  }
  .pro-hero-photo{
    border-radius:15px;
  }
}


/* ===== v1.0.7 Seamless Hero Product Visual ===== */
.pro-hero-photo-wrap{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
}
.pro-hero-photo-frame{
  width:min(100%,720px) !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
  position:relative !important;
}
.pro-hero-photo-frame:before{
  content:"" !important;
  position:absolute !important;
  left:8% !important;
  right:8% !important;
  bottom:4% !important;
  height:18% !important;
  border-radius:50% !important;
  background:rgba(72,0,0,.30) !important;
  filter:blur(26px) !important;
  z-index:-1 !important;
}
.pro-hero-photo{
  width:100% !important;
  height:auto !important;
  display:block !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  object-fit:contain !important;
  filter:
    drop-shadow(0 20px 28px rgba(60,0,0,.28))
    drop-shadow(0 7px 10px rgba(90,0,0,.16)) !important;
  mix-blend-mode:normal !important;
}

/* Blend the product visual into the same red field */
.pro-hero{
  background:
    radial-gradient(circle at 73% 46%,rgba(255,73,32,.16),transparent 28%),
    radial-gradient(circle at 80% 30%,rgba(255,164,31,.08),transparent 20%),
    linear-gradient(135deg,#7b070c 0%,#9e0b11 44%,#c01717 100%) !important;
}
.pro-hero-grid{
  align-items:center !important;
}

/* Desktop balance */
@media(min-width:901px){
  .pro-hero-photo-wrap{
    margin-right:-26px !important;
  }
  .pro-hero-photo-frame{
    width:min(110%,760px) !important;
  }
}

/* Mobile keeps the same seamless treatment */
@media(max-width:600px){
  .pro-hero-photo-wrap{
    margin:0 !important;
    padding-top:2px !important;
  }
  .pro-hero-photo-frame{
    width:100% !important;
  }
  .pro-hero-photo{
    filter:drop-shadow(0 12px 20px rgba(60,0,0,.24)) !important;
  }
}


/* ===== v1.0.8 True seamless hero visual ===== */
.pro-hero-photo-wrap{
  overflow:visible !important;
  background:transparent !important;
}
.pro-hero-photo-frame{
  width:min(100%,760px) !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
  overflow:visible !important;
}
.pro-hero-photo-frame:before,
.pro-hero-photo-frame:after{
  display:none !important;
  content:none !important;
}
.pro-hero-photo{
  display:block !important;
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:drop-shadow(0 18px 22px rgba(53,0,0,.20)) !important;
}
/* Match the supplied sample's red field so image edges visually disappear */
.pro-hero{
  background:
    radial-gradient(circle at 76% 48%,rgba(230,45,35,.13),transparent 29%),
    linear-gradient(135deg,#8b090e 0%,#a70d13 45%,#b6231d 100%) !important;
}
@media(min-width:901px){
  .pro-hero-photo-wrap{margin-right:-34px !important}
  .pro-hero-photo-frame{width:min(112%,800px) !important}
}
@media(max-width:600px){
  .pro-hero-photo-wrap{
    margin:0 !important;
    padding:0 !important;
  }
  .pro-hero-photo-frame{
    width:100% !important;
  }
  .pro-hero-photo{
    filter:drop-shadow(0 10px 14px rgba(53,0,0,.17)) !important;
  }
}


/* ===== v1.0.9 Flat Seamless Hero Visual ===== */

/* Completely remove depth effects from hero artwork */
.pro-hero-photo-wrap{
  background:transparent !important;
  overflow:visible !important;
  margin:0 !important;
  padding:0 !important;
}
.pro-hero-photo-frame{
  width:min(118%,860px) !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
  overflow:visible !important;
}
.pro-hero-photo-frame:before,
.pro-hero-photo-frame:after{
  display:none !important;
  content:none !important;
  background:none !important;
  box-shadow:none !important;
  filter:none !important;
}
.pro-hero-photo{
  width:100% !important;
  height:auto !important;
  display:block !important;
  object-fit:contain !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
  opacity:1 !important;
}

/* Make the image area visually merge with the hero */
.pro-hero{
  background:
    radial-gradient(circle at 76% 48%,rgba(190,26,24,.20),transparent 28%),
    linear-gradient(135deg,#8f090f 0%,#a80d13 46%,#b6231d 100%) !important;
}
.pro-hero-grid{
  grid-template-columns:.84fr 1.16fr !important;
  gap:34px !important;
}

/* Slightly enlarge and shift artwork on desktop */
@media(min-width:901px){
  .pro-hero-photo-wrap{
    margin-right:-58px !important;
  }
  .pro-hero-photo-frame{
    width:min(124%,900px) !important;
  }
}

/* Tablet */
@media(max-width:900px){
  .pro-hero-grid{
    grid-template-columns:1fr !important;
  }
  .pro-hero-photo-wrap{
    margin:0 !important;
  }
  .pro-hero-photo-frame{
    width:min(105%,760px) !important;
  }
}

/* Mobile */
@media(max-width:600px){
  .pro-hero-photo-wrap{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }
  .pro-hero-photo-frame{
    width:108% !important;
    margin-left:-4% !important;
  }
  .pro-hero-photo{
    width:100% !important;
    max-width:none !important;
  }
}


/* ===== v1.0.10 True Transparent Hero Asset ===== */
.pro-hero-photo-wrap{
  background:transparent !important;
  overflow:visible !important;
  margin:0 !important;
  padding:0 !important;
}
.pro-hero-photo-frame{
  width:min(128%,930px) !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
  overflow:visible !important;
}
.pro-hero-photo-frame:before,
.pro-hero-photo-frame:after{
  display:none !important;
  content:none !important;
  background:none !important;
  box-shadow:none !important;
  filter:none !important;
}
.pro-hero-photo{
  display:block !important;
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
  opacity:1 !important;
}
.pro-hero{
  background:
    radial-gradient(circle at 76% 46%,rgba(232,37,28,.10),transparent 30%),
    linear-gradient(135deg,#8f090f 0%,#a80d13 46%,#b6231d 100%) !important;
}
.pro-hero-grid{
  grid-template-columns:.82fr 1.18fr !important;
  gap:26px !important;
}
@media(min-width:901px){
  .pro-hero-photo-wrap{
    margin-right:-72px !important;
  }
  .pro-hero-photo-frame{
    width:min(132%,960px) !important;
  }
}
@media(max-width:900px){
  .pro-hero-grid{
    grid-template-columns:1fr !important;
  }
  .pro-hero-photo-wrap{
    margin:0 !important;
  }
  .pro-hero-photo-frame{
    width:min(110%,800px) !important;
  }
}
@media(max-width:600px){
  .pro-hero-photo-wrap{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }
  .pro-hero-photo-frame{
    width:112% !important;
    margin-left:-6% !important;
  }
  .pro-hero-photo{
    width:100% !important;
    max-width:none !important;
  }
}




/* ===== v1.0.13 Seamless Benefit + Category Cleanup ===== */

/* ---------------- Benefit section ---------------- */
.section.center{
  position:relative;
  background:
    radial-gradient(circle at 50% 12%,rgba(255,191,59,.08),transparent 34%),
    linear-gradient(180deg,#fff9ee 0%,#fff6e8 100%) !important;
}
.section.center > .container > .eyebrow.red{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:9px 18px !important;
  border-radius:999px !important;
  font-size:11px !important;
  font-weight:900 !important;
  letter-spacing:.05em !important;
  box-shadow:none !important;
}
.section.center .section-title{
  margin:16px 0 10px !important;
  font-size:46px !important;
  line-height:1.04 !important;
  font-weight:950 !important;
  letter-spacing:-.035em !important;
  color:#c3131d !important;
}
.section.center .section-copy{
  max-width:760px !important;
  margin:0 auto !important;
  font-size:16px !important;
  line-height:1.65 !important;
  color:#5e4c43 !important;
}

.feature-grid{
  margin-top:44px !important;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:26px !important;
}
.feature-item{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  text-align:center !important;
  min-width:0 !important;
  padding:8px 14px 0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.feature-icon{
  width:165px !important;
  height:135px !important;
  margin:0 auto 8px !important;
  border:0 !important;
  border-radius:0 !important;
  background-color:transparent !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
  box-shadow:none !important;
  font-size:0 !important;
}
.feature-item:nth-child(1) .feature-icon{
  background-image:url("/theme-assets/static/benefit-seamless-quality.webp") !important;
}
.feature-item:nth-child(2) .feature-icon{
  background-image:url("/theme-assets/static/benefit-seamless-ready.webp") !important;
}
.feature-item:nth-child(3) .feature-icon{
  background-image:url("/theme-assets/static/benefit-seamless-clean.webp") !important;
}
.feature-item:nth-child(4) .feature-icon{
  background-image:url("/theme-assets/static/benefit-seamless-carry.webp") !important;
}
.feature-number{
  margin:2px 0 9px !important;
  font-size:22px !important;
  line-height:1 !important;
  color:#c9151e !important;
  font-weight:950 !important;
}
.feature-title{
  font-size:19px !important;
  line-height:1.15 !important;
  font-weight:950 !important;
  color:#1f1512 !important;
  text-transform:uppercase !important;
}
.feature-desc{
  max-width:220px !important;
  margin-top:9px !important;
  font-size:13px !important;
  line-height:1.55 !important;
  color:#665249 !important;
}

/* ---------------- Category heading ---------------- */
.background-heading{
  display:none !important;
}
.category-section{
  position:relative !important;
  padding-top:62px !important;
  background:
    radial-gradient(circle at 50% 8%,rgba(255,187,45,.07),transparent 30%),
    linear-gradient(180deg,#fff6e8 0%,#fffaf2 100%) !important;
}
.category-heading-block{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  margin:0 auto 34px !important;
}
.category-heading-block .eyebrow.red{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 0 12px !important;
  padding:9px 18px !important;
  border-radius:999px !important;
  font-size:11px !important;
  font-weight:900 !important;
  letter-spacing:.05em !important;
}
.category-title{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  font-size:43px !important;
  line-height:1.06 !important;
  font-weight:950 !important;
  letter-spacing:-.035em !important;
  color:#c3131d !important;
  text-align:center !important;
}
.category-title:before,
.category-title:after{
  display:none !important;
  content:none !important;
}
.category-subtitle{
  max-width:680px !important;
  margin:11px auto 0 !important;
  font-size:14px !important;
  line-height:1.6 !important;
  color:#665249 !important;
}

/* ---------------- Category cards ---------------- */
.category-grid-wrap{
  position:relative !important;
}
.category-grid{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:16px !important;
  border:0 !important;
  background:transparent !important;
}
.category-card{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  min-width:0 !important;
  min-height:335px !important;
  padding:14px 12px 18px !important;
  border:1px solid rgba(228,203,166,.72) !important;
  border-radius:24px !important;
  background:rgba(255,253,248,.64) !important;
  box-shadow:0 10px 24px rgba(87,46,10,.045) !important;
}
.category-art{
  width:100% !important;
  height:205px !important;
  margin:0 auto 12px !important;
  border:0 !important;
  border-radius:0 !important;
  background-color:transparent !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
  box-shadow:none !important;
}

/* NO FALLBACK BACKGROUND.
   Only the five known safe slug mappings remain. */
.category-card[href*="daging-ayam"] .category-art{
  background-image:url("/theme-assets/static/category-seamless-daging-ayam.webp") !important;
}
.category-card[href*="telur-ayam"] .category-art{
  background-image:url("/theme-assets/static/category-seamless-telur-ayam.webp") !important;
}
.category-card[href*="telur-puyuh"] .category-art{
  background-image:url("/theme-assets/static/category-seamless-telur-puyuh.webp") !important;
}
.category-card[href*="variasi-box"] .category-art{
  background-image:url("/theme-assets/static/category-seamless-variasi-box.webp") !important;
}
.category-card[href*="variasi-dus"] .category-art{
  background-image:url("/theme-assets/static/category-seamless-variasi-dus.webp") !important;
}

.category-name{
  margin-top:auto !important;
  font-size:18px !important;
  line-height:1.2 !important;
  font-weight:950 !important;
  color:#211512 !important;
  text-transform:uppercase !important;
  text-align:center !important;
}
.category-card:after{
  display:none !important;
  content:none !important;
}
.category-link{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin-top:14px !important;
  padding:10px 17px !important;
  min-width:112px !important;
  border-radius:999px !important;
  background:#cf141d !important;
  color:#fff !important;
  box-shadow:none !important;
  font-size:10px !important;
  font-weight:950 !important;
  letter-spacing:.03em !important;
}

/* ---------------- Responsive ---------------- */
@media(max-width:980px){
  .feature-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .category-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}
@media(max-width:650px){
  .section.center .section-title{
    font-size:32px !important;
  }
  .section.center .section-copy{
    font-size:14px !important;
  }
  .feature-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:18px 10px !important;
  }
  .feature-icon{
    width:118px !important;
    height:100px !important;
  }
  .feature-number{
    font-size:18px !important;
  }
  .feature-title{
    font-size:15px !important;
  }
  .feature-desc{
    font-size:11px !important;
  }

  .category-title{
    font-size:31px !important;
  }
  .category-subtitle{
    font-size:12px !important;
  }
  .category-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  .category-card{
    min-height:270px !important;
    padding:10px 8px 13px !important;
  }
  .category-art{
    height:145px !important;
  }
  .category-name{
    font-size:14px !important;
  }
}
@media(max-width:390px){
  .feature-icon{
    width:104px !important;
    height:88px !important;
  }
  .category-title{
    font-size:28px !important;
  }
  .category-art{
    height:125px !important;
  }
}


/* ===== v1.0.14 Mobile Benefit Icons Stay In One Row ===== */

/* Tablet and desktop keep the original four-column presentation */
.feature-grid{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}

/* Phone: keep all 4 benefit points aligned horizontally like desktop */
@media(max-width:650px){
  .section.center{
    overflow:hidden !important;
  }

  .section.center > .container{
    width:calc(100% - 20px) !important;
    max-width:none !important;
  }

  .section.center .section-title{
    font-size:28px !important;
    line-height:1.08 !important;
    white-space:normal !important;
  }

  .section.center .section-copy{
    max-width:520px !important;
    font-size:12px !important;
    line-height:1.5 !important;
  }

  .feature-grid{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:4px !important;
    width:100% !important;
    margin-top:30px !important;
    align-items:start !important;
  }

  .feature-item{
    min-width:0 !important;
    padding:4px 2px 0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .feature-icon{
    width:72px !important;
    height:66px !important;
    max-width:100% !important;
    margin:0 auto 5px !important;
    background-size:contain !important;
  }

  .feature-number{
    margin:0 0 5px !important;
    font-size:14px !important;
    line-height:1 !important;
  }

  .feature-title{
    font-size:10px !important;
    line-height:1.15 !important;
    min-height:24px !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    text-align:center !important;
    word-break:normal !important;
    overflow-wrap:break-word !important;
  }

  .feature-desc{
    max-width:125px !important;
    margin:5px auto 0 !important;
    font-size:8px !important;
    line-height:1.35 !important;
    text-align:center !important;
  }
}

/* Narrow phones: still one row, further compacted rather than becoming 2x2 */
@media(max-width:420px){
  .section.center > .container{
    width:calc(100% - 12px) !important;
  }

  .feature-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:2px !important;
  }

  .feature-icon{
    width:60px !important;
    height:56px !important;
  }

  .feature-number{
    font-size:12px !important;
  }

  .feature-title{
    font-size:8.5px !important;
    min-height:22px !important;
  }

  .feature-desc{
    font-size:7px !important;
    line-height:1.3 !important;
  }
}

/* Very narrow devices: preserve one line without horizontal overflow */
@media(max-width:350px){
  .feature-icon{
    width:52px !important;
    height:48px !important;
  }

  .feature-title{
    font-size:7.5px !important;
  }

  .feature-desc{
    font-size:6.5px !important;
  }
}


/* ===== v1.0.15 CLEAN CATEGORY PHOTO ONLY ===== */

/* Remove every old decorative circle / pseudo element from category artwork */
.category-art,
.category-art:before,
.category-art:after,
.category-card .category-art,
.category-card .category-art:before,
.category-card .category-art:after{
  content:none !important;
  box-shadow:none !important;
  border:0 !important;
  outline:0 !important;
}

/* The art container itself becomes completely transparent */
.category-art,
.category-card .category-art{
  position:relative !important;
  width:100% !important;
  height:215px !important;
  margin:0 auto 12px !important;
  padding:0 !important;
  border-radius:0 !important;
  background-color:transparent !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:contain !important;
  overflow:visible !important;
}

/* Explicitly remove any legacy fallback gradient/circles */
.category-card .category-art{
  background-image:none !important;
}

/* Keep ONLY the 5 known category images.
   No fallback image/shape is provided for any other slug. */
.category-card[href*="daging-ayam"] .category-art{
  background-image:url("/theme-assets/static/category-seamless-daging-ayam.webp") !important;
}
.category-card[href*="telur-ayam"] .category-art{
  background-image:url("/theme-assets/static/category-seamless-telur-ayam.webp") !important;
}
.category-card[href*="telur-puyuh"] .category-art{
  background-image:url("/theme-assets/static/category-seamless-telur-puyuh.webp") !important;
}
.category-card[href*="variasi-box"] .category-art{
  background-image:url("/theme-assets/static/category-seamless-variasi-box.webp") !important;
}
.category-card[href*="variasi-dus"] .category-art{
  background-image:url("/theme-assets/static/category-seamless-variasi-dus.webp") !important;
}

/* Let product imagery breathe inside the card */
.category-card{
  padding-top:18px !important;
}
.category-name{
  margin-top:2px !important;
}

/* Tablet */
@media(max-width:980px){
  .category-art,
  .category-card .category-art{
    height:190px !important;
  }
}

/* Mobile */
@media(max-width:650px){
  .category-art,
  .category-card .category-art{
    height:150px !important;
    background-size:contain !important;
  }
}

/* Narrow phones */
@media(max-width:390px){
  .category-art,
  .category-card .category-art{
    height:130px !important;
  }
}


/* ===== v1.0.16 Category 3D Visual Replacement ===== */

/* Keep category visual container transparent and clean */
.category-art,
.category-card .category-art{
  background-color:transparent !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:contain !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  outline:0 !important;
}

/* Replace only the requested 3 category visuals */
.category-card[href*="daging-ayam"] .category-art{
  background-image:url("/theme-assets/static/category-3d-daging-ayam.webp") !important;
  background-size:92% auto !important;
}
.category-card[href*="variasi-box"] .category-art{
  background-image:url("/theme-assets/static/category-3d-variasi-box.webp") !important;
  background-size:88% auto !important;
}
.category-card[href*="variasi-dus"] .category-art{
  background-image:url("/theme-assets/static/category-3d-variasi-dus.webp") !important;
  background-size:86% auto !important;
}

/* Telur Ayam & Telur Puyuh remain on the existing proven visuals */
.category-card[href*="telur-ayam"] .category-art{
  background-image:url("/theme-assets/static/category-seamless-telur-ayam.webp") !important;
}
.category-card[href*="telur-puyuh"] .category-art{
  background-image:url("/theme-assets/static/category-seamless-telur-puyuh.webp") !important;
}

/* Add subtle depth to the card itself, not a pasted rectangle behind the image */
.category-card{
  background:
    radial-gradient(circle at 50% 26%,rgba(255,187,51,.08),transparent 34%),
    rgba(255,253,248,.72) !important;
}
.category-card:hover{
  transform:translateY(-4px) !important;
}

/* Desktop visual proportions */
@media(min-width:981px){
  .category-art,
  .category-card .category-art{
    height:220px !important;
  }
}

/* Tablet */
@media(max-width:980px){
  .category-art,
  .category-card .category-art{
    height:185px !important;
  }
}

/* Mobile */
@media(max-width:650px){
  .category-art,
  .category-card .category-art{
    height:145px !important;
  }
  .category-card[href*="daging-ayam"] .category-art{
    background-size:96% auto !important;
  }
  .category-card[href*="variasi-box"] .category-art,
  .category-card[href*="variasi-dus"] .category-art{
    background-size:92% auto !important;
  }
}


/* ===== v1.0.17 Unified Category Visual System ===== */

/* One visual system for all category images */
.category-art,
.category-card .category-art{
  width:100% !important;
  height:215px !important;
  margin:0 auto 12px !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background-color:transparent !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:contain !important;
  box-shadow:none !important;
  filter:none !important;
  overflow:visible !important;
}

/* Remove any old per-category scaling left from prior versions */
.category-card[href*="daging-ayam"] .category-art,
.category-card[href*="telur-ayam"] .category-art,
.category-card[href*="telur-puyuh"] .category-art,
.category-card[href*="variasi-box"] .category-art,
.category-card[href*="variasi-dus"] .category-art{
  background-size:contain !important;
}

/* Exactly five unified visual assets */
.category-card[href*="daging-ayam"] .category-art{
  background-image:url("/theme-assets/static/category-unified-daging-ayam.webp") !important;
}
.category-card[href*="telur-ayam"] .category-art{
  background-image:url("/theme-assets/static/category-unified-telur-ayam.webp") !important;
}
.category-card[href*="telur-puyuh"] .category-art{
  background-image:url("/theme-assets/static/category-unified-telur-puyuh.webp") !important;
}
.category-card[href*="variasi-box"] .category-art{
  background-image:url("/theme-assets/static/category-unified-variasi-box.webp") !important;
}
.category-card[href*="variasi-dus"] .category-art{
  background-image:url("/theme-assets/static/category-unified-variasi-dus.webp") !important;
}

/* Make all cards feel like part of one visual family */
.category-card{
  min-height:335px !important;
  padding:15px 13px 18px !important;
  background:
    radial-gradient(circle at 50% 34%,rgba(255,191,49,.055),transparent 34%),
    rgba(255,253,248,.72) !important;
  border:1px solid rgba(226,198,156,.72) !important;
  border-radius:24px !important;
  box-shadow:0 9px 22px rgba(84,42,9,.045) !important;
}
.category-name{
  min-height:44px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin-top:auto !important;
  font-size:18px !important;
  line-height:1.18 !important;
  font-weight:950 !important;
  text-align:center !important;
}
.category-link{
  margin-top:10px !important;
}

/* Tablet */
@media(max-width:980px){
  .category-art,
  .category-card .category-art{
    height:185px !important;
  }
}

/* Mobile */
@media(max-width:650px){
  .category-art,
  .category-card .category-art{
    height:145px !important;
  }
  .category-name{
    min-height:34px !important;
    font-size:14px !important;
  }
}

/* Small phones */
@media(max-width:390px){
  .category-art,
  .category-card .category-art{
    height:128px !important;
  }
}


/* ===== v1.0.18 Clean Category Assets - Remove Screenshot Artifacts ===== */

.category-art,
.category-card .category-art{
  width:100% !important;
  height:215px !important;
  margin:0 auto 12px !important;
  padding:0 !important;
  background-color:transparent !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:contain !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}

/* Cleaned local assets only */
.category-card[href*="daging-ayam"] .category-art{
  background-image:url("/theme-assets/static/category-clean-daging-ayam.webp") !important;
}
.category-card[href*="telur-ayam"] .category-art{
  background-image:url("/theme-assets/static/category-clean-telur-ayam.webp") !important;
}
.category-card[href*="telur-puyuh"] .category-art{
  background-image:url("/theme-assets/static/category-clean-telur-puyuh.webp") !important;
}
.category-card[href*="variasi-box"] .category-art{
  background-image:url("/theme-assets/static/category-clean-variasi-box.webp") !important;
}
.category-card[href*="variasi-dus"] .category-art{
  background-image:url("/theme-assets/static/category-clean-variasi-dus.webp") !important;
}

/* Equal visual size across all five */
.category-card[href*="daging-ayam"] .category-art,
.category-card[href*="telur-ayam"] .category-art,
.category-card[href*="telur-puyuh"] .category-art,
.category-card[href*="variasi-box"] .category-art,
.category-card[href*="variasi-dus"] .category-art{
  background-size:contain !important;
}

@media(max-width:980px){
  .category-art,
  .category-card .category-art{
    height:185px !important;
  }
}
@media(max-width:650px){
  .category-art,
  .category-card .category-art{
    height:145px !important;
  }
}
@media(max-width:390px){
  .category-art,
  .category-card .category-art{
    height:126px !important;
  }
}


/* ===== v1.0.19 Daging Ayam Artifact Cleanup ===== */
.category-card[href*="daging-ayam"] .category-art{
  background-image:url("/theme-assets/static/category-clean2-daging-ayam.webp") !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:contain !important;
  background-color:transparent !important;
}
.category-card[href*="daging-ayam"] .category-art:before,
.category-card[href*="daging-ayam"] .category-art:after{
  display:none !important;
  content:none !important;
}


/* ===== v1.0.20 Unified Centered Section Typography ===== */

/* Shared centered heading system for all major home sections */
.section.center > .container,
.category-heading-block,
.section.products > .container,
.section[id="produk"] > .container{
  text-align:center !important;
}

/* Normalize eyebrow/badge alignment */
.section.center .eyebrow,
.category-heading-block .eyebrow,
.section.products .eyebrow,
.section[id="produk"] .eyebrow{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}

/* Main section headings: same centered width behavior */
.section.center .section-title,
.category-title,
.section.products .section-title,
.section[id="produk"] .section-title{
  display:block !important;
  width:100% !important;
  max-width:920px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
  text-align:center !important;
  text-wrap:balance;
}

/* Subtitles/descriptions: same width and exact center */
.section.center .section-copy,
.category-subtitle,
.section.products .section-copy,
.section[id="produk"] .section-copy{
  display:block !important;
  width:100% !important;
  max-width:680px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
  text-align:center !important;
  text-wrap:balance;
}

/* Category heading block must remain a clean centered vertical stack */
.category-heading-block{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  max-width:980px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Product section header uses the same visual alignment */
.section[id="produk"] .section-head,
.section.products .section-head{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  gap:8px !important;
}

.section[id="produk"] .section-head > *,
.section.products .section-head > *{
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Desktop spacing */
@media(min-width:981px){
  .section.center .section-title,
  .category-title,
  .section[id="produk"] .section-title{
    max-width:900px !important;
  }

  .section.center .section-copy,
  .category-subtitle,
  .section[id="produk"] .section-copy{
    max-width:650px !important;
  }
}

/* Tablet */
@media(max-width:980px){
  .section.center .section-title,
  .category-title,
  .section[id="produk"] .section-title{
    max-width:760px !important;
  }

  .section.center .section-copy,
  .category-subtitle,
  .section[id="produk"] .section-copy{
    max-width:600px !important;
  }
}

/* Mobile: preserve exactly the same centered system */
@media(max-width:650px){
  .section.center > .container,
  .category-heading-block,
  .section[id="produk"] > .container{
    width:calc(100% - 28px) !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
  }

  .section.center .section-title,
  .category-title,
  .section[id="produk"] .section-title{
    width:100% !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
    line-height:1.08 !important;
  }

  .section.center .section-copy,
  .category-subtitle,
  .section[id="produk"] .section-copy{
    width:100% !important;
    max-width:520px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
    line-height:1.5 !important;
  }

  .category-heading-block{
    align-items:center !important;
  }
}

/* Small phones */
@media(max-width:390px){
  .section.center > .container,
  .category-heading-block,
  .section[id="produk"] > .container{
    width:calc(100% - 20px) !important;
  }

  .section.center .section-copy,
  .category-subtitle,
  .section[id="produk"] .section-copy{
    max-width:330px !important;
  }
}


/* ===== v1.0.21 Centered Hero Structure ===== */

.pro-hero-centered{
  position:relative !important;
  padding:54px 0 74px !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 50% 42%,rgba(239,49,31,.13),transparent 36%),
    linear-gradient(180deg,#8f090f 0%,#a70d13 48%,#b9231d 100%) !important;
  color:#fff !important;
}

.pro-hero-centered-inner{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  width:min(1180px,calc(100% - 32px)) !important;
}

.pro-hero-centered-copy{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  max-width:980px !important;
  margin:0 auto !important;
  text-align:center !important;
}

.pro-hero-centered .pro-eyebrow{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 auto 18px !important;
}

.pro-hero-centered h1{
  display:block !important;
  width:100% !important;
  max-width:1000px !important;
  margin:0 auto !important;
  padding:0 !important;
  text-align:center !important;
  text-transform:uppercase !important;
  font-size:66px !important;
  line-height:.95 !important;
  font-weight:950 !important;
  letter-spacing:-.04em !important;
  color:#fff !important;
  text-shadow:none !important;
}

.pro-hero-centered h2{
  width:100% !important;
  max-width:820px !important;
  margin:18px auto 0 !important;
  text-align:center !important;
  font-size:22px !important;
  line-height:1.25 !important;
  font-weight:900 !important;
  color:#fff !important;
}

.pro-hero-centered p{
  width:100% !important;
  max-width:700px !important;
  margin:12px auto 0 !important;
  text-align:center !important;
  font-size:15px !important;
  line-height:1.65 !important;
  color:#f7e8df !important;
}

/* Hero image now centered under all text */
.pro-hero-photo-centered{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  margin:26px auto 0 !important;
  padding:0 !important;
  text-align:center !important;
}

.pro-hero-centered .pro-hero-photo-frame{
  display:block !important;
  width:min(82%,820px) !important;
  max-width:820px !important;
  margin:0 auto !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
}

.pro-hero-centered .pro-hero-photo{
  display:block !important;
  width:100% !important;
  height:auto !important;
  margin:0 auto !important;
  object-fit:contain !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
}

/* Buttons centered beneath image */
.pro-actions-centered{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
  width:100% !important;
  margin:24px auto 0 !important;
  text-align:center !important;
}

.pro-actions-centered .pro-btn{
  min-width:160px !important;
}

/* Remove old desktop two-column hero behavior */
.pro-hero-centered .pro-hero-grid,
.pro-hero-centered .pro-hero-copy{
  display:none !important;
}

/* Tablet */
@media(max-width:900px){
  .pro-hero-centered{
    padding:44px 0 62px !important;
  }

  .pro-hero-centered h1{
    font-size:54px !important;
  }

  .pro-hero-centered h2{
    font-size:20px !important;
  }

  .pro-hero-centered .pro-hero-photo-frame{
    width:min(88%,760px) !important;
  }
}

/* Mobile */
@media(max-width:600px){
  .pro-hero-centered{
    padding:34px 0 46px !important;
  }

  .pro-hero-centered-inner{
    width:calc(100% - 24px) !important;
  }

  .pro-hero-centered .pro-eyebrow{
    margin-bottom:14px !important;
    font-size:9px !important;
    padding:8px 13px !important;
  }

  .pro-hero-centered h1{
    max-width:100% !important;
    font-size:42px !important;
    line-height:.96 !important;
    letter-spacing:-.035em !important;
  }

  .pro-hero-centered h2{
    max-width:100% !important;
    margin-top:14px !important;
    font-size:16px !important;
    line-height:1.3 !important;
  }

  .pro-hero-centered p{
    max-width:94% !important;
    margin-top:9px !important;
    font-size:12px !important;
    line-height:1.55 !important;
  }

  .pro-hero-photo-centered{
    margin-top:18px !important;
  }

  .pro-hero-centered .pro-hero-photo-frame{
    width:104% !important;
    max-width:none !important;
  }

  .pro-actions-centered{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:9px !important;
    max-width:360px !important;
    margin-top:18px !important;
  }

  .pro-actions-centered .pro-btn{
    width:100% !important;
    min-width:0 !important;
    padding:11px 10px !important;
    font-size:10px !important;
  }
}

/* Narrow mobile */
@media(max-width:390px){
  .pro-hero-centered h1{
    font-size:36px !important;
  }

  .pro-hero-centered h2{
    font-size:14px !important;
  }

  .pro-hero-centered p{
    font-size:11px !important;
  }

  .pro-actions-centered{
    grid-template-columns:1fr !important;
    max-width:250px !important;
  }
}


/* ===== v1.0.22 Hero Cleanup: No Badge + Buttons Below Image ===== */

.pro-hero-centered .pro-eyebrow{
  display:none !important;
}

/* Desktop and mobile share identical vertical ordering */
.pro-hero-centered-inner{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

.pro-hero-centered-copy{
  order:1 !important;
  width:100% !important;
  text-align:center !important;
}

.pro-hero-photo-centered{
  order:2 !important;
  width:100% !important;
  margin:28px auto 0 !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
}

.pro-actions-centered{
  order:3 !important;
  width:100% !important;
  margin:24px auto 0 !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:14px !important;
}

.pro-hero-centered h1{
  margin-top:0 !important;
}

/* Mobile keeps exact same structure; only scale changes */
@media(max-width:600px){
  .pro-hero-centered-copy{
    order:1 !important;
  }

  .pro-hero-photo-centered{
    order:2 !important;
    margin-top:18px !important;
  }

  .pro-actions-centered{
    order:3 !important;
    margin-top:16px !important;
    display:flex !important;
    flex-direction:row !important;
    justify-content:center !important;
    gap:9px !important;
    max-width:360px !important;
  }

  .pro-actions-centered .pro-btn{
    width:auto !important;
    min-width:128px !important;
  }
}

@media(max-width:390px){
  .pro-actions-centered{
    flex-direction:row !important;
    max-width:100% !important;
    gap:7px !important;
  }

  .pro-actions-centered .pro-btn{
    min-width:118px !important;
    padding:10px 8px !important;
  }
}


/* ===== v1.0.23 Hero Actions Removed ===== */

/* Hero has no action buttons in any viewport. */
.pro-actions-centered,
.pro-hero-centered .pro-actions{
  display:none !important;
}

/* Desktop and mobile keep the exact same vertical structure:
   title -> subtitle -> description -> image. Only scale changes. */
.pro-hero-centered-inner{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

.pro-hero-centered-copy{
  order:1 !important;
}

.pro-hero-photo-centered{
  order:2 !important;
  margin-bottom:0 !important;
}

/* Slightly rebalance hero bottom spacing now that buttons are gone */
.pro-hero-centered{
  padding-bottom:58px !important;
}

@media(max-width:900px){
  .pro-hero-centered{
    padding-bottom:50px !important;
  }
}

@media(max-width:600px){
  .pro-hero-centered{
    padding-bottom:38px !important;
  }
}


/* ===== v1.0.24 Category Desktop/Mobile Same Structure ===== */

/* Base: five categories always in one horizontal row */
.category-grid{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:14px !important;
  width:100% !important;
  align-items:stretch !important;
}

.category-card{
  min-width:0 !important;
  width:100% !important;
}

/* Tablet: same five-column structure, just scaled */
@media(max-width:980px){
  .category-grid{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  .category-card{
    min-height:285px !important;
    padding:10px 7px 13px !important;
    border-radius:18px !important;
  }

  .category-art,
  .category-card .category-art{
    height:155px !important;
  }

  .category-name{
    min-height:34px !important;
    font-size:13px !important;
    line-height:1.15 !important;
  }

  .category-link{
    min-width:0 !important;
    padding:8px 10px !important;
    font-size:8px !important;
  }
}

/* Phone: KEEP EXACT SAME 5-COLUMN STRUCTURE.
   Only size/scale changes. */
@media(max-width:650px){
  .category-heading-block{
    margin-bottom:24px !important;
  }

  .category-grid-wrap{
    width:calc(100% - 12px) !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
    overflow:visible !important;
  }

  .category-grid{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:4px !important;
    width:100% !important;
  }

  .category-card{
    min-height:210px !important;
    padding:7px 3px 9px !important;
    border-radius:13px !important;
  }

  .category-art,
  .category-card .category-art{
    width:100% !important;
    height:105px !important;
    margin-bottom:6px !important;
    background-size:contain !important;
  }

  .category-name{
    min-height:28px !important;
    margin-top:auto !important;
    padding:0 1px !important;
    font-size:9px !important;
    line-height:1.15 !important;
    letter-spacing:0 !important;
    white-space:normal !important;
    text-align:center !important;
  }

  .category-link{
    min-width:0 !important;
    width:auto !important;
    margin-top:7px !important;
    padding:6px 6px !important;
    border-radius:999px !important;
    font-size:6.5px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }
}

/* Narrow phone: still five columns, proportionally smaller */
@media(max-width:420px){
  .category-grid-wrap{
    width:calc(100% - 8px) !important;
  }

  .category-grid{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:3px !important;
  }

  .category-card{
    min-height:185px !important;
    padding:5px 2px 7px !important;
    border-radius:11px !important;
  }

  .category-art,
  .category-card .category-art{
    height:88px !important;
  }

  .category-name{
    min-height:25px !important;
    font-size:7.5px !important;
    line-height:1.12 !important;
  }

  .category-link{
    padding:5px 5px !important;
    font-size:5.5px !important;
  }
}

/* Very narrow devices: do not switch structure, only scale */
@media(max-width:350px){
  .category-grid{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:2px !important;
  }

  .category-card{
    min-height:170px !important;
  }

  .category-art,
  .category-card .category-art{
    height:78px !important;
  }

  .category-name{
    font-size:6.8px !important;
  }

  .category-link{
    font-size:5px !important;
    padding:4px 4px !important;
  }
}


/* ===== v1.0.27 HYBRID DEFAULT CATALOG =====
   Home stays custom.
   /product is intentionally NOT mapped by theme.json so the native/default
   Online Store catalog renderer owns real product photos, prices and filters.
*/

.default-catalog-gateway{
  padding-top:72px !important;
  padding-bottom:82px !important;
}

.default-catalog-gateway .section-copy{
  max-width:680px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.default-catalog-actions{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  margin-top:26px !important;
}

.default-catalog-button{
  min-width:190px !important;
  text-align:center !important;
}

@media(max-width:650px){
  .default-catalog-gateway{
    padding-top:52px !important;
    padding-bottom:58px !important;
  }

  .default-catalog-gateway .section-copy{
    max-width:92% !important;
  }

  .default-catalog-button{
    min-width:170px !important;
  }
}


/* ===== v1.0.28 SAFE HOME PRODUCT PREVIEW =====
   Preview cards are local/static presentation only.
   Real catalog/product pages remain native default renderer.
*/

.product-preview-section{
  position:relative !important;
  padding-top:70px !important;
  padding-bottom:82px !important;
  background:
    radial-gradient(circle at 50% 14%,rgba(255,184,44,.09),transparent 30%),
    linear-gradient(180deg,#fff7e9 0%,#fffaf2 100%) !important;
}

.product-preview-section .section-title{
  color:#c3131d !important;
  margin-bottom:10px !important;
}

.product-preview-section .section-copy{
  max-width:680px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.home-product-preview-grid{
  width:100% !important;
  margin:34px auto 0 !important;
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:14px !important;
}

.home-product-preview-card{
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
  min-height:330px !important;
  overflow:hidden !important;
  border:1px solid rgba(226,196,151,.82) !important;
  border-radius:24px !important;
  background:rgba(255,253,248,.88) !important;
  color:#211512 !important;
  text-decoration:none !important;
  box-shadow:0 10px 26px rgba(91,45,8,.055) !important;
  transition:transform .18s ease,box-shadow .18s ease !important;
}

.home-product-preview-card:hover{
  transform:translateY(-4px) !important;
  box-shadow:0 16px 30px rgba(91,45,8,.09) !important;
}

.home-product-preview-art{
  width:100% !important;
  height:205px !important;
  flex:0 0 auto !important;
  background-color:transparent !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
}

.preview-telur-ayam{
  background-image:url("/theme-assets/static/category-clean-telur-ayam.webp") !important;
}
.preview-telur-puyuh{
  background-image:url("/theme-assets/static/category-clean-telur-puyuh.webp") !important;
}
.preview-telur-ayam-pedas{
  background-image:url("/theme-assets/static/hero-product-transparent.webp") !important;
  background-size:92% auto !important;
}
.preview-daging-ayam{
  background-image:url("/theme-assets/static/category-clean2-daging-ayam.webp") !important;
}
.preview-variasi{
  background-image:url("/theme-assets/static/category-clean-variasi-box.webp") !important;
}

.home-product-preview-body{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  flex:1 1 auto !important;
  padding:0 13px 17px !important;
  text-align:center !important;
}

.home-product-preview-label{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin-bottom:8px !important;
  padding:5px 9px !important;
  border-radius:999px !important;
  background:#fff0dc !important;
  color:#c3131d !important;
  font-size:9px !important;
  line-height:1 !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
}

.home-product-preview-card h3{
  margin:0 !important;
  font-size:15px !important;
  line-height:1.25 !important;
  font-weight:950 !important;
  color:#211512 !important;
}

.home-product-preview-link{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin-top:auto !important;
  padding:9px 14px !important;
  border-radius:999px !important;
  background:#cc141d !important;
  color:#fff !important;
  font-size:9px !important;
  line-height:1 !important;
  font-weight:950 !important;
  text-transform:uppercase !important;
}

.default-catalog-actions{
  margin-top:30px !important;
}

@media(max-width:980px){
  .home-product-preview-grid{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  .home-product-preview-card{
    min-height:270px !important;
    border-radius:18px !important;
  }
  .home-product-preview-art{
    height:155px !important;
  }
  .home-product-preview-card h3{
    font-size:12px !important;
  }
}

@media(max-width:650px){
  .product-preview-section{
    padding-top:52px !important;
    padding-bottom:58px !important;
  }

  .home-product-preview-grid{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:4px !important;
    width:100% !important;
  }

  .home-product-preview-card{
    min-height:190px !important;
    border-radius:12px !important;
  }

  .home-product-preview-art{
    height:92px !important;
  }

  .home-product-preview-body{
    padding:0 3px 8px !important;
  }

  .home-product-preview-label{
    margin-bottom:4px !important;
    padding:3px 4px !important;
    font-size:5.5px !important;
  }

  .home-product-preview-card h3{
    font-size:7.5px !important;
    line-height:1.15 !important;
  }

  .home-product-preview-link{
    padding:5px 5px !important;
    font-size:5.3px !important;
  }

  .default-catalog-actions{
    margin-top:22px !important;
  }
}

@media(max-width:390px){
  .home-product-preview-grid{
    gap:3px !important;
  }

  .home-product-preview-card{
    min-height:170px !important;
  }

  .home-product-preview-art{
    height:78px !important;
  }

  .home-product-preview-card h3{
    font-size:6.8px !important;
  }

  .home-product-preview-label{
    display:none !important;
  }
}


/* ===== v1.0.29 RED PRODUCT SHOWCASE ===== */

.product-showcase-red{
  position:relative !important;
  overflow:hidden !important;
  padding:90px 0 94px !important;
  background:
    radial-gradient(circle at 50% 22%,rgba(255,60,38,.20),transparent 35%),
    linear-gradient(180deg,#8d080d 0%,#aa0d13 46%,#bd241d 100%) !important;
  color:#fff !important;
}

/* layered curved separation */
.product-showcase-layer{
  position:absolute !important;
  left:-5% !important;
  width:110% !important;
  pointer-events:none !important;
}
.product-showcase-layer-top{
  top:-52px !important;
  height:82px !important;
  border-radius:0 0 50% 50% !important;
  background:#fff7e9 !important;
  box-shadow:0 12px 0 rgba(255,214,144,.22) !important;
}
.product-showcase-layer-bottom{
  bottom:-58px !important;
  height:92px !important;
  border-radius:50% 50% 0 0 !important;
  background:#fff7e9 !important;
  box-shadow:0 -12px 0 rgba(255,214,144,.16) !important;
}

.product-showcase-shell{
  position:relative !important;
  z-index:2 !important;
  text-align:center !important;
}

.product-showcase-heading{
  max-width:820px !important;
  margin:0 auto !important;
  text-align:center !important;
}
.product-showcase-eyebrow{
  display:inline-flex !important;
  padding:8px 14px !important;
  border:1px solid rgba(255,255,255,.26) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.10) !important;
  color:#fff !important;
  font-size:10px !important;
  line-height:1 !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  letter-spacing:.05em !important;
}
.product-showcase-heading h2{
  margin:14px 0 0 !important;
  font-size:42px !important;
  line-height:1.04 !important;
  font-weight:950 !important;
  letter-spacing:-.035em !important;
  color:#fff !important;
}
.product-showcase-heading p{
  max-width:680px !important;
  margin:12px auto 0 !important;
  color:#f8ded5 !important;
  font-size:14px !important;
  line-height:1.65 !important;
}

.product-showcase-grid{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:14px !important;
  margin-top:38px !important;
  align-items:stretch !important;
}

.product-showcase-card{
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
  overflow:hidden !important;
  border:1px solid rgba(255,255,255,.20) !important;
  border-radius:24px !important;
  background:#fffaf1 !important;
  color:#241310 !important;
  text-align:left !important;
  text-decoration:none !important;
  box-shadow:0 18px 36px rgba(41,0,0,.20) !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
}
.product-showcase-card:hover{
  transform:translateY(-5px) !important;
  box-shadow:0 24px 42px rgba(41,0,0,.28) !important;
}

.product-showcase-media{
  position:relative !important;
  width:100% !important;
  aspect-ratio:1 / 1 !important;
  overflow:hidden !important;
  background:#7f090e !important;
}
.product-showcase-media:after{
  content:"" !important;
  position:absolute !important;
  inset:auto 0 0 0 !important;
  height:34% !important;
  background:linear-gradient(180deg,transparent,rgba(77,0,0,.26)) !important;
  pointer-events:none !important;
}
.product-showcase-media img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
}
.product-showcase-media-cutout{
  background:
    radial-gradient(circle at 50% 52%,#c42a1e 0%,#9c0d12 62%,#7c080c 100%) !important;
}
.product-showcase-media-cutout img{
  object-fit:contain !important;
  padding:9% !important;
}

.product-showcase-content{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  padding:15px 15px 16px !important;
}
.product-showcase-category{
  display:inline-flex !important;
  align-self:flex-start !important;
  padding:5px 8px !important;
  border-radius:999px !important;
  background:#ffe5c4 !important;
  color:#b30f17 !important;
  font-size:8px !important;
  line-height:1 !important;
  font-weight:950 !important;
  text-transform:uppercase !important;
}
.product-showcase-content h3{
  margin:9px 0 0 !important;
  font-size:16px !important;
  line-height:1.2 !important;
  font-weight:950 !important;
  color:#231310 !important;
}
.product-showcase-content p{
  margin:8px 0 0 !important;
  min-height:58px !important;
  color:#70594f !important;
  font-size:11px !important;
  line-height:1.45 !important;
}

.product-showcase-bottom{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  margin-top:auto !important;
  padding-top:14px !important;
}
.product-showcase-bottom strong{
  color:#c5121b !important;
  font-size:18px !important;
  line-height:1 !important;
  font-weight:950 !important;
  white-space:nowrap !important;
}
.product-showcase-bottom span{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:8px 10px !important;
  border-radius:999px !important;
  background:#ca131c !important;
  color:#fff !important;
  font-size:8px !important;
  line-height:1 !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}

.product-showcase-actions{
  display:flex !important;
  justify-content:center !important;
  margin-top:30px !important;
}
.product-showcase-all{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:190px !important;
  padding:13px 20px !important;
  border:1px solid rgba(255,255,255,.42) !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#b20e16 !important;
  font-size:11px !important;
  line-height:1 !important;
  font-weight:950 !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
}

/* Tablet */
@media(max-width:980px){
  .product-showcase-grid{
    gap:8px !important;
  }
  .product-showcase-content{
    padding:11px !important;
  }
  .product-showcase-content h3{
    font-size:13px !important;
  }
  .product-showcase-content p{
    font-size:9px !important;
    min-height:52px !important;
  }
  .product-showcase-bottom{
    flex-direction:column !important;
    align-items:flex-start !important;
  }
  .product-showcase-bottom strong{
    font-size:15px !important;
  }
}

/* Mobile: same 5-card structure, scaled only */
@media(max-width:650px){
  .product-showcase-red{
    padding:66px 0 72px !important;
  }
  .product-showcase-heading h2{
    font-size:29px !important;
  }
  .product-showcase-heading p{
    max-width:92% !important;
    font-size:11px !important;
  }
  .product-showcase-grid{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:4px !important;
    margin-top:26px !important;
  }
  .product-showcase-card{
    border-radius:12px !important;
  }
  .product-showcase-content{
    padding:6px 4px 7px !important;
  }
  .product-showcase-category{
    padding:3px 4px !important;
    font-size:5px !important;
  }
  .product-showcase-content h3{
    margin-top:5px !important;
    font-size:7.5px !important;
    line-height:1.15 !important;
  }
  .product-showcase-content p{
    display:none !important;
  }
  .product-showcase-bottom{
    gap:4px !important;
    padding-top:7px !important;
  }
  .product-showcase-bottom strong{
    font-size:8px !important;
  }
  .product-showcase-bottom span{
    padding:5px 4px !important;
    font-size:4.8px !important;
  }
  .product-showcase-actions{
    margin-top:20px !important;
  }
  .product-showcase-all{
    min-width:160px !important;
    padding:11px 16px !important;
    font-size:9px !important;
  }
}

@media(max-width:390px){
  .product-showcase-grid{
    gap:3px !important;
  }
  .product-showcase-category{
    display:none !important;
  }
  .product-showcase-content h3{
    font-size:6.8px !important;
  }
  .product-showcase-bottom strong{
    font-size:7.2px !important;
  }
  .product-showcase-bottom span{
    font-size:4.3px !important;
    padding:4px 3px !important;
  }
}


/* ===== v1.0.30 Daging Ayam Showcase Replacement ===== */
.product-showcase-card[href*="category=daging-ayam"] .product-showcase-media{
  background:#7f090e !important;
}
.product-showcase-card[href*="category=daging-ayam"] .product-showcase-media img{
  width:100% !important;
  height:100% !important;
  padding:0 !important;
  object-fit:cover !important;
  object-position:center !important;
}


/* ===== v1.0.31 Premium Seamless Benefit + Category Sections ===== */

/* Shared premium atmosphere for the two cream sections */
.section.center,
.category-section{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  background:
    linear-gradient(180deg,rgba(255,249,238,.96),rgba(255,246,232,.96)) !important;
}

/* Decorative user-supplied background at 50% opacity */
.section.center:before,
.category-section:before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-2 !important;
  background-image:url("/theme-assets/static/section-premium-bg.webp") !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:cover !important;
  opacity:.50 !important;
  pointer-events:none !important;
}

/* Soft veil keeps text/cards readable while retaining the artwork */
.section.center:after,
.category-section:after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;
  background:
    radial-gradient(circle at 50% 32%,rgba(255,255,255,.24),transparent 42%),
    linear-gradient(180deg,rgba(255,248,236,.46),rgba(255,247,235,.60)) !important;
  pointer-events:none !important;
}

/* Reduce excess vertical whitespace without making sections cramped */
.section.center{
  padding-top:56px !important;
  padding-bottom:52px !important;
}

.category-section{
  padding-top:50px !important;
  padding-bottom:60px !important;
}

/* Bring heading and content closer together */
.section.center .section-title{
  margin-top:12px !important;
  margin-bottom:8px !important;
}

.section.center .section-copy{
  margin-bottom:0 !important;
}

.feature-grid{
  margin-top:30px !important;
}

.category-heading-block{
  margin-bottom:26px !important;
}

.category-title{
  margin-top:0 !important;
  margin-bottom:7px !important;
}

.category-subtitle{
  margin-top:7px !important;
}

/* Make the transition between benefit and category sections feel like one canvas */
.section.center + .category-section{
  margin-top:-1px !important;
  border-top:1px solid rgba(190,120,66,.08) !important;
}

/* Cards gain subtle translucency so background artwork reads through softly */
.feature-item{
  background:rgba(255,252,246,.28) !important;
}

.category-card{
  background:rgba(255,253,248,.78) !important;
  backdrop-filter:blur(1.5px) !important;
  -webkit-backdrop-filter:blur(1.5px) !important;
}

/* Keep section content clearly above decorative layers */
.section.center > .container,
.category-section > .container,
.category-heading-block,
.category-grid-wrap{
  position:relative !important;
  z-index:1 !important;
}

/* Desktop */
@media(min-width:981px){
  .section.center{
    padding-top:50px !important;
    padding-bottom:46px !important;
  }

  .category-section{
    padding-top:46px !important;
    padding-bottom:56px !important;
  }

  .feature-grid{
    margin-top:27px !important;
  }
}

/* Tablet */
@media(max-width:980px){
  .section.center{
    padding-top:46px !important;
    padding-bottom:42px !important;
  }

  .category-section{
    padding-top:42px !important;
    padding-bottom:50px !important;
  }

  .section.center:before,
  .category-section:before{
    background-position:center top !important;
  }
}

/* Mobile: same structure, tighter rhythm only */
@media(max-width:650px){
  .section.center{
    padding-top:38px !important;
    padding-bottom:34px !important;
  }

  .category-section{
    padding-top:36px !important;
    padding-bottom:42px !important;
  }

  .feature-grid{
    margin-top:22px !important;
  }

  .category-heading-block{
    margin-bottom:20px !important;
  }

  .section.center:before,
  .category-section:before{
    background-size:cover !important;
    background-position:center center !important;
    opacity:.50 !important;
  }

  .section.center:after,
  .category-section:after{
    background:
      linear-gradient(180deg,rgba(255,248,236,.54),rgba(255,247,235,.64)) !important;
  }
}


/* ===== v1.0.32 Seamless Uploaded PNG Hero ===== */
.pro-hero-centered .pro-hero-photo-frame,
.pro-hero-photo-frame{
  width:min(92%,980px) !important;
  max-width:980px !important;
  margin:0 auto !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
  overflow:visible !important;
}

.pro-hero-centered .pro-hero-photo,
.pro-hero-photo{
  display:block !important;
  width:100% !important;
  height:auto !important;
  margin:0 auto !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  object-fit:contain !important;
}

.pro-hero-photo-centered{
  margin-top:20px !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* No pseudo frame/shadow around hero visual */
.pro-hero-photo-frame:before,
.pro-hero-photo-frame:after,
.pro-hero-photo-centered:before,
.pro-hero-photo-centered:after{
  display:none !important;
  content:none !important;
  box-shadow:none !important;
  background:none !important;
}

/* Same structure on desktop/mobile; scale only */
@media(max-width:900px){
  .pro-hero-centered .pro-hero-photo-frame,
  .pro-hero-photo-frame{
    width:min(96%,850px) !important;
  }
}

@media(max-width:600px){
  .pro-hero-photo-centered{
    margin-top:14px !important;
  }
  .pro-hero-centered .pro-hero-photo-frame,
  .pro-hero-photo-frame{
    width:108% !important;
    max-width:none !important;
  }
}


/* ===== v1.0.33 Unified Benefit + Category Canvas ===== */

/* One continuous canvas for both sections */
.unified-benefit-category{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  margin:0 !important;
  padding:0 !important;
  background:
    linear-gradient(180deg,rgba(255,249,238,.95) 0%,rgba(255,247,233,.95) 48%,rgba(255,249,240,.96) 100%) !important;
}

/* One artwork layer shared by both areas, so there is no visual split */
.unified-benefit-category-art{
  position:absolute !important;
  inset:0 !important;
  z-index:-2 !important;
  background-image:url("/theme-assets/static/section-premium-bg.webp") !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:cover !important;
  opacity:.50 !important;
  pointer-events:none !important;
}

/* Single readability veil across the complete section */
.unified-benefit-category:after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;
  background:
    radial-gradient(circle at 50% 25%,rgba(255,255,255,.24),transparent 33%),
    radial-gradient(circle at 50% 73%,rgba(255,255,255,.18),transparent 35%),
    linear-gradient(180deg,rgba(255,248,237,.42),rgba(255,247,234,.54)) !important;
  pointer-events:none !important;
}

.unified-benefit-category-content{
  position:relative !important;
  z-index:1 !important;
}

/* Disable individual backgrounds/pseudo artwork that caused the visible split */
.unified-benefit-category .section.center,
.unified-benefit-category .category-section{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  margin:0 !important;
}

.unified-benefit-category .section.center:before,
.unified-benefit-category .section.center:after,
.unified-benefit-category .category-section:before,
.unified-benefit-category .category-section:after{
  display:none !important;
  content:none !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Benefit area */
.unified-benefit-category .unified-benefit{
  padding-top:48px !important;
  padding-bottom:30px !important;
}

/* Category follows naturally with no border/line/separate color block */
.unified-benefit-category .category-section{
  padding-top:28px !important;
  padding-bottom:54px !important;
}

/* Remove the legacy seam line */
.unified-benefit-category .section.center + .category-section{
  margin-top:0 !important;
  border-top:0 !important;
}

/* Subtle visual bridge between blocks, not a divider */
.unified-benefit-category .category-heading-block{
  position:relative !important;
  margin-top:0 !important;
}
.unified-benefit-category .category-heading-block:before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:-18px !important;
  width:180px !important;
  height:34px !important;
  transform:translateX(-50%) !important;
  border-radius:50% !important;
  background:radial-gradient(ellipse,rgba(196,40,25,.07),transparent 70%) !important;
  pointer-events:none !important;
}

/* Cards stay readable over shared artwork */
.unified-benefit-category .category-card{
  background:rgba(255,253,248,.82) !important;
  backdrop-filter:blur(1.2px) !important;
  -webkit-backdrop-filter:blur(1.2px) !important;
}

/* Keep typography/content intact */
.unified-benefit-category .section.center > .container,
.unified-benefit-category .category-section > .container,
.unified-benefit-category .category-heading-block,
.unified-benefit-category .category-grid-wrap{
  position:relative !important;
  z-index:2 !important;
}

/* Desktop */
@media(min-width:981px){
  .unified-benefit-category .unified-benefit{
    padding-top:44px !important;
    padding-bottom:26px !important;
  }
  .unified-benefit-category .category-section{
    padding-top:24px !important;
    padding-bottom:50px !important;
  }
}

/* Tablet */
@media(max-width:980px){
  .unified-benefit-category-art{
    background-position:center top !important;
  }
  .unified-benefit-category .unified-benefit{
    padding-top:40px !important;
    padding-bottom:24px !important;
  }
  .unified-benefit-category .category-section{
    padding-top:22px !important;
    padding-bottom:46px !important;
  }
}

/* Mobile: same unified structure, only spacing/scale changes */
@media(max-width:650px){
  .unified-benefit-category-art{
    background-size:cover !important;
    background-position:center center !important;
    opacity:.50 !important;
  }

  .unified-benefit-category .unified-benefit{
    padding-top:34px !important;
    padding-bottom:20px !important;
  }

  .unified-benefit-category .category-section{
    padding-top:18px !important;
    padding-bottom:38px !important;
  }

  .unified-benefit-category .category-heading-block:before{
    top:-12px !important;
    width:120px !important;
    height:24px !important;
  }
}


/* ===== v1.0.34 TRUE SEAMLESS BENEFIT + CATEGORY ===== */

/* One uninterrupted visual surface */
.unified-benefit-category,
.unified-benefit-category-content,
.unified-benefit-category .section.center,
.unified-benefit-category .category-section{
  background:transparent !important;
  border:0 !important;
  border-top:0 !important;
  border-bottom:0 !important;
  box-shadow:none !important;
}

/* Remove every legacy seam/divider from old section rules */
.unified-benefit-category .section.center + .category-section,
.unified-benefit-category .section.center,
.unified-benefit-category .category-section,
.unified-benefit-category .category-heading-block{
  border-top:0 !important;
  border-bottom:0 !important;
  outline:0 !important;
}

.unified-benefit-category .section.center:before,
.unified-benefit-category .section.center:after,
.unified-benefit-category .category-section:before,
.unified-benefit-category .category-section:after,
.unified-benefit-category .category-heading-block:before,
.unified-benefit-category .category-heading-block:after{
  display:none !important;
  content:none !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
}

/* Benefit heading becomes more dominant */
.unified-benefit-category .unified-benefit{
  padding-top:42px !important;
  padding-bottom:16px !important;
}

.unified-benefit-category .unified-benefit .section-title{
  margin-top:12px !important;
  margin-bottom:8px !important;
  font-size:52px !important;
  line-height:1.02 !important;
  font-weight:950 !important;
  letter-spacing:-.04em !important;
}

.unified-benefit-category .unified-benefit .section-copy{
  max-width:700px !important;
  font-size:15px !important;
  line-height:1.55 !important;
}

/* Larger icons and numbers 01-04 */
.unified-benefit-category .feature-grid{
  margin-top:24px !important;
  margin-bottom:0 !important;
  gap:20px !important;
}

.unified-benefit-category .feature-item{
  padding-top:4px !important;
  padding-bottom:0 !important;
}

.unified-benefit-category .feature-icon{
  width:188px !important;
  height:150px !important;
  margin-bottom:7px !important;
}

.unified-benefit-category .feature-number{
  margin:0 0 8px !important;
  font-size:25px !important;
  line-height:1 !important;
  font-weight:950 !important;
}

.unified-benefit-category .feature-title{
  font-size:20px !important;
  line-height:1.12 !important;
}

.unified-benefit-category .feature-desc{
  max-width:230px !important;
  margin-top:7px !important;
  font-size:12px !important;
  line-height:1.45 !important;
}

/* Pull category closer so both blocks read as a single composition */
.unified-benefit-category .category-section{
  padding-top:14px !important;
  padding-bottom:48px !important;
}

.unified-benefit-category .category-heading-block{
  margin-top:0 !important;
  margin-bottom:22px !important;
  padding-top:0 !important;
}

.unified-benefit-category .category-title{
  margin-top:10px !important;
}

/* Prevent any inherited horizontal rule-like effect */
.unified-benefit-category hr,
.unified-benefit-category .divider,
.unified-benefit-category .section-divider{
  display:none !important;
}

/* Desktop */
@media(min-width:981px){
  .unified-benefit-category .unified-benefit{
    padding-top:38px !important;
    padding-bottom:14px !important;
  }

  .unified-benefit-category .category-section{
    padding-top:12px !important;
  }
}

/* Tablet */
@media(max-width:980px){
  .unified-benefit-category .unified-benefit .section-title{
    font-size:44px !important;
  }

  .unified-benefit-category .feature-icon{
    width:150px !important;
    height:124px !important;
  }

  .unified-benefit-category .feature-number{
    font-size:21px !important;
  }

  .unified-benefit-category .feature-title{
    font-size:17px !important;
  }

  .unified-benefit-category .unified-benefit{
    padding-bottom:12px !important;
  }

  .unified-benefit-category .category-section{
    padding-top:10px !important;
  }
}

/* Mobile: same structure, scaled only */
@media(max-width:650px){
  .unified-benefit-category .unified-benefit{
    padding-top:30px !important;
    padding-bottom:9px !important;
  }

  .unified-benefit-category .unified-benefit .section-title{
    font-size:31px !important;
    line-height:1.04 !important;
  }

  .unified-benefit-category .unified-benefit .section-copy{
    max-width:92% !important;
    font-size:11px !important;
  }

  .unified-benefit-category .feature-grid{
    margin-top:18px !important;
    gap:4px !important;
  }

  .unified-benefit-category .feature-icon{
    width:78px !important;
    height:68px !important;
  }

  .unified-benefit-category .feature-number{
    font-size:15px !important;
    margin-bottom:5px !important;
  }

  .unified-benefit-category .feature-title{
    min-height:24px !important;
    font-size:10px !important;
  }

  .unified-benefit-category .feature-desc{
    margin-top:4px !important;
    font-size:7.5px !important;
    line-height:1.3 !important;
  }

  .unified-benefit-category .category-section{
    padding-top:8px !important;
    padding-bottom:36px !important;
  }

  .unified-benefit-category .category-heading-block{
    margin-bottom:18px !important;
  }
}

@media(max-width:390px){
  .unified-benefit-category .unified-benefit .section-title{
    font-size:28px !important;
  }

  .unified-benefit-category .feature-icon{
    width:66px !important;
    height:58px !important;
  }

  .unified-benefit-category .feature-title{
    font-size:8.5px !important;
  }

  .unified-benefit-category .feature-desc{
    font-size:6.8px !important;
  }
}


/* ===== v1.0.35 MOVE BENEFIT BELOW PRODUCT SHOWCASE ===== */

.unified-category-only{
  position:relative !important;
  overflow:hidden !important;
}

.unified-category-only .category-section{
  padding-top:36px !important;
  padding-bottom:48px !important;
}

/* New location for benefit block */
.benefit-after-products-shell{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  margin:0 !important;
  padding:0 !important;
  background:
    linear-gradient(180deg,rgba(255,249,238,.96),rgba(255,247,233,.96)) !important;
}

.benefit-after-products-art{
  position:absolute !important;
  inset:0 !important;
  z-index:-2 !important;
  background-image:url("/theme-assets/static/section-premium-bg.webp") !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:cover !important;
  opacity:.50 !important;
  pointer-events:none !important;
}

.benefit-after-products-shell:after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;
  background:
    radial-gradient(circle at 50% 28%,rgba(255,255,255,.24),transparent 36%),
    linear-gradient(180deg,rgba(255,248,237,.42),rgba(255,247,234,.56)) !important;
  pointer-events:none !important;
}

.benefit-after-products-content{
  position:relative !important;
  z-index:1 !important;
}

.benefit-after-products-shell .unified-benefit{
  margin:0 !important;
  padding-top:42px !important;
  padding-bottom:44px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.benefit-after-products-shell .unified-benefit:before,
.benefit-after-products-shell .unified-benefit:after{
  display:none !important;
  content:none !important;
}

/* Preserve larger styling from v1.0.34 */
.benefit-after-products-shell .section-title{
  font-size:52px !important;
  line-height:1.02 !important;
  font-weight:950 !important;
  letter-spacing:-.04em !important;
}

.benefit-after-products-shell .section-copy{
  max-width:700px !important;
  font-size:15px !important;
}

.benefit-after-products-shell .feature-grid{
  margin-top:24px !important;
  gap:20px !important;
}

.benefit-after-products-shell .feature-icon{
  width:188px !important;
  height:150px !important;
}

.benefit-after-products-shell .feature-number{
  font-size:25px !important;
  font-weight:950 !important;
}

.benefit-after-products-shell .feature-title{
  font-size:20px !important;
}

.benefit-after-products-shell .feature-desc{
  max-width:230px !important;
  font-size:12px !important;
}

/* Seamless handoff from red product section to cream benefit section */
.product-showcase-red + .benefit-after-products-shell{
  margin-top:0 !important;
  border-top:0 !important;
}

/* Tablet */
@media(max-width:980px){
  .benefit-after-products-shell .section-title{
    font-size:44px !important;
  }
  .benefit-after-products-shell .feature-icon{
    width:150px !important;
    height:124px !important;
  }
  .benefit-after-products-shell .feature-number{
    font-size:21px !important;
  }
  .benefit-after-products-shell .feature-title{
    font-size:17px !important;
  }
}

/* Mobile: same structure, only scaling */
@media(max-width:650px){
  .benefit-after-products-shell .unified-benefit{
    padding-top:30px !important;
    padding-bottom:34px !important;
  }
  .benefit-after-products-shell .section-title{
    font-size:31px !important;
  }
  .benefit-after-products-shell .section-copy{
    max-width:92% !important;
    font-size:11px !important;
  }
  .benefit-after-products-shell .feature-grid{
    margin-top:18px !important;
    gap:4px !important;
  }
  .benefit-after-products-shell .feature-icon{
    width:78px !important;
    height:68px !important;
  }
  .benefit-after-products-shell .feature-number{
    font-size:15px !important;
  }
  .benefit-after-products-shell .feature-title{
    font-size:10px !important;
  }
  .benefit-after-products-shell .feature-desc{
    font-size:7.5px !important;
  }
  .unified-category-only .category-section{
    padding-top:30px !important;
    padding-bottom:38px !important;
  }
}


/* ===== v1.0.36 Story Photos + Unified Text Structure ===== */

.story-section-updated{
  padding:58px 0 62px !important;
  background:linear-gradient(180deg,#fff8ea 0%,#fffaf2 100%) !important;
}

.story-grid-updated{
  display:grid !important;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr) !important;
  gap:52px !important;
  align-items:center !important;
}

.story-visual-updated{
  position:relative !important;
  min-height:470px !important;
}

.story-photo-card{
  position:absolute !important;
  overflow:hidden !important;
  margin:0 !important;
  border-radius:28px !important;
  background:#fff !important;
  border:1px solid rgba(181,111,48,.16) !important;
  box-shadow:0 22px 46px rgba(82,37,7,.16),0 5px 14px rgba(82,37,7,.08) !important;
}

.story-photo-card img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

.story-photo-card-main{
  width:64% !important;
  aspect-ratio:1 / 1 !important;
  left:7% !important;
  top:2% !important;
  z-index:1 !important;
}

.story-photo-card-accent{
  width:49% !important;
  aspect-ratio:1 / 1 !important;
  right:1% !important;
  bottom:1% !important;
  z-index:2 !important;
}

.story-copy-updated{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  text-align:left !important;
}

.story-copy-updated .eyebrow{
  margin:0 0 14px !important;
}

.story-copy-updated .section-title{
  margin:0 !important;
  max-width:620px !important;
  color:#c3131d !important;
  font-size:46px !important;
  line-height:1.04 !important;
  font-weight:950 !important;
  letter-spacing:-.035em !important;
  text-align:left !important;
}

.story-copy-updated > p{
  max-width:620px !important;
  margin:15px 0 0 !important;
  color:#5f4b42 !important;
  font-size:15px !important;
  line-height:1.6 !important;
  text-align:left !important;
}

.story-points-updated{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px 30px !important;
  width:100% !important;
  max-width:600px !important;
  margin:24px 0 0 !important;
  padding:0 !important;
  list-style:none !important;
}

.story-points-updated li{
  position:relative !important;
  padding-left:18px !important;
  color:#2b1a16 !important;
  font-size:14px !important;
  line-height:1.35 !important;
  text-align:left !important;
}

.story-points-updated li:before{
  content:"•" !important;
  position:absolute !important;
  left:0 !important;
  color:#c3131d !important;
  font-weight:950 !important;
}

.story-cta{
  margin-top:25px !important;
  align-self:flex-start !important;
}

/* Tablet */
@media(max-width:980px){
  .story-grid-updated{
    gap:34px !important;
  }
  .story-visual-updated{
    min-height:390px !important;
  }
  .story-copy-updated .section-title{
    font-size:38px !important;
  }
}

/* Mobile keeps EXACT same text order; only alignment/scale changes */
@media(max-width:650px){
  .story-section-updated{
    padding:40px 0 44px !important;
  }

  .story-grid-updated{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }

  .story-visual-updated{
    order:1 !important;
    min-height:355px !important;
  }

  .story-copy-updated{
    order:2 !important;
    align-items:center !important;
    text-align:center !important;
  }

  .story-copy-updated .eyebrow{
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .story-copy-updated .section-title{
    max-width:92% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    font-size:31px !important;
    text-align:center !important;
  }

  .story-copy-updated > p{
    max-width:90% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    font-size:11px !important;
    text-align:center !important;
  }

  .story-points-updated{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    max-width:88% !important;
    gap:9px 16px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .story-points-updated li{
    font-size:10px !important;
  }

  .story-cta{
    align-self:center !important;
    margin-top:20px !important;
  }

  .story-photo-card-main{
    width:64% !important;
    left:7% !important;
    top:1% !important;
  }

  .story-photo-card-accent{
    width:49% !important;
    right:3% !important;
    bottom:1% !important;
  }
}

@media(max-width:390px){
  .story-visual-updated{
    min-height:310px !important;
  }
  .story-copy-updated .section-title{
    font-size:27px !important;
  }
  .story-points-updated{
    gap:8px 10px !important;
  }
  .story-points-updated li{
    font-size:9px !important;
  }
}


/* ===== v1.0.37 LEAF GREEN CTA + UPDATED FOOTER ===== */

/* Former orange CTA -> leaf green */
.cta{
  position:relative !important;
  overflow:hidden !important;
  padding-top:48px !important;
  padding-bottom:48px !important;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.12),transparent 36%),
    linear-gradient(135deg,#6e8f3c 0%,#5f7f34 44%,#496a28 100%) !important;
  color:#fff !important;
  border:0 !important;
}

.cta:before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at 14% 25%,rgba(255,225,144,.08),transparent 18%),
    radial-gradient(circle at 84% 72%,rgba(255,255,255,.07),transparent 22%) !important;
}

.cta .container{
  position:relative !important;
  z-index:1 !important;
}

.cta .eyebrow{
  background:#fff7e9 !important;
  color:#4d6e2b !important;
  border-color:#fff7e9 !important;
}

.cta .section-title{
  color:#fffdf7 !important;
  text-shadow:none !important;
}

.cta p{
  color:#eff5e8 !important;
}

.cta .btn-light{
  background:#fffdf7 !important;
  color:#4a6a29 !important;
  border-color:#fffdf7 !important;
  box-shadow:none !important;
}

.cta .btn-primary{
  background:#c3131d !important;
  color:#fff !important;
  border-color:#c3131d !important;
  box-shadow:none !important;
}

/* Footer */
.footer-updated{
  background:
    linear-gradient(180deg,#a50f18 0%,#8d0a11 100%) !important;
}

.footer-grid-updated{
  display:grid !important;
  grid-template-columns:1.35fr .8fr .9fr 1fr 1fr !important;
  gap:34px !important;
  align-items:start !important;
}

.footer-brand-column{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
}

.footer-brand-logo{
  width:82px !important;
  height:82px !important;
  margin-bottom:10px !important;
  overflow:hidden !important;
  border-radius:50% !important;
  background:#fff !important;
  box-shadow:0 10px 24px rgba(0,0,0,.12) !important;
}

.footer-brand-logo img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  border-radius:50% !important;
}

.footer-brand-name{
  color:#fff !important;
  font-size:16px !important;
  line-height:1.2 !important;
  font-weight:950 !important;
}

.footer-updated h4{
  color:#fff !important;
}

.footer-updated small,
.footer-updated p{
  color:#f9e6df !important;
}

.footer-updated a{
  color:#fff0e9 !important;
  text-decoration:none !important;
}

.footer-updated a:hover{
  text-decoration:underline !important;
}

.footer-contact-links{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
}

.footer-contact-links h4{
  margin:0 0 4px !important;
  font-size:13px !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
}

.footer-contact-links a{
  font-size:12px !important;
  line-height:1.4 !important;
}

/* Mobile */
@media(max-width:650px){
  .cta{
    padding-top:40px !important;
    padding-bottom:40px !important;
  }

  .footer-grid-updated{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:24px 18px !important;
  }

  .footer-brand-column{
    grid-column:1 / -1 !important;
    align-items:center !important;
    text-align:center !important;
  }

  .footer-brand-logo{
    width:68px !important;
    height:68px !important;
  }

  .footer-contact-links{
    align-items:flex-start !important;
  }
}

@media(max-width:390px){
  .footer-grid-updated{
    grid-template-columns:1fr !important;
    text-align:center !important;
  }

  .footer-contact-links,
  .footer-grid-updated > div{
    align-items:center !important;
    text-align:center !important;
  }
}


/* ===== v1.0.38 RED CTA + CREAM FOOTER ===== */

/* -----------------------------
   FINAL CTA: RED, MATCH HERO
------------------------------ */
.cta{
  position:relative !important;
  isolation:isolate !important;
  overflow:visible !important;
  margin-top:0 !important;
  padding-top:64px !important;
  padding-bottom:56px !important;
  background:
    radial-gradient(circle at 50% 10%,rgba(255,72,46,.18),transparent 34%),
    linear-gradient(180deg,#9d0b12 0%,#b80f17 54%,#c91920 100%) !important;
  color:#fff !important;
  border:0 !important;
}

/* cream curved separator above CTA */
.cta:before{
  content:"" !important;
  position:absolute !important;
  z-index:0 !important;
  left:-4% !important;
  top:-36px !important;
  width:108% !important;
  height:58px !important;
  border-radius:0 0 50% 50% !important;
  background:#fff6e8 !important;
  box-shadow:0 8px 0 rgba(126,24,16,.16) !important;
  pointer-events:none !important;
}

/* subtle red depth without making section busy */
.cta:after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  background:
    radial-gradient(circle at 14% 65%,rgba(255,197,86,.08),transparent 20%),
    radial-gradient(circle at 88% 28%,rgba(255,255,255,.07),transparent 18%) !important;
  pointer-events:none !important;
}

.cta .container{
  position:relative !important;
  z-index:2 !important;
}

.cta .eyebrow{
  background:#fff3df !important;
  color:#a90d15 !important;
  border:1px solid #fff3df !important;
}

.cta .section-title{
  color:#fffdf8 !important;
  text-shadow:none !important;
}

.cta p{
  color:#ffe9df !important;
}

.cta .btn-light{
  background:#fff8ec !important;
  color:#a90d15 !important;
  border-color:#fff8ec !important;
  box-shadow:none !important;
}

.cta .btn-primary{
  background:#f0222d !important;
  color:#fff !important;
  border-color:#f0222d !important;
  box-shadow:0 8px 18px rgba(80,0,0,.15) !important;
}

/* -----------------------------
   FOOTER: CREAM + ROUNDED TOP
------------------------------ */
.footer-updated{
  position:relative !important;
  isolation:isolate !important;
  margin-top:0 !important;
  padding-top:58px !important;
  padding-bottom:34px !important;
  background:
    linear-gradient(180deg,#fff8ea 0%,#f8eddc 100%) !important;
  color:#3d241c !important;
  border-radius:54px 54px 0 0 !important;
  box-shadow:
    0 -16px 34px rgba(68,28,8,.14),
    0 -4px 12px rgba(68,28,8,.08) !important;
  overflow:hidden !important;
}

/* decorative organic shapes */
.footer-updated:before{
  content:"" !important;
  position:absolute !important;
  z-index:0 !important;
  width:220px !important;
  height:220px !important;
  left:-70px !important;
  top:-92px !important;
  border-radius:50% !important;
  background:
    radial-gradient(circle,#f1bd52 0 34%,transparent 35%),
    radial-gradient(circle at 68% 70%,#d93a27 0 18%,transparent 19%) !important;
  opacity:.16 !important;
  pointer-events:none !important;
}

.footer-updated:after{
  content:"" !important;
  position:absolute !important;
  z-index:0 !important;
  width:260px !important;
  height:180px !important;
  right:-90px !important;
  top:-40px !important;
  border-radius:50% !important;
  background:
    radial-gradient(circle at 35% 42%,#7d9b46 0 22%,transparent 23%),
    radial-gradient(circle at 65% 58%,#e6b545 0 18%,transparent 19%) !important;
  opacity:.14 !important;
  pointer-events:none !important;
}

.footer-grid-updated{
  position:relative !important;
  z-index:2 !important;
  display:grid !important;
  grid-template-columns:1.35fr .8fr .9fr 1fr 1fr !important;
  gap:34px !important;
  align-items:start !important;
}

/* logo card */
.footer-brand-logo{
  width:82px !important;
  height:82px !important;
  margin-bottom:11px !important;
  overflow:hidden !important;
  border-radius:50% !important;
  background:#fff !important;
  border:1px solid rgba(172,111,56,.15) !important;
  box-shadow:0 9px 20px rgba(92,45,10,.12) !important;
}

.footer-brand-logo img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  border-radius:50% !important;
}

.footer-brand-name{
  color:#a70e16 !important;
}

.footer-updated h4{
  color:#a70e16 !important;
  font-weight:950 !important;
}

.footer-updated small,
.footer-updated p{
  color:#62483e !important;
}

.footer-updated a{
  color:#7b3d2e !important;
  text-decoration:none !important;
}

.footer-updated a:hover{
  color:#b30f17 !important;
  text-decoration:underline !important;
}

/* contact block becomes a subtle cream card */
.footer-contact-links{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  padding:14px 16px !important;
  border-radius:20px !important;
  background:rgba(255,255,255,.48) !important;
  border:1px solid rgba(176,121,67,.16) !important;
  box-shadow:0 8px 18px rgba(82,37,7,.06) !important;
}

.footer-contact-links h4{
  margin:0 0 3px !important;
}

.footer-contact-links a{
  color:#6d3a2c !important;
}

/* Tablet */
@media(max-width:980px){
  .cta{
    padding-top:58px !important;
    padding-bottom:50px !important;
  }

  .footer-grid-updated{
    gap:24px !important;
  }
}

/* Mobile */
@media(max-width:650px){
  .cta{
    padding-top:52px !important;
    padding-bottom:44px !important;
  }

  .cta:before{
    top:-24px !important;
    height:42px !important;
  }

  .footer-updated{
    border-radius:34px 34px 0 0 !important;
    padding-top:44px !important;
    padding-bottom:28px !important;
  }

  .footer-grid-updated{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:24px 18px !important;
  }

  .footer-brand-column{
    grid-column:1 / -1 !important;
    align-items:center !important;
    text-align:center !important;
  }

  .footer-contact-links{
    align-items:flex-start !important;
    text-align:left !important;
    padding:12px !important;
  }

  .footer-updated:before{
    width:150px !important;
    height:150px !important;
    left:-50px !important;
    top:-60px !important;
  }

  .footer-updated:after{
    width:170px !important;
    height:130px !important;
    right:-65px !important;
    top:-30px !important;
  }
}

@media(max-width:390px){
  .footer-grid-updated{
    grid-template-columns:1fr !important;
    text-align:center !important;
  }

  .footer-grid-updated > div,
  .footer-contact-links{
    align-items:center !important;
    text-align:center !important;
  }
}


/* ===== v1.0.39 CLEAN FOOTER / MOBILE WIDTH FIX ===== */

/* Footer must stay inside viewport */
.footer-updated{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  box-shadow:none !important;
}

/* Contact should visually match Informasi / Belanja.
   Remove the special card treatment entirely. */
.footer-contact-links{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.footer-contact-links h4{
  margin:0 0 12px !important;
  color:#a70e16 !important;
  font-size:13px !important;
  line-height:1.2 !important;
  font-weight:950 !important;
  text-transform:uppercase !important;
}

.footer-contact-links a{
  display:block !important;
  margin:0 0 5px !important;
  padding:0 !important;
  color:#62483e !important;
  font-size:12px !important;
  line-height:1.45 !important;
  text-decoration:none !important;
}

/* Remove footer logo/card shadows too so no mobile horizontal clipping can occur */
.footer-brand-logo{
  box-shadow:none !important;
}

/* Decorative shapes remain but are clipped safely inside footer */
.footer-updated:before,
.footer-updated:after{
  box-shadow:none !important;
}

/* Keep container strictly within viewport */
.footer-updated .container,
.footer-grid-updated{
  width:min(1180px,calc(100% - 32px)) !important;
  max-width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}

/* Mobile */
@media(max-width:650px){
  .footer-updated{
    width:100% !important;
    max-width:100vw !important;
    margin-left:0 !important;
    margin-right:0 !important;
    box-shadow:none !important;
    overflow:hidden !important;
  }

  .footer-updated .container,
  .footer-grid-updated{
    width:calc(100% - 24px) !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .footer-contact-links{
    align-items:flex-start !important;
    text-align:left !important;
  }

  .footer-contact-links h4{
    font-size:11px !important;
    margin-bottom:9px !important;
  }

  .footer-contact-links a{
    font-size:10px !important;
    margin-bottom:4px !important;
  }
}

@media(max-width:390px){
  .footer-grid-updated{
    width:calc(100% - 20px) !important;
  }

  .footer-contact-links{
    align-items:center !important;
    text-align:center !important;
  }
}


/* ===== v1.0.40 MOBILE FULL-WIDTH / RIGHT-GAP FIX ===== */

/* Global sizing guard */
html,
body{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  overflow-x:hidden !important;
  box-sizing:border-box !important;
}

*,
*:before,
*:after{
  box-sizing:border-box !important;
}

/* Do not allow lower-page sections to inherit a desktop width/offset */
.story-section-updated,
.benefit-after-products-shell,
.cta,
.footer-updated{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
}

/* CTA must paint the entire viewport width */
.cta{
  display:block !important;
  position:relative !important;
  overflow:hidden !important;
}

/* Keep the curved separator full width too */
.cta:before{
  left:-4% !important;
  width:108% !important;
  max-width:none !important;
}

/* Footer must also occupy the entire viewport */
.footer-updated{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  overflow:hidden !important;
}

/* Containers remain centered INSIDE the full-width sections */
.story-section-updated > .container,
.benefit-after-products-shell .container,
.cta > .container,
.footer-updated > .container{
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Mobile-specific hard reset against inherited fixed width */
@media(max-width:650px){
  .story-section-updated,
  .benefit-after-products-shell,
  .cta,
  .footer-updated{
    width:100vw !important;
    max-width:100vw !important;
    min-width:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    position:relative !important;
    left:0 !important;
    right:0 !important;
    transform:none !important;
  }

  /* Internal content gets safe phone gutters, not the section itself */
  .story-section-updated > .container,
  .benefit-after-products-shell .container,
  .cta > .container,
  .footer-updated > .container,
  .footer-grid-updated{
    width:calc(100% - 24px) !important;
    max-width:calc(100% - 24px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* Decorative overhangs are clipped inside their own section */
  .cta:before,
  .cta:after,
  .footer-updated:before,
  .footer-updated:after{
    max-width:none !important;
    pointer-events:none !important;
  }

  /* Prevent any old min-width from lower content from widening the page */
  .story-grid-updated,
  .story-copy-updated,
  .story-visual-updated,
  .story-points-updated,
  .footer-grid-updated,
  .footer-grid-updated > div,
  .footer-contact-links{
    min-width:0 !important;
    max-width:100% !important;
  }
}

/* Narrow phones */
@media(max-width:390px){
  .story-section-updated,
  .benefit-after-products-shell,
  .cta,
  .footer-updated{
    width:100vw !important;
    max-width:100vw !important;
  }

  .story-section-updated > .container,
  .benefit-after-products-shell .container,
  .cta > .container,
  .footer-updated > .container,
  .footer-grid-updated{
    width:calc(100% - 20px) !important;
    max-width:calc(100% - 20px) !important;
  }
}


/* ===== v1.0.41 Enlarge Key Labels + CTA ===== */

/* KATEGORI badge */
.category-heading-block .eyebrow,
.category-section .eyebrow{
  font-size:16px !important;
  line-height:1 !important;
  padding:12px 22px !important;
  min-height:42px !important;
  border-radius:999px !important;
}

/* KENAPA PILIH KAMI badge */
.unified-benefit .eyebrow,
.benefit-after-products-shell .eyebrow{
  font-size:16px !important;
  line-height:1 !important;
  padding:12px 22px !important;
  min-height:42px !important;
  border-radius:999px !important;
}

/* TENTANG PRODUK badge */
.story-copy-updated .eyebrow{
  font-size:16px !important;
  line-height:1 !important;
  padding:12px 22px !important;
  min-height:42px !important;
  border-radius:999px !important;
}

/* LIHAT PRODUK button in story section */
.story-cta{
  font-size:16px !important;
  line-height:1 !important;
  padding:15px 28px !important;
  min-height:48px !important;
  min-width:150px !important;
  border-radius:999px !important;
}

/* Tablet */
@media(max-width:980px){
  .category-heading-block .eyebrow,
  .category-section .eyebrow,
  .unified-benefit .eyebrow,
  .benefit-after-products-shell .eyebrow,
  .story-copy-updated .eyebrow{
    font-size:14px !important;
    padding:11px 19px !important;
    min-height:38px !important;
  }

  .story-cta{
    font-size:14px !important;
    padding:13px 24px !important;
    min-height:44px !important;
    min-width:138px !important;
  }
}

/* Mobile: still visibly larger, scaled to fit */
@media(max-width:650px){
  .category-heading-block .eyebrow,
  .category-section .eyebrow,
  .unified-benefit .eyebrow,
  .benefit-after-products-shell .eyebrow,
  .story-copy-updated .eyebrow{
    font-size:11px !important;
    padding:9px 15px !important;
    min-height:34px !important;
  }

  .story-cta{
    font-size:11px !important;
    padding:11px 20px !important;
    min-height:40px !important;
    min-width:125px !important;
  }
}

@media(max-width:390px){
  .category-heading-block .eyebrow,
  .category-section .eyebrow,
  .unified-benefit .eyebrow,
  .benefit-after-products-shell .eyebrow,
  .story-copy-updated .eyebrow{
    font-size:10px !important;
    padding:8px 13px !important;
    min-height:32px !important;
  }

  .story-cta{
    font-size:10px !important;
    padding:10px 18px !important;
    min-height:38px !important;
    min-width:118px !important;
  }
}


/* ===== v1.0.42 Unified Heading Typography =====
   Match all major section headings to "Produk Pilihan Untuk Anda".
*/

/* Shared typography */
.category-title,
.story-copy-updated .section-title,
.cta .section-title,
.product-showcase-heading h2{
  font-family:inherit !important;
  font-weight:950 !important;
  letter-spacing:-.035em !important;
  line-height:1.04 !important;
  text-transform:none !important;
}

/* Cream-background headings use brand red */
.category-title,
.story-copy-updated .section-title{
  color:#c3131d !important;
}

/* Red-background headings use cream/white like Product Showcase */
.cta .section-title,
.product-showcase-heading h2{
  color:#fffdf8 !important;
}

/* Desktop: same visual scale family */
.category-title,
.story-copy-updated .section-title,
.cta .section-title,
.product-showcase-heading h2{
  font-size:42px !important;
}

/* Keep centered sections centered */
.category-title,
.cta .section-title,
.product-showcase-heading h2{
  text-align:center !important;
}

/* Story remains aligned with its content block on desktop */
.story-copy-updated .section-title{
  text-align:left !important;
}

/* Tablet */
@media(max-width:980px){
  .category-title,
  .story-copy-updated .section-title,
  .cta .section-title,
  .product-showcase-heading h2{
    font-size:36px !important;
  }
}

/* Mobile: same typography, scaled only */
@media(max-width:650px){
  .category-title,
  .story-copy-updated .section-title,
  .cta .section-title,
  .product-showcase-heading h2{
    font-size:28px !important;
    line-height:1.05 !important;
    letter-spacing:-.03em !important;
  }

  .story-copy-updated .section-title{
    text-align:center !important;
  }
}

@media(max-width:390px){
  .category-title,
  .story-copy-updated .section-title,
  .cta .section-title,
  .product-showcase-heading h2{
    font-size:25px !important;
  }
}


/* ===== v1.0.43 Complete Unified Heading Typography ===== */

/* Missed benefit heading: match Produk Pilihan Untuk Anda */
.benefit-after-products-shell .section-title,
.unified-benefit .section-title{
  font-family:inherit !important;
  font-size:42px !important;
  line-height:1.04 !important;
  font-weight:950 !important;
  letter-spacing:-.035em !important;
  text-transform:none !important;
  color:#c3131d !important;
  text-align:center !important;
}

@media(max-width:980px){
  .benefit-after-products-shell .section-title,
  .unified-benefit .section-title{
    font-size:36px !important;
  }
}

@media(max-width:650px){
  .benefit-after-products-shell .section-title,
  .unified-benefit .section-title{
    font-size:28px !important;
    line-height:1.05 !important;
    letter-spacing:-.03em !important;
  }
}

@media(max-width:390px){
  .benefit-after-products-shell .section-title,
  .unified-benefit .section-title{
    font-size:25px !important;
  }
}


/* ===== v1.0.44 Straight Top Separator for Product Showcase ===== */

/* Make ONLY the top boundary of Produk Pilihan Untuk Anda straight */
.product-showcase-red{
  border-top:0 !important;
  border-radius:0 !important;
}

/* Remove curved/half-circle top separator from earlier versions */
.product-showcase-layer-top{
  top:0 !important;
  left:0 !important;
  width:100% !important;
  height:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  display:none !important;
}

/* Prevent legacy pseudo curves from affecting the top edge */
.product-showcase-red:before{
  border-radius:0 !important;
}

/* Keep bottom separator unchanged */
.product-showcase-layer-bottom{
  display:block !important;
}

/* Desktop / Tablet / Mobile: same straight top edge */
@media(max-width:980px){
  .product-showcase-layer-top{
    display:none !important;
  }
}

@media(max-width:650px){
  .product-showcase-layer-top{
    display:none !important;
  }
}


/* ===== v1.0.45 Straight Top Separator for Final CTA ===== */

/* Final CTA top edge must be perfectly straight */
.cta{
  border-top:0 !important;
  border-radius:0 !important;
}

/* Remove ONLY the cream curved separator above CTA */
.cta:before{
  display:none !important;
  content:none !important;
  top:auto !important;
  left:auto !important;
  width:0 !important;
  height:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
}

/* Keep CTA background / decorative depth */
.cta:after{
  display:block !important;
}

/* Do not alter the lower transition */
.cta + .footer-updated,
.footer-updated{
  /* intentionally preserve existing bottom/next-section styling */
}

/* Same result on tablet and mobile */
@media(max-width:980px){
  .cta:before{
    display:none !important;
    content:none !important;
  }
}

@media(max-width:650px){
  .cta:before{
    display:none !important;
    content:none !important;
  }
}


/* ===== v1.0.46 Curved / Half-Circle Top Boundary for Cream Footer ===== */

/* Footer keeps normal bottom edge; only top boundary becomes curved */
.footer-updated{
  position:relative !important;
  overflow:visible !important;
  border-radius:0 !important;
  margin-top:42px !important;
  background:
    linear-gradient(180deg,#fff8ea 0%,#f8eddc 100%) !important;
  box-shadow:none !important;
}

/* Cream ellipse rises into the red CTA, creating the half-circle cut */
.footer-updated:before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:0 !important;
  left:-5% !important;
  top:-54px !important;
  width:110% !important;
  height:84px !important;
  border-radius:50% 50% 0 0 / 100% 100% 0 0 !important;
  background:#fff8ea !important;
  box-shadow:none !important;
  pointer-events:none !important;
}

/* Preserve decorative footer artwork using a dedicated radial layer */
.footer-updated:after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:0 !important;
  width:260px !important;
  height:180px !important;
  right:-90px !important;
  top:-10px !important;
  border-radius:50% !important;
  background:
    radial-gradient(circle at 35% 42%,#7d9b46 0 22%,transparent 23%),
    radial-gradient(circle at 65% 58%,#e6b545 0 18%,transparent 19%) !important;
  opacity:.14 !important;
  box-shadow:none !important;
  pointer-events:none !important;
}

.footer-grid-updated{
  position:relative !important;
  z-index:2 !important;
}

/* Make sure lower edge remains straight / normal */
.footer-updated{
  border-bottom-left-radius:0 !important;
  border-bottom-right-radius:0 !important;
}

/* Tablet */
@media(max-width:980px){
  .footer-updated{
    margin-top:36px !important;
  }

  .footer-updated:before{
    top:-46px !important;
    height:72px !important;
  }
}

/* Mobile: same curved top, scaled to phone width */
@media(max-width:650px){
  .footer-updated{
    margin-top:30px !important;
    overflow:visible !important;
  }

  .footer-updated:before{
    left:-8% !important;
    top:-36px !important;
    width:116% !important;
    height:58px !important;
    border-radius:50% 50% 0 0 / 100% 100% 0 0 !important;
  }
}

@media(max-width:390px){
  .footer-updated{
    margin-top:26px !important;
  }

  .footer-updated:before{
    top:-31px !important;
    height:50px !important;
  }
}


/* ===== v1.0.47 RED SECTION BOTTOM HALF-CIRCLE CURVE ===== */

/* Reset v1.0.46 footer curve: footer itself starts normally */
.footer-updated{
  margin-top:0 !important;
  overflow:hidden !important;
  border-radius:0 !important;
}

.footer-updated:before{
  display:none !important;
  content:none !important;
  width:0 !important;
  height:0 !important;
  background:none !important;
}

/* The RED CTA now creates the curved lower edge */
.cta{
  position:relative !important;
  overflow:visible !important;
  margin-bottom:54px !important;
  border-radius:0 !important;
  z-index:2 !important;
}

/* Red ellipse extends downward into cream area */
.cta:before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:-1 !important;
  left:-5% !important;
  bottom:-54px !important;
  top:auto !important;
  width:110% !important;
  height:86px !important;
  border-radius:0 0 50% 50% / 0 0 100% 100% !important;
  background:
    linear-gradient(180deg,#c91920 0%,#b80f17 100%) !important;
  box-shadow:none !important;
  pointer-events:none !important;
}

/* Keep CTA inner decorative layer */
.cta:after{
  display:block !important;
}

/* Cream footer remains flat at top; red shape overlaps it */
.footer-updated{
  position:relative !important;
  z-index:1 !important;
  background:
    linear-gradient(180deg,#fff8ea 0%,#f8eddc 100%) !important;
}

/* Preserve footer decorative right-side shape */
.footer-updated:after{
  content:"" !important;
  display:block !important;
}

/* Tablet */
@media(max-width:980px){
  .cta{
    margin-bottom:46px !important;
  }

  .cta:before{
    bottom:-46px !important;
    height:74px !important;
  }
}

/* Mobile */
@media(max-width:650px){
  .cta{
    margin-bottom:34px !important;
    overflow:visible !important;
  }

  .cta:before{
    left:-8% !important;
    bottom:-34px !important;
    width:116% !important;
    height:56px !important;
    border-radius:0 0 50% 50% / 0 0 100% 100% !important;
  }

  .footer-updated{
    margin-top:0 !important;
  }
}

@media(max-width:390px){
  .cta{
    margin-bottom:30px !important;
  }

  .cta:before{
    bottom:-30px !important;
    height:50px !important;
  }
}


/* ===== v1.0.48 CREAM RISE CURVE INTO RED CTA ===== */

/* Reset v1.0.47 red downward curve */
.cta{
  margin-bottom:0 !important;
  overflow:hidden !important;
}

.cta:before{
  display:none !important;
  content:none !important;
  width:0 !important;
  height:0 !important;
  background:none !important;
}

/* Cream footer rises upward into the red section */
.footer-updated{
  position:relative !important;
  z-index:2 !important;
  margin-top:0 !important;
  overflow:visible !important;
  background:
    linear-gradient(180deg,#fff8ea 0%,#f8eddc 100%) !important;
}

/* Main cream half-circle rise */
.footer-updated:before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:-1 !important;
  left:-5% !important;
  top:-62px !important;
  width:110% !important;
  height:96px !important;
  border-radius:50% 50% 0 0 / 100% 100% 0 0 !important;
  background:#fff8ea !important;
  box-shadow:none !important;
  pointer-events:none !important;
}

/* Keep footer bottom unchanged */
.footer-updated{
  border-bottom-left-radius:0 !important;
  border-bottom-right-radius:0 !important;
}

/* Tablet */
@media(max-width:980px){
  .footer-updated:before{
    top:-52px !important;
    height:82px !important;
  }
}

/* Mobile */
@media(max-width:650px){
  .footer-updated{
    overflow:visible !important;
  }

  .footer-updated:before{
    left:-8% !important;
    top:-40px !important;
    width:116% !important;
    height:64px !important;
    border-radius:50% 50% 0 0 / 100% 100% 0 0 !important;
  }
}

@media(max-width:390px){
  .footer-updated:before{
    top:-34px !important;
    height:56px !important;
  }
}


/* ===== v1.0.49 FIX: CREAM CURVE MUST OVERLAY RED CTA ===== */

/* CTA stays below footer curve in stacking order */
.cta{
  position:relative !important;
  z-index:1 !important;
  margin-bottom:0 !important;
  overflow:hidden !important;
}

/* Ensure no previous red downward curve remains */
.cta:before{
  display:none !important;
  content:none !important;
}

/* Footer sits above CTA so cream curve is actually visible */
.footer-updated{
  position:relative !important;
  z-index:5 !important;
  margin-top:0 !important;
  overflow:visible !important;
  background:
    linear-gradient(180deg,#fff8ea 0%,#f8eddc 100%) !important;
}

/* Visible cream rise into red area */
.footer-updated:before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:1 !important;
  left:-5% !important;
  top:-62px !important;
  width:110% !important;
  height:96px !important;
  border-radius:50% 50% 0 0 / 100% 100% 0 0 !important;
  background:#fff8ea !important;
  opacity:1 !important;
  box-shadow:none !important;
  pointer-events:none !important;
}

/* Keep footer content above the cream curve */
.footer-grid-updated{
  position:relative !important;
  z-index:3 !important;
}

/* Keep decorative footer artwork visible without covering the cream curve */
.footer-updated:after{
  z-index:2 !important;
}

/* Tablet */
@media(max-width:980px){
  .footer-updated:before{
    top:-52px !important;
    height:82px !important;
  }
}

/* Mobile */
@media(max-width:650px){
  .footer-updated{
    z-index:5 !important;
    overflow:visible !important;
  }

  .footer-updated:before{
    left:-8% !important;
    top:-40px !important;
    width:116% !important;
    height:64px !important;
    border-radius:50% 50% 0 0 / 100% 100% 0 0 !important;
    background:#fff8ea !important;
    opacity:1 !important;
  }

  .footer-grid-updated{
    position:relative !important;
    z-index:3 !important;
  }
}

@media(max-width:390px){
  .footer-updated:before{
    top:-34px !important;
    height:56px !important;
  }
}


/* ===== v1.0.50 STRAIGHT TOP CTA / KEEP CREAM BOTTOM CURVE ===== */

/* Top edge of Temukan Produk Favoritmu must be straight */
.cta{
  border-top-left-radius:0 !important;
  border-top-right-radius:0 !important;
  border-top:0 !important;
  clip-path:none !important;
}

/* Remove any legacy top curve/separator only */
.cta > .container:before,
.cta > .container:after{
  /* no decorative top separator */
}

/* Ensure no pseudo layer creates a curved TOP edge.
   The cream bottom curve is owned by footer-updated:before and remains untouched. */
.cta:before{
  display:none !important;
  content:none !important;
  top:auto !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
}

/* Preserve red CTA body and bottom cream rise exactly */
.footer-updated:before{
  display:block !important;
}

/* Same result on desktop/tablet/mobile */
@media(max-width:980px){
  .cta{
    border-top-left-radius:0 !important;
    border-top-right-radius:0 !important;
  }
}

@media(max-width:650px){
  .cta{
    border-top-left-radius:0 !important;
    border-top-right-radius:0 !important;
  }
}


/* ===== v1.0.51 STRAIGHT DIVIDER BETWEEN RED CTA AND CREAM FOOTER ===== */

/* Remove ALL curved overlap between CTA and footer */
.cta{
  margin-bottom:0 !important;
  border-bottom-left-radius:0 !important;
  border-bottom-right-radius:0 !important;
  overflow:hidden !important;
}

/* No red curve */
.cta:before{
  display:none !important;
  content:none !important;
  width:0 !important;
  height:0 !important;
  background:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* Footer starts flat, directly under CTA */
.footer-updated{
  margin-top:0 !important;
  border-radius:0 !important;
  overflow:hidden !important;
}

/* No cream rise curve */
.footer-updated:before{
  display:none !important;
  content:none !important;
  width:0 !important;
  height:0 !important;
  background:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* Keep footer decorative right-side element only */
.footer-updated:after{
  display:block !important;
}

/* Hard straight boundary across all breakpoints */
@media(max-width:980px){
  .cta,
  .footer-updated{
    margin-top:0 !important;
    margin-bottom:0 !important;
    border-radius:0 !important;
  }

  .cta:before,
  .footer-updated:before{
    display:none !important;
    content:none !important;
  }
}

@media(max-width:650px){
  .cta,
  .footer-updated{
    width:100vw !important;
    max-width:100vw !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    border-radius:0 !important;
  }

  .cta:before,
  .footer-updated:before{
    display:none !important;
    content:none !important;
  }
}


/* ===== v1.0.52 FULL RED BOTTOM FOR FINAL CTA ===== */

/* Make the entire Temukan Produk Favoritmu section red to its final edge */
.cta{
  position:relative !important;
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding-bottom:64px !important;
  border:0 !important;
  border-radius:0 !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 50% 10%,rgba(255,72,46,.18),transparent 34%),
    linear-gradient(180deg,#9d0b12 0%,#b80f17 54%,#c91920 100%) !important;
}

/* Remove every legacy cream/red curved overlay around CTA bottom */
.cta:before{
  display:none !important;
  content:none !important;
  position:absolute !important;
  width:0 !important;
  height:0 !important;
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

.cta:after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  background:
    radial-gradient(circle at 14% 65%,rgba(255,197,86,.08),transparent 20%),
    radial-gradient(circle at 88% 28%,rgba(255,255,255,.07),transparent 18%) !important;
  pointer-events:none !important;
}

.cta > .container{
  position:relative !important;
  z-index:2 !important;
}

/* Footer begins only AFTER the red CTA finishes */
.footer-updated{
  position:relative !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  overflow:hidden !important;
  background:linear-gradient(180deg,#fff8ea 0%,#f8eddc 100%) !important;
}

/* Absolutely no cream shape rising into CTA */
.footer-updated:before{
  display:none !important;
  content:none !important;
  position:absolute !important;
  width:0 !important;
  height:0 !important;
  top:auto !important;
  left:auto !important;
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* Desktop/tablet/mobile keep the same straight red ending */
@media(max-width:980px){
  .cta{
    padding-bottom:56px !important;
  }
}

@media(max-width:650px){
  .cta{
    width:100vw !important;
    max-width:100vw !important;
    padding-bottom:48px !important;
    margin:0 !important;
    border-radius:0 !important;
  }

  .footer-updated{
    width:100vw !important;
    max-width:100vw !important;
    margin:0 !important;
    border-radius:0 !important;
  }

  .footer-updated:before,
  .cta:before{
    display:none !important;
    content:none !important;
  }
}