/* ============================================================
   CHOUX BOX — Main Stylesheet
   Brand: Avenir font family, BEM methodology
   ============================================================ */

/* ----- CSS Custom Properties (Design Tokens) ----- */
:root {
    /* primary colours */
    --color-golden-bun:     #B7792B;
    --color-vanilla:        #FFF7E2;
    --color-meringue-pink:  #F6B8A3;
    --color-raspberry-red:  #7F082F;
    --color-creme-pat:      #F0E0B7;
    --color-black:          #000000;

    /* secondary colours */
    --color-sprinkle-blue:  #2B5F7F;
    --color-solero-yellow:  #F2C84C;
    --color-chocolate-brown:#5C3A1E;

    /* functional */
    --color-white:          #ffffff;
    --color-golden-bun-dark:#8C5B18;
    --color-bg:             var(--color-vanilla);
    --color-text:           var(--color-black);
    --color-text-light:     var(--color-golden-bun-dark);
    --color-text-muted:     #4a3728;
    --color-border:         var(--color-creme-pat);
    --color-error:          var(--color-raspberry-red);
    --color-success:        #2d7d46;
    --color-overlay:        rgba(0, 0, 0, 0.45);

    /* alert colours */
    --color-alert-success-bg:     #e8f5e9;
    --color-alert-success-border: #c8e6c9;
    --color-alert-error-bg:       #fce4ec;
    --color-alert-error-border:   #f8bbd0;
    --color-alert-info-bg:        #e3f2fd;
    --color-alert-info-border:    #bbdefb;
    --color-alert-warning-bg:     #fff8e1;

    /* drip SVG (meringue pink fill) */
    --page-header-drip-svg: url("data:image/svg+xml,%3Csvg width='1716' height='171' viewBox='0 0 1716 171' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1715.8 0V68.9375C1715.8 73.1539 1693.65 120.166 1683.53 80.9541C1673.41 41.7422 1659.7 47.2238 1654.64 49.332C1646.46 52.738 1642.41 82.0044 1632.28 87.0684C1622.15 92.1322 1621.73 70.4138 1611.4 92.9707L1610.99 93.8711C1600.31 117.171 1599.23 119.534 1587.78 119.534C1575.9 119.534 1575.97 86.0142 1568.37 59.2402C1560.92 32.9633 1552.13 32.4662 1547.91 41.7422C1543.7 51.0182 1539.08 70.2836 1521.76 62.6133C1505.1 55.2344 1511 26.7744 1498.98 26.7744C1486.96 26.7764 1475.36 110.891 1469.46 133.659C1463.55 156.428 1459.75 170.13 1445.83 170.974C1428.96 171.995 1423.05 142.514 1421.37 130.708C1419.68 118.902 1416.73 82.9623 1402.6 91.7061C1393.74 97.1873 1394.16 97.3984 1387.41 97.3984C1380.66 97.3984 1372.01 83.0624 1370.75 72.5215C1369.74 64.0889 1369.48 58.6077 1362.73 52.2832C1360.48 52.002 1354.72 49.7538 1350.92 59.6621C1348.15 66.8903 1332.43 72.0943 1315.7 56.0781C1300.73 41.7425 1297.35 21.0821 1287.02 21.082C1280.8 21.082 1274.71 34.1527 1272.89 41.7422C1269.65 66.3377 1263.56 114.855 1260.86 122.275C1257.49 131.551 1246.94 143.567 1235.34 140.405C1224.76 137.519 1218.47 118.059 1214.25 95.7119C1210.03 73.3651 1199.49 82.6414 1193.16 82.2197C1186.84 81.7981 1184.3 81.3758 1178.82 65.7754C1174.43 53.295 1164.22 52.3479 1158.57 53.7588C1152.77 55.2075 1145.56 64.7799 1143.9 68.9209V68.9375C1143.9 73.1539 1121.75 120.166 1111.63 80.9541C1101.51 41.7426 1087.8 47.2238 1082.74 49.332C1074.56 52.7375 1070.51 82.0039 1060.38 87.0684C1050.25 92.1324 1049.83 70.4135 1039.5 92.9707L1039.09 93.8711C1028.41 117.171 1027.33 119.534 1015.88 119.534C1004 119.533 1004.07 86.0139 996.473 59.2402C989.021 32.9634 980.233 32.4663 976.015 41.7422C971.797 51.0182 967.182 70.2836 949.862 62.6133C933.2 55.2346 939.105 26.7745 927.083 26.7744C915.061 26.7744 903.461 110.891 897.556 133.659C891.65 156.428 887.854 170.13 873.934 170.974C857.061 171.996 851.155 142.514 849.468 130.708C847.781 118.902 844.828 82.9621 830.697 91.7061C821.839 97.1872 822.26 97.3984 815.511 97.3984C808.762 97.3978 800.115 83.0622 798.85 72.5215C797.838 64.0889 797.584 58.6076 790.835 52.2832C788.585 52.0021 782.82 49.7536 779.024 59.6621C776.254 66.8902 760.532 72.0939 743.802 56.0781C728.827 41.7425 725.452 21.082 715.117 21.082C708.895 21.0827 702.814 34.1529 700.987 41.7422C697.753 66.3377 691.665 114.855 688.965 122.275C685.59 131.551 675.045 143.568 663.445 140.405C652.856 137.518 646.572 118.058 642.354 95.7119C638.136 73.3655 627.59 82.641 621.263 82.2197C614.936 81.7981 612.405 81.3759 606.921 65.7754C602.534 53.295 592.32 52.3479 586.672 53.7588C580.875 55.2071 573.662 64.7799 571.999 68.9209V68.9375C571.999 73.1539 549.853 120.166 539.73 80.9541C529.606 41.7422 515.897 47.2238 510.835 49.332C502.659 52.738 498.611 82.0044 488.479 87.0684C478.346 92.1322 477.933 70.4138 467.599 92.9707L467.187 93.8711C456.514 117.171 455.431 119.534 443.977 119.534C432.098 119.534 432.166 86.0142 424.573 59.2402C417.122 32.9633 408.333 32.4662 404.115 41.7422C399.896 51.0182 395.282 70.2836 377.961 62.6133C361.3 55.2344 367.205 26.7744 355.183 26.7744C343.161 26.7764 331.561 110.891 325.656 133.659C319.75 156.428 315.954 170.13 302.033 170.974C285.161 171.995 279.255 142.514 277.568 130.708C275.88 118.902 272.928 82.9623 258.797 91.7061C249.939 97.1873 250.361 97.3984 243.612 97.3984C236.862 97.3984 228.215 83.0624 226.949 72.5215C225.937 64.0889 225.684 58.6077 218.935 52.2832C216.685 52.002 210.921 49.7538 207.124 59.6621C204.355 66.8903 188.632 72.0943 171.902 56.0781C156.927 41.7425 153.553 21.0821 143.218 21.082C136.996 21.082 130.915 34.1527 129.087 41.7422C125.853 66.3377 119.764 114.855 117.065 122.275C113.69 131.551 103.145 143.567 91.5452 140.405C80.9564 137.519 74.6716 118.059 70.4534 95.7119C66.2352 73.3651 55.6899 82.6414 49.3625 82.2197C43.0354 81.7981 40.5044 81.3758 35.0208 65.7754C30.6338 53.295 20.4192 52.3479 14.7717 53.7588C8.86514 55.2348 1.48815 65.1428 0.0100098 69.1484C-0.0127673 69.2102 0.0100098 0 0.0100098 0H1715.8Z' fill='%23F6B8A3'/%3E%3C/svg%3E");

    /* typography — Avenir with system fallbacks */
    --font-body:            'Avenir', 'Avenir Next', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* sizing scale (baseline 16px) */
    --text-xs:    0.75rem;    /* 12px */
    --text-sm:    0.875rem;   /* 14px */
    --text-base:  1rem;       /* 16px */
    --text-md:    1.125rem;   /* 18px */
    --text-lg:    1.25rem;    /* 20px — sub heading */
    --text-xl:    1.5rem;     /* 24px */
    --text-2xl:   2rem;       /* 32px */
    --text-3xl:   2.75rem;    /* 44px — heading */
    --text-4xl:   3.5rem;     /* 56px */

    /* spacing */
    --space-xs:   0.25rem;
    --space-sm:   0.5rem;
    --space-md:   1rem;
    --space-lg:   1.5rem;
    --space-xl:   2rem;
    --space-2xl:  3rem;
    --space-3xl:  4rem;
    --space-4xl:  6rem;
    --space-5xl:  8rem;

    /* layout */
    --container-max:   1280px;
    --container-narrow: 960px;
    --header-height:   84px;
    --border-radius:   4px;
    --border-radius-lg: 8px;
    --border-radius-xl: 16px;
    --border-radius-full: 9999px;

    /* transitions */
    --transition-fast:  150ms ease;
    --transition-base:  300ms ease;
    --transition-slow:  500ms ease;

    /* shadows */
    --shadow-sm:   0 1px 2px rgba(0,0,0,0.06);
    --shadow-md:   0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg:   0 8px 30px rgba(0,0,0,0.12);
}


