/* ===== HOUSE CONFIG — THE ENTIRE SKIN =================================================
   Generated by tools/tokenize_exact.py from the donor's own measured palette.
   EVERY default below is the donor's EXACT original value, so the render is 1:1.
   Re-skin by overwriting this block and NOTHING else — a colour or font appearing
   anywhere beneath it is a LEAK, not a style.
   ================================================================================== */
:root {

  /* --- ACCENT — the colour that carries the brand (36) --- */
  --hx-gold-01: #030303;  /* 106x */
  --hx-gold-02: #030303;  /* 55x */
  --hx-gold-03: #030303;  /* 42x */
  --hx-gold-04: #030303;  /* 41x */
  --hx-gold-05: #030303;  /* 11x */
  --hx-gold-06: #030303;  /* 11x */
  --hx-gold-07: #030303;  /* 11x */
  --hx-gold-08: #030303;  /* 11x */
  --hx-gold-09: #030303;  /* 11x */
  --hx-gold-10: #030303;  /* 8x */
  --hx-gold-11: #030303;  /* 4x */
  --hx-gold-12: #030303;  /* 3x */
  --hx-gold-13: #030303;  /* 3x */
  --hx-gold-14: #030303;  /* 3x */
  --hx-gold-15: #030303;  /* 2x */
  --hx-gold-16: #030303;  /* 2x */
  --hx-gold-17: #030303;  /* 2x */
  --hx-gold-18: #030303;  /* 2x */
  --hx-gold-19: #030303;  /* 1x */
  --hx-gold-20: #030303;  /* 1x */
  --hx-gold-21: #030303;  /* 1x */
  --hx-gold-22: #030303;  /* 1x */
  --hx-gold-23: #030303;  /* 1x */
  --hx-gold-24: #030303;  /* 1x */
  --hx-gold-25: #030303;  /* 1x */
  --hx-gold-26: #030303;  /* 1x */
  --hx-gold-27: #030303;  /* 1x */
  --hx-gold-28: #030303;  /* 1x */
  --hx-gold-29: #030303;  /* 1x */
  --hx-gold-30: rgba(3,3,3,55%);  /* 1x */
  --hx-gold-31: #030303;  /* 1x */
  --hx-gold-32: #030303;  /* 1x */
  --hx-gold-33: #030303;  /* 1x */
  --hx-gold-34: #030303;  /* 1x */
  --hx-gold-35: #030303;  /* 1x */
  --hx-gold-36: #030303;  /* 1x */

  /* --- ACCENT at partial alpha (46) --- */
  --hx-gold-a-01: #03030333;  /* 4x */
  --hx-gold-a-02: #03030305;  /* 3x */
  --hx-gold-a-03: rgba(3,3,3,.7);  /* 3x */
  --hx-gold-a-04: #03030329;  /* 3x */
  --hx-gold-a-05: rgba(3,3,3,.5);  /* 3x */
  --hx-gold-a-06: #030303cc;  /* 2x */
  --hx-gold-a-07: #0303030d;  /* 2x */
  --hx-gold-a-08: #030303b3;  /* 2x */
  --hx-gold-a-09: #03030338;  /* 2x */
  --hx-gold-a-10: #0303031f;  /* 2x */
  --hx-gold-a-11: #0303031a;  /* 2x */
  --hx-gold-a-12: rgba(3,3,3,.42);  /* 2x */
  --hx-gold-a-13: rgba(3,3,3,0.16);  /* 1x */
  --hx-gold-a-14: rgba(3,3,3,0.82);  /* 1x */
  --hx-gold-a-15: rgba(3,3,3,0.24);  /* 1x */
  --hx-gold-a-16: #0303033d;  /* 1x */
  --hx-gold-a-17: #03030399;  /* 1x */
  --hx-gold-a-18: #03030300;  /* 1x */
  --hx-gold-a-19: #03030340;  /* 1x */
  --hx-gold-a-20: rgba(3,3,3,.45);  /* 1x */
  --hx-gold-a-21: #03030373;  /* 1x */
  --hx-gold-a-22: #03030300;  /* 1x */
  --hx-gold-a-23: #03030303;  /* 1x */
  --hx-gold-a-24: #0303030d;  /* 1x */
  --hx-gold-a-25: #03030317;  /* 1x */
  --hx-gold-a-26: #0303031a;  /* 1x */
  --hx-gold-a-27: #03030300;  /* 1x */
  --hx-gold-a-28: rgba(3,3,3,.18);  /* 1x */
  --hx-gold-a-29: #0303032e;  /* 1x */
  --hx-gold-a-30: #03030314;  /* 1x */
  --hx-gold-a-31: #03030300;  /* 1x */
  --hx-gold-a-32: #030303f0;  /* 1x */
  --hx-gold-a-33: #030303f0;  /* 1x */
  --hx-gold-a-34: #03030366;  /* 1x */
  --hx-gold-a-35: #030303f5;  /* 1x */
  --hx-gold-a-36: #030303f5;  /* 1x */
  --hx-gold-a-37: #03030399;  /* 1x */
  --hx-gold-a-38: #03030324;  /* 1x */
  --hx-gold-a-39: rgba(3,3,3,.65);  /* 1x */
  --hx-gold-a-40: rgba(3,3,3,.75);  /* 1x */
  --hx-gold-a-41: #03030314;  /* 1x */
  --hx-gold-a-42: #030303bf;  /* 1x */
  --hx-gold-a-43: #03030380;  /* 1x */
  --hx-gold-a-44: #03030326;  /* 1x */
  --hx-gold-a-45: #0303033d;  /* 1x */
  --hx-gold-a-46: rgba(3,3,3,.82);  /* 1x */

  /* --- INK — light text (6) --- */
  --hx-ink-01: #030303;  /* 306x */
  --hx-ink-02: #030303;  /* 41x */
  --hx-ink-03: rgba(3,3,3,1.0);  /* 7x */
  --hx-ink-04: rgba(3,3,3,1.0);  /* 4x */
  --hx-ink-05: #030303;  /* 1x */
  --hx-ink-06: rgba(3,3,3,1.0);  /* 1x */

  /* --- GREY — muted text / dividers (19) --- */
  --hx-grey-01: #b5b5b5;  /* 21x */
  --hx-grey-02: rgba(28,28,28,1.0);  /* 13x */
  --hx-grey-03: #868686;  /* 5x */
  --hx-grey-04: #2e2e2e;  /* 3x */
  --hx-grey-05: #aaaaaa;  /* 3x */
  --hx-grey-06: #292929;  /* 2x */
  --hx-grey-07: #676767;  /* 2x */
  --hx-grey-08: rgba(35,35,35,1.0);  /* 2x */
  --hx-grey-09: #2c2c2c;  /* 1x */
  --hx-grey-10: #797979;  /* 1x */
  --hx-grey-11: #474747;  /* 1x */
  --hx-grey-12: #a3a3a3;  /* 1x */
  --hx-grey-13: #4b4b4b;  /* 1x */
  --hx-grey-14: #8f8f8f;  /* 1x */
  --hx-grey-15: #262626;  /* 1x */
  --hx-grey-16: #757575;  /* 1x */
  --hx-grey-17: #3a3a3a;  /* 1x */
  --hx-grey-18: #3f3f3f;  /* 1x */
  --hx-grey-19: #393939;  /* 1x */

  /* --- GROUND — the dark stack (42) --- */
  --hx-ground-01: #ffffff;  /* 66x */
  --hx-ground-02: #e6e6e6;  /* 26x */
  --hx-ground-03: #d2d2d2;  /* 18x */
  --hx-ground-04: #acacac;  /* 13x */
  --hx-ground-05: #c8c8c8;  /* 12x */
  --hx-ground-06: #dcdcdc;  /* 12x */
  --hx-ground-07: #cccccc;  /* 12x */
  --hx-ground-08: #c0c0c0;  /* 11x */
  --hx-ground-09: #d0d0d0;  /* 9x */
  --hx-ground-10: #bcbcbc;  /* 6x */
  --hx-ground-11: #ebebeb;  /* 6x */
  --hx-ground-12: #b4b4b4;  /* 5x */
  --hx-ground-13: #d4d4d4;  /* 4x */
  --hx-ground-14: #e2e2e2;  /* 3x */
  --hx-ground-15: #b0b0b0;  /* 3x */
  --hx-ground-16: #dadada;  /* 3x */
  --hx-ground-17: #bebebe;  /* 3x */
  --hx-ground-18: #cacaca;  /* 3x */
  --hx-ground-19: #b6b6b6;  /* 3x */
  --hx-ground-20: #ededed;  /* 2x */
  --hx-ground-21: #f2f2f2;  /* 2x */
  --hx-ground-22: #aeaeae;  /* 2x */
  --hx-ground-23: #d8d8d8;  /* 2x */
  --hx-ground-24: #b2b2b2;  /* 2x */
  --hx-ground-25: #e0e0e0;  /* 2x */
  --hx-ground-26: #dedede;  /* 1x */
  --hx-ground-27: #a8a8a8;  /* 1x */
  --hx-ground-28: #c6c6c6;  /* 1x */
  --hx-ground-29: #aaaaaa;  /* 1x */
  --hx-ground-30: #c4c4c4;  /* 1x */
  --hx-ground-31: #b8b8b8;  /* 1x */
  --hx-ground-32: #cecece;  /* 1x */
  --hx-ground-33: #e4e4e4;  /* 1x */
  --hx-ground-34: #e8e8e8;  /* 1x */
  --hx-ground-35: #bababa;  /* 1x */
  --hx-ground-36: #fcfcfc;  /* 1x */
  --hx-ground-37: #fafafa;  /* 1x */
  --hx-ground-38: #d6d6d6;  /* 1x */
  --hx-ground-39: #c2c2c2;  /* 1x */
  --hx-ground-40: #f7f7f7;  /* 1x */
  --hx-ground-41: #f0f0f0;  /* 1x */
  --hx-ground-42: #f5f5f5;  /* 1x */

  /* --- SCRIMS — light hairlines & washes (61) --- */
  --hx-scrim-01: rgba(3,3,3,.08);  /* 33x */
  --hx-scrim-02: rgba(3,3,3,.1);  /* 14x */
  --hx-scrim-03: rgba(3,3,3,.25);  /* 12x */
  --hx-scrim-04: #030303b3;  /* 12x */
  --hx-scrim-05: #030303d9;  /* 9x */
  --hx-scrim-06: #03030380;  /* 7x */
  --hx-scrim-07: #030303e6;  /* 7x */
  --hx-scrim-08: rgba(3,3,3,0.36);  /* 6x */
  --hx-scrim-09: #030303bf;  /* 5x */
  --hx-scrim-10: #030303b8;  /* 5x */
  --hx-scrim-11: rgba(3,3,3,.2);  /* 5x */
  --hx-scrim-12: rgba(3,3,3,.06);  /* 4x */
  --hx-scrim-13: #0303030d;  /* 4x */
  --hx-scrim-14: #030303d1;  /* 4x */
  --hx-scrim-15: rgba(3,3,3,.14);  /* 4x */
  --hx-scrim-16: #030303cc;  /* 4x */
  --hx-scrim-17: #030303db;  /* 3x */
  --hx-scrim-18: #030303f2;  /* 3x */
  --hx-scrim-19: #03030305;  /* 3x */
  --hx-scrim-20: #0303030f;  /* 3x */
  --hx-scrim-21: rgba(3,3,3,.05);  /* 3x */
  --hx-scrim-22: #0303038c;  /* 3x */
  --hx-scrim-23: #0303037a;  /* 3x */
  --hx-scrim-24: #030303c7;  /* 3x */
  --hx-scrim-25: #0303039e;  /* 3x */
  --hx-scrim-26: #030303eb;  /* 3x */
  --hx-scrim-27: rgba(3,3,3,.35);  /* 3x */
  --hx-scrim-28: #0303031a;  /* 3x */
  --hx-scrim-29: #03030373;  /* 2x */
  --hx-scrim-30: #03030314;  /* 2x */
  --hx-scrim-31: rgba(3,3,3,.12);  /* 2x */
  --hx-scrim-32: #03030347;  /* 2x */
  --hx-scrim-33: #03030399;  /* 2x */
  --hx-scrim-34: #03030326;  /* 2x */
  --hx-scrim-35: #030303a6;  /* 2x */
  --hx-scrim-36: rgba(3,3,3,0.15);  /* 1x */
  --hx-scrim-37: rgba(3,3,3,0.62);  /* 1x */
  --hx-scrim-38: rgba(3,3,3,.62);  /* 1x */
  --hx-scrim-39: #0303039e;  /* 1x */
  --hx-scrim-40: #030303b8;  /* 1x */
  --hx-scrim-41: #030303b3;  /* 1x */
  --hx-scrim-42: rgba(3,3,3,.9);  /* 1x */
  --hx-scrim-43: rgba(3,3,3,.18);  /* 1x */
  --hx-scrim-44: #03030304;  /* 1x */
  --hx-scrim-45: rgba(3,3,3,.7);  /* 1x */
  --hx-scrim-46: #030303c2;  /* 1x */
  --hx-scrim-47: #0303031f;  /* 1x */
  --hx-scrim-48: #03030324;  /* 1x */
  --hx-scrim-49: #0303030e;  /* 1x */
  --hx-scrim-50: #030303ad;  /* 1x */
  --hx-scrim-51: #030303d6;  /* 1x */
  --hx-scrim-52: rgba(3,3,3,.22);  /* 1x */
  --hx-scrim-53: #03030340;  /* 1x */
  --hx-scrim-54: #0303030a;  /* 1x */
  --hx-scrim-55: rgba(3,3,3,.16);  /* 1x */
  --hx-scrim-56: rgba(3,3,3,.3);  /* 1x */
  --hx-scrim-57: rgba(3,3,3,.7);  /* 1x */
  --hx-scrim-58: rgba(3,3,3,0.78);  /* 1x */
  --hx-scrim-59: rgba(3,3,3,0.69);  /* 1x */
  --hx-scrim-60: rgba(3,3,3,.86);  /* 1x */
  --hx-scrim-61: rgba(3,3,3,.76);  /* 1x */

  /* --- SHADES — dark washes (79) --- */
  --hx-shade-01:         rgb(0 0 0 / 0.81);  /* 17x */
  --hx-shade-02:         rgb(0 0 0 / 0.0);  /* 13x */
  --hx-shade-03:         rgba(0,0,0,.1);  /* 10x */
  --hx-shade-04:         rgba(0,0,0,.09);  /* 8x */
  --hx-shade-05:         rgba(0,0,0,.05);  /* 8x */
  --hx-shade-06:         #0000008c;  /* 6x */
  --hx-shade-07:         #0000001a;  /* 5x */
  --hx-shade-08:         #0009;  /* 5x */
  --hx-shade-09:         rgba(71,71,71,.5);  /* 5x */
  --hx-shade-10:         #0006;  /* 4x */
  --hx-shade-11:         rgb(0 0 0 / 0.13);  /* 4x */
  --hx-shade-12:         rgb(0 0 0 / 0.53);  /* 4x */
  --hx-shade-13:         #0a0a0a00;  /* 3x */
  --hx-shade-14:         #01010100;  /* 3x */
  --hx-shade-15:         #0101018c;  /* 3x */
  --hx-shade-16:         #0a0a0adb;  /* 2x */
  --hx-shade-17:         #010101e0;  /* 2x */
  --hx-shade-18:         #0101011a;  /* 2x */
  --hx-shade-19:         rgba(0,0,0,.01);  /* 2x */
  --hx-shade-20:         #00000026;  /* 2x */
  --hx-shade-21:         #181818f2;  /* 2x */
  --hx-shade-22:         #000000b8;  /* 2x */
  --hx-shade-23:         #0000002e;  /* 2x */
  --hx-shade-24:         #0000007a;  /* 2x */
  --hx-shade-25:         #101010eb;  /* 2x */
  --hx-shade-26:         #17171700;  /* 2x */
  --hx-shade-27:         #00000040;  /* 2x */
  --hx-shade-28:         #000000d9;  /* 2x */
  --hx-shade-29:         #000000d1;  /* 2x */
  --hx-shade-30:         #050505f5;  /* 1x */
  --hx-shade-31:         #050505c2;  /* 1x */
  --hx-shade-32:         #05050529;  /* 1x */
  --hx-shade-33:         #05050500;  /* 1x */
  --hx-shade-34:         #0505052e;  /* 1x */
  --hx-shade-35:         #05050505;  /* 1x */
  --hx-shade-36:         #00000052;  /* 1x */
  --hx-shade-37:         #0000002b;  /* 1x */
  --hx-shade-38:         #0003;  /* 1x */
  --hx-shade-39:         #0a0a0abd;  /* 1x */
  --hx-shade-40:         #010101d9;  /* 1x */
  --hx-shade-41:         #0a0a0a59;  /* 1x */
  --hx-shade-42:         #01010140;  /* 1x */
  --hx-shade-43:         #010101f2;  /* 1x */
  --hx-shade-44:         #01010173;  /* 1x */
  --hx-shade-45:         #171717bf;  /* 1x */
  --hx-shade-46:         #0000008f;  /* 1x */
  --hx-shade-47:         #000000c2;  /* 1x */
  --hx-shade-48:         rgb(0 0 0 / .5);  /* 1x */
  --hx-shade-49:         #00000014;  /* 1x */
  --hx-shade-50:         #000000a3;  /* 1x */
  --hx-shade-51:         #000000e6;  /* 1x */
  --hx-shade-52:         #0000001f;  /* 1x */
  --hx-shade-53:         #0000006b;  /* 1x */
  --hx-shade-54:         #000000bf;  /* 1x */
  --hx-shade-55:         #101010b8;  /* 1x */
  --hx-shade-56:         #00000047;  /* 1x */
  --hx-shade-57:         #1f1f1fc7;  /* 1x */
  --hx-shade-58:         #1f1f1fd1;  /* 1x */
  --hx-shade-59:         #232323fa;  /* 1x */
  --hx-shade-60:         #101010fa;  /* 1x */
  --hx-shade-61:         #0000000d;  /* 1x */
  --hx-shade-62:         #00000021;  /* 1x */
  --hx-shade-63:         #00000036;  /* 1x */
  --hx-shade-64:         #141414f0;  /* 1x */
  --hx-shade-65:         #00000059;  /* 1x */
  --hx-shade-66:         #0000004d;  /* 1x */
  --hx-shade-67:         #00000080;  /* 1x */
  --hx-shade-68:         rgb(0 0 0 / 0.06);  /* 1x */
  --hx-shade-69:         rgb(51 51 51 / 0.73);  /* 1x */
  --hx-shade-70:         rgba(0, 0, 0, 0.75);  /* 1x */
  --hx-shade-71:         rgba(0, 0, 0, 0.65);  /* 1x */
  --hx-shade-72:         rgba(0, 0, 0, 0.45);  /* 1x */
  --hx-shade-73:         rgba(0, 0, 0, 0.8);  /* 1x */
  --hx-shade-74:         rgba(0, 0, 0, 0.25);  /* 1x */
  --hx-shade-75:         rgba(0, 0, 0, 0.04);  /* 1x */
  --hx-shade-76:         rgba(16,16,16,.82);  /* 1x */
  --hx-shade-77:         rgba(0,0,0,.22);  /* 1x */
  --hx-shade-78:         rgba(16,16,16,.88);  /* 1x */
  --hx-shade-79:         rgba(0,0,0,.28);  /* 1x */

  /* --- MISC — everything with a hue that is not the accent (19) --- */
  --hx-misc-01:          #f7f7f6;  /* 4x */
  --hx-misc-02:          #0d0c0d;  /* 2x */
  --hx-misc-03:          #090808;  /* 2x */
  --hx-misc-04:          #b90202;  /* 1x */
  --hx-misc-05:          #9f0a0a;  /* 1x */
  --hx-misc-06:          #ebe8e1;  /* 1x */
  --hx-misc-07:          #1b1914cc;  /* 1x */
  --hx-misc-08:          #10182808;  /* 1x */
  --hx-misc-09:          rgba(0,0,1,.1);  /* 1x */
  --hx-misc-10:          #0a142f;  /* 1x */
  --hx-misc-11:          #29231740;  /* 1x */
  --hx-misc-12:          #8B0000;  /* 1x */
  --hx-misc-13:          #006400;  /* 1x */
  --hx-misc-14:          #3ED660;  /* 1x */
  --hx-misc-15:          rgb(238 241 234 / 1.0);  /* 1x */
  --hx-misc-16:          rgb(225 237 245 / 1.0);  /* 1x */
  --hx-misc-17:          rgb(29 54 134 / 0.5);  /* 1x */
  --hx-misc-18:          rgb(29 54 134 / 1.0);  /* 1x */
  --hx-misc-19:          #f8f9fa;  /* 1x */

  /* --- SEMANTIC — meaning-bearing, do NOT re-skin these to brand colours (2) --- */
  --hx-err-deep:         #bf171d;  /* 2x */
  --hx-err:              #be4545;  /* 1x */

  /* --- TYPE — each default is the donor's EXACT original expression, fallback chain
         included. Repoint these at the offer's faces; do not collapse the chain. --- */
  --hx-font-display:     var(--based-font-display, "Paralucent", system-ui, sans-serif);
  --hx-font-display-2:   var(--bbw-font-display, "Based Display", sans-serif);
  --hx-font-text:        var(--bbw-font-text, "Based Text", sans-serif);
  --hx-font-mono:        var(--based-font-mono, ui-monospace, monospace);
  --hx-font-book:        Paralucent Text-Book, Paralucent Condensed, system-ui, sans-serif;
  --hx-font-cond:        Paralucent Condensed, system-ui, sans-serif;
}


  :root {
    --based-product-card-media-inset: 7%;
    --based-product-card-media-drop: 1%;
    --based-product-card-media-size: 86%;
  }

  /* Normalize Paralucent vertical metrics across browser/OS font engines. */

  /* Paralucent Condensed (header / legacy buy-box) */
  @font-face {
    font-family: 'Paralucent Condensed';
    src: url('assets/e45352c3_paralucentcondensedbook.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    ascent-override: 89%;
    descent-override: 25%;
    line-gap-override: 0%;
  }
  @font-face {
    font-family: 'Paralucent Condensed';
    src: url('assets/7c47fa49_paralucentcondensedmedium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    ascent-override: 89%;
    descent-override: 25%;
    line-gap-override: 0%;
  }
  @font-face {
    font-family: 'Paralucent Condensed';
    src: url('assets/133b1421_paralucentcondenseddemi-bold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    ascent-override: 89%;
    descent-override: 25%;
    line-gap-override: 0%;
  }
  @font-face {
    font-family: 'Paralucent Condensed';
    src: url('assets/c2d5070e_paralucentcondensedbold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    ascent-override: 89%;
    descent-override: 25%;
    line-gap-override: 0%;
  }

  /* Live aliases the Instant condensed webfonts under the Paralucent family
     names. Mirror that mapping so Horizon renders the same storefront shapes
     and avoids Chrome rejecting the older Paralucent.woff/.woff2 files. */
  @font-face {
    font-family: 'Paralucent';
    src: url('assets/ac352b0c_Paralucent-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    ascent-override: 89%;
    descent-override: 25%;
    line-gap-override: 0%;
  }
  @font-face {
    font-family: 'Paralucent';
    src: url('assets/e45352c3_paralucentcondensedbook.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    ascent-override: 89%;
    descent-override: 25%;
    line-gap-override: 0%;
  }
  @font-face {
    font-family: 'Paralucent';
    src: url('assets/7c47fa49_paralucentcondensedmedium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    ascent-override: 89%;
    descent-override: 25%;
    line-gap-override: 0%;
  }
  @font-face {
    font-family: 'Paralucent';
    src: url('assets/133b1421_paralucentcondenseddemi-bold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    ascent-override: 89%;
    descent-override: 25%;
    line-gap-override: 0%;
  }
  @font-face {
    font-family: 'Paralucent';
    src: url('assets/c2d5070e_paralucentcondensedbold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    ascent-override: 89%;
    descent-override: 25%;
    line-gap-override: 0%;
  }

  /* Paralucent Text-Book is also an alias to Instant's condensed book face on live. */
  @font-face {
    font-family: 'Paralucent Text-Book';
    src: url('assets/e45352c3_paralucentcondensedbook.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    ascent-override: 89%;
    descent-override: 25%;
    line-gap-override: 0%;
  }
  @font-face {
    font-family: 'ParalucentText';
    src: url('assets/e45352c3_paralucentcondensedbook.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    ascent-override: 89%;
    descent-override: 25%;
    line-gap-override: 0%;
  }

  /* Hide announcement-bar nav arrows — Based ticker rotates without manual controls. */
  .announcement-bar slideshow-arrows,
  .announcement-bar .slideshow-arrows,
  .announcement-bar [class*="arrow"] {
    display: none !important;
  }

  /* Header parity (live shampoo PDP): row 51px tall, padding-block 16/16, logo 19.2px tall.
     Horizon defaults render at 80.79px / logo 36px. The 60px stems from
     body { --header-height: 60px } in sections/header.liquid; menu items + columns
     stretch to that. Override the var + cap logo to 16px. */
  body { --header-height: 16px !important; }

  .header__columns {
    padding-block: 0 !important;
    height: 16px !important;
    align-items: center !important;
    overflow: visible !important;
  }
  .header__row--top {
    min-height: 16px !important;
    padding-block: 16px !important;
    padding-inline: 56px !important;
    overflow: visible !important;
  }
  @media (max-width: 900px) {
    .header__row--top { padding-inline: 24px !important; }
  }
  /* Mobile (matches the 749px breakpoint at which Horizon switches to drawer menu
     and the secondary navigation-bar-row is hidden). 16px desktop padding-block
     reads as too tall once the inline menu items are gone; tighten + shrink the
     logo so the mobile header is closer to ~30px (matches live PDP feel). */
  @media (max-width: 749px) {
    .header__row--top {
      padding-block: 6px !important;
      padding-inline: 14px !important;
    }
    .header-logo,
    .header-logo__image-container,
    .header-logo__image,
    .header-logo__image svg,
    .header-logo__image img {
      height: 12px !important;
      max-height: 12px !important;
    }
  }
  .header__column,
  .header-menu,
  .header-menu__inner,
  .menu-list,
  .menu-list__list-item {
    height: auto !important;
    align-items: center !important;
    align-self: center !important;
  }
  .header-logo {
    height: 16px !important;
    padding: 0 !important;
  }
  .header-logo__image-container,
  .header-logo__image,
  .header-logo__image svg,
  .header-logo__image img {
    height: 16px !important;
    max-height: 16px !important;
    width: auto !important;
  }
  .menu-list,
  .menu-list__item,
  .menu-list__link {
    min-height: 0 !important;
  }
  .menu-list__link:not([href$="/pages/routine"]):not(#HeaderDrawer-get-your-routine):not(#MenuItem-get-your-routine) {
    height: 16px !important;
  }
  .menu-list__link .menu-list__link-title,
  .header .menu-list__link .menu-list__link-title {
    font-family: var(--hx-font-display);
  }
  .menu-list__link[aria-haspopup="true"] .menu-list__link-title::after,
  #MenuItem-shop::after,
  .menu-list__link[id^="MenuItem-"][id$="-shop"]::after {
    content: "⌄";
    display: inline-block;
    margin-left: 4px;
    font-size: .82em;
    line-height: 1;
    transform: translateY(-1px);
  }
  header-actions,
  .header-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
  }
  .header-actions__action,
  .account-button,
  .account-button shopify-account {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .header-actions__action .svg-wrapper,
  .header-actions__cart-icon .svg-wrapper,
  .account-button__icon,
  .header__icon--menu .svg-wrapper,
  .header-actions__action svg,
  .header-actions__cart-icon svg,
  .header__icon--menu svg {
    width: 24px !important;
    height: 24px !important;
  }
  @media (max-width: 749px) {
    .header-actions__action .svg-wrapper,
    .header-actions__cart-icon .svg-wrapper,
    .account-button__icon,
    .header__icon--menu .svg-wrapper,
    .header-actions__action svg,
    .header-actions__cart-icon svg,
    .header__icon--menu svg {
      width: 26px !important;
      height: 26px !important;
    }
  }

  /* Mega-menu submenu panel: live dark dropdown spanning the page width.
     Children render as a horizontal text-link grid centered under the parent.
     (Once Matrixify imports the rest of the catalog we'll switch to product-card
     rendering by setting menu_content_type=featured_products on the section.) */
  .menu-list__submenu {
    background: var(--hx-ground-03) !important;
    border-top: 1px solid var(--hx-ground-12);
    color: var(--hx-ink-01);
  }
  .menu-list__submenu-inner {
    max-width: 1280px;
    margin-inline: auto;
    padding: 32px 64px;
  }
  .mega-menu,
  .mega-menu__grid {
    background: transparent !important;
    color: var(--hx-ink-01);
  }
  .mega-menu__list {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px 24px !important;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .mega-menu__list > li {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  /* Horizon's mega-menu-list snippet writes an inline --menu-grid-column-span
     style on each LI which beats class-level grid-column rules. Override the
     CSS variable directly so the 4-col template-columns wins. */
  .mega-menu__list > li[style*="--menu-grid-column-span"] {
    --menu-grid-column-span: 1 !important;
  }
  .mega-menu__list a,
  .mega-menu__list .mega-menu__link {
    display: inline-flex;
    align-items: center;
    color: var(--hx-misc-01) !important;
    font-family: var(--based-font-display);
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: -0.32px !important;
    text-transform: none !important;
    text-decoration: none;
    line-height: 1.6;
    padding: 4px 0;
    transition: color 150ms ease;
  }
  .mega-menu__list a:hover,
  .mega-menu__list .mega-menu__link:hover {
    color: var(--based-color-gold-primary, var(--hx-gold-01)) !important;
  }

  /* Sale banner: allow natural 2-line wrap (matches live). */
  .announcement-bar__slide { white-space: normal; line-height: 1.4; max-width: 720px; margin-inline: auto; }

  /* Pack selector spacing lives in the block; keep global tokens from making PDP rows too tall. */
  .based-pack__cards { padding-top: 0; gap: 6px; }

  /* Cart drawer: dark Based scheme + gold accents on subtotal + checkout button.
     Horizon's drawer reads --drawer-color-scheme; force scheme-5 (Based dark)
     and tighten the close button + heading typography to match brand. */
  .cart-drawer__dialog {
    background: var(--hx-ground-14);
    color: var(--hx-ink-01);
    font-family: var(--based-font-display, "Paralucent Condensed", system-ui, sans-serif);
  }
  .cart-drawer__heading {
    font-family: var(--based-font-display);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.44px;
    color: var(--hx-ink-01);
  }
  .cart-drawer__summary,
  .cart-drawer__totals {
    background: var(--hx-ground-14);
    border-top: 1px solid var(--hx-ground-12);
  }
  .cart-drawer__totals .totals__total-value,
  .cart-drawer__summary .totals__total-value {
    color: var(--based-color-gold-primary, var(--hx-gold-01)) !important;
    font-weight: 700;
  }

  /* Per-line savings hint under each cart line price ("Save $16.80")
     and the gold "TOTAL SAVINGS" row in the cart-summary panel.
     Matches live drawer treatment. */
  .cart-items__line-savings {
    margin: 4px 0 0;
    padding: 0;
    font-family: "Paralucent Text-Book", "Paralucent Condensed", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.24px;
    color: var(--based-color-gold-primary, var(--hx-gold-01));
  }
  .cart-totals__savings {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    margin: 0;
    border-top: 1px solid var(--hx-scrim-02);
  }
  .cart-totals__savings-label {
    font-family: var(--based-font-display, "Paralucent", "Paralucent Condensed", system-ui, sans-serif);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--based-color-gold-primary, var(--hx-gold-01));
  }
  .cart-totals__savings-value {
    font-family: var(--based-font-display, "Paralucent", "Paralucent Condensed", system-ui, sans-serif);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.32px;
    color: var(--based-color-gold-primary, var(--hx-gold-01));
  }

  /* Gallery sizing parity: live shampoo gallery main is ~614px wide / ~685px tall.
     Horizon's product-information__media column on a 1568px viewport renders 936px
     wide which makes the main image enormous. Cap the based-gallery container. */
  .based-gallery {
    max-width: 614px;
    margin-inline: auto;
  }

  /* PDP column-ratio parity: live shampoo PDP renders gallery + buy-box as a
     fixed 1260px row, centered, 50/50 split with 32px column gap (614px gallery,
     32px gap, 614px buy-box). Horizon's default at >=1200px is 2fr/1fr inside
     the page-grid's column-2 cell (947/474 on a 1512vw viewport), pushing the
     buy-box too far right vs live. We need to (a) escape Horizon's page-grid
     placement (`grid-column: 2`) so we can hit 1260px, (b) span the full section
     and cap to 1260 centered, (c) flip the column ratio to 50/50.
     Selector mirrors product-information-content.liquid:287-292 with the same
     :not() exclusions, plus !important to beat that rule. */
  @media screen and (min-width: 1200px) {
    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-left {
      grid-column: 1 / -1 !important;
      grid-template-columns: 1fr 1fr !important;
      width: min(1260px, 100%);
      max-width: 1260px;
      margin-inline: auto;
    }
  }

  /* Empty-cart + 404 "Continue shopping" CTA — Horizon's default is a solid
     black pill. Match the rest of Based's primary CTAs (gold gradient +
     white border). The 404 button has no semantic class hook (just
     auto-generated `button button--AR...`), so we also catch any anchor
     pointing to /collections/all on the 404 template. */
  .cart__continue-shopping,
  .cart-empty-state__cta,
  .cart-empty-state .button,
  .template-404 a.button[href="/collections/all"],
  body[class*="404"] a.button[href="/collections/all"] {
    background: linear-gradient(0deg, var(--hx-gold-03), var(--hx-gold-01)) !important;
    color: var(--hx-ink-01) !important;
    border: 2px solid var(--hx-scrim-03) !important;
    border-radius: 8px !important;
    font-family: var(--based-font-display, "Paralucent Condensed", system-ui, sans-serif) !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    letter-spacing: -0.36px !important;
    text-transform: uppercase !important;
    padding: 18px 28px !important;
    transition: filter 150ms ease;
  }

  /* Cart page Check Out button: Horizon defaults to a black solid button.
     Live cart uses the Based gold gradient (matches the PDP ATC button).
     Same gradient + white text + 8px radius. */
  .cart__checkout-button,
  .cart__checkout-button.button {
    background: linear-gradient(0deg, var(--hx-gold-03), var(--hx-gold-01)) !important;
    color: var(--hx-ink-01) !important;
    border: 2px solid var(--hx-scrim-03) !important;
    border-radius: 8px !important;
    font-family: var(--based-font-display, "Paralucent Condensed", system-ui, sans-serif) !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    letter-spacing: -0.36px !important;
    text-transform: uppercase !important;
    padding: 18px 24px !important;
    transition: filter 150ms ease;
  }
  .cart__checkout-button:hover:not(:disabled),
  .cart__checkout-button.button:hover:not(:disabled) {
    filter: brightness(1.05);
  }
  .cart__checkout-button:disabled,
  .cart__checkout-button.button:disabled {
    background: var(--hx-grey-01) !important;
    border-color: var(--hx-scrim-36) !important;
    cursor: not-allowed;
  }

  /* Body background: Horizon defaults to white, which bleeds through anywhere
     the page doesn't paint a darker color (e.g. the small gap between the dark
     header bottom and the start of the PDP main content) — visible as a thin
     white horizontal line right under the header. Set to Based's deepest dark
     so nothing leaks through. */
  body {
    background-color: var(--hx-ground-26);
  }

  /* Sticky header GROUP (sale banner + nav row stay fixed together as you scroll).
     Horizon sticks only the inner header-component by default, so the announcement
     bar above scrolls away. Live keeps both visible together; mirroring that here
     by making the whole #header-group wrapper sticky.

     Note: Horizon defaults #header-group to display:contents (no box), which
     makes position:sticky a no-op. Override display to block so the wrapper has
     a real box and the sticky positioning takes effect. */
  #header-group {
    display: block !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
  }

  /* PDP top spacing: the sticky header (sale banner ~48px + nav row ~51px = ~99px)
     was overlapping the start of the right column on the PDP. Push the main
     content below it. */
  #MainContent,
  main#MainContent,
  main {
    padding-top: 16px !important;
  }
  @media (max-width: 749px) {
    #MainContent,
    main#MainContent,
    main {
      padding-top: 12px !important;
    }
  }

  /* Header height compaction: Horizon's header section default has block padding
     that pushes the nav row to ~67px. Live nav row is ~51px. Tighten via padding
     overrides on the header section + the inner header element. */
  .shopify-section-header,
  .shopify-section.shopify-section--header,
  .shopify-section-group-header-group .header,
  header.header,
  header[role="banner"] {
    --header-min-height: 51px;
  }
  .header,
  header.header {
    padding-block: 0 !important;
    min-height: 51px !important;
  }
  .header__inner,
  .header__row {
    padding-block: 8px !important;
    min-height: 51px !important;
  }

  @media (max-width: 749px) {
    .header,
    header.header,
    .header__inner,
    .header__row,
    .header__row--top {
      min-height: 56px !important;
    }

    .header__row--top {
      padding-block: 8px !important;
      padding-inline: 14px !important;
    }

    header-drawer.header-drawer {
      margin-inline-start: -9px !important;
    }
  }

  /* Compact nav link sizing to match live (12px uppercase, no extra tracking) */
  .menu-list__link,
  .header .menu-list__link,
  .menu-list__link-title,
  .header .menu-list__link-title {
    font-family: var(--based-font-display, "Paralucent", "Paralucent Condensed", system-ui, sans-serif) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 19.2px !important;
    letter-spacing: normal !important;
    text-transform: uppercase !important;
  }
  .menu-list__link,
  .header .menu-list__link {
    padding: 6px 12px !important;
  }

  /* Hide the in-flow Get Your Routine in the desktop nav-list (it's rendered
     out-of-band via snippets/based-routine-pill.liquid). Mobile drawer keeps
     the in-flow copy. */
  @media (min-width: 750px) {
    .menu-list__list-item:has(.menu-list__link[href$="/pages/routine"]) {
      display: none !important;
    }
  }

  /* Get Your Routine — dark gray pill (var(--hx-ground-15)) with gold sparkle prefix, NOT gold gradient.
     Live computed: 150px×28px, padding 0, bg var(--hx-ground-15), border-radius 8px, font-size 16px,
     font-weight 400, line-height 18.4px, color var(--hx-ink-01). Targets desktop + mobile drawer + Horizon's MenuItem id.
     Absolute-positioned to the right of the centered logo (matches live's header layout where the
     pill sits between logo and the cart icon, not on the left with the nav links). */
  .menu-list__link[href$="/pages/routine"],
  #HeaderDrawer-get-your-routine,
  #MenuItem-get-your-routine {
    background: var(--hx-ground-15) !important;
    color: var(--hx-ink-01) !important;
    padding: 0 16px !important;
    height: 28px !important;
    border-radius: 8px !important;
    border: 0 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    transition: background 150ms ease;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 18.4px !important;
  }

  /* Desktop only: defeat Horizon's overflow-list (which collapses the 6th item
     into a "MORE" dropdown) by forcing all children visible, then use flexbox
     order to push Get Your Routine to the right of the nav row. Live PDP
     renders all 5 nav items + the pill on the right (no MORE indicator).

     Mobile drawer keeps in-flow positioning (overflow-list isn't used there). */
  @media (min-width: 750px) {
    overflow-list,
    .overflow-menu {
      display: flex !important;
      flex-wrap: nowrap !important;
      width: 100% !important;
      align-items: center !important;
      gap: 24px !important;
    }
    overflow-list .menu-list__list-item,
    .overflow-menu .menu-list__list-item {
      display: inline-flex !important;
      visibility: visible !important;
      opacity: 1 !important;
    }
    /* Hide Horizon's MORE overflow toggle and any "hidden by overflow" markers
       since we're forcing everything visible. */
    .overflow-menu__toggle,
    [is="overflow-menu"] [hidden],
    overflow-list > [hidden],
    .menu-list__list-item[hidden] {
      display: none !important;
    }
    /* Push the Get Your Routine pill to the far right of the nav row */
    .menu-list__list-item:has(.menu-list__link[href$="/pages/routine"]) {
      margin-left: auto !important;
      order: 99 !important;
    }
  }
  .menu-list__link[href$="/pages/routine"]:hover,
  #HeaderDrawer-get-your-routine:hover,
  #MenuItem-get-your-routine:hover {
    background: var(--hx-ground-27) !important;
  }
  .menu-list__link[href$="/pages/routine"]::before,
  #HeaderDrawer-get-your-routine::before,
  #MenuItem-get-your-routine::before {
    content: "✦";
    color: var(--based-color-gold-primary, var(--hx-gold-01));
    font-size: 14px;
    line-height: 1;
  }

  :root {
    /* Gold gradient — confirmed on live storefront */
    --based-color-gold-dark: var(--hx-gold-03);
    --based-color-gold-mid: var(--hx-gold-04);
    --based-color-gold-primary: var(--hx-gold-01);
    --based-gradient-gold: linear-gradient(0deg, var(--hx-gold-03), var(--hx-gold-01));
    --based-gradient-gold-subtle: linear-gradient(0deg, var(--hx-gold-03), var(--hx-gold-04));

    /* Dark surfaces — matches live storefront cluster (var(--hx-ground-03), var(--hx-ground-05), var(--hx-ground-10)) */
    --based-color-bg-darkest: var(--hx-ground-03);
    --based-color-bg-dark: var(--hx-ground-05);
    --based-color-bg-dark-card: var(--hx-ground-10);
    --based-gradient-dark-card: linear-gradient(0deg, var(--hx-ground-28), var(--hx-ground-29));
    --based-gradient-dark-deep: linear-gradient(0deg, var(--hx-ground-08), var(--hx-ground-16));

    /* Error / sale red */
    --based-color-error: var(--hx-err-deep);

    /* Stroke scale (border-width) */
    --based-stroke-1: 1px;
    --based-stroke-2: 2px;
    --based-stroke-3: 4px;

    /* Typography — Paralucent regular self-hosted from live theme export 2026-04-28
       (Paralucent.woff2 + per-weight TTFs). Paralucent Condensed kept as second
       fallback for any element that explicitly wants the condensed face. */
    --based-font-display: "Paralucent", "Paralucent Condensed", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --based-font-body: "Paralucent Text-Book", "Paralucent", "Paralucent Condensed", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --based-font-mono: "VCR OSD Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    /* Text / muted / error — storefront palette */
    --based-color-text-muted: var(--hx-grey-03);
    --based-color-error: var(--hx-err-deep);

    /* Shipping threshold — global, promoted from a per-product metafield to a theme-level constant.
       Value can also be overridden via settings.based_shipping_free_threshold for merchant edits. */
    --based-shipping-free-threshold: 30;
  }

  /* === COLLECTION PAGE PARITY === */
  /* Live's collection cards have a continuous dark gradient background, 12px
     border-radius, and a subtle white-10% border. Marketing crops sit on top
     of the gradient (no separate image-area bg color). Title is Paralucent
     500/18, price is gold Paralucent 600/16. Restyle Horizon's
     <product-card> web component on collection + search + list-collections
     templates without replacing the underlying product-card.liquid block. */
  product-card {
    background: linear-gradient(0deg, var(--hx-ground-08), var(--hx-ground-16)) !important;
    border: 1px solid var(--hx-scrim-02) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    color: var(--hx-ink-01) !important;
    transition: filter 150ms ease, transform 200ms ease;
    padding-bottom: 16px;
  }
  product-card:hover { filter: brightness(1.04); }

  /* Image area: kill any inner card padding/border-radius so the photo
     extends edge-to-edge inside the rounded card, then add the same soft
     fade-to-card-bg overlay used on home best-sellers cards. */
  product-card .card-gallery {
    position: relative;
    background: transparent !important;
    border-radius: 0 !important;
    margin-bottom: 16px;
    /* Fade only the bottom 5% of the IMAGE itself (so the gradient flows
       continuously into the card body without darkening the product or
       hiding the title text below it). */
    -webkit-mask-image: linear-gradient(180deg, var(--hx-ground-01) 0%, var(--hx-ground-01) 92%, var(--hx-shade-02) 100%);
            mask-image: linear-gradient(180deg, var(--hx-ground-01) 0%, var(--hx-ground-01) 92%, var(--hx-shade-02) 100%);
  }
  product-card slideshow-component { background: transparent; }

  /* Title + price typography on cards */
  product-card .product-card__content {
    padding: 0 16px 12px !important;
    color: var(--hx-ink-01);
  }
  product-card h3,
  product-card .h4 {
    font-family: var(--based-font-display, "Paralucent", "Paralucent Condensed", system-ui, sans-serif) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.18px !important;
    color: var(--hx-ink-01) !important;
    margin: 0 0 2px !important;
  }
  product-card product-price {
    font-family: var(--based-font-display, "Paralucent", "Paralucent Condensed", system-ui, sans-serif) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: -0.48px !important;
    color: var(--hx-gold-12) !important;
  }
  product-card product-price s {
    color: var(--hx-scrim-37) !important;
    opacity: 1 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    margin-left: 6px !important;
  }

  /* Sale badge (top-right corner) — gold pill matching the home cards */
  product-card .product-badges {
    inset: 10px 10px auto auto !important;
    z-index: 2 !important;
  }
  product-card .product-badge {
    background: var(--hx-gold-a-13) !important;
    color: var(--hx-gold-01) !important;
    font-family: var(--based-font-display, "Paralucent", "Paralucent Condensed", system-ui, sans-serif) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    text-transform: lowercase !important;
    border: 1px solid var(--hx-gold-a-14) !important;
    box-shadow: inset 0 0 0 1px var(--hx-gold-a-15);
  }

  /* Collection page title — Paralucent 56px gold-gradient. The h1 in Horizon's
     templates/collection.json renders inside a generic .text-block wrapper
     with no dedicated class; the most reliable target is any h1 inside a
     shopify-section that's NOT the header/announcement-bar. */
  .shopify-section h1:not([class]),
  .shopify-section .text-block h1,
  .shopify-section h1[class*="search"],
  .shopify-section h1[class*="page-title"],
  body[class*="search"] main h1 {
    font-family: var(--based-font-display, "Paralucent", "Paralucent Condensed", system-ui, sans-serif) !important;
    font-size: 56px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -1.68px !important;
    text-transform: uppercase !important;
    background-image: linear-gradient(0deg, var(--hx-gold-03), var(--hx-gold-01)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    margin: 24px 0 16px !important;
  }
  /* Don't apply the gold-gradient h1 treatment in the header / announcement
     bar / footer, which also use h1 occasionally. */
  .shopify-section-group-header-group h1,
  .shopify-section-group-footer-group h1 {
    background-image: none !important;
    -webkit-text-fill-color: initial !important;
    color: inherit !important;
  }