/** Shopify CDN: Minification failed

Line 3112:2 All "@import" rules must come first

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:about-us-page (INDEX:1) */
.about-us {
    position: relative;
    padding: 5rem 1.5rem;
  }

  .about-us__inner {
    max-width: 760px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  .about-us__deco {
    position: absolute;
    top: 0;
    width: 185px;
    pointer-events: none;
    color: #C8440F;
    opacity: 0.20;
  }

  .about-us__deco--left { left: 0; }
  .about-us__deco--right { right: 0; }

  .about-us__deco svg {
    display: block;
    width: 100%;
    height: auto;
  }

  @media (max-width: 1160px) {
    .about-us__deco { display: none; }
  }

  .about-us__heading {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: #1C0D05;
    margin-bottom: 1.5rem;
    line-height: 1.1;
  }

  .about-us__body p {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: #4a3728;
    margin-bottom: 1rem;
  }
/* END_SECTION:about-us-page */

/* START_SECTION:brand-story (INDEX:4) */
.brand-story {
    padding: var(--space-24) var(--page-margin);
    background: linear-gradient(145deg, #0A2E1C 0%, #0F3A22 45%, #0E3020 75%, #081E14 100%);
    position: relative;
    overflow: clip;
  }

  /* Kerala dot pattern */
  .bs-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(245,197,24,0.12) 1.5px, transparent 1.5px);
    background-size: 32px 32px;
    pointer-events: none;
  }

  /* Leaf decoration */
  .bs-leaf {
    position: absolute;
    pointer-events: none;
  }

  .bs-leaf--tr {
    top: -60px;
    right: -40px;
    width: 260px;
    height: auto;
    transform: rotate(12deg);
  }

  /* Nalukettu roof */
  .bs-roof {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 420px;
    height: auto;
    pointer-events: none;
  }

  /* Coconut palm */
  .bs-palm {
    position: absolute;
    bottom: -20px;
    right: 5%;
    width: 200px;
    height: auto;
    pointer-events: none;
    opacity: 0.85;
  }

  /* Layout */
  .bs-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
    max-width: min(calc(var(--page-width) - var(--page-margin) * 2), calc(100% - var(--page-margin) * 2));
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  /* Text side */
  .bs-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .bs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #F5C518;
    text-transform: uppercase;
    background: rgba(245,197,24,0.12);
    padding: 0.35rem 1rem;
    border-radius: var(--radius-full);
    width: fit-content;
  }

  .bs-eyebrow-line {
    display: block;
    width: 1.5rem;
    height: 2.5px;
    background: #F5C518;
    border-radius: 9999px;
    flex-shrink: 0;
  }

  .bs-heading {
    font-size: clamp(2rem, 3.8vw, 3rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #fff;
    margin: 0;
  }

  .bs-body {
    font-size: 1.05rem;
    line-height: 1.80;
    color: rgba(255,255,255,0.75);
  }

  .bs-body p + p {
    margin-top: var(--space-4);
  }

  /* Feature list */
  .bs-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .bs-feature {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.10);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    transition: background var(--transition-fast);
  }

  .bs-feature:hover {
    background: rgba(255,255,255,0.10);
  }

  .bs-feature__icon-wrap {
    font-size: 1.5rem;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245,197,24,0.15);
    border-radius: var(--radius-md);
    border: 1px solid rgba(245,197,24,0.25);
  }

  .bs-feature__content {
    flex: 1;
  }

  .bs-feature__title {
    display: block;
    font-size: 0.9375rem;
    font-weight: 800;
    color: #F5C518;
    margin-bottom: var(--space-1);
  }

  .bs-feature__desc {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.55;
    margin: 0;
  }

  /* CTA button */
  .bs-cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.9rem 2rem;
    border-radius: var(--radius-full);
    background: #F5C518;
    color: #1C0D05;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 800;
    text-decoration: none;
    transition: all var(--transition-base);
    box-shadow: 0 6px 24px rgba(245,197,24,0.40);
  }

  .bs-cta:hover {
    background: #FFD700;
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(245,197,24,0.50);
  }

  /* Visual side */
  .bs-visual {
    position: relative;
  }

  .bs-image-stack {
    position: relative;
  }

  .bs-image-frame {
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 32px 90px rgba(0,0,0,0.45);
    border: 3px solid rgba(245,197,24,0.25);
  }

  .bs-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1;
    display: block;
  }

  /* Floating stat cards */
  .bs-stat-card {
    position: absolute;
    background: rgba(10,46,28,0.90);
    backdrop-filter: blur(12px);
    border: 1.5px solid rgba(245,197,24,0.35);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.35);
  }

  .bs-stat-card--1 {
    bottom: -16px;
    left: -20px;
  }

  .bs-stat-card--2 {
    top: -16px;
    right: -16px;
  }

  .bs-stat-card__emoji {
    font-size: 1.4rem;
  }

  .bs-stat-card__val {
    display: block;
    font-size: 1rem;
    font-weight: 900;
    color: #F5C518;
    line-height: 1;
  }

  .bs-stat-card__label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
  }

  /* Responsive */
  @media (max-width: 900px) {
    .bs-inner {
      grid-template-columns: 1fr;
      gap: var(--space-10);
    }

    .bs-visual {
      order: -1;
      max-width: 460px;
      margin: 0 auto;
    }

    .bs-cta {
      align-self: stretch;
      justify-content: center;
    }

    .bs-palm {
      width: 140px;
      right: 2%;
    }

    .bs-roof {
      width: 300px;
      top: -20px;
    }
  }
/* END_SECTION:brand-story */

