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

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

    /* warm neutrals — dominant palette */
    --color-biscuit:        #E8D4A8;
    --color-biscuit-light:  #F2E3C1;
    --color-cream:          #FAF1DB;
    --color-cream-deep:     #F5E8C4;
    --color-warm-sand:      #DDC79A;

    /* secondary / accents */
    --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-cream);
    --color-text:           var(--color-black);
    --color-text-light:     var(--color-golden-bun-dark);
    --color-text-muted:     #4a3728;
    --color-border:         var(--color-biscuit);
    --color-error:          var(--color-raspberry-red);
    --color-success:        #2d7d46;
    --color-overlay:        rgba(0, 0, 0, 0.45);

    /* semantic surface tokens — prefer these in new work */
    --surface-page:         var(--color-cream);
    --surface-warm:         var(--color-biscuit-light);
    --surface-deep:         var(--color-biscuit);
    --surface-gold:         var(--color-golden-bun);
    --surface-dark:         var(--color-black);
    --accent-pink:          var(--color-meringue-pink);
    --accent-burgundy:      var(--color-raspberry-red);

    /* 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;

    /* legacy small drip (kept for design-system page reference) */
    --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");

    /* large abstract drip (fills via currentColor — just set color on the element) */
    --drip-flow-svg: url("data:image/svg+xml,%3Csvg%20width%3D%221716%22%20height%3D%22171%22%20viewBox%3D%220%200%201716%20171%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M1715.8%200V68.9375C1715.8%2073.1539%201693.65%20120.166%201683.53%2080.9541C1673.41%2041.7422%201659.7%2047.2238%201654.64%2049.332C1646.46%2052.738%201642.41%2082.0044%201632.28%2087.0684C1622.15%2092.1322%201621.73%2070.4138%201611.4%2092.9707L1610.99%2093.8711C1600.31%20117.171%201599.23%20119.534%201587.78%20119.534C1575.9%20119.534%201575.97%2086.0142%201568.37%2059.2402C1560.92%2032.9633%201552.13%2032.4662%201547.91%2041.7422C1543.7%2051.0182%201539.08%2070.2836%201521.76%2062.6133C1505.1%2055.2344%201511%2026.7744%201498.98%2026.7744C1486.96%2026.7764%201475.36%20110.891%201469.46%20133.659C1463.55%20156.428%201459.75%20170.13%201445.83%20170.974C1428.96%20171.995%201423.05%20142.514%201421.37%20130.708C1419.68%20118.902%201416.73%2082.9623%201402.6%2091.7061C1393.74%2097.1873%201394.16%2097.3984%201387.41%2097.3984C1380.66%2097.3984%201372.01%2083.0624%201370.75%2072.5215C1369.74%2064.0889%201369.48%2058.6077%201362.73%2052.2832C1360.48%2052.002%201354.72%2049.7538%201350.92%2059.6621C1348.15%2066.8903%201332.43%2072.0943%201315.7%2056.0781C1300.73%2041.7425%201297.35%2021.0821%201287.02%2021.082C1280.8%2021.082%201274.71%2034.1527%201272.89%2041.7422C1269.65%2066.3377%201263.56%20114.855%201260.86%20122.275C1257.49%20131.551%201246.94%20143.567%201235.34%20140.405C1224.76%20137.519%201218.47%20118.059%201214.25%2095.7119C1210.03%2073.3651%201199.49%2082.6414%201193.16%2082.2197C1186.84%2081.7981%201184.3%2081.3758%201178.82%2065.7754C1174.43%2053.295%201164.22%2052.3479%201158.57%2053.7588C1152.77%2055.2075%201145.56%2064.7799%201143.9%2068.9209V68.9375C1143.9%2073.1539%201121.75%20120.166%201111.63%2080.9541C1101.51%2041.7426%201087.8%2047.2238%201082.74%2049.332C1074.56%2052.7375%201070.51%2082.0039%201060.38%2087.0684C1050.25%2092.1324%201049.83%2070.4135%201039.5%2092.9707L1039.09%2093.8711C1028.41%20117.171%201027.33%20119.534%201015.88%20119.534C1004%20119.533%201004.07%2086.0139%20996.473%2059.2402C989.021%2032.9634%20980.233%2032.4663%20976.015%2041.7422C971.797%2051.0182%20967.182%2070.2836%20949.862%2062.6133C933.2%2055.2346%20939.105%2026.7745%20927.083%2026.7744C915.061%2026.7744%20903.461%20110.891%20897.556%20133.659C891.65%20156.428%20887.854%20170.13%20873.934%20170.974C857.061%20171.996%20851.155%20142.514%20849.468%20130.708C847.781%20118.902%20844.828%2082.9621%20830.697%2091.7061C821.839%2097.1872%20822.26%2097.3984%20815.511%2097.3984C808.762%2097.3978%20800.115%2083.0622%20798.85%2072.5215C797.838%2064.0889%20797.584%2058.6076%20790.835%2052.2832C788.585%2052.0021%20782.82%2049.7536%20779.024%2059.6621C776.254%2066.8902%20760.532%2072.0939%20743.802%2056.0781C728.827%2041.7425%20725.452%2021.082%20715.117%2021.082C708.895%2021.0827%20702.814%2034.1529%20700.987%2041.7422C697.753%2066.3377%20691.665%20114.855%20688.965%20122.275C685.59%20131.551%20675.045%20143.568%20663.445%20140.405C652.856%20137.518%20646.572%20118.058%20642.354%2095.7119C638.136%2073.3655%20627.59%2082.641%20621.263%2082.2197C614.936%2081.7981%20612.405%2081.3759%20606.921%2065.7754C602.534%2053.295%20592.32%2052.3479%20586.672%2053.7588C580.875%2055.2071%20573.662%2064.7799%20571.999%2068.9209V68.9375C571.999%2073.1539%20549.853%20120.166%20539.73%2080.9541C529.606%2041.7422%20515.897%2047.2238%20510.835%2049.332C502.659%2052.738%20498.611%2082.0044%20488.479%2087.0684C478.346%2092.1322%20477.933%2070.4138%20467.599%2092.9707L467.187%2093.8711C456.514%20117.171%20455.431%20119.534%20443.977%20119.534C432.098%20119.534%20432.166%2086.0142%20424.573%2059.2402C417.122%2032.9633%20408.333%2032.4662%20404.115%2041.7422C399.896%2051.0182%20395.282%2070.2836%20377.961%2062.6133C361.3%2055.2344%20367.205%2026.7744%20355.183%2026.7744C343.161%2026.7764%20331.561%20110.891%20325.656%20133.659C319.75%20156.428%20315.954%20170.13%20302.033%20170.974C285.161%20171.995%20279.255%20142.514%20277.568%20130.708C275.88%20118.902%20272.928%2082.9623%20258.797%2091.7061C249.939%2097.1873%20250.361%2097.3984%20243.612%2097.3984C236.862%2097.3984%20228.215%2083.0624%20226.949%2072.5215C225.937%2064.0889%20225.684%2058.6077%20218.935%2052.2832C216.685%2052.002%20210.921%2049.7538%20207.124%2059.6621C204.355%2066.8903%20188.632%2072.0943%20171.902%2056.0781C156.927%2041.7425%20153.553%2021.0821%20143.218%2021.082C136.996%2021.082%20130.915%2034.1527%20129.087%2041.7422C125.853%2066.3377%20119.764%20114.855%20117.065%20122.275C113.69%20131.551%20103.145%20143.567%2091.5452%20140.405C80.9564%20137.519%2074.6716%20118.059%2070.4534%2095.7119C66.2352%2073.3651%2055.6899%2082.6414%2049.3625%2082.2197C43.0354%2081.7981%2040.5044%2081.3758%2035.0208%2065.7754C30.6338%2053.295%2020.4192%2052.3479%2014.7717%2053.7588C8.86514%2055.2348%201.48815%2065.1428%200.0100098%2069.1484C-0.0127673%2069.2102%200.0100098%200%200.0100098%200H1715.8Z%22%20fill%3D%22%23FFF6DF%22%2F%3E%20%3C%2Fsvg%3E");

    /* abstract, non-repeating drip — one large asymmetric pour. Stretches to fill
       the masked element via preserveAspectRatio="none". */
    --drip-abstract-svg: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201716%20380%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C0%20L1716%2C0%20L1716%2C70%20C1690%2C70%201675%2C220%201620%2C230%20C1565%2C240%201555%2C100%201500%2C110%20C1445%2C120%201460%2C310%201400%2C320%20C1340%2C330%201340%2C140%201280%2C150%20C1220%2C160%201230%2C260%201180%2C260%20C1130%2C260%201130%2C90%201080%2C100%20C1030%2C110%201050%2C330%20990%2C340%20C930%2C350%20920%2C160%20860%2C170%20C800%2C180%20810%2C300%20760%2C300%20C710%2C300%20720%2C120%20670%2C130%20C620%2C140%20630%2C360%20570%2C370%20C510%2C380%20500%2C200%20450%2C210%20C400%2C220%20410%2C290%20360%2C290%20C310%2C290%20320%2C130%20270%2C140%20C220%2C150%20230%2C240%20180%2C240%20C130%2C240%20130%2C100%2080%2C110%20C40%2C115%2020%2C90%200%2C80%20Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");

    /* typography — Avenir LT Pro via Adobe Fonts (kit cir5wby) with system fallbacks */
    --font-body:            'avenir-lt-pro', '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:   1600px;
    --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: 200;
    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: 700;
    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: 200;
    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;
    min-width: 40px;
    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 — slide-down modal (ported from stsc 3, reskinned)
   ============================================================ */
.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    visibility: hidden;
    pointer-events: none;
}
.search-overlay.is-open {
    visibility: visible;
    pointer-events: auto;
}
.search-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(40, 24, 12, 0.55);
    opacity: 0;
    transition: opacity var(--transition-base);
}
.search-overlay.is-open .search-overlay__backdrop { opacity: 1; }

.search-overlay__panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: var(--color-chocolate-brown);
    color: var(--color-cream);
    padding: var(--space-lg) 0;
    transform: translateY(-100%);
    transition: transform var(--transition-base);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}
.search-overlay.is-open .search-overlay__panel { transform: translateY(0); }

.search-overlay__form {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-xl);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

/* scope segmented control */
.search-overlay__scope {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--border-radius-full);
    padding: 3px;
    flex-shrink: 0;
}
.search-overlay__scope-option { margin: 0; }
.search-overlay__scope-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.search-overlay__scope-option span {
    display: inline-block;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-warm-sand);
    border-radius: var(--border-radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.search-overlay__scope-option input:checked + span {
    background: var(--color-golden-bun);
    color: var(--color-white);
}

/* input */
.search-overlay__input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    padding-bottom: var(--space-sm);
    min-width: 240px;
}
.search-overlay__icon { color: var(--color-warm-sand); flex-shrink: 0; }
.search-overlay__input {
    flex: 1;
    background: transparent;
    border: 0;
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--text-lg);
    padding: var(--space-sm) 0;
    outline: 0;
}
.search-overlay__input::placeholder { color: var(--color-warm-sand); }
.search-overlay__clear,
.search-overlay__close {
    display: flex;
    color: var(--color-warm-sand);
    background: none;
    border: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: color var(--transition-fast);
}
.search-overlay__clear:hover,
.search-overlay__close:hover { color: var(--color-white); }
.search-overlay__submit { flex-shrink: 0; }

/* suggestions */
.search-overlay__suggest {
    max-width: var(--container-max);
    margin: var(--space-md) auto 0;
    padding: 0 var(--space-xl);
}
.search-overlay__suggest-label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-warm-sand);
    margin: 0 0 var(--space-sm);
}
.search-overlay__suggest-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-xs);
    max-height: 50vh;
    overflow-y: auto;
}
.search-overlay__suggest-list li { margin: 0; }
.search-overlay__suggest-link {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    border-radius: var(--border-radius);
    color: var(--color-cream);
    transition: background var(--transition-fast);
}
.search-overlay__suggest-link:hover,
.search-overlay__suggest-link.is-active { background: rgba(255, 255, 255, 0.08); }
.search-overlay__suggest-thumb {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--border-radius);
    overflow: hidden;
}
.search-overlay__suggest-thumb img { width: 100%; height: 100%; object-fit: cover; }
.search-overlay__suggest-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.search-overlay__suggest-title {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-white);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.search-overlay__suggest-price {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-solero-yellow);
}
.search-overlay__suggest-price del { opacity: 0.6; margin-right: 4px; }
.search-overlay__suggest-empty {
    color: var(--color-warm-sand);
    font-size: var(--text-sm);
    padding: var(--space-sm);
    list-style: none;
}
.search-overlay__suggest-all { margin: var(--space-md) 0 0; }
.search-overlay__suggest-all a {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-solero-yellow);
}
body.search-open { overflow: hidden; }

@media (max-width: 768px) {
    .search-overlay__form { flex-direction: column; align-items: stretch; }
    .search-overlay__suggest-list { grid-template-columns: 1fr; }
}


/* ============================================================
   SEARCH RESULTS PAGE (search.php)
   ============================================================ */
.search-main { padding: var(--space-3xl) 0; background: var(--color-cream); }
.search-page__header { margin-bottom: var(--space-xl); }
.search-page__overline {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-text-light);
    margin: 0 0 var(--space-xs);
}
.search-page__title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-chocolate-brown);
    line-height: 1.1;
    margin: 0 0 var(--space-sm);
}
.search-page__term {
    background: var(--color-solero-yellow);
    color: var(--color-chocolate-brown);
    padding: 0 var(--space-sm);
    border-radius: var(--border-radius);
}
.search-page__count {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-light);
    margin: 0;
}
.search-page__toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    padding: var(--space-sm) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-xl);
}
.search-page__tabs { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.search-page__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-light);
    border-radius: var(--border-radius-full);
    transition: all var(--transition-fast);
}
.search-page__tab:hover { color: var(--color-chocolate-brown); background: var(--color-biscuit-light); }
.search-page__tab.is-active { background: var(--color-chocolate-brown); color: var(--color-white); }
.search-page__tab-count {
    font-size: var(--text-xs);
    background: rgba(92, 58, 30, 0.10);
    padding: 1px 7px;
    border-radius: var(--border-radius-full);
}
.search-page__tab.is-active .search-page__tab-count {
    background: rgba(255, 255, 255, 0.20);
    color: var(--color-white);
}
.search-page__sort { display: inline-flex; align-items: center; gap: var(--space-sm); }
.search-page__sort label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-light);
}
.search-page__sort select {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-chocolate-brown);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--space-xs) var(--space-sm);
    cursor: pointer;
}
.search-page__results { margin-bottom: var(--space-xl); }
.search-result-card {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-lg) 0;
    border-bottom: 1px solid var(--color-border);
}
.search-result-card__thumb {
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    background: var(--color-biscuit-light);
    border-radius: var(--border-radius);
    overflow: hidden;
}
.search-result-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.search-result-card__body { flex: 1; min-width: 0; }
.search-result-card__type {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-light);
    margin: 0 0 var(--space-xs);
}
.search-result-card__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    margin: 0 0 var(--space-sm);
}
.search-result-card__title a { color: var(--color-chocolate-brown); }
.search-result-card__title a:hover { color: var(--color-golden-bun); }
.search-result-card__excerpt {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.6;
}
.search-result-card__price {
    display: inline-block;
    margin-top: var(--space-sm);
    font-family: var(--font-body);
    color: var(--color-golden-bun-dark);
    font-weight: 600;
}
.search-page__empty {
    padding: var(--space-2xl) 0;
    color: var(--color-text-light);
    font-family: var(--font-body);
}
@media (max-width: 768px) {
    .search-result-card { flex-direction: column; gap: var(--space-sm); }
    .search-result-card__thumb { width: 100%; height: 200px; }
}


/* ============================================================
   ACCOUNT PANEL — header dropdown (ported from stsc 3, reskinned)
   ============================================================ */
.account-panel-wrap { position: relative; display: inline-flex; align-items: center; }
.account-trigger { position: relative; }
.account-trigger__dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-golden-bun);
    border: 1.5px solid var(--color-cream);
}
.account-panel {
    position: absolute;
    top: calc(100% + 14px);
    right: -8px;
    width: 320px;
    max-width: calc(100vw - 24px);
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
    z-index: 300;
}
.account-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.account-panel__arrow {
    position: absolute;
    top: -7px;
    right: 16px;
    width: 14px;
    height: 14px;
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
    transform: rotate(45deg);
}
.account-panel__inner { padding: var(--space-lg); position: relative; }
.account-panel__header {
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-md);
}
.account-panel__overline {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-light);
    margin: 0 0 var(--space-xs);
}
.account-panel__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-chocolate-brown);
    margin: 0 0 var(--space-xs);
}
.account-panel__subtitle {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-light);
    line-height: 1.5;
    margin: 0;
}
.account-panel__actions { display: flex; gap: var(--space-sm); }
.account-panel__actions .btn { flex: 1; }
.account-panel__stats {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    margin-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}
.account-panel__stat {
    flex: 1;
    text-align: center;
    padding: var(--space-sm);
    border-radius: var(--border-radius);
    color: var(--color-chocolate-brown);
    transition: background var(--transition-fast);
}
.account-panel__stat:hover { background: var(--color-biscuit-light); }
.account-panel__stat-value {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-chocolate-brown);
    line-height: 1;
}
.account-panel__stat-label {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-light);
    margin-top: var(--space-xs);
}
.account-panel__primary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-chocolate-brown);
    color: var(--color-white);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-md);
    transition: background var(--transition-fast);
}
.account-panel__primary:hover { background: var(--color-golden-bun-dark); }
.account-panel__primary-label {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-white);
    margin: 0;
}
.account-panel__primary-sub {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-biscuit);
    margin: 0;
}
.account-panel__menu { list-style: none; margin: 0; padding: 0; }
.account-panel__menu li { margin: 0; }
.account-panel__menu a {
    display: block;
    padding: var(--space-sm) 0;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-cream-deep);
    transition: color var(--transition-fast);
}
.account-panel__menu li:last-child a { border-bottom: 0; }
.account-panel__menu a:hover { color: var(--color-chocolate-brown); }
.account-panel__footer {
    padding-top: var(--space-sm);
    margin-top: var(--space-sm);
    border-top: 1px solid var(--color-border);
}
.account-panel__logout {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-light);
    transition: color var(--transition-fast);
}
.account-panel__logout:hover { color: var(--color-raspberry-red); }

/* Button: small size (account panel CTAs) */
.btn--sm {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-xs);
}


/* ============================================================
   MY ACCOUNT — login / register (logged-out)
   ============================================================ */
.account-auth { background: var(--color-cream); padding: var(--space-xl) 0 var(--space-4xl); }
/* This page uses the bare index.php fallback (no drip), so trim the tall
   page-header padding that other pages rely on for the drip overlap. */
body.woocommerce-account:not(.logged-in) .page-header { padding: var(--space-3xl) 0 var(--space-lg); }
/* Segmented toggle — only one form (Log In / Create an Account) shows at a time. */
.account-auth__switch {
    display: flex;
    gap: 4px;
    max-width: 480px;
    margin: 0 auto var(--space-xl);
    padding: 4px;
    background: var(--color-biscuit-light);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-full);
}
.account-auth__tab {
    flex: 1;
    text-align: center;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-light);
    border-radius: var(--border-radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.account-auth__tab:hover { color: var(--color-chocolate-brown); }
.account-auth__tab.is-active {
    background: var(--color-chocolate-brown);
    color: var(--color-white);
}
.account-auth__panels { max-width: 480px; margin: 0 auto; }
.account-auth-card {
    width: 100%;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-2xl);
}
.account-auth-card[data-auth-panel] { display: none; }
.account-auth-card[data-auth-panel].is-active { display: block; }
.account-auth-card .required { color: var(--color-raspberry-red); }
.account-auth-card .checkout__field:last-of-type { margin-bottom: var(--space-md); }
.account-auth-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
}
.account-auth-card__remember {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    cursor: pointer;
}
.account-auth-card__remember input {
    width: 16px;
    height: 16px;
    accent-color: var(--color-golden-bun);
}
.account-auth-card__lost {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-golden-bun-dark);
    text-decoration: underline;
    transition: color var(--transition-fast);
}
.account-auth-card__lost:hover { color: var(--color-chocolate-brown); }
.account-auth-card__note {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-light);
    margin: 0 0 var(--space-md);
}
/* WC's password show/hide toggle sits inside the styled input. */
.account-auth-card .password-input { position: relative; display: block; }
.account-auth-card .password-input .show-password-input {
    position: absolute;
    right: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

/* The my-account page falls through to index.php, which prints a bare
   <h1>My account</h1> and lets WooCommerce draw a default bordered form box.
   On the logged-out login view we render our own page-header + cards, so
   suppress both. */
body.woocommerce-account:not(.logged-in) .site-main--default > article > header { display: none; }
body.woocommerce-account:not(.logged-in) .woocommerce form.login,
body.woocommerce-account:not(.logged-in) .woocommerce form.register {
    border: 0;
    padding: 0;
    margin: 0;
    border-radius: 0;
}

@media (max-width: 768px) {
    .account-auth__grid--two { grid-template-columns: 1fr; max-width: 480px; }
}


/* ----- 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-full);
    border: 1.5px solid transparent;
    transition: all var(--transition-fast);
    cursor: pointer;
    line-height: 1;
    text-decoration: none;
}

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

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

.btn--accent {
    background-color: var(--accent-burgundy);
    color: var(--color-white);
    border-color: var(--accent-burgundy);
}

.btn--accent:hover {
    background-color: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
}

.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);
}

/* on dark sections, outline buttons invert to vanilla */
.section--dark .btn--outline,
.section--golden .btn--outline {
    color: var(--color-vanilla);
    border-color: var(--color-vanilla);
}

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

.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-xl);
    overflow: hidden;
    border: 2px solid var(--color-border);
    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: 92vh;
    display: flex;
    align-items: center;
    background-color: var(--surface-warm);
    overflow: hidden;
}

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

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

/* ----- Section Drip Divider ----- */
/* Usage: drop <div class="section-drip" aria-hidden="true"></div> as the
   FIRST CHILD of any section or statement-band. The drip absolutely positions
   itself ABOVE the section, inherits the section's own background colour, and
   flips the shape so the drippy tips reach UP into the section above.
   Because it inherits, colour matching is automatic — no --drip-from needed. */
.section-drip {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 160px;
    z-index: 1;
    pointer-events: none;
    background-color: inherit;
    transform: scaleY(-1);
    -webkit-mask: var(--drip-flow-svg) center top / auto 100% repeat-x;
            mask: var(--drip-flow-svg) center top / auto 100% repeat-x;
}

.section-drip--tall { height: 220px; }
.section-drip--subtle {
    height: 110px;
    opacity: 0.85;
}

/* Single, larger, asymmetric drip shape — no repeating tile. Drips vary
   dramatically in width and length to read as one abstract pour rather than
   a divider line. */
.section-drip--abstract {
    height: 360px;
    -webkit-mask: var(--drip-abstract-svg) center top / 100% 100% no-repeat;
            mask: var(--drip-abstract-svg) center top / 100% 100% no-repeat;
}

/* drip that pours DOWN from the bottom of a section instead of up into it */
.section-drip--down {
    top: 100%;
    bottom: auto;
    transform: none;
}

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

.hero__content {
    color: var(--color-black);
    position: relative;
    z-index: 2;
    /* offset slightly to break the grid feel */
    padding-top: var(--space-lg);
    /* push the content RIGHT so the last few characters hang over the video */
    margin-right: -10%;
}

.hero__eyebrow {
    font-weight: 400;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: var(--text-sm);
    margin-bottom: var(--space-xl);
    color: var(--color-chocolate-brown);
}

.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);
}

/* editorial display title — giant statement lettering, line-by-line */
.hero__title--display {
    font-size: clamp(3rem, 8.5vw, 8rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 0.9;
    margin-bottom: var(--space-xl);
    color: var(--color-black);
    display: flex;
    flex-direction: column;
    gap: 0.04em;
}

.hero__line {
    display: inline-block;
    animation: hero-line-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.hero__line:nth-child(1) { animation-delay: 0.05s; }
.hero__line:nth-child(2) { animation-delay: 0.18s; }
.hero__line:nth-child(3) { animation-delay: 0.30s; }
.hero__line:nth-child(4) { animation-delay: 0.42s; }

.hero__line--italic {
    font-style: italic;
    font-weight: 300;
    font-size: 1.08em;
    letter-spacing: 0em;
    /* burgundy accent used sparingly per brand brief */
    color: var(--color-golden-bun-dark);
    padding-left: 0.6em;
}

@keyframes hero-line-in {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

.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;
    color: var(--color-text-muted);
}

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

/* ----- Hero variant — full-bleed background video, centred content ----- */
.hero--video {
    min-height: 100vh;
    text-align: center;
    color: var(--color-vanilla);
}

.hero--video .hero__video-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero--video .hero__video-bg video,
.hero--video .hero__video-bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* video sits above the fallback img */
.hero--video .hero__video-bg img { z-index: 0; }
.hero--video .hero__video-bg video { z-index: 1; }

.hero--video .hero__video-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 80%),
        linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
}

.hero--video .hero__container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 960px;
    padding: var(--space-5xl) var(--space-xl);
}

.hero--video .hero__content {
    padding: 0;
    margin: 0 auto;
    max-width: 820px;
    text-align: center;
    color: var(--color-vanilla);
}

.hero--video .hero__eyebrow {
    color: var(--color-cream);
    opacity: 0.95;
}

.hero--video .hero__title--display {
    color: var(--color-vanilla);
    text-align: center;
    align-items: center;
}

.hero--video .hero__line {
    display: block;
    text-align: center;
}

.hero--video .hero__line--italic {
    color: var(--color-meringue-pink);
    padding-left: 0;
}

.hero--video .hero__description {
    color: var(--color-cream);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.hero--video .hero__actions {
    justify-content: center;
}

.hero--video .btn--outline {
    color: var(--color-vanilla);
    border-color: var(--color-vanilla);
}

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


/* hero media — large splash photography / video, asymmetrically placed */
.hero__media {
    position: relative;
    margin: 0;
    aspect-ratio: 3 / 2;
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(92, 58, 30, 0.25);
    /* offset to break the rigid grid feel */
    transform: translateY(-18px) rotate(-1.2deg);
    justify-self: stretch;
    width: 100%;
    max-width: 720px;
}

.hero__media-img,
.hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero__video {
    z-index: 1;
    background: transparent;
}

/* video sits on top of fallback img; when no <source> the poster is rendered, */
/* then the underlying img remains visible as graceful fallback. */
.hero__media-img { z-index: 0; }

.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);
}

/* abstract drip blobs — subtle, flowing background shapes */
.hero__blobs {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.hero__blob {
    position: absolute;
    border-radius: 62% 38% 46% 54% / 48% 42% 58% 52%;
    filter: blur(2px);
    opacity: 0.55;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
    animation: blob-drift 18s ease-in-out infinite;
}

.hero__blob--1 {
    top: -6%;
    left: -8%;
    width: 44vw;
    height: 44vw;
    max-width: 640px;
    max-height: 640px;
    background: var(--color-cream-deep);
    animation-delay: -4s;
}

.hero__blob--2 {
    bottom: -18%;
    right: -10%;
    width: 52vw;
    height: 52vw;
    max-width: 720px;
    max-height: 720px;
    background: var(--color-biscuit);
    opacity: 0.6;
    animation-delay: -9s;
}

.hero__blob--3 {
    top: 30%;
    right: 8%;
    width: 18vw;
    height: 18vw;
    max-width: 260px;
    max-height: 260px;
    background: var(--color-golden-bun);
    opacity: 0.22;
    animation-delay: -2s;
}

@keyframes blob-drift {
    0%, 100% { border-radius: 62% 38% 46% 54% / 48% 42% 58% 52%; }
    33%      { border-radius: 48% 52% 63% 37% / 55% 60% 40% 45%; }
    66%      { border-radius: 58% 42% 35% 65% / 62% 38% 62% 38%; }
}

/* subtle logo spin on hover */
@keyframes logo-spin-gentle {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.header__logo-img--full {
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.header__logo:hover .header__logo-img--full {
    transform: rotate(360deg) scale(1);
}

.header__logo--spinning .header__logo-img--sticky,
.header__logo:hover .header__logo-img--sticky {
    animation: logo-spin-gentle 1.2s ease-in-out;
}



/* ----- Section ----- */
.section {
    position: relative;
    padding: var(--space-4xl) 0;
    background-color: var(--color-cream);
}

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

.section--creme {
    background-color: var(--color-creme-pat);
    background-image: url('../assets/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--biscuit {
    background-color: var(--surface-warm);
    color: var(--color-text);
}

.section--sand {
    background-color: var(--surface-deep);
    color: var(--color-text);
}

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

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

.section--dark .section__title {
    color: var(--color-vanilla);
}

.section--pink {
    background-color: var(--accent-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);
}

/* ----- Oversized statement band — editorial transition between sections ----- */
.statement-band {
    position: relative;
    padding: var(--space-xl) 0 var(--space-5xl);
    text-align: center;
    background-color: var(--color-cream);
}

.statement-band--warm { background-color: var(--surface-warm); }
.statement-band--sand { background-color: var(--surface-deep); }
.statement-band--dark { background-color: var(--color-black); color: var(--color-vanilla); }

.statement {
    font-size: clamp(3.5rem, 13vw, 12rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 0.85;
    margin: 0;
    color: var(--color-golden-bun);
    user-select: none;
}

.statement--ghost {
    color: var(--color-golden-bun);
    opacity: 0.18;
}

.statement--italic {
    font-style: italic;
    font-weight: 300;
    letter-spacing: 0;
}

.statement__accent {
    color: var(--accent-burgundy);
}

.statement__subtle {
    display: block;
    font-size: 0.18em;
    font-weight: 300;
    font-style: italic;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-chocolate-brown);
    margin-bottom: 0.4em;
    opacity: 0.9;
}

/* multi-line editorial statement with offset alignments */
.statement-stack {
    display: flex;
    flex-direction: column;
    gap: 0.04em;
    text-align: left;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

.statement-stack .statement {
    line-height: 0.88;
}

.statement-stack__line--right { align-self: flex-end; }
.statement-stack__line--center { align-self: center; }
.statement-stack__line--indent { padding-left: 10vw; }

/* ----- Asymmetric / editorial section layouts ----- */
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

.editorial-split {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-3xl);
    align-items: center;
}

.editorial-split--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.editorial-split--offset > :last-child  { padding-bottom: var(--space-4xl); }

.editorial-media {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(92, 58, 30, 0.2);
}

.editorial-media--tilt-left  { transform: rotate(-1.4deg); }
.editorial-media--tilt-right { transform: rotate(1.2deg); }

.editorial-media img,
.editorial-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ----- Editorial Split — gallery slider ----- */
.editorial-gallery,
.editorial-gallery__track {
    position: absolute;
    inset: 0;
}
.editorial-gallery__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 700ms ease;
    pointer-events: none;
}
.editorial-gallery__slide.is-active {
    opacity: 1;
    pointer-events: auto;
}
.editorial-gallery__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--space-md);
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
}
.editorial-gallery__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: var(--border-radius-full);
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
}
.editorial-gallery__dot:hover {
    background: rgba(255, 255, 255, 0.85);
}
.editorial-gallery__dot.is-active {
    background: var(--color-white);
    transform: scale(1.3);
}
@media (prefers-reduced-motion: reduce) {
    .editorial-gallery__slide { transition: none; }
}


/* ----- 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-xl);
    border: 2px 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 var(--space-3xl);
    text-align: center;
    background-color: var(--surface-warm);
    color: var(--color-black);
    position: relative;
}

/* blob container — has its own overflow clipping so blobs don't invade neighbours */
.page-header__blobs {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.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);
}

/* large abstract drip below page header — inherits header's background */
.page-header::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 140px;
    background-color: inherit;
    -webkit-mask: var(--drip-flow-svg) center top / auto 100% repeat-x;
            mask: var(--drip-flow-svg) center top / auto 100% repeat-x;
    pointer-events: none;
    z-index: 3;
    margin-top: -1px;
}

/* abstract drip blobs — soft, fluid page-header decoration */
.page-header__blob {
    position: absolute;
    border-radius: 62% 38% 46% 54% / 48% 42% 58% 52%;
    filter: blur(3px);
    z-index: 0;
    animation: blob-drift 22s ease-in-out infinite;
}

.page-header__blob--1 {
    width: 360px;
    height: 360px;
    background: var(--color-cream-deep);
    opacity: 0.65;
    top: -20%;
    left: -5%;
    animation-delay: -3s;
}

.page-header__blob--2 {
    width: 420px;
    height: 420px;
    background: var(--color-biscuit);
    opacity: 0.55;
    bottom: -40%;
    right: -8%;
    animation-delay: -11s;
}

.page-header__blob--3 {
    width: 180px;
    height: 180px;
    background: var(--color-golden-bun);
    opacity: 0.18;
    top: 15%;
    right: 18%;
    animation-delay: -6s;
}

.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: 160px;
    background-color: var(--footer-drip-color, var(--surface-warm));
    -webkit-mask: var(--drip-flow-svg) center top / auto 100% repeat-x;
            mask: var(--drip-flow-svg) center top / auto 100% repeat-x;
    pointer-events: none;
}

.footer__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: calc(100px + var(--space-5xl)) 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: 2px solid var(--color-border);
    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;
        order: -1;
    }

    .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;
    }
}


/* ============================================================
   SHOP — landing, builder, enquiry forms, merch
   ============================================================ */

/* ----- Page header eyebrow + lead ----- */
.page-header__eyebrow {
    display: inline-block;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: var(--text-sm);
    color: var(--color-chocolate-brown);
    margin-bottom: var(--space-md);
    position: relative;
    z-index: 1;
}

.page-header__lead {
    max-width: 640px;
    margin: var(--space-md) auto 0;
    font-size: var(--text-md);
    line-height: 1.55;
    color: var(--color-chocolate-brown);
    position: relative;
    z-index: 1;
}