/* ----- Reset & Base ----- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: var(--text-base);
    line-height: 1.3;
    color: var(--color-text);
    background-color: var(--color-bg);
    text-align: left;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

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

ul, ol {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}


/* ----- Typography ----- */
h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.1;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl);  }
h4 { font-size: var(--text-lg);  }

.subheading {
    font-weight: 300;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: var(--text-lg);
    line-height: 1.2;
}


/* ----- Utility Classes ----- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

.container--narrow {
    max-width: var(--container-narrow);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

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


/* ============================================================
   COMPONENTS
   ============================================================ */

/* ----- Announcement Bar ----- */
.announcement-bar {
    background-color: var(--color-black);
    color: var(--color-vanilla);
    padding: var(--space-sm) var(--space-md);
    text-align: center;
    font-size: var(--text-xs);
    letter-spacing: 0.04em;

}

.announcement-bar__text {
    margin: 0;
}


/* ----- Header ----- */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-creme-pat);
    height: var(--header-height);
}

.header__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-xl);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header__logo {
    display: grid;
    place-items: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    background-color: var(--color-white);
    padding: var(--space-sm) var(--space-lg) var(--space-md);
    border-radius: 0 0 var(--border-radius-xl) var(--border-radius-xl);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 10;
    transition: padding 0.5s ease, border-radius 0.5s ease,
                box-shadow 0.5s ease, background-color 0.5s ease,
                top 0.5s ease, transform 0.5s ease;
}

.header__logo-img {
    width: auto;
    grid-area: 1 / 1;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.header__logo-img--full {
    height: 144px;
    opacity: 1;
    transform: scale(1);
}

.header__logo-img--sticky {
    height: 52px;
    opacity: 0;
    transform: scale(0.8);
}

/* scrolled / sticky state */
.header--scrolled .header__logo {
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    padding: var(--space-xs) var(--space-md);
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
}

.header--scrolled .header__logo-img--full {
    opacity: 0;
    transform: scale(0.6);
}

.header--scrolled .header__logo-img--sticky {
    opacity: 1;
    transform: scale(1);
}

.header__nav-list {
    display: flex;
    gap: var(--space-xl);
}

.header__nav-link {
    font-weight: 300;
    font-size: var(--text-base);

    letter-spacing: 0.03em;
    padding: var(--space-xs) 0;
    position: relative;
    transition: color var(--transition-fast);
}

.header__nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--color-golden-bun);
    transition: width var(--transition-base);
}

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