/* START_SECTION:cart (INDEX:5) */
.cart-page {
    padding: var(--space-10) 0 var(--space-20);
    max-width: min(calc(var(--page-width) - var(--page-margin) * 2), calc(100% - var(--page-margin) * 2));
    margin: 0 auto;
  }

  .cart-page__header {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    margin-bottom: var(--space-10);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border-light);
  }

  .cart-page__title { font-size: clamp(1.5rem, 3vw, 2.25rem); }

  .cart-page__count {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
  }

  .cart-form__layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-10);
    align-items: start;
  }

  /* Cart items */
  .cart-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .cart-item {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: var(--space-5);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border-light);
  }

  .cart-item__image-wrap {
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--color-bg-alt);
  }

  .cart-item__image { width: 100%; height: 100%; object-fit: cover; }

  .cart-item__image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-bg-alt));
  }

  .cart-item__details { display: flex; flex-direction: column; gap: var(--space-2); }

  .cart-item__title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .cart-item__title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
  }

  .cart-item__title a {
    color: var(--color-foreground);
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  .cart-item__title a:hover { color: var(--color-primary); }

  .cart-item__price-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    white-space: nowrap;
  }

  .cart-item__price { font-size: 1rem; font-weight: 700; color: var(--color-primary); white-space: nowrap; }

  .cart-item__mrp {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-decoration: line-through;
  }

  .cart-item__discount {
    font-size: 0.75rem;
    font-weight: 600;
    color: #2e7d32;
  }

  .cart-item__unit-mrp {
    text-decoration: line-through;
    margin-left: 4px;
  }

  .cart-item__variant, .cart-item__unit-price {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
  }

  .cart-item__actions {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin-top: var(--space-2);
  }

  .cart-item__qty {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    width: fit-content;
  }

  .cart-item__qty-btn {
    width: 2rem;
    height: 2rem;
    border: none;
    background: var(--color-bg-alt);
    cursor: pointer;
    font-size: 1.125rem;
    font-family: inherit;
    color: var(--color-foreground);
    transition: background-color var(--transition-fast);
  }

  .cart-item__qty-btn:hover { background-color: var(--color-border-light); }

  .cart-item__qty-input {
    width: 2.5rem;
    text-align: center;
    border: none;
    border-left: 1.5px solid var(--color-border);
    border-right: 1.5px solid var(--color-border);
    border-radius: 0;
    height: 2rem;
    font-size: 0.875rem;
    font-weight: 600;
    background: var(--color-surface);
    -moz-appearance: textfield;
  }

  .cart-item__qty-input::-webkit-outer-spin-button,
  .cart-item__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }

  .cart-item__remove {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    text-decoration: underline;
    transition: color var(--transition-fast);
  }

  .cart-item__remove:hover { color: #c62828; }

  /* Cart summary */
  .cart-summary__inner {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    position: sticky;
    top: calc(4.5rem + var(--space-6));
  }

  .cart-summary__title { font-size: 1.125rem; font-weight: 700; }

  .cart-summary__line {
    display: flex;
    justify-content: space-between;
    font-size: 0.9375rem;
    font-weight: 500;
  }

  .cart-summary__line--discount {
    color: #2e7d32;
    font-weight: 600;
  }

  .cart-summary__line--total {
    font-weight: 700;
    font-size: 1.0625rem;
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border-light);
  }

  .cart-summary__shipping-note {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border-light);
  }

  .cart-summary__free-ship {
    font-size: 0.875rem;
    color: var(--color-secondary);
    background-color: #E8F5E9;
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
  }

  .cart-summary__ship-progress {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .cart-summary__progress-bar {
    height: 4px;
    background-color: var(--color-border);
    border-radius: var(--radius-full);
    overflow: hidden;
  }

  .cart-summary__progress-fill {
    height: 100%;
    background-color: var(--color-primary);
    border-radius: var(--radius-full);
    transition: width var(--transition-slow);
    min-width: 4px;
  }

  .cart-summary__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .cart-summary__update-btn,
  .cart-summary__checkout-btn { width: 100%; justify-content: center; }

  .cart-summary__continue {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    text-align: center;
    transition: color var(--transition-fast);
    text-decoration: none;
  }

  .cart-summary__continue:hover { color: var(--color-primary); }

  /* Empty cart */
  .cart-empty {
    text-align: center;
    padding: var(--space-24) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
  }

  .cart-empty__icon { font-size: 4rem; }
  .cart-empty h2 { font-size: 1.5rem; }
  .cart-empty p { color: var(--color-text-muted); font-size: 1rem; }

  @media (max-width: 768px) {
    .cart-form__layout { grid-template-columns: 1fr; }
    .cart-summary__inner { position: static; }
    .cart-item { grid-template-columns: 80px 1fr; }
  }
/* END_SECTION:cart */

/* START_SECTION:category-cards (INDEX:6) */
.category-cards {
    padding: var(--space-20) var(--page-margin);
    background: #FFF9F0;
    position: relative;
    overflow: clip;
  }

  .cc-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(200,68,15,0.08) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    pointer-events: none;
  }

  .cc-leaf {
    position: absolute;
    pointer-events: none;
  }

  .cc-leaf--tr {
    top: -20px;
    right: -30px;
    width: 200px;
    height: auto;
    transform: rotate(8deg);
  }

  .cc-inner {
    max-width: min(calc(var(--page-width) - var(--page-margin) * 2), calc(100% - var(--page-margin) * 2));
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  .cc-header {
    text-align: center;
    margin-bottom: var(--space-12);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
  }

  .cc-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: rgba(200,68,15,0.08);
    padding: 0.3rem 1rem;
    border-radius: var(--radius-full);
  }

  .cc-heading {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--color-foreground);
    margin: 0;
  }

  .cc-divider {
    display: block;
    width: 3.5rem;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    border-radius: var(--radius-full);
  }

  /* Grid */
  .cc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(1rem, 2.5vw, var(--space-6));
  }

  /* Card */
  .cc-card {
    position: relative;
    border-radius: clamp(16px, 3vw, 28px);
    overflow: hidden;
    display: block;
    text-decoration: none;
    aspect-ratio: 3 / 4;
    cursor: pointer;
    box-shadow: 0 12px 40px rgba(28,13,5,0.16);
    transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease;
  }

  .cc-card:hover {
    transform: translateY(-10px) scale(1.01);
    box-shadow: 0 28px 70px rgba(28,13,5,0.24);
  }

  /* Background image */
  .cc-card__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .cc-card__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
  }

  .cc-card:hover .cc-card__bg-img {
    transform: scale(1.08);
  }


  /* Gradient overlay */
  .cc-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    transition: opacity 0.35s ease;
  }

  .cc-card--banana .cc-card__overlay {
    background: linear-gradient(
      to top,
      rgba(200,68,15,0.92) 0%,
      rgba(232,90,14,0.70) 35%,
      rgba(245,168,32,0.45) 60%,
      rgba(245,197,24,0.15) 100%
    );
  }

  .cc-card--tapioca .cc-card__overlay {
    background: linear-gradient(
      to top,
      rgba(10,42,24,0.94) 0%,
      rgba(27,94,53,0.75) 35%,
      rgba(40,130,75,0.45) 60%,
      rgba(60,160,90,0.15) 100%
    );
  }



  /* Count badge */
  .cc-card__count-badge {
    position: absolute;
    top: 20px;
    left: 22px;
    z-index: 3;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-full);
  }

  .cc-card--banana .cc-card__count-badge {
    background: #F5C518;
    color: #1C0D05;
  }

  .cc-card--tapioca .cc-card__count-badge {
    background: #4CAF50;
    color: #fff;
  }

  /* Text content */
  .cc-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: clamp(1rem, 3vw, var(--space-6)) clamp(1rem, 3vw, var(--space-6)) clamp(1.25rem, 4vw, var(--space-8));
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .cc-card__title {
    font-size: clamp(1.2rem, 3.5vw, 2.2rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.05;
    margin: 0;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 12px rgba(0,0,0,0.25);
  }

  .cc-card__desc {
    font-size: clamp(0.78rem, 1.8vw, 0.9rem);
    color: rgba(255,255,255,0.80);
    line-height: 1.5;
    margin: var(--space-1) 0 0;
    max-width: 36ch;
  }

  .cc-card__cta {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
    font-size: clamp(0.8rem, 1.8vw, 0.9375rem);
    font-weight: 800;
    color: #fff;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(8px);
    border: 1.5px solid rgba(255,255,255,0.45);
    padding: clamp(0.4rem, 1.2vw, 0.6rem) clamp(0.9rem, 2vw, 1.4rem);
    border-radius: var(--radius-full);
    width: fit-content;
    transition: all 0.25s ease;
  }

  .cc-card--banana .cc-card__cta:hover,
  .cc-card--banana:hover .cc-card__cta {
    background: #F5C518;
    border-color: #F5C518;
    color: #1C0D05;
    gap: var(--space-3);
  }

  .cc-card--tapioca .cc-card__cta:hover,
  .cc-card--tapioca:hover .cc-card__cta {
    background: #4CAF50;
    border-color: #4CAF50;
    color: #fff;
    gap: var(--space-3);
  }

  @media (max-width: 600px) {
    .category-cards {
      padding: var(--space-10) var(--space-4);
    }

    .cc-card {
      aspect-ratio: 4 / 3;
    }

    .cc-card:hover {
      transform: none;
      box-shadow: 0 12px 40px rgba(28,13,5,0.16);
    }
  }
/* END_SECTION:category-cards */

/* START_SECTION:collection (INDEX:7) */
.collection-page {
    padding: var(--space-10) 0 var(--space-20);
    max-width: min(calc(var(--page-width) - var(--page-margin) * 2), calc(100% - var(--page-margin) * 2));
    margin: 0 auto;
  }

  .collection-page__header {
    padding-bottom: var(--space-10);
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: var(--space-10);
  }

  .collection-page__title {
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 800;
    margin-bottom: var(--space-4);
  }

  .collection-page__desc {
    font-size: 1.0625rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    max-width: 60ch;
    margin-bottom: var(--space-4);
  }

  .collection-page__meta {
    font-size: 0.875rem;
    color: var(--color-text-muted);
  }

  .product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .product-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-3) 0 0;
  }

  .product-card__title {
    font-size: 1.0rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    flex: 1;
  }

  .product-card__footer {
    margin-top: auto;
    padding-top: var(--space-3);
  }

  .product-card__title a {
    color: var(--color-foreground);
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  .product-card__title a:hover {
    color: var(--color-primary);
  }

  .collection-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-6);
  }

  .collection-pagination {
    margin-top: var(--space-12);
    display: flex;
    justify-content: center;
    gap: var(--space-2);
  }

  .collection-pagination a,
  .collection-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    border: 1.5px solid var(--color-border);
    padding: 0 var(--space-3);
    transition: all var(--transition-fast);
    text-decoration: none;
    color: var(--color-foreground);
  }

  .collection-pagination a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }

  .collection-pagination .current {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
  }

  @media (max-width: 640px) {
    .collection-products-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-4);
    }
  }

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

  .qty-stepper {
    display: inline-flex;
    align-items: center;
    background: #F5A623;
    border-radius: var(--radius-full);
    overflow: hidden;
    height: 36px;
  }
  .qty-stepper__btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: #1A3D28;
    font-size: 1.2rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    font-family: inherit;
  }
  .qty-stepper__btn:hover { background: rgba(0,0,0,0.10); }
  .qty-stepper__btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .qty-stepper__count {
    min-width: 28px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 800;
    color: #1A3D28;
  }
/* END_SECTION:collection */

