:root { --detail-orange:#ef6406; --detail-brown:#4a2f1d; --detail-line:#eddfd4; --detail-muted:#83736a; }

/* Global reset for vendor detail page */
.vendor-page * { box-sizing:border-box; }

/* Page & Breadcrumb */
.vendor-page { padding:32px 0 80px; background:#fffdfa; font-size:16px; width:100%; overflow-x:hidden; box-sizing:border-box; margin:0; max-width:100vw; padding-left:0; padding-right:0; }
.vendor-breadcrumb { display:flex; align-items:center; gap:8px; margin:0 0 22px; color:#8d7d72; font-size:14px; width:100%; box-sizing:border-box; padding:0; }
.vendor-breadcrumb a { color:var(--detail-orange); text-decoration:none; }
.vendor-breadcrumb svg { width:15px; }

@media(max-width:768px){
  .vendor-page{padding:24px 0 60px}
}

@media(max-width:480px){
  .vendor-page{padding:16px 0 50px}
}

@media(max-width:360px){
  .vendor-page{padding:12px 0 40px}
}

/* Hero */
.vendor-store-hero { position:relative; min-height:340px; overflow:hidden; display:flex; align-items:flex-end; padding:34px 36px; border-radius:22px; background:#51311c; box-shadow:0 18px 40px rgba(74,47,29,.16); width:100%; box-sizing:border-box; margin:0; left:0; max-width:100vw; margin-left:0; margin-right:0; }
.vendor-store-hero>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.72; }
.vendor-store-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(43,23,12,.91),rgba(73,40,18,.46),rgba(73,40,18,.1)); }
.vendor-store-copy { position:relative; z-index:1; display:flex; align-items:center; gap:20px; color:#fff; flex-wrap:wrap; width:100%; box-sizing:border-box; margin:0; max-width:100vw; }
.vendor-logo-large { width:90px; height:90px; padding:7px; border-radius:16px; background:#fff; flex-shrink:0; }
.vendor-logo-large img { width:100%; height:100%; object-fit:contain; }
.vendor-kicker { display:flex; align-items:center; gap:7px; margin:0 0 8px; color:#ffcfaa; font-size:13px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; }
.vendor-kicker svg { width:16px; }
.vendor-store-copy h1 { margin:0; font-size:44px; letter-spacing:-1px; line-height:1.1; }
.vendor-quick-meta { display:flex; flex-wrap:wrap; gap:12px 20px; margin-top:12px; color:#f9e7d9; font-size:14px; }
.vendor-quick-meta span { display:flex; align-items:center; gap:6px; }
.vendor-quick-meta svg { width:16px; color:#ffae76; }
.hero-store-cta { position:absolute; right:32px; bottom:34px; z-index:1; display:flex; align-items:center; gap:10px; padding:14px 20px; border-radius:11px; color:var(--detail-brown); background:#fff; text-decoration:none; font-size:14px; font-weight:800; }
.hero-store-cta svg { width:17px; }

/* Layout */
.vendor-layout { display:grid; grid-template-columns:280px minmax(0,1fr); gap:26px; margin-top:26px; align-items:start; width:100%; box-sizing:border-box; margin-left:0; margin-right:0; max-width:100vw; padding-left:0; padding-right:0; }
.vendor-sidebar { display:grid; align-content:start; gap:18px; position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; width:100%; box-sizing:border-box; margin:0; padding:0; max-width:100vw; }

/* Sidebar Cards */
.side-card,.about-card,.review-card { border:1px solid var(--detail-line); border-radius:18px; background:#fff; box-shadow:0 8px 24px rgba(74,47,29,.04); width:100%; box-sizing:border-box; margin:0; margin-left:0; margin-right:0; }
.side-card { padding:22px; }
.side-card h2 { margin:0 0 18px; color:var(--detail-brown); font-size:19px; }
.side-card p { display:flex; gap:11px; margin:0 0 16px; color:var(--detail-orange); }
.side-card p:last-child { margin-bottom:0; }
.side-card p>svg { width:18px; flex:0 0 auto; margin-top:2px; }
.side-card b,.side-card small { display:block; }
.side-card b { color:var(--detail-brown); font-size:14px; }
.side-card small { margin-top:4px; color:var(--detail-muted); font-size:13px; line-height:1.5; }
.side-check { background:#fff9f3; }
.side-check span { display:flex; gap:8px; margin:0 0 12px; color:#68564b; font-size:14px; }
.side-check svg { width:17px; color:var(--detail-orange); }

/* About Card */
.about-card { padding:28px; width:100%; box-sizing:border-box; margin-left:0; margin-right:0; }
.vendor-main { min-width:0; }
.about-card { padding:28px; }
.eyebrow { margin:0 0 8px; color:#be6d35; font-size:12px; font-weight:800; letter-spacing:1.2px; }
.about-card h2,.section-title h2 { margin:0; color:var(--detail-brown); font-size:28px; letter-spacing:-.6px; }
.about-card h2 span { color:var(--detail-orange); }
.about-card>p:not(.eyebrow) { max-width:730px; margin:12px 0 22px; color:var(--detail-muted); font-size:15px; line-height:1.7; }

/* Highlight Row */
.highlight-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px; width:100%; box-sizing:border-box; margin-left:0; margin-right:0; }
.highlight-row span { display:grid; grid-template-columns:34px 1fr; column-gap:10px; padding:15px; border-radius:12px; background:#fff8f2; }
.highlight-row svg { grid-row:1/3; width:22px; color:var(--detail-orange); }
.highlight-row b { color:var(--detail-brown); font-size:14px; }
.highlight-row small { margin-top:4px; color:var(--detail-muted); font-size:12px; }

/* Section Titles */
.vendor-section { margin-top:30px; width:100%; box-sizing:border-box; margin-left:0; margin-right:0; padding-left:0; padding-right:0; }
.section-title { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:16px; width:100%; box-sizing:border-box; margin-left:0; margin-right:0; }
.section-title a { display:flex; align-items:center; gap:6px; color:var(--detail-orange); text-decoration:none; font-size:14px; font-weight:800; }
.section-title a svg { width:16px; }
.product-note { color:var(--detail-muted); font-size:13px; }

/* Categories */
.detail-categories { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; width:100%; box-sizing:border-box; max-width:100vw; margin-left:0; margin-right:0; padding-left:0; padding-right:0; }
.detail-categories button { padding:0 0 20px; overflow:hidden; border:1px solid var(--detail-line); border-radius:18px; color:var(--detail-brown); background:#fff; font-size:18px; font-weight:800; cursor:pointer; transition:transform .2s ease,box-shadow .2s ease; width:100%; box-sizing:border-box; }
.detail-categories button:hover { transform:translateY(-3px); box-shadow:0 8px 20px rgba(74,47,29,.1); }
.detail-categories img { width:100%; height:210px; display:block; margin-bottom:12px; object-fit:cover; }

/* Products */
.detail-products { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; width:100%; box-sizing:border-box; max-width:100vw; margin-left:0; margin-right:0; padding-left:0; padding-right:0; }
.detail-product { overflow:hidden; border:1px solid var(--detail-line); border-radius:14px; background:#fff; display:flex; flex-direction:column; width:100%; box-sizing:border-box; }
.detail-product img { width:100%; height:160px; display:block; object-fit:cover; }
.detail-product>div { padding:14px; flex:1; display:flex; flex-direction:column; }
.detail-product h3 { min-height:34px; margin:0 0 5px; color:var(--detail-brown); font-size:15px; line-height:1.4; }
.detail-product small { color:var(--detail-muted); font-size:13px; }
.detail-product-bottom { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:auto; padding-top:12px; }
.detail-product b { color:var(--detail-brown); font-size:17px; }
.detail-product button { width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:9px; color:#fff; background:var(--detail-orange); cursor:pointer; flex-shrink:0; }
.detail-product button svg { width:17px; }

/* Reviews */
.review-card { display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; margin-top:26px; padding:26px; width:100%; box-sizing:border-box; margin-left:0; margin-right:0; }
.review-card h2 { margin:0; color:var(--detail-brown); font-size:32px; }
.review-card h2 span { color:var(--detail-orange); font-size:14px; letter-spacing:1px; }
.review-card p { margin:6px 0 0; color:var(--detail-muted); font-size:14px; line-height:1.6; }
.review { padding-left:18px; border-left:1px solid var(--detail-line); }
.review b,.review span { display:block; }
.review b { color:#5c4331; font-size:15px; line-height:1.55; }
.review span { margin-top:8px; color:var(--detail-muted); font-size:13px; }

/* Store Story & How to Order */
.vendor-more { display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:30px; width:100%; box-sizing:border-box; margin-left:0; margin-right:0; }
.vendor-more article,.vendor-faq { padding:26px; border:1px solid var(--detail-line); border-radius:18px; background:#fff; width:100%; box-sizing:border-box; margin-left:0; margin-right:0; }
.vendor-more h2,.vendor-faq h2 { margin:0; color:var(--detail-brown); font-size:28px; }
.vendor-more p:not(.eyebrow),.vendor-faq details p { color:var(--detail-muted); font-size:15px; line-height:1.7; }
.vendor-more span { color:#855a3a; font-size:13px; font-weight:700; }
.vendor-more ol { margin:16px 0 0; padding:0; list-style:none; }
.vendor-more li { margin:11px 0; color:#634937; font-size:15px; font-weight:700; }
.vendor-more li b { display:inline-grid; place-items:center; width:28px; height:28px; margin-right:9px; border-radius:50%; color:#fff; background:var(--detail-orange); font-size:11px; }

/* FAQ */
.vendor-faq { margin-top:20px; margin-left:0; margin-right:0; }
.vendor-faq details { padding:15px 0; border-top:1px solid var(--detail-line); }
.vendor-faq summary { color:var(--detail-brown); font-size:17px; font-weight:800; cursor:pointer; }

/* Bulk Banner */
.bulk-banner { display:flex; align-items:center; justify-content:space-between; gap:30px; margin-top:20px; padding:30px 34px; border-radius:18px; color:#fff; background:linear-gradient(100deg,#60381e,#8d572e); width:100%; box-sizing:border-box; margin-left:0; margin-right:0; }
.bulk-banner h2 { margin:0; font-size:26px; }
.bulk-banner p:not(.eyebrow) { margin:6px 0 0; color:#f2d8c5; font-size:15px; }
.bulk-banner .eyebrow { color:#ffb879; font-size:12px; }
.bulk-banner a { display:flex; align-items:center; gap:10px; padding:14px 20px; border-radius:10px; color:var(--detail-brown); background:#fff; text-decoration:none; font-size:14px; font-weight:800; }
.bulk-banner a svg { width:17px; }

/* Responsive */
/* ================================================================
   RESPONSIVE – TABLET (≤ 850px)
   ================================================================ */
@media(max-width:850px){
  /* Layout: sidebar goes above main */
  .vendor-layout{grid-template-columns:1fr;gap:20px}
  .vendor-sidebar{grid-template-columns:1fr 1fr;order:-1;position:static;gap:14px;max-height:none;overflow:visible}

  /* Hero */
  .vendor-store-hero{min-height:280px;padding:28px;border-radius:18px}
  .vendor-store-copy{flex-direction:row;flex-wrap:wrap}
  .vendor-store-copy h1{font-size:34px}
  .vendor-quick-meta{font-size:12px}
  .hero-store-cta{display:none}

  /* About */
  .about-card h2,.section-title h2{font-size:24px}
  .highlight-row{gap:12px}

  /* Categories */
  .detail-categories{grid-template-columns:repeat(4,1fr);gap:12px}

  /* Products */
  .detail-products{grid-template-columns:repeat(3,1fr);gap:14px}
  .best-products-grid{grid-template-columns:repeat(2,1fr)}

  /* Packages */
  .packages-grid{grid-template-columns:repeat(2,1fr)}

  /* Dry Fruits */
  .df-showcase{grid-template-columns:1fr}

  /* Beverages */
  .bev-grid{grid-template-columns:repeat(2,1fr)}

  /* Reviews */
  .review-card{grid-template-columns:1fr 1fr 1fr;gap:14px}

  /* Bulk */
  .bulk-banner{padding:24px}
  .bulk-banner h2{font-size:22px}
}

/* ================================================================
   RESPONSIVE – MOBILE (≤ 560px)
   ================================================================ */
@media(max-width:560px){
  /* Page */
  .vendor-page{padding:10px 0 50px}
  .vendor-breadcrumb{font-size:11px;margin-bottom:12px;gap:4px}
  .vendor-breadcrumb svg{width:11px}

  /* Hero */
  .vendor-store-hero{min-height:180px;padding:14px;border-radius:12px}
  .vendor-logo-large{width:45px;height:45px;border-radius:8px}
  .vendor-store-copy{gap:8px;flex-direction:column;align-items:flex-start}
  .vendor-store-copy h1{font-size:20px;letter-spacing:-.5px;line-height:1.2}
  .vendor-kicker{font-size:9px}
  .vendor-quick-meta{font-size:10px;gap:6px 10px;margin-top:6px}
  .hero-store-cta{display:none}

  /* Layout: sidebar stacks */
  .vendor-layout{gap:14px;padding:0 4px}
  .vendor-sidebar{grid-template-columns:1fr;gap:10px;position:static;max-height:none;overflow:visible;padding:0}

  /* Sidebar cards */
  .side-card{padding:14px;border-radius:10px}
  .side-card h2{font-size:14px;margin-bottom:10px}
  .side-card b{font-size:12px}
  .side-card small{font-size:11px}
  .side-check span{font-size:12px}

  /* About */
  .about-card{padding:16px;border-radius:10px}
  .about-card h2,.section-title h2{font-size:18px}
  .section-title { flex-direction:column; align-items:flex-start; gap:8px; }
  .section-title a, .product-note { margin-top:4px; }
  .about-card>p:not(.eyebrow){font-size:12px}
  .eyebrow{font-size:9px}
  .highlight-row{grid-template-columns:1fr;gap:8px}
  .highlight-row span{padding:10px}
  .highlight-row b{font-size:12px}
  .highlight-row small{font-size:10px}

  /* Categories */
  .detail-categories{grid-template-columns:repeat(2,1fr);gap:8px}
  .detail-categories img{height:100px}
  .detail-categories button{font-size:11px;border-radius:10px;padding-bottom:6px}

  /* Products */
  .detail-products{grid-template-columns:repeat(2,1fr);gap:8px}
  .detail-product img{height:110px}
  .detail-product>div{padding:8px}
  .detail-product h3{font-size:11px;min-height:auto;line-height:1.3}
  .detail-product b{font-size:13px}
  .detail-product button{width:28px;height:28px}
  .detail-product button svg{width:14px}

  /* Best Products */
  .best-products-grid{grid-template-columns:1fr;gap:10px}
  .best-product-img-wrap{height:160px}
  .best-product-info{padding:14px}
  .best-product-info h3{font-size:15px}
  .best-product-info p{font-size:11px}
  .best-price{font-size:16px}
  .best-add-btn{padding:8px 14px;font-size:11px}

  /* Packages */
  .packages-grid{grid-template-columns:1fr;gap:10px}
  .package-card{border-radius:10px}
  .package-img-wrap{height:140px}
  .package-body{padding:14px}
  .package-body h3{font-size:15px}
  .package-price{font-size:16px}

  /* Dry Fruits */
  .df-showcase{grid-template-columns:1fr;gap:10px}
  .df-card{flex-direction:column;border-radius:10px}
  .df-img{width:100%;height:130px}
  .df-body{padding:12px}
  .df-body h3{font-size:14px}
  .df-pricing b{font-size:15px}

  /* Beverages */
  .bev-grid{grid-template-columns:1fr;gap:10px}
  .bev-card{border-radius:10px}
  .bev-img-wrap{height:140px}
  .bev-body{padding:12px}
  .bev-body h3{font-size:14px}
  .bev-bottom b{font-size:15px}

  /* Reviews */
  .review-card{grid-template-columns:1fr;gap:10px;padding:14px;border-radius:10px}
  .review-card h2{font-size:22px}
  .review-card p{font-size:11px}
  .review{padding:10px 0 0;border-top:1px solid var(--detail-line);border-left:0}
  .review b{font-size:12px}
  .review span{font-size:10px}

  /* Store Story & How to Order */
  .vendor-more{grid-template-columns:1fr;gap:10px}
  .vendor-more article{padding:14px;border-radius:10px}
  .vendor-more h2{font-size:16px}
  .vendor-more p:not(.eyebrow){font-size:11px}
  .vendor-more li{font-size:12px}

  /* FAQ */
  .vendor-faq{padding:14px;border-radius:10px}
  .vendor-faq h2{font-size:16px}
  .vendor-faq summary{font-size:13px}
  .vendor-faq details p{font-size:11px}

  /* Bulk Banner */
  .bulk-banner{display:block;padding:16px;border-radius:10px;text-align:center}
  .bulk-banner h2{font-size:16px}
  .bulk-banner p:not(.eyebrow){font-size:11px}
  .bulk-banner a{width:100%;margin:10px auto 0;font-size:11px;padding:10px 14px}

  /* --- Sidebar Widgets --- */
  /* Stats */
  .stat-number{font-size:18px}
  .stat-item{padding:8px 4px}
  .stat-item small{font-size:8px}

  /* Promo */
  .side-promo{padding:16px;border-radius:10px}
  .side-promo h3{font-size:14px}
  .side-promo p{font-size:10px}

  /* Quick Actions */
  .side-action-btn{padding:8px 10px;font-size:11px}

  /* Freshness */
  .side-freshness{padding:10px;border-radius:10px}
  .freshness-ring{width:40px;height:40px}
  .freshness-score{font-size:14px}
  .side-freshness b{font-size:11px}
  .side-freshness small{font-size:8px}

  /* Testimonial */
  .testimonial-slide p{font-size:10px}
  .testimonial-slide span{font-size:8px}

  /* Seasonal */
  .side-seasonal{padding:16px 12px;border-radius:10px}
  .seasonal-icon{width:34px;height:34px}
  .side-seasonal h3{font-size:14px}
  .side-seasonal p{font-size:9px}
  .seasonal-cta{padding:6px 12px;font-size:10px}

  /* Newsletter */
  .side-newsletter h2{font-size:13px}
  .side-newsletter p{font-size:9px}
  .newsletter-input{padding:7px 8px;font-size:10px}
}

/* ================================================================
   RESPONSIVE – SMALL PHONE (≤ 400px)
   ================================================================ */
@media(max-width:400px){
  .vendor-store-copy h1{font-size:18px}
  .vendor-logo-large{width:40px;height:40px;border-radius:6px}
  .vendor-quick-meta{font-size:9px;gap:4px 8px}
  .hero-store-cta{display:none}

  .about-card h2,.section-title h2{font-size:16px}
  .about-card>p:not(.eyebrow){font-size:11px}

  .detail-categories{grid-template-columns:1fr 1fr;gap:6px}
  .detail-categories img{height:90px}
  .detail-categories button{font-size:10px}

  .detail-products{grid-template-columns:1fr 1fr;gap:6px}
  .detail-product img{height:100px}
  .detail-product>div{padding:6px}
  .detail-product h3{font-size:10px}
  .detail-product b{font-size:12px}
  .detail-product button{width:26px;height:26px}

  .side-card{padding:12px;border-radius:8px}
  .side-card h2{font-size:13px}

  .stat-row{gap:8px}
  .stat-number{font-size:20px}
  .side-trust{grid-template-columns:1fr 1fr;gap:6px}
}


/* ================================================================
   BEST PRODUCTS SECTION
   ================================================================ */
.best-products-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.best-product-card {
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--detail-line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 6px 24px rgba(74,47,29,.04);
  transition:transform .25s ease,box-shadow .25s ease;
}
.best-product-card:hover {
  transform:translateY(-4px);
  box-shadow:0 14px 36px rgba(74,47,29,.1);
}
.best-product-img-wrap {
  position:relative;
  width:100%;
  height:220px;
  overflow:hidden;
  background:#fdf6f0;
}
.best-product-img-wrap img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}
.best-product-card:hover .best-product-img-wrap img {
  transform:scale(1.06);
}
.best-badge {
  position:absolute;
  top:14px;
  left:14px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 12px;
  border-radius:50px;
  background:linear-gradient(135deg,#ef6406,#d4520a);
  color:#fff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.3px;
  box-shadow:0 4px 12px rgba(239,100,6,.35);
}
.best-badge svg { width:13px; height:13px; }
.best-badge-hot {
  background:linear-gradient(135deg,#dc2626,#b91c1c);
  box-shadow:0 4px 12px rgba(220,38,38,.35);
}
.best-badge-new {
  background:linear-gradient(135deg,#7c3aed,#6d28d9);
  box-shadow:0 4px 12px rgba(124,58,237,.35);
}
.best-rating {
  position:absolute;
  top:14px;
  right:14px;
  padding:5px 10px;
  border-radius:50px;
  background:rgba(255,255,255,.95);
  color:#b45309;
  font-size:13px;
  font-weight:800;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.best-product-info {
  flex:1;
  min-width:0;
  padding:24px;
  display:flex;
  flex-direction:column;
}
.best-product-info h3 {
  margin:0 0 8px;
  color:var(--detail-brown);
  font-size:20px;
  font-weight:800;
  letter-spacing:-.3px;
}
.best-product-info p {
  margin:0 0 16px;
  color:var(--detail-muted);
  font-size:14px;
  line-height:1.65;
}
.best-product-meta {
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:18px;
}
.best-weight {
  display:flex;
  align-items:center;
  gap:5px;
  color:var(--detail-muted);
  font-size:13px;
  font-weight:600;
}
.best-weight svg { width:15px; height:15px; }
.best-price {
  font-size:22px;
  font-weight:800;
  color:var(--detail-brown);
}
.best-add-btn {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 22px;
  border:0;
  border-radius:12px;
  background:var(--detail-orange);
  color:#fff;
  font-family:inherit;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  transition:all .25s ease;
  margin-top:auto;
  align-self:flex-start;
}
.best-add-btn svg { width:16px; height:16px; }
.best-add-btn:hover {
  background:#d4520a;
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(239,100,6,.3);
}

/* ================================================================
   BEST PACKAGES SECTION
   ================================================================ */
.packages-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.package-card {
  position:relative;
  overflow:hidden;
  border-radius:20px;
  background:#fff;
  border:1px solid var(--detail-line);
  box-shadow:0 8px 28px rgba(74,47,29,.05);
  transition:transform .25s ease,box-shadow .25s ease;
}
.package-card:hover {
  transform:translateY(-5px);
  box-shadow:0 16px 40px rgba(74,47,29,.12);
}
.package-ribbon {
  position:absolute;
  top:16px;
  left:16px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 14px;
  border-radius:50px;
  background:linear-gradient(135deg,#d97706,#b45309);
  color:#fff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.3px;
  box-shadow:0 4px 14px rgba(217,119,6,.4);
}
.package-ribbon svg { width:14px; height:14px; }
.package-ribbon-silver {
  background:linear-gradient(135deg,#7c3aed,#6d28d9);
  box-shadow:0 4px 14px rgba(124,58,237,.35);
}
.package-ribbon-bronze {
  background:linear-gradient(135deg,#ef6406,#d4520a);
  box-shadow:0 4px 14px rgba(239,100,6,.35);
}
.package-img-wrap {
  position:relative;
  height:200px;
  overflow:hidden;
  background:#fdf6f0;
}
.package-img-wrap img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}
.package-card:hover .package-img-wrap img {
  transform:scale(1.06);
}
.package-gold { border-top:3px solid #d97706; }
.package-silver { border-top:3px solid #7c3aed; }
.package-bronze { border-top:3px solid #ef6406; }
.package-body {
  padding:22px;
}
.package-body h3 {
  margin:0 0 8px;
  color:var(--detail-brown);
  font-size:19px;
  font-weight:800;
}
.package-body p {
  margin:0 0 14px;
  color:var(--detail-muted);
  font-size:13px;
  line-height:1.6;
}
.package-features {
  list-style:none;
  margin:0 0 18px;
  padding:0;
}
.package-features li {
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 0;
  color:#5c4a3b;
  font-size:13px;
  font-weight:600;
}
.package-features svg { width:16px; height:16px; color:var(--detail-orange); flex:0 0 auto; }
.package-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:16px;
  border-top:1px solid var(--detail-line);
}
.package-bottom small {
  display:block;
  color:var(--detail-muted);
  font-size:11px;
}
.package-price {
  display:block;
  color:var(--detail-brown);
  font-size:22px;
  font-weight:800;
  margin-top:2px;
}
.package-cta {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:12px;
  background:var(--detail-orange);
  color:#fff;
  text-decoration:none;
  transition:all .25s ease;
}
.package-cta svg { width:18px; height:18px; }
.package-cta:hover {
  background:#d4520a;
  transform:scale(1.08);
  box-shadow:0 6px 16px rgba(239,100,6,.3);
}

/* ================================================================
   DRY FRUITS SECTION
   ================================================================ */
.df-showcase {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}
.df-card {
  display:flex;
  overflow:hidden;
  border:1px solid var(--detail-line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 6px 22px rgba(74,47,29,.04);
  transition:transform .25s ease,box-shadow .25s ease;
}
.df-card:hover {
  transform:translateY(-4px);
  box-shadow:0 14px 36px rgba(74,47,29,.1);
}
.df-img {
  flex:0 0 auto;
  width:180px;
  min-height:180px;
  overflow:hidden;
  background:#f9f3ed;
}
.df-img img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}
.df-card:hover .df-img img {
  transform:scale(1.06);
}
.df-body {
  flex:1;
  min-width:0;
  padding:20px;
  display:flex;
  flex-direction:column;
}
.df-tag {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 12px;
  border-radius:50px;
  background:#f0fdf4;
  color:#15803d;
  font-size:11px;
  font-weight:800;
  align-self:flex-start;
  margin-bottom:10px;
}
.df-tag svg { width:13px; height:13px; }
.df-tag-premium { background:#fef3c7; color:#92400e; }
.df-tag-best { background:#fdf2ec; color:#b45309; }
.df-body h3 {
  margin:0 0 6px;
  color:var(--detail-brown);
  font-size:18px;
  font-weight:800;
}
.df-body p {
  margin:0 0 auto;
  color:var(--detail-muted);
  font-size:13px;
  line-height:1.6;
}
.df-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--detail-line);
}
.df-pricing small {
  display:block;
  color:var(--detail-muted);
  font-size:11px;
}
.df-pricing b {
  display:block;
  color:var(--detail-brown);
  font-size:20px;
  font-weight:800;
  margin-top:2px;
}
.df-add {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border:2px solid var(--detail-orange);
  border-radius:12px;
  background:#fff;
  color:var(--detail-orange);
  cursor:pointer;
  transition:all .25s ease;
}
.df-add svg { width:18px; height:18px; }
.df-add:hover {
  background:var(--detail-orange);
  color:#fff;
  transform:scale(1.08);
  box-shadow:0 4px 14px rgba(239,100,6,.3);
}

/* ================================================================
   BEVERAGES SECTION
   ================================================================ */
.bev-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.bev-card {
  overflow:hidden;
  border:1px solid var(--detail-line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 6px 22px rgba(74,47,29,.04);
  transition:transform .25s ease,box-shadow .25s ease;
}
.bev-card:hover {
  transform:translateY(-4px);
  box-shadow:0 14px 36px rgba(74,47,29,.1);
}
.bev-img-wrap {
  position:relative;
  height:200px;
  overflow:hidden;
  background:linear-gradient(180deg,#fdf6f0,#f5ebe3);
}
.bev-img-wrap img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}
.bev-card:hover .bev-img-wrap img {
  transform:scale(1.06);
}
.bev-body {
  padding:20px;
}
.bev-tag {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 12px;
  border-radius:50px;
  background:#eff6ff;
  color:#1d4ed8;
  font-size:11px;
  font-weight:800;
  margin-bottom:10px;
}
.bev-tag svg { width:13px; height:13px; }
.bev-tag-hot { background:#fef2f2; color:#dc2626; }
.bev-tag-new { background:#faf5ff; color:#7c3aed; }
.bev-body h3 {
  margin:0 0 6px;
  color:var(--detail-brown);
  font-size:18px;
  font-weight:800;
}
.bev-body p {
  margin:0 0 16px;
  color:var(--detail-muted);
  font-size:13px;
  line-height:1.6;
}
.bev-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:14px;
  border-top:1px solid var(--detail-line);
}
.bev-bottom small {
  display:block;
  color:var(--detail-muted);
  font-size:11px;
}
.bev-bottom b {
  display:block;
  color:var(--detail-brown);
  font-size:20px;
  font-weight:800;
  margin-top:2px;
}
.bev-add {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 18px;
  border:0;
  border-radius:10px;
  background:var(--detail-orange);
  color:#fff;
  font-family:inherit;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  transition:all .25s ease;
}
.bev-add svg { width:15px; height:15px; }
.bev-add:hover {
  background:#d4520a;
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(239,100,6,.3);
}

/* Responsive for new sections */
@media(max-width:850px){
  .best-products-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .packages-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .bev-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .df-showcase{grid-template-columns:1fr;gap:14px}
  .detail-categories{grid-template-columns:repeat(4,1fr);gap:10px}
}

@media(max-width:560px){
  .best-products-grid{grid-template-columns:1fr;gap:10px}
  .packages-grid{grid-template-columns:1fr;gap:10px}
  .bev-grid{grid-template-columns:1fr;gap:10px}
  .df-showcase{grid-template-columns:1fr;gap:10px}
  .detail-categories{grid-template-columns:repeat(2,1fr);gap:8px}
  .df-card{flex-direction:column;border-radius:10px}
  .df-img{width:100%;height:160px;min-height:auto}
  .df-body{padding:12px}
}

@media(max-width:400px){
  .detail-categories{grid-template-columns:repeat(2,1fr);gap:6px}
}

/* ================================================================
   SIDEBAR ANIMATED WIDGETS
   ================================================================ */

/* --- Stats Card --- */
.side-stats h2 {
  display:flex;
  align-items:center;
  gap:8px;
}
.side-stats h2 svg { width:18px; height:18px; color:var(--detail-orange); }
.stat-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:10px;
}
.stat-row:last-child { margin-bottom:0; }
.stat-item {
  padding:14px 10px;
  border-radius:12px;
  background:linear-gradient(135deg,#fff8f2,#fdf3eb);
  text-align:center;
  transition:transform .2s ease;
}
.stat-item:hover {
  transform:scale(1.04);
}
.stat-number {
  font-size:26px;
  font-weight:800;
  color:var(--detail-orange);
  letter-spacing:-1px;
  line-height:1;
  margin-bottom:4px;
}
.stat-item small {
  display:block;
  color:var(--detail-muted);
  font-size:10px;
  font-weight:600;
  margin-top:0;
}

/* --- Delivery Promise Card --- */
.side-delivery {
  background:#fff;
  text-align:center;
}
.delivery-pulse-row {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:14px;
}
.pulse-dot {
  width:10px;
  height:10px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.5);
  animation:pulse-live 1.8s infinite;
}
@keyframes pulse-live {
  0% { box-shadow:0 0 0 0 rgba(34,197,94,.5); }
  70% { box-shadow:0 0 0 10px rgba(34,197,94,0); }
  100% { box-shadow:0 0 0 0 rgba(34,197,94,0); }
}
.delivery-pulse-row small {
  color:#15803d;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.delivery-icon-wrap {
  width:52px;
  height:52px;
  margin:0 auto 12px;
  border-radius:14px;
  background:linear-gradient(135deg,#ef6406,#d4520a);
  display:grid;
  place-items:center;
  color:#fff;
  animation:float-truck 3s ease-in-out infinite;
}
.delivery-icon-wrap svg { width:24px; height:24px; }
@keyframes float-truck {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-6px); }
}
.side-delivery h2 {
  font-size:16px;
  margin-bottom:6px;
}
.side-delivery p {
  color:var(--detail-muted);
  font-size:12px;
  line-height:1.5;
  margin:0 0 16px;
}
.side-delivery p b { color:var(--detail-brown); }

/* Delivery Timeline */
.delivery-timeline {
  display:flex;
  align-items:flex-start;
  gap:0;
  position:relative;
}
.delivery-timeline::before {
  content:'';
  position:absolute;
  top:6px;
  left:12px;
  right:12px;
  height:2px;
  background:#eddfd4;
  z-index:0;
}
.timeline-step {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  position:relative;
  z-index:1;
}
.tl-dot {
  width:14px;
  height:14px;
  border-radius:50%;
  background:#eddfd4;
  border:2px solid #fff;
  box-shadow:0 0 0 2px #eddfd4;
  transition:all .3s ease;
}
.timeline-step.active .tl-dot {
  background:var(--detail-orange);
  box-shadow:0 0 0 3px rgba(239,100,6,.2);
  animation:tl-pulse 2s ease-in-out infinite;
}
@keyframes tl-pulse {
  0%,100% { box-shadow:0 0 0 3px rgba(239,100,6,.2); }
  50% { box-shadow:0 0 0 6px rgba(239,100,6,.1); }
}
.timeline-step small {
  font-size:9px;
  font-weight:700;
  color:var(--detail-muted);
  text-align:center;
  margin-top:0;
}
.timeline-step.active small { color:var(--detail-orange); }

/* --- Promo Banner --- */
.side-promo {
  position:relative;
  overflow:hidden;
  padding:22px;
  border-radius:18px;
  background:linear-gradient(135deg,#5b2e0f,#8b4a22);
  color:#fff;
  text-align:center;
}
.promo-shimmer {
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
  animation:shimmer-sweep 3s ease-in-out infinite;
}
@keyframes shimmer-sweep {
  0% { left:-100%; }
  100% { left:200%; }
}
.side-promo > svg {
  width:32px;
  height:32px;
  margin-bottom:10px;
  color:#ffb879;
}
.side-promo h3 {
  margin:0 0 6px;
  font-size:17px;
  font-weight:800;
}
.side-promo p {
  margin:0 0 16px;
  font-size:13px;
  color:#f2d8c5;
  line-height:1.5;
}
.side-promo p b { color:#fff; }
.side-promo a {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:10px 20px;
  border-radius:10px;
  background:#fff;
  color:var(--detail-brown);
  text-decoration:none;
  font-size:13px;
  font-weight:800;
  transition:all .25s ease;
}
.side-promo a svg { width:14px; height:14px; }
.side-promo a:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.2);
}

/* --- Quick Actions --- */
.side-actions h2 { margin-bottom:14px; }
.side-action-btn {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:12px;
  background:#fff8f2;
  color:var(--detail-brown);
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  margin-bottom:8px;
  transition:all .25s ease;
  border:1px solid transparent;
}
.side-action-btn:last-child { margin-bottom:0; }
.side-action-btn svg { width:17px; height:17px; color:var(--detail-orange); }
.side-action-btn:hover {
  background:#fff;
  border-color:var(--detail-orange);
  transform:translateX(4px);
  box-shadow:0 4px 14px rgba(239,100,6,.1);
}

/* --- Freshness Badge --- */
.side-freshness {
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--detail-line);
  box-shadow:0 6px 20px rgba(74,47,29,.04);
}
.freshness-ring {
  position:relative;
  width:60px;
  height:60px;
  flex:0 0 auto;
}
.freshness-ring svg {
  width:100%;
  height:100%;
  transform:rotate(-90deg);
}
.ring-bg {
  fill:none;
  stroke:#eddfd4;
  stroke-width:5;
}
.ring-fill {
  fill:none;
  stroke:var(--detail-orange);
  stroke-width:5;
  stroke-linecap:round;
  stroke-dasharray:220;
  stroke-dashoffset:11;
  animation:ring-draw 2s ease-out forwards;
}
@keyframes ring-draw {
  from { stroke-dashoffset:220; }
  to { stroke-dashoffset:11; }
}
.freshness-score {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:18px;
  font-weight:800;
  color:var(--detail-orange);
}
.side-freshness b {
  display:block;
  color:var(--detail-brown);
  font-size:14px;
}
.side-freshness small {
  display:block;
  color:var(--detail-muted);
  font-size:11px;
  margin-top:3px;
}

/* ================================================================
   TESTIMONIAL ROTATOR
   ================================================================ */
.side-testimonial h2 {
  display:flex;
  align-items:center;
  gap:8px;
}
.side-testimonial h2 svg { width:18px; height:18px; color:var(--detail-orange); }
.testimonial-slider {
  position:relative;
  min-height:90px;
  margin-bottom:12px;
}
.testimonial-slide {
  position:absolute;
  top:0; left:0; right:0;
  opacity:0;
  transform:translateY(8px);
  transition:all .5s ease;
  pointer-events:none;
}
.testimonial-slide.active {
  position:relative;
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.testimonial-slide p {
  margin:0 0 8px;
  color:#5c4a3b;
  font-size:13px;
  font-style:italic;
  line-height:1.6;
}
.testimonial-slide span {
  font-size:11px;
  color:var(--detail-muted);
}
.testimonial-slide span b { color:var(--detail-brown); }
.testimonial-dots {
  display:flex;
  justify-content:center;
  gap:6px;
}
.t-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#eddfd4;
  cursor:pointer;
  transition:all .3s ease;
}
.t-dot.active {
  background:var(--detail-orange);
  width:20px;
  border-radius:4px;
}

/* ================================================================
   SEASONAL FESTIVE BANNER
   ================================================================ */
.side-seasonal {
  position:relative;
  overflow:hidden;
  padding:26px 20px;
  border-radius:18px;
  background:linear-gradient(145deg,#ef6406,#c24504,#8b3103);
  color:#fff;
  text-align:center;
}
.seasonal-particles {
  position:absolute;
  inset:0;
  pointer-events:none;
}
.particle {
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,.3);
  animation:float-particle 4s ease-in-out infinite;
}
.particle:nth-child(1) { top:15%; left:10%; animation-delay:0s; width:5px; height:5px; }
.particle:nth-child(2) { top:25%; right:15%; animation-delay:0.8s; width:4px; height:4px; }
.particle:nth-child(3) { top:55%; left:20%; animation-delay:1.5s; width:7px; height:7px; }
.particle:nth-child(4) { top:70%; right:25%; animation-delay:2.2s; width:5px; height:5px; }
.particle:nth-child(5) { top:40%; left:70%; animation-delay:3s; width:4px; height:4px; }
@keyframes float-particle {
  0%,100% { transform:translateY(0) scale(1); opacity:.3; }
  50% { transform:translateY(-15px) scale(1.5); opacity:.7; }
}
.seasonal-icon {
  width:48px;
  height:48px;
  margin:0 auto 14px;
  border-radius:50%;
  background:rgba(255,255,255,.15);
  display:grid;
  place-items:center;
  animation:seasonal-glow 2.5s ease-in-out infinite;
}
.seasonal-icon svg { width:24px; height:24px; color:#ffd59e; }
@keyframes seasonal-glow {
  0%,100% { box-shadow:0 0 0 0 rgba(255,213,158,.3); }
  50% { box-shadow:0 0 0 12px rgba(255,213,158,0); }
}
.side-seasonal h3 {
  margin:0 0 6px;
  font-size:18px;
  font-weight:800;
}
.side-seasonal p {
  margin:0 0 18px;
  color:#ffd8b8;
  font-size:12px;
  line-height:1.5;
}
.seasonal-cta {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:10px 20px;
  border-radius:10px;
  background:#fff;
  color:var(--detail-brown);
  text-decoration:none;
  font-size:13px;
  font-weight:800;
  transition:all .25s ease;
}
.seasonal-cta svg { width:14px; height:14px; }
.seasonal-cta:hover {
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 8px 20px rgba(0,0,0,.2);
}

/* ================================================================
   STORE HOURS
   ================================================================ */
.side-hours h2 {
  display:flex;
  align-items:center;
  gap:8px;
}
.side-hours h2 svg { width:18px; height:18px; color:var(--detail-orange); }
.hours-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid var(--detail-line);
}
.hours-row span {
  color:var(--detail-muted);
  font-size:12px;
}
.hours-row b {
  color:var(--detail-brown);
  font-size:12px;
}
.hours-status {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  padding:10px 14px;
  border-radius:10px;
  background:#f0fdf4;
}
.hours-live-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#22c55e;
  animation:pulse-live 1.8s infinite;
  flex:0 0 auto;
}
.hours-status small {
  color:#15803d;
  font-size:11px;
  font-weight:700;
  margin-top:0;
}

/* ================================================================
   TRUST BADGES
   ================================================================ */
.side-trust {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:18px;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--detail-line);
  box-shadow:0 6px 20px rgba(74,47,29,.04);
}
.trust-badge {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:14px 8px;
  border-radius:12px;
  background:#fff8f2;
  transition:transform .2s ease;
}
.trust-badge:hover {
  transform:translateY(-3px);
}
.trust-icon {
  width:38px;
  height:38px;
  border-radius:10px;
  background:linear-gradient(135deg,var(--detail-orange),#d4520a);
  display:grid;
  place-items:center;
  color:#fff;
  box-shadow:0 4px 10px rgba(239,100,6,.2);
}
.trust-icon svg { width:18px; height:18px; }
.trust-badge small {
  color:var(--detail-brown);
  font-size:11px;
  font-weight:700;
  text-align:center;
}

/* ================================================================
   NEWSLETTER
   ================================================================ */
.side-newsletter {
  text-align:center;
}
.newsletter-icon-wrap {
  width:48px;
  height:48px;
  margin:0 auto 12px;
  border-radius:50%;
  background:linear-gradient(135deg,#fff8f2,#fdf3eb);
  display:grid;
  place-items:center;
  color:var(--detail-orange);
  animation:bell-ring 3s ease-in-out infinite;
}
.newsletter-icon-wrap svg { width:22px; height:22px; }
@keyframes bell-ring {
  0%,80%,100% { transform:rotate(0); }
  85% { transform:rotate(8deg); }
  90% { transform:rotate(-8deg); }
  95% { transform:rotate(5deg); }
}
.side-newsletter h2 {
  font-size:16px;
  margin-bottom:6px;
}
.side-newsletter p {
  color:var(--detail-muted);
  font-size:12px;
  line-height:1.5;
  margin:0 0 14px;
}
.newsletter-input-row {
  display:flex;
  gap:0;
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--detail-line);
}
.newsletter-input {
  flex:1;
  min-width:0;
  padding:10px 12px;
  border:0;
  background:#fafaf9;
  color:var(--detail-brown);
  font-family:inherit;
  font-size:12px;
  outline:none;
}
.newsletter-input::placeholder { color:#bfb3a8; }
.newsletter-input:focus { background:#fff; }
.newsletter-btn {
  padding:0 14px;
  border:0;
  background:var(--detail-orange);
  color:#fff;
  cursor:pointer;
  transition:background .2s ease;
}
.newsletter-btn svg { width:15px; height:15px; }
.newsletter-btn:hover { background:#d4520a; }