.header__nav-link:hover,
.header__nav-link--active {
    color: var(--color-golden-bun);
}

.header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.header__action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius-full);
    transition: background-color var(--transition-fast);
}

.header__action-btn:hover {
    background-color: var(--color-creme-pat);
}

.header__action-icon {
    width: 20px;
    height: 20px;
}

.header__cart-btn {
    position: relative;
}

.header__cart-count {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    background-color: var(--color-raspberry-red);
    color: var(--color-vanilla);
    font-size: 10px;
    font-weight: 600;
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-fast);
}

.header__cart-count:empty,
.header__cart-count[data-count="0"] {
    display: none;
}

/* mobile menu toggle */
.header__menu-toggle {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.header__menu-icon,
.header__menu-icon::before,
.header__menu-icon::after {
    display: block;
    width: 20px;
    height: 1.5px;
    background-color: var(--color-black);
    transition: var(--transition-base);
}

.header__menu-icon {
    position: relative;
}

.header__menu-icon::before,
.header__menu-icon::after {
    content: '';
    position: absolute;
    left: 0;
}

.header__menu-icon::before { top: -6px; }
.header__menu-icon::after  { top: 6px; }

/* active hamburger → X */
.header__menu-toggle--active .header__menu-icon {
    background-color: transparent;
}
.header__menu-toggle--active .header__menu-icon::before {
    top: 0;
    transform: rotate(45deg);
}
.header__menu-toggle--active .header__menu-icon::after {
    top: 0;
    transform: rotate(-45deg);
}


/* ----- Search Overlay ----- */
.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background-color: var(--color-overlay);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 120px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}

.search-overlay--open {
    opacity: 1;
    visibility: visible;
}

.search-overlay__container {
    width: 100%;
    max-width: 640px;
    padding: 0 var(--space-xl);
}

.search-overlay__form {
    display: flex;
    align-items: center;
    background-color: var(--color-vanilla);
    border-radius: var(--border-radius-lg);
    padding: var(--space-md) var(--space-lg);
    gap: var(--space-md);
    box-shadow: var(--shadow-lg);
}

.search-overlay__input {
    flex: 1;
    border: none;
    background: var(--color-white);
    font-size: var(--text-lg);
    outline: none;

}

.search-overlay__close {
    display: flex;
    opacity: 0.5;
    transition: opacity var(--transition-fast);
}

.search-overlay__close:hover {
    opacity: 1;
}


/* ----- Cart Drawer ----- */
.cart-drawer {
    position: fixed;
    inset: 0;
    z-index: 150;
    pointer-events: none;
}

.cart-drawer--open {
    pointer-events: auto;
}

.cart-drawer__overlay {
    position: absolute;
    inset: 0;
    background-color: var(--color-overlay);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.cart-drawer--open .cart-drawer__overlay {
    opacity: 1;
}

.cart-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 100%;
    background-color: var(--color-white);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--transition-base);
    box-shadow: var(--shadow-lg);
}

.cart-drawer--open .cart-drawer__panel {
    transform: translateX(0);
}

.cart-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid var(--color-border);
}

.cart-drawer__title {
    font-size: var(--text-lg);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cart-drawer__close {
    display: flex;
    opacity: 0.5;
    transition: opacity var(--transition-fast);
}

.cart-drawer__close:hover {
    opacity: 1;
}

.cart-drawer__items {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-lg) var(--space-xl);
}

.cart-drawer__empty {
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--space-3xl) 0;
    font-style: italic;
}

.cart-drawer__footer {
    border-top: 1px solid var(--color-border);
    padding: var(--space-lg) var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.cart-drawer__subtotal {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    font-size: var(--text-md);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}


/* ----- Cart Item ----- */
.cart-item {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-border);
}

.cart-item__image {
    width: 72px;
    height: 72px;
    border-radius: var(--border-radius);
    overflow: hidden;
    flex-shrink: 0;
    background-color: var(--color-white);
    border: 1.5px solid var(--color-creme-pat);
}

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

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

.cart-item__name {
    font-weight: 600;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.cart-item__price {
    font-size: var(--text-sm);
    color: var(--color-golden-bun-dark);
}

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

.cart-item__qty-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: var(--text-sm);
    transition: border-color var(--transition-fast);
}

.cart-item__qty-btn:hover {
    border-color: var(--color-golden-bun);
}

.cart-item__qty {
    font-size: var(--text-sm);
    min-width: 20px;
    text-align: center;
}

.cart-item__remove {
    margin-left: auto;
    font-size: var(--text-xs);
    color: var(--color-raspberry-red);

    opacity: 0.7;
    transition: opacity var(--transition-fast);
}

.cart-item__remove:hover {
    opacity: 1;
}