/* START_SECTION:collections (INDEX:8) */
.collections {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--collection-card-size), 100%), 1fr));
    gap: var(--grid-gap);
  }
  .collections--compact {
    --collection-card-size: 160px;
  }
  .collections--full {
    --collection-card-size: 280px;
  }
  .collection-card {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
/* END_SECTION:collections */

/* START_SECTION:custom-section (INDEX:9) */
.custom-section {
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  .custom-section__background {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
  }
  .custom-section__background img {
    position: absolute;
    width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .custom-section__content {
    display: grid;
    grid-template-columns: var(--content-grid);
  }
  .custom-section__content > * {
    grid-column: 2;
  }
/* END_SECTION:custom-section */

/* START_SECTION:featured-products (INDEX:10) */
.featured-products { padding: var(--space-20) var(--page-margin); background: #FFFFFF; position: relative; overflow: hidden; }
  .fp-leaf { position: absolute; pointer-events: none; }
  .fp-leaf--left { bottom: -40px; left: -25px; width: 160px; height: auto; transform: rotate(18deg) scaleX(-1); }
  .fp-leaf--right { top: -30px; right: -20px; width: 130px; height: auto; transform: rotate(-12deg); }
  .fp-header, .fp-tabs, .fp-grid, .fp-cta-wrap { max-width: min(calc(var(--page-width) - var(--page-margin) * 2), calc(100% - var(--page-margin) * 2)); margin-left: auto; margin-right: auto; }
  .fp-header { text-align: center; margin-bottom: var(--space-10); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
  .fp-eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-primary); background: rgba(200,68,15,0.08); padding: 0.3rem 1rem; border-radius: var(--radius-full); }
  .fp-header__title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; letter-spacing: -0.03em; color: var(--color-foreground); margin: 0; }
  .fp-header__desc { font-size: 1.0625rem; color: var(--color-text-muted); max-width: 54ch; line-height: 1.7; margin: 0; }
  .fp-divider { display: block; width: 3.5rem; height: 4px; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); border-radius: var(--radius-full); }
  .fp-tabs { display: flex; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-10); flex-wrap: wrap; }
  .fp-tab { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.65rem 1.5rem; border-radius: var(--radius-full); border: 2px solid var(--color-border); background: transparent; font-family: inherit; font-size: 0.875rem; font-weight: 700; color: var(--color-text-muted); cursor: pointer; transition: all var(--transition-base); }
  .fp-tab:hover { border-color: var(--color-primary); color: var(--color-primary); background: rgba(200,68,15,0.05); }
  .fp-tab.is-active { background: linear-gradient(135deg, var(--color-primary), #E05C18); border-color: transparent; color: #fff; box-shadow: 0 6px 20px rgba(200,68,15,0.35); transform: translateY(-1px); }
  .fp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-6); }
  .pcard { background: #FFF8F0; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s ease; box-shadow: 0 2px 12px rgba(28,13,5,0.08); border: 1.5px solid rgba(229,202,165,0.5); }
  .pcard:hover { transform: translateY(-10px) scale(1.01); box-shadow: 0 20px 50px rgba(28,13,5,0.16); }
  .pcard__top { position: relative; }
  .pcard--banana .pcard__top { background: linear-gradient(160deg, #FFFDE7, #FFF8C0, #FFF3A0); }
  .pcard--tapioca .pcard__top { background: linear-gradient(160deg, #E8F5E9, #C8E6C9, #A8D8AE); }
  .pcard__image-link { display: block; text-decoration: none; }
  .pcard__image-wrap { position: relative; aspect-ratio: 1; overflow: hidden; background: #FFF8F0; }
  .pcard__image { width: 100%; height: 100%; object-fit: contain; transition: transform 0.4s ease; padding: var(--space-4); position: relative; z-index: 1; }
  .pcard:hover .pcard__image { transform: scale(1.10) translateY(-4px); }
  .pcard__image-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover)); }
  .pcard__type-badge { position: absolute; bottom: var(--space-2); left: var(--space-3); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; padding: 0.22rem 0.7rem; border-radius: var(--radius-full); z-index: 2; }
  .pcard__type-badge--banana { background: #F5C518; color: #1C0D05; }
  .pcard__type-badge--tapioca { background: #1B5E35; color: #fff; }
  .pcard__body { padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
  .pcard__meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: nowrap; }
  .pcard__weight { font-size: 0.75rem; color: var(--color-text-muted); font-weight: 600; background: #F5F0E8; padding: 0.15rem 0.55rem; border-radius: var(--radius-sm); flex-shrink: 0; }
  .pcard__stock { font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
  .pcard__stock--in { color: #1B5E35; }
  .pcard__stock--out { color: #9E2A2B; }
  .pcard__title { font-size: 1.0rem; font-weight: 700; line-height: 1.3; margin: 0; white-space: normal; }
  .pcard__title a { color: var(--color-foreground); text-decoration: none; transition: color var(--transition-fast); }
  .pcard__title a:hover { color: var(--color-primary); }
  .pcard__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: auto; padding-top: var(--space-3); border-top: 1.5px solid rgba(229,202,165,0.4); flex-wrap: nowrap; }
  .pcard__price-wrap { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; flex-shrink: 0; }
  .pcard__price { font-size: 1.3rem; font-weight: 900; color: var(--color-primary); letter-spacing: -0.02em; flex-shrink: 0; }
  .pcard__price--sale { font-size: 1.2rem; }
  .pcard__mrp { font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); text-decoration: line-through; flex-shrink: 0; }
  .pcard__discount-badge { font-size: 0.7rem; font-weight: 800; color: #1B5E35; background: rgba(27,94,53,0.12); padding: 0.15rem 0.45rem; border-radius: var(--radius-sm); flex-shrink: 0; }
  .pcard__atc { display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; padding: 0.55rem 0.75rem; flex-shrink: 0; white-space: nowrap; background: #F5A623; color: #1A3D28; border: none; border-radius: var(--radius-full); font-family: inherit; font-weight: 800; cursor: pointer; text-decoration: none; transition: all var(--transition-fast); letter-spacing: 0.01em; }
  .pcard__atc:hover { background: #FFD700; color: #1A3D28; transform: scale(1.05); box-shadow: 0 6px 18px rgba(245,166,35,0.45); }
  .pcard__atc:disabled { background: #ccc; cursor: not-allowed; }
  .pcard__form { display: contents; }
  .fp-cta-wrap { text-align: center; margin-top: var(--space-14); }
  .fp-cta { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 1rem; padding: 1rem 2.25rem; border-radius: var(--radius-full); background: transparent; border: 2.5px solid var(--color-primary); color: var(--color-primary); font-family: inherit; font-weight: 800; cursor: pointer; text-decoration: none; transition: all var(--transition-base); }
  .fp-cta:hover { background: var(--color-primary); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(200,68,15,0.30); }

  @media (max-width: 640px) {
    .fp-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
    .pcard__body { padding: var(--space-3); }
    .pcard__footer { flex-direction: column; align-items: stretch; gap: var(--space-2); }
    .pcard__price { font-size: 1.1rem; }
    .pcard__atc { width: 100%; font-size: 0.8rem; padding: 0.6rem 0.5rem; justify-content: center; }
    .qty-stepper { width: 100%; justify-content: center; }
  }

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

  .qty-stepper {
    display: inline-flex;
    align-items: center;
    background: #F5A623;
    border-radius: var(--radius-full);
    overflow: hidden;
    height: 36px;
  }
  .qty-stepper__btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: #1A3D28;
    font-size: 1.2rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    font-family: inherit;
  }
  .qty-stepper__btn:hover { background: rgba(0,0,0,0.10); }
  .qty-stepper__btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .qty-stepper__count {
    min-width: 28px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 800;
    color: #1A3D28;
  }
/* END_SECTION:featured-products */

/* START_SECTION:footer (INDEX:11) */
/* Wave separator */
  .sf-wave {
    display: block;
    line-height: 0;
    background: var(--color-background);
  }

  .sf-wave svg {
    display: block;
    width: 100%;
    height: 60px;
  }

  .site-footer {
    background: linear-gradient(170deg, #1B5E35 0%, #134828 50%, #0A2E1C 100%);
    color: rgba(255, 255, 255, 0.82);
    margin-top: 0;
    position: relative;
    overflow: clip;
  }

  /* Kerala dot pattern */
  .sf-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(245,197,24,0.10) 1.5px, transparent 1.5px);
    background-size: 28px 28px;
    pointer-events: none;
  }

  /* Palm tree row */
  .sf-palms {
    position: absolute;
    top: -60px;
    left: 0;
    width: 100%;
    height: auto;
    pointer-events: none;
  }

  /* Leaf decorations */
  .sf-leaf {
    position: absolute;
    pointer-events: none;
  }

  .sf-leaf--br {
    bottom: -50px;
    right: -25px;
    width: 220px;
    height: auto;
    transform: rotate(-12deg) scaleX(-1);
  }

  .sf-leaf--tl {
    top: -20px;
    left: -20px;
    width: 160px;
    height: auto;
    transform: rotate(20deg);
  }

  /* Main content grid */
  .sf-inner {
    display: grid;
    grid-template-columns: 1.6fr 2fr 1.5fr;
    gap: var(--space-12);
    padding: var(--space-16) var(--page-margin);
    max-width: var(--page-width);
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  /* Brand column */
  .sf-brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .sf-logo {
    display: inline-block;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    color: #F5C518;
    text-decoration: none;
    line-height: 1;
    text-shadow: 0 2px 16px rgba(245,197,24,0.40);
  }

  .sf-tagline {
    font-size: 0.9rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.58);
    max-width: 28ch;
    margin: 0;
  }

  .sf-chips-tags {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .sf-chip {
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(255,255,255,0.70);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  /* Social links */
  .sf-social {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-2);
  }

  .sf-social__link {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--radius-full);
    border: 1.5px solid rgba(255,255,255,0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.70);
    text-decoration: none;
    transition: all var(--transition-fast);
  }

  .sf-social__link:hover {
    background: #F5C518;
    border-color: #F5C518;
    color: #1C0D05;
    transform: scale(1.12);
  }

  /* Link columns */
  .sf-links {
    display: flex;
    gap: var(--space-10);
  }

  .sf-col {
    flex: 1;
  }

  .sf-col__heading {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #F5C518;
    margin: 0 0 var(--space-5);
  }

  .sf-col__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .sf-col__link {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.68);
    text-decoration: none;
    transition: color var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  .sf-col__link:hover {
    color: #F5C518;
    padding-left: 4px;
  }

  /* Newsletter */
  .sf-newsletter {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .sf-newsletter__text {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.58);
    line-height: 1.6;
    margin: 0;
  }

  .sf-newsletter__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .sf-newsletter__row {
    display: flex;
    gap: var(--space-2);
  }

  .sf-newsletter__input {
    flex: 1;
    padding: 0.7rem var(--space-4);
    border-radius: var(--radius-full);
    border: 1.5px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.08);
    color: #fff;
    font-size: 0.875rem;
    outline: none;
    transition: border-color var(--transition-fast), background var(--transition-fast);
    min-width: 0;
  }

  .sf-newsletter__input::placeholder {
    color: rgba(255,255,255,0.35);
  }

  .sf-newsletter__input:focus {
    border-color: #F5C518;
    background: rgba(255,255,255,0.12);
  }

  .sf-newsletter__btn {
    padding: 0.7rem 1.3rem;
    border-radius: var(--radius-full);
    border: none;
    background: #F5C518;
    color: #1C0D05;
    font-size: 0.875rem;
    font-weight: 800;
    cursor: pointer;
    flex-shrink: 0;
    font-family: inherit;
    transition: all var(--transition-fast);
  }

  .sf-newsletter__btn:hover {
    background: #FFD700;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245,197,24,0.45);
  }

  .sf-newsletter__error {
    color: #FF8A80;
    font-size: 0.8125rem;
    margin: 0;
  }

  .sf-newsletter__success {
    color: #B9F6CA;
    font-size: 0.875rem;
    font-weight: 700;
    margin: 0;
  }

  /* Policy bar */
  .sf-policy-bar {
    border-top: 1px solid rgba(255,255,255,0.08);
    position: relative;
    z-index: 1;
    padding: var(--space-4) var(--page-margin);
  }

  .sf-policy-bar__inner {
    max-width: var(--page-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
  }

  .sf-policy-bar__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
  }

  .sf-policy-bar__link {
    font-size: 0.775rem;
    color: rgba(255,255,255,0.42);
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  .sf-policy-bar__link:hover {
    color: #F5C518;
  }

  .sf-policy-bar__sep {
    font-size: 0.775rem;
    color: rgba(255,255,255,0.22);
  }

  .sf-policy-bar__legal {
    font-size: 0.75rem;
    color: rgba(253,245,228,0.38);
    margin: 0;
    letter-spacing: 0.01em;
  }

  /* Bottom bar */
  .sf-bottom {
    border-top: 1px solid rgba(255,255,255,0.10);
    position: relative;
    z-index: 1;
  }

  .sf-bottom__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-5) var(--page-margin);
    max-width: var(--page-width);
    margin: 0 auto;
  }

  .sf-bottom__copy {
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.42);
    margin: 0;
  }

  .sf-bottom__links {
    display: flex;
    gap: var(--space-5);
  }

  .sf-bottom__link {
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.42);
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  .sf-bottom__link:hover {
    color: #F5C518;
  }

  .sf-bottom__payments {
    display: flex;
    gap: var(--space-2);
    align-items: center;
  }

  .sf-bottom__payments svg {
    height: 1.5rem;
    width: auto;
    opacity: 0.5;
  }

  @media (max-width: 960px) {
    .sf-inner {
      grid-template-columns: 1fr 1fr;
    }

    .sf-links {
      grid-column: 1 / -1;
    }
  }

  @media (max-width: 600px) {
    .sf-palms { display: none; }

    .site-footer {
      width: 100%;
      overflow-x: hidden;
    }

    .sf-inner {
      grid-template-columns: 1fr;
      gap: var(--space-8);
      width: 100%;
    }

    .sf-links {
      flex-direction: column;
      gap: var(--space-6);
    }

    .sf-bottom__inner {
      flex-direction: column;
      text-align: center;
    }

    .sf-newsletter__row {
      flex-direction: column;
    }

    .sf-newsletter__btn {
      width: 100%;
    }
  }
/* END_SECTION:footer */

/* START_SECTION:header (INDEX:12) */
.site-header {
    position: relative;
    z-index: 100;
    background: linear-gradient(135deg, rgba(26,61,40,0.92) 0%, rgba(34,118,40,0.88) 100%), url("{{ 'banana-leaf-header.jpg' | asset_url }}") center/cover no-repeat;
    border-bottom: 2px solid #E6BD05;
    transition:
      border-color var(--transition-base),
      box-shadow var(--transition-base);
  }

  .site-header.is-sticky {
    background-color: #152F1F;
    border-bottom-color: rgba(245,166,35,0.30);
    box-shadow: 0 4px 28px rgba(0,0,0,0.30);
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 70px;
    padding: 0 var(--page-margin);
    max-width: var(--page-width);
    margin: 0 auto;
    gap: var(--space-6);
    position: relative;
    z-index: 1;
  }

  /* Logo */
  .site-header__logo {
    flex-shrink: 0;
    text-decoration: none;
    display: flex;
    align-items: center;
  }

  .site-header__logo-img {
    display: block;
    height: auto;
    max-height: 75px;
    width: auto;
    object-fit: contain;
  }

  /* Nav */
  .site-header__nav {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex: 1;
    justify-content: center;
  }

  .site-header__nav-link {
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgba(255,255,255,0.78);
    text-decoration: none;
    padding: var(--space-2) 0;
    position: relative;
    transition: color var(--transition-fast);
  }

  .site-header__nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2.5px;
    background: linear-gradient(90deg, #F5A623, #FFD700);
    border-radius: var(--radius-full);
    transition: width var(--transition-base);
  }

  .site-header__nav-link:hover,
  .site-header__nav-link.is-active {
    color: #F5A623;
  }

  .site-header__nav-link:hover::after,
  .site-header__nav-link.is-active::after {
    width: 100%;
  }

  /* Actions */
  .site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
  }

  /* Shop Now CTA pill */
  .site-header__shop-cta {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 1.25rem;
    border-radius: var(--radius-full);
    background: #F5A623;
    color: #1A3D28;
    font-size: 0.875rem;
    font-weight: 800;
    text-decoration: none;
    transition: all var(--transition-fast);
    box-shadow: 0 4px 14px rgba(245,166,35,0.35);
    letter-spacing: 0.01em;
  }

  .site-header__shop-cta:hover {
    background: #FFD700;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(245,166,35,0.50);
  }

  .site-header__icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast);
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    position: relative;
  }

  .site-header__icon-btn:hover {
    background-color: rgba(255,255,255,0.10);
    color: #F5A623;
  }

  .site-header__icon-btn svg { width: 1.375rem; height: 1.375rem; }

  .site-header__cart-count {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 1.15rem;
    height: 1.15rem;
    border-radius: var(--radius-full);
    background: #F5A623;
    color: #1A3D28;
    font-size: 0.65rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.2rem;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(245,166,35,0.45);
  }

  /* Hamburger */
  .site-header__hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast);
  }

  .site-header__hamburger:hover { background-color: rgba(255,255,255,0.10); }

  .site-header__hamburger span {
    display: block;
    width: 1.3rem;
    height: 2.5px;
    background-color: rgba(255,255,255,0.85);
    border-radius: var(--radius-full);
    transition: transform var(--transition-base), opacity var(--transition-fast);
    transform-origin: center;
  }

  .site-header__hamburger.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .site-header__hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .site-header__hamburger.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  /* Mobile nav */
  .site-header__mobile-nav {
    display: none;
    flex-direction: column;
    padding: var(--space-4) var(--page-margin) var(--space-6);
    border-top: 1px solid rgba(245,166,35,0.25);
    background-color: #1A3D28;
    gap: var(--space-1);
  }

  @media (max-width: 768px) {
    .site-header__mobile-nav:not([hidden]) {
      display: flex;
    }
  }

  .site-header__mobile-link {
    display: block;
    padding: var(--space-3) var(--space-4);
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255,255,255,0.80);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast), color var(--transition-fast);
  }

  .site-header__mobile-link:hover,
  .site-header__mobile-link.is-active {
    background-color: rgba(255,255,255,0.08);
    color: #F5A623;
  }

  .site-header__mobile-shop-cta {
    display: block;
    margin-top: var(--space-3);
    padding: var(--space-4) var(--space-4);
    text-align: center;
    font-size: 1rem;
    font-weight: 800;
    border-radius: var(--radius-full);
    background: #F5A623;
    color: #1A3D28;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(245,166,35,0.35);
  }

  @media (max-width: 768px) {
    .site-header__nav { display: none; }
    .site-header__hamburger { display: flex; }
    .site-header__shop-cta { display: none; }
  }

  /* Account dropdown */
  .acct-dropdown {
    position: relative;
  }

  .acct-popup {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 280px;
    background: #fff;
    border-radius: 16px;
    border-top: 3px solid #E6BD05;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    padding: 24px;
    font-family: 'Poppins', sans-serif;
    z-index: 200;
  }

  .acct-popup__title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1A3D28;
    margin: 0 0 16px;
    text-align: center;
  }

  .acct-popup__name {
    font-size: 1rem;
    font-weight: 700;
    color: #1A3D28;
    margin: 0 0 12px;
    text-align: center;
  }

  .acct-popup__divider {
    height: 1px;
    background: #E5CAA5;
    margin: 12px 0;
  }

  .acct-popup__input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #E5CAA5;
    border-radius: 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    color: #1C0D05;
    outline: none;
    margin-bottom: 10px;
    transition: border-color var(--transition-fast);
    box-sizing: border-box;
  }

  .acct-popup__input:focus {
    border-color: #E6BD05;
  }

  .acct-popup__continue {
    width: 100%;
    padding: 10px 14px;
    background: #E6BD05;
    color: #1A3D28;
    border: none;
    border-radius: 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
  }

  .acct-popup__continue:hover {
    background: #F5C518;
    transform: translateY(-1px);
  }

  .acct-popup__or {
    text-align: center;
    position: relative;
    margin: 14px 0;
    color: #7A5230;
    font-size: 0.8rem;
  }

  .acct-popup__or::before,
  .acct-popup__or::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 38%;
    height: 1px;
    background: #E5CAA5;
  }

  .acct-popup__or::before { left: 0; }
  .acct-popup__or::after { right: 0; }

  .acct-popup__create {
    display: block;
    width: 100%;
    padding: 10px 14px;
    text-align: center;
    border: 1.5px solid #1A3D28;
    border-radius: 12px;
    color: #1A3D28;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
    box-sizing: border-box;
  }

  .acct-popup__create:hover {
    background: #1A3D28;
    color: #fff;
  }

  .acct-popup__btn {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border-radius: 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    color: #1A3D28;
    background: #F5F0E8;
    margin-bottom: 8px;
    transition: background var(--transition-fast);
    box-sizing: border-box;
  }

  .acct-popup__btn:hover {
    background: #EDE5D5;
  }

  .acct-popup__btn--logout {
    background: #FFF0EE;
    color: #B9331A;
    margin-bottom: 0;
  }

  .acct-popup__btn--logout:hover {
    background: #FFE0DC;
  }