/* ----- Notices (collection-only / delivery-available banners) ----- */
.notice {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--border-radius-lg);
    border: 1.5px solid var(--color-border);
    background-color: var(--color-cream);
}

.notice > svg { flex-shrink: 0; color: var(--color-golden-bun); }
.notice > div { display: flex; flex-direction: column; gap: 4px; }
.notice strong {
    font-size: var(--text-sm);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.notice span {
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--color-text-muted);
}

.notice--delivery {
    background-color: var(--surface-warm);
    border-color: var(--color-golden-bun);
}

.notice--collection {
    background-color: var(--color-cream-deep);
    border-color: var(--color-biscuit);
}


/* ----- Shop landing grid ----- */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-xl);
}

.shop-tile {
    grid-column: span 3;
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    background: var(--color-white);
    border: 2px solid var(--color-border);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    color: inherit;
    min-height: 420px;
}

.shop-tile:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px rgba(92, 58, 30, 0.18);
}

.shop-tile--large { grid-column: span 4; min-height: 520px; }
.shop-tile--wide  { grid-column: span 6; min-height: 340px; grid-template-rows: 1fr; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }

.shop-tile--accent {
    grid-column: span 2;
    background: var(--color-golden-bun);
    color: var(--color-vanilla);
    border-color: var(--color-golden-bun);
}

.shop-tile__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--surface-warm);
}

.shop-tile--wide .shop-tile__media {
    aspect-ratio: auto;
    order: 2;
}

.shop-tile__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.shop-tile:hover .shop-tile__media img {
    transform: scale(1.04);
}

.shop-tile__body {
    padding: var(--space-xl) var(--space-xl) var(--space-2xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.shop-tile--wide .shop-tile__body {
    justify-content: center;
}

.shop-tile__eyebrow {
    font-size: var(--text-xs);
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-chocolate-brown);
    opacity: 0.85;
}

.shop-tile--accent .shop-tile__eyebrow { color: var(--color-cream); opacity: 1; }

.shop-tile__title {
    font-size: var(--text-2xl);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.05;
}

.shop-tile__text {
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--color-text-muted);
}

.shop-tile--accent .shop-tile__text { color: var(--color-cream-deep); }

.shop-tile__cta {
    margin-top: auto;
    padding-top: var(--space-md);
    font-size: var(--text-sm);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-golden-bun);
}

.shop-tile--accent .shop-tile__cta { color: var(--color-vanilla); }

.shop-tile:hover .shop-tile__cta {
    color: var(--color-chocolate-brown);
}

.shop-tile--accent:hover .shop-tile__cta { color: var(--color-meringue-pink); }


/* ----- Box builder — step progress ----- */
.step-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

.step-progress::before {
    content: none; /* connector lines are drawn by .step-progress__item + .step-progress__item::before */
}

.step-progress__item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    flex: 1;
    text-align: center;
}

.step-progress__num {
    width: 44px;
    height: 44px;
    border-radius: var(--border-radius-full);
    background: var(--color-white);
    border: 2px solid var(--color-border);
    display: grid;
    place-items: center;
    font-weight: 800;
    color: var(--color-text-muted);
    transition: all var(--transition-base);
}

.step-progress__label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}

.step-progress__item--active .step-progress__num {
    background: var(--color-golden-bun);
    border-color: var(--color-golden-bun);
    color: var(--color-white);
    box-shadow: 0 0 0 4px rgba(183, 121, 43, 0.15);
}

.step-progress__item--active .step-progress__label {
    color: var(--color-text);
}

.step-progress__item--done .step-progress__num {
    background: var(--color-chocolate-brown);
    border-color: var(--color-chocolate-brown);
    color: var(--color-white);
}


/* ----- Builder steps ----- */
.builder-step {
    display: none;
}

.builder-step--active {
    display: block;
}

.builder-step__eyebrow {
    font-size: var(--text-sm);
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-golden-bun-dark);
    margin-bottom: var(--space-sm);
}

.builder-step__title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1;
    margin-bottom: var(--space-md);
}

.builder-step__desc {
    font-size: var(--text-md);
    line-height: 1.55;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2xl);
    max-width: 640px;
}

.builder-step__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-2xl);
    flex-wrap: wrap;
}

.builder-step__hint {
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--color-text-muted);
}

.builder-step__note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-top: 0;
    margin-bottom: var(--space-xl);
    padding: var(--space-md);
    background: var(--color-cream-deep);
    border-radius: var(--border-radius);
    font-size: var(--text-sm);
    color: var(--color-chocolate-brown);
}


/* ----- Box size options ----- */
.box-options {
    display: grid;
    /* auto-fit so the cards always fill the row width — two cards stretch to
       occupy the same total space three cards would. */
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: var(--space-lg);
}

.box-option {
    cursor: pointer;
    display: block;
}

.box-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.box-option__card {
    position: relative;
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-xl);
    background: var(--color-white);
    overflow: hidden;
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.box-option:hover .box-option__card {
    border-color: var(--color-golden-bun);
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(92, 58, 30, 0.12);
}

.box-option input:checked + .box-option__card {
    border-color: var(--color-golden-bun);
    box-shadow: 0 0 0 3px rgba(183, 121, 43, 0.18), 0 16px 40px rgba(92, 58, 30, 0.15);
}

.box-option__image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--surface-warm);
}

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

.box-option__body {
    padding: var(--space-lg);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.box-option__size {
    font-size: var(--text-xs);
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-golden-bun-dark);
}

.box-option__title {
    font-size: var(--text-lg);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.box-option__price {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-golden-bun);
}

.box-option__check {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-full);
    background: var(--color-white);
    border: 2px solid var(--color-border);
    display: grid;
    place-items: center;
    color: transparent;
    transition: all var(--transition-fast);
}

.box-option input:checked + .box-option__card .box-option__check {
    background: var(--color-golden-bun);
    border-color: var(--color-golden-bun);
    color: var(--color-white);
}


/* ----- Flavour picker ----- */
.builder-picker {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-2xl);
    align-items: start;
}

.flavour-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.flavour-card {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    gap: var(--space-md);
    align-items: center;
    padding: var(--space-md);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-xl);
    background: var(--color-white);
    transition: border-color var(--transition-fast);
}

.flavour-card:hover { border-color: var(--color-golden-bun); }

.flavour-card__image {
    width: 96px;
    height: 96px;
    border-radius: var(--border-radius);
    overflow: hidden;
    background: var(--surface-warm);
}

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

.flavour-card__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.flavour-card__name {
    font-size: var(--text-sm);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.flavour-card__desc {
    font-size: var(--text-xs);
    line-height: 1.4;
    color: var(--color-text-muted);
}

.flavour-card__qty {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.flavour-card__qty-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-full);
    border: 1.5px solid var(--color-border);
    background: var(--color-white);
    font-size: var(--text-md);
    line-height: 1;
    transition: all var(--transition-fast);
}

.flavour-card__qty-btn:hover:not(:disabled) {
    border-color: var(--color-golden-bun);
    background: var(--color-golden-bun);
    color: var(--color-white);
}

.flavour-card__qty-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.flavour-card__qty-val {
    min-width: 24px;
    text-align: center;
    font-weight: 800;
    font-size: var(--text-md);
}


/* ----- Builder summary sidebar ----- */
.builder-summary {
    position: sticky;
    top: calc(var(--header-height) + var(--space-lg));
    padding: var(--space-xl);
    border-radius: var(--border-radius-xl);
    background: var(--color-cream-deep);
    border: 1.5px solid var(--color-biscuit);
}

.builder-summary__title {
    font-size: var(--text-base);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-md);
}

.builder-summary__meter {
    height: 8px;
    background: var(--color-white);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: var(--space-sm);
}

.builder-summary__meter-bar {
    height: 100%;
    background: linear-gradient(to right, var(--color-golden-bun), var(--color-meringue-pink));
    width: 0;
    transition: width var(--transition-base);
}

.builder-summary__count {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-lg);
}

.builder-summary__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    font-size: var(--text-sm);
}

.builder-summary__list li {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.builder-summary__list li span {
    font-weight: 700;
    color: var(--color-golden-bun);
    min-width: 24px;
}

.builder-summary__empty {
    font-style: italic;
    color: var(--color-text-muted);
}

.tag-inline {
    display: inline-block;
    padding: 2px 10px;
    background: var(--color-golden-bun);
    color: var(--color-white);
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.9em;
}


/* ----- Builder review (step 3) ----- */
.builder-review__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 0;
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    border: 2px solid var(--color-border);
    background: var(--color-white);
}

.builder-review__image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--surface-warm);
}

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

.builder-review__body {
    padding: var(--space-2xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.builder-review__eyebrow {
    font-size: var(--text-xs);
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-golden-bun-dark);
}

.builder-review__title {
    font-size: var(--text-xl);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.builder-review__size {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}

.builder-review__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--text-sm);
    margin-bottom: var(--space-lg);
}

.builder-review__list li {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.builder-review__list li span {
    font-weight: 700;
    color: var(--color-golden-bun);
    min-width: 28px;
}

.builder-review__total {
    margin-top: auto;
    padding-top: var(--space-md);
    border-top: 1.5px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: var(--text-md);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.builder-review__total strong {
    font-size: var(--text-xl);
    color: var(--color-golden-bun);
}


/* ----- Enquiry forms (weddings, wholesale) ----- */
.enquiry-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-2xl);
    background: var(--color-white);
    border-radius: var(--border-radius-xl);
    border: 2px solid var(--color-border);
}

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

.enquiry-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.enquiry-form__label {
    font-size: var(--text-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-chocolate-brown);
}

.enquiry-form__input {
    padding: var(--space-md);
    border: 1.5px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-cream);
    font-size: var(--text-sm);
    font-family: inherit;
    transition: border-color var(--transition-fast);
}

.enquiry-form__input:focus {
    outline: none;
    border-color: var(--color-golden-bun);
    background: var(--color-white);
}

textarea.enquiry-form__input {
    resize: vertical;
    line-height: 1.5;
}

.enquiry-form .btn {
    align-self: flex-start;
    margin-top: var(--space-md);
}


/* ----- Wholesale feature grid ----- */
.wholesale-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin-top: var(--space-2xl);
}

.wholesale-card {
    padding: var(--space-xl);
    background: var(--color-white);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-xl);
    text-align: center;
}

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

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

.wholesale-card__text {
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-muted);
}


/* ----- Bullet list (used in weddings) ----- */
.bullet-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.bullet-list li {
    padding-left: var(--space-lg);
    position: relative;
    font-size: var(--text-sm);
    line-height: 1.5;
}

.bullet-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 8px;
    height: 8px;
    border-radius: var(--border-radius-full);
    background: var(--color-golden-bun);
}


/* ----- Merch card variants ----- */
.product-card__badge--soft {
    background: var(--surface-warm);
    color: var(--color-chocolate-brown);
    border: 1px solid var(--color-biscuit);
}


/* ----- Header submenu (Shop dropdown) ----- */
.header__nav-item--has-menu {
    position: relative;
}

.header__submenu {
    position: absolute;
    top: calc(100% + var(--space-md));
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 240px;
    padding: var(--space-sm) 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
    z-index: 50;
}

.header__nav-item--has-menu:hover .header__submenu,
.header__nav-item--has-menu:focus-within .header__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.header__submenu-link {
    display: block;
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--text-sm);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.header__submenu-link:hover {
    background-color: var(--surface-warm);
    color: var(--color-golden-bun);
}


/* ----- Responsive adjustments for shop components ----- */
@media (max-width: 1024px) {
    .shop-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .shop-tile,
    .shop-tile--large,
    .shop-tile--wide {
        grid-column: span 2;
        min-height: 380px;
    }
    .shop-tile--accent {
        grid-column: span 1;
        min-height: 380px;
    }
    .shop-tile--wide {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
    .shop-tile--wide .shop-tile__media { order: 0; }

    .builder-picker {
        grid-template-columns: 1fr;
    }
    .builder-summary {
        position: static;
    }

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

@media (max-width: 768px) {
    .shop-grid { grid-template-columns: 1fr; }
    .shop-tile,
    .shop-tile--large,
    .shop-tile--wide,
    .shop-tile--accent {
        grid-column: span 1;
        min-height: 360px;
    }

    .box-options {
        grid-template-columns: 1fr;
    }

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

    .flavour-card {
        grid-template-columns: 72px 1fr auto;
    }
    .flavour-card__image {
        width: 72px;
        height: 72px;
    }

    .enquiry-form__row {
        grid-template-columns: 1fr;
    }

    .builder-review__card {
        grid-template-columns: 1fr;
    }

    .step-progress__label {
        font-size: 10px;
    }

    .header__submenu {
        position: static;
        transform: none;
        box-shadow: none;
        border: none;
        background: transparent;
        padding: 0 0 0 var(--space-md);
        min-width: 0;
        opacity: 1;
        visibility: visible;
    }
}


/* ============================================================
   ░░░ FUNKY · BOLD · MODERN — Design Layer v2 ░░░
   Loaded last so overrides cascade naturally.
   - Chunky display type via Google Fonts
   - High-contrast pop palette
   - Sticker buttons with hard offset shadows
   - Marquee, rotated badges, outline statement type
   ============================================================ */

/* Brand-guide compliance: only Avenir is permitted. Display + script tokens
   remain as alias variables but resolve to the same Avenir stack as body. */

:root {
    /* type — all roles use Avenir LT Pro per brand guide */
    --font-display: var(--font-body);
    --font-script:  var(--font-body);

    /* pop palette — remapped to the original CHOUX BOX brand palette */
    --pop-pink:     var(--color-meringue-pink);   /* #F6B8A3 */
    --pop-yellow:   var(--color-solero-yellow);   /* #F2C84C */
    --pop-blue:     var(--color-sprinkle-blue);   /* #2B5F7F */
    --pop-red:      var(--color-raspberry-red);   /* #7F082F */
    --pop-mint:     var(--color-creme-pat);       /* #F0E0B7 */
    --ink:          var(--color-black);           /* #000000 */

    /* sticker shadows — hard offset for a chunky neo-retro feel */
    --shadow-sticker:        4px 4px 0 var(--ink);
    --shadow-sticker-lg:     8px 8px 0 var(--ink);
    --shadow-sticker-xl:     12px 12px 0 var(--ink);
    --shadow-sticker-pop:    6px 6px 0 var(--pop-pink);
    --shadow-sticker-yellow: 6px 6px 0 var(--pop-yellow);

    /* radii */
    --radius-pill: 9999px;
    --radius-blob: 28px;

    /* chunky borders */
    --border-chunky: 2.5px solid var(--ink);
}

/* ----- Body & base typography reset (display vibe) ----- */
body {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--ink);
    letter-spacing: -0.005em;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: none;
}

.subheading,
.section__subtitle,
.shop-tile__eyebrow,
.builder-step__eyebrow,
.hero__eyebrow,
.box-option__size,
.builder-review__eyebrow,
.page-header__eyebrow {
    font-family: var(--font-script);
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
}

.statement {
    font-family: var(--font-display);
    letter-spacing: -0.04em;
}

.statement--italic {
    font-family: var(--font-script);
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.02em;
}

/* outlined ghost — replaces the faded fill with a chunky stroke */
.statement--ghost {
    color: transparent;
    -webkit-text-stroke: 2.5px var(--ink);
    opacity: 1;
}

.statement__accent {
    color: var(--pop-red);
}


/* ----- Announcement bar — bigger, alive ----- */
.announcement-bar {
    background: var(--ink);
    color: var(--color-vanilla);
    padding: 10px var(--space-md);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    border-bottom: 3px solid var(--pop-pink);
}

.announcement-bar__text::before { content: '✦  '; color: var(--pop-yellow); }
.announcement-bar__text::after  { content: '  ✦'; color: var(--pop-yellow); }


/* ----- Header — chunky black underline, sticker logo ----- */
.header {
    background: var(--color-vanilla);
    border-bottom: 3px solid var(--ink);
    height: 88px;
}

.header__logo {
    background: var(--color-vanilla);
    border: 3px solid var(--ink);
    border-top: none;
    box-shadow: 0 6px 0 var(--ink);
    padding: var(--space-sm) var(--space-xl) var(--space-md);
    border-radius: 0 0 var(--radius-blob) var(--radius-blob);
}

.header__logo:hover {
    background: var(--pop-yellow);
}

.header--scrolled .header__logo {
    background: transparent;
    border: none;
    box-shadow: none;
}

.header__nav-link {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: none;
    letter-spacing: -0.01em;
    font-size: var(--text-md);
    color: var(--ink);
}

.header__nav-link::after {
    height: 4px;
    background: var(--pop-pink);
    border-radius: 999px;
    bottom: -6px;
}

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

.header__nav-link:hover::after,
.header__nav-link--active::after {
    background: var(--pop-pink);
}

.header__action-btn {
    border: 2px solid var(--ink);
    color: var(--ink);
    transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.header__action-btn:hover {
    background: var(--pop-yellow);
    transform: translate(-1px, -1px);
}

.header__cart-count {
    background: var(--pop-red);
    color: var(--color-vanilla);
    border: 2px solid var(--ink);
    width: 22px;
    height: 22px;
    top: -4px;
    right: -4px;
    font-weight: 800;
    font-size: 11px;
}

.header__submenu {
    border: 2.5px solid var(--ink);
    border-radius: 18px;
    box-shadow: 6px 6px 0 var(--ink);
    background: var(--color-vanilla);
}

.header__submenu-link {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-sm);
}

.header__submenu-link:hover {
    background: var(--pop-yellow);
    color: var(--ink);
}


/* ----- Buttons — sticker style with hard offset shadow ----- */
.btn {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    border: 2.5px solid var(--ink);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sticker);
    transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--ink);
}

.btn:active {
    transform: translate(2px, 2px);
    box-shadow: 0 0 0 var(--ink);
}

.btn--primary {
    background: var(--pop-pink);
    color: var(--ink);
    border-color: var(--ink);
}

.btn--primary:hover {
    background: var(--pop-yellow);
    color: var(--ink);
    border-color: var(--ink);
}

.btn--secondary {
    background: var(--pop-yellow);
    color: var(--ink);
    border-color: var(--ink);
}

.btn--secondary:hover {
    background: var(--pop-pink);
    border-color: var(--ink);
}

.btn--accent {
    background: var(--pop-red);
    color: var(--color-vanilla);
    border-color: var(--ink);
}

.btn--accent:hover {
    background: var(--ink);
    color: var(--pop-yellow);
    border-color: var(--ink);
}

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

.btn--outline:hover {
    background: var(--pop-pink);
    color: var(--ink);
    border-color: var(--ink);
}

.section--dark .btn--outline,
.section--golden .btn--outline {
    background: var(--color-vanilla);
    color: var(--ink);
    border-color: var(--ink);
    box-shadow: 4px 4px 0 var(--color-vanilla);
}

.section--dark .btn--outline:hover,
.section--golden .btn--outline:hover {
    background: var(--pop-yellow);
    color: var(--ink);
    box-shadow: 6px 6px 0 var(--color-vanilla);
}

.btn--outline-light {
    background: transparent;
    color: var(--color-vanilla);
    border-color: var(--color-vanilla);
    box-shadow: 4px 4px 0 var(--color-vanilla);
}

.btn--outline-light:hover {
    background: var(--color-vanilla);
    color: var(--ink);
    box-shadow: 6px 6px 0 var(--color-vanilla);
}

.btn--ghost {
    background: transparent;
    color: var(--ink);
    border-color: transparent;
    box-shadow: none;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    text-decoration-color: var(--pop-pink);
}

.btn--ghost:hover {
    background: transparent;
    color: var(--ink);
    box-shadow: none;
    transform: translate(0, -1px);
    text-decoration-color: var(--pop-yellow);
}

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


/* ----- Product cards — chunky black border + hard sticker shadow ----- */
.product-card {
    background: var(--color-vanilla);
    border: 2.5px solid var(--ink);
    border-radius: 22px;
    box-shadow: var(--shadow-sticker);
    overflow: hidden;
}

.product-card:hover {
    transform: translate(-3px, -5px);
    box-shadow: 8px 10px 0 var(--ink);
}

.product-card__image-wrap {
    border-bottom: 2.5px solid var(--ink);
    background: var(--color-cream-deep);
}

.product-card__badge {
    background: var(--pop-yellow);
    color: var(--ink);
    border: 2px solid var(--ink);
    border-radius: 999px;
    padding: 6px 12px;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 3px 3px 0 var(--ink);
    transform: rotate(-6deg);
    top: var(--space-md);
    left: var(--space-md);
}

.product-card__badge--soft {
    background: var(--pop-mint);
    color: var(--ink);
    border-color: var(--ink);
}

.product-card__category {
    color: var(--ink);
    opacity: 0.65;
    font-family: var(--font-script);
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
}

.product-card__name {
    font-family: var(--font-display);
    font-weight: 800;
    text-transform: none;
    letter-spacing: -0.02em;
    font-size: var(--text-lg);
}

.product-card__name a:hover {
    color: var(--pop-red);
}

.product-card__price {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-lg);
    color: var(--ink);
    background: var(--pop-yellow);
    padding: 4px 12px;
    border-radius: 999px;
    border: 2px solid var(--ink);
}

.product-card__description {
    color: var(--ink);
    opacity: 0.7;
}


/* ----- Filters — sticker pills ----- */
.filters__btn {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: none;
    letter-spacing: -0.005em;
    border: 2.5px solid var(--ink);
    color: var(--ink);
    background: var(--color-vanilla);
    box-shadow: 3px 3px 0 var(--ink);
    transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.filters__btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--ink);
    background: var(--pop-yellow);
    color: var(--ink);
    border-color: var(--ink);
}

.filters__btn--active {
    background: var(--pop-pink);
    color: var(--ink);
    border-color: var(--ink);
}


/* ----- Hero — punchier, sticker tag eyebrow ----- */
.hero {
    background: var(--color-cream-deep);
    border-bottom: 3px solid var(--ink);
    overflow: hidden;
}

.hero__eyebrow {
    display: inline-block;
    background: var(--pop-yellow);
    color: var(--ink);
    border: 2.5px solid var(--ink);
    border-radius: 999px;
    padding: 6px 18px;
    font-family: var(--font-script);
    font-style: italic;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.02em;
    box-shadow: 3px 3px 0 var(--ink);
    transform: rotate(-2deg);
    margin-bottom: var(--space-xl);
}

.hero__title--display {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 0.92;
    color: var(--ink);
    text-transform: none;
}

.hero__line--italic {
    font-family: var(--font-script);
    font-style: italic;
    font-weight: 500;
    color: var(--pop-red);
    letter-spacing: -0.02em;
}

.hero__description {
    font-size: var(--text-lg);
    color: var(--ink);
    opacity: 0.78;
    line-height: 1.5;
}

.hero__media {
    border: 3px solid var(--ink);
    border-radius: var(--radius-blob);
    box-shadow: var(--shadow-sticker-xl);
    transform: translateY(-12px) rotate(-1.5deg);
}

.hero--video {
    border-bottom: 3px solid var(--ink);
}


/* ----- Section backgrounds — bolder palette ----- */
.section--pink {
    background: var(--pop-pink);
    border-top: 3px solid var(--ink);
    border-bottom: 3px solid var(--ink);
}

.section--golden {
    background: var(--pop-yellow);
    color: var(--ink);
    border-top: 3px solid var(--ink);
    border-bottom: 3px solid var(--ink);
}

.section--golden .section__subtitle,
.section--golden .section__title,
.section--golden .section__description {
    color: var(--ink);
}

.section--biscuit {
    background: var(--color-cream-deep);
}

.section--dark {
    background: var(--ink);
    color: var(--color-vanilla);
    border-top: 3px solid var(--ink);
    border-bottom: 3px solid var(--ink);
}

.section--creme {
    background: var(--pop-mint);
}

.section--creme > .container {
    background: var(--color-vanilla);
    border: 3px solid var(--ink);
    border-radius: var(--radius-blob);
    box-shadow: var(--shadow-sticker-lg);
    padding: var(--space-2xl);
}


/* ----- Section titles ----- */
.section__title {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.03em;
    text-transform: none;
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    line-height: 1;
}

.section__subtitle {
    font-size: var(--text-md);
    color: var(--ink);
    opacity: 0.75;
}

.section__description {
    color: var(--ink);
    opacity: 0.78;
    line-height: 1.55;
}


/* ----- Marquee — funky scrolling sticker band ----- */
.marquee {
    background: var(--ink);
    color: var(--color-vanilla);
    padding: 18px 0;
    overflow: hidden;
    border-top: 3px solid var(--ink);
    border-bottom: 3px solid var(--ink);
    position: relative;
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.02em;
}

.marquee--pink   { background: var(--pop-pink); color: var(--ink); }
.marquee--yellow { background: var(--pop-yellow); color: var(--ink); }
.marquee--mint   { background: var(--pop-mint); color: var(--ink); }

.marquee__track {
    display: flex;
    gap: var(--space-2xl);
    width: max-content;
    animation: marquee-scroll 32s linear infinite;
    will-change: transform;
}

.marquee__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xl);
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
    white-space: nowrap;
}

.marquee__item::after {
    content: '✦';
    color: var(--pop-yellow);
    font-size: 0.85em;
}

.marquee--pink .marquee__item::after,
.marquee--yellow .marquee__item::after {
    color: var(--pop-red);
}

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


/* ----- Testimonials — chunky cards with rotated tape ----- */
.testimonial {
    background: var(--color-vanilla);
    border: 2.5px solid var(--ink);
    border-radius: var(--radius-blob);
    box-shadow: var(--shadow-sticker);
    position: relative;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.testimonial:hover {
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0 var(--ink);
}

.testimonial:nth-child(odd)  { transform: rotate(-1deg); }
.testimonial:nth-child(even) { transform: rotate(1deg); }
.testimonial:nth-child(odd):hover  { transform: rotate(-1deg) translate(-3px, -3px); }
.testimonial:nth-child(even):hover { transform: rotate(1deg) translate(-3px, -3px); }

.testimonial__stars {
    color: var(--pop-red);
    font-size: var(--text-lg);
}

.testimonial__text {
    font-family: var(--font-script);
    font-weight: 500;
    font-size: var(--text-md);
    line-height: 1.45;
    color: var(--ink);
}

.testimonial__author {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink);
    text-transform: none;
    letter-spacing: -0.01em;
}


/* ----- Value cards — sticker icon block ----- */
.value-card {
    background: var(--color-vanilla);
    border: 2.5px solid var(--ink);
    border-radius: 20px;
    padding: var(--space-xl);
    box-shadow: var(--shadow-sticker);
    transition: transform 180ms ease;
}

.value-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 7px 7px 0 var(--ink);
}

.value-card__icon {
    background: var(--pop-pink);
    color: var(--ink);
    border: 2.5px solid var(--ink);
    border-radius: 18px;
    width: 64px;
    height: 64px;
    padding: 12px;
    box-shadow: 3px 3px 0 var(--ink);
}

.value-card__title {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: none;
    font-size: var(--text-lg);
}

.value-card:nth-child(2n) .value-card__icon { background: var(--pop-yellow); }
.value-card:nth-child(3n) .value-card__icon { background: var(--pop-mint); }
.value-card:nth-child(4n) .value-card__icon { background: var(--pop-pink); }


/* ----- Wholesale cards ----- */
.wholesale-card {
    background: var(--color-vanilla);
    border: 2.5px solid var(--ink);
    border-radius: 22px;
    box-shadow: var(--shadow-sticker);
    transition: transform 180ms ease;
}

.wholesale-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 7px 7px 0 var(--ink);
}

.wholesale-card__icon {
    background: var(--pop-mint);
    color: var(--ink);
    border: 2.5px solid var(--ink);
    border-radius: 18px;
    width: 64px;
    height: 64px;
    padding: 12px;
    box-shadow: 3px 3px 0 var(--ink);
    margin-bottom: var(--space-lg);
}

.wholesale-card:nth-child(2) .wholesale-card__icon { background: var(--pop-pink); }
.wholesale-card:nth-child(3) .wholesale-card__icon { background: var(--pop-yellow); }


/* ----- Shop tiles — sticker treatment ----- */
.shop-tile {
    background: var(--color-vanilla);
    border: 2.5px solid var(--ink);
    border-radius: var(--radius-blob);
    box-shadow: var(--shadow-sticker);
    overflow: hidden;
}

.shop-tile:hover {
    transform: translate(-3px, -5px);
    box-shadow: 8px 10px 0 var(--ink);
}

.shop-tile--accent {
    background: var(--pop-pink);
    color: var(--ink);
    border-color: var(--ink);
}

.shop-tile--accent .shop-tile__cta,
.shop-tile--accent .shop-tile__text,
.shop-tile--accent .shop-tile__eyebrow {
    color: var(--ink);
}

.shop-tile__media {
    border-bottom: 2.5px solid var(--ink);
}

.shop-tile__title {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.03em;
    text-transform: none;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.shop-tile__cta {
    color: var(--ink);
    background: var(--pop-yellow);
    border: 2px solid var(--ink);
    border-radius: 999px;
    padding: 8px 16px;
    align-self: flex-start;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-sm);
    text-transform: none;
    letter-spacing: 0;
    box-shadow: 3px 3px 0 var(--ink);
    transition: transform 120ms ease;
}

.shop-tile:hover .shop-tile__cta {
    transform: translate(-2px, -2px);
    color: var(--ink);
}

.shop-tile--accent .shop-tile__cta {
    background: var(--color-vanilla);
}


/* ----- Page header — warm cream block with drippy bottom ----- */
.page-header {
    background: var(--color-biscuit-light);
    border-bottom: none;
    padding: var(--space-4xl) 0 var(--space-3xl);
    position: relative;
    overflow: visible;
}

/* drippy edge below page header — inherits the header background */
.page-header::after {
    content: '';
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 90px;
    background-color: var(--color-biscuit-light);
    -webkit-mask: var(--drip-flow-svg) center top / auto 100% repeat-x;
            mask: var(--drip-flow-svg) center top / auto 100% repeat-x;
    pointer-events: none;
    z-index: 3;
    margin-top: -1px;
}

.page-header__title {
    font-family: var(--font-display);
    font-weight: 800;
    text-transform: none;
    letter-spacing: -0.04em;
    font-size: clamp(2.5rem, 6vw, 5rem);
    color: var(--ink);
    line-height: 1;
}

.page-header__eyebrow {
    display: inline-block;
    background: var(--ink);
    color: var(--pop-yellow);
    border: 2.5px solid var(--ink);
    border-radius: 999px;
    padding: 4px 14px;
    font-family: var(--font-script);
    font-style: italic;
    font-weight: 600;
    text-transform: none;
    margin-bottom: var(--space-lg);
    transform: rotate(-2deg);
}

.page-header__lead {
    color: var(--ink);
    opacity: 0.85;
    font-size: var(--text-md);
}


/* ----- Statement bands — outlined ghost type, brighter accent ----- */
.statement-band {
    padding: var(--space-3xl) 0 var(--space-5xl);
}

.statement {
    color: var(--ink);
}


/* ----- Newsletter — chunky form ----- */
.newsletter__input {
    border: 2.5px solid var(--ink);
    border-radius: 999px;
    padding: var(--space-md) var(--space-lg);
    font-family: var(--font-display);
    background: var(--color-vanilla);
    box-shadow: 3px 3px 0 var(--ink);
}

.newsletter__input:focus {
    border-color: var(--ink);
    background: var(--color-vanilla);
    box-shadow: 5px 5px 0 var(--ink);
}


/* ----- Form inputs — bolder ----- */
.form-input,
.checkout__input,
.checkout__select,
.enquiry-form__input {
    border: 2.5px solid var(--ink);
    border-radius: 12px;
    background: var(--color-vanilla);
    font-family: var(--font-display);
    padding: var(--space-md);
}

.form-input:focus,
.checkout__input:focus,
.checkout__select:focus,
.enquiry-form__input:focus {
    border-color: var(--ink);
    background: var(--color-vanilla);
    box-shadow: 4px 4px 0 var(--pop-pink);
}

.form-label,
.checkout__label,
.enquiry-form__label {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
    font-size: var(--text-sm);
}

.checkout__section-title {
    font-family: var(--font-display);
    font-weight: 800;
    text-transform: none;
    letter-spacing: -0.02em;
    font-size: var(--text-xl);
    border-bottom: 3px solid var(--ink);
    padding-bottom: var(--space-md);
}

.checkout__summary {
    background: var(--pop-mint);
    border: 3px solid var(--ink);
    border-radius: var(--radius-blob);
    box-shadow: var(--shadow-sticker-lg);
}

.checkout__summary-title {
    font-family: var(--font-display);
    font-weight: 800;
    text-transform: none;
    letter-spacing: -0.02em;
    border-bottom: 3px solid var(--ink);
    color: var(--ink);
}

.checkout__summary-total {
    border-top: 3px solid var(--ink);
    font-family: var(--font-display);
    text-transform: none;
    letter-spacing: -0.01em;
    font-size: var(--text-lg);
}

.checkout__summary-divider {
    border-top: 2px solid var(--ink);
    opacity: 0.4;
}

.checkout__summary-item-qty {
    background: var(--ink);
    color: var(--pop-yellow);
    border: 1.5px solid var(--ink);
    width: 24px;
    height: 24px;
}


/* ----- Enquiry form sticker shell ----- */
.enquiry-form {
    background: var(--color-vanilla);
    border: 3px solid var(--ink);
    border-radius: var(--radius-blob);
    box-shadow: var(--shadow-sticker-lg);
}


/* ----- Notices — sticker style ----- */
.notice {
    background: var(--pop-yellow);
    border: 2.5px solid var(--ink);
    border-radius: 16px;
    box-shadow: var(--shadow-sticker);
    color: var(--ink);
}

.notice--collection { background: var(--pop-mint); }
.notice--delivery { background: var(--pop-pink); }
.notice strong, .notice span { color: var(--ink); }


