:root {
  color-scheme: light;
  --bg: #fbf2e4;
  --surface: #ffffff;
  --surface-soft: #fffaf3;
  --ink: #000000;
  --muted: #706b6b;
  --muted-2: #5e5a5a;
  --line: #e1e0e0;
  --line-2: #c3c1c1;
  --brand: #a10101;
  --brand-dark: #800101;
  --brand-soft: #ffe6e6;
  --brand-soft-line: #ffb5b5;
  --gold: #f8be4a;
  --content: 1312px;
  --shadow: 0 12px 32px rgba(31, 31, 31, 0.08);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-pill: 999px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, #fff8ef 0%, var(--bg) 25%, #fff7ee 100%);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

.mobile-status {
  display: none;
}

.promo-bar {
  background:
    center/cover no-repeat url("https://www.figma.com/api/mcp/asset/32eeb10b-7acf-4fa4-bc84-7079dfd15f93"),
    linear-gradient(92deg, #fce3b1 7%, #fef1d8 46%, #fce3b1 90%);
  border-bottom: 1px solid rgba(161, 1, 1, 0.08);
}

.promo-inner,
.category-strip,
main,
.site-footer {
  width: min(calc(100% - 32px), var(--content));
  margin: 0 auto;
}

.promo-inner {
  width: 100%;
  min-height: 88px;
  padding: 0 48px 0 64px;
  position: relative;
}

.promo-copy {
  width: 319px;
  padding-left: 32px;
  position: absolute;
  left: 50%;
  top: 50%;
  color: var(--brand);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  transform: translate(-50%, -50%);
}

.promo-copy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  background: center/contain no-repeat url("https://www.figma.com/api/mcp/asset/4d23d4fd-45b4-44c1-95aa-cde986af8a40");
}

.promo-close {
  position: absolute;
  right: 48px;
  top: 28px;
  width: 32px;
  height: 32px;
  border: 0;
  padding: 0;
  background: center/20px 20px no-repeat url("https://www.figma.com/api/mcp/asset/966b583b-9d1d-42a9-b99f-a5e135ebc86d");
}

.site-header {
  position: relative;
  z-index: 20;
  background: rgba(255, 255, 255, 0.95);
}

.header-main {
  width: 100%;
  min-height: 112px;
  position: relative;
  padding: 0 64px;
  border-bottom: 1px solid #e1e0e0;
}

.mobile-menu {
  display: none;
}

.delivery-location {
  position: absolute;
  left: 64px;
  top: 50%;
  padding-left: 32px;
  font-size: 16px;
  line-height: 1;
  transform: translateY(-50%);
}

.delivery-location::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  background: center/contain no-repeat url("https://www.figma.com/api/mcp/asset/3078a57a-d514-40c0-b81b-3ae0a422c6c2");
}

.delivery-location::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  vertical-align: -3px;
  background: center/contain no-repeat url("https://www.figma.com/api/mcp/asset/9aa6e1ff-eacd-4afb-8c38-697cad787d98");
}

.brand {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transform: translate(-50%, -50%);
}

.brand-mark {
  width: 116.57px;
  height: 64px;
  background: center/contain no-repeat url("https://www.figma.com/api/mcp/asset/7a0fbf7f-47c7-418a-aaff-c0b546f05631");
}

.brand-sub {
  color: #5e5a5a;
  font-size: 14px;
  line-height: 1;
}

.mobile-sub {
  display: none;
}

.header-actions {
  position: absolute;
  right: 64px;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 32px;
  transform: translateY(-50%);
}

.header-action {
  width: 24px;
  height: 24px;
  display: block;
}

.account-link {
  background: center/contain no-repeat url("https://www.figma.com/api/mcp/asset/60b812a1-7630-43fd-b2c3-d997aa9f6222");
}

.cart-link {
  background: center/contain no-repeat url("https://www.figma.com/api/mcp/asset/1ba2e13c-a421-4d2e-b58e-e3f60b47b6c5");
}

.search-link {
  background: center/contain no-repeat url("https://www.figma.com/api/mcp/asset/9d1cb01d-3862-4aae-9e9d-aaa41db4cfd0");
}

.category-strip {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 64px;
  font-size: 16px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.95);
}