/* END_SECTION:header */

/* START_SECTION:hello-world (INDEX:13) */
.welcome {
    display: grid;
    grid-template-columns: var(--content-grid);
    background-color: #f6f6f7;
    padding: 72px 0;
  }

  .welcome-content {
    grid-column: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 0 24px;
  }

  .welcome-description {
    max-width: 80ch;
    line-height: 1.4;
    margin-top: 1.5rem;
  }

  .icon {
    width: 300px;
  }

  .highlights {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 50px;
  }

  @media (max-width: 1100px) {
    .highlights {
      grid-template-columns: 1fr;
    }
  }

  .highlight {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
    border-radius: 8px;
    background-color: #eef3ff;
    color: rgb(92, 95, 98);
    line-height: 1.4;
  }

  .highlight > * + * {
    margin-top: 1rem;
  }

  .highlight h3 {
    font-size: 1rem;
    color: rgb(32, 34, 35);
  }

  .highlight-description {
    flex: 1 1;
  }

  .highlight a {
    display: flex;
    width: fit-content;
    background-color: rgb(250, 251, 251);
    box-shadow: rgba(0, 0, 0, 0.2) 0px -3px 0px 0px inset, rgba(255, 255, 255, 0.9) 0px 2px 0px 0px inset;
    border: 1px solid rgb(140, 145, 150);
    border-radius: 4px;
    color: rgb(92, 95, 98);
    padding: 3px 10px 5px;
    text-decoration: none;
  }
/* END_SECTION:hello-world */