/* ----- Step progress ----- */
.step-progress::before {
    background: var(--ink);
    height: 3px;
}

.step-progress__num {
    background: var(--color-vanilla);
    border: 2.5px solid var(--ink);
    color: var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    font-family: var(--font-display);
}

.step-progress__item--active .step-progress__num {
    background: var(--pop-pink);
    border-color: var(--ink);
    color: var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
}

.step-progress__item--done .step-progress__num {
    background: var(--ink);
    color: var(--pop-yellow);
}

.step-progress__label {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink);
    text-transform: none;
    letter-spacing: 0;
}


/* ----- Box options & flavour cards ----- */
.box-option__card {
    background: var(--color-vanilla);
    border: 2.5px solid var(--ink);
    border-radius: 22px;
    box-shadow: var(--shadow-sticker);
}

.box-option:hover .box-option__card {
    transform: translate(-3px, -5px);
    box-shadow: 8px 10px 0 var(--ink);
    border-color: var(--ink);
}

.box-option input:checked + .box-option__card {
    border-color: var(--ink);
    background: var(--pop-yellow);
    box-shadow: 6px 6px 0 var(--ink);
}

.box-option__title {
    font-family: var(--font-display);
    text-transform: none;
    letter-spacing: -0.02em;
}

.box-option__price {
    color: var(--ink);
    font-family: var(--font-display);
}

.box-option__check {
    background: var(--color-vanilla);
    border: 2.5px solid var(--ink);
}

.box-option input:checked + .box-option__card .box-option__check {
    background: var(--pop-red);
    border-color: var(--ink);
    color: var(--color-vanilla);
}

.flavour-card {
    background: var(--color-vanilla);
    border: 2.5px solid var(--ink);
    border-radius: 18px;
    box-shadow: 3px 3px 0 var(--ink);
}

.flavour-card:hover {
    border-color: var(--ink);
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--ink);
}

.flavour-card__name {
    font-family: var(--font-display);
    text-transform: none;
    letter-spacing: -0.01em;
}

.flavour-card__qty-btn {
    border: 2px solid var(--ink);
    background: var(--color-vanilla);
}

.flavour-card__qty-btn:hover:not(:disabled) {
    background: var(--pop-pink);
    color: var(--ink);
    border-color: var(--ink);
}

.builder-summary {
    background: var(--pop-yellow);
    border: 3px solid var(--ink);
    border-radius: var(--radius-blob);
    box-shadow: var(--shadow-sticker-lg);
}

.builder-summary__title {
    font-family: var(--font-display);
    text-transform: none;
    letter-spacing: -0.02em;
}

.builder-summary__meter-bar {
    background: var(--ink);
}

.tag-inline {
    background: var(--pop-pink);
    color: var(--ink);
    border: 2px solid var(--ink);
    font-family: var(--font-display);
}

.builder-step__title {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.03em;
    text-transform: none;
}

.builder-review__card {
    background: var(--color-vanilla);
    border: 3px solid var(--ink);
    border-radius: var(--radius-blob);
    box-shadow: var(--shadow-sticker-lg);
}

.builder-review__title {
    font-family: var(--font-display);
    text-transform: none;
    letter-spacing: -0.02em;
}

.builder-review__total strong {
    color: var(--pop-red);
    font-family: var(--font-display);
}


/* ----- Location cards & modal ----- */
.location-card {
    background: var(--color-vanilla);
    border: 2.5px solid var(--ink);
    border-radius: 20px;
    box-shadow: var(--shadow-sticker);
}

.location-card:hover {
    transform: translate(-2px, -3px);
    box-shadow: 6px 8px 0 var(--ink);
}

.location-card__title {
    font-family: var(--font-display);
    text-transform: none;
    letter-spacing: -0.02em;
    font-size: var(--text-xl);
}

.location-card__hours {
    background: var(--pop-yellow);
    border: 2px solid var(--ink);
    border-radius: 12px;
}

.location-card__badge {
    background: var(--pop-pink);
    color: var(--ink);
    border: 2px solid var(--ink);
    border-radius: 999px;
    box-shadow: 3px 3px 0 var(--ink);
    transform: rotate(-4deg);
    font-family: var(--font-display);
}

.location-modal__panel {
    border: 3px solid var(--ink);
    border-radius: var(--radius-blob);
    box-shadow: var(--shadow-sticker-xl);
    background: var(--color-vanilla);
}

.location-modal__title {
    font-family: var(--font-display);
    text-transform: none;
    letter-spacing: -0.02em;
}

.location-option {
    background: var(--color-vanilla);
    border: 2.5px solid var(--ink);
    border-radius: 14px;
    box-shadow: 3px 3px 0 var(--ink);
}

.location-option:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--ink);
    border-color: var(--ink);
}

.location-option--selected {
    background: var(--pop-yellow);
    border-color: var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
}

.location-option__name {
    font-family: var(--font-display);
    text-transform: none;
    letter-spacing: -0.01em;
}

.location-option__check {
    border: 2px solid var(--ink);
    background: var(--color-vanilla);
}

.location-option--selected .location-option__check {
    background: var(--pop-red);
    border-color: var(--ink);
    color: var(--color-vanilla);
}


/* ----- Cart drawer ----- */
.cart-drawer__panel {
    background: var(--color-vanilla);
    border-left: 3px solid var(--ink);
}

.cart-drawer__header {
    border-bottom: 3px solid var(--ink);
    background: var(--pop-pink);
}

.cart-drawer__title {
    font-family: var(--font-display);
    text-transform: none;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.cart-drawer__footer {
    border-top: 3px solid var(--ink);
    background: var(--pop-mint);
}

.cart-drawer__subtotal {
    font-family: var(--font-display);
    text-transform: none;
    color: var(--ink);
}

.cart-item__name {
    font-family: var(--font-display);
    text-transform: none;
    letter-spacing: -0.01em;
}

.cart-item__image {
    border: 2px solid var(--ink);
    border-radius: 10px;
}


/* ----- Product detail page ----- */
.product-detail__main-image {
    border: 3px solid var(--ink);
    border-radius: var(--radius-blob);
    box-shadow: var(--shadow-sticker-lg);
    background: var(--color-vanilla);
}

.product-detail__thumb {
    border: 2.5px solid var(--ink);
    border-radius: 12px;
}

.product-detail__thumb--active,
.product-detail__thumb:hover {
    border-color: var(--ink);
    box-shadow: 3px 3px 0 var(--pop-pink);
}

.product-detail__title {
    font-family: var(--font-display);
    text-transform: none;
    letter-spacing: -0.03em;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
}

.product-detail__price {
    background: var(--pop-yellow);
    color: var(--ink);
    border: 2.5px solid var(--ink);
    border-radius: 999px;
    padding: 6px 18px;
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 800;
    box-shadow: 3px 3px 0 var(--ink);
}

.product-detail__qty-controls {
    border: 2.5px solid var(--ink);
    border-radius: 999px;
    overflow: hidden;
    background: var(--color-vanilla);
}

.product-detail__qty-btn {
    background: var(--color-vanilla);
}

.product-detail__qty-btn:hover {
    background: var(--pop-pink);
}

.product-detail__qty-value {
    font-family: var(--font-display);
    border-color: var(--ink);
}

.product-detail__category {
    font-family: var(--font-script);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
    opacity: 0.7;
}

.product-detail__meta {
    border-top: 2.5px solid var(--ink);
    padding-top: var(--space-xl);
}

.product-detail__meta-label {
    font-family: var(--font-display);
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
}


/* ----- Footer — chunky black band, sticker socials ----- */
.footer {
    background: var(--ink);
    color: var(--color-vanilla);
    border-top: 3px solid var(--ink);
    position: relative;
}

/* drippy yellow icing flowing from the CTA into the pink marquee below */
.footer__drip {
    display: block;
    position: relative;
    width: 100%;
    height: 90px;
    margin-bottom: -90px;
    background-color: var(--footer-drip-color, var(--color-solero-yellow));
    -webkit-mask: var(--drip-flow-svg) center top / auto 100% repeat-x;
            mask: var(--drip-flow-svg) center top / auto 100% repeat-x;
    pointer-events: none;
    z-index: 2;
}

/* sibling marquee sits below the drip but the drip's transparent gaps reveal it */
.footer__marquee {
    position: relative;
    z-index: 1;
    padding-top: calc(90px + 16px);
}

.footer__container {
    padding: var(--space-5xl) var(--space-xl) var(--space-xl);
}

.footer__tagline {
    color: var(--color-cream);
    font-family: var(--font-script);
    font-style: italic;
    font-weight: 500;
    font-size: var(--text-md);
    opacity: 0.85;
}

.footer__heading {
    color: var(--pop-yellow);
    font-family: var(--font-display);
    font-weight: 800;
    text-transform: none;
    letter-spacing: -0.01em;
    font-size: var(--text-md);
}

.footer__link,
.footer__address {
    color: var(--color-cream);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    transition: color 120ms ease, transform 120ms ease;
    display: inline-block;
}

.footer__link:hover {
    color: var(--pop-pink);
    transform: translateX(3px);
}

.footer__social {
    gap: var(--space-sm);
}

.footer__social-link {
    background: var(--color-vanilla);
    color: var(--ink);
    border: 2px solid var(--color-vanilla);
    width: 42px;
    height: 42px;
    box-shadow: 3px 3px 0 var(--pop-pink);
    transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.footer__social-link:hover {
    background: var(--pop-yellow);
    color: var(--ink);
    border-color: var(--color-vanilla);
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--pop-pink);
}

.footer__bottom {
    border-top: 1px dashed rgba(255, 247, 226, 0.3);
    padding-top: var(--space-lg);
}

.footer__copy,
.footer__legal-link {
    color: var(--color-cream);
    opacity: 0.75;
    font-family: var(--font-display);
}

.footer__legal-link:hover {
    color: var(--pop-yellow);
    opacity: 1;
}


/* ----- Footer marquee strip (top ribbon) ----- */
.footer__marquee {
    background: var(--pop-pink);
    color: var(--ink);
    border-top: 3px solid var(--ink);
    border-bottom: 3px solid var(--ink);
    padding: 16px 0;
    overflow: hidden;
    font-family: var(--font-display);
    font-weight: 700;
}

.footer__marquee-track {
    display: flex;
    gap: var(--space-2xl);
    width: max-content;
    animation: marquee-scroll 28s linear infinite;
}

.footer__marquee-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xl);
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0.01em;
}

.footer__marquee-item::after {
    content: '✦';
    color: var(--ink);
    font-size: 0.85em;
}


/* ----- Big CTA strip in footer ----- */
.footer__cta {
    background: var(--pop-yellow);
    color: var(--ink);
    padding: var(--space-3xl) var(--space-xl);
    border-bottom: none;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.footer__cta-eyebrow {
    font-family: var(--font-script);
    font-style: italic;
    font-weight: 600;
    font-size: var(--text-md);
    margin-bottom: var(--space-sm);
}

.footer__cta-title {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 0.95;
    font-size: clamp(2.25rem, 6vw, 4.5rem);
    margin-bottom: var(--space-md);
    color: var(--ink);
}

.footer__cta-actions {
    display: inline-flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--space-xl);
}


/* ----- Bullet list — chunky pop dots ----- */
.bullet-list li::before {
    background: var(--pop-pink);
    border: 2px solid var(--ink);
    width: 12px;
    height: 12px;
    top: 0.5em;
}


/* ----- Section drip — keep but darken stroke base ----- */
.section-drip {
    /* unchanged structurally, just the inheritance handles colour */
}


/* ----- Editorial media — chunky black border, hard offset shadow ----- */
.editorial-media {
    border: 3px solid var(--ink);
    border-radius: var(--radius-blob);
    box-shadow: var(--shadow-sticker-lg);
    background: var(--color-vanilla);
}

.editorial-media--wide { aspect-ratio: 4 / 3; }


/* ----- Hero blobs — bolder pop colours ----- */
.hero__blob--1 { background: var(--pop-yellow); opacity: 0.55; }
.hero__blob--2 { background: var(--pop-pink); opacity: 0.5; }
.hero__blob--3 { background: var(--pop-mint); opacity: 0.7; }


/* page header decorative blobs disabled — drip alone carries the bottom edge */
.page-header__blobs {
    display: none;
}


/* ----- Typography refinements per text style ----- */
.btn--small {
    padding: 10px 18px;
    font-size: var(--text-sm);
}

.search-overlay__form {
    border: 3px solid var(--ink);
    box-shadow: var(--shadow-sticker-lg);
    border-radius: 18px;
}

.search-overlay__input {
    font-family: var(--font-display);
}


/* ----- Responsive bolden adjustments ----- */
@media (max-width: 768px) {
    .header__logo {
        border: 2.5px solid var(--ink);
        border-top: none;
    }

    .footer__cta-title {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .marquee {
        padding: 12px 0;
    }

    .product-card__price {
        font-size: var(--text-md);
    }

    /* lighten heavy shadows on mobile so layout doesn't feel cramped */
    .product-card,
    .testimonial,
    .value-card,
    .wholesale-card,
    .shop-tile,
    .box-option__card,
    .location-card {
        box-shadow: 4px 4px 0 var(--ink);
    }

    .product-card:hover,
    .testimonial:hover,
    .value-card:hover,
    .wholesale-card:hover,
    .shop-tile:hover,
    .location-card:hover {
        box-shadow: 4px 4px 0 var(--ink);
        transform: translate(0, -2px);
    }
}


/* ============================================================
   ░░░ EDITORIAL · ORGANIC · WARM — Design Layer v3 ░░░
   Loaded LAST. Per client feedback May 2026:
   - Warm neutrals / biscuit / golden bun dominate
   - Pink, burgundy, black are accents only
   - Soft, organic surfaces — drop the chunky black borders
   - Larger fluid drip used sparingly with layering
   - Big editorial statement type between sections
   - Subtle navigational animation (bun cursor + logo bun)
   ============================================================ */

/* (Fraunces import removed — brand guide is Avenir-only.) */

:root {
    /* warm-led palette */
    --ed-cream:        #FAF1DB;
    --ed-cream-deep:   #F5E8C4;
    --ed-biscuit:      #ECDDB6;
    --ed-biscuit-warm: #E8D4A8;
    --ed-sand:         #DDC79A;
    --ed-gold:         #B7792B;
    --ed-gold-deep:    #8C5B18;
    --ed-ink:          #1A130A;
    --ed-ink-soft:     #4A3424;
    --ed-pink:         #F6B8A3;
    --ed-burgundy:     #7F082F;

    --ed-shadow-sm: 0 6px 20px -8px rgba(60, 38, 18, 0.18);
    --ed-shadow-md: 0 24px 50px -22px rgba(60, 38, 18, 0.28);
    --ed-shadow-lg: 0 40px 80px -28px rgba(60, 38, 18, 0.34);

    --font-editorial: var(--font-body); /* brand guide: Avenir only */
}

/* base */
body {
    background: var(--ed-cream);
    color: var(--ed-ink);
    letter-spacing: 0;
    font-family: var(--font-body);
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6,
.statement,
.hero__title, .hero__title--display,
.section__title,
.page-header__title,
.footer__cta-title,
.product-card__name,
.product-detail__title,
.shop-tile__title {
    font-family: var(--font-editorial);
    font-weight: 400;
    letter-spacing: -0.02em;
    text-transform: none;
}

.section__subtitle,
.hero__eyebrow,
.shop-tile__eyebrow,
.builder-step__eyebrow,
.box-option__size,
.builder-review__eyebrow,
.page-header__eyebrow,
.subheading {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--ed-gold-deep);
    opacity: 1;
}


/* ----- ANNOUNCEMENT BAR — quieter ----- */
.announcement-bar {
    background: var(--ed-ink);
    color: var(--ed-cream);
    padding: 9px var(--space-md);
    border-bottom: none;
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.announcement-bar__text::before,
.announcement-bar__text::after { content: none; }


/* ----- HEADER — calm, glass, no chunky border ----- */
.header {
    background: rgba(250, 241, 219, 0.92);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid rgba(60, 38, 18, 0.07);
    height: 92px;
}

.header__logo {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: var(--space-sm) var(--space-xl) var(--space-md);
    border-radius: 0;
}

.header__logo:hover { background: transparent; }

.header--scrolled .header__logo {
    background: transparent;
    border: none;
    box-shadow: none;
}

.header__nav-link {
    font-family: var(--font-editorial);
    font-weight: 500;
    font-size: 1.05rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ed-ink);
}

.header__nav-link::after {
    background: var(--ed-gold);
    height: 1px;
    border-radius: 0;
    bottom: -2px;
}

.header__nav-link:hover,
.header__nav-link--active {
    color: var(--ed-gold-deep);
}

.header__action-btn {
    border: 1px solid rgba(60, 38, 18, 0.12);
    background: transparent;
    color: var(--ed-ink);
}

.header__action-btn:hover {
    background: var(--ed-biscuit);
    transform: none;
    box-shadow: none;
}

.header__cart-count {
    background: var(--ed-burgundy);
    color: var(--ed-cream);
    border: 1.5px solid var(--ed-cream);
    width: 20px;
    height: 20px;
    top: -2px;
    right: -2px;
}

.header__submenu {
    border: 1px solid rgba(60, 38, 18, 0.08);
    border-radius: 14px;
    box-shadow: var(--ed-shadow-md);
    background: var(--ed-cream);
}

.header__submenu-link {
    font-family: var(--font-editorial);
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--ed-ink);
}

.header__submenu-link:hover {
    background: var(--ed-biscuit);
    color: var(--ed-ink);
}


/* ----- BUTTONS — soft pill, gold/burgundy focused ----- */
.btn {
    border-radius: 999px;
    border: 1.5px solid transparent;
    box-shadow: none;
    font-family: var(--font-editorial);
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    text-transform: none;
    padding: 14px 26px;
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
                background-color 220ms ease,
                color 220ms ease,
                border-color 220ms ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--ed-shadow-sm);
}

.btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn--primary {
    background: var(--ed-gold);
    color: var(--ed-cream);
    border-color: var(--ed-gold);
}

.btn--primary:hover {
    background: var(--ed-gold-deep);
    color: var(--ed-cream);
    border-color: var(--ed-gold-deep);
}

.btn--secondary {
    background: var(--ed-ink);
    color: var(--ed-cream);
    border-color: var(--ed-ink);
}

.btn--secondary:hover {
    background: var(--ed-gold-deep);
    border-color: var(--ed-gold-deep);
    color: var(--ed-cream);
}

.btn--accent {
    background: var(--ed-burgundy);
    color: var(--ed-cream);
    border-color: var(--ed-burgundy);
}

.btn--accent:hover {
    background: var(--ed-ink);
    color: var(--ed-cream);
    border-color: var(--ed-ink);
}

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

.btn--outline:hover {
    background: var(--ed-ink);
    color: var(--ed-cream);
    border-color: var(--ed-ink);
}

.btn--outline-light {
    background: transparent;
    color: var(--ed-cream);
    border-color: var(--ed-cream);
    box-shadow: none;
}

.btn--outline-light:hover {
    background: var(--ed-cream);
    color: var(--ed-ink);
    box-shadow: none;
}

.btn--ghost {
    background: transparent;
    color: var(--ed-ink);
    border-color: transparent;
    box-shadow: none;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
    text-decoration-color: var(--ed-gold);
    padding-left: 0;
    padding-right: 0;
}

.btn--ghost:hover {
    color: var(--ed-gold-deep);
    transform: none;
    box-shadow: none;
    text-decoration-color: var(--ed-gold-deep);
}

.btn--large {
    padding: 18px 36px;
    font-size: 1.05rem;
}

.section--dark .btn--outline,
.section--golden .btn--outline {
    background: transparent;
    color: var(--ed-cream);
    border-color: var(--ed-cream);
    box-shadow: none;
}

.section--dark .btn--outline:hover,
.section--golden .btn--outline:hover {
    background: var(--ed-cream);
    color: var(--ed-ink);
    box-shadow: none;
}


/* ----- PRODUCT CARDS — soft, no chunky borders ----- */
.product-card {
    background: var(--ed-cream);
    border: none;
    border-radius: 6px;
    box-shadow: none;
    overflow: hidden;
    transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

.product-card__image-wrap {
    background: var(--ed-biscuit);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    overflow: hidden;
}

.product-card__badge {
    background: var(--ed-cream);
    color: var(--ed-ink);
    border: none;
    box-shadow: none;
    transform: none;
    border-radius: 999px;
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
    font-size: 0.78rem;
    padding: 4px 12px;
}

.product-card__name {
    font-size: 1.25rem;
    font-weight: 500;
}

.product-card__name a:hover { color: var(--ed-gold-deep); }

.product-card__category {
    color: var(--ed-gold-deep);
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
    font-size: 0.78rem;
}

.product-card__price {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--ed-ink);
    font-family: var(--font-editorial);
    font-weight: 500;
    font-size: 1.1rem;
}

.product-card__description {
    color: var(--ed-ink-soft);
    opacity: 1;
    font-size: 0.92rem;
}


/* ----- HERO base ----- */
.hero {
    background: var(--ed-cream);
    border-bottom: none;
    min-height: 92vh;
}

.hero__eyebrow {
    display: inline-block;
    background: transparent;
    color: var(--ed-gold-deep);
    border: 1px solid rgba(184, 122, 43, 0.4);
    box-shadow: none;
    transform: none;
    border-radius: 999px;
    padding: 6px 16px;
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.04em;
    font-size: 0.85rem;
    margin-bottom: var(--space-xl);
}

.hero__title--display {
    font-family: var(--font-editorial);
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 0.92;
    color: var(--ed-ink);
    text-transform: none;
    font-size: clamp(3.25rem, 9.5vw, 9rem);
}

.hero__line--italic {
    font-style: italic;
    font-weight: 400;
    color: var(--ed-burgundy);
    letter-spacing: -0.02em;
}

.hero__description {
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: var(--ed-ink-soft);
    opacity: 1;
    line-height: 1.55;
    max-width: 480px;
}

.hero__media {
    border: none;
    border-radius: 4px;
    box-shadow: var(--ed-shadow-lg);
    transform: translateY(-8px) rotate(-0.6deg);
}


/* ----- HERO SPLASH — full-bleed video, editorial overlay ----- */
.hero--splash {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    background: var(--ed-ink);
}

.hero--splash .hero__media-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero--splash .hero__media-bg video,
.hero--splash .hero__media-bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero--splash .hero__media-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg,
            rgba(26, 19, 10, 0.55) 0%,
            rgba(26, 19, 10, 0.18) 32%,
            rgba(26, 19, 10, 0.18) 60%,
            rgba(26, 19, 10, 0.78) 100%);
    pointer-events: none;
}

.hero--splash .hero__container {
    position: relative;
    z-index: 2;
    grid-template-columns: 1fr;
    gap: 0;
    padding: var(--space-4xl) var(--space-xl);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    max-width: var(--container-max);
    margin: 0 auto;
}

.hero--splash .hero__content {
    margin: 0 auto;
    padding: 0;
    max-width: 880px;
    color: var(--ed-cream);
    text-align: center;
}

.hero--splash .hero__description {
    margin-left: auto;
    margin-right: auto;
}

.hero--splash .hero__actions {
    justify-content: center;
}

.hero--splash .hero__eyebrow {
    background: transparent;
    border: 1px solid rgba(255, 247, 226, 0.5);
    color: var(--ed-cream);
    box-shadow: none;
    transform: none;
    margin-bottom: var(--space-xl);
}

.hero--splash .hero__title--display {
    color: var(--ed-cream);
    font-size: clamp(3.5rem, 10vw, 10rem);
    line-height: 0.92;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-xl);
}

.hero--splash .hero__line {
    display: block;
}

.hero--splash .hero__line--italic {
    color: var(--ed-pink);
    padding-left: 0;
}

.hero--splash .hero__description {
    color: rgba(255, 247, 226, 0.86);
    max-width: 540px;
    font-size: 1.1rem;
    margin-bottom: var(--space-2xl);
}

.hero--splash .hero__actions {
    margin-top: var(--space-md);
}

.hero--splash .btn--outline {
    background: transparent;
    color: var(--ed-cream);
    border-color: var(--ed-cream);
    box-shadow: none;
}

.hero--splash .btn--outline:hover {
    background: var(--ed-cream);
    color: var(--ed-ink);
    box-shadow: none;
}

.hero--splash .btn--primary {
    background: var(--ed-cream);
    color: var(--ed-ink);
    border-color: var(--ed-cream);
}

.hero--splash .btn--primary:hover {
    background: var(--ed-gold);
    color: var(--ed-cream);
    border-color: var(--ed-gold);
}

.hero--splash .hero__scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    z-index: 3;
    color: rgba(255, 247, 226, 0.7);
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    pointer-events: none;
}

.hero--splash .hero__scroll-cue::after {
    content: '';
    width: 1px;
    height: 56px;
    background: linear-gradient(to bottom, rgba(255, 247, 226, 0.7), rgba(255, 247, 226, 0));
    animation: scroll-cue 2.4s ease-in-out infinite;
    transform-origin: top;
}

@keyframes scroll-cue {
    0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
    50%       { transform: scaleY(1);   opacity: 0.95; }
}


/* ----- SECTIONS — neutral by default ----- */
.section {
    background: var(--ed-cream);
    padding: var(--space-5xl) 0;
}

.section--biscuit { background: var(--ed-biscuit); border-top: none; border-bottom: none; }
.section--sand    { background: var(--ed-sand); border-top: none; border-bottom: none; }
.section--cream   { background: var(--ed-cream); }
.section--cream.wp-block-chouxbox-featured-products { background: var(--ed-biscuit); }
.section--creme {
    background: var(--ed-biscuit-warm);
    background-image: none;
}
.section--creme > .container {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0 var(--space-xl);
}

.section--golden {
    background: var(--ed-gold);
    color: var(--ed-cream);
    border-top: none;
    border-bottom: none;
}

.section--golden .section__subtitle,
.section--golden .section__title {
    color: var(--ed-cream);
}

.section--golden .section__subtitle {
    color: rgba(255, 247, 226, 0.8);
}

.section--dark {
    background: var(--ed-ink);
    color: var(--ed-cream);
    border: none;
}

/* override the heavy pink section to neutral biscuit — pink is accent only */
.section--pink {
    background: var(--ed-biscuit);
    color: var(--ed-ink);
    border: none;
}

.section__title {
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--ed-ink);
    font-weight: 400;
}

.section__subtitle {
    font-size: 0.95rem;
    color: var(--ed-gold-deep);
    opacity: 1;
    margin-bottom: var(--space-md);
}

.section__description {
    color: var(--ed-ink-soft);
    opacity: 1;
    line-height: 1.6;
    font-size: 1.05rem;
}


/* ----- STATEMENT BANDS — bigger, more editorial, asymmetric ----- */
.statement-band {
    background: var(--ed-cream);
    padding: var(--space-5xl) 0;
}

.statement-band--biscuit { background: var(--ed-biscuit); }
.statement-band--sand    { background: var(--ed-sand); }
.statement-band--dark    { background: var(--ed-ink); color: var(--ed-cream); }

.statement-stack {
    gap: 0;
    padding: 0 var(--space-xl);
}

.statement {
    font-family: var(--font-editorial);
    font-size: clamp(4rem, 16vw, 16rem);
    font-weight: 400;
    color: var(--ed-ink);
    line-height: 0.86;
    letter-spacing: -0.04em;
    text-transform: none;
}

.statement--italic {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.025em;
}

.statement--ghost {
    color: transparent;
    -webkit-text-stroke: 1px var(--ed-gold);
    opacity: 1;
}

.statement__accent { color: var(--ed-burgundy); }

.statement__subtle {
    font-size: 0.13em;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--ed-gold-deep);
    -webkit-text-stroke: 0;
    margin-bottom: 0.6em;
    opacity: 1;
}

.statement-stack__line--right  { align-self: flex-end; padding-right: 4vw; }
.statement-stack__line--center { align-self: center; }
.statement-stack__line--indent { padding-left: 14vw; }


/* ----- DRIP — consistent size across all sections ----- */
.section-drip,
.section-drip--tall,
.section-drip--small,
.section-drip--subtle,
.page-header::after,
.footer__drip {
    height: 200px;
}

.footer__drip {
    background: var(--ed-biscuit-warm);
    margin-bottom: -200px;
    -webkit-mask: var(--drip-abstract-svg) center top / 100% 100% no-repeat;
            mask: var(--drip-abstract-svg) center top / 100% 100% no-repeat;
}

/* Drips sit BEHIND section content (footer drip keeps its own stacking) */
.section-drip,
.section-drip--tall,
.section-drip--small,
.section-drip--subtle,
.page-header::after {
    z-index: 0;
}

.section > .container,
.statement-band > .statement-stack,
.page-header > * {
    position: relative;
    z-index: 1;
}

.page-header::after {
    background-color: inherit;
}


/* ----- EDITORIAL SPLIT — overlap, asymmetric ----- */
.editorial-split {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--space-3xl);
    align-items: center;
}

.editorial-split--flip {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}
/* Flip = image on the right. The media is always the first DOM child, so the
   column ratio alone doesn't move it — reorder the grid items so the media
   sits in column 2 and the copy in column 1. Desktop only; the ≤1024px rule
   collapses to a single column where the image should stay on top. */
@media (min-width: 1025px) {
    .editorial-split--flip > .editorial-media { order: 2; }
    .editorial-split--flip > .editorial-copy  { order: 1; }
}

.editorial-media {
    background: transparent;
    border: none;
    border-radius: 4px;
    box-shadow: var(--ed-shadow-lg);
    overflow: hidden;
}

.editorial-media--tilt-left  { transform: rotate(-1deg); }
.editorial-media--tilt-right { transform: rotate(0.8deg); }
.editorial-media--rise       { margin-top: -120px; }
.editorial-media--drop       { margin-bottom: -120px; }


/* ----- MARQUEE — quieter, neutral ribbon ----- */
.marquee {
    background: var(--ed-cream);
    color: var(--ed-ink);
    border-top: 1px solid rgba(60, 38, 18, 0.1);
    border-bottom: 1px solid rgba(60, 38, 18, 0.1);
    padding: 16px 0;
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.04em;
}

.marquee--pink   { background: var(--ed-biscuit); color: var(--ed-ink); }
.marquee--yellow { background: var(--ed-cream-deep); color: var(--ed-ink); }
.marquee--mint   { background: var(--ed-cream); color: var(--ed-ink); }
.marquee--dark   { background: var(--ed-ink); color: var(--ed-cream); }

.marquee__item   { font-size: clamp(1.05rem, 2vw, 1.5rem); }

.marquee__item::after,
.footer__marquee-item::after,
.marquee--pink .marquee__item::after,
.marquee--yellow .marquee__item::after {
    content: '◇';
    color: var(--ed-gold);
    opacity: 0.7;
    font-size: 0.7em;
}


/* ----- TESTIMONIALS — open editorial, no chunky cards ----- */
.testimonials {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2xl);
}

.testimonial,
.testimonial:nth-child(odd),
.testimonial:nth-child(even) {
    background: transparent;
    border: none;
    border-top: 1px solid var(--ed-gold);
    border-radius: 0;
    box-shadow: none;
    padding: var(--space-xl) 0 0;
    transform: none;
}

.testimonial:hover,
.testimonial:nth-child(odd):hover,
.testimonial:nth-child(even):hover {
    transform: none;
    box-shadow: none;
}

.testimonial__stars {
    color: var(--ed-gold);
    letter-spacing: 0.2em;
    font-size: 1rem;
}

.testimonial__text {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.45;
    color: var(--ed-ink);
}

.testimonial__author {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ed-gold-deep);
    font-size: 0.95rem;
}


/* ----- VALUE CARDS — minimal editorial blocks ----- */
.value-card {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    transform: none !important;
}
.value-card:hover {
    transform: none !important;
    box-shadow: none;
}

.value-card__icon,
.value-card:nth-child(2n) .value-card__icon,
.value-card:nth-child(3n) .value-card__icon,
.value-card:nth-child(4n) .value-card__icon {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--ed-gold);
    width: 44px;
    height: 44px;
    padding: 0;
    margin-bottom: var(--space-lg);
}

.value-card__title {
    font-family: var(--font-editorial);
    font-weight: 500;
    text-transform: none;
    letter-spacing: -0.01em;
    font-size: 1.25rem;
    margin-bottom: var(--space-sm);
}

.value-card__text {
    color: var(--ed-ink-soft);
    opacity: 1;
    line-height: 1.55;
    font-size: 0.95rem;
}