/* ----- Buttons ----- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: var(--border-radius);
    border: 1.5px solid transparent;
    transition: all var(--transition-fast);
    cursor: pointer;
    line-height: 1;
    text-decoration: none;
}

.btn--primary {
    background-color: var(--color-meringue-pink);
    color: var(--color-chocolate-brown);
    border-color: var(--color-meringue-pink);
}

.btn--primary:hover {
    background-color: var(--color-raspberry-red);
    color: var(--color-white);
    border-color: var(--color-raspberry-red);
}

.btn--secondary {
    background-color: var(--color-golden-bun);
    color: var(--color-white);
    border-color: var(--color-golden-bun);
}

.btn--secondary:hover {
    background-color: var(--color-chocolate-brown);
    border-color: var(--color-chocolate-brown);
}

.btn--outline {
    background-color: transparent;
    color: var(--color-black);
    border-color: var(--color-black);
}

.btn--outline:hover {
    background-color: var(--color-black);
    color: var(--color-vanilla);
}

.btn--outline-light {
    background-color: transparent;
    color: var(--color-vanilla);
    border-color: var(--color-vanilla);
}

.btn--outline-light:hover {
    background-color: var(--color-vanilla);
    color: var(--color-black);
}

.btn--ghost {
    background-color: transparent;
    color: var(--color-golden-bun-dark);
    border-color: transparent;
    padding: var(--space-sm) 0;
}

.btn--ghost:hover {
    color: var(--color-chocolate-brown);
}

.btn--small {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-xs);
}

.btn--large {
    padding: var(--space-lg) var(--space-2xl);
    font-size: var(--text-base);
}

.btn--full {
    width: 100%;
}

.btn--icon {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--border-radius-full);
}

.btn:disabled,
.btn--disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}


/* ----- Product Card ----- */
.product-card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    border: 1.5px solid var(--color-creme-pat);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.product-card__image-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: var(--color-white);
    border-bottom: 1.5px solid var(--color-creme-pat);
}

.product-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.product-card:hover .product-card__image {
    transform: scale(1.05);
}

.product-card__badge {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    background-color: var(--color-raspberry-red);
    color: var(--color-vanilla);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--border-radius);
}

.product-card__quick-add {
    position: absolute;
    bottom: var(--space-md);
    left: var(--space-md);
    right: var(--space-md);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.product-card:hover .product-card__quick-add {
    opacity: 1;
    transform: translateY(0);
}

.product-card__body {
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    flex: 1;
}

.product-card__category {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-chocolate-brown);
    font-weight: 600;
}

.product-card__name {
    font-weight: 800;
    font-size: var(--text-base);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-black);
}

.product-card__name a {
    transition: color var(--transition-fast);
}

.product-card__name a:hover {
    color: var(--color-golden-bun);
}

.product-card__description {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.4;
    flex: 1;
}

.product-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-sm);
    margin-top: auto;
}

.product-card__price {
    font-weight: 700;
    font-size: var(--text-md);
    color: var(--color-black);
}


/* ----- Product Grid ----- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
}


/* ----- Hero Section ----- */
.hero {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    background-color: var(--color-meringue-pink);
    overflow: hidden;
    padding-bottom: 73px;
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero__bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
}

/* hero drip at bottom (static) */
.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 73px;
    background-color: var(--color-vanilla);
    background-image: var(--page-header-drip-svg);
    background-repeat: repeat-x;
    background-size: 731px 73px;
    background-position: top left;
    pointer-events: none;
    z-index: 2;
}

.hero__container {
    position: relative;
    z-index: 1;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-5xl) var(--space-xl);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

.hero__content {
    color: var(--color-black);
}

.hero__subtitle {
    font-weight: 300;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: var(--text-sm);
    margin-bottom: var(--space-md);
    color: var(--color-chocolate-brown);
}

.hero__title {
    font-size: var(--text-4xl);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.05;
    margin-bottom: var(--space-lg);
    color: var(--color-black);
}

.hero__word {
    display: inline-block;
    opacity: 0;
    transform: scale(0.3) translateY(20px);
    animation: word-bulge 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes word-bulge {
    0%   { opacity: 0; transform: scale(0.3) translateY(20px); }
    50%  { opacity: 1; transform: scale(1.15) translateY(-3px); }
    75%  { transform: scale(0.95) translateY(1px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.hero__word--emphasis {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero__word--pop {
    transform: scale(1.35);
}

.hero__description {
    font-size: var(--text-md);
    line-height: 1.5;
    margin-bottom: var(--space-2xl);
    max-width: 480px;
}

.hero__actions {
    display: flex;
    gap: var(--space-md);
}

.hero__slider {
    position: relative;
    width: 100%;
    max-width: 500px;
    aspect-ratio: 1 / 1;
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

.hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.hero__slide--active {
    opacity: 1;
    animation: slide-wobble 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes slide-wobble {
    0%   { transform: scale(0.85) rotate(-2deg); opacity: 0; }
    40%  { transform: scale(1.05) rotate(1deg);  opacity: 1; }
    70%  { transform: scale(0.97) rotate(-0.5deg); }
    100% { transform: scale(1) rotate(0deg); }
}

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

.hero__slider-dots {
    position: absolute;
    bottom: var(--space-md);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--space-sm);
    z-index: 2;
}

.hero__dot {
    width: 10px;
    height: 10px;
    border-radius: var(--border-radius-full);
    border: 2px solid var(--color-white);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background-color var(--transition-fast);
}

.hero__dot--active {
    background: var(--color-white);
}

/* interactive hero sprinkles */
.hero__sprinkles {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.hero__sprinkle-particle {
    position: absolute;
    pointer-events: auto;
    cursor: pointer;
    transition: transform 0.1s ease-out;
    will-change: transform;
}

.hero__sprinkle-particle--circle {
    border-radius: var(--border-radius-full);
}

.hero__sprinkle-particle--bar {
    border-radius: 4px;
}

/* float animation */
@keyframes sprinkle-float {
    0%, 100% { transform: translate(var(--float-x, 0), var(--float-y, 0)) rotate(var(--rot, 0deg)); }
    25% { transform: translate(calc(var(--float-x, 0) + 8px), calc(var(--float-y, 0) - 12px)) rotate(calc(var(--rot, 0deg) + 5deg)); }
    50% { transform: translate(calc(var(--float-x, 0) - 5px), calc(var(--float-y, 0) - 6px)) rotate(calc(var(--rot, 0deg) - 3deg)); }
    75% { transform: translate(calc(var(--float-x, 0) + 10px), calc(var(--float-y, 0) + 4px)) rotate(calc(var(--rot, 0deg) + 8deg)); }
}

/* pop animation when clicked */
@keyframes sprinkle-pop {
    0% { transform: scale(1); }
    30% { transform: scale(1.8) rotate(180deg); }
    60% { transform: scale(0.6) rotate(360deg); }
    100% { transform: scale(1) rotate(360deg); }
}

.hero__sprinkle-particle--popping {
    animation: sprinkle-pop 0.5s ease-out !important;
}

/* parallax mouse-follow glow */
.hero__glow {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: var(--border-radius-full);
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    transform: translate(-50%, -50%);
    transition: left 0.3s ease-out, top 0.3s ease-out;
    opacity: 0;
}

.hero:hover .hero__glow {
    opacity: 1;
}



/* ----- Section ----- */
.section {
    padding: var(--space-4xl) 0;
}

.section--golden {
    background-color: var(--color-golden-bun);
    color: var(--color-white);
}

.section--creme {
    background-color: var(--color-creme-pat);
    background-image: url('../images/creme-pat-background.png');
    background-repeat: repeat;
    background-size: 400px auto;
}

.section--creme > .container {
    background-color: var(--color-creme-pat);
    padding: var(--space-2xl);
    border-radius: var(--border-radius-xl);
}

.section--dark {
    background-color: var(--color-meringue-pink);
    color: var(--color-black);
}

.section--pink {
    background-color: var(--color-meringue-pink);
}

.section__header {
    margin-bottom: var(--space-2xl);
}

.section__header--center {
    text-align: center;
}

.section__subtitle {
    font-weight: 300;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--text-sm);
    color: var(--color-golden-bun-dark);
    margin-bottom: var(--space-sm);
}

.section--golden .section__subtitle {
    color: var(--color-black);
}

.section--dark .section__subtitle {
    color: var(--color-chocolate-brown);
}

.section__title {
    margin-bottom: var(--space-md);
}

.section__description {
    max-width: 560px;
    line-height: 1.5;
    font-size: var(--text-md);
}

.section__header--center .section__description {
    margin: 0 auto;
}

.section__actions {
    display: flex;
    justify-content: center;
    margin-top: var(--space-2xl);
}


/* ----- Featured Banner ----- */
.featured-banner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-height: 480px;
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    background-color: var(--color-golden-bun);
}

.featured-banner__image {
    position: relative;
    overflow: hidden;
    background-color: var(--color-creme-pat);
}

.featured-banner__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-banner__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-3xl);
    color: var(--color-vanilla);
}

.featured-banner__tag {
    font-weight: 300;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--text-sm);
    color: var(--color-white);
    margin-bottom: var(--space-md);
}

.featured-banner__title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-md);
    color: var(--color-vanilla);
}