/* START_SECTION:hero-banner (INDEX:14) */
.hero {
    min-height: 92svh;
    background: linear-gradient(150deg,
      #3D1008 0%,
      #7A2310 12%,
      #B84012 26%,
      #C8560F 40%,
      #D4751A 55%,
      #C8A050 72%,
      #E8D090 88%,
      #FFF8E8 100%
    );
    overflow: clip;
    position: relative;
    display: flex;
    align-items: center;
  }

  /* Kerala kolam dot pattern */
  .hero__pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.18) 1.5px, transparent 1.5px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
  }

  /* Banana leaf decorations */
  .hero__leaf {
    position: absolute;
    pointer-events: none;
    z-index: 0;
  }

  .hero__leaf--tr {
    top: -80px;
    right: -60px;
    width: 320px;
    height: auto;
    transform: rotate(15deg);
    animation: leaf-sway 8s ease-in-out infinite;
  }

  .hero__leaf--bl {
    bottom: -100px;
    left: -60px;
    width: 260px;
    height: auto;
    transform: rotate(-20deg) scaleX(-1);
    animation: leaf-sway-rev 10s ease-in-out infinite 2s;
  }

  @keyframes leaf-sway {
    0%, 100% { transform: rotate(15deg) translateY(0); }
    50% { transform: rotate(17deg) translateY(-8px); }
  }

  @keyframes leaf-sway-rev {
    0%, 100% { transform: rotate(-20deg) scaleX(-1) translateY(0); }
    50% { transform: rotate(-22deg) scaleX(-1) translateY(-6px); }
  }

  /* Kerala houseboat */
  .hero__houseboat {
    position: absolute;
    bottom: 20px;
    right: -20px;
    width: 360px;
    height: auto;
    pointer-events: none;
    z-index: 0;
  }

  /* Floating particles */
  .hero__particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
  }

  .hero__particle {
    position: absolute;
    border-radius: 50%;
    animation: particle-float 6s ease-in-out infinite;
  }

  .hero__particle--1 { width: 14px; height: 14px; background: rgba(255,255,255,0.35); top: 15%; left: 35%; animation-delay: 0s; }
  .hero__particle--2 { width: 10px; height: 10px; background: rgba(255,255,255,0.25); top: 70%; left: 55%; animation-delay: 1.2s; }
  .hero__particle--3 { width: 8px; height: 8px; background: rgba(255,255,255,0.20); top: 30%; left: 60%; animation-delay: 2.4s; }
  .hero__particle--4 { width: 18px; height: 18px; background: rgba(255,255,255,0.15); top: 80%; left: 25%; animation-delay: 0.8s; }
  .hero__particle--5 { width: 6px; height: 6px; background: rgba(255,255,255,0.30); top: 50%; left: 42%; animation-delay: 3s; }
  .hero__particle--6 { width: 12px; height: 12px; background: rgba(255,255,255,0.20); top: 20%; right: 30%; animation-delay: 1.8s; }

  @keyframes particle-float {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.8; }
    50% { transform: translateY(-22px) scale(1.15); opacity: 0.4; }
  }

  /* Layout */
  .hero__inner {
    width: 100%;
    max-width: var(--page-width);
    margin: 0 auto;
    padding: var(--space-16) var(--page-margin);
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    gap: var(--space-10);
    position: relative;
    z-index: 1;
  }

  /* Text column */
  .hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    width: 100%;
  }

  .hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(255,255,255,0.22);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.35);
    padding: 0.4rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #fff;
    width: fit-content;
  }

  .hero__eyebrow-icon { font-size: 0.9rem; }

  .hero__heading {
    font-size: clamp(2.8rem, 5.8vw, 5rem);
    font-weight: 900;
    line-height: 1.0;
    letter-spacing: -0.03em;
    color: #fff;
    margin: 0;
    text-shadow: 0 2px 20px rgba(0,0,0,0.18);
  }

  .hero__heading em {
    font-style: normal;
    position: relative;
    display: inline-block;
    color: #1C0D05;
  }

  .hero__heading em::after {
    content: '';
    position: absolute;
    bottom: 0.06em;
    left: 0;
    width: 100%;
    height: 0.07em;
    background: rgba(28,13,5,0.35);
    border-radius: 9999px;
  }

  .hero__heading p { margin: 0; }

  .hero__subheading {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.75;
    color: rgba(255,255,255,0.88);
    max-width: 46ch;
    margin: 0 auto;
    text-shadow: 0 1px 8px rgba(0,0,0,0.15);
  }

  .hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    justify-content: center;
  }

  .hero__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.875rem 2rem;
    border-radius: var(--radius-full);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-base);
    white-space: nowrap;
    border: 2.5px solid transparent;
  }

  .hero__btn--primary {
    background: linear-gradient(135deg, #F5C518 0%, #F5A020 60%, #E07010 100%);
    color: #1C0D05;
    border-color: transparent;
    box-shadow: 0 8px 28px rgba(200,90,15,0.45), 0 2px 0 rgba(255,255,255,0.18) inset;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
  }

  .hero__btn--primary:hover {
    background: linear-gradient(135deg, #FFD740 0%, #F5B030 60%, #E08020 100%);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 38px rgba(200,90,15,0.55);
  }

  .hero__btn--outline {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-color: rgba(255,255,255,0.60);
    backdrop-filter: blur(8px);
  }

  .hero__btn--outline:hover {
    background: rgba(255,255,255,0.22);
    border-color: #fff;
    transform: translateY(-2px);
  }

  .hero__chips-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(255,255,255,0.25);
  }

  .hero__chip-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.28);
    padding: 0.28rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,0.95);
  }

  /* ============================================
     VISUAL COLUMN — Rotating 3D Showcase
     ============================================ */
  .hero__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 650px;
    perspective: 500px;
    perspective-origin: 50% 48%;
  }

  .hero__orb {
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%,
      rgba(255,248,220,0.55) 0%,
      rgba(245,197,24,0.25) 40%,
      rgba(200,80,15,0.08) 68%,
      transparent 80%);
    pointer-events: none;
    filter: blur(2px);
    animation: orb-breathe 3.5s ease-in-out infinite;
  }

  @keyframes orb-breathe {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.12); opacity: 1; }
  }

  /* 3D Stage */
  .hero__3d-stage {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 480px;
    transform-style: preserve-3d;
    transition: transform 0.2s ease-out;
  }

  /* ====== BAG BASE STYLES ====== */
  .hero__bag {
    position: absolute;
    overflow: visible;
    background: transparent;
    transform-style: preserve-3d;
    /* Smooth transitions for position/scale changes */
    transition:
      transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
      z-index 0s 0.1s,
      opacity 0.6s ease;
    will-change: transform;
  }

  .hero__bag-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
  }

  .hero__bag-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: transparent;
    mix-blend-mode: multiply;
    transition: filter 0.8s ease;
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.25));
  }

  .hero__bag-shadow {
    position: absolute;
    bottom: -20px;
    left: 15%;
    width: 70%;
    height: 18px;
    background: radial-gradient(ellipse, rgba(0,0,0,0.35) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(5px);
    transition: all 0.8s ease;
    opacity: 0.7;
  }

  .hero__bag-badge {
    position: absolute;
    top: 12px; right: 12px;
    background: linear-gradient(135deg, #F5C518, #FFD700);
    color: #1C0D05;
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.3rem 0.65rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    box-shadow: 0 4px 16px rgba(245,197,24,0.55);
    z-index: 10;
    white-space: nowrap;
    max-width: calc(100% - 24px);
    transition: transform 0.8s ease, opacity 0.5s ease;
  }

  /* ====== POSITION STATES ====== */

  /* FEATURED — center, large, forward */
  .hero__bag.is-featured {
    width: 360px; height: 360px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) translateZ(100px) scale(1) rotateY(0deg);
    z-index: 10;
    animation: featured-breathe 3s ease-in-out 0.8s infinite;
  }

  .hero__bag.is-featured .hero__bag-img {
    filter: drop-shadow(0 35px 50px rgba(0,0,0,0.40)) drop-shadow(0 10px 15px rgba(0,0,0,0.2));
  }

  .hero__bag.is-featured .hero__bag-shadow {
    bottom: -30px;
    opacity: 0.5;
    transform: scale(1.3);
    filter: blur(10px);
  }

  @keyframes featured-breathe {
    0%, 100% { transform: translate(-50%, -50%) translateZ(100px) scale(1) rotateY(0deg); }
    50% { transform: translate(-50%, -50%) translateZ(130px) scale(1.05) rotateY(2deg); }
  }

  /* LEFT — smaller, pushed back and to the left */
  .hero__bag.is-left {
    width: 220px; height: 220px;
    top: 55%; left: 5%;
    transform: translate(0, -50%) translateZ(-60px) scale(0.85) rotateY(45deg);
    z-index: 2;
    opacity: 0.75;
  }

  .hero__bag.is-left .hero__bag-img {
    filter: drop-shadow(0 12px 20px rgba(0,0,0,0.20)) brightness(0.85);
  }

  .hero__bag.is-left .hero__bag-shadow {
    opacity: 0.3;
    transform: scale(0.7);
  }

  .hero__bag.is-left .hero__bag-badge {
    transform: scale(0.7);
    opacity: 0.5;
  }

  /* RIGHT — smaller, pushed back and to the right */
  .hero__bag.is-right {
    width: 220px; height: 220px;
    top: 55%; right: 5%; left: auto;
    transform: translate(0, -50%) translateZ(-60px) scale(0.85) rotateY(-45deg);
    z-index: 2;
    opacity: 0.75;
  }

  .hero__bag.is-right .hero__bag-img {
    filter: drop-shadow(0 12px 20px rgba(0,0,0,0.20)) brightness(0.85);
  }

  .hero__bag.is-right .hero__bag-shadow {
    opacity: 0.3;
    transform: scale(0.7);
  }

  .hero__bag.is-right .hero__bag-badge {
    transform: scale(0.7);
    opacity: 0.5;
  }

  /* ====== CHIP BURST EFFECT ====== */
  .hero__burst {
    position: absolute;
    top: 12%; left: 50%;
    width: 0; height: 0;
    pointer-events: none;
    z-index: 20;
  }

  .hero__chip {
    position: absolute;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    will-change: transform, opacity;
    box-shadow:
      inset 0 1px 2px rgba(255,255,210,0.45),
      inset 0 -1px 2px rgba(190,130,0,0.18),
      0 3px 8px rgba(0,0,0,0.14);
  }

  /* Faint banana seed cluster at the centre — visible only up close */
  .hero__chip::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34%;
    height: 28%;
    transform: translate(-50%, -50%);
    background:
      radial-gradient(ellipse at 35% 35%, rgba(150,105,22,0.22) 0 18%, transparent 24%),
      radial-gradient(ellipse at 65% 36%, rgba(150,105,22,0.18) 0 16%, transparent 23%),
      radial-gradient(ellipse at 48% 68%, rgba(150,105,22,0.16) 0 15%, transparent 22%);
    pointer-events: none;
  }

  /* Banana chip slices — irregular rounded triangular/oval cuts with soft fried edges */
  .hero__chip--1  { width: 30px; height: 27px; border-radius: 42% 58% 50% 50% / 48% 42% 58% 52%; background: radial-gradient(ellipse at 48% 42%, #FFE68B 0%, #F7CD55 62%, #E3AA2A 86%, #C58C16 100%); }
  .hero__chip--2  { width: 27px; height: 25px; border-radius: 55% 45% 50% 50% / 46% 54% 44% 56%; background: radial-gradient(ellipse at 50% 44%, #FFE28A 0%, #F3C64D 64%, #DFA326 88%, #BD8412 100%); }
  .hero__chip--3  { width: 25px; height: 31px; border-radius: 48% 52% 56% 44% / 42% 48% 52% 58%; background: radial-gradient(ellipse at 46% 40%, #FFE996 0%, #F7D05B 62%, #E4AE2E 86%, #C58A14 100%); }
  .hero__chip--4  { width: 32px; height: 23px; border-radius: 54% 46% 48% 52% / 48% 56% 44% 52%; background: radial-gradient(ellipse at 52% 42%, #FFDF80 0%, #F0BE40 64%, #D69A20 88%, #B77C10 100%); }
  .hero__chip--5  { width: 29px; height: 26px; border-radius: 45% 55% 52% 48% / 55% 44% 56% 45%; background: radial-gradient(ellipse at 48% 42%, #FFE58E 0%, #F6CA50 63%, #E0A728 87%, #C08712 100%); }
  .hero__chip--6  { width: 26px; height: 30px; border-radius: 50% 50% 46% 54% / 45% 52% 48% 55%; background: radial-gradient(ellipse at 46% 44%, #FFDD7C 0%, #EDB83A 64%, #D1961E 88%, #B0780E 100%); }
  .hero__chip--7  { width: 31px; height: 28px; border-radius: 43% 57% 54% 46% / 48% 44% 56% 52%; background: radial-gradient(ellipse at 50% 40%, #FFE994 0%, #F6CF58 62%, #E2AA2C 86%, #C48A14 100%); }
  .hero__chip--8  { width: 24px; height: 22px; border-radius: 52% 48% 58% 42% / 46% 56% 44% 54%; background: radial-gradient(ellipse at 46% 44%, #FFD977 0%, #EAB232 64%, #CC8E18 88%, #AA7008 100%); }
  .hero__chip--9  { width: 28px; height: 32px; border-radius: 50% 50% 45% 55% / 42% 50% 50% 58%; background: radial-gradient(ellipse at 52% 42%, #FFE188 0%, #F2C148 64%, #DDA124 88%, #BD8210 100%); }
  .hero__chip--10 { width: 33px; height: 29px; border-radius: 46% 54% 50% 50% / 50% 44% 56% 50%; background: radial-gradient(ellipse at 46% 40%, #FFE68C 0%, #F4C64C 63%, #DFA426 87%, #BF8412 100%); }

  /* Burst animation — triggered by .is-bursting
     Lay's-style fountain — chips spray up & out from the packet opening in a fan */
  .is-bursting .hero__chip--1  { animation: chip-fly 1.3s cubic-bezier(0.1, 0.7, 0.2, 1) 0s forwards; --tx: -100px; --ty: -100px; --rot: 540deg; --roty: 60deg; }
  .is-bursting .hero__chip--2  { animation: chip-fly 1.3s cubic-bezier(0.1, 0.7, 0.2, 1) 0.05s forwards; --tx: -70px; --ty: -170px; --rot: -480deg; --roty: -45deg; }
  .is-bursting .hero__chip--3  { animation: chip-fly 1.3s cubic-bezier(0.1, 0.7, 0.2, 1) 0.02s forwards; --tx: -40px; --ty: -240px; --rot: 620deg; --roty: 40deg; }
  .is-bursting .hero__chip--4  { animation: chip-fly 1.3s cubic-bezier(0.1, 0.7, 0.2, 1) 0.08s forwards; --tx: 0px; --ty: -280px; --rot: -560deg; --roty: -70deg; }
  .is-bursting .hero__chip--5  { animation: chip-fly 1.3s cubic-bezier(0.1, 0.7, 0.2, 1) 0.04s forwards; --tx: 40px; --ty: -240px; --rot: 500deg; --roty: 30deg; }
  .is-bursting .hero__chip--6  { animation: chip-fly 1.3s cubic-bezier(0.1, 0.7, 0.2, 1) 0.1s forwards; --tx: 70px; --ty: -170px; --rot: -600deg; --roty: -55deg; }
  .is-bursting .hero__chip--7  { animation: chip-fly 1.3s cubic-bezier(0.1, 0.7, 0.2, 1) 0.06s forwards; --tx: 100px; --ty: -100px; --rot: 460deg; --roty: 50deg; }
  .is-bursting .hero__chip--8  { animation: chip-fly 1.3s cubic-bezier(0.1, 0.7, 0.2, 1) 0.03s forwards; --tx: -130px; --ty: -60px; --rot: -520deg; --roty: -35deg; }
  .is-bursting .hero__chip--9  { animation: chip-fly 1.3s cubic-bezier(0.1, 0.7, 0.2, 1) 0.07s forwards; --tx: 130px; --ty: -60px; --rot: 580deg; --roty: 70deg; }
  .is-bursting .hero__chip--10 { animation: chip-fly 1.3s cubic-bezier(0.1, 0.7, 0.2, 1) 0.09s forwards; --tx: 0px; --ty: -200px; --rot: -440deg; --roty: -60deg; }

  @keyframes chip-fly {
    0% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(0.4) rotate(0deg) rotateY(0deg);
    }
    20% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: translate(
        calc(-50% + var(--tx)),
        calc(-50% + var(--ty) + 30px)
      ) scale(0.7) rotate(var(--rot)) rotateY(var(--roty));
    }
  }

  /* ====== HOVER: Featured bag pops more ====== */
  .hero__bag.is-featured:hover {
    animation-play-state: paused;
    transform: translate(-50%, -50%) translateZ(118px) scale(1.035) rotateY(0deg) !important;
  }

  .hero__bag.is-featured:hover .hero__bag-img {
    filter: drop-shadow(0 45px 60px rgba(0,0,0,0.45)) drop-shadow(0 12px 18px rgba(0,0,0,0.25));
  }

  /* Side bags on hover — bring slightly forward */
  .hero__bag.is-left:hover,
  .hero__bag.is-right:hover {
    opacity: 1;
    transform: translate(0, -50%) translateZ(0px) scale(0.95) rotateY(0deg);
  }

  /* ====== RESPONSIVE — TABLET ====== */
  @media (max-width: 960px) {
    .hero { min-height: auto; }

    .hero__inner {
      gap: var(--space-8);
      padding: var(--space-12) var(--page-margin) var(--space-10);
    }

    .hero__content {
      gap: var(--space-5);
    }

    .hero__subheading { max-width: 54ch; }

    .hero__visual {
      min-height: 480px;
      perspective: 450px;
    }
    .hero__3d-stage { min-height: 480px; }
    .hero__orb { width: 340px; height: 340px; }

    .hero__bag.is-featured { width: 280px; height: 280px; }
    .hero__bag.is-left { width: 170px; height: 170px; left: 4%; }
    .hero__bag.is-right { width: 170px; height: 170px; right: 4%; }

    .hero__leaf--tr { width: 180px; right: -30px; top: -40px; }
    .hero__leaf--bl { display: none; }
    .hero__houseboat { width: 260px; bottom: 10px; right: -10px; }
  }

  /* ====== RESPONSIVE — MOBILE ====== */
  @media (max-width: 600px) {
    .hero { min-height: auto; }

    .hero__inner {
      padding: var(--space-8) var(--space-4) var(--space-8);
      gap: var(--space-6);
    }

    .hero__content {
      gap: var(--space-4);
    }

    .hero__eyebrow {
      font-size: 0.65rem;
      padding: 0.25rem 0.65rem;
      letter-spacing: 0.08em;
    }

    .hero__heading {
      font-size: clamp(1.9rem, 8vw, 2.6rem);
      line-height: 1.1;
    }

    .hero__subheading {
      font-size: 0.9rem;
      line-height: 1.6;
      max-width: 100%;
    }

    .hero__ctas {
      flex-direction: column;
      width: 100%;
      gap: var(--space-3);
    }

    .hero__btn {
      width: 100%;
      justify-content: center;
      padding: 0.85rem 1.2rem;
      font-size: 0.95rem;
      white-space: normal;
      text-align: center;
    }

    .hero__btn--primary {
      padding: 0.9rem 1.2rem;
      box-shadow: 0 8px 22px rgba(200,90,15,0.5);
    }

    .hero__chips-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      border-top: 1px solid rgba(255,255,255,0.2);
      padding-top: var(--space-3);
      width: 100%;
    }

    .hero__chip-pill {
      font-size: 0.67rem;
      padding: 0.25rem 0.6rem;
      justify-content: center;
      text-align: center;
    }

    /* Visual column */
    .hero__visual {
      min-height: 360px;
      width: 100%;
      perspective: 360px;
      perspective-origin: 50% 48%;
    }

    .hero__3d-stage { min-height: 360px; }

    .hero__orb {
      width: 220px;
      height: 220px;
      background: radial-gradient(circle,
        rgba(255,240,180,0.55) 0%,
        rgba(245,180,30,0.22) 50%,
        transparent 75%);
      filter: blur(6px);
    }

    /* Mobile positions */
    .hero__bag.is-featured {
      width: 210px; height: 210px;
      transform: translate(-50%, -50%) translateZ(60px) scale(1);
    }

    @keyframes featured-breathe {
      0%, 100% { transform: translate(-50%, -50%) translateZ(60px) scale(1) rotateY(0deg); }
      50% { transform: translate(-50%, -50%) translateZ(80px) scale(1.06) rotateY(2deg); }
    }

    .hero__bag.is-left {
      width: 130px; height: 130px;
      top: 50%; left: 0%;
      transform: translate(0, -50%) translateZ(-40px) scale(0.8) rotateY(45deg);
    }

    .hero__bag.is-right {
      width: 130px; height: 130px;
      top: 50%; right: 0%; left: auto;
      transform: translate(0, -50%) translateZ(-40px) scale(0.8) rotateY(-45deg);
    }

    .hero__bag-img {
      mix-blend-mode: normal;
      filter: drop-shadow(0 10px 18px rgba(0,0,0,0.35));
    }

    .hero__bag.is-featured .hero__bag-img {
      filter: drop-shadow(0 18px 28px rgba(0,0,0,0.45));
    }

    /* Smaller burst on mobile, preserving banana-slice proportions */
    .hero__chip--1  { width: 21px; height: 19px; }
    .hero__chip--2  { width: 19px; height: 18px; }
    .hero__chip--3  { width: 18px; height: 22px; }
    .hero__chip--4  { width: 22px; height: 16px; }
    .hero__chip--5  { width: 20px; height: 18px; }
    .hero__chip--6  { width: 18px; height: 21px; }
    .hero__chip--7  { width: 22px; height: 20px; }
    .hero__chip--8  { width: 17px; height: 16px; }
    .hero__chip--9  { width: 20px; height: 22px; }
    .hero__chip--10 { width: 23px; height: 20px; }

    .hero__bag-badge { font-size: 0.5rem; padding: 0.2rem 0.45rem; }
    .hero__bag-shadow { bottom: -12px; height: 12px; }

    .hero__leaf--tr { display: none; }
    .hero__houseboat { display: none; }
    .hero__particle--4,
    .hero__particle--5,
    .hero__particle--6 { display: none; }
  }
/* END_SECTION:hero-banner */

/* START_SECTION:launch-popup (INDEX:15) */
.launch-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
  }

  .launch-popup {
    background: #1B5E35;
    color: #faf6ef;
    border-radius: 16px;
    padding: 2.5rem 2rem 2rem;
    max-width: 400px;
    width: 100%;
    text-align: center;
    position: relative;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    animation: launch-popup-in 0.3s ease-out;
  }

  @keyframes launch-popup-in {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
  }

  .launch-popup__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    color: #faf6ef;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 50%;
    transition: background 0.2s;
  }

  .launch-popup__close:hover {
    background: rgba(255, 255, 255, 0.15);
  }

  .launch-popup__emoji {
    font-size: 2.5rem;
    margin-bottom: 0.25rem;
  }

  .launch-popup__headline {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: #fff;
    letter-spacing: 0.5px;
  }

  .launch-popup__body {
    font-size: 1rem;
    margin: 0 0 1.25rem;
    color: #e8e0d0;
    line-height: 1.5;
  }

  .launch-popup__bundle {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1.25rem;
  }

  .launch-popup__price {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
  }

  .launch-popup__price-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #b8d4c0;
  }

  .launch-popup__price-amount {
    font-size: 2.2rem;
    font-weight: 800;
    color: #F5A623;
    line-height: 1.1;
  }

  .launch-popup__price-note {
    font-size: 0.8rem;
    color: #c8ddd0;
  }

  .launch-popup__cta {
    display: block;
    background: #F5A623;
    color: #3b2410;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    padding: 0.85rem 2rem;
    border-radius: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: background 0.2s, transform 0.15s;
    margin-bottom: 0.75rem;
  }

  .launch-popup__cta:hover {
    background: #e6951a;
    transform: translateY(-1px);
  }


  @media (max-width: 640px) {
    .launch-popup {
      padding: 1.75rem 1.25rem 1.5rem;
      border-radius: 12px;
    }

    .launch-popup__emoji {
      font-size: 2rem;
    }

    .launch-popup__headline {
      font-size: 1.3rem;
    }

    .launch-popup__body {
      font-size: 0.9rem;
    }

    .launch-popup__price-amount {
      font-size: 1.8rem;
    }

    .launch-popup__cta {
      font-size: 0.9rem;
      padding: 0.7rem 1.5rem;
    }
  }
/* END_SECTION:launch-popup */

/* START_SECTION:page (INDEX:16) */
/* ── Contact page ── */
  .contact-page {
    background: #FFF8F0;
    padding: var(--space-20) var(--page-margin);
  }

  .contact-page__inner {
    max-width: var(--page-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
  }

  /* Left column */
  .contact-page__heading {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: #1A3D28;
    letter-spacing: -0.03em;
    margin: 0 0 var(--space-3);
  }

  .contact-page__subtext {
    font-size: 1.0625rem;
    color: #4A6355;
    line-height: 1.6;
    margin: 0 0 var(--space-10);
  }

  .contact-page__info-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-bottom: var(--space-10);
  }

  .contact-page__info-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .contact-page__info-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: #1A3D28;
    color: #E6BD05;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .contact-page__info-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-top: 0.2rem;
  }

  .contact-page__info-text strong {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1A3D28;
  }

  .contact-page__info-text span {
    font-size: 0.875rem;
    color: #4A6355;
    line-height: 1.5;
  }

  .contact-page__socials {
    display: flex;
    gap: var(--space-3);
  }

  .contact-page__social-link {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: #1A3D28;
    color: #E6BD05;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), transform var(--transition-fast);
  }

  .contact-page__social-link:hover {
    background: #E6BD05;
    color: #1A3D28;
    transform: translateY(-2px);
  }

  /* Right column */
  .contact-page__right {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
  }

  .contact-page__illustration {
    width: 160px;
    height: 160px;
    border-radius: var(--radius-full);
    background: #1A3D28;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
    box-shadow: 0 16px 48px rgba(26,61,40,0.20);
  }

  .contact-page__qmark {
    font-size: 6rem;
    font-weight: 900;
    color: #E6BD05;
    line-height: 1;
    font-family: inherit;
  }

  .contact-page__right-heading {
    font-size: 1.5rem;
    font-weight: 900;
    color: #1A3D28;
    letter-spacing: 0.06em;
    margin: 0;
  }

  .contact-page__right-sub {
    font-size: 1rem;
    color: #4A6355;
    line-height: 1.6;
    margin: 0;
    max-width: 28ch;
  }

  @media (max-width: 768px) {
    .contact-page__inner {
      grid-template-columns: 1fr;
      gap: var(--space-12);
    }
    .contact-page__right {
      order: -1;
    }
    .contact-page__illustration {
      width: 120px;
      height: 120px;
    }
    .contact-page__qmark {
      font-size: 4.5rem;
    }
  }

  @media (max-width: 480px) {
    .contact-page {
      padding: var(--space-12) var(--page-margin);
    }
  }

  /* ── Policy pages ── */
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap');

  .policy-page {
    background: #FFF8F0;
  }

  .policy-page__hero {
    background: #1A3D28;
    padding: var(--space-20) var(--page-margin);
    text-align: center;
    position: relative;
    overflow: hidden;
  }

  .policy-page__hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 60% 50%, rgba(230,189,5,0.10) 0%, transparent 65%);
    pointer-events: none;
  }

  .policy-page__hero-inner {
    position: relative;
    max-width: var(--page-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
  }

  .policy-page__title {
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.03em;
    margin: 0;
    font-family: 'Poppins', sans-serif;
  }

  .policy-page__divider {
    display: block;
    width: 3rem;
    height: 4px;
    background: linear-gradient(90deg, #E6BD05, #F5C518);
    border-radius: var(--radius-full);
  }

  .policy-page__body {
    padding: var(--space-16) var(--page-margin);
    background: #FFF8F0;
  }

  .policy-page__content {
    max-width: 800px;
    margin: 0 auto;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    color: #2A1508;
    padding: 40px;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }

  .policy-page__content h1,
  .policy-page__content h2,
  .policy-page__content h3,
  .policy-page__content h4 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: #1A3D28;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
  }

  .policy-page__content h2 {
    font-size: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(230,189,5,0.35);
    margin-bottom: 1rem;
  }

  .policy-page__content h3 { font-size: 1.1rem; }
  .policy-page__content h4 { font-size: 1rem; }

  .policy-page__content p {
    margin-bottom: 1.1rem;
    color: #2A1508;
  }

  .policy-page__content a {
    color: #1A3D28;
    text-decoration: underline;
    transition: color var(--transition-fast);
  }

  .policy-page__content a:hover {
    color: #E6BD05;
  }

  .policy-page__content ul,
  .policy-page__content ol {
    padding-left: 1.5rem;
    margin-bottom: 1.1rem;
  }

  .policy-page__content li {
    margin-bottom: 0.4rem;
    color: #2A1508;
  }

  .policy-page__content strong {
    font-weight: 700;
    color: #1A3D28;
  }

  @media (max-width: 640px) {
    .policy-page__hero {
      padding: var(--space-12) var(--page-margin);
    }
    .policy-page__body {
      padding: var(--space-8) var(--page-margin);
    }
    .policy-page__content {
      padding: 24px 20px;
    }
  }

  /* ── About Us feature cards ── */
  .about-cards {
    background: var(--color-background);
    padding: var(--space-10) var(--page-margin) 0;
  }

  .about-cards__inner {
    max-width: var(--page-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }

  .about-card {
    background: #fff;
    border: 2px solid #E6BD05;
    border-radius: 16px;
    padding: var(--space-8) var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    box-shadow: 0 2px 12px rgba(230,189,5,0.10);
  }

  .about-card__icon {
    font-size: 2.25rem;
    line-height: 1;
  }

  .about-card__title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-foreground);
    letter-spacing: -0.01em;
  }

  .about-card__desc {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
  }

  @media (max-width: 640px) {
    .about-cards__inner {
      grid-template-columns: 1fr;
    }
    .about-cards {
      padding-top: var(--space-8);
    }
  }

  /* ── Generic branded page (About Us etc.) ── */
  .branded-page {
    background: var(--color-background);
  }

  .branded-page__hero {
    background: linear-gradient(135deg, #1C0D05 0%, #3D1A0A 100%);
    padding: var(--space-20) var(--page-margin);
    text-align: center;
    position: relative;
    overflow: hidden;
  }

  .branded-page__hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 70% 50%, rgba(200,68,15,0.18) 0%, transparent 65%),
      radial-gradient(ellipse at 20% 80%, rgba(27,94,53,0.12) 0%, transparent 55%);
    pointer-events: none;
  }

  .branded-page__hero-inner {
    position: relative;
    max-width: var(--page-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
  }

  .branded-page__title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.03em;
    margin: 0;
  }

  .branded-page__divider {
    display: block;
    width: 3.5rem;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    border-radius: var(--radius-full);
  }

  .branded-page__body {
    padding: var(--space-16) var(--page-margin);
    max-width: var(--page-width);
    margin: 0 auto;
  }

  .branded-page__content {
    max-width: 72ch;
    margin: 0 auto;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--color-foreground);
  }

  .branded-page__content h2,
  .branded-page__content h3,
  .branded-page__content h4 {
    font-weight: 800;
    color: var(--color-foreground);
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
  }

  .branded-page__content h2 { font-size: 1.6rem; }
  .branded-page__content h3 { font-size: 1.3rem; }
  .branded-page__content h4 { font-size: 1.1rem; }

  .branded-page__content p {
    margin-bottom: 1.25rem;
  }

  .branded-page__content a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color var(--transition-fast);
  }

  .branded-page__content a:hover {
    color: var(--color-primary-hover);
  }

  .branded-page__content ul,
  .branded-page__content ol {
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
  }

  .branded-page__content li {
    margin-bottom: 0.4rem;
  }

  .branded-page__content strong {
    font-weight: 700;
  }

  .branded-page__content img {
    max-width: 100%;
    border-radius: var(--radius-lg);
    margin: 1.5rem 0;
  }

  .branded-page__content blockquote {
    border-left: 4px solid var(--color-primary);
    padding-left: 1.25rem;
    margin: 1.5rem 0;
    color: var(--color-text-muted);
    font-style: italic;
  }

  @media (max-width: 640px) {
    .branded-page__hero {
      padding: var(--space-12) var(--page-margin);
    }
    .branded-page__body {
      padding: var(--space-10) var(--page-margin);
    }
  }
/* END_SECTION:page */

/* START_SECTION:policy (INDEX:18) */
.policy-page {
    padding: 4rem 1.5rem;
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
    overflow-wrap: break-word;
    word-wrap: break-word;
    overflow-x: hidden;
  }

  .policy-page__heading {
    font-size: clamp(1.5rem, 4vw, 3rem);
    font-weight: 900;
    color: #1C0D05;
    margin-bottom: 1.5rem;
    line-height: 1.15;
  }

  .policy-page__content {
    font-size: 1rem;
    line-height: 1.8;
    color: #4a3728;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  .policy-page__content h2,
  .policy-page__content h3 {
    font-weight: 700;
    color: #1C0D05;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
  }

  .policy-page__content h2 { font-size: 1.15rem; }
  .policy-page__content h3 { font-size: 1.05rem; }

  .policy-page__content p { margin-bottom: 1rem; }

  .policy-page__content a {
    color: #C8440F;
    text-decoration: underline;
    word-break: break-all;
  }

  .policy-page__content ul,
  .policy-page__content ol {
    padding-left: 1.25rem;
    margin-bottom: 1rem;
  }

  .policy-page__content li { margin-bottom: 0.35rem; }

  .policy-page__content strong { font-weight: 700; color: #1C0D05; }

  @media (max-width: 768px) {
    .policy-page {
      padding: 1.5rem 16px 2.5rem;
      max-width: 100%;
    }

    .policy-page__heading {
      font-size: 1.4rem;
      line-height: 1.2;
    }

    .policy-page__content {
      font-size: 0.9375rem;
      line-height: 1.7;
    }

    .policy-page__content h2 { font-size: 1.05rem; margin-top: 1.5rem; }
    .policy-page__content h3 { font-size: 0.95rem; }

    .policy-page__content ul,
    .policy-page__content ol {
      padding-left: 1rem;
    }

    .policy-page__content table {
      display: block;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      max-width: 100%;
    }

    .policy-page__content img {
      max-width: 100%;
      height: auto;
    }
  }
/* END_SECTION:policy */

/* START_SECTION:product (INDEX:19) */
.product-page {
    padding: var(--space-8) 0 var(--space-20);
    max-width: min(calc(var(--page-width) - var(--page-margin) * 2), calc(100% - var(--page-margin) * 2));
    margin: 0 auto;
  }

  /* Breadcrumb */
  .product-page__breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-8);
  }

  .product-page__breadcrumb a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  .product-page__breadcrumb a:hover { color: var(--color-primary); }

  /* Layout */
  .product-page__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: start;
  }

  /* Gallery */
  .product-gallery__viewer {
    position: relative;
  }

  .product-gallery__main {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background-color: var(--color-bg-alt);
    box-shadow: var(--shadow-md);
  }

  .product-gallery__main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow), opacity 0.18s ease;
  }

  .product-gallery__main:hover .product-gallery__main-img { transform: scale(1.03); }

  /* Arrow buttons */
  .gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #3b2410;
    color: #f0c97a;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background var(--transition-fast), transform var(--transition-fast);
    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
  }

  .gallery-arrow:hover {
    background: #5a3a1a;
    transform: translateY(-50%) scale(1.1);
  }

  .gallery-arrow--prev { left: 12px; }
  .gallery-arrow--next { right: 12px; }

  .product-gallery__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    font-weight: 800;
    color: rgba(255,255,255,0.8);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
  }

  .product-gallery__thumbs {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-4);
    flex-wrap: wrap;
  }

  .product-gallery__thumb {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    background: none;
    transition: border-color var(--transition-fast);
    flex-shrink: 0;
  }

  .product-gallery__thumb.is-active,
  .product-gallery__thumb:hover { border-color: var(--color-primary); }

  .product-gallery__thumb-img { width: 100%; height: 100%; object-fit: cover; }

  /* Info */
  .product-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    position: sticky;
    top: calc(4.5rem + var(--space-6));
  }

  .product-info__top { display: flex; flex-direction: column; gap: var(--space-3); }

  .product-info__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }

  .product-info__title {
    font-size: clamp(1.25rem, 2vw, 1.625rem);
    font-weight: 700;
    line-height: 1.25;
  }

  .product-info__price-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
  }

  .product-info__price {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-primary);
  }

  .product-info__compare-price {
    font-size: 1.125rem;
    color: var(--color-text-muted);
    text-decoration: line-through;
  }

  .product-info__weight-row {
    font-size: 0.875rem;
    color: var(--color-text-muted);
  }

  /* Description */
  .product-info__description {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-muted);
  }

  /* Quick facts */
  .product-info__quick-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    padding: var(--space-5);
    background-color: var(--color-bg-alt);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
  }

  .product-info__fact {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-foreground);
  }

  /* Form */
  .product-form { display: flex; flex-direction: column; gap: var(--space-5); }

  .product-form__label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-foreground);
    margin-bottom: var(--space-2);
  }

  .product-form__variant-btns { display: flex; flex-wrap: wrap; gap: var(--space-2); }

  .product-form__variant-btn {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--color-border);
    background: transparent;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--color-foreground);
  }

  .product-form__variant-btn.is-active {
    border-color: var(--color-primary);
    background-color: var(--color-primary-light);
    color: var(--color-primary-hover);
    font-weight: 600;
  }

  .product-form__variant-btn.is-sold-out {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
  }

  .product-form__qty-row { display: flex; flex-direction: column; }

  .product-form__qty {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    width: fit-content;
  }

  .product-form__qty-btn {
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    background: var(--color-bg-alt);
    font-size: 1.25rem;
    cursor: pointer;
    color: var(--color-foreground);
    transition: background-color var(--transition-fast);
    font-family: inherit;
    font-weight: 400;
  }

  .product-form__qty-btn:hover { background-color: var(--color-border-light); }

  .product-form__qty-input {
    width: 3rem;
    text-align: center;
    border: none;
    border-left: 1.5px solid var(--color-border);
    border-right: 1.5px solid var(--color-border);
    border-radius: 0;
    height: 2.5rem;
    font-weight: 600;
    background: var(--color-surface);
    color: var(--color-foreground);
  }

  .product-form__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .product-form__atc {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    justify-content: center;
  }

  /* Shipping info */
  .product-info__shipping {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
  }

  .product-info__shipping-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
  }

  @media (max-width: 900px) {
    .product-page__layout {
      grid-template-columns: 1fr;
      gap: var(--space-8);
    }

    .product-info { position: static; }
  }

  @media (max-width: 480px) {
    .product-info__quick-facts { grid-template-columns: 1fr; }
  }