/* ----- WHOLESALE / SHOP TILES — softer ----- */
.wholesale-card,
.shop-tile {
    background: var(--ed-cream);
    border: none;
    border-radius: 6px;
    box-shadow: none;
    transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.wholesale-card:hover,
.shop-tile:hover {
    transform: translateY(-6px);
    box-shadow: var(--ed-shadow-md);
}

.shop-tile__media { border-bottom: none; }

.shop-tile__cta {
    background: transparent;
    color: var(--ed-gold-deep);
    border: none;
    box-shadow: none;
    padding: 0;
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    text-decoration-color: var(--ed-gold);
}

.shop-tile:hover .shop-tile__cta {
    color: var(--ed-ink);
    transform: none;
    text-decoration-color: var(--ed-ink);
}

.shop-tile--accent {
    background: var(--ed-biscuit);
    color: var(--ed-ink);
    border-color: transparent;
}

.shop-tile--accent .shop-tile__cta { color: var(--ed-burgundy); }

.wholesale-card__icon,
.shop-tile__icon {
    background: var(--ed-biscuit);
    color: var(--ed-gold-deep);
    border: none;
    box-shadow: none;
}


/* ----- PAGE HEADER ----- */
.page-header {
    background: var(--ed-biscuit);
    border-bottom: none;
    padding: calc(var(--space-5xl) + 20px) 0 var(--space-3xl);
}

.page-header__title {
    font-family: var(--font-editorial);
    font-weight: 400;
    text-transform: none;
    letter-spacing: -0.03em;
    font-size: clamp(2.75rem, 7vw, 6rem);
    color: var(--ed-ink);
    line-height: 0.96;
}

.page-header__eyebrow {
    background: transparent;
    color: var(--ed-ink);
    border: 1px solid rgba(26, 19, 10, 0.3);
    box-shadow: none;
    transform: none;
    border-radius: 999px;
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 400;
    padding: 4px 14px;
    margin-bottom: var(--space-lg);
}

.page-header__lead {
    color: var(--ed-ink-soft);
    opacity: 1;
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 640px;
}


/* ----- NEWSLETTER ----- */
.newsletter__input {
    background: var(--ed-cream);
    border: 1px solid rgba(60, 38, 18, 0.18);
    border-radius: 999px;
    padding: 14px 22px;
    font-family: var(--font-editorial);
}

.newsletter__input:focus {
    border-color: var(--ed-gold);
    outline: none;
}


/* ----- FORM INPUTS ----- */
.checkout__input,
.checkout__select {
    background: var(--ed-cream);
    border: 1px solid rgba(60, 38, 18, 0.18);
    border-radius: 8px;
    padding: 14px 18px;
    font-family: var(--font-body);
    font-size: 0.95rem;
}

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


/* ----- FILTERS ----- */
.filters__btn {
    background: transparent;
    color: var(--ed-ink);
    border: 1px solid rgba(60, 38, 18, 0.2);
    box-shadow: none;
    font-family: var(--font-editorial);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    padding: 8px 18px;
}

.filters__btn:hover {
    background: var(--ed-biscuit);
    border-color: var(--ed-gold);
    color: var(--ed-ink);
    transform: none;
    box-shadow: none;
}

.filters__btn--active {
    background: var(--ed-ink);
    color: var(--ed-cream);
    border-color: var(--ed-ink);
}


/* ----- FOOTER ----- */
.footer {
    background: linear-gradient(
        to bottom,
        var(--ed-gold-deep) 0%,
        var(--ed-gold) 100%
    );
    color: var(--ed-cream);
    border-top: none;
}

.footer__cta {
    background: var(--ed-biscuit-warm);
    color: var(--ed-ink);
    padding: var(--space-4xl) var(--space-xl);
    border-bottom: none;
}

.footer__cta-eyebrow {
    font-family: var(--font-editorial);
    font-style: italic;
    color: var(--ed-gold-deep);
}

.footer__cta-title {
    font-family: var(--font-editorial);
    font-weight: 400;
    letter-spacing: -0.03em;
    color: var(--ed-ink);
    line-height: 1;
}

.footer__heading {
    color: var(--ed-cream);
    font-family: var(--font-editorial);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    font-size: 1rem;
}

.footer__link,
.footer__address {
    color: rgba(255, 247, 226, 0.78);
    font-family: var(--font-body);
}

.footer__link:hover {
    color: var(--ed-cream);
    transform: none;
}

.footer__tagline {
    color: rgba(255, 247, 226, 0.85);
    font-family: var(--font-editorial);
    font-style: italic;
}

.footer__social-link {
    background: transparent;
    color: var(--ed-cream);
    border: 1px solid rgba(255, 247, 226, 0.4);
    box-shadow: none;
    width: 40px;
    height: 40px;
}

.footer__social-link:hover {
    background: var(--ed-cream);
    color: var(--ed-ink);
    border-color: var(--ed-cream);
    transform: none;
    box-shadow: none;
}

.footer__bottom { border-top: 1px solid rgba(255, 247, 226, 0.15); }

.footer__copy,
.footer__legal-link {
    color: rgba(255, 247, 226, 0.6);
    opacity: 1;
    font-family: var(--font-body);
    text-transform: none;
    letter-spacing: 0;
}

.footer__legal-link:hover { color: var(--ed-cream); }


/* ----- BUN CURSOR (subtle navigational animation) ----- */
.bun-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 38px;
    height: 38px;
    pointer-events: none;
    z-index: 9999;
    transform: translate3d(-100px, -100px, 0);
    transition: opacity 220ms ease;
    will-change: transform;
    opacity: 0;
    mix-blend-mode: normal;
}

.bun-cursor--active { opacity: 1; }

.bun-cursor img {
    width: 100%;
    height: 100%;
    display: block;
    transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}

.bun-cursor--hover img {
    transform: rotate(180deg) scale(1.18);
}

@media (hover: hover) and (pointer: fine) {
    body.has-bun-cursor,
    body.has-bun-cursor a,
    body.has-bun-cursor button,
    body.has-bun-cursor [role="button"],
    body.has-bun-cursor input,
    body.has-bun-cursor select,
    body.has-bun-cursor textarea,
    body.has-bun-cursor .product-card,
    body.has-bun-cursor .shop-tile {
        cursor: none;
    }
}

@media (hover: none), (pointer: coarse) {
    .bun-cursor { display: none; }
}


/* ----- LOGO bun spin (subtle; replaces the sprinkles vibe) ----- */
.header__logo:hover .header__logo-img--full,
.header--scrolled .header__logo:hover .header__logo-img--sticky {
    animation: bun-spin 1.6s cubic-bezier(0.6, 0.05, 0.3, 0.95);
}

@keyframes bun-spin {
    0%   { transform: scale(1) rotate(0deg); }
    35%  { transform: scale(1.05) rotate(180deg); }
    100% { transform: scale(1) rotate(360deg); }
}


/* ----- HERO BLOBS — calmer warm tones ----- */
.hero__blob--1 { background: var(--ed-cream-deep); opacity: 0.55; }
.hero__blob--2 { background: var(--ed-biscuit); opacity: 0.45; }
.hero__blob--3 { background: var(--ed-gold); opacity: 0.18; }


/* ----- Notices, alerts, breadcrumbs — neutral ----- */
.shop-tile__title {
    font-family: var(--font-editorial);
    font-weight: 500;
    text-transform: none;
    letter-spacing: -0.015em;
    font-size: clamp(1.3rem, 2.2vw, 1.8rem);
}


/* ----- Bullet list ----- */
.bullet-list li::before {
    background: var(--ed-gold);
    border: none;
    width: 8px;
    height: 8px;
}


/* ----- Search overlay ----- */
.search-overlay__form {
    border: 1px solid rgba(60, 38, 18, 0.12);
    border-radius: 999px;
    box-shadow: var(--ed-shadow-md);
    background: var(--ed-cream);
}

.search-overlay__input {
    background: transparent;
    font-family: var(--font-editorial);
}


/* ----- Reduce motion ----- */
@media (prefers-reduced-motion: reduce) {
    .hero--splash .hero__scroll-cue::after { animation: none; }
    .bun-cursor img { transition: none; }
}


/* ----- Responsive ----- */
@media (max-width: 1024px) {
    .editorial-split,
    .editorial-split--flip {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .editorial-media--rise,
    .editorial-media--drop {
        margin-top: 0;
        margin-bottom: 0;
    }

    .statement-stack__line--indent { padding-left: 6vw; }
    .statement-stack__line--right  { padding-right: 0; }

    .hero--splash .hero__container { padding: var(--space-3xl) var(--space-xl); }
    .hero--splash .hero__title--display { font-size: clamp(3rem, 11vw, 5.5rem); }
}

@media (max-width: 640px) {
    .testimonials { grid-template-columns: 1fr; gap: var(--space-xl); }
    .product-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .statement { font-size: clamp(3rem, 19vw, 7rem); }
    .hero--splash { min-height: 90vh; }
    .hero--splash .hero__container { padding: var(--space-3xl) var(--space-lg); }
}


/* ============================================================
   ░░░ Client iteration — May 2026 ░░░
   ============================================================ */

/* 1. Logo: drop the rotate animation on the full logo (sticky still spins) */
.header__logo:hover .header__logo-img--full,
.header__logo--spinning .header__logo-img--full {
    animation: none !important;
    transform: none;
}

/* keep the cross-fade between full/sticky logo */
.header__logo-img--full   { transition: opacity 0.5s ease; }
.header__logo-img--sticky { transition: opacity 0.5s ease, transform 0.4s ease; }
.header--scrolled .header__logo-img--full   { transform: scale(0.6); }
.header--scrolled .header__logo-img--sticky { transform: scale(1); }


/* 2. Standard cursor — hide bun follower, restore default */
.bun-cursor { display: none !important; }

body,
body a,
body button,
body input,
body textarea,
body select,
body [role="button"] {
    cursor: auto;
}
body a, body button, body [role="button"] { cursor: pointer; }


/* 3. Hero fills full viewport height — pull up under the sticky header.
      Header is 92px in this layer; keep them in sync. */
:root { --header-height: 92px; }

.hero--splash {
    min-height: 100vh;
    margin-top: calc(-1 * var(--header-height));
}

.announcement-bar {
    position: relative;
    z-index: 101;
}


/* 4. Footer container — generous space above for the drip overlap */
.footer__container {
    padding: 300px var(--space-xl) var(--space-xl);
}


/* 5. + 11. Sections that have a section-drip extending UP into them — give
       the section ABOVE padding-bottom to clear the drip */
.section--has-drip-below {
    padding-bottom: 80px;
}


/* 6. Card body backgrounds → vanilla */
.product-card__body,
.shop-tile__body {
    background: var(--color-vanilla);
}


/* 8. Header submenu pop-up → white */
.header__submenu {
    background: #ffffff;
}


/* 9. Statement bands — generous top spacing */
.statement-band {
    padding-top: 300px;
    padding-bottom: var(--space-5xl);
}


/* 10. + 11. Page-header drips DOWN into the next section — that section needs
       generous padding-top. Captures products.php (.section--creme), shop.php,
       and any other landing pages with the same pattern. */
.page-header + .section,
.page-header + .statement-band {
    padding-top: 300px;
}

.section--creme {
    padding-top: 300px;
}


/* mobile — relax the 300px to something workable on small screens */
@media (max-width: 768px) {
    .footer__container { padding-top: 180px; }
    .statement-band { padding-top: 180px; }
    .page-header + .section,
    .page-header + .statement-band,
    .section--creme { padding-top: 180px; }
}


/* ============================================================
   ░░░ Client iteration #2 — May 2026 ░░░
   1. testimonials background white
   2. newsletter on cream (handled in markup)
   3. menu item hover background biscuit
   4. consistent image border-radius
   5. product.php + contact.php — replace chunky sticker styling
   ============================================================ */

:root {
    /* one image radius used everywhere — soft but quietly modern */
    --ed-img-radius: 12px;
}


/* 1. White section variant — used for testimonials */
.section--white {
    background: #ffffff;
    color: var(--ed-ink);
}


/* 3. Menu hover — biscuit background on both main nav and submenu links */
.header__nav-link {
    padding: 8px 14px;
    border-radius: 999px;
    transition: background-color 200ms ease, color 200ms ease;
}

.header__nav-link::after { display: none; }

.header__nav-link:hover,
.header__nav-link--active {
    background: var(--ed-biscuit);
    color: var(--ed-ink);
}

.header__submenu-link {
    transition: background-color 200ms ease, color 200ms ease;
}

.header__submenu-link:hover {
    background: var(--ed-gold);
    color: var(--ed-cream);
}


/* 4. Consistent image radius across the site */
.product-card__image-wrap,
.editorial-media,
.hero__media,
.shop-tile__media,
.product-detail__main-image,
.product-detail__thumb,
.cart-item__image,
.location-card__image,
.featured-banner,
.featured-banner__image {
    border-radius: var(--ed-img-radius);
    overflow: hidden;
}

/* product card top corners only — bottom meets the white body cleanly */
.product-card__image-wrap {
    border-radius: var(--ed-img-radius) var(--ed-img-radius) 0 0;
}

/* shop tile top corners only */
.shop-tile__media {
    border-radius: var(--ed-img-radius) var(--ed-img-radius) 0 0;
}

.product-card,
.shop-tile {
    border-radius: var(--ed-img-radius);
}


/* 5. PRODUCT DETAIL PAGE — strip sticker styling, match the editorial layer */
.product-detail__main-image {
    background: var(--ed-cream);
    border: none;
    box-shadow: var(--ed-shadow-md);
    border-radius: var(--ed-img-radius);
}

.product-detail__thumb {
    border: 1px solid rgba(60, 38, 18, 0.12);
    border-radius: var(--ed-img-radius);
    background: var(--ed-cream);
}

.product-detail__thumb--active,
.product-detail__thumb:hover {
    border-color: var(--ed-gold);
    box-shadow: none;
}

.product-detail__title {
    font-family: var(--font-editorial);
    font-weight: 400;
    text-transform: none;
    letter-spacing: -0.025em;
    font-size: clamp(2.25rem, 4.5vw, 3.4rem);
    line-height: 1.05;
}

.product-detail__price {
    background: transparent;
    color: var(--ed-ink);
    border: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    font-family: var(--font-editorial);
    font-weight: 500;
    font-size: 1.6rem;
    display: inline-block;
}

.product-detail__category {
    color: var(--ed-gold-deep);
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
    opacity: 1;
}

.product-detail__qty-controls {
    border: 1px solid rgba(60, 38, 18, 0.18);
    border-radius: 999px;
    background: #ffffff;
    overflow: hidden;
}

.product-detail__qty-btn {
    background: transparent;
}

.product-detail__qty-btn:hover {
    background: var(--ed-biscuit);
}

.product-detail__qty-value {
    font-family: var(--font-body);
    font-weight: 500;
    border-color: rgba(60, 38, 18, 0.18);
    background: transparent;
}

.product-detail__breadcrumb {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    background: var(--ed-biscuit);
    color: var(--ed-ink);
    font-family: var(--font-editorial);
    font-weight: 700;
    font-size: clamp(0.85rem, 1vw, 1rem);
    text-transform: capitalize;
    letter-spacing: 0;
    padding: var(--space-xs) var(--space-md);
    border-radius: 999px;
    margin-bottom: var(--space-md);
}

.product-detail__breadcrumb a {
    color: var(--ed-ink);
    text-decoration: none;
    transition: color 200ms ease;
}

.product-detail__breadcrumb a:hover {
    color: var(--ed-burgundy);
}

.product-detail__breadcrumb-sep {
    color: var(--pop-red);
    opacity: 0.55;
    font-size: 0.85em;
}

.product-detail__description {
    color: var(--ed-ink-soft);
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.65;
}

.product-detail__meta {
    border-top: 1px solid rgba(60, 38, 18, 0.15);
    padding-top: var(--space-xl);
}

.product-detail__meta-item {
    color: var(--ed-ink-soft);
    font-family: var(--font-body);
}

.product-detail__meta-label {
    color: var(--ed-ink);
    font-family: var(--font-editorial);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.product-detail__qty-label {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ed-gold-deep);
}


/* CONTACT PAGE — location cards, hours block and form */
.location-card {
    background: #ffffff;
    border: none;
    border-radius: var(--ed-img-radius);
    box-shadow: var(--ed-shadow-sm);
    transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

.location-card__title {
    font-family: var(--font-editorial);
    font-weight: 500;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--ed-ink);
}

.location-card__hours {
    background: #ffffff;
    border: 1px solid var(--ed-cream-deep);
    border-radius: 8px;
    color: var(--ed-ink);
}

.location-card__badge {
    background: var(--ed-gold);
    color: var(--ed-cream);
    border: none;
    box-shadow: none;
    transform: none;
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.02em;
}

.location-card__description {
    color: var(--ed-ink-soft);
    font-family: var(--font-body);
}


/* contact form card — quiet white card, no chunky border */
.contact-form-card {
    background: #ffffff;
    border: none;
    border-radius: var(--ed-img-radius);
    box-shadow: var(--ed-shadow-sm);
    padding: var(--space-2xl);
}

.contact-form-card__title {
    font-family: var(--font-editorial);
    font-weight: 500;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--ed-ink);
    margin-bottom: var(--space-lg);
}

.contact-form-card .form-input,
.contact-form-card .form-textarea {
    background: var(--ed-cream);
    border: 1px solid rgba(60, 38, 18, 0.18);
    border-radius: 8px;
    padding: 14px 18px;
    font-family: var(--font-body);
    width: 100%;
    transition: border-color 220ms ease;
}

.contact-form-card .form-input:focus,
.contact-form-card .form-textarea:focus {
    border-color: var(--ed-gold);
    outline: none;
}

.contact-form-card .form-label {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 400;
    color: var(--ed-gold-deep);
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 6px;
}

.contact-form-card .form-group {
    margin-bottom: var(--space-md);
}


/* CART DRAWER — soften too while we're here */
.cart-drawer__panel {
    background: #ffffff;
    border-left: 1px solid rgba(60, 38, 18, 0.08);
}

.cart-drawer__header {
    border-bottom: 1px solid rgba(60, 38, 18, 0.08);
    background: #ffffff;
}

.cart-drawer__footer {
    border-top: 1px solid rgba(60, 38, 18, 0.08);
    background: var(--ed-cream);
}

.cart-item__image {
    border: 1px solid rgba(60, 38, 18, 0.08);
    border-radius: var(--ed-img-radius);
}


/* LOCATION PICKER MODAL */
.location-modal__panel {
    border: none;
    border-radius: var(--ed-img-radius);
    box-shadow: var(--ed-shadow-lg);
    background: #ffffff;
}

.location-option {
    background: #ffffff;
    border: 1px solid rgba(60, 38, 18, 0.12);
    border-radius: var(--ed-img-radius);
    box-shadow: none;
    transition: border-color 220ms ease, background-color 220ms ease;
}

.location-option:hover {
    border-color: var(--ed-gold);
    background: var(--ed-cream);
    box-shadow: none;
    transform: none;
}

.location-option--selected {
    background: var(--ed-cream);
    border-color: var(--ed-gold);
    box-shadow: none;
}

.location-option__check {
    border: 1px solid rgba(60, 38, 18, 0.2);
    background: #ffffff;
}

.location-option--selected .location-option__check {
    background: var(--ed-gold);
    border-color: var(--ed-gold);
    color: var(--ed-cream);
}


/* ============================================================
   ░░░ Client iteration #3 — May 2026 ░░░
   1. shop.php "Pick your path" — needs 300px top padding (inline style
      removed in markup; statement-band rule should now apply)
   2. about.php "The world's first…" statement-band needs 300px bottom
   3. newsletter input → white background
   ============================================================ */

/* 2. Statement-band that has a drip-below sibling needs 300px bottom too */
.statement-band.section--has-drip-below {
    padding-bottom: 300px;
}


/* 3. Newsletter input — white */
.newsletter__input {
    background: #ffffff;
}


/* ============================================================
   ░░░ Client iteration #4 — May 2026 ░░░
   1. Enquiry form (weddings / wholesale) — match the rest of the site
   2. Header logo background → white
   ============================================================ */

/* 1. Enquiry form — strip the sticker chunky border + shadow, match
      the editorial card treatment used on the contact form. */
.enquiry-form {
    background: #ffffff;
    border: none;
    border-radius: var(--ed-img-radius);
    box-shadow: var(--ed-shadow-sm);
    padding: var(--space-2xl);
}

.enquiry-form__label {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--ed-gold-deep);
    font-size: 0.9rem;
}

.enquiry-form__input,
.form-input,
.checkout__input,
.checkout__select {
    background: var(--ed-cream);
    border: 1px solid rgba(60, 38, 18, 0.18);
    border-radius: 8px;
    padding: 14px 18px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    box-shadow: none;
}

.enquiry-form__input:focus,
.form-input:focus,
.checkout__input:focus,
.checkout__select:focus {
    border-color: var(--ed-gold);
    background: #ffffff;
    box-shadow: none;
    outline: none;
}

textarea.enquiry-form__input,
textarea.form-input {
    resize: vertical;
    line-height: 1.5;
    min-height: 120px;
}


/* 2. Header logo: no background ever */
.header__logo,
.header__logo:hover,
.header--scrolled .header__logo,
.header--scrolled .header__logo:hover {
    background: transparent;
    box-shadow: none;
}


/* ============================================================
   ░░░ Iteration #5 — Homepage refinements (v6 → v7 prep) ░░░
   Aligned to Website Design Feedback PDF + brand guide:
   - Smaller logo (was overlapping hero eyebrow + over-dominant)
   - Hero content pushed below the logo drop so the eyebrow is visible
   - Statement-band reduced (kept as the editorial break the client asked
     for, but no longer viewport-eating)
   - Statement-band "subtle" eyebrow legible at normal viewing distance
   - First statement-band → Our Favourites flow on the same surface
     (per feedback: "sections appear disconnected")
   ============================================================ */

/* 1. Header logo — reduce size and square off the drop to match the
      square logo asset (no more round-on-square mismatch) */
.header__logo-img--full   { height: 90px; }
.header__logo-img--sticky { height: 40px; }
.header__logo {
    padding: var(--space-xs) var(--space-md) var(--space-sm);
    border-radius: 0;
}
.header--scrolled .header__logo-img--full {
    transform: scale(0.4);
}

/* 2. Hero — give the splash content room so the eyebrow clears the logo */
.hero--splash .hero__container {
    padding-top: clamp(120px, 18vh, 200px);
}

/* 3. Statement scale — still big and editorial, but not viewport-filling */
.statement {
    font-size: clamp(2.75rem, 9vw, 6.5rem);
}
.statement-band {
    padding: var(--space-3xl) 0 var(--space-4xl);
}

/* 4. Statement-band subtitle — readable eyebrow, not microcopy */
.statement-stack .statement.statement__subtle {
    font-size: 0.9rem;
    letter-spacing: 0.32em;
    margin-bottom: var(--space-lg);
}

/* 6. Section actions — let multiple ghost links sit side-by-side
      (used by the new Build-a-box CTA next to View-all-products). */
.section__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    justify-content: center;
}


/* ===========================================================================
   Reveal-on-scroll animations
   Elements marked with [data-cb-reveal] start hidden + transformed and animate
   in when their parent section becomes the IntersectionObserver target.
   =========================================================================== */
[data-cb-reveal] {
    opacity: 0;
    transition:
        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.05s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.9s ease;
    will-change: opacity, transform, filter;
}
[data-cb-reveal="up"]   { transform: translateY(34px); }
[data-cb-reveal="down"] { transform: translateY(-22px); }
[data-cb-reveal="left"] { transform: translateX(-26px); }
[data-cb-reveal="zoom"] { transform: scale(0.94); filter: blur(6px); }
[data-cb-reveal="rise"] { transform: translateY(48px) scale(0.98); }
[data-cb-reveal="media"] {
    transform: scale(1.08);
    filter: blur(14px) saturate(1.15);
    transition:
        opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.6s cubic-bezier(0.22, 1, 0.36, 1),
        filter 1.4s ease;
}
[data-cb-reveal="hero-bg"] {
    transform: scale(1.12);
    filter: blur(18px) brightness(0.85) saturate(1.2);
    transition:
        opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1),
        transform 2.2s cubic-bezier(0.22, 1, 0.36, 1),
        filter 1.6s ease;
}
[data-cb-reveal="grow"] {
    transform: scale(0.4);
    filter: blur(16px);
    transition:
        opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.4s cubic-bezier(0.22, 1, 0.36, 1),
        filter 1.2s ease;
}

.cb-revealed [data-cb-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
}
@media (prefers-reduced-motion: reduce) {
    [data-cb-reveal] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}


/* ===========================================================================
   Statement band — large "Small, joyful treats." treatment + side-in reveal
   =========================================================================== */
.statement-band--big h2.statement,
.statement-band--big .statement-stack > .statement:not(.statement__subtle) {
    font-size: clamp(4.5rem, 17vw, 16rem);
    line-height: 0.92;
}
/* Long single words (e.g. "CHOUXtisserie") must shrink to fit rather than
   wrap onto a second line. nowrap forbids the wrap; the smaller vw term keeps
   the longest word on one line down to small viewports, where the rem floor
   takes over. */
.statement-band--big h2.statement,
.statement-band--big .statement-stack > .statement:not(.statement__subtle) {
    white-space: nowrap;
    font-size: clamp(2.25rem, 11vw, 11rem);
}
.statement-band--big .statement-stack { gap: 0.05em; }

.statement.statement--from-left,
.statement.statement--from-right {
    opacity: 0;
    transition:
        opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.statement.statement--from-left  { transform: translateX(-12vw); }
.statement.statement--from-right { transform: translateX(12vw); }

.cb-revealed .statement.statement--from-left,
.cb-revealed .statement.statement--from-right {
    opacity: 1;
    transform: none;
}
.cb-revealed .statement.statement--from-left  { transition-delay: 0.05s; }
.cb-revealed .statement-stack > .statement--from-right { transition-delay: 0.25s; }
.cb-revealed .statement-stack > .statement--from-left:last-of-type { transition-delay: 0.45s; }

@media (prefers-reduced-motion: reduce) {
    .statement.statement--from-left,
    .statement.statement--from-right { opacity: 1 !important; transform: none !important; }
}


/* ===========================================================================
   Animated highlight underline — for "joyful", "Favourites", "big idea", etc.
   Pink bar grows in left-to-right behind the word after its line lands.
   =========================================================================== */
.statement__highlight {
    position: relative;
    display: inline-block;
    padding-bottom: 0.04em;
    isolation: isolate;
}
.statement__highlight::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.04em;
    height: 0.11em;
    background: var(--ed-pink, #F6B8A3);
    border-radius: 999px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.85s;
    z-index: -1;
}
.cb-revealed .statement__highlight::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
    .statement__highlight::after { transform: scaleX(1) !important; transition: none !important; }
}


/* ===========================================================================
   Header sticky logo — gentle 360° spin on hover (matches design-4 motion)
   =========================================================================== */
@keyframes logo-spin-gentle {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.header__logo--spinning .header__logo-img--sticky,
.header__logo:hover .header__logo-img--sticky {
    animation: logo-spin-gentle 1.2s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .header__logo--spinning .header__logo-img--sticky,
    .header__logo:hover .header__logo-img--sticky {
        animation: none;
    }
}


/* ===========================================================================
   Ethos marquee — soft pink panning banner with key brand ethos
   Editorial styling: refined Avenir, generous letter-spacing, subtle separator
   =========================================================================== */
.ethos-marquee {
    background: var(--ed-biscuit);
    color: var(--ed-ink);
    padding: var(--space-md) 0;
    overflow: hidden;
    position: relative;
    font-family: var(--font-editorial);
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: 0em;
}

.ethos-marquee__track {
    display: flex;
    gap: var(--space-2xl);
    width: max-content;
    animation: ethos-marquee-scroll 42s linear infinite;
    will-change: transform;
}

.ethos-marquee:hover .ethos-marquee__track {
    animation-play-state: paused;
}

.ethos-marquee__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xl);
    font-size: clamp(1rem, 1.6vw, 1.3rem);
    white-space: nowrap;
}

.ethos-marquee__item::after {
    content: '✦';
    color: var(--pop-red);
    font-size: 0.85em;
    letter-spacing: 0;
    opacity: 0.55;
}

@keyframes ethos-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .ethos-marquee__track { animation: none; }
}


/* ===========================================================================
   Testimonials band on biscuit — white cards with soft shadow
   =========================================================================== */