main {
  padding: 0 0 72px;
}

.hero {
  min-height: 543px;
  margin: 0 auto;
  width: min(100%, 1440px);
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(89, 14, 16, 0.75) 0 36%, rgba(89, 14, 16, 0.1) 54%, transparent 72%),
    center/cover no-repeat url("https://www.figma.com/api/mcp/asset/b464b622-43bc-450b-8f7b-e623faf649e1");
}

.hero-copy {
  max-width: 460px;
  padding: 116px 0 0 64px;
  color: #ffffff;
}

.hero-kicker {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 64px;
  line-height: 0.94;
  letter-spacing: -0.03em;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  min-width: 132px;
  height: 40px;
  border-radius: var(--radius-pill);
  color: var(--brand-dark);
  background: #ffffff;
  font-size: 16px;
  font-weight: 600;
}

.section {
  margin-top: 64px;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 32px;
  text-align: center;
}

.section-heading h2 {
  color: var(--brand-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 40px;
  line-height: 1.05;
}

.ornament {
  width: 56px;
  height: 20px;
  background: center/contain no-repeat url("https://www.figma.com/api/mcp/asset/245be13d-8a3a-43c9-983b-c77d675d5a50");
  opacity: 0.9;
}

.feature-panels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}

.feature-panel {
  position: relative;
  min-height: 258px;
  overflow: hidden;
  border-radius: 18px;
}

.feature-panel .panel-image {
  position: absolute;
  inset: 0;
}

.feature-panel h3 {
  position: absolute;
  left: 50%;
  bottom: 21px;
  width: calc(100% - 28px);
  transform: translateX(-50%);
  color: #ffffff;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  text-align: center;
}

.panel-milk-halwa .panel-image {
  background: center/cover no-repeat url("https://www.figma.com/api/mcp/asset/0602fc89-8a81-483d-b44a-5494dbf5eade");
}

.panel-kalakand .panel-image {
  background: center/cover no-repeat url("https://www.figma.com/api/mcp/asset/bca111ab-5dc1-410b-bb29-dcb299efa0b6");
}

.panel-milk-cake .panel-image {
  background: center/cover no-repeat url("https://www.figma.com/api/mcp/asset/c21a3602-74d5-4f5a-9da7-c84e200a884e");
}

.panel-pista-roll .panel-image {
  background: center/cover no-repeat url("https://www.figma.com/api/mcp/asset/2e84f6a8-575c-43ff-888f-2153c2c314ba");
}

.product-grid {
  display: grid;
  gap: 24px;
}