/* END_SECTION:product */

/* START_SECTION:search (INDEX:20) */
.search-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  .search-results .prev,
  .search-results .page,
  .search-results .next {
    grid-column: 1 / -1;
  }
/* END_SECTION:search */

/* START_SECTION:trust-strip (INDEX:21) */
.trust-strip-sticky-wrap {
    position: relative;
    z-index: 99;
  }

  .trust-strip {
    background: #f0ead2;
    padding: 0;
    overflow: hidden;
    position: relative;
    border-top: 2px solid #d4c9a0;
    border-bottom: 2px solid #d4c9a0;
  }

  .trust-strip::before,
  .trust-strip::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
  }

  .trust-strip::before {
    left: 0;
    background: linear-gradient(to right, #f0ead2, transparent);
  }

  .trust-strip::after {
    right: 0;
    background: linear-gradient(to left, #f0ead2, transparent);
  }

  .trust-strip__track {
    display: flex;
    animation: trust-marquee 15s linear infinite;
    will-change: transform;
  }

  .trust-strip:hover .trust-strip__track {
    animation-play-state: paused;
  }

  .trust-strip__items {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .trust-strip__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    white-space: nowrap;
  }

  .trust-strip__sep {
    display: flex;
    align-items: center;
    padding: 0 0.25rem;
    color: #3b2410;
  }

  .trust-strip__icon {
    font-size: 1.05rem;
    line-height: 1;
  }

  .trust-strip__text {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #3b2410;
  }

  @keyframes trust-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-33.333%); }
  }

  @media (max-width: 640px) {
    .trust-strip__track {
      animation-duration: 5s;
    }
  }