.testimonials-band.section--biscuit {
    background: var(--color-biscuit, #E8D4A8);
}
.testimonials-band .testimonial,
.testimonials-band .testimonial:nth-child(odd),
.testimonials-band .testimonial:nth-child(even) {
    background: #ffffff;
    border: 1px solid rgba(92, 58, 30, 0.08);
    border-radius: var(--border-radius-xl, 16px);
    padding: clamp(1.75rem, 3vw, 2.5rem);
    box-shadow: 0 8px 24px rgba(92, 58, 30, 0.06);
    transform: none;
}
.testimonials-band .testimonial:hover,
.testimonials-band .testimonial:nth-child(odd):hover,
.testimonials-band .testimonial:nth-child(even):hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(92, 58, 30, 0.10);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.testimonials-band .testimonial__stars {
    color: var(--color-golden-bun, #B7792B);
}


/* ===========================================================================
   Eyebrow headings — one consistent style across:
   "Our Story", "Kind Words", "find us in bath", "Made by hand · bath…"
   =========================================================================== */
.section__subtitle,
.footer__cta-eyebrow,
.statement-stack .statement.statement__subtle {
    font-family: var(--font-editorial);
    font-size: 0.85rem;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ed-gold-deep);
    opacity: 1;
    -webkit-text-stroke: 0;
    margin-bottom: var(--space-md);
}


/* ===========================================================================
   Header logo sizing — keep both full + sticky logos inside header bounds
   so the image never touches the bottom edge of the header container.
   =========================================================================== */
.header__logo {
    top: 50%;
    transform: translate(-50%, -50%);
    padding: var(--space-xs) var(--space-md);
}

.header--scrolled .header__logo {
    top: 50%;
    transform: translate(-50%, -50%);
    padding: var(--space-xs) var(--space-md);
}

.header__logo-img--full   { height: 64px; }
.header__logo-img--sticky { height: 48px; }

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


/* ===========================================================================
   Main nav — underline reveal on hover/active (replaces the pill background)
   =========================================================================== */
.header__nav-link {
    background: transparent;
    border-radius: 0;
    padding: var(--space-xs) 0;
    position: relative;
    transition: none;
}

.header__nav-link:hover,
.header__nav-link--active {
    background: transparent;
    color: inherit;
}

.header__nav-link::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background-color: var(--accent-pink);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.header__nav-link:hover::after,
.header__nav-link--active::after {
    transform: scaleX(1);
}


/* ===========================================================================
   Header submenu pop-up — vanilla card with thin biscuit border
   =========================================================================== */
.header__submenu {
    background: var(--color-vanilla);
    border: 1px solid var(--ed-biscuit);
}


/* ===========================================================================
   Cream-filled outline button — fills with the border colour on hover,
   text inverts to white. Used by "Build a box" on the home page.
   =========================================================================== */
.btn.btn--cream-fill {
    background: var(--ed-cream);
}
.btn.btn--cream-fill:hover {
    background: var(--ed-ink);
    color: #ffffff;
    border-color: var(--ed-ink);
}


.footer__cta .statement__highlight::after {
    background: var(--ed-pink);
}


/* ===========================================================================
   Arrow backgrounds — five hand-drawn arrows scattered as decorative
   background marks across the Kind Words section. Masked in accent-pink so
   the design-token controls colour; two arrows sit flush against the bottom
   edge of the section.
   =========================================================================== */
.arrow-bg {
    position: absolute;
    background-color: var(--accent-pink);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    pointer-events: none;
    z-index: 0;
}

/* small — upper-left */
.arrow-bg--1 {
    top: 8%;
    left: 5%;
    width: 70px;
    aspect-ratio: 102 / 113;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%22102%22%20height%3D%22113%22%20viewBox%3D%220%200%20102%20113%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M97.9256%200.230215C97.5586%200.351215%2096.3956%200.729214%2095.3416%201.06921C91.1536%202.42221%2086.8176%204.49422%2082.7886%207.06821C81.5956%207.83121%2080.8976%208.33322%2078.0646%2010.4682C76.6616%2011.5262%2071.6326%2016.5372%2070.6486%2017.8592C70.1876%2018.4782%2069.7886%2018.9842%2069.7616%2018.9842C68.6406%2018.9842%2062.7656%2020.5952%2061.2586%2021.3162C61.0756%2021.4032%2060.2346%2021.7702%2059.3906%2022.1312C53.3946%2024.6932%2046.7356%2029.8362%2043.0716%2034.7342C42.6596%2035.2842%2042.2016%2035.8822%2042.0526%2036.0632C40.2246%2038.2812%2036.9776%2044.8272%2036.0706%2048.1222C34.8756%2052.4632%2034.5046%2054.7832%2034.4886%2058.0362L34.4746%2060.6712L33.4696%2061.2862C30.6516%2063.0092%2028.4296%2064.7402%2026.5586%2066.6692C24.1626%2069.1402%2021.6136%2072.8202%2020.1546%2075.9132C17.8656%2080.7642%2016.0666%2086.2082%2015.2846%2090.6512C14.4746%2095.2452%2014.1756%2097.9922%2014.1756%20100.824C14.1756%20101.983%2014.1086%20102.818%2014.0156%20102.818C13.8286%20102.818%2012.6516%20101.357%2010.5916%2098.5682C9.77861%2097.4682%209.07061%2096.5302%209.01861%2096.4842C8.90161%2096.3822%206.1126%2092.7022%205.4256%2091.7442C4.0996%2089.8952%203.53461%2089.4602%202.4396%2089.4432C1.5566%2089.4302%200.985605%2089.7652%200.383605%2090.6492C-0.409395%2091.8152%20-0.0863905%2092.6482%202.43161%2095.9352C3.25961%2097.0162%204.8766%2099.1382%206.0246%20100.651C7.1726%20102.163%208.63161%20104.081%209.26861%20104.911C9.90461%20105.742%2010.9876%20107.16%2011.6756%20108.063C16.4566%20114.341%2016.5586%20114.34%2022.7716%20107.876C24.7816%20105.785%2027.1756%20103.32%2028.0916%20102.398C32.0186%2098.4472%2035.7016%2094.4392%2036.0336%2093.7552C36.9046%2091.9642%2035.2186%2089.9422%2033.3266%2090.5092C32.5976%2090.7272%2032.1656%2091.1152%2029.2576%2094.1622C24.4676%2099.1792%2019.4376%20104.318%2019.3156%20104.318C18.9656%20104.318%2019.2286%2097.0932%2019.6826%2094.2342C21.6556%2081.8212%2026.1666%2072.6972%2032.8416%2067.6162C35.1446%2065.8632%2035.2106%2065.8532%2035.4336%2067.2312C36.3556%2072.9272%2041.8616%2081.2512%2046.9256%2084.6042C48.4106%2085.5882%2048.6466%2085.7262%2050.0406%2086.4302C65.1836%2094.0732%2081.2586%2081.3542%2073.7446%2067.6742C67.9606%2057.1432%2054.7316%2053.0572%2041.2686%2057.6442C39.1846%2058.3542%2039.2756%2058.3922%2039.4036%2056.8592C39.9686%2050.1052%2042.7466%2042.9402%2046.7226%2037.9822C48.9026%2035.2642%2049.7836%2034.3502%2052.0086%2032.5062C52.9706%2031.7082%2053.9466%2030.9252%2054.1756%2030.7662C57.6036%2028.3892%2060.3676%2026.9512%2064.4806%2025.4042C65.8886%2024.8752%2066.1586%2024.9642%2065.7816%2025.8352C65.6466%2026.1462%2065.4226%2026.6652%2065.2826%2026.9882C63.3166%2031.5382%2063.0736%2038.0062%2064.6876%2042.8292C67.8676%2052.3302%2077.4616%2057.0392%2085.9256%2053.2532C99.7296%2047.0782%20100.671%2030.9212%2087.7436%2022.0502C85.1876%2020.2962%2081.4606%2018.9982%2078.2166%2018.7302C76.4436%2018.5832%2076.4496%2018.5532%2078.6546%2016.5032C81.3186%2014.0282%2084.7726%2011.4612%2087.4256%209.98621C89.4736%208.84721%2091.4526%207.84121%2092.3416%207.48721C92.8456%207.28721%2093.3856%207.05622%2093.5396%206.97522C94.0756%206.69522%2098.0306%205.34122%2099.4046%204.96922C101.972%204.27222%20102.774%201.57321%20100.763%200.395214C99.9716%20-0.0687857%2099.0036%20-0.124785%2097.9256%200.230215ZM77.0916%2023.6602C91.8366%2024.9262%2097.3286%2041.6182%2085.1456%2048.1382C80.7416%2050.4952%2076.4476%2049.9552%2072.7256%2046.5772C67.7516%2042.0612%2067.2536%2032.9642%2071.5626%2025.3182L72.4556%2023.7342L73.4406%2023.6372C73.9816%2023.5842%2074.5756%2023.5292%2074.7586%2023.5142C74.9416%2023.5002%2075.9916%2023.5652%2077.0916%2023.6602ZM58.0916%2061.3852C65.3606%2063.2662%2071.3666%2070.1612%2070.5656%2075.7052C69.8366%2080.7502%2064.0226%2084.3982%2057.8986%2083.6512C49.5536%2082.6342%2042.4406%2075.4282%2040.1646%2065.6862C39.6666%2063.5542%2039.6466%2063.6132%2041.0856%2063.0092C46.0436%2060.9272%2053.5526%2060.2102%2058.0916%2061.3852Z%22%20fill%3D%22%23F3BBA3%22%2F%3E%20%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%22102%22%20height%3D%22113%22%20viewBox%3D%220%200%20102%20113%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M97.9256%200.230215C97.5586%200.351215%2096.3956%200.729214%2095.3416%201.06921C91.1536%202.42221%2086.8176%204.49422%2082.7886%207.06821C81.5956%207.83121%2080.8976%208.33322%2078.0646%2010.4682C76.6616%2011.5262%2071.6326%2016.5372%2070.6486%2017.8592C70.1876%2018.4782%2069.7886%2018.9842%2069.7616%2018.9842C68.6406%2018.9842%2062.7656%2020.5952%2061.2586%2021.3162C61.0756%2021.4032%2060.2346%2021.7702%2059.3906%2022.1312C53.3946%2024.6932%2046.7356%2029.8362%2043.0716%2034.7342C42.6596%2035.2842%2042.2016%2035.8822%2042.0526%2036.0632C40.2246%2038.2812%2036.9776%2044.8272%2036.0706%2048.1222C34.8756%2052.4632%2034.5046%2054.7832%2034.4886%2058.0362L34.4746%2060.6712L33.4696%2061.2862C30.6516%2063.0092%2028.4296%2064.7402%2026.5586%2066.6692C24.1626%2069.1402%2021.6136%2072.8202%2020.1546%2075.9132C17.8656%2080.7642%2016.0666%2086.2082%2015.2846%2090.6512C14.4746%2095.2452%2014.1756%2097.9922%2014.1756%20100.824C14.1756%20101.983%2014.1086%20102.818%2014.0156%20102.818C13.8286%20102.818%2012.6516%20101.357%2010.5916%2098.5682C9.77861%2097.4682%209.07061%2096.5302%209.01861%2096.4842C8.90161%2096.3822%206.1126%2092.7022%205.4256%2091.7442C4.0996%2089.8952%203.53461%2089.4602%202.4396%2089.4432C1.5566%2089.4302%200.985605%2089.7652%200.383605%2090.6492C-0.409395%2091.8152%20-0.0863905%2092.6482%202.43161%2095.9352C3.25961%2097.0162%204.8766%2099.1382%206.0246%20100.651C7.1726%20102.163%208.63161%20104.081%209.26861%20104.911C9.90461%20105.742%2010.9876%20107.16%2011.6756%20108.063C16.4566%20114.341%2016.5586%20114.34%2022.7716%20107.876C24.7816%20105.785%2027.1756%20103.32%2028.0916%20102.398C32.0186%2098.4472%2035.7016%2094.4392%2036.0336%2093.7552C36.9046%2091.9642%2035.2186%2089.9422%2033.3266%2090.5092C32.5976%2090.7272%2032.1656%2091.1152%2029.2576%2094.1622C24.4676%2099.1792%2019.4376%20104.318%2019.3156%20104.318C18.9656%20104.318%2019.2286%2097.0932%2019.6826%2094.2342C21.6556%2081.8212%2026.1666%2072.6972%2032.8416%2067.6162C35.1446%2065.8632%2035.2106%2065.8532%2035.4336%2067.2312C36.3556%2072.9272%2041.8616%2081.2512%2046.9256%2084.6042C48.4106%2085.5882%2048.6466%2085.7262%2050.0406%2086.4302C65.1836%2094.0732%2081.2586%2081.3542%2073.7446%2067.6742C67.9606%2057.1432%2054.7316%2053.0572%2041.2686%2057.6442C39.1846%2058.3542%2039.2756%2058.3922%2039.4036%2056.8592C39.9686%2050.1052%2042.7466%2042.9402%2046.7226%2037.9822C48.9026%2035.2642%2049.7836%2034.3502%2052.0086%2032.5062C52.9706%2031.7082%2053.9466%2030.9252%2054.1756%2030.7662C57.6036%2028.3892%2060.3676%2026.9512%2064.4806%2025.4042C65.8886%2024.8752%2066.1586%2024.9642%2065.7816%2025.8352C65.6466%2026.1462%2065.4226%2026.6652%2065.2826%2026.9882C63.3166%2031.5382%2063.0736%2038.0062%2064.6876%2042.8292C67.8676%2052.3302%2077.4616%2057.0392%2085.9256%2053.2532C99.7296%2047.0782%20100.671%2030.9212%2087.7436%2022.0502C85.1876%2020.2962%2081.4606%2018.9982%2078.2166%2018.7302C76.4436%2018.5832%2076.4496%2018.5532%2078.6546%2016.5032C81.3186%2014.0282%2084.7726%2011.4612%2087.4256%209.98621C89.4736%208.84721%2091.4526%207.84121%2092.3416%207.48721C92.8456%207.28721%2093.3856%207.05622%2093.5396%206.97522C94.0756%206.69522%2098.0306%205.34122%2099.4046%204.96922C101.972%204.27222%20102.774%201.57321%20100.763%200.395214C99.9716%20-0.0687857%2099.0036%20-0.124785%2097.9256%200.230215ZM77.0916%2023.6602C91.8366%2024.9262%2097.3286%2041.6182%2085.1456%2048.1382C80.7416%2050.4952%2076.4476%2049.9552%2072.7256%2046.5772C67.7516%2042.0612%2067.2536%2032.9642%2071.5626%2025.3182L72.4556%2023.7342L73.4406%2023.6372C73.9816%2023.5842%2074.5756%2023.5292%2074.7586%2023.5142C74.9416%2023.5002%2075.9916%2023.5652%2077.0916%2023.6602ZM58.0916%2061.3852C65.3606%2063.2662%2071.3666%2070.1612%2070.5656%2075.7052C69.8366%2080.7502%2064.0226%2084.3982%2057.8986%2083.6512C49.5536%2082.6342%2042.4406%2075.4282%2040.1646%2065.6862C39.6666%2063.5542%2039.6466%2063.6132%2041.0856%2063.0092C46.0436%2060.9272%2053.5526%2060.2102%2058.0916%2061.3852Z%22%20fill%3D%22%23F3BBA3%22%2F%3E%20%3C%2Fsvg%3E");
}

/* medium — upper-right */
.arrow-bg--2 {
    top: 12%;
    right: 6%;
    width: 140px;
    aspect-ratio: 94 / 88;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2294%22%20height%3D%2288%22%20viewBox%3D%220%200%2094%2088%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M65.0918%200.384953C63.6978%201.34995%2063.6318%203.05095%2064.9448%204.15595C65.5038%204.62595%2066.1718%204.83496%2068.3158%205.21096C69.1858%205.36396%2070.4618%205.59396%2071.1488%205.72196C72.3898%205.95396%2073.4638%206.14596%2077.1488%206.79496C81.3498%207.53496%2082.9188%207.81495%2083.3568%207.89995C83.9118%208.00795%2083.9528%208.37896%2083.4408%208.64596C81.6108%209.59896%2074.6468%2015.001%2070.8158%2018.44C63.9408%2024.611%2055.0327%2035.385%2052.9657%2040.028C52.8797%2040.221%2052.6158%2040.717%2052.3788%2041.129C51.4728%2042.702%2048.9838%2047.77%2048.4888%2049.046C48.2048%2049.779%2047.9068%2050.5289%2047.8258%2050.7119C47.3588%2051.7779%2045.7738%2056.452%2045.5708%2057.361L45.4638%2057.842L44.3478%2057.743C43.7348%2057.688%2042.4068%2057.557%2041.3988%2057.45C37.9808%2057.09%2032.4538%2057.537%2027.5658%2058.569C18.7898%2060.42%207.61675%2066.031%202.26175%2071.276C-0.0312457%2073.521%20-0.371253%2074.283%200.316747%2075.632C1.29575%2077.551%202.93874%2077.242%205.84174%2074.594C14.7217%2066.494%2030.1778%2061.366%2042.2318%2062.521L44.2318%2062.7119L44.3328%2066.462C44.7418%2081.716%2054.2627%2091.517%2063.8707%2086.575C70.6737%2083.076%2070.5207%2072.967%2063.5607%2066.046C60.6837%2063.185%2057.2468%2061.222%2052.0628%2059.48C51.2648%2059.212%2050.5388%2058.919%2050.4478%2058.828C50.2298%2058.61%2052.1698%2052.721%2053.2298%2050.386C53.3558%2050.107%2053.7748%2049.092%2054.1608%2048.129C57.8128%2039.017%2064.9238%2029.2209%2072.0658%2023.4619C72.7988%2022.8709%2073.4738%2022.302%2073.5658%2022.198C74.1538%2021.531%2078.6578%2017.933%2080.5658%2016.607C81.2988%2016.097%2082.8558%2014.992%2084.0248%2014.151C87.3208%2011.779%2087.3348%2011.778%2086.8218%2013.993C86.1748%2016.783%2085.8068%2018.3569%2085.4818%2019.7119C85.3068%2020.4459%2084.9718%2021.871%2084.7368%2022.879C84.5018%2023.887%2084.2028%2025.125%2084.0728%2025.629C83.9428%2026.133%2083.7188%2026.999%2083.5768%2027.553C82.7728%2030.677%2083.4788%2032.4619%2085.5178%2032.4619C87.0668%2032.4619%2087.6708%2031.681%2088.3808%2028.754C89.2298%2025.256%2091.0188%2017.751%2091.3898%2016.129C91.6658%2014.926%2092.6668%2010.669%2093.2578%208.18296C93.5988%206.75096%2093.4438%205.99395%2092.6418%205.17395C91.9308%204.44695%2091.7498%204.40095%2084.2318%203.04195C82.0678%202.64995%2080.4298%202.35196%2078.8158%202.05396C78.0358%201.90996%2076.4988%201.63396%2075.3988%201.43996C73.3098%201.07196%2073.0978%201.03295%2069.9818%200.453954C66.8348%20-0.132047%2065.8588%20-0.146047%2065.0918%200.384953ZM51.4478%2064.542C58.5408%2067.011%2063.1708%2071.4499%2064.0798%2076.6529C65.2808%2083.5359%2057.9758%2085.5769%2053.4038%2079.6359C50.6208%2076.0189%2048.7988%2069.644%2049.2468%2065.093C49.3788%2063.757%2049.2708%2063.784%2051.4478%2064.542Z%22%20fill%3D%22%23F3BBA3%22%2F%3E%20%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2294%22%20height%3D%2288%22%20viewBox%3D%220%200%2094%2088%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M65.0918%200.384953C63.6978%201.34995%2063.6318%203.05095%2064.9448%204.15595C65.5038%204.62595%2066.1718%204.83496%2068.3158%205.21096C69.1858%205.36396%2070.4618%205.59396%2071.1488%205.72196C72.3898%205.95396%2073.4638%206.14596%2077.1488%206.79496C81.3498%207.53496%2082.9188%207.81495%2083.3568%207.89995C83.9118%208.00795%2083.9528%208.37896%2083.4408%208.64596C81.6108%209.59896%2074.6468%2015.001%2070.8158%2018.44C63.9408%2024.611%2055.0327%2035.385%2052.9657%2040.028C52.8797%2040.221%2052.6158%2040.717%2052.3788%2041.129C51.4728%2042.702%2048.9838%2047.77%2048.4888%2049.046C48.2048%2049.779%2047.9068%2050.5289%2047.8258%2050.7119C47.3588%2051.7779%2045.7738%2056.452%2045.5708%2057.361L45.4638%2057.842L44.3478%2057.743C43.7348%2057.688%2042.4068%2057.557%2041.3988%2057.45C37.9808%2057.09%2032.4538%2057.537%2027.5658%2058.569C18.7898%2060.42%207.61675%2066.031%202.26175%2071.276C-0.0312457%2073.521%20-0.371253%2074.283%200.316747%2075.632C1.29575%2077.551%202.93874%2077.242%205.84174%2074.594C14.7217%2066.494%2030.1778%2061.366%2042.2318%2062.521L44.2318%2062.7119L44.3328%2066.462C44.7418%2081.716%2054.2627%2091.517%2063.8707%2086.575C70.6737%2083.076%2070.5207%2072.967%2063.5607%2066.046C60.6837%2063.185%2057.2468%2061.222%2052.0628%2059.48C51.2648%2059.212%2050.5388%2058.919%2050.4478%2058.828C50.2298%2058.61%2052.1698%2052.721%2053.2298%2050.386C53.3558%2050.107%2053.7748%2049.092%2054.1608%2048.129C57.8128%2039.017%2064.9238%2029.2209%2072.0658%2023.4619C72.7988%2022.8709%2073.4738%2022.302%2073.5658%2022.198C74.1538%2021.531%2078.6578%2017.933%2080.5658%2016.607C81.2988%2016.097%2082.8558%2014.992%2084.0248%2014.151C87.3208%2011.779%2087.3348%2011.778%2086.8218%2013.993C86.1748%2016.783%2085.8068%2018.3569%2085.4818%2019.7119C85.3068%2020.4459%2084.9718%2021.871%2084.7368%2022.879C84.5018%2023.887%2084.2028%2025.125%2084.0728%2025.629C83.9428%2026.133%2083.7188%2026.999%2083.5768%2027.553C82.7728%2030.677%2083.4788%2032.4619%2085.5178%2032.4619C87.0668%2032.4619%2087.6708%2031.681%2088.3808%2028.754C89.2298%2025.256%2091.0188%2017.751%2091.3898%2016.129C91.6658%2014.926%2092.6668%2010.669%2093.2578%208.18296C93.5988%206.75096%2093.4438%205.99395%2092.6418%205.17395C91.9308%204.44695%2091.7498%204.40095%2084.2318%203.04195C82.0678%202.64995%2080.4298%202.35196%2078.8158%202.05396C78.0358%201.90996%2076.4988%201.63396%2075.3988%201.43996C73.3098%201.07196%2073.0978%201.03295%2069.9818%200.453954C66.8348%20-0.132047%2065.8588%20-0.146047%2065.0918%200.384953ZM51.4478%2064.542C58.5408%2067.011%2063.1708%2071.4499%2064.0798%2076.6529C65.2808%2083.5359%2057.9758%2085.5769%2053.4038%2079.6359C50.6208%2076.0189%2048.7988%2069.644%2049.2468%2065.093C49.3788%2063.757%2049.2708%2063.784%2051.4478%2064.542Z%22%20fill%3D%22%23F3BBA3%22%2F%3E%20%3C%2Fsvg%3E");
}

/* large — flush to bottom-left, touching the very bottom */
.arrow-bg--3 {
    bottom: 0;
    left: 4%;
    width: 230px;
    aspect-ratio: 151 / 75;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%22151%22%20height%3D%2275%22%20viewBox%3D%220%200%20151%2075%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M142.112%200.185657C141.385%200.412657%20121.553%2010.4057%20120.978%2010.8367C119.047%2012.2807%20119.969%2015.1947%20122.356%2015.1947C122.956%2015.1947%20124.205%2014.6267%20130.045%2011.6947C137.96%207.72166%20137.182%208.06066%20137.035%208.64766C136.91%209.14666%20136.785%209.43765%20134.951%2013.5277C133.876%2015.9247%20130.693%2021.9997%20129.624%2023.6947C129.537%2023.8317%20129.07%2024.5817%20128.587%2025.3617C116.446%2044.9317%2099.3631%2059.0987%2080.4461%2065.2847C76.5221%2066.5687%2075.8981%2066.7407%2072.0291%2067.6167C70.3631%2067.9937%2067.2741%2068.4637%2063.7791%2068.8727C53.3791%2070.0887%2040.2681%2068.2437%2029.6961%2064.0747C20.8541%2060.5887%2011.6491%2054.9707%205.38112%2049.2347C3.47712%2047.4927%202.35713%2047.1257%201.16313%2047.8537C-1.02887%2049.1907%20-0.124876%2051.3757%203.89412%2054.4497C4.36912%2054.8137%205.53413%2055.7117%206.48213%2056.4447C9.18313%2058.5337%2011.2161%2059.9467%2014.4461%2061.9787C18.0911%2064.2717%2023.7361%2067.0927%2027.6121%2068.5587C28.5751%2068.9227%2029.7001%2069.3567%2030.1121%2069.5227C40.6101%2073.7427%2057.0731%2075.2837%2069.2081%2073.1827C69.7511%2073.0887%2070.6821%2072.9377%2071.2751%2072.8487C71.8691%2072.7587%2072.6191%2072.6157%2072.9421%2072.5307C73.2651%2072.4457%2074.5041%2072.1387%2075.6961%2071.8487C78.9161%2071.0647%2082.3621%2069.9377%2087.0931%2068.1227C90.1571%2066.9457%2096.5731%2063.6437%20100.04%2061.4587C100.78%2060.9927%20101.504%2060.5367%20101.651%2060.4447C103.619%2059.2127%20107.494%2056.3797%20109.267%2054.8777C109.764%2054.4567%20110.385%2053.9517%20110.648%2053.7557C111.508%2053.1137%20115.971%2049.0577%20116.848%2048.1197C117.024%2047.9317%20117.888%2047.0277%20118.769%2046.1117C127.656%2036.8587%20135.305%2025.2247%20140.712%2012.7367C141.436%2011.0637%20142.077%209.69566%20142.135%209.69466C142.286%209.69466%20142.491%2010.5387%20144.702%2020.2587C145.416%2023.3987%20145.698%2024.3587%20146.036%2024.8027C147.217%2026.3507%20149.34%2026.0627%20150.144%2024.2457L150.48%2023.4867L149.69%2019.9657C149.256%2018.0287%20148.841%2016.1447%20148.767%2015.7777C148.693%2015.4117%20148.359%2013.9487%20148.024%2012.5277C147.309%209.49465%20146.666%206.72165%20146.033%203.94465C145.259%200.546652%20144.205%20-0.464343%20142.112%200.185657Z%22%20fill%3D%22%23F3BBA3%22%2F%3E%20%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%22151%22%20height%3D%2275%22%20viewBox%3D%220%200%20151%2075%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M142.112%200.185657C141.385%200.412657%20121.553%2010.4057%20120.978%2010.8367C119.047%2012.2807%20119.969%2015.1947%20122.356%2015.1947C122.956%2015.1947%20124.205%2014.6267%20130.045%2011.6947C137.96%207.72166%20137.182%208.06066%20137.035%208.64766C136.91%209.14666%20136.785%209.43765%20134.951%2013.5277C133.876%2015.9247%20130.693%2021.9997%20129.624%2023.6947C129.537%2023.8317%20129.07%2024.5817%20128.587%2025.3617C116.446%2044.9317%2099.3631%2059.0987%2080.4461%2065.2847C76.5221%2066.5687%2075.8981%2066.7407%2072.0291%2067.6167C70.3631%2067.9937%2067.2741%2068.4637%2063.7791%2068.8727C53.3791%2070.0887%2040.2681%2068.2437%2029.6961%2064.0747C20.8541%2060.5887%2011.6491%2054.9707%205.38112%2049.2347C3.47712%2047.4927%202.35713%2047.1257%201.16313%2047.8537C-1.02887%2049.1907%20-0.124876%2051.3757%203.89412%2054.4497C4.36912%2054.8137%205.53413%2055.7117%206.48213%2056.4447C9.18313%2058.5337%2011.2161%2059.9467%2014.4461%2061.9787C18.0911%2064.2717%2023.7361%2067.0927%2027.6121%2068.5587C28.5751%2068.9227%2029.7001%2069.3567%2030.1121%2069.5227C40.6101%2073.7427%2057.0731%2075.2837%2069.2081%2073.1827C69.7511%2073.0887%2070.6821%2072.9377%2071.2751%2072.8487C71.8691%2072.7587%2072.6191%2072.6157%2072.9421%2072.5307C73.2651%2072.4457%2074.5041%2072.1387%2075.6961%2071.8487C78.9161%2071.0647%2082.3621%2069.9377%2087.0931%2068.1227C90.1571%2066.9457%2096.5731%2063.6437%20100.04%2061.4587C100.78%2060.9927%20101.504%2060.5367%20101.651%2060.4447C103.619%2059.2127%20107.494%2056.3797%20109.267%2054.8777C109.764%2054.4567%20110.385%2053.9517%20110.648%2053.7557C111.508%2053.1137%20115.971%2049.0577%20116.848%2048.1197C117.024%2047.9317%20117.888%2047.0277%20118.769%2046.1117C127.656%2036.8587%20135.305%2025.2247%20140.712%2012.7367C141.436%2011.0637%20142.077%209.69566%20142.135%209.69466C142.286%209.69466%20142.491%2010.5387%20144.702%2020.2587C145.416%2023.3987%20145.698%2024.3587%20146.036%2024.8027C147.217%2026.3507%20149.34%2026.0627%20150.144%2024.2457L150.48%2023.4867L149.69%2019.9657C149.256%2018.0287%20148.841%2016.1447%20148.767%2015.7777C148.693%2015.4117%20148.359%2013.9487%20148.024%2012.5277C147.309%209.49465%20146.666%206.72165%20146.033%203.94465C145.259%200.546652%20144.205%20-0.464343%20142.112%200.185657Z%22%20fill%3D%22%23F3BBA3%22%2F%3E%20%3C%2Fsvg%3E");
}

/* tiny — right middle */
.arrow-bg--4 {
    top: 48%;
    right: 3%;
    width: 50px;
    aspect-ratio: 63 / 116;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2263%22%20height%3D%22116%22%20viewBox%3D%220%200%2063%20116%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2.03965%200.0480486C-0.966351%200.736049%20-0.572352%203.70905%202.71165%205.11505C10.5486%208.47005%2017.2716%2014.7251%2021.6536%2022.7391C22.3476%2024.0101%2022.4216%2023.9021%2020.5986%2024.2801C11.2676%2026.2131%204.48465%2033.0861%204.13165%2040.9651C3.48065%2055.4921%2024.3196%2056.3741%2029.2806%2042.0301C30.2686%2039.1741%2030.5756%2034.7351%2030.0076%2031.5291C29.5896%2029.1691%2029.4666%2029.253%2032.0636%2030.121C43.1406%2033.824%2049.8166%2046.0991%2049.8236%2062.7791C49.8276%2071.6001%2048.0297%2083.8871%2044.4817%2099.2791C43.1557%20105.033%2043.0916%20105.273%2042.9296%20105.092C42.7996%20104.948%2040.7616%2099.3051%2039.0826%2094.4461C38.1816%2091.8371%2037.7266%2091.031%2036.9176%2090.612C35.5036%2089.881%2033.9176%2090.9191%2033.9176%2092.5751C33.9176%2093.6571%2035.1286%2097.628%2036.6726%20101.612C36.9216%20102.254%2037.5607%20104.062%2038.0927%20105.629C41.3667%20115.272%2041.8177%20116.033%2044.0117%20115.621C45.0777%20115.421%2062.0007%20102.142%2062.7037%20100.955C63.2237%20100.075%2062.8646%2098.5971%2061.9896%2098.0201C60.7036%2097.1721%2059.2606%2097.8971%2054.3346%20101.868C50.9356%20104.608%2048.3926%20106.56%2048.3176%20106.485C48.2756%20106.443%2048.6877%20104.504%2049.2327%20102.177C55.9177%2073.641%2056.7326%2058.0761%2052.2436%2044.6371C48.7856%2034.2821%2040.3096%2026.301%2030.7206%2024.369C27.9426%2023.81%2027.8726%2023.7901%2027.7356%2023.5291C27.6626%2023.3911%2027.1546%2022.3681%2026.6056%2021.2541C22.7516%2013.4381%2015.6516%205.95506%208.66765%202.34906C5.04165%200.477059%203.10465%20-0.195951%202.03965%200.0480486ZM24.4096%2029.6541C26.0566%2035.5411%2025.0696%2041.222%2021.8626%2044.319C16.6086%2049.392%209.19665%2047.811%209.17365%2041.612C9.15265%2035.868%2014.6596%2030.6561%2022.1836%2029.2971C24.1966%2028.9331%2024.2086%2028.9351%2024.4096%2029.6541Z%22%20fill%3D%22%23F3BBA3%22%2F%3E%20%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2263%22%20height%3D%22116%22%20viewBox%3D%220%200%2063%20116%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2.03965%200.0480486C-0.966351%200.736049%20-0.572352%203.70905%202.71165%205.11505C10.5486%208.47005%2017.2716%2014.7251%2021.6536%2022.7391C22.3476%2024.0101%2022.4216%2023.9021%2020.5986%2024.2801C11.2676%2026.2131%204.48465%2033.0861%204.13165%2040.9651C3.48065%2055.4921%2024.3196%2056.3741%2029.2806%2042.0301C30.2686%2039.1741%2030.5756%2034.7351%2030.0076%2031.5291C29.5896%2029.1691%2029.4666%2029.253%2032.0636%2030.121C43.1406%2033.824%2049.8166%2046.0991%2049.8236%2062.7791C49.8276%2071.6001%2048.0297%2083.8871%2044.4817%2099.2791C43.1557%20105.033%2043.0916%20105.273%2042.9296%20105.092C42.7996%20104.948%2040.7616%2099.3051%2039.0826%2094.4461C38.1816%2091.8371%2037.7266%2091.031%2036.9176%2090.612C35.5036%2089.881%2033.9176%2090.9191%2033.9176%2092.5751C33.9176%2093.6571%2035.1286%2097.628%2036.6726%20101.612C36.9216%20102.254%2037.5607%20104.062%2038.0927%20105.629C41.3667%20115.272%2041.8177%20116.033%2044.0117%20115.621C45.0777%20115.421%2062.0007%20102.142%2062.7037%20100.955C63.2237%20100.075%2062.8646%2098.5971%2061.9896%2098.0201C60.7036%2097.1721%2059.2606%2097.8971%2054.3346%20101.868C50.9356%20104.608%2048.3926%20106.56%2048.3176%20106.485C48.2756%20106.443%2048.6877%20104.504%2049.2327%20102.177C55.9177%2073.641%2056.7326%2058.0761%2052.2436%2044.6371C48.7856%2034.2821%2040.3096%2026.301%2030.7206%2024.369C27.9426%2023.81%2027.8726%2023.7901%2027.7356%2023.5291C27.6626%2023.3911%2027.1546%2022.3681%2026.6056%2021.2541C22.7516%2013.4381%2015.6516%205.95506%208.66765%202.34906C5.04165%200.477059%203.10465%20-0.195951%202.03965%200.0480486ZM24.4096%2029.6541C26.0566%2035.5411%2025.0696%2041.222%2021.8626%2044.319C16.6086%2049.392%209.19665%2047.811%209.17365%2041.612C9.15265%2035.868%2014.6596%2030.6561%2022.1836%2029.2971C24.1966%2028.9331%2024.2086%2028.9351%2024.4096%2029.6541Z%22%20fill%3D%22%23F3BBA3%22%2F%3E%20%3C%2Fsvg%3E");
}

/* extra-large — flush to bottom-right, touching the very bottom */
.arrow-bg--5 {
    bottom: 0;
    right: 8%;
    width: 180px;
    aspect-ratio: 123 / 91;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%22123%22%20height%3D%2291%22%20viewBox%3D%220%200%20123%2091%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M102.648%200.442009C101.573%200.972009%20101.148%202.41701%20101.687%203.70901C101.822%204.03201%20104.203%206.49601%20107.598%209.82601C111.102%2013.264%20113.204%2015.442%20113.08%2015.508C112.969%2015.566%20112.015%2015.702%20110.961%2015.809C99.9157%2016.933%2091.2027%2018.269%2085.2107%2019.756C75.5617%2022.151%2062.4757%2027.217%2056.7557%2030.771C55.9357%2031.28%2056.0127%2031.297%2054.1807%2030.218C42.3077%2023.231%2022.5637%2019.13%2010.8777%2021.224C3.40772%2022.563%200.951712%2023.408%200.288712%2024.867C-0.815288%2027.299%201.39672%2028.987%204.37772%2027.989C15.5647%2024.242%2031.7487%2025.779%2046.1277%2031.953C50.0137%2033.622%2051.2247%2034.338%2050.6677%2034.636C50.1327%2034.922%2045.6097%2038.354%2043.6307%2039.976C29.4047%2051.63%2024.1237%2066.377%2029.9587%2078.157C39.4787%2097.375%2069.0327%2093.547%2073.7087%2072.49C76.3437%2060.628%2071.4557%2045.59%2061.9027%2036.169C60.2137%2034.504%2060.1377%2034.738%2062.8047%2033.402C70.9457%2029.322%2084.0847%2024.901%2092.2107%2023.507C94.6487%2023.089%2096.3497%2022.826%2098.2107%2022.582C99.3107%2022.437%20100.999%2022.211%20101.961%2022.078C105.637%2021.573%20113.684%2020.676%20113.78%2020.762C113.818%2020.795%20111.332%2023.361%20108.255%2026.463C104.887%2029.86%20102.523%2032.377%20102.312%2032.79C101.174%2035.02%20103.235%2037.216%20105.554%2036.247C106.215%2035.971%20121.302%2020.854%20121.919%2019.85C122.999%2018.091%20122.506%2017.25%20117.502%2012.304C103.966%20-1.07199%20104.636%20-0.536991%20102.648%200.442009ZM57.8497%2039.499C67.9207%2049.116%2072.1857%2065.517%2067.2037%2075.469C59.9057%2090.047%2037.2397%2088.161%2033.4077%2072.657C30.7387%2061.861%2037.2497%2050.43%2051.9607%2040.081C53.3817%2039.081%2054.7317%2038.129%2054.9607%2037.965C55.6457%2037.476%2055.8387%2037.579%2057.8497%2039.499Z%22%20fill%3D%22%23F3BBA3%22%2F%3E%20%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%22123%22%20height%3D%2291%22%20viewBox%3D%220%200%20123%2091%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M102.648%200.442009C101.573%200.972009%20101.148%202.41701%20101.687%203.70901C101.822%204.03201%20104.203%206.49601%20107.598%209.82601C111.102%2013.264%20113.204%2015.442%20113.08%2015.508C112.969%2015.566%20112.015%2015.702%20110.961%2015.809C99.9157%2016.933%2091.2027%2018.269%2085.2107%2019.756C75.5617%2022.151%2062.4757%2027.217%2056.7557%2030.771C55.9357%2031.28%2056.0127%2031.297%2054.1807%2030.218C42.3077%2023.231%2022.5637%2019.13%2010.8777%2021.224C3.40772%2022.563%200.951712%2023.408%200.288712%2024.867C-0.815288%2027.299%201.39672%2028.987%204.37772%2027.989C15.5647%2024.242%2031.7487%2025.779%2046.1277%2031.953C50.0137%2033.622%2051.2247%2034.338%2050.6677%2034.636C50.1327%2034.922%2045.6097%2038.354%2043.6307%2039.976C29.4047%2051.63%2024.1237%2066.377%2029.9587%2078.157C39.4787%2097.375%2069.0327%2093.547%2073.7087%2072.49C76.3437%2060.628%2071.4557%2045.59%2061.9027%2036.169C60.2137%2034.504%2060.1377%2034.738%2062.8047%2033.402C70.9457%2029.322%2084.0847%2024.901%2092.2107%2023.507C94.6487%2023.089%2096.3497%2022.826%2098.2107%2022.582C99.3107%2022.437%20100.999%2022.211%20101.961%2022.078C105.637%2021.573%20113.684%2020.676%20113.78%2020.762C113.818%2020.795%20111.332%2023.361%20108.255%2026.463C104.887%2029.86%20102.523%2032.377%20102.312%2032.79C101.174%2035.02%20103.235%2037.216%20105.554%2036.247C106.215%2035.971%20121.302%2020.854%20121.919%2019.85C122.999%2018.091%20122.506%2017.25%20117.502%2012.304C103.966%20-1.07199%20104.636%20-0.536991%20102.648%200.442009ZM57.8497%2039.499C67.9207%2049.116%2072.1857%2065.517%2067.2037%2075.469C59.9057%2090.047%2037.2397%2088.161%2033.4077%2072.657C30.7387%2061.861%2037.2497%2050.43%2051.9607%2040.081C53.3817%2039.081%2054.7317%2038.129%2054.9607%2037.965C55.6457%2037.476%2055.8387%2037.579%2057.8497%2039.499Z%22%20fill%3D%22%23F3BBA3%22%2F%3E%20%3C%2Fsvg%3E");
}

@media (max-width: 768px) {
    .arrow-bg--1 { width: 44px; }
    .arrow-bg--2 { width: 80px; }
    .arrow-bg--3 { width: 140px; }
    .arrow-bg--4 { width: 30px; }
    .arrow-bg--5 { width: 110px; }
}


/* ===========================================================================
   Product card — square framing with a strong ink border and a directional
   arrow on the footer that nudges right on hover. Gives the product grid a
   confident editorial feel instead of soft rounded thumbnails.
   =========================================================================== */
.product-card {
    border-radius: 0;
    border: 2px solid var(--ed-ink);
    box-shadow: none;
}
.product-card__image-wrap {
    border-radius: 0;
    border-bottom: 2px solid var(--ed-ink);
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 8px 8px 0 var(--ed-ink);
}

.product-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

/* directional arrow next to the price — points toward the linked product */
.product-card__footer::after {
    content: '';
    display: inline-block;
    width: 28px;
    height: 12px;
    background-color: var(--ed-ink);
    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2056%2024%22%3E%3Cpath%20d%3D%22M0%2012%20L48%2012%20M36%202%20L52%2012%20L36%2022%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2056%2024%22%3E%3Cpath%20d%3D%22M0%2012%20L48%2012%20M36%202%20L52%2012%20L36%2022%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), background-color 200ms ease;
}
.product-card:hover .product-card__footer::after {
    transform: translateX(8px);
    background-color: var(--ed-gold);
}