.featured-banner__text {
    line-height: 1.5;
    margin-bottom: var(--space-xl);
    opacity: 0.9;
    max-width: 400px;
}


/* ----- Values Grid ----- */
.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2xl);
}

.value-card {
    text-align: left;
}

.value-card__icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-md);
    color: var(--color-golden-bun);
}

.value-card__title {
    font-size: var(--text-base);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
}

.value-card__text {
    font-size: var(--text-sm);
    line-height: 1.5;
    opacity: 0.8;
}


/* ----- Testimonial ----- */
.testimonials {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.testimonial {
    background-color: var(--color-white);
    padding: var(--space-2xl);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-border);
}

.testimonial__stars {
    color: var(--color-golden-bun);
    font-size: var(--text-md);
    margin-bottom: var(--space-md);
    letter-spacing: 0.1em;
}

.testimonial__text {
    font-style: italic;
    line-height: 1.5;
    margin-bottom: var(--space-lg);
}

.testimonial__author {
    font-weight: 600;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


/* ----- Newsletter ----- */
.newsletter {
    text-align: center;
}

.newsletter__form {
    display: flex;
    max-width: 480px;
    margin: var(--space-xl) auto 0;
    gap: var(--space-sm);
}

.newsletter__input {
    flex: 1;
    padding: var(--space-md) var(--space-lg);
    border: 1.5px solid var(--color-creme-pat);
    border-radius: var(--border-radius);
    background-color: var(--color-white);
    font-size: var(--text-sm);

    transition: border-color var(--transition-fast);
}

.newsletter__input:focus {
    outline: none;
    border-color: var(--color-golden-bun);
}


/* ----- Page Header ----- */
.page-header {
    padding: var(--space-5xl) 0 calc(var(--space-2xl) + 73px);
    text-align: center;
    background-color: var(--color-meringue-pink);
    color: var(--color-black);
    position: relative;
    overflow: hidden;
}

.page-header__title {
    position: relative;
    z-index: 1;
    color: var(--color-black);
}

.page-header__breadcrumb {
    position: relative;
    z-index: 1;
    color: var(--color-chocolate-brown);
}

.page-header__breadcrumb a {
    color: var(--color-chocolate-brown);
}

.page-header__breadcrumb a:hover {
    color: var(--color-black);
}

/* drip below page header */
.page-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 73px;
    background-color: var(--page-header-drip-bg, var(--color-vanilla));
    background-image: var(--page-header-drip-svg);
    background-repeat: repeat-x;
    background-size: 731px 73px;
    background-position: top left;
    pointer-events: none;
}

/* sprinkle decorations */
.page-header__sprinkle {
    position: absolute;
    border-radius: var(--border-radius-full);
    z-index: 0;
}

.page-header__sprinkle--circle-1 {
    width: 24px;
    height: 24px;
    background-color: var(--color-raspberry-red);
    top: 20%;
    left: 8%;
}

.page-header__sprinkle--circle-2 {
    width: 16px;
    height: 16px;
    background-color: var(--color-sprinkle-blue);
    top: 35%;
    right: 10%;
}

.page-header__sprinkle--circle-3 {
    width: 20px;
    height: 20px;
    background-color: var(--color-raspberry-red);
    bottom: 30%;
    right: 6%;
}