.four-up {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.product-card {
  overflow: hidden;
  border: 1px solid #f0efef;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.product-image {
  aspect-ratio: 1 / 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.image-ribbon {
  background-image: url("https://www.figma.com/api/mcp/asset/afada8fa-38d3-4dfa-9e93-a34e0400a6f8");
}

.image-badusha {
  background-image: url("https://www.figma.com/api/mcp/asset/b5ffc47c-a1a1-498a-8556-4e07bb679583");
}

.image-kaju-katli {
  background-image: url("https://www.figma.com/api/mcp/asset/73cefbc0-f495-4761-9319-6426f7a022c9");
}

.image-dates-mysore {
  background-image: url("https://www.figma.com/api/mcp/asset/240a6f90-a055-4a26-880d-35518ddc2055");
}

.image-saffron {
  background-image: url("https://www.figma.com/api/mcp/asset/297637e1-97ed-4b66-87a8-b11d173248c4");
}

.image-red {
  background-image: url("https://www.figma.com/api/mcp/asset/3b0da0e9-d7dd-4c44-9c0b-566ddeac00d0");
}

.image-banaras {
  background-image: url("https://www.figma.com/api/mcp/asset/55575c69-1007-4718-b5b1-f9eea0aa61ed");
}

.image-jangiri {
  background-image: url("https://www.figma.com/api/mcp/asset/2c2daff5-29ee-4734-a7e1-66e252946862");
}

.image-kaju-katli-premium {
  background-image: url("https://www.figma.com/api/mcp/asset/18bee5af-054b-4edf-91c2-017b1ab38506");
}

.image-mix {
  background-image: url("https://www.figma.com/api/mcp/asset/12fcbef8-71a8-4e97-888f-177f18cc9323");
}

.image-twist {
  background-image: url("https://www.figma.com/api/mcp/asset/a6367c13-7c2f-4388-9ced-2edc175aa1cb");
}

.image-special-mixture {
  background-image: url("https://www.figma.com/api/mcp/asset/496ff547-6fee-49a8-bd01-b7fe6b0a50ef");
}

.image-kai-murukku {
  background-image: url("https://www.figma.com/api/mcp/asset/8ed534e0-abe3-4f4b-b558-e1a671680b35");
}

.image-kara-sev {
  background-image: url("https://www.figma.com/api/mcp/asset/7517afe6-3a01-48fb-90d7-46857caef050");
}

.image-choco-chip-cookies {
  background-image: url("https://www.figma.com/api/mcp/asset/654e5727-b63d-4790-8899-b6c45dad7809");
}

.image-peanut-cookies-premium {
  background-image: url("https://www.figma.com/api/mcp/asset/4be992bc-595d-4274-9ee4-3ff876a50299");
}

.image-red-velvet-cookies {
  background-image: url("https://www.figma.com/api/mcp/asset/52b1612d-f906-4bf3-bdf5-bc23326814d4");
}

.image-russet {
  background: linear-gradient(135deg, #582414, #a64018 55%, #d46b31);
}

.image-green {
  background: linear-gradient(135deg, #284625, #86a44a 55%, #d1d58b);
}

.image-leaf {
  background: linear-gradient(135deg, #27492d, #658244 55%, #d9cb8a);
}

.image-tea {
  background: linear-gradient(135deg, #705136, #cc9b61 55%, #edd5a9);
}

.image-almond {
  background: linear-gradient(135deg, #705034, #b77d45 55%, #e1bf88);
}

.image-berry {
  background: linear-gradient(135deg, #6b151f, #b22034 55%, #e26675);
}

.image-motichoor {
  background-image: url("https://www.figma.com/api/mcp/asset/5ddc7808-1ddc-439f-93a3-3c80036b2b87");
}

.image-palkova {
  background-image: url("https://www.figma.com/api/mcp/asset/01c8d6dd-9706-42bb-bbba-f3341f877060");
}

.image-kara-sev-bowl {
  background-image: url("https://www.figma.com/api/mcp/asset/3c98b0b2-81ff-43ed-8149-8659bd135e44");
}

.image-kaju-pista-roll {
  background-image: url("https://www.figma.com/api/mcp/asset/da60756b-05bb-40c0-b005-919aa53c5953");
}

.image-coconut-cookies {
  background-image: url("https://www.figma.com/api/mcp/asset/3d8a8378-8df2-41b2-8c59-f28b36627d70");
}

.image-butter-cookies {
  background-image: url("https://www.figma.com/api/mcp/asset/18b73da8-a7ad-4bc7-87d2-e795dac53220");
}

.image-oat-raisin {
  background-image: url("https://www.figma.com/api/mcp/asset/f1e18e96-63be-45f8-8c28-6172aaab9de5");
}

.image-peanut-cookies {
  background-image: url("https://www.figma.com/api/mcp/asset/ef1c0816-df52-4190-bc6b-6597e2c5ca67");
}

.product-copy {
  padding: 16px;
}

.product-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}

.rating-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: var(--muted-2);
  font-size: 12px;
}

.stars {
  color: #f4a509;
  letter-spacing: 0.08em;
}

.product-meta {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}

.product-meta span {
  color: #4b4848;
  font-size: 14px;
  font-weight: 400;
}

.size-options {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.size-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border: 0.5px solid var(--line-2);
  border-radius: 24px;
  color: #4b4848;
  background: #ffffff;
  font-size: 14px;
  line-height: 1;
}

.size-chip.active {
  border-color: var(--brand-soft-line);
  color: var(--brand);
  background: var(--brand-soft);
}

.product-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}

.cart-button {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: 32px;
  background: #f0efef;
  color: #2f2d2d;
  font-size: 16px;
  font-weight: 600;
}

.wish-button {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background:
    center/24px 24px no-repeat url("https://www.figma.com/api/mcp/asset/f747c121-e6d0-41ab-94d6-a0c6bc168248"),
    #f0efef;
}

.compact-card .product-copy {
  padding: 12px 14px 14px;
}

.compact-card .product-meta {
  margin-top: 6px;
}

.split-banner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.banner-card {
  min-height: 320px;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: var(--shadow);
}

.banner-card::before {
  content: "";
  position: absolute;
  inset: 0;
}

.banner-red::before {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.38)),
    center/cover no-repeat url("https://www.figma.com/api/mcp/asset/834f35ca-090a-4743-a061-8f3a9837732d");
}

.banner-yellow::before {
  background:
    linear-gradient(180deg, rgba(67, 32, 8, 0.08), rgba(67, 32, 8, 0.42)),
    linear-gradient(135deg, #f2b351, #7f401d);
}

.banner-copy {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 32px;
  z-index: 1;
  color: #ffffff;
}

.banner-tag {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.banner-copy h3 {
  margin-top: 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  line-height: 1.02;
}

.assurance-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
}

.assurance-card {
  padding: 0 10px 0;
  min-height: 188px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  background: #ffffff;
}

.assurance-card + .assurance-card {
  border-left: 1px solid var(--line);
}

.assurance-icon {
  width: 124px;
  height: 96px;
  margin-top: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.assurance-fast {
  background-image: url("https://www.figma.com/api/mcp/asset/56f981c0-d2b1-4036-b286-e0bb0b4f980e");
}

.assurance-quality {
  background-image: url("https://www.figma.com/api/mcp/asset/428a1877-1b53-4f1c-b7a9-096fd1aa2ccc");
}

.assurance-fresh {
  background-image: url("https://www.figma.com/api/mcp/asset/3448c1be-1bae-4d43-bc1d-acd2f8a96ada");
}

.assurance-veg {
  background-image: url("https://www.figma.com/api/mcp/asset/8cc5e6e2-aabd-4545-957c-6a6893bcf2da");
}

.assurance-card strong {
  margin-top: 24px;
  display: block;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.1;
}

.assurance-card p {
  margin-top: 8px;
  width: 175px;
  color: #2f2d2d;
  font-size: 12px;
  line-height: 1.5;
}

.tradition-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.story-card {
  min-height: 392px;
  padding: 30px 24px 24px;
  border-radius: 16px;
  border: 1px solid #ebe0d1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.story-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.45;
  pointer-events: none;
}

.story-sweets {
  background: linear-gradient(180deg, #dff1f2 0%, #f2fbfb 100%);
}

.story-sweets::before {
  background:
    radial-gradient(circle at 14px 14px, rgba(161, 1, 1, 0.16) 0 2px, transparent 2.5px) 0 0 / 22px 22px;
}

.story-snacks {
  background: linear-gradient(180deg, #ffedf1 0%, #fff8fa 100%);
}

.story-snacks::before {
  background:
    radial-gradient(circle at 14px 14px, rgba(161, 1, 1, 0.16) 0 2px, transparent 2.5px) 0 0 / 22px 22px;
}

.story-cookies {
  background: linear-gradient(180deg, #fff0eb 0%, #fff8f6 100%);
}

.story-cookies::before {
  background:
    radial-gradient(circle at 14px 14px, rgba(161, 1, 1, 0.16) 0 2px, transparent 2.5px) 0 0 / 22px 22px;
}

.story-kicker {
  display: inline-block;
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

.story-card h3 {
  color: var(--brand-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 32px;
  margin-top: 14px;
  position: relative;
  z-index: 1;
}

.story-card p {
  margin-top: 14px;
  color: #514b4b;
  line-height: 1.72;
  position: relative;
  z-index: 1;
}

.story-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.story-actions button,
.story-actions a {
  height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(161, 1, 1, 0.15);
  border-radius: var(--radius-pill);
  color: var(--brand-dark);
  background: rgba(255, 255, 255, 0.78);
}

.story-actions button {
  width: 40px;
  padding: 0;
  text-indent: -9999px;
  overflow: hidden;
  background:
    center/16px 16px no-repeat url("https://www.figma.com/api/mcp/asset/85f82bd4-f944-4a94-994d-cb80ccc1d9ff"),
    rgba(255, 255, 255, 0.78);
}

.story-actions button:last-child {
  transform: scaleX(-1);
}

.story-actions a {
  font-size: 15px;
  font-weight: 600;
}

.selection-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.selection-tile {
  min-height: 364px;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(144, 111, 70, 0.18);
}

.selection-tile::before {
  content: "";
  position: absolute;
  inset: 0;
}

.tile-laddu::before {
  background: center/cover no-repeat url("https://www.figma.com/api/mcp/asset/5c442a70-f395-42ea-bf7a-2d25d637e9e1");
}

.tile-burfi::before {
  background: center/cover no-repeat url("https://www.figma.com/api/mcp/asset/70aac95f-7b44-408b-85a6-28351d7a281d");
}

.tile-halwa::before {
  background: center/cover no-repeat url("https://www.figma.com/api/mcp/asset/3f4c5ef2-d302-4933-968d-5f49e616913b");
}

.tile-snack::before {
  background: center/cover no-repeat url("https://www.figma.com/api/mcp/asset/14d8fdfe-56fb-4df2-936e-a5ffe4e461a7");
}

.tile-murukku::before {
  background: center/cover no-repeat url("https://www.figma.com/api/mcp/asset/1d5c1216-2aae-4739-8ac0-7619d5360867");
}

.tile-cookie::before {
  background: center/cover no-repeat url("https://www.figma.com/api/mcp/asset/553c3a05-5247-4fd7-853c-a70eb76d7588");
}

.selection-tile::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 250, 243, 0.9);
  border-radius: 20px;
  pointer-events: none;
}

.selection-overlay {
  position: absolute;
  inset: auto 0 0;
  padding: 26px 24px 24px;
  color: #fffaf3;
  text-align: center;
  background: linear-gradient(180deg, rgba(26, 10, 4, 0), rgba(26, 10, 4, 0.82));
}

.selection-overlay h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  line-height: 1;
}

.selection-overlay p {
  margin-top: 8px;
  font-size: 14px;
  letter-spacing: 0.08em;
  opacity: 0.9;
  text-transform: uppercase;
}

.festive-banner {
  min-height: 320px;
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid #efdfbf;
  border-radius: 24px;
  box-shadow: var(--shadow);
  background:
    linear-gradient(180deg, rgba(254, 241, 216, 0.26), rgba(251, 218, 151, 0.48)),
    center/cover no-repeat url("https://www.figma.com/api/mcp/asset/93eb6663-60de-4077-bcca-7b76c8bfe4f6");
  overflow: hidden;
}

.festive-banner::before,
.festive-banner::after {
  content: "";
  position: absolute;
  top: 18px;
  width: 168px;
  height: 168px;
  opacity: 0.95;
}

.festive-banner::before {
  left: 24px;
  background: center/contain no-repeat url("https://www.figma.com/api/mcp/asset/e83527df-d01a-4cb8-8c99-1d3508b774d4");
}

.festive-banner::after {
  right: 24px;
  background: center/contain no-repeat url("https://www.figma.com/api/mcp/asset/3e8782e1-ba74-418f-991a-f6e776cb6250");
}

.festive-copy::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(161, 1, 1, 0.24);
  border-radius: 18px;
  background: center/cover no-repeat url("https://www.figma.com/api/mcp/asset/aaa793d7-21db-4024-8532-e3c7ac0f4101");
  opacity: 0.22;
  pointer-events: none;
}

.festive-copy {
  width: min(100%, 540px);
  text-align: center;
  position: relative;
  padding: 48px 40px;
  border-radius: 22px;
  background: rgba(255, 248, 234, 0.62);
  backdrop-filter: blur(1px);
}

.festive-copy h2 {
  margin-top: 8px;
  color: var(--brand);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
}

.festive-copy p {
  margin-top: 12px;
  color: var(--muted);
  line-height: 1.7;
}

.festive-copy a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 138px;
  height: 40px;
  margin-top: 20px;
  border-radius: var(--radius-pill);
  color: #fff8f0;
  background: var(--brand);
}

.site-footer {
  padding: 64px 0 28px;
  border-top: 1px solid rgba(161, 1, 1, 0.08);
  background: linear-gradient(180deg, #fff9ec 0%, #fff1d4 100%);
}

.footer-brand {
  text-align: center;
}

.footer-logo {
  font-size: 0;
}

.footer-logo .brand-mark {
  margin: 0 auto;
  width: 113px;
  height: 64px;
  background-image: url("https://www.figma.com/api/mcp/asset/60493e9a-8090-44c7-8439-d5d5cfba9608");
}

.footer-divider {
  width: 100%;
  height: 1px;
  margin-top: 40px;
  background: center/cover no-repeat url("https://www.figma.com/api/mcp/asset/dddc783a-d25d-49c1-9500-54b714ff043d");
}

.footer-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 32px;
}

.footer-grid h3 {
  margin-bottom: 16px;
  color: #2f2d2d;
  font-size: 24px;
  font-weight: 600;
}

.footer-grid a,
.license {
  display: block;
  margin-top: 12px;
  color: #2f2d2d;
  line-height: 1.5;
  font-size: 16px;
}

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.socials span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(161, 1, 1, 0.14);
  border-radius: 999px;
  color: var(--brand-dark);
  background: rgba(255, 255, 255, 0.54);
  font-size: 12px;
}

.social-strip {
  width: 280px;
  height: 32px;
  margin-top: 0;
  background: center/contain no-repeat url("https://www.figma.com/api/mcp/asset/9c8c6b7f-8b28-46df-822e-5445780400c3");
}

.fssai-mark {
  display: block;
  width: 86px;
  height: 66px;
  margin-top: 18px;
  background: center/contain no-repeat url("https://www.figma.com/api/mcp/asset/a358d681-0030-4e72-9616-96e7c41f97a2");
}

.footer-bottom {
  margin-top: 44px;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid #d2d0d0;
  color: #948f8f;
  font-size: 16px;
}

@media (max-width: 1100px) {
  .category-strip {
    gap: 30px;
  }

  .four-up,
  .footer-grid,
  .tradition-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .selection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

@media (max-width: 820px) {
  .mobile-status {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 26px 0 21px;
    background: #ffffff;
    position: relative;
    overflow: hidden;
  }

  .mobile-notch {
    position: absolute;
    left: 50%;
    top: -2px;
    width: 164px;
    height: 32px;
    transform: translateX(-50%);
    background: center/contain no-repeat url("https://www.figma.com/api/mcp/asset/c9b08c19-abe1-47cb-b29f-b724fb63c264");
  }

  .mobile-time {
    color: #010101;
    font-size: 17px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: -0.408px;
    position: relative;
    z-index: 1;
  }

  .mobile-right-icons {
    width: 77px;
    height: 13px;
    background: center/contain no-repeat url("https://www.figma.com/api/mcp/asset/92b9aeb0-e90f-42f7-a24c-913a1c16e456");
    position: relative;
    z-index: 1;
  }

  .promo-inner,
  main,
  .site-footer {
    width: min(calc(100% - 32px), var(--content));
  }

  .promo-inner {
    width: 100%;
    min-height: 28px;
    padding: 0;
  }

  .promo-copy {
    width: auto;
    padding-left: 0;
    font-size: 11px;
  }

  .promo-copy::before {
    display: none;
  }

  .promo-close {
    display: none;
  }

  .site-header {
    position: relative;
  }

  .header-main {
    min-height: 60px;
    width: 100%;
    padding: 0 16px;
    border-top: 1px solid #e1e0e0;
    border-bottom: 1px solid #e1e0e0;
  }

  .mobile-menu {
    display: block;
    position: absolute;
    left: 16px;
    top: 50%;
    width: 24px;
    height: 24px;
    border: 0;
    padding: 0;
    transform: translateY(-50%);
    background: center/contain no-repeat url("https://www.figma.com/api/mcp/asset/0db95968-4082-4ec3-8de2-0feaedd9807e");
  }

  .delivery-location {
    display: none;
  }

  .brand {
    top: 50%;
  }

  .brand-mark {
    width: 47.01px;
    height: 23.51px;
    background-image: url("https://www.figma.com/api/mcp/asset/04dd1f91-50ee-4866-832c-ec33db0a72d1");
  }

  .desktop-sub {
    display: none;
  }

  .mobile-sub {
    display: block;
    color: #000000;
    font-size: 8.49px;
    font-weight: 300;
    letter-spacing: 0.4245px;
  }

  .header-actions {
    right: 16px;
    gap: 0;
  }

  .account-link,
  .search-link {
    display: none;
  }

  .category-strip {
    display: none;
  }

  .hero {
    min-height: 221px;
    width: calc(100% - 32px);
    margin-top: 12px;
    border-radius: 16px;
    background-position: center;
  }

  .hero-copy {
    max-width: 220px;
    padding: 24px 0 0 12px;
  }

  .hero-kicker {
    margin-bottom: 6px;
    font-size: 10px;
  }

  h1 {
    font-size: 36px;
  }

  .hero-cta {
    min-width: 88px;
    height: 30px;
    margin-top: 12px;
    font-size: 12px;
  }

  .section {
    margin-top: 40px;
  }

  .section-heading {
    gap: 10px;
    margin-bottom: 18px;
  }

  .section-heading h2 {
    font-size: 28px;
  }

  .ornament {
    width: 28px;
    height: 14px;
  }

  .feature-panels,
  .four-up,
  .split-banner,
  .footer-grid,
  .selection-grid,
  .tradition-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .feature-panel {
    min-height: 160px;
  }

  .feature-panel h3 {
    bottom: 14px;
    width: calc(100% - 16px);
    font-size: 16px;
  }

  .product-card {
    border-radius: 12px;
  }

  .product-copy {
    padding: 10px;
  }

  .product-title {
    font-size: 14px;
  }

  .rating-row {
    margin-top: 6px;
    font-size: 10px;
  }

  .product-meta {
    margin-top: 6px;
    font-size: 14px;
  }

  .product-meta span {
    font-size: 12px;
  }

  .size-options {
    gap: 6px;
    margin-top: 10px;
  }

  .size-chip {
    padding: 5px 8px;
    font-size: 11px;
  }

  .product-actions {
    gap: 10px;
    margin-top: 10px;
  }

  .cart-button {
    height: 36px;
    font-size: 14px;
  }

  .wish-button {
    width: 36px;
    height: 36px;
    background-size: 20px 20px;
  }

  .assurance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .assurance-card {
    min-height: 156px;
    padding: 0 0 12px;
  }

  .assurance-card:nth-child(3),
  .assurance-card:nth-child(4) {
    border-top: 1px solid var(--line);
  }

  .assurance-card:nth-child(3) {
    border-left: 0;
  }

  .assurance-icon {
    width: 84px;
    height: 64px;
  }

  .assurance-card strong {
    margin-top: 16px;
    font-size: 14px;
  }

  .assurance-card p {
    width: 100%;
    max-width: 150px;
    font-size: 12px;
    line-height: 1.3;
    color: var(--muted);
  }

  .story-card {
    min-height: 0;
    padding: 18px 16px;
    grid-column: span 2;
  }

  .story-card h3 {
    font-size: 24px;
  }

  .story-card p {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.5;
  }

  .story-actions {
    margin-top: 18px;
  }

  .story-actions button,
  .story-actions a {
    height: 34px;
    padding: 0 10px;
    font-size: 12px;
  }

  .selection-tile {
    min-height: 188px;
  }

  .selection-overlay {
    padding: 16px 12px 14px;
  }

  .selection-overlay h3 {
    font-size: 20px;
  }

  .selection-overlay p {
    font-size: 10px;
  }

  .banner-card,
  .festive-banner {
    min-height: 200px;
  }

  .banner-copy {
    left: 18px;
    right: 18px;
    bottom: 18px;
  }

  .banner-copy h3 {
    font-size: 24px;
  }

  .site-footer {
    padding-top: 40px;
  }

  .festive-banner::before,
  .festive-banner::after {
    width: 84px;
    height: 84px;
    top: 18px;
  }

  .festive-banner::before {
    left: 6px;
  }

  .festive-banner::after {
    right: 6px;
  }

  .festive-copy {
    width: calc(100% - 24px);
    padding: 26px 18px;
  }

  .footer-grid {
    margin-top: 32px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }

  .footer-bottom {
    margin-top: 28px;
    flex-direction: column;
    gap: 8px;
  }
}