/* hand-drawn arrow that pops outside the card on hover — solid white */
.product-card {
    overflow: visible;
}
.product-card__image-wrap {
    overflow: hidden;
}
.product-card__arrow-anim {
    position: absolute;
    top: -36px;
    right: -36px;
    width: 96px;
    height: auto;
    pointer-events: none;
    z-index: 4;
    overflow: visible;
}
.product-card__arrow-anim path {
    fill: transparent;
    stroke: #ffffff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1100ms cubic-bezier(0.65, 0, 0.35, 1),
                fill 280ms ease;
}
.product-card:hover .product-card__arrow-anim path {
    stroke-dashoffset: 0;
    fill: #ffffff;
    transition: stroke-dashoffset 1100ms cubic-bezier(0.65, 0, 0.35, 1),
                fill 280ms ease 1100ms;
}

/* Both card buttons — WC's "Add to cart" link (which also carries its own
   `.button add_to_cart_button` classes) and our "Build a Box" link — share the
   brand `.btn btn--small btn--full` set, but two later overrides break that:
   WooCommerce core `.button` styling on the cart link, and a re-declared `.btn`
   (the editorial pill ~line 6334) that out-orders `.btn--small` for the box
   link. Pin both to one identical small treatment so they match exactly.
   Selectors carry enough specificity to beat both `.woocommerce a.button`
   (cart link) and the re-declared `.btn` (box link). */
.woocommerce .product-card__quick-add > a.button,
.product-card__quick-add > a.btn,
.product-card__quick-add > a.product-card__build-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* product-card quick-add button — pink primary inside the card */
.product-card__quick-add .btn--primary,
.product-card__quick-add .btn.btn--primary {
    background: var(--ed-pink);
    border-color: var(--ed-pink);
    color: var(--ed-ink);
}
.product-card__quick-add .btn--primary:hover,
.product-card__quick-add .btn.btn--primary:hover {
    background: var(--ed-gold);
    border-color: var(--ed-gold);
    color: var(--ed-cream);
}
@media (prefers-reduced-motion: reduce) {
    .product-card__arrow-anim path {
        transition: none;
        stroke-dashoffset: 0;
    }
}


/* ===========================================================================
   Values splash — full-bleed product photo with the three ethos points
   overlaid in a horizontal row at the bottom. Mirrors the hero video pattern.
   =========================================================================== */
.values-splash {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    isolation: isolate;
    max-width: var(--container-max);
    width: calc(100% - var(--space-xl) * 2);
    margin: var(--space-3xl) auto;
    border-radius: 32px;
}

@media (max-width: 768px) {
    .values-splash {
        width: calc(100% - var(--space-lg) * 2);
        border-radius: 20px;
    }
}

.values-splash__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.values-splash__media img {
    position: absolute;
    left: 0;
    top: -15%;
    width: 100%;
    height: 130%;
    object-fit: cover;
    display: block;
    will-change: transform;
    transition: none;
}
.values-splash__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(26, 19, 10, 0.10) 0%,
        rgba(26, 19, 10, 0.35) 50%,
        rgba(26, 19, 10, 0.80) 100%
    );
}

.values-splash__container {
    position: relative;
    z-index: 1;
    max-width: var(--container-max);
    width: 100%;
    margin: 0 auto;
    padding: clamp(4rem, 10vw, 8rem) var(--space-xl) clamp(3rem, 6vw, 5rem);
    color: var(--ed-cream);
    display: flex;
    flex-direction: column;
}
.values-splash__eyebrow { margin-top: auto; }
.values-splash__title { margin-bottom: auto; }

.values-splash__eyebrow {
    color: var(--ed-cream);
    opacity: 0.85;
    margin-bottom: var(--space-md);
}

.values-splash__title {
    color: var(--ed-cream);
    margin: 0 0 clamp(2rem, 4vw, 3.5rem);
    gap: 0.05em;
}
.values-splash__title .statement {
    font-size: clamp(3rem, 8vw, 7rem);
    color: var(--ed-cream);
    line-height: 0.95;
    margin: 0;
}
.values-splash__title .statement--italic {
    color: var(--ed-cream);
}
.values-splash__title .statement-stack__line--right {
    align-self: center;
    padding-right: 0;
}

.values-splash__points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: var(--space-2xl) 0 0;
}

.value-card--overlay {
    color: var(--ed-cream);
    padding: clamp(1.5rem, 2.5vw, 2.25rem);
    background: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    box-shadow: none;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    border-left: 1px solid rgba(255, 255, 255, 0.35);
    border-right: 1px solid rgba(255, 255, 255, 0.35);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.value-card--overlay + .value-card--overlay {
    border-left: 0;
}
.values-splash .value-card--overlay .value-card__icon,
.values-splash .value-card:nth-child(2n) .value-card__icon,
.values-splash .value-card:nth-child(3n) .value-card__icon,
.values-splash .value-card:nth-child(4n) .value-card__icon {
    width: 70px;
    height: 70px;
    color: var(--ed-pink);
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-bottom: var(--space-md);
}
.values-splash .value-card__icon,
.values-splash .value-card__icon path,
.values-splash .value-card__icon circle {
    stroke: var(--ed-pink);
    fill: none;
}
.value-card--overlay .value-card__title {
    color: var(--ed-cream);
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    margin-bottom: var(--space-sm);
}
.value-card--overlay .value-card__text {
    color: var(--ed-cream);
    opacity: 0.85;
    font-size: 0.95rem;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .values-splash {
        min-height: 80vh;
    }
    .values-splash__points {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .value-card--overlay + .value-card--overlay {
        border-left: 1px solid rgba(255, 255, 255, 0.35);
        border-top: 0;
    }
}




/* ============================================================
   ░░░ Mobile fixes — May 2026 ░░░
   ============================================================ */

@media (max-width: 768px) {
    /* 1. keep the abstract drip from squishing on narrow viewports */
    .section-drip,
    .section-drip--tall,
    .section-drip--small,
    .section-drip--subtle,
    .section-drip--abstract,
    .page-header::after,
    .footer__drip {
        height: 90px;
    }
    .footer__drip {
        margin-bottom: -90px;
    }

    /* 2. center the logo on mobile — drop the transform, align with the
          menu toggle (left) and action buttons (right) via a 3-col grid */
    .header__container {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }
    .header__menu-toggle { justify-self: start; }
    .header__actions     { justify-self: end; }
    .header__logo,
    .header--scrolled .header__logo {
        position: static;
        transform: none;
        top: auto;
        left: auto;
        justify-self: center;
        margin: 0;
    }

    /* 4. values splash stacks on mobile */
    .values-splash__points {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* 5. mobile menu fills the full viewport height (handles dynamic
          browser chrome on iOS/Android via 100dvh) */
    .header__nav {
        height: 100vh;
        height: 100dvh;
        min-height: 100dvh;
        overflow-y: auto;
    }

    /* 6. mobile submenu — drop the desktop card styling (shadow, border,
          background) and the hover highlight; use a consistent indent so the
          links read as a clean sub-list under the parent item. */
    .header__submenu,
    .header__nav-item--has-menu:hover .header__submenu,
    .header__nav-item--has-menu:focus-within .header__submenu {
        background: transparent;
        border: none;
        box-shadow: none;
        border-radius: 0;
        padding: var(--space-sm) 0 0 var(--space-md);
        margin: 0;
        transform: none;
    }

    .header__submenu-link {
        padding: var(--space-xs) 0;
        margin: 0;
        background: transparent;
    }

    .header__submenu-link:hover,
    .header__submenu-link:focus,
    .header__submenu-link:active,
    .header__nav-link:hover,
    .header__nav-link:focus,
    .header__nav-link:active {
        background: transparent;
        color: inherit;
    }

    .header__nav-link:hover::after,
    .header__nav-link:focus::after,
    .header__nav-link:active::after {
        transform: scaleX(0);
    }

    /* 7. mobile has no hover — keep the quick-add (add to basket) button
          always visible on product cards. */
    .product-card__quick-add {
        opacity: 1;
        transform: none;
    }
}

/* 3. single-column product grid on small mobile */
@media (max-width: 640px) {
    .product-grid {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}


/* ============================================================
   Page-header cream variant — used by shop, contact, and the
   shop subpages (products, build, merchandise, weddings,
   wholesale). The existing .page-header::after drip inherits
   the header's background, so swapping to cream gives a cream
   drip pouring into whichever section follows.
   ============================================================ */
.page-header.page-header--cream {
    background: var(--ed-cream);
}
.page-header.page-header--cream .page-header__title,
.page-header.page-header--cream .page-header__eyebrow {
    color: var(--ed-ink);
}
.page-header.page-header--cream .page-header__lead {
    color: var(--ed-ink-soft);
}

/* Page-header drip is suppressed sitewide — sections below the header
   provide their own drip when a transition is needed. */
.page-header::after {
    display: none;
}


/* ============================================================
   Build page — re-skin the box-size and flavour cards to match
   the editorial product cards on index.php: square corners,
   thin ink border, no resting shadow, sticker shadow only on
   hover/checked.
   ============================================================ */
.box-option__card {
    border: 2px solid var(--ed-ink);
    border-radius: 0;
    box-shadow: none;
    background: var(--color-vanilla);
}

.box-option:hover .box-option__card,
.product-card:hover {
    transform: translate(-4px, -6px);
    box-shadow: 10px 10px 0 var(--ed-ink);
    border-color: var(--ed-ink);
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.box-option input:checked + .box-option__card {
    border-color: var(--ed-ink);
    background: var(--pop-yellow);
    box-shadow: 10px 10px 0 var(--ed-ink);
}

.box-option__image {
    border-radius: 0;
    border-bottom: 2px solid var(--ed-ink);
}

.box-option__check {
    border-radius: 999px;
    border: 2px solid var(--ed-ink);
    background: var(--color-vanilla);
    box-shadow: none;
}

.flavour-card {
    border: 2px solid var(--ed-ink);
    border-radius: 0;
    box-shadow: none;
    background: var(--color-vanilla);
}

.flavour-card:hover {
    border-color: var(--ed-ink);
    transform: translateY(-4px);
    box-shadow: 8px 8px 0 var(--ed-ink);
}

.flavour-card__image {
    border-radius: 0;
    border-bottom: 2px solid var(--ed-ink);
}

.flavour-card__qty-btn {
    border: 2px solid var(--ed-ink);
    border-radius: 0;
    box-shadow: none;
}

.builder-summary {
    background: var(--ed-biscuit);
    border: 2px solid var(--ed-ink);
    border-radius: 0;
    box-shadow: none;
}


/* ============================================================
   Shop landing tiles — same editorial card language as the
   index product cards: square corners, 2px ink border, no
   resting shadow, sticker shadow + 4px lift on hover. The
   media area gets a matching ink divider underneath.
   ============================================================ */
.shop-tile,
.shop-tile--accent {
    border: 2px solid var(--ed-ink);
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}

.shop-tile:hover,
.shop-tile--accent:hover {
    transform: translateY(-4px);
    box-shadow: 8px 8px 0 var(--ed-ink);
}

.shop-tile__media {
    border-radius: 0;
    border-bottom: 2px solid var(--ed-ink);
}


/* statement-stack children may be either h2/h3 or span when the whole stack
   is wrapped in a single heading — make spans behave like block lines so
   indent/align modifiers still work. */
h2.statement-stack,
h3.statement-stack {
    display: flex;
    flex-direction: column;
    margin: 0;
    font: inherit;
    color: inherit;
}
.statement-stack > span.statement {
    display: block;
}


/* Footer CTA — description paragraph that sits between the title and the
   action buttons. Mirrors the muted lead style used elsewhere. */
.footer__cta-description {
    max-width: 640px;
    margin: var(--space-md) auto 0;
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--ink);
    opacity: 0.8;
}

.values-splash,
.values-splash.cb-revealed {
    background: var(--ed-biscuit);
}

.page-home .values-splash-bg {
    background: linear-gradient(
        to bottom,
        var(--ed-biscuit) 0%,
        var(--ed-cream) 35%,
        var(--ed-cream) 100%
    );
    padding: var(--space-xl);
}

.page-about .values-splash-bg {
    background: var(--ed-biscuit-warm);
    padding: var(--space-xl);
}

.page-home .values-splash-bg .values-splash,
.page-about .values-splash-bg .values-splash {
    margin: 0 auto;
    width: 100%;
}

/* Smaller statement-stack variant — used by about.php "The world's first
   CHOUXtisserie." which needs a more modest scale than the index hero. */
.statement-band--big .statement-stack.statement-stack--sm > .statement:not(.statement__subtle) {
    font-size: clamp(1.4rem, 4vw, 3.5rem);
}
/* Prevent long words (e.g. CHOUXtisserie) from overflowing the viewport */
.statement-band { overflow-x: clip; }
.statement { word-break: break-word; }

/* About page — body copy matches static-design inline styles */
.page-about main p,
.page-about .wp-block-paragraph {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--ed-ink-soft, #5C3A1E);
    margin-bottom: var(--space-lg);
    max-width: 560px;
}
.page-about figure,
.page-about .wp-block-image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--border-radius-xl);
    margin: 0;
}
.page-about figure img,
.page-about .wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Smooth gradient transition between the testimonials band and the footer
   "come say hello" CTA — fades the cream/section background down into the
   footer's biscuit-warm so the seam disappears. */
.testimonials-band {
    position: relative;
    background: linear-gradient(
        to bottom,
        var(--ed-cream) 0%,
        var(--ed-cream) 55%,
        var(--ed-biscuit-warm) 100%
    );
}


/* ===========================================================================
   Ethos marquee — golden bun background, cream text, pink dot separators
   =========================================================================== */
.ethos-marquee {
    background: var(--ed-gold);
    color: var(--ed-cream);
    padding: var(--space-md) 0;
    letter-spacing: 0.04em;
}
.ethos-marquee__item {
    color: var(--ed-cream);
}
.ethos-marquee__item {
    gap: var(--space-md);
}
.ethos-marquee__track {
    gap: var(--space-md);
}
.ethos-marquee__item::after {
    content: '';
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: var(--ed-pink);
    display: inline-block;
    opacity: 1;
    margin-left: var(--space-md);
    box-shadow: none;
}


/* ===========================================================================
   Mobile polish — sitewide refinements for small screens
   Tighter section padding, larger touch targets, calmer type scale,
   marquee speed-up, full-bleed cards, friendlier nav, etc.
   =========================================================================== */
@media (max-width: 768px) {
    /* Calmer page padding */
    .section,
    .statement-band,
    .testimonials-band {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }
    .section { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }

    /* Headings scale more gracefully */
    h1, .hero__title, .page-header__title {
        font-size: clamp(2rem, 9vw, 3.4rem);
        line-height: 1.05;
        letter-spacing: -0.01em;
    }
    h2, .section__title {
        font-size: clamp(1.7rem, 7vw, 2.6rem);
        line-height: 1.1;
    }
    /* Body text comfortable */
    body { font-size: 1rem; line-height: 1.55; }
    p { max-width: 60ch; }

    /* Touch targets — buttons, nav links, form controls */
    .btn,
    .nav__link,
    .header__nav-link,
    button,
    input[type="submit"],
    select,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"] {
        min-height: 44px;
        font-size: 1rem;
    }
    .btn { padding: 0.85rem 1.4rem; }

    /* Marquee — slightly tighter spacing on phones */
    .ethos-marquee { padding: 0.75rem 0; }
    .ethos-marquee__item { font-size: 1rem; gap: var(--space-sm); }
    .ethos-marquee__item::after {
        width: 0.45em; height: 0.45em;
        margin-left: var(--space-sm);
    }
    .ethos-marquee__track {
        gap: var(--space-sm);
        animation-duration: 28s;
    }

    /* Grid systems collapse predictably */
    .product-grid,
    .values-splash,
    .testimonials-band__grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-lg) !important;
    }

    /* Cards — full-bleed-ish with friendlier corners */
    .product-card,
    .box-option__card,
    .testimonial {
        border-radius: 14px;
    }

    /* Page header — tighten and centre */
    .page-header {
        padding: var(--space-2xl) var(--space-md);
        text-align: center;
    }
    .page-header__lead { font-size: 1.05rem; }

    /* Footer — stack columns with breathing room */
    .footer__columns,
    .footer__grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-xl);
        text-align: center;
    }
    .footer__cta-eyebrow { justify-content: center; }

    /* Statement bands — kill huge top/bottom padding */
    .statement-band {
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-2xl);
    }
    .statement-stack > .statement:not(.statement__subtle) {
        font-size: clamp(2.4rem, 11vw, 4.5rem);
        line-height: 1;
    }

    /* Images — never overflow, soften */
    img { max-width: 100%; height: auto; }
    .hero img, .product-card img { border-radius: 12px; }

    /* Announcement bar — wraps cleanly */
    .announcement-bar__text {
        font-size: 0.78rem;
        padding: 0.5rem var(--space-md);
        line-height: 1.35;
    }

    /* Modal — fill viewport with margin */
    .modal__content {
        max-width: calc(100vw - 1.5rem);
        max-height: calc(100vh - 1.5rem);
        margin: 0.75rem;
    }
}

@media (max-width: 480px) {
    :root {
        --space-2xl: 2rem;
        --space-xl: 1.5rem;
    }
    .section { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
    .hero__title, .page-header__title { font-size: clamp(1.9rem, 10vw, 2.6rem); }
    .btn { width: 100%; justify-content: center; }
    .btn + .btn { margin-top: 0.6rem; }
}

/* Build page — remove box-shadow on step progress */
.step-progress,
.step-progress::before,
.step-progress__item,
.step-progress__num {
    box-shadow: none !important;
}


/* Build page — active step section: cream-to-biscuit gradient */
.section.section--cream.builder-step.builder-step--active.cb-revealed,
.section.section--cream.builder-step.builder-step--active {
    background: linear-gradient(
        to bottom,
        var(--ed-cream) 0%,
        var(--ed-cream) 55%,
        var(--ed-biscuit-warm) 100%
    );
}


/* Build page — Review & collect "your box" card: no radius, no shadow */
.builder-review__card {
    border-radius: 0 !important;
    box-shadow: none !important;
}


/* Checkout summary — match editorial card style (square, ink border, sticker shadow on hover) */
.checkout__summary {
    background: var(--ed-cream) !important;
    border: 2px solid var(--ed-ink) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: var(--space-xl) !important;
}
.checkout__summary-item-qty {
    border-radius: 0 !important;
    background: var(--ed-ink) !important;
    color: var(--ed-cream) !important;
}
.checkout__summary-title {
    border-bottom-color: var(--ed-ink) !important;
}
.checkout__summary-divider {
    border-top-color: var(--ed-ink) !important;
    opacity: 0.18 !important;
}
.checkout__summary-total {
    border-top-color: var(--ed-ink) !important;
}


/* Form fields — white background sitewide */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="date"],
textarea,
select,
.form-input,
.form-textarea,
.checkout__select,
.enquiry-form__input,
.filters-mobile__select {
    background-color: #ffffff !important;
}


/* Product cards — square corners, no border-radius anywhere */
.product-card,
.product-card *,
.product-card__image-wrap,
.product-card__image,
.product-card__body,
.product-card__badge,
.product-card__quick-add,
.product-card__footer,
.hero .product-card img,
.product-card img {
    border-radius: 0 !important;
}




/* ---------------------------------------------------------------------------
   Logo size guard — pin the header logo so it can never blow out on pages
   that don't have a hero behind it (notably WooCommerce archive + cart
   templates, where some upstream rule was leaving the SVG at its native
   ~1000px dimensions and burying the page title under the logo drop).
   --------------------------------------------------------------------------- */
.header .header__logo-img--full,
body.woocommerce-page .header .header__logo-img--full,
body.archive .header .header__logo-img--full {
    height: 64px !important;
    width: auto !important;
    max-height: 64px !important;
}
.header .header__logo-img--sticky,
body.woocommerce-page .header .header__logo-img--sticky,
body.archive .header .header__logo-img--sticky {
    height: 48px !important;
    width: auto !important;
    max-height: 48px !important;
}


/* ---------------------------------------------------------------------------
   WC checkout brand bridge — map WC's default form markup onto the static
   design's .checkout__* look. Touches only `.woocommerce-checkout` scope
   so the rest of WC's admin/account screens are unaffected.
   --------------------------------------------------------------------------- */
.woocommerce-checkout.checkout .checkout__form-section h3 {
    font-size: var(--text-md);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 var(--space-md);
}
.woocommerce-checkout.checkout .form-row {
    margin: 0 0 var(--space-md);
    padding: 0;
    display: block;
    width: 100%;
}
.woocommerce-checkout.checkout .form-row label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: var(--space-xs);
}
/* Checkout fields — match the "Collection Location" pickup-step pill style
   exactly: biscuit border, 10px radius, 50px min-height, white fill, golden
   focus ring. Covers Contact & Billing + the Payment section (both live in
   .checkout__form). */
.woocommerce-checkout.checkout .checkout__form .form-row .input-text,
.woocommerce-checkout.checkout .checkout__form .form-row textarea,
.woocommerce-checkout.checkout .checkout__form .form-row select,
.woocommerce-checkout.checkout .checkout__form select.country_select,
.woocommerce-checkout.checkout .checkout__form select.state_select,
.woocommerce-checkout.checkout .checkout__form input[type="text"],
.woocommerce-checkout.checkout .checkout__form input[type="email"],
.woocommerce-checkout.checkout .checkout__form input[type="tel"],
.woocommerce-checkout.checkout .checkout__form input[type="password"],
.woocommerce-checkout.checkout .checkout__form input[type="number"],
.woocommerce-checkout.checkout .select2-selection {
    width: 100% !important;
    min-height: 50px;
    padding: 12px 16px !important;
    border: 1.5px solid var(--color-biscuit, #E8D4A8) !important;
    border-radius: 10px !important;
    background-color: var(--color-white) !important;
    font-size: var(--text-md);
    font-family: var(--font-body);
    color: var(--color-chocolate-brown);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    line-height: 1.3;
    box-sizing: border-box;
    box-shadow: none;
}
.woocommerce-checkout.checkout .checkout__form .form-row .input-text:focus,
.woocommerce-checkout.checkout .checkout__form .form-row textarea:focus,
.woocommerce-checkout.checkout .checkout__form .form-row select:focus,
.woocommerce-checkout.checkout .checkout__form input:focus,
.woocommerce-checkout.checkout .select2-container--open .select2-selection {
    outline: none;
    border-color: var(--color-golden-bun) !important;
    box-shadow: 0 0 0 3px rgba(183, 121, 43, 0.18) !important;
}
.woocommerce-checkout.checkout .form-row-first,
.woocommerce-checkout.checkout .form-row-last {
    width: calc(50% - calc(var(--space-md) / 2));
    display: inline-block;
    vertical-align: top;
}
.woocommerce-checkout.checkout .form-row-first { margin-right: var(--space-md); }

/* Hide the form-row label for the email when it's our combined Contact section heading */
.woocommerce-checkout.checkout label .required { color: var(--color-raspberry-red); margin-left: 2px; }
.woocommerce-checkout.checkout label .optional { color: var(--color-text-muted); font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 4px; font-style: italic; }

/* Pickup-step card — already styled inline via Pickup::render(); just tighten margin */
.woocommerce-checkout.checkout .cb-pickup-step { margin: 0 0 var(--space-xl); }

/* ---------------------------------------------------------------------------
   Coupon section — relocated to the top of the left column (above Collection
   Location) in form-checkout.php. It's a standalone <form>, so we align it to
   the left column with the same 1.2fr/0.8fr grid the .checkout uses, and match
   the field styling of the other form sections.
   --------------------------------------------------------------------------- */
.section--checkout .checkout__coupon {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--space-3xl);
    align-items: start;
}
.section--checkout .checkout__coupon .checkout__form-section--coupon {
    grid-column: 1;
    margin-bottom: var(--space-2xl);
}
.section--checkout .checkout__coupon .checkout__section-title {
    margin-bottom: var(--space-md);
}

/* The "Have a coupon?" toggle — strip WC's default notice chrome and present
   it as a quiet intro line (mirrors .cb-pickup-step__intro) with a golden link. */
.section--checkout .checkout__coupon .woocommerce-form-coupon-toggle {
    margin: 0;
}
.section--checkout .checkout__coupon .woocommerce-form-coupon-toggle .woocommerce-info {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--color-chocolate-brown) !important;
    font-size: var(--text-sm) !important;
    line-height: 1.5;
}
.section--checkout .checkout__coupon .woocommerce-form-coupon-toggle .woocommerce-info::before {
    display: none !important;
}
.section--checkout .checkout__coupon .woocommerce-form-coupon-toggle .showcoupon {
    color: var(--color-golden-bun);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
    transition: color var(--transition-fast);
}
.section--checkout .checkout__coupon .woocommerce-form-coupon-toggle .showcoupon:hover {
    color: var(--color-golden-bun-dark, #8C5B18);
}

/* The expanded coupon form — code field + apply button on one row. */
.section--checkout .checkout__coupon .checkout_coupon {
    margin: var(--space-md) 0 0;
    padding: 0;
    border: 0;
    display: flex;
    gap: var(--space-md);
    align-items: stretch;
    flex-wrap: wrap;
}
.section--checkout .checkout__coupon .checkout_coupon .form-row {
    margin: 0;
    padding: 0;
    width: auto;
}
.section--checkout .checkout__coupon .checkout_coupon .form-row-first {
    flex: 1 1 240px;
}
.section--checkout .checkout__coupon .checkout_coupon .form-row-last {
    display: flex;
    align-items: stretch;
}
.section--checkout .checkout__coupon .checkout_coupon .clear { display: none; }

/* Coupon code input — identical to the canonical checkout field (biscuit
   border, 10px radius, 50px min-height, white fill, golden focus ring).
   !important mirrors the shared .checkout__form field rule so WC's own
   styles don't win. */
.section--checkout .checkout__coupon .checkout_coupon input#coupon_code {
    width: 100% !important;
    min-height: 50px;
    padding: 12px 16px !important;
    border: 1.5px solid var(--color-biscuit, #E8D4A8) !important;
    border-radius: 10px !important;
    background-color: var(--color-white) !important;
    font-size: var(--text-md);
    font-family: var(--font-body);
    color: var(--color-chocolate-brown);
    line-height: 1.3;
    box-sizing: border-box;
    box-shadow: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.section--checkout .checkout__coupon .checkout_coupon input#coupon_code:focus {
    outline: none;
    border-color: var(--color-golden-bun) !important;
    box-shadow: 0 0 0 3px rgba(183, 121, 43, 0.18) !important;
}
.section--checkout .checkout__coupon .checkout_coupon input#coupon_code::placeholder {
    color: var(--color-text-muted);
}

/* Apply-coupon button — secondary chocolate pill (subordinate to the raspberry
   "Place Order" primary). Same pill geometry as #place_order. */
.section--checkout .checkout__coupon .checkout_coupon button[name="apply_coupon"] {
    min-height: 50px;
    padding: 0 var(--space-xl);
    background-color: var(--color-chocolate-brown);
    color: var(--color-vanilla);
    border: 2px solid var(--color-chocolate-brown);
    border-radius: 9999px;
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.section--checkout .checkout__coupon .checkout_coupon button[name="apply_coupon"]:hover {
    background-color: var(--color-golden-bun);
    border-color: var(--color-golden-bun);
}

/* On mobile the checkout grid collapses to one column — do the same for the
   coupon wrapper so it spans full width. */
@media (max-width: 1024px) {
    .section--checkout .checkout__coupon {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* Order-review table on the right */
.woocommerce-checkout.checkout .woocommerce-checkout-review-order-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-md) 0;
    font-size: var(--text-sm);
}
.woocommerce-checkout.checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout.checkout .woocommerce-checkout-review-order-table td {
    padding: var(--space-sm) 0;
    border: none;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}
.woocommerce-checkout.checkout .woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout.checkout .woocommerce-checkout-review-order-table th:last-child {
    text-align: right;
}
.woocommerce-checkout.checkout .woocommerce-checkout-review-order-table tfoot .order-total {
    font-size: var(--text-lg);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.woocommerce-checkout.checkout .woocommerce-checkout-review-order-table .product-name {
    font-weight: 600;
}
.woocommerce-checkout.checkout .wc-item-meta {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-xs);
    color: var(--color-chocolate-brown);
}
.woocommerce-checkout.checkout .wc-item-meta li { margin: 2px 0; }
.woocommerce-checkout.checkout .wc-item-meta p { display: inline; margin: 0; }

/* Payment block — no standalone box (the section heading + form layout
   provide the framing; the white card / border / shadow are removed). */
.woocommerce-checkout.checkout #payment {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin-top: 0;
}
.woocommerce-checkout.checkout #payment .payment_methods {
    list-style: none;
    margin: 0 0 var(--space-md);
    padding: 0;
}
.woocommerce-checkout.checkout #payment .payment_methods li {
    margin: 0 0 var(--space-sm);
}
.woocommerce-checkout.checkout #payment .payment_methods li label {
    display: inline;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    margin-left: var(--space-xs);
}
.woocommerce-checkout.checkout #payment .payment_box {
    background: var(--color-cream);
    border-radius: var(--border-radius);
    padding: var(--space-md);
    margin-top: var(--space-sm);
    font-size: var(--text-sm);
}
.woocommerce-checkout.checkout #place_order {
    width: 100%;
    background-color: var(--color-raspberry-red);
    color: var(--color-vanilla);
    border: 2px solid var(--color-raspberry-red);
    border-radius: 9999px;
    padding: var(--space-md) var(--space-lg);
    font-family: inherit;
    font-size: var(--text-md);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    cursor: pointer;
    transition: background-color var(--transition-fast);
    margin-top: var(--space-md);
}
.woocommerce-checkout.checkout #place_order:hover {
    background-color: var(--color-chocolate-brown);
    border-color: var(--color-chocolate-brown);
}

/* ===========================================================================
   CART PAGE — reuses the checkout shell (.checkout grid + .checkout__summary).
   Line items render as branded card-rows in the left column; totals sit in the
   summary card on the right, mirroring form-checkout.php.
   =========================================================================== */
.woocommerce-cart .checkout.cart {
    /* inherits .checkout's 1.2fr/0.8fr grid, gap and align-items */
}
.woocommerce-cart .cart__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.woocommerce-cart .cart__row {
    display: grid;
    grid-template-columns: 72px 1fr auto auto auto;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--color-white);
    border: 1.5px solid var(--color-biscuit, #E8D4A8);
    border-radius: var(--border-radius-lg);
}
.woocommerce-cart .cart__row-thumb img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--border-radius);
    display: block;
}
.woocommerce-cart .cart__row-name {
    font-weight: 600;
    color: var(--color-chocolate-brown);
    line-height: 1.35;
}
.woocommerce-cart .cart__row-name a { color: inherit; text-decoration: none; }
.woocommerce-cart .cart__row-name a:hover { color: var(--color-golden-bun); }
.woocommerce-cart .cart__row-name .wc-item-meta,
.woocommerce-cart .cart__row-name dl.variation {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--color-text-muted);
}
.woocommerce-cart .cart__row-name .wc-item-meta p,
.woocommerce-cart .cart__row-name dl.variation dd { margin: 0; }
.woocommerce-cart .cart__row-price {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: right;
    white-space: nowrap;
}
.woocommerce-cart .cart__row-price-each {
    display: block;
    font-size: var(--text-xs);
    opacity: 0.7;
}
.woocommerce-cart .cart__row-qty .quantity { margin: 0; }
.woocommerce-cart .cart__row-qty input.qty {
    width: 64px;
    min-height: 44px;
    text-align: center;
    padding: 8px;
    border: 1.5px solid var(--color-biscuit, #E8D4A8);
    border-radius: var(--border-radius);
    background: var(--color-white);
    font-size: var(--text-sm);
}
.woocommerce-cart .cart__row-subtotal {
    font-weight: 700;
    color: var(--color-chocolate-brown);
    white-space: nowrap;
    text-align: right;
}
.woocommerce-cart .cart__row-remove .remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--border-radius-full);
    background: var(--color-cream);
    color: var(--color-raspberry-red);
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.woocommerce-cart .cart__row-remove .remove:hover {
    background: var(--color-raspberry-red);
    color: var(--color-white);
}