.page-header__sprinkle--circle-4 {
    width: 12px;
    height: 12px;
    background-color: var(--color-raspberry-red);
    top: 25%;
    right: 20%;
}

.page-header__sprinkle--bar-1 {
    width: 6px;
    height: 24px;
    border-radius: 3px;
    background-color: var(--color-sprinkle-blue);
    transform: rotate(35deg);
    top: 30%;
    left: 12%;
}

.page-header__sprinkle--bar-2 {
    width: 6px;
    height: 20px;
    border-radius: 3px;
    background-color: var(--color-sprinkle-blue);
    transform: rotate(-25deg);
    bottom: 35%;
    left: 6%;
}

.page-header__sprinkle--bar-3 {
    width: 6px;
    height: 22px;
    border-radius: 3px;
    background-color: var(--color-raspberry-red);
    transform: rotate(50deg);
    top: 20%;
    right: 14%;
}

.page-header__title {
    margin-bottom: var(--space-sm);
}

.page-header__breadcrumb {
    font-size: var(--text-sm);
    color: var(--color-creme-pat);
}

.page-header__breadcrumb a {
    color: var(--color-creme-pat);
    transition: color var(--transition-fast);
}

.page-header__breadcrumb a:hover {
    color: var(--color-vanilla);
}


/* ----- Filters ----- */
.filters {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-xl) 0;
    flex-wrap: wrap;
}

.filters__btn {
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1.5px solid var(--color-border);
    border-radius: var(--border-radius-full);
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.filters__btn:hover,
.filters__btn--active {
    background-color: var(--color-black);
    color: var(--color-vanilla);
    border-color: var(--color-black);
}

/* mobile category dropdown — hidden on desktop */
.filters-mobile {
    display: none;
    padding: var(--space-xl) 0;
}

.filters-mobile__select {
    width: 100%;
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-black);
    background-color: var(--color-white);
    border: 1.5px solid var(--color-border);
    border-radius: var(--border-radius-full);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23333' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-lg) center;
    cursor: pointer;
}

.filters-mobile__select:focus {
    outline: none;
    border-color: var(--color-black);
}


/* ----- Product Detail ----- */
.product-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: start;
    padding: var(--space-3xl) 0;
}

.product-detail__gallery {
    position: sticky;
    top: calc(var(--header-height) + var(--space-xl));
}

.product-detail__main-image {
    aspect-ratio: 1 / 1;
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    background-color: var(--color-white);
    border: 1.5px solid var(--color-creme-pat);
}

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

.product-detail__thumbs {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.product-detail__thumb {
    width: 72px;
    height: 72px;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1.5px solid var(--color-creme-pat);
    cursor: pointer;
    transition: border-color var(--transition-fast);
    background-color: var(--color-white);
}

.product-detail__thumb--active,
.product-detail__thumb:hover {
    border-color: var(--color-golden-bun);
}

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

.product-detail__info {
    padding-top: var(--space-md);
}

.product-detail__breadcrumb {
    font-size: var(--text-sm);
    color: var(--color-chocolate-brown);
    margin-bottom: var(--space-lg);
}

.product-detail__breadcrumb a:hover {
    color: var(--color-chocolate-brown);
}

.product-detail__category {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-chocolate-brown);
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.product-detail__title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-md);
}

.product-detail__price {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: var(--space-xl);
}

.product-detail__description {
    font-size: var(--text-md);
    line-height: 1.6;
    margin-bottom: var(--space-2xl);
    max-width: 480px;
}

.product-detail__quantity {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.product-detail__qty-label {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.product-detail__qty-controls {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--color-border);
    border-radius: var(--border-radius);
}

.product-detail__qty-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-lg);
    transition: background-color var(--transition-fast);
}

.product-detail__qty-btn:hover {
    background-color: var(--color-creme-pat);
}

.product-detail__qty-value {
    width: 48px;
    text-align: center;
    font-weight: 600;
    font-size: var(--text-base);
    border-left: 1.5px solid var(--color-border);
    border-right: 1.5px solid var(--color-border);
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-detail__add-actions {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
}

.product-detail__meta {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.product-detail__meta-item {
    font-size: var(--text-sm);
    line-height: 1.5;
}

.product-detail__meta-label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


/* ----- Checkout ----- */
.checkout {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--space-3xl);
    padding: var(--space-3xl) 0;
    align-items: start;
}

.checkout__form-section {
    margin-bottom: var(--space-2xl);
}

.checkout__section-title {
    font-size: var(--text-lg);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--color-black);
}

.checkout__field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.checkout__field {
    margin-bottom: var(--space-md);
}

.checkout__label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-xs);
}

.checkout__input,
.checkout__select {
    width: 100%;
    padding: var(--space-md);
    border: 1.5px solid var(--color-border);
    border-radius: var(--border-radius);
    background-color: var(--color-white);
    font-size: var(--text-sm);

    transition: border-color var(--transition-fast);
}

.checkout__input:focus,
.checkout__select:focus {
    outline: none;
    border-color: var(--color-golden-bun);
}

.checkout__input--error {
    border-color: var(--color-error);
}

.checkout__select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23B7792B' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-md) center;
    padding-right: var(--space-2xl);
}

/* order summary sidebar */
.checkout__summary {
    position: sticky;
    top: calc(var(--header-height) + var(--space-xl));
    background-color: var(--color-creme-pat);
    border-radius: var(--border-radius-xl);
    padding: var(--space-2xl);
}

.checkout__summary-title {
    font-size: var(--text-lg);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--color-golden-bun);
}

.checkout__summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) 0;
    font-size: var(--text-sm);
}