/* END_SECTION:trust-strip */

/* START_SECTION:why-choose-us (INDEX:22) */
.why-choose-us {
    background: #FFFDF7;
    padding: var(--space-20) var(--page-margin);
  }

  .wcu-inner {
    max-width: min(calc(var(--page-width) - var(--page-margin) * 2), calc(100% - var(--page-margin) * 2));
    margin: 0 auto;
  }

  .wcu-header {
    text-align: center;
    margin-bottom: var(--space-12);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
  }

  .wcu-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: rgba(200,68,15,0.08);
    padding: 0.3rem 1rem;
    border-radius: var(--radius-full);
  }

  .wcu-title {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--color-foreground);
    margin: 0;
  }

  .wcu-subtitle {
    font-size: 1.0625rem;
    color: var(--color-text-muted);
    margin: 0;
  }

  .wcu-divider {
    display: block;
    width: 3.5rem;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    border-radius: var(--radius-full);
  }

  .wcu-table-wrap {
    overflow-x: auto;
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(28,13,5,0.08);
    border: 1.5px solid rgba(229,202,165,0.5);
  }

  .wcu-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    min-width: 620px;
  }

  .wcu-table thead tr {
    background: #1B5E35;
  }

  .wcu-table thead th {
    padding: 16px 20px;
    text-align: left;
    font-weight: 800;
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    color: #fff;
  }

  .wcu-col-upperi {
    background: rgba(245,166,35,0.38) !important;
    color: #1C0D05 !important;
    border-left: 3px solid #F5A623;
    border-right: 3px solid #F5A623;
    font-weight: 700 !important;
  }

  .wcu-table thead th.wcu-col-upperi {
    background: #F5A623 !important;
    color: #1C0D05 !important;
    text-align: center;
  }

  .wcu-logo {
    height: 36px;
    width: auto;
    display: block;
    margin: 0 auto;
  }

  .wcu-table tbody td.wcu-good {
    font-size: 1.0625rem;
  }

  .wcu-table tbody tr {
    border-bottom: 1px solid rgba(229,202,165,0.4);
    transition: background 0.2s ease;
  }

  .wcu-table tbody tr:last-child {
    border-bottom: none;
  }

  .wcu-table tbody tr:nth-child(even) {
    background: #FFF8F0;
  }

  .wcu-table tbody tr:hover {
    background: #FFF3E0;
  }

  .wcu-table td {
    padding: 14px 20px;
    vertical-align: middle;
  }

  .wcu-feature {
    font-weight: 700;
    color: var(--color-foreground);
  }

  .wcu-good {
    color: #1B5E35;
    font-weight: 600;
    background: rgba(27,94,53,0.06);
  }

  .wcu-bad {
    color: #9E2A2B;
    font-weight: 500;
  }

  .wcu-warn {
    color: #7A5C00;
    font-weight: 500;
  }

  .wcu-tick { margin-left: 4px; }
  .wcu-cross { margin-left: 4px; }
  .wcu-warn-icon { margin-left: 4px; }

  @media (max-width: 640px) {
    .why-choose-us { padding: var(--space-12) var(--space-4); }
    .wcu-table { font-size: 0.8rem; }
    .wcu-table td, .wcu-table th { padding: 10px 12px; }
  }
/* END_SECTION:why-choose-us */

/* CSS from block stylesheet tags */
/* START_BLOCK:group (INDEX:23) */
.group {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    width: 100%;
  }

  .group--horizontal {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--padding);
  }

  .group--vertical {
    flex-direction: column;
    align-items: var(--alignment);
    padding: var(--padding) 0;
  }
/* END_BLOCK:group */

/* START_BLOCK:text (INDEX:24) */
.text {
    text-align: var(--text-align);
  }
  .text--title {
    font-size: 2rem;
    font-weight: 700;
  }
  .text--subtitle {
    font-size: 1.5rem;
  }
/* END_BLOCK:text */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:image (INDEX:26) */
.image {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
  }

  .image > img {
    width: 100%;
    height: auto;
  }
/* END_SNIPPET:image */