/* Coupon + update-cart actions row */
.woocommerce-cart .cart__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}
.woocommerce-cart .cart__coupon {
    display: flex;
    gap: var(--space-sm);
    flex: 1 1 280px;
}
.woocommerce-cart .cart__coupon .checkout__input { flex: 1 1 auto; min-height: 44px; }
.woocommerce-cart .cart__update { margin-left: auto; }

/* WooCommerce's woocommerce-layout.css floats `.cart_totals` right at 48% and
   adds a `.cart-collaterals` clearfix — inside our single-column summary card
   that shoves the totals into the right half and leaves the left empty. Reset
   to full width so the totals fill the card. */
.woocommerce-cart .cart__summary .cart-collaterals,
.woocommerce-cart .cart__summary .cart_totals {
    width: 100%;
    float: none;
    margin: 0;
}
.woocommerce-cart .cart__summary .cart-collaterals::before,
.woocommerce-cart .cart__summary .cart-collaterals::after {
    content: none;
}
.woocommerce-cart .cart__summary .cart_totals > h2 { /* WC's "Cart totals" heading — redundant beside our "Order Summary" title */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Summary card — reuse .checkout__summary; restyle the WC totals table to
   match the checkout review (borderless rows, big total, raspberry button). */
.woocommerce-cart .cart__summary .cart_totals table,
.woocommerce-cart .cart__summary .shop_table {
    width: 100%;
    border: 0;
    margin: 0;
    border-collapse: collapse;
}
.woocommerce-cart .cart__summary .cart_totals th,
.woocommerce-cart .cart__summary .cart_totals td {
    border: 0;
    padding: var(--space-sm) 0;
    font-size: var(--text-sm);
    text-align: left;
}
.woocommerce-cart .cart__summary .cart_totals td { text-align: right; }
.woocommerce-cart .cart__summary .cart_totals .order-total th,
.woocommerce-cart .cart__summary .cart_totals .order-total td {
    border-top: 2px solid var(--color-golden-bun);
    padding-top: var(--space-md);
    font-size: var(--text-lg);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.woocommerce-cart .cart__summary .wc-proceed-to-checkout { margin-top: var(--space-lg); padding: 0; }
.woocommerce-cart .cart__summary .wc-proceed-to-checkout .checkout-button {
    display: block;
    width: 100%;
    text-align: center;
    background-color: var(--color-raspberry-red);
    color: var(--color-vanilla);
    border: 2px solid var(--color-raspberry-red);
    border-radius: 9999px;
    padding: var(--space-md) var(--space-lg);
    font-size: var(--text-md);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: background-color var(--transition-fast);
}
.woocommerce-cart .cart__summary .wc-proceed-to-checkout .checkout-button:hover {
    background-color: var(--color-chocolate-brown);
    border-color: var(--color-chocolate-brown);
}

@media (max-width: 768px) {
    .woocommerce-cart .cart__row {
        grid-template-columns: 64px 1fr auto;
        grid-template-areas:
            "thumb info remove"
            "thumb qty  subtotal";
        row-gap: var(--space-sm);
    }
    .woocommerce-cart .cart__row-thumb { grid-area: thumb; }
    .woocommerce-cart .cart__row-info { grid-area: info; }
    .woocommerce-cart .cart__row-price { display: none; }
    .woocommerce-cart .cart__row-qty { grid-area: qty; }
    .woocommerce-cart .cart__row-subtotal { grid-area: subtotal; align-self: center; }
    .woocommerce-cart .cart__row-remove { grid-area: remove; justify-self: end; }
}

/* WC notice + error banners */
.woocommerce-checkout .woocommerce-NoticeGroup,
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info {
    list-style: none;
    padding: var(--space-md) var(--space-lg);
    margin: 0 0 var(--space-md);
    border-radius: var(--border-radius);
    background: var(--color-cream);
    border-left: 4px solid var(--color-golden-bun);
    font-size: var(--text-sm);
}
.woocommerce-checkout .woocommerce-error { border-left-color: var(--color-raspberry-red); background: #fbe5e5; }

/* On a validation error, WC's checkout.js prepends
   `.woocommerce-NoticeGroup-checkout` as the first child of `form.checkout`.
   That form is a 2-column grid (1.2fr / 0.8fr), so the injected notice would
   otherwise grab the first grid cell and shove the form into the narrow
   summary column. Span it across both columns so it sits above the layout. */
.checkout.woocommerce-checkout > .woocommerce-NoticeGroup {
    grid-column: 1 / -1;
    margin-bottom: var(--space-xl);
}

/* Order-summary line: thumbnail + name side-by-side */
.woocommerce-checkout.checkout .cb-review-line {
    display: flex;
    gap: var(--space-md);
    align-items: center;
}
.woocommerce-checkout.checkout .cb-review-line__thumb {
    flex: 0 0 56px;
}
.woocommerce-checkout.checkout .cb-review-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}
.woocommerce-checkout.checkout .cb-review-line__body {
    flex: 1;
    min-width: 0;
    font-size: var(--text-sm);
}
.woocommerce-checkout.checkout .cb-review-line__body .product-quantity {
    color: var(--color-chocolate-brown);
    font-weight: 600;
}

/* WP nav menu compatibility — alias native menu link selectors to brand classes */
.footer__col .footer__list a,
.footer__col .menu a {
    /* Same look as .footer__link without needing custom Walker. */
    color: var(--color-vanilla);
    text-decoration: none;
    font-size: var(--text-sm);
    transition: opacity var(--transition-fast);
}
.footer__col .footer__list a:hover,
.footer__col .menu a:hover {
    opacity: 0.7;
}
.footer__col .footer__list li,
.footer__col .menu li {
    margin: 0 0 var(--space-xs);
    list-style: none;
}

/* Footer logo — match the original static-design proportions (smaller wordmark, no background container). */
.footer__logo {
    display: inline-block;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    margin-bottom: var(--space-md);
}
.footer__logo-img {
    height: 44px !important;
    width: auto !important;
    max-height: 44px !important;
    display: block;
}

/* WooCommerce breadcrumb — restyled to match the brand product-detail
   breadcrumb that used to sit above the H1. Uses ✦ separators in the
   golden-bun colour. */
.woocommerce .woocommerce-breadcrumb,
nav.woocommerce-breadcrumb {
    max-width: var(--container-max);
    margin: var(--space-xl) auto var(--space-md);
    padding: 0 var(--space-xl);
    font-size: var(--text-sm);
    color: var(--color-chocolate-brown);
    letter-spacing: 0.02em;
    text-transform: lowercase;
}
.woocommerce .woocommerce-breadcrumb a,
nav.woocommerce-breadcrumb a {
    color: var(--color-chocolate-brown);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.woocommerce .woocommerce-breadcrumb a:hover,
nav.woocommerce-breadcrumb a:hover {
    color: var(--color-raspberry-red);
}
/* (Legacy ✦ separator removed — the arrow is now a real markup delimiter,
   `.woocommerce-breadcrumb__sep`, styled further down.) */

/* ===========================================================================
   Single product page — brand styling for the quantity selector + Add to
   cart button (WC defaults overridden to match the original static-design
   product detail spec).
   =========================================================================== */
.woocommerce.single-product form.cart {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin: var(--space-lg) 0 var(--space-xl);
    flex-wrap: nowrap;
}

/* Quantity stepper container — pill, raspberry border, transparent fill. */
.woocommerce.single-product form.cart .quantity {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1.5px solid var(--color-chocolate-brown);
    border-radius: 9999px;
    background: var(--color-white);
    overflow: hidden;
    padding: 4px 8px;
    height: 52px;
}
.woocommerce.single-product form.cart .quantity label.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.woocommerce.single-product form.cart .quantity input.qty,
.woocommerce.single-product form.cart input.qty {
    width: 56px !important;
    height: 100%;
    border: none;
    background: transparent;
    text-align: center;
    font-family: inherit;
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--color-chocolate-brown);
    box-shadow: none;
    -moz-appearance: textfield;
}
.woocommerce.single-product form.cart input.qty::-webkit-outer-spin-button,
.woocommerce.single-product form.cart input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.woocommerce.single-product form.cart input.qty:focus {
    outline: none;
}
.woocommerce.single-product form.cart .quantity .cb-qty__btn {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--color-chocolate-brown);
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    padding: 0;
    user-select: none;
}
.woocommerce.single-product form.cart .quantity .cb-qty__btn:hover {
    background: var(--color-chocolate-brown);
    color: var(--color-white);
}
.woocommerce.single-product form.cart .quantity .cb-qty__btn:active {
    transform: scale(0.92);
}

/* Add-to-cart button — matches the sitewide .btn.btn--primary (golden-bun
   pill) so it's consistent with every other primary button on the site.
   Sits on the right of the row, opposite the quantity stepper. */
.woocommerce.single-product form.cart .button,
.woocommerce.single-product form.cart button.single_add_to_cart_button {
    flex: 0 0 auto;
    background-color: var(--color-golden-bun);
    color: var(--color-white);
    border: 1.5px solid var(--color-golden-bun);
    border-radius: var(--border-radius-full);
    padding: var(--space-md) var(--space-xl);
    height: 52px;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
}
.woocommerce.single-product form.cart .button:hover,
.woocommerce.single-product form.cart button.single_add_to_cart_button:hover {
    background-color: var(--color-chocolate-brown);
    border-color: var(--color-chocolate-brown);
    color: var(--color-white);
}

/* "Loading" / "added" states on the AJAX add button. */
.woocommerce.single-product form.cart .single_add_to_cart_button.loading::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-top-color: transparent;
    margin-left: 8px;
    animation: cb-spin 0.6s linear infinite;
}
@keyframes cb-spin { to { transform: rotate(360deg); } }

/* ===========================================================================
   Checkout — flatten the order-summary table + payment box per design.
   =========================================================================== */

/* Order Summary table — strip every border, keep only the line items spacing. */
.woocommerce-checkout.checkout .shop_table,
.woocommerce-checkout.checkout .woocommerce-checkout-review-order-table,
.woocommerce-checkout.checkout .woocommerce-checkout-review-order-table thead,
.woocommerce-checkout.checkout .woocommerce-checkout-review-order-table tbody,
.woocommerce-checkout.checkout .woocommerce-checkout-review-order-table tfoot,
.woocommerce-checkout.checkout .woocommerce-checkout-review-order-table tr,
.woocommerce-checkout.checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout.checkout .woocommerce-checkout-review-order-table td {
    border: none !important;
    background: transparent !important;
}
.woocommerce-checkout.checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout.checkout .woocommerce-checkout-review-order-table td {
    padding: 10px 0;
}

/* Payment section — make it visually flush with the surrounding sidebar
   instead of looking like a separate boxed panel. */
.woocommerce-checkout.checkout #payment,
.woocommerce-checkout.checkout #payment .payment_methods,
.woocommerce-checkout.checkout #payment .payment_box {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.woocommerce-checkout.checkout #payment {
    margin-top: var(--space-md) !important;
}
.woocommerce-checkout.checkout #payment .payment_methods li {
    padding: 0;
    margin-bottom: var(--space-sm);
}
.woocommerce-checkout.checkout #payment .payment_box {
    margin-top: var(--space-sm) !important;
    font-size: var(--text-sm);
}
.woocommerce-checkout.checkout #payment .form-row.place-order {
    padding: 0;
    margin-top: var(--space-md);
}

/* ===========================================================================
   Interactive icing drips — replaces the static SVG drip backgrounds with
   a canvas-driven wave (assets/js/icing-drip.js). Each drip element gets a
   <canvas class="cb-drip__canvas"> child injected by the script; this CSS
   wipes out the prior background-image so the canvas paints the surface.
   Customise per-drip with `data-cb-drip-color="#..."` or the
   `--cb-drip-color` CSS variable on the host element.
   =========================================================================== */
/* Kill the original static-SVG drip masks + inherited fills — the canvas
   in [data-cb-drip-init] paints the shape now. Positioning, height, and
   transform stay as the original rules defined them so the drip still
   hangs above the section / under the footer like before. */
.section-drip,
.section-drip--abstract,
.section-drip--down,
.section-drip--subtle,
.section-drip--tall,
.footer__drip,
.page-header::after {
	-webkit-mask: none !important;
	        mask: none !important;
	background-image: none !important;
	background-color: transparent !important;
	overflow: hidden;
	pointer-events: auto; /* so the canvas can capture mousemove/touch */
}

.cb-drip__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
}

/* Footer drip — the canvas fills the TOP of the element down to the wavy
   edge. Set that fill to biscuit-warm so it reads as a continuation of the
   section above (merging into it), with the wave descending into the dark
   footer below. `--cb-drip-color` is the wave's fill colour (read by
   icing-drip.js); without it the footer drip fell back to cream and left a
   light band between the section above and the footer. */
.footer__drip {
	--cb-drip-color: var(--ed-biscuit-warm);
}


/* ============================================================
   CONTACT — Gravity Forms brand skin
   Form #1 is embedded inside .contact-form-card. GF ships its own
   "orbital" theme CSS, so we remap its markup onto the patisserie
   form system to match static-design/contact.php: cream inputs,
   italic gold editorial labels, and a full-width golden-bun submit.
   ============================================================ */
.contact-form-card .gform_wrapper,
.contact-form-card .gform_wrapper form {
	margin: 0;
}

/* Two-up name/email, full-width for the rest — matches the static grid. */
.contact-form-card .gform_wrapper .gform_fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-md);
}
.contact-form-card .gform_wrapper .gfield {
	grid-column: 1 / -1;
	margin: 0;
}
.contact-form-card .gform_wrapper .gfield--half-left  { grid-column: 1 / 2; }
.contact-form-card .gform_wrapper .gfield--half-right { grid-column: 2 / 3; }

/* Labels — mirror .contact-form-card .form-label (italic gold). */
.contact-form-card .gform_wrapper .gfield_label {
	font-family: var(--font-editorial);
	font-style: italic;
	font-weight: 400;
	color: var(--ed-gold-deep);
	text-transform: none;
	letter-spacing: 0.02em;
	font-size: 0.9rem;
	margin-bottom: 6px;
}
.contact-form-card .gform_wrapper .gfield_required { color: var(--color-raspberry-red); }

/* Inputs / textarea / select — mirror .contact-form-card .form-input. */
.contact-form-card .gform_wrapper input:not([type="submit"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.contact-form-card .gform_wrapper textarea,
.contact-form-card .gform_wrapper select {
	width: 100%;
	background: var(--ed-cream);
	border: 1px solid rgba(60, 38, 18, 0.18);
	border-radius: 8px;
	padding: 14px 18px;
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--ed-ink);
	box-shadow: none;
	transition: border-color 220ms ease;
}
.contact-form-card .gform_wrapper input:focus,
.contact-form-card .gform_wrapper textarea:focus,
.contact-form-card .gform_wrapper select:focus {
	border-color: var(--ed-gold);
	outline: none;
	box-shadow: none;
}
.contact-form-card .gform_wrapper textarea {
	min-height: 140px;
	resize: vertical;
}

/* Select chevron — same asset as .checkout__select / .form-input selects. */
.contact-form-card .gform_wrapper select {
	appearance: none;
	-webkit-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 18px center;
	padding-right: 44px;
}

/* Submit — mirror .btn.btn--primary.btn--large, full width.
   GF's orbital theme styles the button via an element+attribute selector
   (higher specificity) and CSS custom properties, so we win the cascade
   with a doubled-class selector + targeted !important on the visuals. */
.contact-form-card .gform_wrapper .gform_footer {
	margin: var(--space-lg) 0 0;
	padding: 0;
	display: block;
}
.contact-form-card .gform_wrapper .gform_footer input.gform_button,
.contact-form-card .gform_wrapper input.gform_button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	margin: 0 !important;
	padding: var(--space-lg) var(--space-2xl) !important;
	font-family: var(--font-body) !important;
	font-weight: 600 !important;
	font-size: var(--text-base) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	line-height: 1 !important;
	border-radius: var(--border-radius-full) !important;
	border: 1.5px solid var(--color-golden-bun) !important;
	background: var(--color-golden-bun) !important;
	color: var(--color-white) !important;
	cursor: pointer;
	transition: all var(--transition-fast);
}
.contact-form-card .gform_wrapper .gform_footer input.gform_button:hover,
.contact-form-card .gform_wrapper input.gform_button.button:hover {
	background: var(--color-chocolate-brown) !important;
	border-color: var(--color-chocolate-brown) !important;
}

/* Validation copy on-brand. */
.contact-form-card .gform_wrapper .gfield_validation_message,
.contact-form-card .gform_wrapper .validation_message {
	color: var(--color-raspberry-red);
	font-size: var(--text-sm);
	background: none;
	border: none;
	padding: 4px 0 0;
}
.contact-form-card .gform_wrapper .gfield_error input,
.contact-form-card .gform_wrapper .gfield_error textarea,
.contact-form-card .gform_wrapper .gfield_error select {
	border-color: var(--color-raspberry-red);
}


/* ----- Checkout pickup step — intro + slot helper (matches static "Collection Location") ----- */
.cb-pickup-step__intro {
	font-size: var(--text-sm);
	margin-bottom: var(--space-lg);
	color: var(--color-chocolate-brown);
}
.cb-pickup-help {
	display: block;
	font-size: var(--text-xs);
	color: var(--color-text-light);
	margin-top: var(--space-xs);
}


/* ----- Contact details — icon rows (matches static-design/contact.php) ----- */
.cb-contact-details {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	margin-bottom: var(--space-xl);
}
.cb-contact-detail {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	margin: 0;
	font-size: var(--text-md);
}
.cb-contact-detail::before {
	content: "";
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	background-color: var(--color-golden-bun);
	-webkit-mask: var(--cb-icon) center / contain no-repeat;
	mask: var(--cb-icon) center / contain no-repeat;
}
.cb-contact-detail a {
	color: var(--color-chocolate-brown);
	text-decoration: none;
	transition: color var(--transition-fast);
}
.cb-contact-detail a:hover { color: var(--color-golden-bun); }
.cb-contact-detail--email {
	--cb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
}
.cb-contact-detail--phone {
	--cb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
.cb-contact-detail--instagram {
	--cb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cline x1='17.5' y1='6.5' x2='17.51' y2='6.5'/%3E%3C/svg%3E");
}


/* ===========================================================================
   Search overlay — UI fixes (May 2026)
   1. Input text was white on a cream form background → dark, readable colour
   2. Unselected scope-toggle contrast was too low → bump to chocolate-brown
   3. Inconsistent vertical padding on the form / input → equal top/bottom
   4. Three × buttons clustered (native search clear + custom clear + close)
      → suppress the WebKit-native clear button so only the custom one shows
   =========================================================================== */

/* 1. Input text colour + native autofill */
.search-overlay__input,
.search-overlay__input:focus,
.search-overlay__input::placeholder {
	color: var(--color-chocolate-brown, #5C3A1E);
}
.search-overlay__input::placeholder {
	color: rgba(92, 58, 30, 0.55);
}
.search-overlay__input:-webkit-autofill {
	-webkit-text-fill-color: var(--color-chocolate-brown, #5C3A1E);
	box-shadow: 0 0 0 1000px var(--ed-cream, #FAF1DB) inset;
}

/* Search icon + clear button tinted to match the input ink */
.search-overlay__icon,
.search-overlay__clear,
.search-overlay__close {
	color: rgba(92, 58, 30, 0.6);
}
.search-overlay__clear:hover,
.search-overlay__close:hover,
.search-overlay__icon { color: var(--color-chocolate-brown, #5C3A1E); }

/* 2. Scope-toggle contrast: darker pill background + chocolate text */
.search-overlay__scope {
	background: rgba(92, 58, 30, 0.08);
	padding: 4px;
}
.search-overlay__scope-option span {
	color: rgba(92, 58, 30, 0.7);
	font-weight: 600;
}
.search-overlay__scope-option:hover span {
	color: var(--color-chocolate-brown, #5C3A1E);
}
.search-overlay__scope-option input:checked + span {
	background: var(--color-raspberry-red, #7F082F);
	color: var(--color-vanilla, #FFF7E2);
	box-shadow: 0 2px 6px rgba(127, 8, 47, 0.25);
}

/* 3. Form padding — equal top/bottom inside the pill; input-wrap no longer
   needs its own border (the pill form provides the visual frame) */
.search-overlay__form {
	padding: 12px 18px;
	gap: var(--space-md);
	align-items: stretch;
}
.search-overlay__input-wrap {
	border-bottom: 0;
	padding: 0 var(--space-sm);
	min-width: 240px;
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}
.search-overlay__input {
	padding: 10px 0;
	line-height: 1.2;
}

/* 4. Hide the WebKit-native search clear button so only our custom × shows */
.search-overlay__input::-webkit-search-cancel-button,
.search-overlay__input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
	display: none;
}
.search-overlay__input { -moz-appearance: textfield; appearance: textfield; }

/* Buttons inside the pill — bigger hit area + clearer separation */
.search-overlay__clear,
.search-overlay__close {
	width: 36px;
	height: 36px;
	border-radius: 9999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.search-overlay__clear:hover,
.search-overlay__close:hover {
	background: rgba(92, 58, 30, 0.08);
}

/* Slight visual break between the input cluster and the close button */
.search-overlay__close {
	margin-left: var(--space-xs);
}

/* Submit button — sits inside the pill, doesn't need a heavy border */
.search-overlay__form .search-overlay__submit {
	border-radius: 9999px;
	padding: 8px 22px;
	font-size: var(--text-sm);
}


/* ===========================================================================
   Search overlay — layout pass 2
   - Stack the form: scope toggle centred on its own row, input/submit/close
     on the row below.
   - Make the input itself the pill (100px radius) — the form no longer needs
     its own pill background since the input is now the focal frame.
   =========================================================================== */

.search-overlay__form {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-md);
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0 var(--space-xl);
}

/* Scope toggle — centred horizontally on its own row */
.search-overlay__scope {
	align-self: center;
	margin: 0 auto;
}

/* The input wrap is now the visible pill */
.search-overlay__input-wrap {
	flex: 1;
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	background: var(--ed-cream, #FAF1DB);
	border: 1px solid rgba(60, 38, 18, 0.12);
	border-radius: 100px;
	box-shadow: var(--ed-shadow-md, 0 8px 24px rgba(0,0,0,0.08));
	padding: 8px 18px 8px 22px;
	min-width: 260px;
}
.search-overlay__input {
	background: transparent;
	border: 0;
	padding: 10px 0;
}

/* Wrap input + submit + close on a single row beneath the scope toggle */
.search-overlay__form > .search-overlay__input-wrap,
.search-overlay__form > .search-overlay__submit,
.search-overlay__form > .search-overlay__close {
	align-self: center;
}
.search-overlay__form {
	display: grid;
	grid-template-columns: 1fr auto auto;
	grid-template-areas:
		"scope scope scope"
		"input submit close";
	column-gap: var(--space-sm);
	row-gap: var(--space-md);
}
.search-overlay__scope        { grid-area: scope;  justify-self: center; }
.search-overlay__input-wrap   { grid-area: input;  width: 100%; }
.search-overlay__submit       { grid-area: submit; }
.search-overlay__close        { grid-area: close;  align-self: center; }


/* ===========================================================================
   Search overlay — restore single-row (inline) layout.
   Supersedes the "layout pass 2" grid/column stacking above so the scope
   toggle · input pill · submit · close sit inline on one row again, while
   keeping the readability + pill cosmetics from the passes above.
   =========================================================================== */
.search-overlay__form {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--space-md);
	grid-template-columns: none;
	grid-template-areas: none;
}
.search-overlay__scope,
.search-overlay__submit,
.search-overlay__close { flex: 0 0 auto; align-self: center; }
.search-overlay__input-wrap { flex: 1 1 auto; min-width: 0; width: auto; }

@media (max-width: 768px) {
	.search-overlay__form { flex-wrap: wrap; }
	.search-overlay__input-wrap { flex-basis: 100%; }
}

.search-overlay__input {
	background: transparent;
	border: 0;
	padding: 5px 13px;
	border-radius: 100px;
}


/* ===========================================================================
   Account auth — fix submit button overflow + privacy-text spacing
   - Submit button on login/register was visually pushing past the card's
     horizontal padding (.btn--full + flex math + box-shadow). Pin it cleanly
     inside the card with explicit box-sizing + max-width and a top margin.
   - WC's <p class="woocommerce-privacy-policy-text"> on the register form
     was rendering tight against the submit button. Add breathing room.
   =========================================================================== */

.account-auth-card form .btn,
.account-auth-card form button[type="submit"] {
	box-sizing: border-box;
	max-width: 100%;
	margin-top: var(--space-lg);
	margin-bottom: 0;
}

/* WC injects the privacy notice with the woocommerce_register_form hook —
   the default has no bottom margin and so collides with the submit button. */
.account-auth-card .woocommerce-privacy-policy-text,
.account-auth-card .woocommerce-privacy-policy-text p {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--color-text-light);
	line-height: 1.5;
	margin: 0 0 var(--space-lg);
}

/* The register card's account-auth-card__note (the generated-password
   variant) also benefits from a clearer bottom margin before the button. */
.account-auth-card__note { margin: 0 0 var(--space-lg); }

/* Give the card a touch more bottom padding so the pill submit button has
   room to breathe against the card's lower edge. */
.account-auth-card {
	padding-bottom: calc(var(--space-2xl) + var(--space-xs));
}

/* ===========================================================================
   Build-a-Box polish (May 2026) — reverted set
   Kept: 8 (step-progress centred), 10 (builder-step__desc max-width removed).
   Reverted: 1, 2, 3 (checkout) + 4, 5, 6, 7, 9.
   =========================================================================== */

/* --- 8. Step-progress — full container width, evenly spaced --- */
.step-progress {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	justify-content: space-between;
}
/* Kill the single full-width line; replaced by per-gap connectors below */
.step-progress::before {
	content: none;
}
.step-progress__item {
	flex: 1 1 0;
}
/* Draw connector only between adjacent circles — not before step 1 or after the last step.
   Each item is 1/3 of the container width (W). The circle (44 px) is centred in its item.
   left:  calc(-50% + 22px) → right edge of the previous circle
   right: calc(50%  + 22px) → left  edge of this circle                                    */
.step-progress__item + .step-progress__item::before {
	content: '';
	position: absolute;
	left: calc(-50% + 22px);
	right: calc(50% + 22px);
	top: 22px;
	height: 2px;
	background: var(--color-border);
	z-index: 0;
}

/* --- 10. Drop max-width on .builder-step__desc --- */
.builder-step__desc { max-width: none; }




/* ===========================================================================
   Payment section — moved out of the right-column order review and rendered
   as its own card under "Contact & Billing Details" in form-checkout.php.
   Strip the standalone box styling that the legacy CSS gave to #payment
   (border, white background) when it sits inside .checkout__form-section--payment,
   and replace it with the same cream-card treatment the pickup-step uses.
   Strictly scoped — does NOT affect anything in .checkout__summary.
   =========================================================================== */

.checkout__form-section--payment #payment {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
}

.checkout__form-section--payment #payment .payment_methods {
	list-style: none;
	margin: 0 0 var(--space-md);
	padding: 0;
}
.checkout__form-section--payment #payment .payment_methods > li {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 4px 0;
	margin: 0 0 6px;
}
.checkout__form-section--payment #payment .payment_methods > li:has(input:checked) {
	border: 0;
	box-shadow: none;
}
.checkout__form-section--payment #payment .payment_methods > li > label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	color: var(--color-chocolate-brown);
	font-size: var(--text-sm);
	text-transform: none;
	letter-spacing: 0;
	margin: 0;
	cursor: pointer;
}
.checkout__form-section--payment #payment .payment_methods > li > input[type="radio"] {
	accent-color: var(--color-raspberry-red);
}
.checkout__form-section--payment #payment .payment_methods > li img {
	max-height: 24px;
	width: auto;
	display: inline-block;
	vertical-align: middle;
}
.checkout__form-section--payment #payment .payment_box {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 14px 0 0;
	margin: 0;
	font-size: var(--text-sm);
	color: var(--color-chocolate-brown);
}
.checkout__form-section--payment #payment .payment_box p:last-child { margin-bottom: 0; }

/* Terms-and-conditions block + the Place Order button container */
.checkout__form-section--payment #payment .place-order,
.checkout__form-section--payment #payment .form-row.place-order {
	margin-top: var(--space-lg);
	padding: 0;
	border: 0;
}
.checkout__form-section--payment #payment .woocommerce-terms-and-conditions-wrapper {
	margin-bottom: var(--space-md);
	font-size: var(--text-sm);
	color: var(--color-chocolate-brown);
}

/* Place Order pill — same raspberry the rest of the brand uses for primary CTAs */
.checkout__form-section--payment #payment #place_order {
	width: 100%;
	background-color: var(--color-raspberry-red);
	color: var(--color-vanilla);
	border: 2px solid var(--color-raspberry-red);
	border-radius: 9999px;
	padding: 14px var(--space-lg);
	font-family: inherit;
	font-size: var(--text-md);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	cursor: pointer;
	transition: background-color var(--transition-fast);
	margin: 0;
}
.checkout__form-section--payment #payment #place_order:hover {
	background-color: var(--color-chocolate-brown);
	border-color: var(--color-chocolate-brown);
}






/* ===========================================================================
   WooCommerce breadcrumb — match the .ethos-marquee block aesthetic exactly:
   golden-bun band, cream text, editorial caps, with arrows between crumbs
   instead of the marquee's pink round dots. Static (no scroll animation).
   =========================================================================== */

.woocommerce .woocommerce-breadcrumb,
nav.woocommerce-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-md);

	width: 100%;
	max-width: none;
	margin: 0 0 var(--space-lg);
	padding: var(--space-md) var(--space-xl);

	background: var(--ed-gold);
	color: var(--ed-cream);

	font-family: var(--font-editorial, var(--font-display, var(--font-body)));
	font-weight: 700;
	font-size: clamp(1rem, 1.6vw, 1.3rem);
	text-transform: capitalize;
	letter-spacing: 0.04em;
	line-height: 1.4;
	text-align: center;
}

.woocommerce .woocommerce-breadcrumb a,
nav.woocommerce-breadcrumb a {
	color: var(--ed-cream);
	text-decoration: none;
	transition: color var(--transition-fast);
	white-space: nowrap;
}
.woocommerce .woocommerce-breadcrumb a:hover,
nav.woocommerce-breadcrumb a:hover {
	color: var(--ed-pink);
}

/* Arrow delimiter — a real markup element (WC `delimiter`), so it renders
   between every crumb including before the unwrapped current-page text. */
.woocommerce-breadcrumb__sep {
	display: inline-block;
	margin: 0; /* flex `gap` on the container already spaces it */
	color: var(--ed-pink);
	font-weight: 400;
	letter-spacing: 0;
	font-size: 1em;
}

/* "You are here" — WC outputs the current page as a <strong> in some
   contexts (shop/category) and a bare text node in others (single product).
   Only the <strong> form is targetable; give it the soft underline.
   (We deliberately do NOT use span:last-child here — the last *element*
   child is the trailing separator span, not the current page.) */
.woocommerce-breadcrumb > strong {
	color: var(--ed-cream);
	font-weight: 800;
	border-bottom: 2px solid var(--ed-pink);
	padding-bottom: 1px;
}

@media (max-width: 640px) {
	.woocommerce .woocommerce-breadcrumb,
	nav.woocommerce-breadcrumb {
		padding: var(--space-sm) var(--space-md);
		font-size: 0.95rem;
		gap: var(--space-sm);
	}
}


/* WC cart-item variation values (.variation dd) — lighter weight + a notch
   smaller than the surrounding row so flavour breakdowns / pickup details
   read as secondary metadata. */
.woocommerce td.product-name dl.variation dd,
.woocommerce-cart td.product-name dl.variation dd,
.woocommerce-checkout td.product-name dl.variation dd {
	font-weight: 300;
	font-size: smaller; /* one step down from the surrounding context */
}


/* ===========================================================================
   Sitewide input baseline — matches the "Collection Location" pill style
   used in the .cb-pickup-step on checkout.

   White background, biscuit border, 10px radius, generous 12×16 padding,
   50px minimum hit area, Avenir body type. Focus state lifts to golden-bun
   with a soft 3px outer ring. Brand chevron SVG on every <select>.

   Scoped to the frontend body only — the block editor iframe
   (.editor-styles-wrapper), WP admin (body.wp-admin), and the WC admin
   "Chouxbox" pages (.cb-pickup admin) keep their own field styles. The
   search-overlay pill, location modal, and similar bespoke widgets opt
   out via `:not(...)` so we don't clobber their tuned variants.
   =========================================================================== */