.checkout__summary-item-name {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.checkout__summary-item-qty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background-color: var(--color-chocolate-brown);
    color: var(--color-white);
    border-radius: var(--border-radius-full);
    font-size: 11px;
    font-weight: 600;
}

.checkout__summary-divider {
    border: none;
    border-top: 1px solid var(--color-golden-bun);
    margin: var(--space-md) 0;
    opacity: 0.3;
}

.checkout__summary-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-xs) 0;
    font-size: var(--text-sm);
}

.checkout__summary-total {
    display: flex;
    justify-content: space-between;
    padding: var(--space-md) 0;
    font-weight: 800;
    font-size: var(--text-md);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-top: 2px solid var(--color-golden-bun);
    margin-top: var(--space-sm);
}

.checkout__place-order {
    margin-top: var(--space-xl);
}


/* ----- Footer ----- */
.footer {
    background-color: var(--color-white);
    color: var(--color-black);
    position: relative;
}

.footer__drip {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 88px;
    background-repeat: repeat-x;
    background-size: 731px 73px;
    background-position: top left;
    pointer-events: none;
}

.footer__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: calc(88px + var(--space-2xl)) var(--space-xl) var(--space-xl);
}

.footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--space-2xl);
    margin-bottom: var(--space-3xl);
}

.footer__logo-img {
    height: 64px;
    width: auto;
    margin-bottom: var(--space-md);
}

.footer__tagline {
    font-style: italic;
    font-size: var(--text-sm);
    color: var(--color-chocolate-brown);
    margin-bottom: var(--space-lg);
}

.footer__social {
    display: flex;
    gap: var(--space-md);
}

.footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-golden-bun);
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-creme-pat);
    border-radius: var(--border-radius-full);
    transition: all var(--transition-fast);
}

.footer__social-link:hover {
    background-color: var(--color-golden-bun);
    color: var(--color-white);
    border-color: var(--color-golden-bun);
}

.footer__heading {
    font-size: var(--text-sm);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-lg);
}

.footer__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.footer__link {
    font-size: var(--text-sm);
    color: var(--color-chocolate-brown);
    transition: color var(--transition-fast);
}

.footer__link:hover {
    color: var(--color-golden-bun);
}

.footer__address {
    font-size: var(--text-sm);
    color: var(--color-chocolate-brown);
    line-height: 1.5;
}

.footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-creme-pat);
}

.footer__copy {
    font-size: var(--text-xs);
    color: var(--color-chocolate-brown);
}

.footer__legal {
    display: flex;
    gap: var(--space-lg);
}

.footer__legal-link {
    font-size: var(--text-xs);
    color: var(--color-chocolate-brown);
    transition: color var(--transition-fast);
}

.footer__legal-link:hover {
    color: var(--color-golden-bun);
}


/* ----- Form Elements ----- */
.form-group {
    margin-bottom: var(--space-md);
}

.form-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-xs);
}

.form-input {
    width: 100%;
    padding: var(--space-md);
    border: 1.5px solid var(--color-border);
    border-radius: var(--border-radius);
    background-color: var(--color-white);
    font-size: var(--text-sm);

    transition: border-color var(--transition-fast);
}

.form-input:focus {
    outline: none;
    border-color: var(--color-golden-bun);
}

.form-input--error {
    border-color: var(--color-error);
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
}

.form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    font-size: var(--text-sm);
    cursor: pointer;
}

.form-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-golden-bun);
    flex-shrink: 0;
    margin-top: 2px;
}

.form-radio {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-sm);
    cursor: pointer;
}

.form-radio input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-golden-bun);
}

.form-helper {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-xs);
}

.form-error {
    font-size: var(--text-xs);
    color: var(--color-error);
    margin-top: var(--space-xs);
}


/* ----- Badge / Tag ----- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: var(--border-radius-full);
    line-height: 1;
}

.badge--golden {
    background-color: var(--color-golden-bun);
    color: var(--color-vanilla);
}

.badge--raspberry {
    background-color: var(--color-raspberry-red);
    color: var(--color-vanilla);
}

.badge--pink {
    background-color: var(--color-meringue-pink);
    color: var(--color-black);
}

.badge--outline {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
}


/* ----- Alert / Toast ----- */
.alert {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--border-radius);
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.alert--success {
    background-color: var(--color-alert-success-bg);
    color: var(--color-success);
    border: 1px solid var(--color-alert-success-border);
}

.alert--error {
    background-color: var(--color-alert-error-bg);
    color: var(--color-error);
    border: 1px solid var(--color-alert-error-border);
}

.alert--info {
    background-color: var(--color-alert-info-bg);
    color: var(--color-sprinkle-blue);
    border: 1px solid var(--color-alert-info-border);
}

.alert--warning {
    background-color: var(--color-alert-warning-bg);
    color: var(--color-chocolate-brown);
    border: 1px solid var(--color-creme-pat);
}


/* ----- Location Picker Modal ----- */
.location-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}

.location-modal--open {
    opacity: 1;
    visibility: visible;
}

.location-modal__overlay {
    position: absolute;
    inset: 0;
    background-color: var(--color-overlay);
}

.location-modal__panel {
    position: relative;
    background: var(--color-white);
    border-radius: var(--border-radius-xl);
    width: 520px;
    max-width: calc(100% - var(--space-2xl));
    max-height: calc(100vh - var(--space-3xl));
    overflow-y: auto;
    padding: var(--space-2xl);
    box-shadow: var(--shadow-lg);
    transform: translateY(16px);
    transition: transform var(--transition-base);
}

.location-modal--open .location-modal__panel {
    transform: translateY(0);
}

.location-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
}