body:not(.wp-admin) input[type="text"],
body:not(.wp-admin) input[type="email"],
body:not(.wp-admin) input[type="tel"],
body:not(.wp-admin) input[type="number"],
body:not(.wp-admin) input[type="password"],
body:not(.wp-admin) input[type="url"],
body:not(.wp-admin) input[type="search"],
body:not(.wp-admin) input[type="date"],
body:not(.wp-admin) input[type="time"],
body:not(.wp-admin) input[type="datetime-local"],
body:not(.wp-admin) input[type="month"],
body:not(.wp-admin) input[type="week"],
body:not(.wp-admin) textarea,
body:not(.wp-admin) select {
	box-sizing: border-box;
	width: 100%;
	min-height: 50px;
	padding: 12px 16px;
	background-color: var(--color-white, #fff);
	border: 1.5px solid var(--color-biscuit, #E8D4A8);
	border-radius: 10px;
	font-family: var(--font-body, 'avenir-lt-pro', 'Avenir', system-ui, sans-serif);
	font-size: var(--text-md);
	font-weight: 300;
	color: var(--color-chocolate-brown, #5C3A1E);
	line-height: 1.3;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
	box-shadow: none;
}

body:not(.wp-admin) textarea {
	min-height: 120px;
	resize: vertical;
}

body:not(.wp-admin) input[type="text"]:focus,
body:not(.wp-admin) input[type="email"]:focus,
body:not(.wp-admin) input[type="tel"]:focus,
body:not(.wp-admin) input[type="number"]:focus,
body:not(.wp-admin) input[type="password"]:focus,
body:not(.wp-admin) input[type="url"]:focus,
body:not(.wp-admin) input[type="search"]:focus,
body:not(.wp-admin) input[type="date"]:focus,
body:not(.wp-admin) input[type="time"]:focus,
body:not(.wp-admin) input[type="datetime-local"]:focus,
body:not(.wp-admin) input[type="month"]:focus,
body:not(.wp-admin) input[type="week"]:focus,
body:not(.wp-admin) textarea:focus,
body:not(.wp-admin) select:focus {
	outline: none;
	border-color: var(--color-golden-bun, #B7792B);
	box-shadow: 0 0 0 3px rgba(183, 121, 43, 0.18);
}

body:not(.wp-admin) input::placeholder,
body:not(.wp-admin) textarea::placeholder {
	color: rgba(92, 58, 30, 0.45);
}

/* Brand raspberry chevron on every <select> */
body:not(.wp-admin) select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237F082F' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 44px;
	cursor: pointer;
}

/* ---- Opt-outs: bespoke inputs that already have a tuned style ---- */

/* Search overlay pill — keeps its transparent/borderless treatment inside
   the cream pill wrap. */
.search-overlay__input,
body:not(.wp-admin) .search-overlay__input {
	min-height: auto;
	width: 100%;
	border: 0 !important;
	border-radius: 0;
	background: transparent !important;
	padding: 10px 0;
	box-shadow: none !important;
}
.search-overlay__input:focus {
	border-color: transparent !important;
	box-shadow: none !important;
}

/* Cart drawer + tiny qty steppers shouldn't grow to 50px min-height. */
body:not(.wp-admin) .cart-drawer input,
body:not(.wp-admin) .qty,
body:not(.wp-admin) input.qty,
body:not(.wp-admin) .quantity input,
body:not(.wp-admin) .product-detail__qty-value input {
	min-height: auto;
}
body:not(.wp-admin) input.qty,
body:not(.wp-admin) .quantity input[type="number"] {
	width: auto;
	min-width: 60px;
	padding: 10px 12px;
}

/* The location-modal options are <button>s styled separately — make sure
   the new rules don't somehow leak into them via descendant selectors. */
.location-option,
.location-option * {
	min-height: 0;
}

/* WC admin "Chouxbox" pages live on the frontend body but are admin chrome
   — keep them tight by opting out. */
body:not(.wp-admin) .cb-pickup input,
body:not(.wp-admin) .cb-pickup select,
body:not(.wp-admin) .cb-pickup textarea {
	min-height: 40px;
	padding: 8px 12px;
	font-size: 13px;
}


/* ===========================================================================
   Page-header drip (Checkout + Contact) — a cream icing drip pours DOWN from
   the bottom edge of the cream page-header into the section below, matching
   the Choux & Macarons page's drippy header transition. The canvas fills the
   header's cream colour at the top and the wavy bottom edge reveals the
   section beneath. Scoped to .page-header--has-drip so no other header is
   affected.
   =========================================================================== */
.page-header--has-drip {
	position: relative;
	overflow: visible;
}
.page-header--has-drip .section-drip--down {
	position: absolute;
	top: 100%;
	bottom: auto;
	left: 0;
	right: 0;
	height: 120px;
	transform: none;
	z-index: 3;
	pointer-events: none;
	--cb-drip-color: var(--color-cream, #FAF1DB); /* matches the cream header */
}
/* Clearance so the drip's overhang doesn't sit on top of the first content. */
.section.section--checkout {
	padding-top: 110px !important;
}
.page-contact .page-header--has-drip + * {
	padding-top: 140px;
}


/* Stripe payment method tile + UPE form — strip all box styling so the card
   fields sit flush in the flattened Payment section. */
.woocommerce-checkout.checkout .wc_payment_method.payment_method_stripe {
	border: none;
	box-shadow: none;
	background: none;
}
.woocommerce-checkout.checkout .wc-stripe-upe-form,
#wc-stripe-upe-form,
fieldset#wc-stripe-upe-form,
.checkout__form-section--payment fieldset {
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	min-width: 0 !important;
}

/* Hide WooCommerce notices banner on the checkout page — errors are surfaced
   inline within the form fields instead. */
.woocommerce-checkout .woocommerce-notices-wrapper {
	display: none;
}


/* ===========================================================================
   MY ACCOUNT — login page background + button fix
   =========================================================================== */

/* Warm biscuit background on the logged-out login page. */
.account-auth { background: var(--ed-biscuit-warm) !important; }

/* page-header on login/account pages uses the warm tone. */
.page-header.page-header--account { background: var(--ed-biscuit-warm); }

/* Active auth card: display:flow-root creates a Block Formatting Context so
   the card's height includes ALL children. Scoped to .is-active so the
   inactive panel's display:none (line ~1003) is not overridden. */
.account-auth-card[data-auth-panel].is-active {
	display: flow-root !important;
	padding: var(--space-2xl) !important;
}
/* Submit button: block-level so it definitely contributes to card height. */
.account-auth-card form button[type="submit"],
.account-auth-card form .btn--full {
	display: block !important;
	width: 100%;
	text-align: center;
	box-sizing: border-box;
}


/* ===========================================================================
   MY ACCOUNT — logged-in account area
   =========================================================================== */

/* WooCommerce's default woocommerce.css uses float:left/right on the nav and
   content. Reset those so our grid layout can take over. */
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation,
body.woocommerce-account.logged-in .woocommerce-MyAccount-content {
	float: none !important;
	width: auto !important;
	clear: none !important;
}
/* The .woocommerce shortcode wrapper — remove any WC-added padding/max-width. */
body.woocommerce-account.logged-in .woocommerce {
	max-width: none;
	padding: 0;
	margin: 0;
}

/* Account section wrapper */
.account-area {
	min-height: 60vh;
	padding: var(--space-xl) 0 var(--space-4xl);
	background: linear-gradient(to bottom, var(--ed-cream) 0%, var(--ed-cream) 55%, var(--ed-biscuit-warm) 100%) !important;
}

/* Compact inline header — sits above the content column only, not full-width */
.account-main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}
.account-main__header {
	padding-bottom: var(--space-md);
	border-bottom: 1.5px solid rgba(183, 121, 43, 0.18);
}
.account-main__eyebrow {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-golden-bun-dark, #7a5010);
	margin: 0 0 4px;
}
.account-main__eyebrow strong {
	font-weight: 700;
}
.account-main__title {
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
	font-weight: 800;
	color: var(--color-chocolate-brown);
	margin: 0;
	line-height: 1.1;
}

/* Two-column grid: 220px sidebar + fluid content */
.account-layout {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: var(--space-2xl);
	align-items: start;
}

/* ── Navigation sidebar ── */
.account-nav {
	min-width: 0;
}
.account-nav__menu {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	position: sticky;
	top: calc(80px + var(--space-md));
}
.account-nav__menu ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.account-nav__menu ul li {
	margin: 0 !important;
}
.account-nav__menu ul li a {
	display: flex !important;
	align-items: center;
	gap: 10px;
	padding: 13px var(--space-md) !important;
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	font-weight: 500 !important;
	color: var(--color-chocolate-brown) !important;
	text-decoration: none !important;
	border-bottom: 1px solid var(--color-biscuit-light);
	transition: background var(--transition-fast), color var(--transition-fast);
	line-height: 1.3;
	background: transparent;
}
.account-nav__menu ul li a svg {
	flex-shrink: 0;
	opacity: 0.55;
	transition: opacity var(--transition-fast);
}
.account-nav__menu ul li:last-child a {
	border-bottom: 0;
}
.account-nav__menu ul li a:hover {
	background: var(--color-cream) !important;
	color: var(--color-chocolate-brown) !important;
}
.account-nav__menu ul li a:hover svg { opacity: 1; }
.account-nav__menu ul li.is-active a {
	background: var(--color-golden-bun) !important;
	color: var(--color-white) !important;
	font-weight: 700 !important;
}
.account-nav__menu ul li.is-active a svg { opacity: 1; }
.account-nav__menu ul li.is-active a:hover {
	background: var(--color-golden-bun-dark, #8c5b18) !important;
}
/* Logout */
.account-nav__menu ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--color-raspberry-red) !important;
}
.account-nav__menu ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	background: var(--color-raspberry-red) !important;
	color: var(--color-white) !important;
}
.account-nav__menu ul li.woocommerce-MyAccount-navigation-link--customer-logout.is-active a {
	background: var(--color-raspberry-red) !important;
	color: var(--color-white) !important;
}

/* ── Content panel ── */
.account-content {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-lg);
	box-shadow: var(--shadow-sm);
	padding: var(--space-xl);
	min-width: 0;
}

/* Headings */
.account-content h2,
.account-content h3 {
	font-family: var(--font-display);
	color: var(--color-chocolate-brown);
	margin: 0 0 var(--space-md);
	line-height: 1.2;
}
.account-content h2 { font-size: clamp(1.35rem, 2.5vw, 1.75rem); }
.account-content h3 { font-size: clamp(1.05rem, 1.8vw, 1.3rem); }

/* Dashboard welcome text */
.account-content > p:first-child,
.account-content .woocommerce-MyAccount-content > p:first-child {
	font-size: var(--text-md);
	color: var(--color-chocolate-brown);
	padding: var(--space-md) var(--space-lg);
	background: linear-gradient(135deg, var(--color-cream) 0%, var(--ed-biscuit-warm) 100%);
	border-radius: var(--border-radius);
	border-left: 3px solid var(--color-golden-bun);
	margin-bottom: var(--space-lg);
	line-height: 1.6;
}

/* Notices */
.account-content .woocommerce-message,
.account-content .woocommerce-info,
.account-content .woocommerce-notice {
	background: linear-gradient(135deg, var(--color-cream) 0%, var(--ed-biscuit-warm) 100%);
	border: 1px solid var(--color-border);
	border-left: 3px solid var(--color-golden-bun);
	border-radius: var(--border-radius);
	padding: var(--space-md) var(--space-lg);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--color-chocolate-brown);
	list-style: none;
	margin: 0 0 var(--space-lg);
}
.account-content .woocommerce-message a.button,
.account-content .woocommerce-info a.button {
	float: none;
	display: inline-block;
	margin-left: var(--space-sm);
}
.account-content .woocommerce-message::before,
.account-content .woocommerce-info::before { display: none; }
.account-content .woocommerce-error {
	background: rgba(127, 8, 47, 0.05);
	border: 1px solid rgba(127, 8, 47, 0.18);
	border-left: 3px solid var(--color-raspberry-red);
	border-radius: var(--border-radius);
	padding: var(--space-md) var(--space-lg);
	font-size: var(--text-sm);
	color: var(--color-raspberry-red);
	list-style: none;
	margin: 0 0 var(--space-lg);
}

/* ── Tables: orders, downloads, payment methods ── */
.account-content table.shop_table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	overflow: hidden;
}
.account-content table.shop_table thead {
	background: linear-gradient(135deg, var(--color-cream) 0%, var(--ed-biscuit-warm) 100%);
}
.account-content table.shop_table thead th {
	padding: 11px var(--space-md);
	text-align: left;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	font-size: var(--text-xs);
	color: var(--color-golden-bun-dark, #7a5010);
	border-bottom: 1.5px solid var(--color-border);
	white-space: nowrap;
}
.account-content table.shop_table tbody td {
	padding: 13px var(--space-md);
	border-bottom: 1px solid var(--color-biscuit-light);
	color: var(--color-chocolate-brown);
	vertical-align: middle;
}
.account-content table.shop_table tbody tr:last-child td {
	border-bottom: 0;
}
.account-content table.shop_table tbody tr:hover td {
	background: rgba(250, 241, 219, 0.5);
}
/* Order status badges */
.account-content .order-status,
.account-content mark.order-status {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 9999px;
	font-size: var(--text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background: var(--color-biscuit-light);
	color: var(--color-chocolate-brown);
}
.account-content .order-status.status-processing { background: rgba(183,121,43,0.14); color: #7a5010; }
.account-content .order-status.status-on-hold    { background: rgba(183,121,43,0.10); color: #7a5010; }
.account-content .order-status.status-completed  { background: rgba(46,125,50,0.10); color: #2e7d32; }
.account-content .order-status.status-cancelled,
.account-content .order-status.status-refunded,
.account-content .order-status.status-failed     { background: rgba(127,8,47,0.10); color: var(--color-raspberry-red); }
/* Table action buttons */
.account-content table.shop_table td .button,
.account-content table.shop_table td a.button,
.account-content table.shop_table td a.woocommerce-button,
.account-content .woocommerce-orders-table__cell-order-actions a {
	display: inline-block !important;
	padding: 4px 13px !important;
	background: var(--color-cream) !important;
	color: var(--color-chocolate-brown) !important;
	border: 1.5px solid var(--color-border) !important;
	border-radius: 9999px !important;
	font-family: var(--font-body);
	font-size: var(--text-xs) !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none !important;
	cursor: pointer;
	transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
	margin-right: 4px;
}
.account-content table.shop_table td .button:hover,
.account-content table.shop_table td a.button:hover,
.account-content table.shop_table td a.woocommerce-button:hover,
.account-content .woocommerce-orders-table__cell-order-actions a:hover {
	background: var(--color-golden-bun) !important;
	border-color: var(--color-golden-bun) !important;
	color: var(--color-white) !important;
}
/* Responsive table: WC adds data-title="" td-before labels on mobile */
@media (max-width: 650px) {
	.account-content table.shop_table.shop_table_responsive thead { display: none; }
	.account-content table.shop_table.shop_table_responsive tr {
		display: block;
		border-bottom: 2px solid var(--color-border);
		padding: var(--space-sm) 0;
	}
	.account-content table.shop_table.shop_table_responsive tr:last-child { border-bottom: 0; }
	.account-content table.shop_table.shop_table_responsive td {
		display: grid;
		grid-template-columns: 40% 1fr;
		align-items: center;
		gap: var(--space-sm);
		border-bottom: 1px dashed var(--color-biscuit-light);
		padding: 8px var(--space-sm);
	}
	.account-content table.shop_table.shop_table_responsive td::before {
		content: attr(data-title);
		font-weight: 700;
		font-size: var(--text-xs);
		text-transform: uppercase;
		letter-spacing: 0.06em;
		color: var(--color-golden-bun-dark, #7a5010);
	}
}

/* ── Forms: account details & addresses ── */
.account-content .form-row,
.account-content .woocommerce-EditAccountForm .form-row {
	margin-bottom: var(--space-md);
}
.account-content .form-row label,
.account-content .woocommerce-EditAccountForm .form-row label {
	display: block;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-chocolate-brown);
	margin-bottom: 6px;
}
.account-content .form-row .required,
.account-content .woocommerce-EditAccountForm .required {
	color: var(--color-raspberry-red);
}
/* First / Last name side-by-side, matching the checkout form convention. */
.account-content .woocommerce-EditAccountForm .form-row-first,
.account-content .woocommerce-EditAccountForm .form-row-last {
	display: inline-block;
	width: calc(50% - calc(var(--space-md) / 2));
	vertical-align: top;
}
.account-content .woocommerce-EditAccountForm .form-row-first {
	margin-right: var(--space-md);
}
@media (max-width: 650px) {
	.account-content .woocommerce-EditAccountForm .form-row-first,
	.account-content .woocommerce-EditAccountForm .form-row-last {
		display: block;
		width: 100%;
		margin-right: 0;
	}
}
/* Field help text (e.g. the display-name hint). */
.account-content .form-row span em {
	display: block;
	margin-top: 6px;
	font-size: var(--text-xs);
	font-style: normal;
	color: var(--color-text-light);
	line-height: 1.5;
}
.account-content input.input-text,
.account-content input[type="email"],
.account-content input[type="password"],
.account-content input[type="text"],
.account-content select,
.account-content textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 50px;
	padding: 12px 16px;
	background: var(--color-white);
	border: 1.5px solid var(--color-biscuit, #E8D4A8);
	border-radius: 10px;
	font-family: var(--font-body);
	font-size: var(--text-md);
	font-weight: 300;
	color: var(--color-chocolate-brown);
	line-height: 1.3;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
.account-content input.input-text:focus,
.account-content input[type="email"]:focus,
.account-content input[type="password"]:focus,
.account-content input[type="text"]:focus,
.account-content select:focus,
.account-content textarea:focus {
	border-color: var(--color-golden-bun);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(183, 121, 43, 0.18);
}
/* Placeholder + select chevron — match the site-wide input house style. */
.account-content input::placeholder,
.account-content textarea::placeholder {
	color: rgba(92, 58, 30, 0.45);
}
.account-content select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237F082F' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 44px;
	cursor: pointer;
}
/* Two-column field grid for address forms */
.account-content .woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 var(--space-lg);
}
.account-content .woocommerce-address-fields__field-wrapper .form-row-wide {
	grid-column: 1 / -1;
}
/* Password input wrapper */
.account-content .password-input {
	position: relative;
	display: block;
}
.account-content .password-input .show-password-input {
	position: absolute;
	right: var(--space-md);
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	color: var(--color-text-muted);
}
/* Form submit buttons */
.account-content button[type="submit"],
.account-content input[type="submit"],
.account-content .woocommerce-Button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: var(--space-sm) var(--space-xl) !important;
	background: var(--color-chocolate-brown) !important;
	color: var(--color-vanilla) !important;
	border: 2px solid var(--color-chocolate-brown) !important;
	border-radius: 9999px !important;
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	cursor: pointer;
	text-decoration: none !important;
	transition: background var(--transition-fast), border-color var(--transition-fast);
	margin-top: var(--space-md);
}
.account-content button[type="submit"]:hover,
.account-content input[type="submit"]:hover,
.account-content .woocommerce-Button:hover {
	background: var(--color-golden-bun) !important;
	border-color: var(--color-golden-bun) !important;
	color: var(--color-white) !important;
}
/* Password strength meter */
.account-content .woocommerce-password-strength {
	display: inline-block;
	font-size: var(--text-xs);
	margin-top: 4px;
	padding: 3px 10px;
	border-radius: var(--border-radius);
	font-weight: 600;
}
.account-content .woocommerce-privacy-policy-text,
.account-content .woocommerce-privacy-policy-text p {
	font-size: var(--text-sm);
	color: var(--color-text-light);
	line-height: 1.5;
	margin: var(--space-sm) 0 var(--space-md);
}
/* Account fieldset legend */
.account-content fieldset {
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	padding: var(--space-lg);
	margin: var(--space-xl) 0 0;
}
.account-content fieldset legend {
	font-family: var(--font-display);
	font-size: var(--text-md);
	font-weight: 700;
	color: var(--color-chocolate-brown);
	padding: 0 var(--space-sm);
}

/* ── Addresses ── */
.account-content .woocommerce-Addresses {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	margin-top: 20px;
	margin-bottom: var(--space-xl);
	overflow: visible;
}
/* This container also carries WooCommerce's `.col2-set` class, whose
   `::before`/`::after` clearfix (content:" "; display:table) become stray
   grid items here — pushing the two address cards into a diagonal stagger.
   Remove them so only the two `.woocommerce-Address` cards occupy the grid. */
.account-content .woocommerce-Addresses::before,
.account-content .woocommerce-Addresses::after {
	content: none !important;
	display: none !important;
}
/* WooCommerce floats & sizes .col-1/.col-2 — reset AND style in one rule
   so a higher-specificity reset can't wipe out card padding. */
.account-content .woocommerce-Addresses .woocommerce-Address {
	float: none !important;
	width: auto !important;
	clear: none !important;
	margin: 0 !important;
	background: #fff !important;
	border: 1.5px solid rgba(183, 121, 43, 0.2) !important;
	border-radius: var(--border-radius-lg) !important;
	padding: var(--space-lg) !important;
	box-shadow: 0 4px 16px rgba(60, 30, 15, 0.07) !important;
}
.account-content .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-md);
	padding-bottom: var(--space-sm);
	border-bottom: 1.5px solid var(--color-border);
}
.account-content .woocommerce-Address-title h3 {
	margin: 0;
	font-size: var(--text-md);
	font-weight: 700;
	color: var(--color-chocolate-brown);
}
.account-content .woocommerce-Address-title a {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-golden-bun-dark, #7a5010);
	text-decoration: none;
	padding: 3px 10px;
	border: 1px solid rgba(183, 121, 43, 0.3);
	border-radius: 9999px;
	transition: all var(--transition-fast);
}
.account-content .woocommerce-Address-title a:hover {
	background: var(--color-golden-bun);
	border-color: var(--color-golden-bun);
	color: var(--color-white);
}
.account-content address {
	font-style: normal;
	font-size: var(--text-sm);
	color: var(--color-chocolate-brown);
	line-height: 1.75;
}

/* ── Payment methods ── */
.account-content table.woocommerce-MyAccount-paymentMethods td.woocommerce-PaymentMethod-actions .button.delete {
	background: var(--color-cream) !important;
	border-color: rgba(127, 8, 47, 0.3) !important;
	color: var(--color-raspberry-red) !important;
}
.account-content table.woocommerce-MyAccount-paymentMethods td.woocommerce-PaymentMethod-actions .button.delete:hover {
	background: var(--color-raspberry-red) !important;
	border-color: var(--color-raspberry-red) !important;
	color: var(--color-white) !important;
}

/* ── Responsive breakpoints ── */
@media (max-width: 900px) {
	.account-layout {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}
	.account-nav {
		order: -1;
	}
	.account-nav__menu {
		position: static;
	}
	/* Horizontal scroll nav on small screens */
	.account-nav__menu ul {
		display: flex !important;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.account-nav__menu ul::-webkit-scrollbar { display: none; }
	.account-nav__menu ul li {
		flex: 0 0 auto;
	}
	.account-nav__menu ul li a {
		justify-content: center;
		flex-direction: column;
		gap: 4px;
		border-bottom: 0 !important;
		border-right: 1px solid var(--color-biscuit-light) !important;
		padding: 10px 14px !important;
		font-size: 11px !important;
		text-align: center;
		white-space: nowrap;
	}
	.account-nav__menu ul li:last-child a { border-right: 0 !important; }
	.account-nav__menu ul li a svg { width: 18px; height: 18px; }
}
@media (max-width: 650px) {
	.account-content { padding: var(--space-md); }
	.account-content .woocommerce-Addresses {
		grid-template-columns: 1fr;
	}
	.account-content .woocommerce-address-fields__field-wrapper {
		grid-template-columns: 1fr;
	}
}


/* ===========================================================================
   SEARCH OVERLAY — improved sizes, colours, scope-toggle polish
   =========================================================================== */

/* Slightly more padding at the top/bottom of the panel */
.search-overlay__panel {
	padding: var(--space-xl) 0;
}

/* Input — larger and more prominent */
.search-overlay__input {
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	padding: var(--space-md) 0;
	font-weight: 300;
	letter-spacing: -0.01em;
}
.search-overlay__input::placeholder {
	color: rgba(246, 232, 196, 0.45);
}

/* Input wrap — golden accent on focus */
.search-overlay__input-wrap {
	border-bottom: 1.5px solid rgba(255, 255, 255, 0.25);
	transition: border-color var(--transition-fast);
}
.search-overlay__input-wrap:focus-within {
	border-color: var(--color-golden-bun);
}

/* Search icon — slightly larger */
.search-overlay__icon {
	width: 26px;
	height: 26px;
	opacity: 0.7;
}

/* Submit button — golden instead of raspberry for dark panel context */
.search-overlay__submit.btn {
	background: var(--color-golden-bun);
	border-color: var(--color-golden-bun);
	color: var(--color-white);
	padding: var(--space-sm) var(--space-lg);
	font-size: var(--text-sm);
}
.search-overlay__submit.btn:hover {
	background: var(--color-golden-bun-dark, #996020);
	border-color: var(--color-golden-bun-dark, #996020);
}

/* Close button — slightly larger hit area */
.search-overlay__close {
	padding: var(--space-xs);
	border-radius: var(--border-radius);
	transition: background var(--transition-fast), color var(--transition-fast);
}
.search-overlay__close:hover {
	background: rgba(255, 255, 255, 0.1);
	color: var(--color-white);
}


/* ============================================================
   ORDER RECEIVED / THANKYOU PAGE
   ============================================================ */

/* Checkmark icon in the page header */
.cb-thankyou__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    background: var(--ed-gold);
    color: var(--ed-cream);
    border-radius: 50%;
    margin-bottom: var(--space-lg);
    box-shadow: 0 4px 24px rgba(183, 121, 43, 0.35);
}

/* Biscuit-warm gradient section (mirrors account-area) */
.cb-thankyou__section {
    background: linear-gradient(to bottom, var(--ed-cream) 0%, var(--ed-cream) 40%, var(--ed-biscuit-warm) 100%) !important;
    padding: var(--space-2xl) 0 var(--space-4xl);
}

/* Narrow container for the thankyou content */
.cb-thankyou__container {
    max-width: 960px;
}
.cb-thankyou__container--narrow {
    max-width: 640px;
}

/* Order ref bar (order # · date · email) */
.cb-thankyou__order-ref {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    color: var(--ed-ink-soft);
    margin-bottom: var(--space-2xl);
    padding: var(--space-md) var(--space-lg);
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(183, 121, 43, 0.18);
    border-radius: var(--border-radius-xl);
}
.cb-thankyou__order-ref strong {
    color: var(--ed-ink);
    font-weight: 700;
}
.cb-thankyou__dot {
    color: var(--ed-gold);
    font-weight: 700;
    font-size: 1.1em;
}

/* Guest "create an account" prompt — sits above the order cards. */
.cb-thankyou__account-banner {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
    padding: var(--space-lg) var(--space-xl);
    background: var(--color-cream, #FAF1DB);
    border: 1px solid rgba(183, 121, 43, 0.22);
    border-left: 4px solid var(--color-golden-bun, #B7792B);
    border-radius: var(--border-radius-xl);
}
.cb-thankyou__account-banner-icon {
    flex: 0 0 auto;
    color: var(--color-golden-bun, #B7792B);
}
.cb-thankyou__account-banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
}
.cb-thankyou__account-banner-text strong {
    font-family: var(--font-display);
    font-size: var(--text-md);
    color: var(--color-chocolate-brown, #5C3A1E);
}
.cb-thankyou__account-banner-text span {
    font-size: var(--text-sm);
    color: var(--color-text-light, #8C5B18);
    line-height: 1.5;
}
.cb-thankyou__account-banner-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-md);
}
.cb-thankyou__account-banner-login {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-golden-bun-dark, #7a5010);
    text-decoration: none;
    white-space: nowrap;
}
.cb-thankyou__account-banner-login:hover {
    text-decoration: underline;
}
@media (max-width: 650px) {
    .cb-thankyou__account-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
    }
    .cb-thankyou__account-banner-actions {
        width: 100%;
    }
}

/* Two-column card grid */
.cb-thankyou__grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--space-xl);
    align-items: start;
    margin-bottom: var(--space-2xl);
}

/* Card base */
.cb-thankyou__card {
    background: #fff;
    border-radius: var(--border-radius-xl);
    border: 1.5px solid rgba(183, 121, 43, 0.15);
    box-shadow: var(--ed-shadow-sm);
    padding: var(--space-xl) var(--space-xl);
    overflow: hidden;
}

/* Gold top-border accent */
.cb-thankyou__card::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(to right, var(--ed-gold), var(--ed-biscuit-warm));
    margin: calc(-1 * var(--space-xl)) calc(-1 * var(--space-xl)) var(--space-xl);
}

/* Card title (icon + text) */
.cb-thankyou__card-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ed-ink);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid rgba(183, 121, 43, 0.18);
}
.cb-thankyou__card-title svg {
    color: var(--ed-gold);
    flex-shrink: 0;
}

/* Collection detail rows */
.cb-thankyou__detail-row {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: var(--space-sm);
    align-items: start;
    padding: var(--space-sm) 0;
    font-size: var(--text-sm);
    border-bottom: 1px solid rgba(183, 121, 43, 0.08);
}
.cb-thankyou__detail-row:last-child { border-bottom: none; }
.cb-thankyou__detail-label {
    font-weight: 600;
    color: var(--ed-ink-soft);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.07em;
    padding-top: 2px;
}
.cb-thankyou__detail-value {
    color: var(--ed-ink);
    font-weight: 500;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cb-thankyou__detail-value small {
    font-size: var(--text-xs);
    color: var(--ed-ink-soft);
    font-weight: 400;
}

/* Order items list */
.cb-thankyou__items {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-lg);
}
.cb-thankyou__item {
    display: grid;
    grid-template-columns: 52px 1fr auto auto;
    gap: var(--space-md);
    align-items: center;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid rgba(183, 121, 43, 0.08);
}
.cb-thankyou__item:last-child { border-bottom: none; }

.cb-thankyou__item-thumb {
    width: 52px;
    height: 52px;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    background: var(--ed-cream);
    flex-shrink: 0;
}
.cb-thankyou__item-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cb-thankyou__item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cb-thankyou__item-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ed-ink);
    line-height: 1.3;
}
.cb-thankyou__item-meta {
    font-size: var(--text-xs);
    color: var(--ed-ink-soft);
}

.cb-thankyou__item-qty {
    font-size: var(--text-sm);
    color: var(--ed-ink-soft);
    font-weight: 500;
    white-space: nowrap;
}
.cb-thankyou__item-price {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ed-ink);
    white-space: nowrap;
    text-align: right;
}

/* Totals summary */
.cb-thankyou__totals {
    border-top: 1.5px solid rgba(183, 121, 43, 0.2);
    padding-top: var(--space-md);
}
.cb-thankyou__total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: var(--text-sm);
    color: var(--ed-ink-soft);
}
.cb-thankyou__total-discount {
    color: var(--color-success);
    font-weight: 600;
}
.cb-thankyou__total-row--grand {
    font-size: var(--text-md);
    font-weight: 800;
    color: var(--ed-ink);
    padding: var(--space-sm) 0 4px;
    border-top: 2px solid var(--ed-gold);
    margin-top: var(--space-xs);
}
.cb-thankyou__total-row--method {
    font-size: var(--text-xs);
    color: var(--ed-ink-soft);
    padding-top: var(--space-sm);
    border-top: 1px solid rgba(183, 121, 43, 0.12);
    margin-top: 4px;
}

/* CTA buttons */
.cb-thankyou__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.cb-thankyou__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px var(--space-xl);
    border-radius: 9999px;
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    cursor: pointer;
}
.cb-thankyou__btn--primary {
    background: var(--color-raspberry-red);
    color: #fff;
    border: 2px solid var(--color-raspberry-red);
    box-shadow: 0 4px 16px rgba(127, 8, 47, 0.22);
}
.cb-thankyou__btn--primary:hover {
    background: var(--color-chocolate-brown);
    border-color: var(--color-chocolate-brown);
    box-shadow: 0 4px 20px rgba(92, 58, 30, 0.28);
}
.cb-thankyou__btn--ghost {
    background: transparent;
    color: var(--ed-ink);
    border: 2px solid rgba(60, 38, 18, 0.3);
}
.cb-thankyou__btn--ghost:hover {
    border-color: var(--ed-gold);
    color: var(--ed-gold-deep);
    background: rgba(183, 121, 43, 0.06);
}

/* Reduce the global 300px page-header → section gap down to 100px */
.woocommerce-order-received .page-header + .section {
    padding-top: 30px;
}

/* When there's only one card (no pickup), use a single centred column */
.cb-thankyou__grid:has(.cb-thankyou__card:only-child) {
    grid-template-columns: 1fr;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* WooCommerce order details + billing address — styled as branded cards */
.cb-thankyou__wc-section {
    background: var(--ed-biscuit-warm);
    padding: 0 0 var(--space-4xl);
}

.cb-thankyou__wc-section .woocommerce-order-details,
.cb-thankyou__wc-section .woocommerce-customer-details {
    background: #fff;
    border-radius: var(--border-radius-xl);
    border: 1.5px solid rgba(183, 121, 43, 0.15);
    box-shadow: var(--ed-shadow-sm);
    padding: var(--space-xl);
    margin-bottom: var(--space-xl);
    overflow: hidden;
}
.cb-thankyou__wc-section .woocommerce-order-details::before,
.cb-thankyou__wc-section .woocommerce-customer-details::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(to right, var(--ed-gold), var(--ed-biscuit-warm));
    margin: calc(-1 * var(--space-xl)) calc(-1 * var(--space-xl)) var(--space-xl);
}

.cb-thankyou__wc-section .woocommerce-order-details__title,
.cb-thankyou__wc-section .woocommerce-column__title {
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ed-ink);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid rgba(183, 121, 43, 0.18);
}

/* Billing address */
.cb-thankyou__wc-section .woocommerce-customer-details address {
    font-style: normal;
    font-size: var(--text-sm);
    color: var(--ed-ink);
    line-height: 1.7;
}
.cb-thankyou__wc-section .woocommerce-customer-details .woocommerce-customer-details--email,
.cb-thankyou__wc-section .woocommerce-customer-details .woocommerce-customer-details--phone {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    font-size: var(--text-sm);
    color: var(--ed-ink-soft);
}

/* Responsive */
@media (max-width: 760px) {
    .cb-thankyou__grid {
        grid-template-columns: 1fr;
    }
    .cb-thankyou__order-ref {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }
    .cb-thankyou__dot { display: none; }
    .cb-thankyou__item {
        grid-template-columns: 44px 1fr auto;
        grid-template-rows: auto auto;
    }
    .cb-thankyou__item-thumb { width: 44px; height: 44px; }
    .cb-thankyou__item-price {
        grid-column: 3;
        grid-row: 1;
    }
}