.location-modal__title {
    font-size: var(--text-lg);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.location-modal__close {
    display: flex;
    opacity: 0.5;
    transition: opacity var(--transition-fast);
}

.location-modal__close:hover {
    opacity: 1;
}

.location-modal__description {
    font-size: var(--text-sm);
    color: var(--color-chocolate-brown);
    margin-bottom: var(--space-xl);
}

.location-modal__options {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.location-option {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    border: 1.5px solid var(--color-creme-pat);
    border-radius: var(--border-radius-lg);
    background: var(--color-vanilla);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    width: 100%;
    font-family: inherit;
}

.location-option:hover {
    border-color: var(--color-golden-bun);
    box-shadow: var(--shadow-sm);
}

.location-option--selected {
    border-color: var(--color-golden-bun);
    background: var(--color-white);
    box-shadow: 0 0 0 1px var(--color-golden-bun);
}

.location-option__info {
    flex: 1;
}

.location-option__name {
    font-size: var(--text-base);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-xs);
}

.location-option__address {
    font-size: var(--text-sm);
    color: var(--color-chocolate-brown);
    margin-bottom: var(--space-xs);
}

.location-option__hours {
    font-size: var(--text-xs);
    color: var(--color-golden-bun-dark);
    line-height: 1.4;
}

.location-option__check {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-full);
    border: 1.5px solid var(--color-creme-pat);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: transparent;
    transition: all var(--transition-fast);
}

.location-option--selected .location-option__check {
    background-color: var(--color-golden-bun);
    border-color: var(--color-golden-bun);
    color: var(--color-white);
}


/* ----- Location Card ----- */
.location-card {
    background: var(--color-white);
    border: 1.5px solid var(--color-creme-pat);
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    margin-bottom: var(--space-xl);
    transition: box-shadow var(--transition-base);
}

.location-card:hover {
    box-shadow: var(--shadow-md);
}

.location-card:last-child {
    margin-bottom: 0;
}

.location-card__image {
    position: relative;
    overflow: hidden;
}

.location-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.location-card__badge {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    background-color: var(--color-golden-bun);
    color: var(--color-vanilla);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--border-radius);
}

.location-card__body {
    padding: var(--space-lg);
}

.location-card__title {
    font-size: var(--text-lg);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-md);
}

.location-card__address {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-sm);
    margin-bottom: var(--space-md);
    color: var(--color-chocolate-brown);
}

.location-card__address svg {
    flex-shrink: 0;
}

.location-card__description {
    font-size: var(--text-sm);
    line-height: 1.6;
    margin-bottom: var(--space-lg);
    color: var(--color-text-muted);
}

.location-card__hours {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    font-size: var(--text-sm);
    line-height: 1.5;
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    background-color: var(--color-vanilla);
    border-radius: var(--border-radius);
}

.location-card__hours svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.location-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}


/* ----- Breadcrumb ----- */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-sm);
    color: var(--color-chocolate-brown);
    padding: var(--space-md) 0;
}

.breadcrumb__sep {
    opacity: 0.5;
}

.breadcrumb__link {
    transition: color var(--transition-fast);
}

.breadcrumb__link:hover {
    color: var(--color-chocolate-brown);
}

.breadcrumb__current {
    color: var(--color-text);
}


/* ----- Quantity Stepper ----- */
.qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--color-border);
    border-radius: var(--border-radius);
}

.qty-stepper__btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-md);
    transition: background-color var(--transition-fast);
}

.qty-stepper__btn:hover {
    background-color: var(--color-creme-pat);
}

.qty-stepper__value {
    width: 40px;
    text-align: center;
    font-weight: 600;
    border-left: 1.5px solid var(--color-border);
    border-right: 1.5px solid var(--color-border);
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .hero__container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero__description {
        margin: 0 auto var(--space-2xl);
    }

    .hero__actions {
        justify-content: center;
    }

    .hero__slider {
        display: none;
    }

    .checkout {
        grid-template-columns: 1fr;
    }

    .checkout__summary {
        position: static;
    }

    .featured-banner {
        grid-template-columns: 1fr;
    }

    .featured-banner__image {
        min-height: 300px;
    }

    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2xl);
    }
}

@media (max-width: 768px) {
    :root {
        --text-3xl: 2rem;
        --text-4xl: 2.5rem;
        --space-4xl: 4rem;
        --space-5xl: 5rem;
    }

    .filters {
        display: none;
    }

    .filters-mobile {
        display: block;
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }

    .product-detail {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .product-detail__gallery {
        position: static;
    }

    .values-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .testimonials {
        grid-template-columns: 1fr;
    }

    .header__nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--color-vanilla);
        padding: var(--space-2xl);
        padding-top: calc(var(--space-2xl) + 60px);
        transform: translateX(-100%);
        transition: transform var(--transition-base);
        z-index: 200;
    }

    .header__nav--open {
        transform: translateX(0);
    }

    .header__nav-list {
        flex-direction: column;
        gap: var(--space-lg);
    }

    .header__nav-link {
        font-size: var(--text-xl);
    }

    .header__menu-toggle {
        display: flex;
        z-index: 201;
    }

    .header__logo,
    .header--scrolled .header__logo {
        position: static;
        transform: none;
        top: auto;
        padding: var(--space-xs) var(--space-md);
        border-radius: 0;
        box-shadow: none;
        background-color: transparent;
    }

    .header__logo-img {
        height: 56px;
    }

    .checkout__field-row {
        grid-template-columns: 1fr;
    }

    .footer__grid {
        grid-template-columns: 1fr;
    }

    .footer__bottom {
        flex-direction: column;
        gap: var(--space-md);
        text-align: center;
    }

    .newsletter__form {
        flex-direction: column;
    }

    .location-card {
        grid-template-columns: 1fr;
    }

    .location-card__image {
        aspect-ratio: 16 / 9;
    }
}

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

    .hero__actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* stack all inline 2-col grids on mobile */
@media (max-width: 768px) {
    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}