*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

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

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: "Space Mono", "JetBrains Mono", ui-monospace, monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  html {
    -webkit-text-size-adjust: 100%;
    /* keep the scrollbar's space reserved so locking scroll for a drawer, the search
       sheet or a modal cannot shift the page sideways */
    scrollbar-gutter: stable;
  }
  /* clear the three-tier sticky header when an in-page anchor is followed */
  [id] { scroll-margin-top: 7.5rem; }
  body {
  --tw-bg-opacity: 1;
  background-color: rgb(250 248 244 / var(--tw-bg-opacity, 1));
  font-family: Outfit, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
  ::selection {
  --tw-bg-opacity: 1;
  background-color: rgb(30 63 160 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(250 248 244 / var(--tw-text-opacity, 1));
}
  :focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(230 51 41 / var(--tw-ring-opacity, 1));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #FAF8F4;
}
  .ma-invert :focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(143 178 255 / var(--tw-ring-opacity, 1));
  --tw-ring-offset-color: #12275F;
}
  h1, h2, h3, h4 {
  font-family: Outfit, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

  /* 🔴 Drawer/search/menu/modal khulne par `<html>` ko `overflow-hidden` class
     milti hai (4 scripts). Wo page ka SCROLLBAR GHAYAB kar deta tha aur
     `scrollbar-gutter: stable` ki wajah se us ki jagah khali patti reh jati thi
     — client: "cart open kroon to scroll bar khatam, ajeeb". Ab class sirf
     "lock" ka nishan hai: scrollbar dikhta rehta hai, aur peeche ka page
     `drawer.js` (scroll lock section) rokti hai. `html.` specificity Tailwind
     ke `.overflow-hidden` utility ko harati hai. */
  html.overflow-hidden { overflow: visible; }
.container {
  width: 100%;
}
@media (min-width: 360px) {

  .container {
    max-width: 360px;
  }
}
@media (min-width: 375px) {

  .container {
    max-width: 375px;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1440px) {

  .container {
    max-width: 1440px;
  }
}
@media (min-width: 1920px) {

  .container {
    max-width: 1920px;
  }
}

  /* ---------- layout ---------- */
  .ma-container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1440px;
  padding-left: clamp(1rem, 4vw, 4rem);
  padding-right: clamp(1rem, 4vw, 4rem);
}

  /* ============================================================================
     🔴 COLOUR ROLES — red / white / blue. Read this before colouring anything new.

     The client's complaint that started this: buttons looked one colour on the home and
     shop pages and another on about/contact. The cause was not a stray value — it was
     that no colour had a stated job, so `accent` and `blue` were both being used for
     "important". Each now has one:

     | Colour       | Job                        | Where |
     |--------------|----------------------------|-------|
     | `accent` red | SELLS — the forward action | hero CTA, Shop all, Checkout, Place order, Send message, Sign me up (as --invert), badges, .ma-link hover, header nav underline, .ma-step__num |
     | `blue`       | SYSTEM — repeated actions and state | Add to cart (every surface, PDP included), Search, .ma-eyebrow section labels, .ma-nav-link (which-section-am-I-on), selected chips, checked boxes, .ma-stat__num |
     | `blue-light` | the same system colour on a navy band | ticker dots, footer link hover, social hover, newsletter tick, wordmark `.ca` |
     | `navy`       | dark bands | topbar, marquee, newsletter, footer, toast |
     | `ink`        | text. NOT a theme colour — do not repaint it | body copy, headings |

     Two rules that follow from the table:
     1. **One action, one colour.** "Add to cart" is blue on the cards, in the quick view
        AND on the PDP. It was red on the PDP, sitting directly above a rail of blue ones.
     2. **Blue is not decoration.** It goes on section labels and state, which every page
        has — that is why about/contact/policy read as part of the same site now, without
        blue being sprayed over them.
     ========================================================================= */

  /* ---------- micro label ---------- */
  .ma-eyebrow {
  font-family: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  --tw-text-opacity: 1;
  color: rgb(30 63 160 / var(--tw-text-opacity, 1));
}
  .ma-eyebrow--invert {
  color: rgb(250 248 244 / 0.6);
}

  /* ---------- buttons ---------- */
  /* ---------- buttons ----------
     Each button carries a ::before panel that wipes in from the left on hover, so the
     colour change reads as a movement rather than a flat swap. `isolate` + a negative
     z-index keeps that panel above the background and below the label. */
  /* ---------- buttons ----------
     Three things move on hover: the fill panel opens from the centre, a soft gloss
     travels across the face, and the whole button lifts. `isolate` plus negative
     z-index keeps both pseudo layers above the background and under the label. */
  /* Height and vertical padding, round 9: client asked for every button to be
     tighter top-to-bottom, and for the cards to match the add-to-cart inside the
     quick view modal.

     Measured before: every `.ma-btn` sat at min-h 48px with py 14px, while the
     Woo buttons on the PDP and in the quick view had come down to 40px with py 8px.
     Two systems, two answers, side by side on the same page. 40px is now the one
     answer, set here so cards, drawer, newsletter, search and hero all follow it.

     40px is the floor, not a starting point — below that a button gets hard to hit
     with a thumb. */
  html.ma-btn { overflow: visible; }
  .ma-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  min-height: 2.5rem;
  user-select: none;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  overflow: hidden;
  border-radius: 9999px;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-family: Outfit, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  .ma-btn:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
  .ma-btn:active {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

  /* fill opens from the centre */
  .ma-btn::before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0px;
    z-index: -10;
    transform-origin: center;
    --tw-scale-x: 0;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 250ms;
    transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .ma-btn:hover::before,
  .ma-btn:focus-visible::before {
  --tw-scale-x: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

  /* gloss sweeps across the face */
  .ma-btn::after {
    content: "";
    pointer-events: none;
    position: absolute;
    top: -1rem;
    bottom: -1rem;
    z-index: -10;
    width: 25%;
    --tw-translate-x: -300%;
    --tw-skew-x: 12deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    background-color: rgb(250 248 244 / 0.25);
    --tw-blur: blur(12px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 400ms;
    transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .ma-btn:hover::after,
  .ma-btn:focus-visible::after {
  --tw-translate-x: 420%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

  /* the trailing arrow, where a button has one, travels with the sweep */
  .ma-btn svg {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  .ma-btn:hover svg {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
  .ma-btn--block:hover svg, .ma-stepper__btn:hover svg {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

  /* `--lg` is for the hero and section CTAs. It stays taller than the base so the
     page still has a size hierarchy, but it came down with everything else
     (was 48/56px, now 44/48px) — 56px was the single bulkiest control on the site. */
  .ma-btn--lg {
  min-height: 2.75rem;
  gap: 0.625rem;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
}
  @media (min-width: 768px) {

  .ma-btn--lg {
    min-height: 3rem;
    gap: 0.75rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    font-size: 1rem;
    line-height: 1.6;
  }
}
  /* Kept a step below the base, which is now 40px itself. */
  .ma-btn--sm {
  min-height: 2.25rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  font-size: 0.75rem;
  line-height: 1.2;
  letter-spacing: 0.12em;
}
  .ma-btn--block {
  width: 100%;
}
  /* .ma-btn--pill kept as an alias — the base is already a pill */
  .ma-btn--pill {
  border-radius: 9999px;
}

  /* red -> paper, not red -> black. Filling to ink made the button look switched off,
     and the red glow around a black face read as a bug. */
  .ma-btn--primary {
  --tw-bg-opacity: 1;
  background-color: rgb(230 51 41 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
  .ma-btn--primary:hover {
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 12px 28px -12px rgba(11,11,12,0.45);
  --tw-shadow-colored: 0 12px 28px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
  .ma-btn--primary::before {
  --tw-bg-opacity: 1;
  background-color: rgb(250 248 244 / var(--tw-bg-opacity, 1));
}

  /* the action button — every Add to cart on the site. Blue face, red fill on hover,
     white label throughout: the three theme colours inside one control. The class keeps
     the name `--dark` because it is already on every button in the build; `--blue` is
     the alias to reach for in new markup. */
  .ma-btn--dark,
  .ma-btn--blue {
  --tw-bg-opacity: 1;
  background-color: rgb(30 63 160 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(250 248 244 / var(--tw-text-opacity, 1));
}
  .ma-btn--dark:hover,
  .ma-btn--blue:hover {
  --tw-text-opacity: 1;
  color: rgb(250 248 244 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 12px 28px -12px rgba(11,11,12,0.45);
  --tw-shadow-colored: 0 12px 28px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
  .ma-btn--dark::before,
  .ma-btn--blue::before {
  --tw-bg-opacity: 1;
  background-color: rgb(230 51 41 / var(--tw-bg-opacity, 1));
}

  .ma-btn--secondary {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(30 63 160 / var(--tw-border-opacity, 1));
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(30 63 160 / var(--tw-text-opacity, 1));
}

  .ma-btn--secondary:hover {
  --tw-text-opacity: 1;
  color: rgb(250 248 244 / var(--tw-text-opacity, 1));
}
  .ma-btn--secondary::before {
  --tw-bg-opacity: 1;
  background-color: rgb(30 63 160 / var(--tw-bg-opacity, 1));
}

  /* sits on a dark band, so it inverts the action button: white face, red fill */
  .ma-btn--invert {
  --tw-bg-opacity: 1;
  background-color: rgb(250 248 244 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
}
  .ma-btn--invert:hover {
  --tw-text-opacity: 1;
  color: rgb(250 248 244 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 12px 28px -12px rgba(11,11,12,0.45);
  --tw-shadow-colored: 0 12px 28px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
  .ma-btn--invert::before {
  --tw-bg-opacity: 1;
  background-color: rgb(230 51 41 / var(--tw-bg-opacity, 1));
}

  .ma-btn--ghost {
  border-width: 1px;
  border-color: rgba(11,11,12,0.12);
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
}

  .ma-btn--ghost:hover {
  --tw-border-opacity: 1;
  border-color: rgb(11 11 12 / var(--tw-border-opacity, 1));
}
  .ma-btn--ghost::before {
  --tw-bg-opacity: 1;
  background-color: rgb(239 234 225 / var(--tw-bg-opacity, 1));
}
  .ma-btn[disabled], .ma-btn--disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
  .ma-btn[disabled]::before, .ma-btn--disabled::before {
  --tw-scale-x: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
  .ma-btn--loading {
  pointer-events: none;
  position: relative;
  color: transparent;
}
  .ma-btn--loading::after {
    content: "";
    position: absolute;
    inset: auto;
    left: 50%;
    top: 50%;
    z-index: 0;
    height: 1rem;
    width: 1rem;
    --tw-translate-x: -50%;
    --tw-translate-y: -50%;
    --tw-skew-x: 0deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  @keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
  .ma-btn--loading::after {
  animation: spin 1s linear infinite;
  border-radius: 9999px;
  border-width: 2px;
  border-color: currentColor;
  border-top-color: transparent;
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-blur: blur(0);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

  /* Round 9: submit karte waqt button BILKUL KHALI dikhta tha.
     Client: "jab sign me up ka button submit karte hain to background colour
     button aur text ka colour same ho jata hai".

     `--loading` label ko `text-transparent` kar deta hai aur us ki jagah ek
     spinner `::after` par banata hai. Us spinner ka border `border-current` tha —
     yani wahi rang jo TEXT ka hai, aur text transparent hai. Upar se `--invert`
     button ka background paper (#FAF8F4) hai. Naapa gaya:

         button bg      rgb(250, 248, 244)
         spinner border rgb(255, 255, 255)     <- safed par safed

     ⚠️ RANG YAHAN PLAIN CSS SE DIYA GAYA HAI, `@apply` SE NAHI. Pehli koshish
     `@apply text-ink` thi aur wo bhi nakaam rahi: naapa gaya to spinner ka rang
     `rgba(11, 11, 12, 0.004)` nikla aur border `rgb(229, 231, 235)` (preflight ka
     default). Wajah `--tw-text-opacity` / `border-current` ka `text-transparent`
     wale parent ke saath ulajhna hai. Seedha border-color likhne se wo sawaal
     hi khatam. */
  .ma-btn--loading::after {
    /* 🔴 CENTRING `transform` SE NAHI, `margin` SE (round 9).
       Client: "add to cart pe click karein to loader abhi bhi neeche move kar
       raha hai, stable rehna chahiye button ke center mein".

       Base rule spinner ko `left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2`
       se beech mein laata tha, aur saath `animate-spin` bhi lagta tha. Magar
       Tailwind ke `spin` keyframes hain:

           to { transform: rotate(360deg) }

       — aur `transform` ek hi property hai. Animation chalte hi wo POORA
       transform apne rotate se badal deti hai, yani dono translate GAYAB ho jate
       hain. Spinner apni asli jagah (top: 50%, left: 50% ka kona) par chala jata
       hai — button ke beech se neeche daayin taraf. Aankh ko wo "neeche khisakna"
       lagta hai.

       Margin se centring transform par nirbhar nahi, is liye rotate use tor nahi
       sakti. */
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: 1rem;
    height: 1rem;
    margin: -0.5rem 0 0 -0.5rem;
    transform: none;
    border-color: #FFFFFF;
    border-top-color: transparent;
  }

  /* Halke background wale variants — un par safed spinner ghul jata hai. */
  .ma-btn--invert.ma-btn--loading::after,
  .ma-btn--secondary.ma-btn--loading::after,
  .ma-btn--ghost.ma-btn--loading::after {
    border-color: #0B0B0C;
    border-top-color: transparent;
  }

  .ma-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(11 11 12 / var(--tw-border-opacity, 1));
  padding-bottom: 0.25rem;
  font-family: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

  .ma-link:hover {
  --tw-border-opacity: 1;
  border-color: rgb(230 51 41 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(230 51 41 / var(--tw-text-opacity, 1));
}
  .ma-link--invert {
  --tw-border-opacity: 1;
  border-color: rgb(250 248 244 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(250 248 244 / var(--tw-text-opacity, 1));
}
  .ma-link--invert:hover {
  --tw-border-opacity: 1;
  border-color: rgb(143 178 255 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(143 178 255 / var(--tw-text-opacity, 1));
}

  /* underline-only nav link with a wipe */
  /* the policy page's sticky table of contents and the account tabs — this is "where am
     I", which is state, so it takes the system colour rather than the sales colour */
  .ma-nav-link {
  position: relative;
  display: inline-block;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-family: Outfit, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: -0.02em;
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  .ma-nav-link:hover {
  --tw-text-opacity: 1;
  color: rgb(30 63 160 / var(--tw-text-opacity, 1));
}
  .ma-nav-link::after {
    content: "";
    pointer-events: none;
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0.25rem;
    height: 1px;
    transform-origin: left;
    --tw-scale-x: 0;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-bg-opacity: 1;
    background-color: rgb(30 63 160 / var(--tw-bg-opacity, 1));
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 250ms;
    transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .ma-nav-link:hover::after, .ma-nav-link[aria-expanded="true"]::after, .ma-nav-link[aria-current="page"]::after {
  --tw-scale-x: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

  .ma-icon-btn {
  position: relative;
  display: inline-flex;
  height: 2.75rem;
  width: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

  .ma-icon-btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 234 225 / var(--tw-bg-opacity, 1));
}

  /* ---------- badges ---------- */
  .ma-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-family: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
  .ma-badge--sale {
  --tw-bg-opacity: 1;
  background-color: rgb(230 51 41 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
  .ma-badge--out {
  --tw-bg-opacity: 1;
  background-color: rgb(239 234 225 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(69 69 75 / var(--tw-text-opacity, 1));
}
  .ma-badge--count {
  position: absolute;
  right: -0px;
  top: -0px;
  height: 1.25rem;
  min-width: 1.25rem;
  justify-content: center;
  --tw-bg-opacity: 1;
  background-color: rgb(230 51 41 / var(--tw-bg-opacity, 1));
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

  /* ---------- product card (borderless: the image is the card) ---------- */
  .group:hover .ma-product-card__img--alt { opacity: 1; }
  .group:hover .ma-product-card__quickadd,
  .group:focus-within .ma-product-card__quickadd { transform: translateY(0); }
  .group:hover .ma-product-card__swatches,
  .group:focus-within .ma-product-card__swatches { opacity: 1; }

  /* ---------- product card v2 ----------
     Filled surface, no border, no colourway dots, always-visible add-to-cart,
     plus a quick-view button that opens the modal. */
  html.ma-card { overflow: visible; }
  .ma-card {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
  html.ma-card__media { overflow: visible; }
  .ma-card__media {
  position: relative;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
  /* only the transform animates, over a long easing, on its own GPU layer — the old
     `transition` shorthand at 400ms animated every property and read as a jump */
  /* product shots are flat garment photos on a tinted ground — contained, and no
     hover zoom (scaling a flat product shot just wobbles it) */
  .ma-card__img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  padding: 0.75rem;
}
  @media (min-width: 768px) {

  .ma-card__img {
    padding: 1rem;
  }
}
  .ma-card__view {
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
  display: inline-flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: rgb(255 255 255 / 0.95);
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  .ma-card__view:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(30 63 160 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(250 248 244 / var(--tw-text-opacity, 1));
}
  .ma-card__body {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  padding: 1rem;
}
  .ma-card__title {
  font-family: Outfit, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
  .ma-card__title a {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  .ma-card__title a:hover {
  --tw-text-opacity: 1;
  color: rgb(230 51 41 / var(--tw-text-opacity, 1));
}
  .ma-card__cat {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(69 69 75 / var(--tw-text-opacity, 1));
}
  .ma-card__price {
  margin-top: 0.5rem;
  font-family: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 1rem;
  line-height: 1.6;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
}
  .ma-card__swatches {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
  .ma-card__dot {
  position: relative;
  display: inline-block;
  height: 0.875rem;
  width: 0.875rem;
  border-radius: 9999px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgba(11,11,12,0.12);
}
  .ma-card__count {
  margin-left: 0.25rem;
  font-family: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  --tw-text-opacity: 1;
  color: rgb(69 69 75 / var(--tw-text-opacity, 1));
}

  /* ---------- card par sizes, aur "available nahi" ka nishan (R7-2) ----------

     Client: "cards mein direct sizes bhi bata do … aur jo available na hon un ke
     upar line laga dena".

     Do soortein ek hi nishan par aati hain, aur ye jaan-boojh kar hai: wo size
     ya colour maujood hi nahi, ya stock khatam — customer ke liye dono ka matlab
     ek hai ("ye nahi mil sakta"). Farq `title` aur screen-reader text mein hai. */

  .ma-card__sizes {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.5rem;
  row-gap: 0.25rem;
  font-family: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  --tw-text-opacity: 1;
  color: rgb(69 69 75 / var(--tw-text-opacity, 1));
}

  /* 🔴 Line `line-through` se NAHI. `line-through` text ke beech se guzarti hai
     aur ek chhote "S" par wo aksar padhne mein rukawat ban jati hai. Ek diagonal
     slash saaf dikhti hai aur "ye nahi mil sakta" ka aam nishan hai. */
  .ma-card__size--out {
  position: relative;
  color: rgb(69 69 75 / 0.45);
}
  .ma-card__size--out::after {
  pointer-events: none;
  position: absolute;
  left: -2px;
  right: -2px;
  top: 50%;
  height: 1px;
  background-color: rgb(69 69 75 / 0.6);
    content: "";
    transform: rotate(-12deg);
}

  /* Sold-out colour ka dot — usi diagonal ke saath, taake dono ek zubaan bolein. */
  .ma-card__dot--out {
  opacity: 0.45;
}
  .ma-card__dot--out::after {
  pointer-events: none;
  position: absolute;
  left: -2px;
  right: -2px;
  top: 50%;
  height: 1px;
  --tw-bg-opacity: 1;
  background-color: rgb(11 11 12 / var(--tw-bg-opacity, 1));
    content: "";
    transform: rotate(-45deg);
}
  .ma-card__media-link {
  display: block;
  height: 100%;
  width: 100%;
}
  .ma-card__cta {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding-top: 1rem;
}
  .ma-card__details {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(69 69 75 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  .ma-card__details:hover {
  --tw-text-opacity: 1;
  color: rgb(230 51 41 / var(--tw-text-opacity, 1));
}
  .ma-card__details svg {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  .ma-card__details:hover svg {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
  /* the card is narrow at 2-up on mobile — keep the label on one line */
  .ma-card__cta .ma-btn {
  width: 100%;
  white-space: nowrap;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  letter-spacing: 0em;
}
  @media (min-width: 768px) {

  .ma-card__cta .ma-btn {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    letter-spacing: 0.12em;
  }
}

  /* ---------- quick view modal ---------- */
  .ma-modal {
  position: fixed;
  inset: 0px;
  z-index: 300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-color: rgb(11 11 12 / 0.7);
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  @media (min-width: 768px) {

  .ma-modal {
    align-items: center;
    padding: 1.5rem;
  }
}
  .ma-modal {
    /* sits on the overlay layer with its own backdrop — the shared scrim stays below */
    opacity: 0;
    visibility: hidden;
  }
  .ma-modal--open { opacity: 1; visibility: visible; }
  .ma-modal__panel {
  position: relative;
  display: flex;
  max-height: 92vh;
  width: 100%;
  max-width: 56rem;
  flex-direction: column;
  overflow-y: auto;
  --tw-bg-opacity: 1;
  background-color: rgb(250 248 244 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 24px 80px -24px rgba(11,11,12,0.45);
  --tw-shadow-colored: 0 24px 80px -24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 400ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  @media (min-width: 768px) {
  html.ma-modal__panel { overflow: visible; }
  .ma-modal__panel {
    max-height: 80vh;
    flex-direction: row;
    overflow: hidden;
  }
}
  .ma-modal__panel {
    transform: translateY(1.5rem);
  }
  .ma-modal--open .ma-modal__panel { transform: translateY(0); }
  .ma-modal__media {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  flex-shrink: 0;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
  @media (min-width: 768px) {

  .ma-modal__media {
    aspect-ratio: auto;
    width: 50%;
  }
}
  .ma-modal__img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  padding: 1.5rem;
}
  @media (min-width: 768px) {

  .ma-modal__img {
    padding: 2.5rem;
  }
}
  .ma-modal__body {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
}
  @media (min-width: 768px) {

  .ma-modal__body {
    width: 50%;
    overflow-y: auto;
    padding: 2rem;
  }
}
  .ma-modal__close {
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
  z-index: 1;
  display: inline-flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: rgb(255 255 255 / 0.95);
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  .ma-modal__close:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(30 63 160 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(250 248 244 / var(--tw-text-opacity, 1));
}

  /* ---------- swatches & chips ---------- */
  .ma-swatch {
  position: relative;
  display: inline-flex;
  height: 1.5rem;
  width: 1.5rem;
  cursor: pointer;
  border-radius: 9999px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgba(11,11,12,0.12);
}
  .ma-swatch-input:checked + .ma-swatch {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(30 63 160 / var(--tw-ring-opacity, 1));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #FAF8F4;
}

  .ma-chip {
  display: inline-flex;
  min-height: 2.75rem;
  min-width: 2.75rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgba(11,11,12,0.12);
  padding-left: 1rem;
  padding-right: 1rem;
  font-family: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

  .ma-chip:hover {
  --tw-border-opacity: 1;
  border-color: rgb(11 11 12 / var(--tw-border-opacity, 1));
}
  .ma-chip-input:checked + .ma-chip {
  --tw-border-opacity: 1;
  border-color: rgb(30 63 160 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(30 63 160 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(250 248 244 / var(--tw-text-opacity, 1));
}
  .ma-chip-input:focus-visible + .ma-chip {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(230 51 41 / var(--tw-ring-opacity, 1));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #FAF8F4;
}

  /* ---------- PDP ke option groups: colour / cut / size ----------
     Round 5. Legend ke saath chuna hua naam, reference ke chaukor buttons, aur
     "is waqt mumkin nahi" ka look. */

  .ma-opt-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

  /* R5-5 — chuna hua option ka naam, legend ke saath: "COLOUR · Light Pink".
     `normal-case` isliye ke `.ma-field__label` uppercase hai aur "LIGHT PINK"
     cheekhta hai; naam ek asli lafz hai, label nahi. */
  .ma-opt-group__value {
  font-family: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0em;
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
}
  .ma-opt-group__value:empty {
  display: none;
}

  /* R5-4 — reference ke chaukor option buttons (XS S M L XL ek grid mein).

     🔴 Shape SCOPE ke saath badla hai, global nahi: `.ma-chip` pagination,
     404 ki category list aur search ke tags par bhi lagti hai — wahan wo pill
     hi rehni chahiye. */
  .ma-opt-group .ma-chip {
  min-width: 3.25rem;
  border-radius: 4px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

  /* 🔴 R5-7 — "IS WAQT MUMKIN NAHI" KA LOOK. DISABLED NAHI.

     Is store ke data mein colour aur cut bandhe hue hain (light-pink sirf
     female, natural sirf male). Pehle aisi chip par `disabled` attribute lagta
     tha aur user phans jata tha — Female par click bekaar, koi wajah nahi.

     Ab chip zinda rehti hai: click par bridge baqi attributes clear kar ke
     yehi option laga deti hai. Ye class sirf itna kehti hai ke "is ke liye
     doosra chunav badlega". Poori wajah `assets/js/variations.js` ke docblock
     mein hai. */
  .ma-opt--unavailable {
  opacity: 0.4;
}
  .ma-chip.ma-opt--unavailable {
  text-decoration-line: line-through;
}

  /* Swatch par bhi ek line (R7-5) — client: "jo available na hon un ke upar line
     laga dena". Chip par `line-through` chalta hai kyunki us mein text hai;
     swatch ek khali gol dot hai, isliye us par ek diagonal slash. Wahi nishan
     card par bhi hai (`.ma-card__dot--out`), taake dono jagah ek zubaan ho. */
  .ma-swatch.ma-opt--unavailable::after {
  pointer-events: none;
  position: absolute;
  left: -2px;
  right: -2px;
  top: 50%;
  height: 1px;
  --tw-bg-opacity: 1;
  background-color: rgb(11 11 12 / var(--tw-bg-opacity, 1));
    content: "";
    transform: rotate(-45deg);
}

  /* ---------- inline form error (red) ----------
     R5-9 — client: "agar user kuch select nhi krta to msg show kroo red color ka".
     Toast ki jagah, kyunki toast kone mein aata tha aur 4.2s baad gayab ho jata
     tha jab ke user ki nazar button par hoti hai. */
  .ma-form-error {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  border-radius: 4px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(192 57 43 / var(--tw-border-opacity, 1));
  background-color: rgb(192 57 43 / 0.06);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-family: Outfit, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(192 57 43 / var(--tw-text-opacity, 1));
}

  /* ---------- PDP trust cards (R5-4) ----------
     Reference ke 2x2 grid ka jawab. Copy asli hai — shipping/returns wahi
     baatein jo accordion mein hain. */
  .ma-pdp__trust {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 0.75rem;
  border-top-width: 1px;
  border-color: rgba(11,11,12,0.12);
  padding-top: 2rem;
}
  @media (min-width: 375px) {

  .ma-pdp__trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
  .ma-pdp__trust-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border-radius: 12px;
  border-width: 1px;
  border-color: rgba(11,11,12,0.12);
  padding: 1rem;
}
  .ma-pdp__trust-icon {
  margin-top: 0.125rem;
  display: flex;
  height: 2rem;
  width: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(239 234 225 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
}
  .ma-pdp__trust-title {
  display: block;
  font-family: Outfit, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.375;
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
}
  .ma-pdp__trust-text {
  margin-top: 0.25rem;
  display: block;
  font-family: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0em;
  --tw-text-opacity: 1;
  color: rgb(69 69 75 / var(--tw-text-opacity, 1));
}

  /* ---------- size guide modal (R5-3) ----------
     `.ma-modal` ka wahi look jo quick view ka hai, magar yahan koi image column
     nahi — isliye panel tang hai aur body poori chaudai leti hai. */
  .ma-size-guide__panel {
  max-width: 34rem;
}
  @media (min-width: 768px) {

  .ma-size-guide__panel {
    flex-direction: column;
  }
}
  .ma-size-guide__body {
  width: 100%;
  padding: 1.5rem;
}
  @media (min-width: 768px) {

  .ma-size-guide__body {
    overflow-y: auto;
    padding: 2rem;
  }
}
  .ma-size-table {
  margin-top: 1.5rem;
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
  .ma-size-table th,
  .ma-size-table td {
  border-bottom-width: 1px;
  border-color: rgba(11,11,12,0.12);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-right: 1rem;
  font-family: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.875rem;
  line-height: 1.5;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
}
  .ma-size-table thead th {
  font-size: 0.75rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  --tw-text-opacity: 1;
  color: rgb(69 69 75 / var(--tw-text-opacity, 1));
}
  .ma-size-table tbody th {
  font-weight: 700;
}

  /* ---------- forms ---------- */
  .ma-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
  .ma-field__label {
  font-family: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  --tw-text-opacity: 1;
  color: rgb(69 69 75 / var(--tw-text-opacity, 1));
}
  /* 🔴 on a dark band the label must not fall back to ink-soft. `.ma-eyebrow--invert` was
     already on the markup but lost on source order — same specificity, declared earlier.
     This wins on specificity instead, so the order stops mattering. */
  .ma-invert .ma-field__label {
  --tw-text-opacity: 1;
  color: rgb(250 248 244 / var(--tw-text-opacity, 1));
}
  .ma-input {
  min-height: 2.75rem;
  width: 100%;
  border-radius: 0px;
  border-width: 1px;
  border-color: rgba(11,11,12,0.12);
  background-color: transparent;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-family: Outfit, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  .ma-input::placeholder {
  color: rgb(69 69 75 / 0.6);
}
  .ma-input:focus {
  --tw-border-opacity: 1;
  border-color: rgb(11 11 12 / var(--tw-border-opacity, 1));
}
  .ma-input--underline {
  border-width: 0px;
  border-bottom-width: 1px;
  border-color: rgb(11 11 12 / 0.4);
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 0.75rem;
  padding-top: 0.5rem;
  font-family: Outfit, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
  .ma-input--underline::placeholder {
  font-family: Outfit, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
}
  .ma-input--underline:focus {
  --tw-border-opacity: 1;
  border-color: rgb(11 11 12 / var(--tw-border-opacity, 1));
}
  .ma-input--underline-invert {
  border-color: rgb(250 248 244 / 0.4);
  --tw-text-opacity: 1;
  color: rgb(250 248 244 / var(--tw-text-opacity, 1));
}
  .ma-input--underline-invert::placeholder {
  color: rgb(250 248 244 / 0.9);
}
  .ma-input--underline-invert:focus {
  --tw-border-opacity: 1;
  border-color: rgb(250 248 244 / var(--tw-border-opacity, 1));
}
  /* the search field sits next to a pill button, so it is a pill too */
  .ma-input--pill {
  min-height: 3rem;
  border-radius: 9999px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
  @media (min-width: 768px) {

  .ma-input--pill {
    min-height: 3.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

  /* fields on a navy band (footer newsletter) */

  /* 🔴 The field focus state is NEUTRAL, and that is a deliberate two-step decision.
     It started as the global red ring, which on an input reads as a validation error
     (client, round 16). It then became blue, which the client also rejected — blue is the
     action colour here, so on a text field it looked like a state rather than focus
     (round 21). A field now simply darkens its own border to grey and takes a faint grey
     halo: unmistakably focused, and it says nothing the field does not mean.
     Blue stays where it belongs — buttons, selected chips, checked boxes. */
  .ma-input:focus-visible {
  --tw-border-opacity: 1;
  border-color: rgb(69 69 75 / var(--tw-border-opacity, 1));
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgb(11 11 12 / 0.1);
  --tw-ring-offset-width: 0px;
}
  /* on a navy band grey is invisible, so the neutral there is paper */
  .ma-invert .ma-input:focus-visible {
  --tw-border-opacity: 1;
  border-color: rgb(250 248 244 / var(--tw-border-opacity, 1));
  --tw-ring-color: rgb(250 248 244 / 0.2);
  --tw-ring-offset-width: 0px;
}

  /* ---------- select (Tom Select) ----------
     The native <select> is replaced on any field carrying .ma-select (see select.js).
     Tom Select copies the original element's classes onto the wrapper it builds, so the
     closed control already has .ma-input's border, radius, height and type. Everything
     here strips Tom Select's own chrome, draws a caret, and repaints the menu in tokens —
     the vendor stylesheet ships greys and a blue highlight that belong to no other control.

     The vendor CSS is loaded from the CDN BEFORE build.css, so these rules win. */
  .ma-select.ts-wrapper {
  position: relative;
  display: flex;
  cursor: pointer;
  align-items: center;
  padding-right: 2.5rem;
}
  /* no font-family or font-size here on purpose: the control must inherit whatever the
     wrapper carries, otherwise .ma-select--compact's mono label is overridden by a child */
  .ma-select .ts-control {
  min-height: 0px;
  align-items: center;
  border-radius: 0px;
  border-width: 0px;
  background-color: transparent;
  padding: 0px;
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
}
  .ma-select .ts-control input {
  display: none;
}
  /* focus lands on the wrapper, not the field, so the ring rule cannot come from
     .ma-input:focus-visible — Tom Select flags the wrapper with .focus instead */
  .ma-select.focus {
  --tw-border-opacity: 1;
  border-color: rgb(69 69 75 / var(--tw-border-opacity, 1));
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgb(11 11 12 / 0.1);
  --tw-ring-offset-width: 0px;
}
  /* the vendor base stylesheet ships no caret and the native one is gone with the select */
  .ma-select.ts-wrapper::after {
    content: "";
    pointer-events: none;
    position: absolute;
    right: 1rem;
    height: 0.5rem;
    width: 0.5rem;
    --tw-rotate: 45deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    border-bottom-width: 1px;
    border-right-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(69 69 75 / var(--tw-border-opacity, 1));
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 250ms;
    transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
    top: calc(50% - 0.3rem);
  }
  .ma-select.dropdown-active.ts-wrapper::after { transform: rotate(225deg); }

  html.ma-select .ts-dropdown { overflow: visible; }

  .ma-select .ts-dropdown {
  z-index: 300;
  margin-top: 0.25rem;
  overflow: hidden;
  border-radius: 12px;
  border-width: 1px;
  border-color: rgba(11,11,12,0.12);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 24px 80px -24px rgba(11,11,12,0.45);
  --tw-shadow-colored: 0 24px 80px -24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
  .ma-select .ts-dropdown .ts-dropdown-content {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
  .ma-select .ts-dropdown .option {
  cursor: pointer;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-family: Outfit, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  .ma-select .ts-dropdown .\!option {
  cursor: pointer;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-family: Outfit, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  .ma-select .ts-dropdown .option.active {
  --tw-bg-opacity: 1;
  background-color: rgb(30 63 160 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(250 248 244 / var(--tw-text-opacity, 1));
}
  .ma-select .ts-dropdown .\!option.active {
  --tw-bg-opacity: 1;
  background-color: rgb(30 63 160 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(250 248 244 / var(--tw-text-opacity, 1));
}
  .ma-select .ts-dropdown .option[aria-selected="true"] {
  font-weight: 600;
}
  .ma-select .ts-dropdown .\!option[aria-selected="true"] {
  font-weight: 600;
}
  .ma-select .ts-dropdown .no-results {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(69 69 75 / var(--tw-text-opacity, 1));
}

  /* the shop sort control: same dropdown, but a compact mono label that sits in a toolbar */
  .ma-select--compact.ts-wrapper {
  width: auto;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-right: 2.25rem;
  font-family: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
  .ma-select--compact .ts-dropdown .option {
  font-family: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
  .ma-select--compact .ts-dropdown .\!option {
  font-family: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

  .ma-input--error {
  --tw-border-opacity: 1;
  border-color: rgb(192 57 43 / var(--tw-border-opacity, 1));
}
  .ma-help {
  font-family: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  line-height: 1.2;
  letter-spacing: 0.12em;
  --tw-text-opacity: 1;
  color: rgb(69 69 75 / var(--tw-text-opacity, 1));
}
  .ma-help--error {
  --tw-text-opacity: 1;
  color: rgb(192 57 43 / var(--tw-text-opacity, 1));
}
  /* `error` (#C0392B) navy band par kaali si lagti hai — wahan ek halka laal.
     Arbitrary value jaan-boojh kar: ye rang sirf isi ek jagah chahiye, is ke liye
     poora token banana (tailwind.config + theme.json) zyada hai. */
  .ma-invert .ma-help--error {
  --tw-text-opacity: 1;
  color: rgb(255 138 122 / var(--tw-text-opacity, 1));
}
  .ma-help--success {
  --tw-text-opacity: 1;
  color: rgb(31 138 91 / var(--tw-text-opacity, 1));
}

  .ma-check {
  display: flex;
  cursor: pointer;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.625;
}
  .ma-check__box {
  margin-top: 0.125rem;
  display: grid;
  height: 1.25rem;
  width: 1.25rem;
  flex-shrink: 0;
  place-items: center;
  border-radius: 4px;
  border-width: 1px;
  border-color: rgb(11 11 12 / 0.4);
  color: transparent;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  .ma-check__input:checked + .ma-check__box {
  --tw-border-opacity: 1;
  border-color: rgb(30 63 160 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(30 63 160 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(250 248 244 / var(--tw-text-opacity, 1));
}

  /* On the navy band, round 9: the tick was reading as black.
     It was `bg-blue-light text-ink` — a pale blue box with an ink tick. Against the
     dark band the eye reads that tick as black, which is what the client saw.

     A white tick on `blue-light` (#8FB2FF) would sit at roughly 1.9:1 — too weak to
     read. So the box drops to the solid `blue` (#1E3FA0), where white clears 7:1,
     and a `blue-light` border keeps the box itself visible against the navy
     (#1E3FA0 on #12275F is only ~1.5:1 on its own). */
  .ma-invert .ma-check__box {
  border-color: rgb(250 248 244 / 0.4);
}
  .ma-invert .ma-check__input:checked + .ma-check__box {
  --tw-border-opacity: 1;
  border-color: rgb(143 178 255 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(30 63 160 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(250 248 244 / var(--tw-text-opacity, 1));
}
  .ma-check__input:focus-visible + .ma-check__box {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(30 63 160 / var(--tw-ring-opacity, 1));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #FAF8F4;
}
  .ma-invert .ma-check__input:focus-visible + .ma-check__box {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(143 178 255 / var(--tw-ring-opacity, 1));
  --tw-ring-offset-color: #12275F;
}

  /* visually hidden but not display:none — honeypot + a11y text */
  html.ma-vh { overflow: visible; }
  .ma-vh {
  pointer-events: none;
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  white-space: nowrap;
  border-width: 0px;
  padding: 0px;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}
  .ma-skip {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 400;
  --tw-translate-y: -6rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-bg-opacity: 1;
  background-color: rgb(18 39 95 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-family: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  --tw-text-opacity: 1;
  color: rgb(250 248 244 / var(--tw-text-opacity, 1));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  .ma-skip:focus {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

  /* ---------- marquee ---------- */
  html.ma-marquee { overflow: visible; }
  .ma-marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-color: rgba(250,248,244,0.18);
  --tw-bg-opacity: 1;
  background-color: rgb(18 39 95 / var(--tw-bg-opacity, 1));
  padding-top: 1rem;
  padding-bottom: 1rem;
}
  .ma-marquee--paused .ma-marquee__track { animation-play-state: paused; }

  /* ---------- scroll rail ---------- */
  .ma-rail {
  display: flex;
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
  --tw-scroll-snap-strictness: mandatory;
  gap: 1.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.5rem;
}

  /* Scrollbar CHHUPI hai (client: "best seller ka horizontal scroll bar remove kroo").
     Pehle yahan dikhai gayi thi, kyunki desktop par mouse wheel sirf vertical hota
     hai aur chhupi bar ke saath aage jane ka rasta nazar nahi aata tha. Ab ye masla
     nahi: har `.ma-rail` (best sellers, related, category) ke neeche prev/next
     arrows hain, aur `scroll-rail.js` wheel ko horizontal scroll bana deti hai.
     🔴 Un arrows ko hatana nahi — ab wahi aage barhne ka nazar aane wala rasta hain.
     Rail ab bhi scroll karti hai (touch, trackpad, wheel); sirf patti gayab hai. */
  .ma-rail {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .ma-rail::-webkit-scrollbar { display: none; }
  .ma-rail__item {
  width: 74vw;
  flex-shrink: 0;
  scroll-snap-align: start;
}
  @media (min-width: 768px) {

  .ma-rail__item {
    width: 38vw;
  }
}
  @media (min-width: 1024px) {

  .ma-rail__item {
    width: 26vw;
  }
}
  @media (min-width: 1440px) {

  .ma-rail__item {
    width: 23rem;
  }
}
  .ma-rail-btn {
  display: inline-flex;
  height: 2.75rem;
  width: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(11 11 12 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  .ma-rail-btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(30 63 160 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(250 248 244 / var(--tw-text-opacity, 1));
}
  .ma-rail-btn:disabled {
  opacity: 0.25;
}
  .ma-rail-btn:hover:disabled {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
}

  /* ---------- editorial index numeral ---------- */
  /* ---------- promo banner ----------
     A photograph carrying the offer: image behind, scrim over it, copy on top.
     Uses Outfit at display-l rather than the hero's Anton, and sits much shorter,
     so it reads as a band inside the page and not as a second header. */
  html.ma-promo-banner { overflow: visible; }
  .ma-promo-banner {
  position: relative;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(11 11 12 / var(--tw-bg-opacity, 1));
}
  .ma-promo-banner__img {
  position: absolute;
  inset: 0px;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: right;
}
  .ma-promo-banner__scrim {
  pointer-events: none;
  position: absolute;
  inset: 0px;
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(11 11 12 / 0.9) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(11 11 12 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(11 11 12 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(11 11 12 / 0.7) var(--tw-gradient-via-position), var(--tw-gradient-to);
  --tw-gradient-to: rgb(11 11 12 / 0.3) var(--tw-gradient-to-position);
}
  @media (min-width: 768px) {

  .ma-promo-banner__scrim {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: rgb(11 11 12 / 0.9) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(11 11 12 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: rgb(11 11 12 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(11 11 12 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
    --tw-gradient-to: rgb(11 11 12 / 0.1) var(--tw-gradient-to-position);
  }
}
  .ma-promo-banner__inner {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  width: 100%;
  max-width: 1440px;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding-left: clamp(1rem, 4vw, 4rem);
  padding-right: clamp(1rem, 4vw, 4rem);
  padding-top: 4rem;
  padding-bottom: 4rem;
  --tw-text-opacity: 1;
  color: rgb(250 248 244 / var(--tw-text-opacity, 1));
}
  @media (min-width: 768px) {

  .ma-promo-banner__inner {
    gap: 1.25rem;
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
  @media (min-width: 1024px) {

  .ma-promo-banner__inner {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}
  .ma-promo-banner__eyebrow {
  font-family: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  --tw-text-opacity: 1;
  color: rgb(143 178 255 / var(--tw-text-opacity, 1));
}
  .ma-promo-banner__title {
  max-width: 22ch;
  font-family: Outfit, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
  .ma-promo-banner__sub {
  max-width: 38ch;
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgb(250 248 244 / 0.8);
}

  /* ---------- offer band ----------
     Deliberately the inverse of the hero: light ground instead of ink, Outfit
     instead of Anton, artwork on the left instead of the right. Same page, but it
     should never be mistaken for the header. */

  /* ---------- split promo band (kept for the dark variant) ---------- */
  /* on desktop the artwork leaves the container and bleeds to the viewport edge */

  html.ma-banner { overflow: visible; }

  .ma-banner {
  position: relative;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(11 11 12 / var(--tw-bg-opacity, 1));
}
  .ma-banner__img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
  .ma-banner__scrim {
  pointer-events: none;
  position: absolute;
  inset: 0px;
  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(11 11 12 / 0.85) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(11 11 12 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(11 11 12 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(11 11 12 / 0.55) var(--tw-gradient-via-position), var(--tw-gradient-to);
  --tw-gradient-to: rgb(11 11 12 / 0.1) var(--tw-gradient-to-position);
}
  .ma-banner__copy {
  position: absolute;
  inset: 0px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.25rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  --tw-text-opacity: 1;
  color: rgb(250 248 244 / var(--tw-text-opacity, 1));
}
  @media (min-width: 768px) {

  .ma-banner__copy {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
  }
}
  @media (min-width: 1024px) {

  .ma-banner__copy {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

  /* ---------- numbered process steps ---------- */
  .ma-step {
  display: flex;
  gap: 1.5rem;
  border-top-width: 1px;
  border-color: rgba(11,11,12,0.12);
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
  .ma-step:first-child {
  border-top-width: 0px;
  padding-top: 0px;
}
  .ma-step__num {
  flex-shrink: 0;
  font-family: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  --tw-text-opacity: 1;
  color: rgb(230 51 41 / var(--tw-text-opacity, 1));
}
  .ma-step__title {
  font-family: Outfit, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
}
  .ma-step__body {
  margin-top: 0.5rem;
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.6;
  --tw-text-opacity: 1;
  color: rgb(69 69 75 / var(--tw-text-opacity, 1));
}

  /* ---------- brand preloader ----------
     Just the wordmark and a filling rule. Pure CSS: the bar fills, then the panel
     fades out on its own timeline. No JavaScript, so a script failure can never
     trap the page behind it. */
  .ma-preloader {
  position: fixed;
  inset: 0px;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  --tw-bg-opacity: 1;
  background-color: rgb(250 248 244 / var(--tw-bg-opacity, 1));
  padding-left: clamp(1rem, 4vw, 4rem);
  padding-right: clamp(1rem, 4vw, 4rem);
}
  @media (prefers-reduced-motion: no-preference) {

  @keyframes preload-out {}

  .ma-preloader {
    animation: preload-out 2800ms linear forwards;
  }
}
  .ma-preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
  .ma-preloader__logo {
  height: 2rem;
  width: auto;
}
  @media (min-width: 768px) {

  .ma-preloader__logo {
    height: 2.5rem;
  }
}
  html.ma-preloader__bar { overflow: visible; }
  .ma-preloader__bar {
  display: block;
  height: 1px;
  width: 8rem;
  overflow: hidden;
  background-color: rgba(11,11,12,0.12);
}
  .ma-preloader__fill {
  display: block;
  height: 100%;
  transform-origin: left;
  --tw-bg-opacity: 1;
  background-color: rgb(230 51 41 / var(--tw-bg-opacity, 1));
}
  @media (prefers-reduced-motion: no-preference) {

  @keyframes bar-fill {}

  .ma-preloader__fill {
    animation: bar-fill 2200ms cubic-bezier(0.35, 0, 0.2, 1) both;
  }
}

  /* ---------- overlays, drawers ---------- */
  .ma-scrim {
  position: fixed;
  inset: 0px;
  z-index: 200;
  background-color: rgb(11 11 12 / 0.6);
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
    opacity: 0;
    visibility: hidden;
}
  .ma-scrim--open { opacity: 1; visibility: visible; }

  .ma-drawer {
  position: fixed;
  top: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 300;
  display: flex;
  width: 100%;
  max-width: 27rem;
  flex-direction: column;
  --tw-bg-opacity: 1;
  background-color: rgb(250 248 244 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 24px 80px -24px rgba(11,11,12,0.45);
  --tw-shadow-colored: 0 24px 80px -24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 400ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
    transform: translateX(100%);
}
  .ma-drawer--open { transform: translateX(0); }
  .ma-drawer, .ma-search-overlay { will-change: transform; }
  .ma-drawer__head {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom-width: 1px;
  border-color: rgba(11,11,12,0.12);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
  .ma-drawer__body {
  min-height: 0px;
  flex: 1 1 0%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

  /* 🔴 Cart drawer mein head aur body/foot ke beech ek wrapper hai
     (`.ma-cart-drawer__inner`, fragments isi ko badalte hain). Is ka koi rule
     nahi tha — yani wo ek saada block tha, `.ma-drawer__body` ka `flex-1` be-asar
     tha, aur zyada items par list lambi ho kar Checkout / View full bag ko screen
     se NEECHE dhakel deti thi. Ab wrapper bhi flex column hai: list apni jagah
     scroll karti hai, buttons hamesha neeche nazar aate hain.
     `min-h-0` dono par zaroori hai — flex item ka default `min-height:auto`
     content se chhota hone hi nahi deta. */
  .ma-cart-drawer__inner {
  display: flex;
  min-height: 0px;
  flex: 1 1 0%;
  flex-direction: column;
}
  .ma-drawer__foot {
  flex-shrink: 0;
  border-top-width: 1px;
  border-color: rgba(11,11,12,0.12);
  --tw-bg-opacity: 1;
  background-color: rgb(250 248 244 / var(--tw-bg-opacity, 1));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

  /* the cart drawer's free-shipping progress bar was removed in round 18 (client). The
     PDP keeps its own version — `.ma-pdp__ship` / `.ma-pdp__ship-bar`. */

  /* one line item */
  /* ---------- cart / checkout line-item thumb ----------
     A garment shot is a flat photo of the whole print, so it is contained on white and
     never cropped — the same rule the cards, the PDP and the quick view follow. These
     were the last product images in the build still on `object-cover` and a tinted
     ground, both of which the client has already had corrected elsewhere. */

  .ma-cart-item {
  display: flex;
  gap: 1rem;
  border-bottom-width: 1px;
  border-color: rgba(11,11,12,0.12);
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

  /* R6-4 — client: "drawer mein image ko thora acha karo, background par colour
     add karo aur proper square mein ho".

     Pehle ye `bg-surface` (safed) thi aur image `object-contain p-1.5` par —
     yani safed dabbe mein ek chhoti si shirt, chaaron taraf khali jagah, aur
     shirt ka safed kinara background mein ghul jata tha.

     Ab wahi tareeqa jo PDP ke stage (R4-1) aur checkout ke review par hai:
     `bg-paper-2` ka halka tint + `mix-blend-multiply`. Product ki tasveerein
     PURE WHITE background par shoot hui hain, isliye multiply un ka background
     gayab kar deta hai aur garment tint par baithta hai — square poora bharta
     hai aur kinara saaf nazar aata hai. */
  html.ma-cart-item__media { overflow: visible; }
  .ma-cart-item__media {
  aspect-ratio: 1 / 1;
  width: 4.5rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 12px;
  --tw-bg-opacity: 1;
  background-color: rgb(239 234 225 / var(--tw-bg-opacity, 1));
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgba(11,11,12,0.12);
}
  /* ⚠️ `object-contain`, `cover` NAHI (R8-6). Client: "cart ke drawer mein
     images ko contain karo, cover kyun rakhi hain — user ko full image show
     honi chahiye". `cover` square bharne ke liye tasveer ko KAAT deta hai, aur
     t-shirt ke aastin/hem kat jate thay. `contain` poori shirt dikhata hai;
     square ka bacha hua hissa `bg-paper-2` ka tint bhar deta hai. */
  .ma-cart-item__img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  padding: 0.25rem;
  mix-blend-mode: multiply;
}
  .ma-cart-item__body {
  display: flex;
  min-width: 0px;
  flex: 1 1 0%;
  flex-direction: column;
}
  .ma-cart-item__title {
  font-family: Outfit, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.375;
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
}
  .ma-cart-item__opts {
  margin-top: 0.125rem;
  font-size: 0.875rem;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(69 69 75 / var(--tw-text-opacity, 1));
}
  .ma-cart-item__row {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
  .ma-cart-item__price {
  font-family: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.875rem;
  line-height: 1.5;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
}
  .ma-cart-item__remove {
  margin-top: 0.5rem;
  align-self: flex-start;
  font-size: 0.875rem;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(69 69 75 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
  text-decoration-color: rgba(11,11,12,0.12);
  text-underline-offset: 4px;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  .ma-cart-item__remove:hover {
  --tw-text-opacity: 1;
  color: rgb(230 51 41 / var(--tw-text-opacity, 1));
  text-decoration-color: #E63329;
}

  /* quantity stepper */
  .ma-stepper {
  display: inline-flex;
  align-items: center;
  border-width: 1px;
  border-color: rgba(11,11,12,0.12);
}
  .ma-stepper__btn {
  display: inline-flex;
  height: 2.25rem;
  width: 2.25rem;
  align-items: center;
  justify-content: center;
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  .ma-stepper__btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 234 225 / var(--tw-bg-opacity, 1));
}
  .ma-stepper__btn:disabled {
  opacity: 0.3;
}
  .ma-stepper__btn:hover:disabled {
  background-color: transparent;
}
  .ma-stepper__input {
  height: 2.25rem;
  width: 2.25rem;
  border-width: 0px;
  background-color: transparent;
  padding: 0px;
  text-align: center;
  font-family: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.875rem;
  line-height: 1.5;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
}
  .ma-stepper__input:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

  /* totals */
  .ma-cart-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
  .ma-cart-total__label {
  font-family: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  --tw-text-opacity: 1;
  color: rgb(69 69 75 / var(--tw-text-opacity, 1));
}
  .ma-cart-total__value {
  font-family: Outfit, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
}

  .ma-overlay-panel {
  position: fixed;
  inset: 0px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  --tw-bg-opacity: 1;
  background-color: rgb(250 248 244 / var(--tw-bg-opacity, 1));
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
    opacity: 0;
    visibility: hidden;
}
  .ma-overlay-panel--open { opacity: 1; visibility: visible; }

  /* the search panel is a sheet that drops from the header, not a full-screen takeover.
     The mobile menu keeps the full-screen treatment. */
  .ma-search-overlay {
  left: 0px;
  right: 0px;
  bottom: auto;
  top: 0px;
  display: block;
  max-height: 70vh;
  overflow-y: auto;
  border-bottom-width: 1px;
  border-color: rgba(11,11,12,0.12);
  --tw-bg-opacity: 1;
  background-color: rgb(250 248 244 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 24px 80px -24px rgba(11,11,12,0.45);
  --tw-shadow-colored: 0 24px 80px -24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
    transform: translateY(-1.25rem);
}
  .ma-search-overlay.ma-overlay-panel--open { transform: translateY(0); }
  .ma-search__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}
  .ma-search__row {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
  @media (min-width: 768px) {

  .ma-search__row {
    gap: 1rem;
  }
}
  .ma-search__tags {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  border-top-width: 1px;
  border-color: rgba(11,11,12,0.12);
  padding-top: 1.5rem;
}

  /* full-screen mobile menu link stagger */
  .ma-menu-link {
  display: block;
  font-family: Outfit, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: clamp(1.875rem, 3.6vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

  /* ---------- mobile menu ka categories dropdown (R6-11) ----------
     `<details>`/`<summary>` par bana hai, isliye koi JS nahi chahiye — poori
     wajah `template-parts/overlays/mobile-menu.php` mein likhi hai. */
  .ma-menu-group__summary {
  display: flex;
  cursor: pointer;
  list-style-type: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
  /* Safari/Chrome ka default triangle — hamara apna chevron hai. */
  .ma-menu-group__summary::-webkit-details-marker { display: none; }
  .ma-menu-group__summary::marker { content: ""; }

  .ma-menu-group__chevron {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  .ma-menu-group[open] .ma-menu-group__chevron {
  --tw-rotate: -180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

  /* Round 9: khuli hui list mein saans nahi thi.
     Client: "mobile menu ke sidebar mein categories mein space hi nahi hai,
     padding add karo".

     Naapa gaya tha: `gap-1` yani sirf 4px, aur links par koi vertical padding
     nahi — das categories ek doosre se chipki hui thin, aur `Categories` ke
     summary se pehli category ka faasla bhi 4px hi tha. `pb-2` neeche wala
     faasla deta hai, warna aakhri category seedha `About` se ja lagti thi. */
  .ma-menu-group__body {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
}

  /* Category ke links parent se chhote — warna nau `text-h1` rows poora screen
     kha jati hain, jo bilkul wahi masla tha jis ki wajah se ye dropdown bana.

     ⚠️ `py-2.5` sirf khoobsurti nahi: is ke baghair har row ~19px ki thi, yani
     ungli se dabane ke liye bahut chhoti. Padding ke saath row ~40px ho jati hai
     — wahi hadd jo is site ke buttons par hai. */
  .ma-menu-link--sub {
  display: block;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  --tw-text-opacity: 1;
  color: rgb(69 69 75 / var(--tw-text-opacity, 1));
}
  .ma-menu-link--sub:hover {
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
}
  @media (prefers-reduced-motion: no-preference) {

  @keyframes fade-up {}

  .ma-menu--open .ma-menu-link {
    animation: fade-up 400ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
}

  /* ---------- mega menu ---------- */
  .ma-mega {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 100%;
  transform-origin: top;
  border-top-width: 1px;
  border-color: rgba(11,11,12,0.12);
  --tw-bg-opacity: 1;
  background-color: rgb(250 248 244 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 24px 80px -24px rgba(11,11,12,0.45);
  --tw-shadow-colored: 0 24px 80px -24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
    opacity: 0;
    visibility: hidden;
}
  .ma-mega__link {
  display: block;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-family: Outfit, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(69 69 75 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  .ma-mega__link:hover {
  --tw-text-opacity: 1;
  color: rgb(230 51 41 / var(--tw-text-opacity, 1));
}
  html.ma-mega__feature { overflow: visible; }
  .ma-mega__feature {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 12px;
  --tw-bg-opacity: 1;
  background-color: rgb(239 234 225 / var(--tw-bg-opacity, 1));
}
  .ma-mega__img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 400ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  @media (prefers-reduced-motion: no-preference) {

  .group:hover .ma-mega__img {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}
  .ma-mega__veil {
  pointer-events: none;
  position: absolute;
  inset: 0px;
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(11 11 12 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(11 11 12 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(11 11 12 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(11 11 12 / 0.25) var(--tw-gradient-via-position), var(--tw-gradient-to);
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
  .ma-mega__caption {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(250 248 244 / var(--tw-text-opacity, 1));
}
  .ma-mega--open { opacity: 1; visibility: visible; }

  /* ---------- scroll reveal ---------- */
  @media (prefers-reduced-motion: no-preference) {

  .ma-reveal {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 400ms;
    transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
}
  .ma-reveal--armed { opacity: 0; transform: translateY(1.5rem); }

  /* ---------- header: topbar / logo row / nav row ---------- */
  .ma-header {
  position: sticky;
  top: 0px;
  z-index: 100;
  --tw-bg-opacity: 1;
  background-color: rgb(250 248 244 / var(--tw-bg-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  .ma-header--scrolled {
  border-bottom-width: 1px;
  border-color: rgba(11,11,12,0.12);
}

  /* tier 1 — contact left, rotating promo centre, social right. Collapses on scroll. */
  html.ma-topbar { overflow: visible; }
  .ma-topbar {
  max-height: 4rem;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(18 39 95 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(250 248 244 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  .ma-header--scrolled .ma-topbar {
  max-height: 0px;
  opacity: 0;
}
  .ma-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
  .ma-topbar__meta {
  display: none;
  flex-shrink: 0;
  align-items: center;
  gap: 1.5rem;
}
  @media (min-width: 768px) {

  .ma-topbar__meta {
    display: flex;
  }
}
  .ma-topbar__promo {
  display: flex;
  min-width: 0px;
  flex: 1 1 0%;
  align-items: center;
  justify-content: center;
}
  html.ma-ticker { overflow: visible; }
  .ma-ticker {
  position: relative;
  display: flex;
  width: 100%;
  overflow: hidden;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
  /* soft ends so the loop fades out instead of hard-cutting mid-word */
  .ma-ticker::before, .ma-ticker::after {
    content: "";
    pointer-events: none;
    position: absolute;
    top: 0px;
    bottom: 0px;
    z-index: 1;
    width: 2.5rem;
  }
  .ma-ticker::before {
  left: 0px;
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: #12275F var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(18 39 95 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
  .ma-ticker::after {
  right: 0px;
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
  --tw-gradient-from: #12275F var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(18 39 95 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
  .ma-ticker__track {
  display: flex;
  width: max-content;
  flex-shrink: 0;
  align-items: center;
  gap: 3.5rem;
  padding-right: 3.5rem;
}
  @media (prefers-reduced-motion: no-preference) {

  @keyframes marquee {}

  .ma-ticker__track {
    animation: marquee 26s linear infinite;
  }
}
  .ma-ticker__item {
  font-family: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgb(250 248 244 / 0.85);
}
  .ma-ticker__dot {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(143 178 255 / var(--tw-text-opacity, 1));
}
  .ma-topbar__link {
  font-family: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  line-height: 1.2;
  letter-spacing: 0.12em;
  color: rgb(250 248 244 / 0.7);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  .ma-topbar__link:hover {
  --tw-text-opacity: 1;
  color: rgb(143 178 255 / var(--tw-text-opacity, 1));
}
  .ma-topbar__social {
  display: none;
  flex-shrink: 0;
  align-items: center;
  gap: 0.25rem;
}
  @media (min-width: 768px) {

  .ma-topbar__social {
    display: flex;
  }
}
  .ma-topbar__icon {
  display: inline-flex;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  color: rgb(250 248 244 / 0.7);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  .ma-topbar__icon:hover {
  --tw-text-opacity: 1;
  color: rgb(143 178 255 / var(--tw-text-opacity, 1));
}

  /* tier 2 — one row: logo, inline nav, utilities. Nothing sits in its own band. */
  /* justify-between matters below lg: the nav is display:none there, so without it the
     logo and the utility icons collapse together on the left */
  .ma-header__bar {
  display: flex;
  min-width: 0px;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  @media (min-width: 768px) {

  .ma-header__bar {
    gap: 1.5rem;
  }
}
  @media (min-width: 1024px) {

  .ma-header__bar {
    gap: 2.5rem;
  }
}
  .ma-header--scrolled .ma-header__bar {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
  /* the wordmark is the loudest brand asset on the page, so it sits large at rest and
     only steps down once the header sticks — the sticky bar stays shallow either way.
     Sizing lives here, not in the markup, so all 12 pages move together. */
  /* 32px on mobile is the ceiling: the wordmark is 520x110, so at 40px it was 189px wide
     and the logo + three 44px icons no longer fit inside a 360px screen. Desktop keeps
     the large mark the client asked for. */
  .ma-logo__img {
  height: 2rem;
  width: auto;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  @media (min-width: 768px) {

  .ma-logo__img {
    height: 3.5rem;
  }
}

  /* Round 9: 320px par POORA PAGE 14px side scroll kar raha tha.
     Client: "576 se neeche make sure responsive ho sab kuch".

     Naapa gaya (320px viewport, client 305px):

         row (.ma-header__bar)   w=273   <- container ke 16px padding ke baad
           a.ma-logo   shrink-0  w=151
           div (icons) shrink-0  w=140   -> right=319, yani 14px bahar
                       gap                  12
                                          ----
                                          303  jab ke jagah 273 thi

     Dono par `shrink-0` tha, is liye koi jhukta hi nahi tha aur farq page ke
     scroll mein chala jata tha.

     Sab se chhoti screens par logo ko jhukne diya gaya hai — icons ko chhota
     karna zyada mehnga hota, wo 44px ke tap targets hain aur unhein chhota karna
     asli usability ka nuqsan hai. `height: auto` ke saath logo apni nisbat par
     hi chhota hota hai, chipakta nahi. */
  @media (max-width: 360px) {
    /* 🔴 SELECTOR MEIN `.ma-header__bar` KYUN — DO RULES KO HARANA THA.
       Pehli koshish `.ma-logo` / `.ma-logo__img` par thi. Home page par chal gayi,
       magar SHOP par bilkul asar nahi hua (logo wahan 520px hi raha). Naap kar
       dono wajah milin:

         wp.css   `.woocommerce img, .woocommerce-page img { max-width: 100% }`
                  (0,1,1) — meri (0,1,0) se zyada. Aur wo rule SIRF Woo pages par
                  lagta hai, isi liye home theek tha aur shop nahi.

         Tailwind `shrink-0` utility (markup mein) bhi (0,1,0) hai aur utilities
                  layer components ke BAAD aati hai, is liye wo bhi jeet rahi thi.

       `.ma-header__bar` lagane se dono (0,2,0) par haar jate hain. */
    .ma-header__bar .ma-logo { min-width: 0; flex-shrink: 1; }
    .ma-header__bar .ma-logo__img { height: auto; max-width: 7.25rem; }
  }
  .ma-header--scrolled .ma-logo__img {
  height: 2rem;
}
  @media (min-width: 768px) {

  .ma-header--scrolled .ma-logo__img {
    height: 3rem;
  }
}

  .ma-nav {
  display: none;
  flex: 1 1 0%;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
}

  @media (min-width: 1024px) {

  .ma-nav {
    display: flex;
  }
}

  @media (min-width: 1440px) {

  .ma-nav {
    gap: 2.5rem;
  }
}
  .ma-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-family: Outfit, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  .ma-nav__link:hover {
  --tw-text-opacity: 1;
  color: rgb(230 51 41 / var(--tw-text-opacity, 1));
}
  .ma-nav__link::after {
    content: "";
    pointer-events: none;
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0.125rem;
    height: 1px;
    transform-origin: left;
    --tw-scale-x: 0;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-bg-opacity: 1;
    background-color: rgb(230 51 41 / var(--tw-bg-opacity, 1));
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 250ms;
    transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .ma-nav__link:hover::after,
  .ma-nav__link[aria-expanded="true"]::after,
  .ma-nav__link[aria-current="page"]::after {
  --tw-scale-x: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

  /* ---------- hero ----------
     One composition for all five slides: identical scrim, copy always bottom-left
     on mobile and centre-left on desktop. No per-slide alignment or colour variants. */
  /* ---------- hero ----------
     The artwork carries no text, so the copy lives in HTML and stays editable.
     Its styling mirrors the reference artwork: letterspaced eyebrow, condensed
     Anton headline, red pill CTA. The slide is sized to sit inside one viewport. */
  .ma-hero {
  position: relative;
}
  html.ma-hero__slide { overflow: visible; }
  .ma-hero__slide {
  position: relative;
  height: 68svh;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(11 11 12 / var(--tw-bg-opacity, 1));
}
  @media (min-width: 768px) {

  .ma-hero__slide {
    height: calc(100svh - 7rem);
    max-height: 44rem;
  }
}
  .ma-hero__img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
  /* 🔴 The mobile overlay is much heavier than the desktop one, and that is deliberate.
     Below md the whole copy stack sits over the photo in a narrow frame, so a gradient
     that faded to transparent left the store line and eyebrow sitting on bare artwork.
     From md the gradient turns left-to-right, where the copy only ever covers the dark
     half, so it can stay light and let the photograph through. */
  .ma-hero__scrim {
  pointer-events: none;
  position: absolute;
  inset: 0px;
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(11 11 12 / 0.9) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(11 11 12 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(11 11 12 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(11 11 12 / 0.75) var(--tw-gradient-via-position), var(--tw-gradient-to);
  --tw-gradient-to: rgb(11 11 12 / 0.55) var(--tw-gradient-to-position);
}
  @media (min-width: 768px) {

  .ma-hero__scrim {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: rgb(11 11 12 / 0.85) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(11 11 12 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: rgb(11 11 12 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(11 11 12 / 0.45) var(--tw-gradient-via-position), var(--tw-gradient-to);
    --tw-gradient-to: transparent var(--tw-gradient-to-position);
  }
}

  /* ---------- hero: the store line ----------
     The client's own tagline, kept from the old site. It is the FIRST line of each slide's
     copy stack, not a separate pinned layer.

     🔴 It was tried as a standing overlay at the top of the frame (rev 19) and the client
     rejected it: floating alone above 150px of empty scrim it read as text stuck onto the
     screen, unrelated to the slide, and it sat frozen while the rest of the copy animated
     in. Inside the stack the left column reads as one unit and the line animates with it.
     Same text on all five slides — it is the store's voice, so it never varies. */
  /* R6-12 — client: "home page mein header mein 'your convivial ...' wale text
     ka size thora big karo".

     Pehle: body-l (18px) -> h3 -> h2. Ye store ki AWAAZ hai aur hero par sab se
     pehli cheez jo padhi jati hai, magar headline ke saath wo daboo jati thi.
     Ab ek darja upar: h3 -> h2 -> h1. `max-w` bhi thora khula, warna bara text
     mobile par teen lines mein toot jata. */
  /* Round 9: mobile par ye 17px ka reh jata tha (`text-h3` ka clamp floor
     1.0625rem), yani hero ki sab se ehem line sab se chhoti. Client ne 30px
     manga.

     `text-h1` ka clamp `clamp(1.875rem, 3.6vw, 2.75rem)` hai — us ka floor
     THEEK 1.875rem = 30px. 767px par 3.6vw sirf 27.6px banta hai, is liye clamp
     floor lagta hai aur 30px milta hai; 375px par bhi wahi. Bare screens par wo
     khud barh kar 44px tak jata hai.

     Is liye teen alag steps (h3 / md:h2 / lg:h1) ki zaroorat hi nahi rahi — ek
     hi clamp poora range sambhal leta hai. */
  /* Round 30 (2026-09-24) — client: "Yes, I like the font and colour you have on
     the left side, just have it laid out just like it is on the current site;
     with the same wording."  Screenshot bhi bheja: purani site ka hero.

     Yani teen mein se SIRF ek cheez badalni thi:
       font    Baloo 2            -> waisa hi rehne do (client ko pasand hai)
       colour  white + red <em>   -> waisa hi rehne do (client ko pasand hai)
       LAYOUT  chhoti ek-line     -> purani site jaisa BARA, chaar lines mein

     🔴 `max-w` hi asal control hai, font-size nahi. Purani site par line
     "Your / Convivial and / Witty T-Shirt / Store" par tootti hai.
     `md:max-w-none` hata diya gaya: us ke saath bara text ek hi lambi line ban
     jata tha aur wo purani site jaisa lagta hi nahi.

     🔴 10.5ch KA NUMBER NAAPA GAYA HAI, ANDAZA NAHI. Browser mein har line ki
     asal width naapi gayi (Baloo 2 @ 70.4px, 1ch = 43px):

         "Your"           149px     "Your Convivial"        458px
         "Convivial and"  431px     "Convivial and Witty"   619px
         "Witty T-Shirt"  408px     "Witty T-Shirt Store"   596px
         "Store"          174px

     Browser GREEDY wrap karta hai, is liye har line par DO shartein hain: line
     khud fit ho, AUR agla lafz us par na aa sake. Sab ko mila kar window sirf
     itni si bachti hai:

         431px <= measure < 458px      ->      10.02ch <= measure < 10.65ch

     10.5ch us ke beech mein hai. Do ghalat koshishein pehle ho chuki hain:
       14ch -> 2 lines      (window se bahar)
       12ch -> 3 lines      ("Your Convivial" ek hi line par chala gaya —
                             sirf "Convivial and" naapna kaafi nahi tha)

     ⚠️ Window tang hai. Baloo 2 load na ho aur fallback (Trebuchet MS) chale to
     metrics badal jayengi aur wrap bhi. Font self-hosted hai is liye ye sirf
     tab hoga jab woff2 hi ghayab ho.

     `ch` is liye — px nahi — ke wo font-size ke saath khud scale karta hai, to
     wrap har breakpoint par ek jaisa rehta hai.

     `text-hero` = clamp(2.5rem, 5.5vw, 5rem) -> 375px par 40px, 1440px par 80px.
     Pehle `text-h1` tha (30->44px), jo client ke mutabiq chhota tha.

     leading `1.1` jaan-boojh kar — token ka apna 1.02 Anton ke liye bana hai.
     Baloo 2 ka x-height bara hai aur "Your" ka `y` descender agli line ke
     "Convivial" se taqreeban chipak jata hai. */
  .ma-hero__tagline {
  max-width: 10.5ch;
  font-family: "Baloo 2", "Trebuchet MS", Verdana, sans-serif;
  font-size: clamp(2.5rem, 5.5vw, 5rem);
  letter-spacing: 0em;
  font-weight: 800;
  line-height: 1.1;
  --tw-text-opacity: 1;
  color: rgb(250 248 244 / var(--tw-text-opacity, 1));
}
  .ma-hero__tagline em {
  font-style: normal;
  --tw-text-opacity: 1;
  color: rgb(230 51 41 / var(--tw-text-opacity, 1));
}
  /* Round 9: 767px se neeche copy `items-end pb-16` ki wajah se hero ke NEECHE
     chipak jati thi — client ne usay beech mein manga. Desktop par wo pehle se
     beech mein thi, ab har naap par ek jaisa. */
  .ma-hero__copy {
  position: absolute;
  inset: 0px;
  display: flex;
  align-items: center;
}
  .ma-hero__inner {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  width: 100%;
  max-width: 1440px;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding-left: clamp(1rem, 4vw, 4rem);
  padding-right: clamp(1rem, 4vw, 4rem);
}
  @media (min-width: 768px) {

  .ma-hero__inner {
    gap: 1.25rem;
  }
}
  .ma-hero__eyebrow {
  font-family: Outfit, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgb(250 248 244 / 0.75);
}
  .ma-hero__headline {
  max-width: 20ch;
  font-family: Anton, Impact, Haettenschweiler, sans-serif;
  font-size: clamp(2.5rem, 5.5vw, 5rem);
  line-height: 1.02;
  letter-spacing: 0em;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(250 248 244 / var(--tw-text-opacity, 1));
}
  .ma-hero__sub {
  max-width: 34ch;
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgb(250 248 244 / 0.85);
}
  /* copy rises in from below every time a slide becomes active — Swiper moves the
     active class, which restarts the animation without any JS writing styles */
  @media (prefers-reduced-motion: no-preference) {

  @keyframes rise-in {}

  .swiper-slide-active .ma-hero__inner > * {
    animation: rise-in 620ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
}
  .swiper-slide-active .ma-hero__inner > *:nth-child(1) { animation-delay: 60ms; }
  .swiper-slide-active .ma-hero__inner > *:nth-child(2) { animation-delay: 150ms; }
  .swiper-slide-active .ma-hero__inner > *:nth-child(3) { animation-delay: 240ms; }
  .swiper-slide-active .ma-hero__inner > *:nth-child(4) { animation-delay: 330ms; }
  .swiper-slide-active .ma-hero__inner > *:nth-child(5) { animation-delay: 420ms; }
  /* stacked at the right edge — the copy is left-aligned, so edge-split arrows
     would land on top of the subline */
  .ma-hero__nav {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  z-index: 1;
  display: flex;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  flex-direction: column;
  gap: 0.5rem;
}
  @media (min-width: 768px) {

  .ma-hero__nav {
    right: 1.5rem;
    gap: 0.75rem;
  }
}
  .ma-hero-nav {
  display: inline-flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(250 248 244 / 0.4);
  background-color: rgb(11 11 12 / 0.35);
  --tw-text-opacity: 1;
  color: rgb(250 248 244 / var(--tw-text-opacity, 1));
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  .ma-hero-nav:hover {
  --tw-border-opacity: 1;
  border-color: rgb(250 248 244 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(250 248 244 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
}
  @media (min-width: 768px) {

  .ma-hero-nav {
    height: 3rem;
    width: 3rem;
  }
}
  .ma-hero__rail {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  z-index: 1;
  display: flex;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  align-items: center;
  gap: 0.75rem;
  border-radius: 9999px;
  background-color: rgb(11 11 12 / 0.45);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
  @media (min-width: 768px) {

  .ma-hero__rail {
    bottom: 1.75rem;
    gap: 1rem;
  }
}
  /* the segments are decoration — they go first when there is no room for them */
  .ma-hero__progress {
  display: none;
}
  @media (min-width: 375px) {

  .ma-hero__progress {
    display: flex;
  }
}
  .ma-hero__counter {
  white-space: nowrap;
  font-family: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  line-height: 1.2;
  text-transform: uppercase;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  letter-spacing: 0.12em;
  --tw-text-opacity: 1;
  color: rgb(250 248 244 / var(--tw-text-opacity, 1));
}
  .ma-hero__progress {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
  .ma-hero__seg {
  height: 1px;
  width: 1.25rem;
  background-color: rgb(250 248 244 / 0.3);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 400ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  @media (min-width: 768px) {

  .ma-hero__seg {
    width: 1.75rem;
  }
}
  .ma-hero__seg--on {
  --tw-bg-opacity: 1;
  background-color: rgb(250 248 244 / var(--tw-bg-opacity, 1));
}

  /* ---------- category bento tile ---------- */

  /* ---------- category circle rail ---------- */
  /* 🔴 Round 31 — client: "shop by category me jo scroll a rha ha wo nhi chye".
     Scrollbar chhupi hui hai, magar rail SCROLL karti hai — sirf bar nazar nahi
     aati.

     ⚠️ Pehle ye jaan-boojh kar DIKHAI gayi thi (round 6): 9 categories mein se
     sirf 5 nazar aati thin aur baqi tak pahunchne ka koi ishara nahi tha. Wo
     masla ab bhi maujood hai — is liye rail ke NEECHE wale prev/next arrows
     (`.ma-rail-prev` / `.ma-rail-next`, `blocks/category-rail/render.php`) ab
     wahid rasta hain. Un ko hatana nahi, warna 4 categories dobara ghayab ho
     jayengi.

     `scrollbar-width` AUR `::-webkit-scrollbar` dono chahiyen: Firefox pehla
     padhta hai, Chromium/Safari doosra. Yahan dono sirf CHHUPANE ke liye hain,
     style karne ke liye nahi — is liye wo Chromium wala tasaadum (jo `.ma-rail`
     ke comment mein likha hai) yahan lagta hi nahi. */
  .ma-cats {
  display: flex;
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
  --tw-scroll-snap-strictness: mandatory;
  gap: 1.25rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}
  @media (min-width: 768px) {

  .ma-cats {
    gap: 2rem;
  }
}
  .ma-cats {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .ma-cats::-webkit-scrollbar { display: none; }
  .ma-cats > li {
  flex-shrink: 0;
}
  .ma-cat {
  display: flex;
  width: 7.5rem;
  flex-shrink: 0;
  scroll-snap-align: start;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
  @media (min-width: 768px) {

  .ma-cat {
    width: 10rem;
  }
}
  @media (min-width: 1024px) {

  .ma-cat {
    width: 11rem;
  }
}
  html.ma-cat__media { overflow: visible; }
  .ma-cat__media {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(239 234 225 / var(--tw-bg-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  .ma-cat__img {
  height: 100%;
  width: 100%;
  transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  object-fit: cover;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
  @media (prefers-reduced-motion: no-preference) {

  .group:hover .ma-cat__img {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}
  .ma-cat__name {
  font-family: Outfit, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.375;
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  @media (prefers-reduced-motion: no-preference) {

  .group:hover .ma-cat__name {
    --tw-text-opacity: 1;
    color: rgb(230 51 41 / var(--tw-text-opacity, 1));
  }
}

  /* ---------- accordion ---------- */
  .ma-acc__trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top-width: 1px;
  border-color: rgba(11,11,12,0.12);
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  text-align: left;
  font-family: Outfit, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  .ma-acc__trigger:hover {
  --tw-text-opacity: 1;
  color: rgb(230 51 41 / var(--tw-text-opacity, 1));
}
  html.ma-acc__panel { overflow: visible; }
  .ma-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

  /* 🔴 Ye rule ke baghair accordion band hota hi nahi.

     `grid-rows-[0fr]` wali trick tabhi chalti hai jab grid ka BACHCHA sifar tak
     sukad sake. Grid items par `min-height: auto` default hota hai, yani unki
     apni content-height ek farsh (floor) ban jati hai aur row 0 par nahi jati —
     jawab hamesha khula dikhta rehta hai.

     `min-height: 0` wo farsh hata deta hai; `overflow: hidden` bachche par
     isliye ke sukadte waqt text bahar na nikle. */
  html.ma-acc__panel > * { overflow: visible; }
  .ma-acc__panel > * {
  min-height: 0px;
  overflow: hidden;
}

  /* 🔴 R5-8 — BAND ACCORDION 20px KI PATTI CHHOD RAHA THA.

     Client: "poore close or open nhi ho rhy hn". Browser mein naapa:
         Description (khula) -> 77.6px
         Shipping    (band)  -> 20px      <- 0 hona chahiye tha
         Returns     (band)  -> 20px

     Wajah: padding CLIPPER par lagi hui thi. Markup aisa tha —
         <div class="ma-acc__panel"><div class="pb-5 …">…</div></div>
     `overflow:hidden` CONTENT ko 0 kar deta hai, magar element ki apni PADDING
     zinda rehti hai: `pb-5` = 20px. Teen band rows = 60px ka khala, aur khulte
     waqt upar koi padding na hone se text trigger se chipka lagta tha. Dono
     milkar "poora khulta bhi nahi, poora band bhi nahi" jaisa asar dete thay.

     Isliye ab do darje hain aur zimmedari batti hui hai:
         .ma-acc__panel > *      = CLIPPER  -> koi padding nahi, kabhi
         .ma-acc__body           = CONTENT  -> saari padding yahan

     ⚠️ Naya accordion markup likhte waqt padding SIRF `.ma-acc__body` par —
     clipper par ek `pt-` bhi wahi bug wapas le aata hai. */
  .ma-acc__body {
  padding-bottom: 1.5rem;
  padding-top: 0.25rem;
  font-size: 1.125rem;
  line-height: 1.6;
  --tw-text-opacity: 1;
  color: rgb(69 69 75 / var(--tw-text-opacity, 1));
}

  /* Chevron khulne par ghoom jata hai — user ko state saaf nazar aati hai.
     `<h3>` ke andar wale button ko `:has()` se pakadna padta hai, wajah neeche
     wale selector par likhi hai. */
  .ma-acc__trigger svg {
  flex-shrink: 0;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  .ma-acc__trigger[aria-expanded="true"] svg {
  --tw-rotate: -180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
  /* 🔴 DO selectors, aur dono zaroori hain.

     Markup ye hai (static build se, taake heading structure sahi rahe):
         <h3><button class="ma-acc__trigger">…</button></h3>
         <div class="ma-acc__panel">…</div>

     `+` ko panel ka TRIGGER ka sibling hona chahiye — magar trigger `<h3>` ke
     ANDAR hai aur panel `<h3>` ka sibling hai. Yani neeche wala purana selector
     kabhi match hi nahi karta tha: `components.js` `aria-expanded` theek toggle
     karti rahi aur panel kabhi khula hi nahi. Ye bug static build mein bhi hai
     (policy page ka FAQ bhi isi tarah band tha).

     Pehla selector `:has()` se `<h3>` wale case ko pakadta hai; doosra un jagah
     ke liye hai jahan trigger aur panel asal mein siblings hon. */
  h3:has(> .ma-acc__trigger[aria-expanded="true"]) + .ma-acc__panel,
  .ma-acc__trigger[aria-expanded="true"] + .ma-acc__panel {
  grid-template-rows: 1fr;
}

  /* ---------- product gallery ----------
     The garment sits on a tinted stage rather than floating in a white box, and the
     thumb rail is a real slider — horizontal on mobile, vertical beside the stage on
     larger screens. No outlines on the thumbs; the active one is simply the opaque one.

     🔴 THE STAGE OWNS THE HEIGHT (round 29)
     ---------------------------------------
     `.ma-pdp__stage` used to have no intrinsic height, so with `items-stretch` the
     flex line was sized by the RAIL: five thumbs plus two buttons made the row ~715px
     tall, the stage stretched to match, and the image — capped at `max-w-[22rem]` —
     sat as a small garment marooned in a huge white box (screenshot `detail-page.png`).

     `aspect-square` on the stage flips the relationship the right way round. Now the
     stage sets the line height, the rail matches it (`min-h-0` lets it shrink below its
     content), overflowing thumbs scroll — which is what finally makes `product.js`'s
     rail slider come alive, since its `scrollHeight > clientHeight` test could never be
     true while the rail was free to grow.

     🔴 `mix-blend-multiply` ON THE IMAGE
     ------------------------------------
     Every product photo is a JPEG shot on pure white (all four corners of the 300px
     thumbnail sample as #FFFFFF) — there is no alpha channel to see through. Tinting
     the stage alone would just park a white square on a beige panel, which looks worse
     than the white-on-white it replaced. `multiply` makes white transparent
     (white × tint = tint), so the garment reads as cut out. It stays correct if the
     client ever supplies real transparent PNGs. */
  /* 🔴 `md`, not `sm`. This theme's `sm` breakpoint is 375px (see MA_SCREENS in
     `tailwind.config.js`), not Tailwind's usual 640px — so `sm:flex-row` put the
     side rail on essentially every phone, and the horizontal strip this block was
     written for never appeared. At 390px it left a 250px stage next to a rail that
     ran off the edge. From `md` (768px) up the rail sits beside the stage; below
     that the stage is full width and the thumbs scroll sideways underneath it. */
  .ma-pdp__gallery {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
  @media (min-width: 768px) {

  .ma-pdp__gallery {
    flex-direction: row;
    align-items: stretch;
    gap: 1.25rem;
  }
}
  html.ma-pdp__stage { overflow: visible; }
  .ma-pdp__stage {
  display: flex;
  aspect-ratio: 1 / 1;
  min-width: 0px;
  flex: 1 1 0%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  --tw-bg-opacity: 1;
  background-color: rgb(239 234 225 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgba(11,11,12,0.12);
}
  @media (min-width: 768px) {

  .ma-pdp__stage {
    padding: 2rem;
  }
}
  .ma-pdp__stage {
    /* Keep the blend inside the stage — without isolation the image would multiply
       against the page background wherever the stage is transparent. */
    isolation: isolate;
  }
  .ma-pdp__main-img {
  height: 100%;
  width: 100%;
  object-fit: contain; mix-blend-mode: multiply;
}

  /* 🔴 From `sm` up the rail's children are absolutely positioned, which is what
     finally makes the STAGE own the row height.

     `items-stretch` sizes the flex line to the TALLEST item. With the thumbs in
     normal flow the rail was that item — five thumbs plus two buttons measured
     578px against a 436px stage, so the stage stretched and stopped being square,
     and an eight-image product would have blown it out completely. Taking the
     rail's children out of flow drops its intrinsic height to zero: the stage's
     `aspect-square` is then the only thing proposing a height, the rail stretches
     to match it, and the thumb list finally has the definite height it needs for
     `overflow-y: auto` to mean anything — which is what turns the rail into the
     slider the client asked for.

     Mobile keeps normal flow: there the rail is a horizontal strip under the
     stage and scrolls sideways on its own. */
  .ma-pdp__rail {
  display: flex;
  min-height: 0px;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
}
  @media (min-width: 768px) {

  .ma-pdp__rail {
    position: relative;
    width: 5.5rem;
    flex-direction: column;
    justify-content: space-between;
  }
}
  .ma-pdp__thumbs {
    /* 🔴 `min-w-0` sath `min-h-0` — dono zaroori hain.
       Flex item ka automatic minimum size us ke CONTENT jitna hota hai. Mobile
       par rail ek row hai aur us mein paanch 80px ke thumbs hain: bina `min-w-0`
       ke wo 448px se chhota ho hi nahi sakta, rail poori gallery ko chaura kar
       deta hai aur page side mein scroll karne lagta hai. `overflow-x-auto` us
       waqt tak bekaar hai jab tak item ko sukadne ki ijazat na ho. Vertical
       taraf `min-h-0` bilkul yehi kaam karta hai. */
    display: flex;
    min-height: 0px;
    min-width: 0px;
    flex: 1 1 0%;
    gap: 0.75rem;
    overflow-x: auto;
  }
  @media (min-width: 768px) {

  .ma-pdp__thumbs {
    width: 100%;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
  }
}
  .ma-pdp__thumbs {
    scrollbar-width: none;
  }
  .ma-pdp__thumbs::-webkit-scrollbar { display: none; }
  .ma-pdp__thumbs > li {
  width: 5rem;
  flex-shrink: 0;
}
  @media (min-width: 768px) {

  .ma-pdp__thumbs > li {
    width: 100%;
  }
}
  html.ma-pdp__thumb { overflow: visible; }
  .ma-pdp__thumb {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  --tw-bg-opacity: 1;
  background-color: rgb(239 234 225 / var(--tw-bg-opacity, 1));
  opacity: 0.6;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgba(11,11,12,0.12);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  .ma-pdp__thumb:hover {
  opacity: 1;
}
  /* The active thumb gets a real ring as well as full opacity — on a five-thumb rail
     opacity alone is too quiet to answer "which one am I looking at?".

     🔴 Round 31 — client: "is pe blue border a rha ha ... yh light grey rkhoo
     ... or light kroo". Pehle `ring-blue` tha. Wo colour-roles table ke mutabiq
     theek tha (blue = state), magar ek safed t-shirt ki tasveer par 2px ka
     gehra neela ring product se ziada nazar aata tha.

     Ab `ink/25` — wahi neutral grey family jo baqi thumb ka `ring-line` (ink/12)
     hai, bas itna gehra ke "kaunsa chuna hua hai" ka jawab mil jaye. Ring 2px hi
     hai: 1px par selected aur un-selected mein farq naapna mushkil ho jata hai. */
  .ma-pdp__thumb[aria-current="true"] {
  opacity: 1;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgb(11 11 12 / 0.25);
}
  .ma-pdp__thumb-img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: contain;
  padding: 0.5rem; mix-blend-mode: multiply;
}
  .ma-pdp__rail-btn {
  display: inline-flex;
  height: 2.25rem;
  width: 2.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgba(11,11,12,0.12);
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  .ma-pdp__rail-btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(30 63 160 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(250 248 244 / var(--tw-text-opacity, 1));
}
  .ma-pdp__rail-btn:disabled {
  opacity: 0.25;
}
  .ma-pdp__rail-btn:hover:disabled {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
}

  /* The out-of-flow half of the rule above. 2.75rem = the 2.25rem button plus a
     0.5rem breath, so the thumb list starts clear of both chevrons. */
  @media (min-width: 768px) {
    .ma-pdp__thumbs { position: absolute; inset: 2.75rem 0; }
    .ma-pdp__rail-prev { position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
    .ma-pdp__rail-next { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
  }

  /* ---------- quantity stepper ----------
     "− 1 +" as one pill. Woo renders `<div class="quantity">` with the input inside;
     the two buttons come from `inc/woo.php` on Woo's own before/after hooks, so the
     same rule dresses the PDP and every cart line.

     Reversal note: `wp.css` section 10 hid this control entirely for client round 17.
     Round 29 asked for it back, with the reference showing a stepper under Size. */
  .ma-qty__label {
  margin-bottom: 0.75rem;
}
  .ma-pdp .quantity,
  .woocommerce table.cart .quantity {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgba(11,11,12,0.12);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 0.25rem;
}
  
  .woocommerce table.\!cart .quantity {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgba(11,11,12,0.12);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 0.25rem;
}
  .ma-qty__btn {
  display: inline-flex;
  height: 2.25rem;
  width: 2.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  .ma-qty__btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(30 63 160 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(250 248 244 / var(--tw-text-opacity, 1));
}
  .ma-qty__btn:disabled {
  opacity: 0.3;
}
  .ma-qty__btn:hover:disabled {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
}

  /* ---------- shop filters ----------
     Column STICKY hai, magar us ka apna scroll NAHI (client: filters mein scroll
     nahi, sticky chahiye).
     No-JS fallback: `max-h` + apna scroll, taake lamba column neeche se kate nahi.
     JS ho to `filters.js` `.ma-filters-col--follow` lagati hai: max-h aur scroll
     hat jate hain, aur `--ma-filters-top` = min(7rem, viewport − column − 1.5rem).
     Chhota column (accordions band) → 7rem par chipak jata hai. Lamba column
     (accordion khule) → page ke saath chalta hai jab tak us ka NEECHE wala hissa
     nazar na aa jaye, phir wahan chipakta hai. Koi cheez kabhi chhupi nahi rehti. */
  @media (min-width: 1024px) {

  .ma-filters-col {
    position: sticky;
    top: 7rem;
    max-height: calc(100svh - 8.5rem);
    align-self: flex-start;
    overflow-y: auto;
    padding-right: 0.75rem;
  }
    .ma-filters-col.ma-filters-col--follow {
      top: var(--ma-filters-top, 7rem);
      max-height: none;
      overflow: visible;
    }
}
  .ma-filters {
    scrollbar-width: thin;
    scrollbar-color: rgba(11, 11, 12, 0.22) transparent;
  }
  .ma-filters-col::-webkit-scrollbar,
  .ma-filters::-webkit-scrollbar { width: 6px; }
  .ma-filters-col::-webkit-scrollbar-track,
  .ma-filters::-webkit-scrollbar-track { background: transparent; }
  .ma-filters-col::-webkit-scrollbar-thumb,
  .ma-filters::-webkit-scrollbar-thumb {
    background: rgba(11, 11, 12, 0.22);
    border-radius: 3px;
  }
  .ma-filters-col::-webkit-scrollbar-thumb:hover,
  .ma-filters::-webkit-scrollbar-thumb:hover { background: rgba(11, 11, 12, 0.4); }

  /* colour swatch shown beside the name in the colour filter */
  .ma-check__swatch {
  margin-top: 0.125rem;
  display: inline-block;
  height: 1rem;
  width: 1rem;
  flex-shrink: 0;
  border-radius: 9999px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgba(11,11,12,0.12);
}

  .ma-filters {
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 300;
  max-height: 85vh;
  overflow-y: auto;
  border-top-width: 1px;
  border-color: rgba(11,11,12,0.12);
  --tw-bg-opacity: 1;
  background-color: rgb(250 248 244 / var(--tw-bg-opacity, 1));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 2rem;
  padding-top: 1.25rem;
  --tw-shadow: 0 24px 80px -24px rgba(11,11,12,0.45);
  --tw-shadow-colored: 0 24px 80px -24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 400ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

  @media (min-width: 1024px) {

  .ma-filters {
    position: static;
    z-index: 1;
    max-height: none;
    overflow: visible;
    border-width: 0px;
    background-color: transparent;
    padding: 0px;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}

  .ma-filters {
    transform: translateY(100%);
  }
  @media (min-width: 1024px) { .ma-filters { transform: none; } }
  .ma-filters--open { transform: translateY(0); }
  /* R5-19 — group ka spacing dobara.

     Client: "color ka filter … us ky neeche itni space ha, us ky bottom pe space
     kaam kroo, us ky uper space ziada kroo".

     Pehle `py-6` tha — upar aur neeche barabar. Us se do cheezein bigarti thin:
     ek group ke khatam hone aur agle group ke shuru hone ka farq nazar nahi aata
     tha, aur aakhri group ke baad 24px ka khala bacha reh jata tha. Ab upar zyada
     (nayi group ka signal, border se saans) aur neeche kam — baqi jagah
     `.ma-acc__body` ki `pb-6` se aati hai, jo band hone par KHATAM ho jati hai. */
  .ma-filters__group {
  border-top-width: 1px;
  border-color: rgba(11,11,12,0.12);
  padding-bottom: 0.25rem;
  padding-top: 1.25rem;
}
  .ma-filters__actions {
  border-top-width: 1px;
  border-color: rgba(11,11,12,0.12);
  padding-top: 1.5rem;
}
  .ma-filters__body {
  padding-bottom: 1.25rem;
  padding-top: 1rem;
}

  /* Filter ka accordion trigger — PDP wale se chhota.

     `.ma-acc__trigger` khud `border-t … py-5 font-display text-h3` hai (PDP ke
     bare rows ke liye). Sidebar mein wo teen guna bara lagta hai, isliye ye
     variant border aur wazan dono utha deta hai — group ka border pehle se
     `.ma-filters__group` par hai. */
  .ma-acc__trigger--filter {
  border-width: 0px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-family: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  --tw-text-opacity: 1;
  color: rgb(69 69 75 / var(--tw-text-opacity, 1));
}
  .ma-acc__trigger--filter:hover {
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
}
  .ma-acc__trigger--filter[aria-expanded="true"] {
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
}

  .ma-check--filter {
  gap: 0.75rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.875rem;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
}
  .ma-check--filter .ma-check__box {
  height: 1rem;
  width: 1rem;
}

  /* ---------- editorial: statement, founder letter, quotes, stats ---------- */
  .ma-statement {
  margin-left: auto;
  margin-right: auto;
  max-width: 42ch;
  text-align: center;
  font-family: Outfit, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: clamp(1.875rem, 3.6vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
}

  .ma-founder {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
  .ma-founder__name {
  font-family: Outfit, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
}
  .ma-founder__role {
  font-family: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  --tw-text-opacity: 1;
  color: rgb(69 69 75 / var(--tw-text-opacity, 1));
}

  .ma-pull {
  border-left-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(230 51 41 / var(--tw-border-opacity, 1));
  padding-left: 1.5rem;
  font-size: 1.125rem;
  line-height: 1.6;
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
}

  .ma-quote {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-top-width: 1px;
  border-color: rgba(11,11,12,0.12);
  padding-top: 2rem;
  padding-bottom: 2rem;
}
  .ma-quote__text {
  max-width: 62ch;
  font-size: 1.125rem;
  line-height: 1.6;
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
}
  .ma-quote__by {
  font-family: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  --tw-text-opacity: 1;
  color: rgb(230 51 41 / var(--tw-text-opacity, 1));
}

  .ma-stat {
  border-bottom-width: 1px;
  border-color: rgba(11,11,12,0.12);
  padding-top: 2rem;
  padding-bottom: 2rem;
}

  @media (min-width: 768px) {

  .ma-stat {
    border-bottom-width: 0px;
    border-right-width: 1px;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .ma-stat:first-child {
    padding-left: 0px;
  }

  .ma-stat:last-child {
    border-right-width: 0px;
  }
}
  .ma-stat__num {
  font-family: Outfit, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: clamp(1.875rem, 3.6vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(30 63 160 / var(--tw-text-opacity, 1));
}
  .ma-stat__label {
  margin-top: 0.75rem;
  display: block;
  font-family: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  --tw-text-opacity: 1;
  color: rgb(69 69 75 / var(--tw-text-opacity, 1));
}

  /* ---------- long-form document type ---------- */
  .ma-prose {
  max-width: 62ch;
  font-size: 1.125rem;
  line-height: 1.6;
  --tw-text-opacity: 1;
  color: rgb(69 69 75 / var(--tw-text-opacity, 1));
}
  .ma-prose-h {
  margin-top: 3rem;
  font-family: Outfit, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
}
  .ma-prose-p {
  margin-top: 1rem;
  max-width: 62ch;
  font-size: 1.125rem;
  line-height: 1.6;
  --tw-text-opacity: 1;
  color: rgb(69 69 75 / var(--tw-text-opacity, 1));
}
  .ma-prose-li {
  margin-top: 0.5rem;
  max-width: 62ch;
  list-style-type: disc;
  font-size: 1.125rem;
  line-height: 1.6;
  --tw-text-opacity: 1;
  color: rgb(69 69 75 / var(--tw-text-opacity, 1));
}

  /* ---------- data table ---------- */
  .ma-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
  .ma-table th {
  border-bottom-width: 1px;
  border-color: rgba(11,11,12,0.12);
  padding-bottom: 1rem;
  font-family: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  line-height: 1.2;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  --tw-text-opacity: 1;
  color: rgb(69 69 75 / var(--tw-text-opacity, 1));
}
  .ma-table td {
  border-bottom-width: 1px;
  border-color: rgba(11,11,12,0.12);
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  vertical-align: top;
}

  /* ---------- toast ---------- */
  /* width is explicit: shrink-to-fit put "I love Nigeria added to bag" on four lines and
     broke "View bag" across two on a phone. Fills the screen less the gutters, caps at
     26rem, and goes back to shrink-to-fit from md up. */
  .ma-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  z-index: 400;
  display: flex;
  width: calc(100% - 2rem);
  max-width: 26rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  --tw-bg-opacity: 1;
  background-color: rgb(18 39 95 / var(--tw-bg-opacity, 1));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-family: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  --tw-text-opacity: 1;
  color: rgb(250 248 244 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 24px 80px -24px rgba(11,11,12,0.45);
  --tw-shadow-colored: 0 24px 80px -24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  @media (min-width: 768px) {

  .ma-toast {
    width: auto;
  }
}
  .ma-toast {
    opacity: 0;
    transform: translate(-50%, 1.5rem);
    pointer-events: none;
  }
  .ma-toast--open { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
  .ma-toast__text {
  min-width: 0px;
}
  .ma-toast__link {
  flex-shrink: 0;
  white-space: nowrap;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(143 178 255 / var(--tw-border-opacity, 1));
  padding-bottom: 0.125rem;
  --tw-text-opacity: 1;
  color: rgb(143 178 255 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  .ma-toast__link:hover {
  --tw-border-opacity: 1;
  border-color: rgb(250 248 244 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(250 248 244 / var(--tw-text-opacity, 1));
}

  /* ---------- skeleton ---------- */

  /* ---------- footer ---------- */
  .ma-footer-link {
  display: inline-block;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgb(250 248 244 / 0.7);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
  .ma-footer-link:hover {
  --tw-text-opacity: 1;
  color: rgb(143 178 255 / var(--tw-text-opacity, 1));
}

  .ma-social {
  display: inline-flex;
  height: 2.75rem;
  width: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgba(250,248,244,0.18);
  --tw-text-opacity: 1;
  color: rgb(250 248 244 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

  .ma-social:hover {
  --tw-border-opacity: 1;
  border-color: rgb(143 178 255 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(143 178 255 / var(--tw-text-opacity, 1));
}
  /* the wordmark spells the theme out: Make in red, America in white, .ca in blue.
     It is blue-light and not blue on purpose — #1E3FA0 on the navy footer is invisible.
     The base class sets no colour of its own; each part carries one. */
  .ma-wordmark {
  display: block;
  width: 100%;
  text-align: center;
  font-family: Outfit, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
}
  .ma-wordmark__make {
  --tw-text-opacity: 1;
  color: rgb(230 51 41 / var(--tw-text-opacity, 1));
}
  .ma-wordmark__america {
  --tw-text-opacity: 1;
  color: rgb(250 248 244 / var(--tw-text-opacity, 1));
}
  .ma-wordmark__ca {
  --tw-text-opacity: 1;
  color: rgb(143 178 255 / var(--tw-text-opacity, 1));
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.left-3 {
  left: 0.75rem;
}
.top-3 {
  top: 0.75rem;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.-mt-2 {
  margin-top: -0.5rem;
}
.mb-14 {
  margin-bottom: 3.5rem;
}
.ml-6 {
  margin-left: 1.5rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mt-14 {
  margin-top: 3.5rem;
}
.mt-16 {
  margin-top: 4rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-20 {
  margin-top: 5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-9 {
  margin-top: 2.25rem;
}
.mt-auto {
  margin-top: auto;
}
.block {
  display: block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.aspect-\[16\/10\] {
  aspect-ratio: 16/10;
}
.aspect-\[4\/3\] {
  aspect-ratio: 4/3;
}
.aspect-\[4\/5\] {
  aspect-ratio: 4/5;
}
.aspect-product {
  aspect-ratio: 4 / 5;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.h-14 {
  height: 3.5rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-4 {
  height: 1rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-7 {
  height: 1.75rem;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.min-h-0 {
  min-height: 0px;
}
.w-0 {
  width: 0px;
}
.w-1\/2 {
  width: 50%;
}
.w-1\/4 {
  width: 25%;
}
.w-14 {
  width: 3.5rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-3\/4 {
  width: 75%;
}
.w-4 {
  width: 1rem;
}
.w-5 {
  width: 1.25rem;
}
.w-6 {
  width: 1.5rem;
}
.w-7 {
  width: 1.75rem;
}
.w-full {
  width: 100%;
}
.min-w-0 {
  min-width: 0px;
}
.max-w-\[24ch\] {
  max-width: 24ch;
}
.max-w-\[28ch\] {
  max-width: 28ch;
}
.max-w-\[32ch\] {
  max-width: 32ch;
}
.max-w-\[34ch\] {
  max-width: 34ch;
}
.max-w-\[34rem\] {
  max-width: 34rem;
}
.max-w-measure {
  max-width: 62ch;
}
.flex-1 {
  flex: 1 1 0%;
}
.shrink-0 {
  flex-shrink: 0;
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.resize {
  resize: both;
}
.columns-3 {
  columns: 3;
}
.columns-4 {
  columns: 4;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-rows-\[0fr\] {
  grid-template-rows: 0fr;
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-12 {
  gap: 3rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-7 {
  gap: 1.75rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-x-10 {
  column-gap: 2.5rem;
}
.gap-x-5 {
  column-gap: 1.25rem;
}
.gap-x-6 {
  column-gap: 1.5rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-10 {
  row-gap: 2.5rem;
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-line > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(11,11,12,0.12);
}
.self-start {
  align-self: flex-start;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-card {
  border-radius: 12px;
}
.rounded-full {
  border-radius: 9999px;
}
.border {
  border-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-line {
  border-color: rgba(11,11,12,0.12);
}
.border-line-invert {
  border-color: rgba(250,248,244,0.18);
}
.bg-accent {
  --tw-bg-opacity: 1;
  background-color: rgb(230 51 41 / var(--tw-bg-opacity, 1));
}
.bg-line {
  background-color: rgba(11,11,12,0.12);
}
.bg-navy {
  --tw-bg-opacity: 1;
  background-color: rgb(18 39 95 / var(--tw-bg-opacity, 1));
}
.bg-paper {
  --tw-bg-opacity: 1;
  background-color: rgb(250 248 244 / var(--tw-bg-opacity, 1));
}
.bg-paper-2 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 234 225 / var(--tw-bg-opacity, 1));
}
.bg-shirt-antique-cherry {
  --tw-bg-opacity: 1;
  background-color: rgb(158 43 55 / var(--tw-bg-opacity, 1));
}
.bg-shirt-antique-cherry\/0 {
  background-color: rgb(158 43 55 / 0);
}
.bg-shirt-antique-cherry\/10 {
  background-color: rgb(158 43 55 / 0.1);
}
.bg-shirt-antique-cherry\/100 {
  background-color: rgb(158 43 55 / 1);
}
.bg-shirt-antique-cherry\/15 {
  background-color: rgb(158 43 55 / 0.15);
}
.bg-shirt-antique-cherry\/20 {
  background-color: rgb(158 43 55 / 0.2);
}
.bg-shirt-antique-cherry\/25 {
  background-color: rgb(158 43 55 / 0.25);
}
.bg-shirt-antique-cherry\/30 {
  background-color: rgb(158 43 55 / 0.3);
}
.bg-shirt-antique-cherry\/35 {
  background-color: rgb(158 43 55 / 0.35);
}
.bg-shirt-antique-cherry\/40 {
  background-color: rgb(158 43 55 / 0.4);
}
.bg-shirt-antique-cherry\/45 {
  background-color: rgb(158 43 55 / 0.45);
}
.bg-shirt-antique-cherry\/5 {
  background-color: rgb(158 43 55 / 0.05);
}
.bg-shirt-antique-cherry\/50 {
  background-color: rgb(158 43 55 / 0.5);
}
.bg-shirt-antique-cherry\/55 {
  background-color: rgb(158 43 55 / 0.55);
}
.bg-shirt-antique-cherry\/60 {
  background-color: rgb(158 43 55 / 0.6);
}
.bg-shirt-antique-cherry\/65 {
  background-color: rgb(158 43 55 / 0.65);
}
.bg-shirt-antique-cherry\/70 {
  background-color: rgb(158 43 55 / 0.7);
}
.bg-shirt-antique-cherry\/75 {
  background-color: rgb(158 43 55 / 0.75);
}
.bg-shirt-antique-cherry\/80 {
  background-color: rgb(158 43 55 / 0.8);
}
.bg-shirt-antique-cherry\/85 {
  background-color: rgb(158 43 55 / 0.85);
}
.bg-shirt-antique-cherry\/90 {
  background-color: rgb(158 43 55 / 0.9);
}
.bg-shirt-antique-cherry\/95 {
  background-color: rgb(158 43 55 / 0.95);
}
.bg-shirt-azalea {
  --tw-bg-opacity: 1;
  background-color: rgb(238 123 168 / var(--tw-bg-opacity, 1));
}
.bg-shirt-azalea\/0 {
  background-color: rgb(238 123 168 / 0);
}
.bg-shirt-azalea\/10 {
  background-color: rgb(238 123 168 / 0.1);
}
.bg-shirt-azalea\/100 {
  background-color: rgb(238 123 168 / 1);
}
.bg-shirt-azalea\/15 {
  background-color: rgb(238 123 168 / 0.15);
}
.bg-shirt-azalea\/20 {
  background-color: rgb(238 123 168 / 0.2);
}
.bg-shirt-azalea\/25 {
  background-color: rgb(238 123 168 / 0.25);
}
.bg-shirt-azalea\/30 {
  background-color: rgb(238 123 168 / 0.3);
}
.bg-shirt-azalea\/35 {
  background-color: rgb(238 123 168 / 0.35);
}
.bg-shirt-azalea\/40 {
  background-color: rgb(238 123 168 / 0.4);
}
.bg-shirt-azalea\/45 {
  background-color: rgb(238 123 168 / 0.45);
}
.bg-shirt-azalea\/5 {
  background-color: rgb(238 123 168 / 0.05);
}
.bg-shirt-azalea\/50 {
  background-color: rgb(238 123 168 / 0.5);
}
.bg-shirt-azalea\/55 {
  background-color: rgb(238 123 168 / 0.55);
}
.bg-shirt-azalea\/60 {
  background-color: rgb(238 123 168 / 0.6);
}
.bg-shirt-azalea\/65 {
  background-color: rgb(238 123 168 / 0.65);
}
.bg-shirt-azalea\/70 {
  background-color: rgb(238 123 168 / 0.7);
}
.bg-shirt-azalea\/75 {
  background-color: rgb(238 123 168 / 0.75);
}
.bg-shirt-azalea\/80 {
  background-color: rgb(238 123 168 / 0.8);
}
.bg-shirt-azalea\/85 {
  background-color: rgb(238 123 168 / 0.85);
}
.bg-shirt-azalea\/90 {
  background-color: rgb(238 123 168 / 0.9);
}
.bg-shirt-azalea\/95 {
  background-color: rgb(238 123 168 / 0.95);
}
.bg-shirt-berry {
  --tw-bg-opacity: 1;
  background-color: rgb(124 46 79 / var(--tw-bg-opacity, 1));
}
.bg-shirt-berry\/0 {
  background-color: rgb(124 46 79 / 0);
}
.bg-shirt-berry\/10 {
  background-color: rgb(124 46 79 / 0.1);
}
.bg-shirt-berry\/100 {
  background-color: rgb(124 46 79 / 1);
}
.bg-shirt-berry\/15 {
  background-color: rgb(124 46 79 / 0.15);
}
.bg-shirt-berry\/20 {
  background-color: rgb(124 46 79 / 0.2);
}
.bg-shirt-berry\/25 {
  background-color: rgb(124 46 79 / 0.25);
}
.bg-shirt-berry\/30 {
  background-color: rgb(124 46 79 / 0.3);
}
.bg-shirt-berry\/35 {
  background-color: rgb(124 46 79 / 0.35);
}
.bg-shirt-berry\/40 {
  background-color: rgb(124 46 79 / 0.4);
}
.bg-shirt-berry\/45 {
  background-color: rgb(124 46 79 / 0.45);
}
.bg-shirt-berry\/5 {
  background-color: rgb(124 46 79 / 0.05);
}
.bg-shirt-berry\/50 {
  background-color: rgb(124 46 79 / 0.5);
}
.bg-shirt-berry\/55 {
  background-color: rgb(124 46 79 / 0.55);
}
.bg-shirt-berry\/60 {
  background-color: rgb(124 46 79 / 0.6);
}
.bg-shirt-berry\/65 {
  background-color: rgb(124 46 79 / 0.65);
}
.bg-shirt-berry\/70 {
  background-color: rgb(124 46 79 / 0.7);
}
.bg-shirt-berry\/75 {
  background-color: rgb(124 46 79 / 0.75);
}
.bg-shirt-berry\/80 {
  background-color: rgb(124 46 79 / 0.8);
}
.bg-shirt-berry\/85 {
  background-color: rgb(124 46 79 / 0.85);
}
.bg-shirt-berry\/90 {
  background-color: rgb(124 46 79 / 0.9);
}
.bg-shirt-berry\/95 {
  background-color: rgb(124 46 79 / 0.95);
}
.bg-shirt-black {
  --tw-bg-opacity: 1;
  background-color: rgb(16 16 19 / var(--tw-bg-opacity, 1));
}
.bg-shirt-black\/0 {
  background-color: rgb(16 16 19 / 0);
}
.bg-shirt-black\/10 {
  background-color: rgb(16 16 19 / 0.1);
}
.bg-shirt-black\/100 {
  background-color: rgb(16 16 19 / 1);
}
.bg-shirt-black\/15 {
  background-color: rgb(16 16 19 / 0.15);
}
.bg-shirt-black\/20 {
  background-color: rgb(16 16 19 / 0.2);
}
.bg-shirt-black\/25 {
  background-color: rgb(16 16 19 / 0.25);
}
.bg-shirt-black\/30 {
  background-color: rgb(16 16 19 / 0.3);
}
.bg-shirt-black\/35 {
  background-color: rgb(16 16 19 / 0.35);
}
.bg-shirt-black\/40 {
  background-color: rgb(16 16 19 / 0.4);
}
.bg-shirt-black\/45 {
  background-color: rgb(16 16 19 / 0.45);
}
.bg-shirt-black\/5 {
  background-color: rgb(16 16 19 / 0.05);
}
.bg-shirt-black\/50 {
  background-color: rgb(16 16 19 / 0.5);
}
.bg-shirt-black\/55 {
  background-color: rgb(16 16 19 / 0.55);
}
.bg-shirt-black\/60 {
  background-color: rgb(16 16 19 / 0.6);
}
.bg-shirt-black\/65 {
  background-color: rgb(16 16 19 / 0.65);
}
.bg-shirt-black\/70 {
  background-color: rgb(16 16 19 / 0.7);
}
.bg-shirt-black\/75 {
  background-color: rgb(16 16 19 / 0.75);
}
.bg-shirt-black\/80 {
  background-color: rgb(16 16 19 / 0.8);
}
.bg-shirt-black\/85 {
  background-color: rgb(16 16 19 / 0.85);
}
.bg-shirt-black\/90 {
  background-color: rgb(16 16 19 / 0.9);
}
.bg-shirt-black\/95 {
  background-color: rgb(16 16 19 / 0.95);
}
.bg-shirt-brown-savana {
  --tw-bg-opacity: 1;
  background-color: rgb(138 106 79 / var(--tw-bg-opacity, 1));
}
.bg-shirt-brown-savana\/0 {
  background-color: rgb(138 106 79 / 0);
}
.bg-shirt-brown-savana\/10 {
  background-color: rgb(138 106 79 / 0.1);
}
.bg-shirt-brown-savana\/100 {
  background-color: rgb(138 106 79 / 1);
}
.bg-shirt-brown-savana\/15 {
  background-color: rgb(138 106 79 / 0.15);
}
.bg-shirt-brown-savana\/20 {
  background-color: rgb(138 106 79 / 0.2);
}
.bg-shirt-brown-savana\/25 {
  background-color: rgb(138 106 79 / 0.25);
}
.bg-shirt-brown-savana\/30 {
  background-color: rgb(138 106 79 / 0.3);
}
.bg-shirt-brown-savana\/35 {
  background-color: rgb(138 106 79 / 0.35);
}
.bg-shirt-brown-savana\/40 {
  background-color: rgb(138 106 79 / 0.4);
}
.bg-shirt-brown-savana\/45 {
  background-color: rgb(138 106 79 / 0.45);
}
.bg-shirt-brown-savana\/5 {
  background-color: rgb(138 106 79 / 0.05);
}
.bg-shirt-brown-savana\/50 {
  background-color: rgb(138 106 79 / 0.5);
}
.bg-shirt-brown-savana\/55 {
  background-color: rgb(138 106 79 / 0.55);
}
.bg-shirt-brown-savana\/60 {
  background-color: rgb(138 106 79 / 0.6);
}
.bg-shirt-brown-savana\/65 {
  background-color: rgb(138 106 79 / 0.65);
}
.bg-shirt-brown-savana\/70 {
  background-color: rgb(138 106 79 / 0.7);
}
.bg-shirt-brown-savana\/75 {
  background-color: rgb(138 106 79 / 0.75);
}
.bg-shirt-brown-savana\/80 {
  background-color: rgb(138 106 79 / 0.8);
}
.bg-shirt-brown-savana\/85 {
  background-color: rgb(138 106 79 / 0.85);
}
.bg-shirt-brown-savana\/90 {
  background-color: rgb(138 106 79 / 0.9);
}
.bg-shirt-brown-savana\/95 {
  background-color: rgb(138 106 79 / 0.95);
}
.bg-shirt-cardinal-red {
  --tw-bg-opacity: 1;
  background-color: rgb(163 32 53 / var(--tw-bg-opacity, 1));
}
.bg-shirt-cardinal-red\/0 {
  background-color: rgb(163 32 53 / 0);
}
.bg-shirt-cardinal-red\/10 {
  background-color: rgb(163 32 53 / 0.1);
}
.bg-shirt-cardinal-red\/100 {
  background-color: rgb(163 32 53 / 1);
}
.bg-shirt-cardinal-red\/15 {
  background-color: rgb(163 32 53 / 0.15);
}
.bg-shirt-cardinal-red\/20 {
  background-color: rgb(163 32 53 / 0.2);
}
.bg-shirt-cardinal-red\/25 {
  background-color: rgb(163 32 53 / 0.25);
}
.bg-shirt-cardinal-red\/30 {
  background-color: rgb(163 32 53 / 0.3);
}
.bg-shirt-cardinal-red\/35 {
  background-color: rgb(163 32 53 / 0.35);
}
.bg-shirt-cardinal-red\/40 {
  background-color: rgb(163 32 53 / 0.4);
}
.bg-shirt-cardinal-red\/45 {
  background-color: rgb(163 32 53 / 0.45);
}
.bg-shirt-cardinal-red\/5 {
  background-color: rgb(163 32 53 / 0.05);
}
.bg-shirt-cardinal-red\/50 {
  background-color: rgb(163 32 53 / 0.5);
}
.bg-shirt-cardinal-red\/55 {
  background-color: rgb(163 32 53 / 0.55);
}
.bg-shirt-cardinal-red\/60 {
  background-color: rgb(163 32 53 / 0.6);
}
.bg-shirt-cardinal-red\/65 {
  background-color: rgb(163 32 53 / 0.65);
}
.bg-shirt-cardinal-red\/70 {
  background-color: rgb(163 32 53 / 0.7);
}
.bg-shirt-cardinal-red\/75 {
  background-color: rgb(163 32 53 / 0.75);
}
.bg-shirt-cardinal-red\/80 {
  background-color: rgb(163 32 53 / 0.8);
}
.bg-shirt-cardinal-red\/85 {
  background-color: rgb(163 32 53 / 0.85);
}
.bg-shirt-cardinal-red\/90 {
  background-color: rgb(163 32 53 / 0.9);
}
.bg-shirt-cardinal-red\/95 {
  background-color: rgb(163 32 53 / 0.95);
}
.bg-shirt-carolina-blue {
  --tw-bg-opacity: 1;
  background-color: rgb(123 164 219 / var(--tw-bg-opacity, 1));
}
.bg-shirt-carolina-blue\/0 {
  background-color: rgb(123 164 219 / 0);
}
.bg-shirt-carolina-blue\/10 {
  background-color: rgb(123 164 219 / 0.1);
}
.bg-shirt-carolina-blue\/100 {
  background-color: rgb(123 164 219 / 1);
}
.bg-shirt-carolina-blue\/15 {
  background-color: rgb(123 164 219 / 0.15);
}
.bg-shirt-carolina-blue\/20 {
  background-color: rgb(123 164 219 / 0.2);
}
.bg-shirt-carolina-blue\/25 {
  background-color: rgb(123 164 219 / 0.25);
}
.bg-shirt-carolina-blue\/30 {
  background-color: rgb(123 164 219 / 0.3);
}
.bg-shirt-carolina-blue\/35 {
  background-color: rgb(123 164 219 / 0.35);
}
.bg-shirt-carolina-blue\/40 {
  background-color: rgb(123 164 219 / 0.4);
}
.bg-shirt-carolina-blue\/45 {
  background-color: rgb(123 164 219 / 0.45);
}
.bg-shirt-carolina-blue\/5 {
  background-color: rgb(123 164 219 / 0.05);
}
.bg-shirt-carolina-blue\/50 {
  background-color: rgb(123 164 219 / 0.5);
}
.bg-shirt-carolina-blue\/55 {
  background-color: rgb(123 164 219 / 0.55);
}
.bg-shirt-carolina-blue\/60 {
  background-color: rgb(123 164 219 / 0.6);
}
.bg-shirt-carolina-blue\/65 {
  background-color: rgb(123 164 219 / 0.65);
}
.bg-shirt-carolina-blue\/70 {
  background-color: rgb(123 164 219 / 0.7);
}
.bg-shirt-carolina-blue\/75 {
  background-color: rgb(123 164 219 / 0.75);
}
.bg-shirt-carolina-blue\/80 {
  background-color: rgb(123 164 219 / 0.8);
}
.bg-shirt-carolina-blue\/85 {
  background-color: rgb(123 164 219 / 0.85);
}
.bg-shirt-carolina-blue\/90 {
  background-color: rgb(123 164 219 / 0.9);
}
.bg-shirt-carolina-blue\/95 {
  background-color: rgb(123 164 219 / 0.95);
}
.bg-shirt-charcoal {
  --tw-bg-opacity: 1;
  background-color: rgb(74 78 84 / var(--tw-bg-opacity, 1));
}
.bg-shirt-charcoal\/0 {
  background-color: rgb(74 78 84 / 0);
}
.bg-shirt-charcoal\/10 {
  background-color: rgb(74 78 84 / 0.1);
}
.bg-shirt-charcoal\/100 {
  background-color: rgb(74 78 84 / 1);
}
.bg-shirt-charcoal\/15 {
  background-color: rgb(74 78 84 / 0.15);
}
.bg-shirt-charcoal\/20 {
  background-color: rgb(74 78 84 / 0.2);
}
.bg-shirt-charcoal\/25 {
  background-color: rgb(74 78 84 / 0.25);
}
.bg-shirt-charcoal\/30 {
  background-color: rgb(74 78 84 / 0.3);
}
.bg-shirt-charcoal\/35 {
  background-color: rgb(74 78 84 / 0.35);
}
.bg-shirt-charcoal\/40 {
  background-color: rgb(74 78 84 / 0.4);
}
.bg-shirt-charcoal\/45 {
  background-color: rgb(74 78 84 / 0.45);
}
.bg-shirt-charcoal\/5 {
  background-color: rgb(74 78 84 / 0.05);
}
.bg-shirt-charcoal\/50 {
  background-color: rgb(74 78 84 / 0.5);
}
.bg-shirt-charcoal\/55 {
  background-color: rgb(74 78 84 / 0.55);
}
.bg-shirt-charcoal\/60 {
  background-color: rgb(74 78 84 / 0.6);
}
.bg-shirt-charcoal\/65 {
  background-color: rgb(74 78 84 / 0.65);
}
.bg-shirt-charcoal\/70 {
  background-color: rgb(74 78 84 / 0.7);
}
.bg-shirt-charcoal\/75 {
  background-color: rgb(74 78 84 / 0.75);
}
.bg-shirt-charcoal\/80 {
  background-color: rgb(74 78 84 / 0.8);
}
.bg-shirt-charcoal\/85 {
  background-color: rgb(74 78 84 / 0.85);
}
.bg-shirt-charcoal\/90 {
  background-color: rgb(74 78 84 / 0.9);
}
.bg-shirt-charcoal\/95 {
  background-color: rgb(74 78 84 / 0.95);
}
.bg-shirt-coral-silk {
  --tw-bg-opacity: 1;
  background-color: rgb(245 143 124 / var(--tw-bg-opacity, 1));
}
.bg-shirt-coral-silk\/0 {
  background-color: rgb(245 143 124 / 0);
}
.bg-shirt-coral-silk\/10 {
  background-color: rgb(245 143 124 / 0.1);
}
.bg-shirt-coral-silk\/100 {
  background-color: rgb(245 143 124 / 1);
}
.bg-shirt-coral-silk\/15 {
  background-color: rgb(245 143 124 / 0.15);
}
.bg-shirt-coral-silk\/20 {
  background-color: rgb(245 143 124 / 0.2);
}
.bg-shirt-coral-silk\/25 {
  background-color: rgb(245 143 124 / 0.25);
}
.bg-shirt-coral-silk\/30 {
  background-color: rgb(245 143 124 / 0.3);
}
.bg-shirt-coral-silk\/35 {
  background-color: rgb(245 143 124 / 0.35);
}
.bg-shirt-coral-silk\/40 {
  background-color: rgb(245 143 124 / 0.4);
}
.bg-shirt-coral-silk\/45 {
  background-color: rgb(245 143 124 / 0.45);
}
.bg-shirt-coral-silk\/5 {
  background-color: rgb(245 143 124 / 0.05);
}
.bg-shirt-coral-silk\/50 {
  background-color: rgb(245 143 124 / 0.5);
}
.bg-shirt-coral-silk\/55 {
  background-color: rgb(245 143 124 / 0.55);
}
.bg-shirt-coral-silk\/60 {
  background-color: rgb(245 143 124 / 0.6);
}
.bg-shirt-coral-silk\/65 {
  background-color: rgb(245 143 124 / 0.65);
}
.bg-shirt-coral-silk\/70 {
  background-color: rgb(245 143 124 / 0.7);
}
.bg-shirt-coral-silk\/75 {
  background-color: rgb(245 143 124 / 0.75);
}
.bg-shirt-coral-silk\/80 {
  background-color: rgb(245 143 124 / 0.8);
}
.bg-shirt-coral-silk\/85 {
  background-color: rgb(245 143 124 / 0.85);
}
.bg-shirt-coral-silk\/90 {
  background-color: rgb(245 143 124 / 0.9);
}
.bg-shirt-coral-silk\/95 {
  background-color: rgb(245 143 124 / 0.95);
}
.bg-shirt-electric-green {
  --tw-bg-opacity: 1;
  background-color: rgb(76 230 76 / var(--tw-bg-opacity, 1));
}
.bg-shirt-electric-green\/0 {
  background-color: rgb(76 230 76 / 0);
}
.bg-shirt-electric-green\/10 {
  background-color: rgb(76 230 76 / 0.1);
}
.bg-shirt-electric-green\/100 {
  background-color: rgb(76 230 76 / 1);
}
.bg-shirt-electric-green\/15 {
  background-color: rgb(76 230 76 / 0.15);
}
.bg-shirt-electric-green\/20 {
  background-color: rgb(76 230 76 / 0.2);
}
.bg-shirt-electric-green\/25 {
  background-color: rgb(76 230 76 / 0.25);
}
.bg-shirt-electric-green\/30 {
  background-color: rgb(76 230 76 / 0.3);
}
.bg-shirt-electric-green\/35 {
  background-color: rgb(76 230 76 / 0.35);
}
.bg-shirt-electric-green\/40 {
  background-color: rgb(76 230 76 / 0.4);
}
.bg-shirt-electric-green\/45 {
  background-color: rgb(76 230 76 / 0.45);
}
.bg-shirt-electric-green\/5 {
  background-color: rgb(76 230 76 / 0.05);
}
.bg-shirt-electric-green\/50 {
  background-color: rgb(76 230 76 / 0.5);
}
.bg-shirt-electric-green\/55 {
  background-color: rgb(76 230 76 / 0.55);
}
.bg-shirt-electric-green\/60 {
  background-color: rgb(76 230 76 / 0.6);
}
.bg-shirt-electric-green\/65 {
  background-color: rgb(76 230 76 / 0.65);
}
.bg-shirt-electric-green\/70 {
  background-color: rgb(76 230 76 / 0.7);
}
.bg-shirt-electric-green\/75 {
  background-color: rgb(76 230 76 / 0.75);
}
.bg-shirt-electric-green\/80 {
  background-color: rgb(76 230 76 / 0.8);
}
.bg-shirt-electric-green\/85 {
  background-color: rgb(76 230 76 / 0.85);
}
.bg-shirt-electric-green\/90 {
  background-color: rgb(76 230 76 / 0.9);
}
.bg-shirt-electric-green\/95 {
  background-color: rgb(76 230 76 / 0.95);
}
.bg-shirt-gravel {
  --tw-bg-opacity: 1;
  background-color: rgb(140 138 133 / var(--tw-bg-opacity, 1));
}
.bg-shirt-gravel\/0 {
  background-color: rgb(140 138 133 / 0);
}
.bg-shirt-gravel\/10 {
  background-color: rgb(140 138 133 / 0.1);
}
.bg-shirt-gravel\/100 {
  background-color: rgb(140 138 133 / 1);
}
.bg-shirt-gravel\/15 {
  background-color: rgb(140 138 133 / 0.15);
}
.bg-shirt-gravel\/20 {
  background-color: rgb(140 138 133 / 0.2);
}
.bg-shirt-gravel\/25 {
  background-color: rgb(140 138 133 / 0.25);
}
.bg-shirt-gravel\/30 {
  background-color: rgb(140 138 133 / 0.3);
}
.bg-shirt-gravel\/35 {
  background-color: rgb(140 138 133 / 0.35);
}
.bg-shirt-gravel\/40 {
  background-color: rgb(140 138 133 / 0.4);
}
.bg-shirt-gravel\/45 {
  background-color: rgb(140 138 133 / 0.45);
}
.bg-shirt-gravel\/5 {
  background-color: rgb(140 138 133 / 0.05);
}
.bg-shirt-gravel\/50 {
  background-color: rgb(140 138 133 / 0.5);
}
.bg-shirt-gravel\/55 {
  background-color: rgb(140 138 133 / 0.55);
}
.bg-shirt-gravel\/60 {
  background-color: rgb(140 138 133 / 0.6);
}
.bg-shirt-gravel\/65 {
  background-color: rgb(140 138 133 / 0.65);
}
.bg-shirt-gravel\/70 {
  background-color: rgb(140 138 133 / 0.7);
}
.bg-shirt-gravel\/75 {
  background-color: rgb(140 138 133 / 0.75);
}
.bg-shirt-gravel\/80 {
  background-color: rgb(140 138 133 / 0.8);
}
.bg-shirt-gravel\/85 {
  background-color: rgb(140 138 133 / 0.85);
}
.bg-shirt-gravel\/90 {
  background-color: rgb(140 138 133 / 0.9);
}
.bg-shirt-gravel\/95 {
  background-color: rgb(140 138 133 / 0.95);
}
.bg-shirt-ice-gray {
  --tw-bg-opacity: 1;
  background-color: rgb(217 219 216 / var(--tw-bg-opacity, 1));
}
.bg-shirt-ice-gray\/0 {
  background-color: rgb(217 219 216 / 0);
}
.bg-shirt-ice-gray\/10 {
  background-color: rgb(217 219 216 / 0.1);
}
.bg-shirt-ice-gray\/100 {
  background-color: rgb(217 219 216 / 1);
}
.bg-shirt-ice-gray\/15 {
  background-color: rgb(217 219 216 / 0.15);
}
.bg-shirt-ice-gray\/20 {
  background-color: rgb(217 219 216 / 0.2);
}
.bg-shirt-ice-gray\/25 {
  background-color: rgb(217 219 216 / 0.25);
}
.bg-shirt-ice-gray\/30 {
  background-color: rgb(217 219 216 / 0.3);
}
.bg-shirt-ice-gray\/35 {
  background-color: rgb(217 219 216 / 0.35);
}
.bg-shirt-ice-gray\/40 {
  background-color: rgb(217 219 216 / 0.4);
}
.bg-shirt-ice-gray\/45 {
  background-color: rgb(217 219 216 / 0.45);
}
.bg-shirt-ice-gray\/5 {
  background-color: rgb(217 219 216 / 0.05);
}
.bg-shirt-ice-gray\/50 {
  background-color: rgb(217 219 216 / 0.5);
}
.bg-shirt-ice-gray\/55 {
  background-color: rgb(217 219 216 / 0.55);
}
.bg-shirt-ice-gray\/60 {
  background-color: rgb(217 219 216 / 0.6);
}
.bg-shirt-ice-gray\/65 {
  background-color: rgb(217 219 216 / 0.65);
}
.bg-shirt-ice-gray\/70 {
  background-color: rgb(217 219 216 / 0.7);
}
.bg-shirt-ice-gray\/75 {
  background-color: rgb(217 219 216 / 0.75);
}
.bg-shirt-ice-gray\/80 {
  background-color: rgb(217 219 216 / 0.8);
}
.bg-shirt-ice-gray\/85 {
  background-color: rgb(217 219 216 / 0.85);
}
.bg-shirt-ice-gray\/90 {
  background-color: rgb(217 219 216 / 0.9);
}
.bg-shirt-ice-gray\/95 {
  background-color: rgb(217 219 216 / 0.95);
}
.bg-shirt-iris {
  --tw-bg-opacity: 1;
  background-color: rgb(106 90 205 / var(--tw-bg-opacity, 1));
}
.bg-shirt-iris\/0 {
  background-color: rgb(106 90 205 / 0);
}
.bg-shirt-iris\/10 {
  background-color: rgb(106 90 205 / 0.1);
}
.bg-shirt-iris\/100 {
  background-color: rgb(106 90 205 / 1);
}
.bg-shirt-iris\/15 {
  background-color: rgb(106 90 205 / 0.15);
}
.bg-shirt-iris\/20 {
  background-color: rgb(106 90 205 / 0.2);
}
.bg-shirt-iris\/25 {
  background-color: rgb(106 90 205 / 0.25);
}
.bg-shirt-iris\/30 {
  background-color: rgb(106 90 205 / 0.3);
}
.bg-shirt-iris\/35 {
  background-color: rgb(106 90 205 / 0.35);
}
.bg-shirt-iris\/40 {
  background-color: rgb(106 90 205 / 0.4);
}
.bg-shirt-iris\/45 {
  background-color: rgb(106 90 205 / 0.45);
}
.bg-shirt-iris\/5 {
  background-color: rgb(106 90 205 / 0.05);
}
.bg-shirt-iris\/50 {
  background-color: rgb(106 90 205 / 0.5);
}
.bg-shirt-iris\/55 {
  background-color: rgb(106 90 205 / 0.55);
}
.bg-shirt-iris\/60 {
  background-color: rgb(106 90 205 / 0.6);
}
.bg-shirt-iris\/65 {
  background-color: rgb(106 90 205 / 0.65);
}
.bg-shirt-iris\/70 {
  background-color: rgb(106 90 205 / 0.7);
}
.bg-shirt-iris\/75 {
  background-color: rgb(106 90 205 / 0.75);
}
.bg-shirt-iris\/80 {
  background-color: rgb(106 90 205 / 0.8);
}
.bg-shirt-iris\/85 {
  background-color: rgb(106 90 205 / 0.85);
}
.bg-shirt-iris\/90 {
  background-color: rgb(106 90 205 / 0.9);
}
.bg-shirt-iris\/95 {
  background-color: rgb(106 90 205 / 0.95);
}
.bg-shirt-jade-dome {
  --tw-bg-opacity: 1;
  background-color: rgb(62 140 126 / var(--tw-bg-opacity, 1));
}
.bg-shirt-jade-dome\/0 {
  background-color: rgb(62 140 126 / 0);
}
.bg-shirt-jade-dome\/10 {
  background-color: rgb(62 140 126 / 0.1);
}
.bg-shirt-jade-dome\/100 {
  background-color: rgb(62 140 126 / 1);
}
.bg-shirt-jade-dome\/15 {
  background-color: rgb(62 140 126 / 0.15);
}
.bg-shirt-jade-dome\/20 {
  background-color: rgb(62 140 126 / 0.2);
}
.bg-shirt-jade-dome\/25 {
  background-color: rgb(62 140 126 / 0.25);
}
.bg-shirt-jade-dome\/30 {
  background-color: rgb(62 140 126 / 0.3);
}
.bg-shirt-jade-dome\/35 {
  background-color: rgb(62 140 126 / 0.35);
}
.bg-shirt-jade-dome\/40 {
  background-color: rgb(62 140 126 / 0.4);
}
.bg-shirt-jade-dome\/45 {
  background-color: rgb(62 140 126 / 0.45);
}
.bg-shirt-jade-dome\/5 {
  background-color: rgb(62 140 126 / 0.05);
}
.bg-shirt-jade-dome\/50 {
  background-color: rgb(62 140 126 / 0.5);
}
.bg-shirt-jade-dome\/55 {
  background-color: rgb(62 140 126 / 0.55);
}
.bg-shirt-jade-dome\/60 {
  background-color: rgb(62 140 126 / 0.6);
}
.bg-shirt-jade-dome\/65 {
  background-color: rgb(62 140 126 / 0.65);
}
.bg-shirt-jade-dome\/70 {
  background-color: rgb(62 140 126 / 0.7);
}
.bg-shirt-jade-dome\/75 {
  background-color: rgb(62 140 126 / 0.75);
}
.bg-shirt-jade-dome\/80 {
  background-color: rgb(62 140 126 / 0.8);
}
.bg-shirt-jade-dome\/85 {
  background-color: rgb(62 140 126 / 0.85);
}
.bg-shirt-jade-dome\/90 {
  background-color: rgb(62 140 126 / 0.9);
}
.bg-shirt-jade-dome\/95 {
  background-color: rgb(62 140 126 / 0.95);
}
.bg-shirt-kiwi {
  --tw-bg-opacity: 1;
  background-color: rgb(143 168 58 / var(--tw-bg-opacity, 1));
}
.bg-shirt-kiwi\/0 {
  background-color: rgb(143 168 58 / 0);
}
.bg-shirt-kiwi\/10 {
  background-color: rgb(143 168 58 / 0.1);
}
.bg-shirt-kiwi\/100 {
  background-color: rgb(143 168 58 / 1);
}
.bg-shirt-kiwi\/15 {
  background-color: rgb(143 168 58 / 0.15);
}
.bg-shirt-kiwi\/20 {
  background-color: rgb(143 168 58 / 0.2);
}
.bg-shirt-kiwi\/25 {
  background-color: rgb(143 168 58 / 0.25);
}
.bg-shirt-kiwi\/30 {
  background-color: rgb(143 168 58 / 0.3);
}
.bg-shirt-kiwi\/35 {
  background-color: rgb(143 168 58 / 0.35);
}
.bg-shirt-kiwi\/40 {
  background-color: rgb(143 168 58 / 0.4);
}
.bg-shirt-kiwi\/45 {
  background-color: rgb(143 168 58 / 0.45);
}
.bg-shirt-kiwi\/5 {
  background-color: rgb(143 168 58 / 0.05);
}
.bg-shirt-kiwi\/50 {
  background-color: rgb(143 168 58 / 0.5);
}
.bg-shirt-kiwi\/55 {
  background-color: rgb(143 168 58 / 0.55);
}
.bg-shirt-kiwi\/60 {
  background-color: rgb(143 168 58 / 0.6);
}
.bg-shirt-kiwi\/65 {
  background-color: rgb(143 168 58 / 0.65);
}
.bg-shirt-kiwi\/70 {
  background-color: rgb(143 168 58 / 0.7);
}
.bg-shirt-kiwi\/75 {
  background-color: rgb(143 168 58 / 0.75);
}
.bg-shirt-kiwi\/80 {
  background-color: rgb(143 168 58 / 0.8);
}
.bg-shirt-kiwi\/85 {
  background-color: rgb(143 168 58 / 0.85);
}
.bg-shirt-kiwi\/90 {
  background-color: rgb(143 168 58 / 0.9);
}
.bg-shirt-kiwi\/95 {
  background-color: rgb(143 168 58 / 0.95);
}
.bg-shirt-light-blue {
  --tw-bg-opacity: 1;
  background-color: rgb(168 203 232 / var(--tw-bg-opacity, 1));
}
.bg-shirt-light-blue\/0 {
  background-color: rgb(168 203 232 / 0);
}
.bg-shirt-light-blue\/10 {
  background-color: rgb(168 203 232 / 0.1);
}
.bg-shirt-light-blue\/100 {
  background-color: rgb(168 203 232 / 1);
}
.bg-shirt-light-blue\/15 {
  background-color: rgb(168 203 232 / 0.15);
}
.bg-shirt-light-blue\/20 {
  background-color: rgb(168 203 232 / 0.2);
}
.bg-shirt-light-blue\/25 {
  background-color: rgb(168 203 232 / 0.25);
}
.bg-shirt-light-blue\/30 {
  background-color: rgb(168 203 232 / 0.3);
}
.bg-shirt-light-blue\/35 {
  background-color: rgb(168 203 232 / 0.35);
}
.bg-shirt-light-blue\/40 {
  background-color: rgb(168 203 232 / 0.4);
}
.bg-shirt-light-blue\/45 {
  background-color: rgb(168 203 232 / 0.45);
}
.bg-shirt-light-blue\/5 {
  background-color: rgb(168 203 232 / 0.05);
}
.bg-shirt-light-blue\/50 {
  background-color: rgb(168 203 232 / 0.5);
}
.bg-shirt-light-blue\/55 {
  background-color: rgb(168 203 232 / 0.55);
}
.bg-shirt-light-blue\/60 {
  background-color: rgb(168 203 232 / 0.6);
}
.bg-shirt-light-blue\/65 {
  background-color: rgb(168 203 232 / 0.65);
}
.bg-shirt-light-blue\/70 {
  background-color: rgb(168 203 232 / 0.7);
}
.bg-shirt-light-blue\/75 {
  background-color: rgb(168 203 232 / 0.75);
}
.bg-shirt-light-blue\/80 {
  background-color: rgb(168 203 232 / 0.8);
}
.bg-shirt-light-blue\/85 {
  background-color: rgb(168 203 232 / 0.85);
}
.bg-shirt-light-blue\/90 {
  background-color: rgb(168 203 232 / 0.9);
}
.bg-shirt-light-blue\/95 {
  background-color: rgb(168 203 232 / 0.95);
}
.bg-shirt-light-pink {
  --tw-bg-opacity: 1;
  background-color: rgb(244 194 206 / var(--tw-bg-opacity, 1));
}
.bg-shirt-light-pink\/0 {
  background-color: rgb(244 194 206 / 0);
}
.bg-shirt-light-pink\/10 {
  background-color: rgb(244 194 206 / 0.1);
}
.bg-shirt-light-pink\/100 {
  background-color: rgb(244 194 206 / 1);
}
.bg-shirt-light-pink\/15 {
  background-color: rgb(244 194 206 / 0.15);
}
.bg-shirt-light-pink\/20 {
  background-color: rgb(244 194 206 / 0.2);
}
.bg-shirt-light-pink\/25 {
  background-color: rgb(244 194 206 / 0.25);
}
.bg-shirt-light-pink\/30 {
  background-color: rgb(244 194 206 / 0.3);
}
.bg-shirt-light-pink\/35 {
  background-color: rgb(244 194 206 / 0.35);
}
.bg-shirt-light-pink\/40 {
  background-color: rgb(244 194 206 / 0.4);
}
.bg-shirt-light-pink\/45 {
  background-color: rgb(244 194 206 / 0.45);
}
.bg-shirt-light-pink\/5 {
  background-color: rgb(244 194 206 / 0.05);
}
.bg-shirt-light-pink\/50 {
  background-color: rgb(244 194 206 / 0.5);
}
.bg-shirt-light-pink\/55 {
  background-color: rgb(244 194 206 / 0.55);
}
.bg-shirt-light-pink\/60 {
  background-color: rgb(244 194 206 / 0.6);
}
.bg-shirt-light-pink\/65 {
  background-color: rgb(244 194 206 / 0.65);
}
.bg-shirt-light-pink\/70 {
  background-color: rgb(244 194 206 / 0.7);
}
.bg-shirt-light-pink\/75 {
  background-color: rgb(244 194 206 / 0.75);
}
.bg-shirt-light-pink\/80 {
  background-color: rgb(244 194 206 / 0.8);
}
.bg-shirt-light-pink\/85 {
  background-color: rgb(244 194 206 / 0.85);
}
.bg-shirt-light-pink\/90 {
  background-color: rgb(244 194 206 / 0.9);
}
.bg-shirt-light-pink\/95 {
  background-color: rgb(244 194 206 / 0.95);
}
.bg-shirt-lime {
  --tw-bg-opacity: 1;
  background-color: rgb(198 232 79 / var(--tw-bg-opacity, 1));
}
.bg-shirt-lime\/0 {
  background-color: rgb(198 232 79 / 0);
}
.bg-shirt-lime\/10 {
  background-color: rgb(198 232 79 / 0.1);
}
.bg-shirt-lime\/100 {
  background-color: rgb(198 232 79 / 1);
}
.bg-shirt-lime\/15 {
  background-color: rgb(198 232 79 / 0.15);
}
.bg-shirt-lime\/20 {
  background-color: rgb(198 232 79 / 0.2);
}
.bg-shirt-lime\/25 {
  background-color: rgb(198 232 79 / 0.25);
}
.bg-shirt-lime\/30 {
  background-color: rgb(198 232 79 / 0.3);
}
.bg-shirt-lime\/35 {
  background-color: rgb(198 232 79 / 0.35);
}
.bg-shirt-lime\/40 {
  background-color: rgb(198 232 79 / 0.4);
}
.bg-shirt-lime\/45 {
  background-color: rgb(198 232 79 / 0.45);
}
.bg-shirt-lime\/5 {
  background-color: rgb(198 232 79 / 0.05);
}
.bg-shirt-lime\/50 {
  background-color: rgb(198 232 79 / 0.5);
}
.bg-shirt-lime\/55 {
  background-color: rgb(198 232 79 / 0.55);
}
.bg-shirt-lime\/60 {
  background-color: rgb(198 232 79 / 0.6);
}
.bg-shirt-lime\/65 {
  background-color: rgb(198 232 79 / 0.65);
}
.bg-shirt-lime\/70 {
  background-color: rgb(198 232 79 / 0.7);
}
.bg-shirt-lime\/75 {
  background-color: rgb(198 232 79 / 0.75);
}
.bg-shirt-lime\/80 {
  background-color: rgb(198 232 79 / 0.8);
}
.bg-shirt-lime\/85 {
  background-color: rgb(198 232 79 / 0.85);
}
.bg-shirt-lime\/90 {
  background-color: rgb(198 232 79 / 0.9);
}
.bg-shirt-lime\/95 {
  background-color: rgb(198 232 79 / 0.95);
}
.bg-shirt-maroon {
  --tw-bg-opacity: 1;
  background-color: rgb(123 30 43 / var(--tw-bg-opacity, 1));
}
.bg-shirt-maroon\/0 {
  background-color: rgb(123 30 43 / 0);
}
.bg-shirt-maroon\/10 {
  background-color: rgb(123 30 43 / 0.1);
}
.bg-shirt-maroon\/100 {
  background-color: rgb(123 30 43 / 1);
}
.bg-shirt-maroon\/15 {
  background-color: rgb(123 30 43 / 0.15);
}
.bg-shirt-maroon\/20 {
  background-color: rgb(123 30 43 / 0.2);
}
.bg-shirt-maroon\/25 {
  background-color: rgb(123 30 43 / 0.25);
}
.bg-shirt-maroon\/30 {
  background-color: rgb(123 30 43 / 0.3);
}
.bg-shirt-maroon\/35 {
  background-color: rgb(123 30 43 / 0.35);
}
.bg-shirt-maroon\/40 {
  background-color: rgb(123 30 43 / 0.4);
}
.bg-shirt-maroon\/45 {
  background-color: rgb(123 30 43 / 0.45);
}
.bg-shirt-maroon\/5 {
  background-color: rgb(123 30 43 / 0.05);
}
.bg-shirt-maroon\/50 {
  background-color: rgb(123 30 43 / 0.5);
}
.bg-shirt-maroon\/55 {
  background-color: rgb(123 30 43 / 0.55);
}
.bg-shirt-maroon\/60 {
  background-color: rgb(123 30 43 / 0.6);
}
.bg-shirt-maroon\/65 {
  background-color: rgb(123 30 43 / 0.65);
}
.bg-shirt-maroon\/70 {
  background-color: rgb(123 30 43 / 0.7);
}
.bg-shirt-maroon\/75 {
  background-color: rgb(123 30 43 / 0.75);
}
.bg-shirt-maroon\/80 {
  background-color: rgb(123 30 43 / 0.8);
}
.bg-shirt-maroon\/85 {
  background-color: rgb(123 30 43 / 0.85);
}
.bg-shirt-maroon\/90 {
  background-color: rgb(123 30 43 / 0.9);
}
.bg-shirt-maroon\/95 {
  background-color: rgb(123 30 43 / 0.95);
}
.bg-shirt-military-green {
  --tw-bg-opacity: 1;
  background-color: rgb(90 100 64 / var(--tw-bg-opacity, 1));
}
.bg-shirt-military-green\/0 {
  background-color: rgb(90 100 64 / 0);
}
.bg-shirt-military-green\/10 {
  background-color: rgb(90 100 64 / 0.1);
}
.bg-shirt-military-green\/100 {
  background-color: rgb(90 100 64 / 1);
}
.bg-shirt-military-green\/15 {
  background-color: rgb(90 100 64 / 0.15);
}
.bg-shirt-military-green\/20 {
  background-color: rgb(90 100 64 / 0.2);
}
.bg-shirt-military-green\/25 {
  background-color: rgb(90 100 64 / 0.25);
}
.bg-shirt-military-green\/30 {
  background-color: rgb(90 100 64 / 0.3);
}
.bg-shirt-military-green\/35 {
  background-color: rgb(90 100 64 / 0.35);
}
.bg-shirt-military-green\/40 {
  background-color: rgb(90 100 64 / 0.4);
}
.bg-shirt-military-green\/45 {
  background-color: rgb(90 100 64 / 0.45);
}
.bg-shirt-military-green\/5 {
  background-color: rgb(90 100 64 / 0.05);
}
.bg-shirt-military-green\/50 {
  background-color: rgb(90 100 64 / 0.5);
}
.bg-shirt-military-green\/55 {
  background-color: rgb(90 100 64 / 0.55);
}
.bg-shirt-military-green\/60 {
  background-color: rgb(90 100 64 / 0.6);
}
.bg-shirt-military-green\/65 {
  background-color: rgb(90 100 64 / 0.65);
}
.bg-shirt-military-green\/70 {
  background-color: rgb(90 100 64 / 0.7);
}
.bg-shirt-military-green\/75 {
  background-color: rgb(90 100 64 / 0.75);
}
.bg-shirt-military-green\/80 {
  background-color: rgb(90 100 64 / 0.8);
}
.bg-shirt-military-green\/85 {
  background-color: rgb(90 100 64 / 0.85);
}
.bg-shirt-military-green\/90 {
  background-color: rgb(90 100 64 / 0.9);
}
.bg-shirt-military-green\/95 {
  background-color: rgb(90 100 64 / 0.95);
}
.bg-shirt-mint-green {
  --tw-bg-opacity: 1;
  background-color: rgb(168 230 193 / var(--tw-bg-opacity, 1));
}
.bg-shirt-mint-green\/0 {
  background-color: rgb(168 230 193 / 0);
}
.bg-shirt-mint-green\/10 {
  background-color: rgb(168 230 193 / 0.1);
}
.bg-shirt-mint-green\/100 {
  background-color: rgb(168 230 193 / 1);
}
.bg-shirt-mint-green\/15 {
  background-color: rgb(168 230 193 / 0.15);
}
.bg-shirt-mint-green\/20 {
  background-color: rgb(168 230 193 / 0.2);
}
.bg-shirt-mint-green\/25 {
  background-color: rgb(168 230 193 / 0.25);
}
.bg-shirt-mint-green\/30 {
  background-color: rgb(168 230 193 / 0.3);
}
.bg-shirt-mint-green\/35 {
  background-color: rgb(168 230 193 / 0.35);
}
.bg-shirt-mint-green\/40 {
  background-color: rgb(168 230 193 / 0.4);
}
.bg-shirt-mint-green\/45 {
  background-color: rgb(168 230 193 / 0.45);
}
.bg-shirt-mint-green\/5 {
  background-color: rgb(168 230 193 / 0.05);
}
.bg-shirt-mint-green\/50 {
  background-color: rgb(168 230 193 / 0.5);
}
.bg-shirt-mint-green\/55 {
  background-color: rgb(168 230 193 / 0.55);
}
.bg-shirt-mint-green\/60 {
  background-color: rgb(168 230 193 / 0.6);
}
.bg-shirt-mint-green\/65 {
  background-color: rgb(168 230 193 / 0.65);
}
.bg-shirt-mint-green\/70 {
  background-color: rgb(168 230 193 / 0.7);
}
.bg-shirt-mint-green\/75 {
  background-color: rgb(168 230 193 / 0.75);
}
.bg-shirt-mint-green\/80 {
  background-color: rgb(168 230 193 / 0.8);
}
.bg-shirt-mint-green\/85 {
  background-color: rgb(168 230 193 / 0.85);
}
.bg-shirt-mint-green\/90 {
  background-color: rgb(168 230 193 / 0.9);
}
.bg-shirt-mint-green\/95 {
  background-color: rgb(168 230 193 / 0.95);
}
.bg-shirt-natural {
  --tw-bg-opacity: 1;
  background-color: rgb(237 228 211 / var(--tw-bg-opacity, 1));
}
.bg-shirt-natural\/0 {
  background-color: rgb(237 228 211 / 0);
}
.bg-shirt-natural\/10 {
  background-color: rgb(237 228 211 / 0.1);
}
.bg-shirt-natural\/100 {
  background-color: rgb(237 228 211 / 1);
}
.bg-shirt-natural\/15 {
  background-color: rgb(237 228 211 / 0.15);
}
.bg-shirt-natural\/20 {
  background-color: rgb(237 228 211 / 0.2);
}
.bg-shirt-natural\/25 {
  background-color: rgb(237 228 211 / 0.25);
}
.bg-shirt-natural\/30 {
  background-color: rgb(237 228 211 / 0.3);
}
.bg-shirt-natural\/35 {
  background-color: rgb(237 228 211 / 0.35);
}
.bg-shirt-natural\/40 {
  background-color: rgb(237 228 211 / 0.4);
}
.bg-shirt-natural\/45 {
  background-color: rgb(237 228 211 / 0.45);
}
.bg-shirt-natural\/5 {
  background-color: rgb(237 228 211 / 0.05);
}
.bg-shirt-natural\/50 {
  background-color: rgb(237 228 211 / 0.5);
}
.bg-shirt-natural\/55 {
  background-color: rgb(237 228 211 / 0.55);
}
.bg-shirt-natural\/60 {
  background-color: rgb(237 228 211 / 0.6);
}
.bg-shirt-natural\/65 {
  background-color: rgb(237 228 211 / 0.65);
}
.bg-shirt-natural\/70 {
  background-color: rgb(237 228 211 / 0.7);
}
.bg-shirt-natural\/75 {
  background-color: rgb(237 228 211 / 0.75);
}
.bg-shirt-natural\/80 {
  background-color: rgb(237 228 211 / 0.8);
}
.bg-shirt-natural\/85 {
  background-color: rgb(237 228 211 / 0.85);
}
.bg-shirt-natural\/90 {
  background-color: rgb(237 228 211 / 0.9);
}
.bg-shirt-natural\/95 {
  background-color: rgb(237 228 211 / 0.95);
}
.bg-shirt-neon {
  --tw-bg-opacity: 1;
  background-color: rgb(143 230 74 / var(--tw-bg-opacity, 1));
}
.bg-shirt-neon-blue {
  --tw-bg-opacity: 1;
  background-color: rgb(47 111 237 / var(--tw-bg-opacity, 1));
}
.bg-shirt-neon-blue\/0 {
  background-color: rgb(47 111 237 / 0);
}
.bg-shirt-neon-blue\/10 {
  background-color: rgb(47 111 237 / 0.1);
}
.bg-shirt-neon-blue\/100 {
  background-color: rgb(47 111 237 / 1);
}
.bg-shirt-neon-blue\/15 {
  background-color: rgb(47 111 237 / 0.15);
}
.bg-shirt-neon-blue\/20 {
  background-color: rgb(47 111 237 / 0.2);
}
.bg-shirt-neon-blue\/25 {
  background-color: rgb(47 111 237 / 0.25);
}
.bg-shirt-neon-blue\/30 {
  background-color: rgb(47 111 237 / 0.3);
}
.bg-shirt-neon-blue\/35 {
  background-color: rgb(47 111 237 / 0.35);
}
.bg-shirt-neon-blue\/40 {
  background-color: rgb(47 111 237 / 0.4);
}
.bg-shirt-neon-blue\/45 {
  background-color: rgb(47 111 237 / 0.45);
}
.bg-shirt-neon-blue\/5 {
  background-color: rgb(47 111 237 / 0.05);
}
.bg-shirt-neon-blue\/50 {
  background-color: rgb(47 111 237 / 0.5);
}
.bg-shirt-neon-blue\/55 {
  background-color: rgb(47 111 237 / 0.55);
}
.bg-shirt-neon-blue\/60 {
  background-color: rgb(47 111 237 / 0.6);
}
.bg-shirt-neon-blue\/65 {
  background-color: rgb(47 111 237 / 0.65);
}
.bg-shirt-neon-blue\/70 {
  background-color: rgb(47 111 237 / 0.7);
}
.bg-shirt-neon-blue\/75 {
  background-color: rgb(47 111 237 / 0.75);
}
.bg-shirt-neon-blue\/80 {
  background-color: rgb(47 111 237 / 0.8);
}
.bg-shirt-neon-blue\/85 {
  background-color: rgb(47 111 237 / 0.85);
}
.bg-shirt-neon-blue\/90 {
  background-color: rgb(47 111 237 / 0.9);
}
.bg-shirt-neon-blue\/95 {
  background-color: rgb(47 111 237 / 0.95);
}
.bg-shirt-neon-green {
  --tw-bg-opacity: 1;
  background-color: rgb(143 230 74 / var(--tw-bg-opacity, 1));
}
.bg-shirt-neon-green\/0 {
  background-color: rgb(143 230 74 / 0);
}
.bg-shirt-neon-green\/10 {
  background-color: rgb(143 230 74 / 0.1);
}
.bg-shirt-neon-green\/100 {
  background-color: rgb(143 230 74 / 1);
}
.bg-shirt-neon-green\/15 {
  background-color: rgb(143 230 74 / 0.15);
}
.bg-shirt-neon-green\/20 {
  background-color: rgb(143 230 74 / 0.2);
}
.bg-shirt-neon-green\/25 {
  background-color: rgb(143 230 74 / 0.25);
}
.bg-shirt-neon-green\/30 {
  background-color: rgb(143 230 74 / 0.3);
}
.bg-shirt-neon-green\/35 {
  background-color: rgb(143 230 74 / 0.35);
}
.bg-shirt-neon-green\/40 {
  background-color: rgb(143 230 74 / 0.4);
}
.bg-shirt-neon-green\/45 {
  background-color: rgb(143 230 74 / 0.45);
}
.bg-shirt-neon-green\/5 {
  background-color: rgb(143 230 74 / 0.05);
}
.bg-shirt-neon-green\/50 {
  background-color: rgb(143 230 74 / 0.5);
}
.bg-shirt-neon-green\/55 {
  background-color: rgb(143 230 74 / 0.55);
}
.bg-shirt-neon-green\/60 {
  background-color: rgb(143 230 74 / 0.6);
}
.bg-shirt-neon-green\/65 {
  background-color: rgb(143 230 74 / 0.65);
}
.bg-shirt-neon-green\/70 {
  background-color: rgb(143 230 74 / 0.7);
}
.bg-shirt-neon-green\/75 {
  background-color: rgb(143 230 74 / 0.75);
}
.bg-shirt-neon-green\/80 {
  background-color: rgb(143 230 74 / 0.8);
}
.bg-shirt-neon-green\/85 {
  background-color: rgb(143 230 74 / 0.85);
}
.bg-shirt-neon-green\/90 {
  background-color: rgb(143 230 74 / 0.9);
}
.bg-shirt-neon-green\/95 {
  background-color: rgb(143 230 74 / 0.95);
}
.bg-shirt-neon\/0 {
  background-color: rgb(143 230 74 / 0);
}
.bg-shirt-neon\/10 {
  background-color: rgb(143 230 74 / 0.1);
}
.bg-shirt-neon\/100 {
  background-color: rgb(143 230 74 / 1);
}
.bg-shirt-neon\/15 {
  background-color: rgb(143 230 74 / 0.15);
}
.bg-shirt-neon\/20 {
  background-color: rgb(143 230 74 / 0.2);
}
.bg-shirt-neon\/25 {
  background-color: rgb(143 230 74 / 0.25);
}
.bg-shirt-neon\/30 {
  background-color: rgb(143 230 74 / 0.3);
}
.bg-shirt-neon\/35 {
  background-color: rgb(143 230 74 / 0.35);
}
.bg-shirt-neon\/40 {
  background-color: rgb(143 230 74 / 0.4);
}
.bg-shirt-neon\/45 {
  background-color: rgb(143 230 74 / 0.45);
}
.bg-shirt-neon\/5 {
  background-color: rgb(143 230 74 / 0.05);
}
.bg-shirt-neon\/50 {
  background-color: rgb(143 230 74 / 0.5);
}
.bg-shirt-neon\/55 {
  background-color: rgb(143 230 74 / 0.55);
}
.bg-shirt-neon\/60 {
  background-color: rgb(143 230 74 / 0.6);
}
.bg-shirt-neon\/65 {
  background-color: rgb(143 230 74 / 0.65);
}
.bg-shirt-neon\/70 {
  background-color: rgb(143 230 74 / 0.7);
}
.bg-shirt-neon\/75 {
  background-color: rgb(143 230 74 / 0.75);
}
.bg-shirt-neon\/80 {
  background-color: rgb(143 230 74 / 0.8);
}
.bg-shirt-neon\/85 {
  background-color: rgb(143 230 74 / 0.85);
}
.bg-shirt-neon\/90 {
  background-color: rgb(143 230 74 / 0.9);
}
.bg-shirt-neon\/95 {
  background-color: rgb(143 230 74 / 0.95);
}
.bg-shirt-orchid {
  --tw-bg-opacity: 1;
  background-color: rgb(180 95 191 / var(--tw-bg-opacity, 1));
}
.bg-shirt-orchid\/0 {
  background-color: rgb(180 95 191 / 0);
}
.bg-shirt-orchid\/10 {
  background-color: rgb(180 95 191 / 0.1);
}
.bg-shirt-orchid\/100 {
  background-color: rgb(180 95 191 / 1);
}
.bg-shirt-orchid\/15 {
  background-color: rgb(180 95 191 / 0.15);
}
.bg-shirt-orchid\/20 {
  background-color: rgb(180 95 191 / 0.2);
}
.bg-shirt-orchid\/25 {
  background-color: rgb(180 95 191 / 0.25);
}
.bg-shirt-orchid\/30 {
  background-color: rgb(180 95 191 / 0.3);
}
.bg-shirt-orchid\/35 {
  background-color: rgb(180 95 191 / 0.35);
}
.bg-shirt-orchid\/40 {
  background-color: rgb(180 95 191 / 0.4);
}
.bg-shirt-orchid\/45 {
  background-color: rgb(180 95 191 / 0.45);
}
.bg-shirt-orchid\/5 {
  background-color: rgb(180 95 191 / 0.05);
}
.bg-shirt-orchid\/50 {
  background-color: rgb(180 95 191 / 0.5);
}
.bg-shirt-orchid\/55 {
  background-color: rgb(180 95 191 / 0.55);
}
.bg-shirt-orchid\/60 {
  background-color: rgb(180 95 191 / 0.6);
}
.bg-shirt-orchid\/65 {
  background-color: rgb(180 95 191 / 0.65);
}
.bg-shirt-orchid\/70 {
  background-color: rgb(180 95 191 / 0.7);
}
.bg-shirt-orchid\/75 {
  background-color: rgb(180 95 191 / 0.75);
}
.bg-shirt-orchid\/80 {
  background-color: rgb(180 95 191 / 0.8);
}
.bg-shirt-orchid\/85 {
  background-color: rgb(180 95 191 / 0.85);
}
.bg-shirt-orchid\/90 {
  background-color: rgb(180 95 191 / 0.9);
}
.bg-shirt-orchid\/95 {
  background-color: rgb(180 95 191 / 0.95);
}
.bg-shirt-prairie-dust {
  --tw-bg-opacity: 1;
  background-color: rgb(201 183 156 / var(--tw-bg-opacity, 1));
}
.bg-shirt-prairie-dust\/0 {
  background-color: rgb(201 183 156 / 0);
}
.bg-shirt-prairie-dust\/10 {
  background-color: rgb(201 183 156 / 0.1);
}
.bg-shirt-prairie-dust\/100 {
  background-color: rgb(201 183 156 / 1);
}
.bg-shirt-prairie-dust\/15 {
  background-color: rgb(201 183 156 / 0.15);
}
.bg-shirt-prairie-dust\/20 {
  background-color: rgb(201 183 156 / 0.2);
}
.bg-shirt-prairie-dust\/25 {
  background-color: rgb(201 183 156 / 0.25);
}
.bg-shirt-prairie-dust\/30 {
  background-color: rgb(201 183 156 / 0.3);
}
.bg-shirt-prairie-dust\/35 {
  background-color: rgb(201 183 156 / 0.35);
}
.bg-shirt-prairie-dust\/40 {
  background-color: rgb(201 183 156 / 0.4);
}
.bg-shirt-prairie-dust\/45 {
  background-color: rgb(201 183 156 / 0.45);
}
.bg-shirt-prairie-dust\/5 {
  background-color: rgb(201 183 156 / 0.05);
}
.bg-shirt-prairie-dust\/50 {
  background-color: rgb(201 183 156 / 0.5);
}
.bg-shirt-prairie-dust\/55 {
  background-color: rgb(201 183 156 / 0.55);
}
.bg-shirt-prairie-dust\/60 {
  background-color: rgb(201 183 156 / 0.6);
}
.bg-shirt-prairie-dust\/65 {
  background-color: rgb(201 183 156 / 0.65);
}
.bg-shirt-prairie-dust\/70 {
  background-color: rgb(201 183 156 / 0.7);
}
.bg-shirt-prairie-dust\/75 {
  background-color: rgb(201 183 156 / 0.75);
}
.bg-shirt-prairie-dust\/80 {
  background-color: rgb(201 183 156 / 0.8);
}
.bg-shirt-prairie-dust\/85 {
  background-color: rgb(201 183 156 / 0.85);
}
.bg-shirt-prairie-dust\/90 {
  background-color: rgb(201 183 156 / 0.9);
}
.bg-shirt-prairie-dust\/95 {
  background-color: rgb(201 183 156 / 0.95);
}
.bg-shirt-royal {
  --tw-bg-opacity: 1;
  background-color: rgb(33 64 154 / var(--tw-bg-opacity, 1));
}
.bg-shirt-royal\/0 {
  background-color: rgb(33 64 154 / 0);
}
.bg-shirt-royal\/10 {
  background-color: rgb(33 64 154 / 0.1);
}
.bg-shirt-royal\/100 {
  background-color: rgb(33 64 154 / 1);
}
.bg-shirt-royal\/15 {
  background-color: rgb(33 64 154 / 0.15);
}
.bg-shirt-royal\/20 {
  background-color: rgb(33 64 154 / 0.2);
}
.bg-shirt-royal\/25 {
  background-color: rgb(33 64 154 / 0.25);
}
.bg-shirt-royal\/30 {
  background-color: rgb(33 64 154 / 0.3);
}
.bg-shirt-royal\/35 {
  background-color: rgb(33 64 154 / 0.35);
}
.bg-shirt-royal\/40 {
  background-color: rgb(33 64 154 / 0.4);
}
.bg-shirt-royal\/45 {
  background-color: rgb(33 64 154 / 0.45);
}
.bg-shirt-royal\/5 {
  background-color: rgb(33 64 154 / 0.05);
}
.bg-shirt-royal\/50 {
  background-color: rgb(33 64 154 / 0.5);
}
.bg-shirt-royal\/55 {
  background-color: rgb(33 64 154 / 0.55);
}
.bg-shirt-royal\/60 {
  background-color: rgb(33 64 154 / 0.6);
}
.bg-shirt-royal\/65 {
  background-color: rgb(33 64 154 / 0.65);
}
.bg-shirt-royal\/70 {
  background-color: rgb(33 64 154 / 0.7);
}
.bg-shirt-royal\/75 {
  background-color: rgb(33 64 154 / 0.75);
}
.bg-shirt-royal\/80 {
  background-color: rgb(33 64 154 / 0.8);
}
.bg-shirt-royal\/85 {
  background-color: rgb(33 64 154 / 0.85);
}
.bg-shirt-royal\/90 {
  background-color: rgb(33 64 154 / 0.9);
}
.bg-shirt-royal\/95 {
  background-color: rgb(33 64 154 / 0.95);
}
.bg-shirt-sand {
  --tw-bg-opacity: 1;
  background-color: rgb(220 203 169 / var(--tw-bg-opacity, 1));
}
.bg-shirt-sand\/0 {
  background-color: rgb(220 203 169 / 0);
}
.bg-shirt-sand\/10 {
  background-color: rgb(220 203 169 / 0.1);
}
.bg-shirt-sand\/100 {
  background-color: rgb(220 203 169 / 1);
}
.bg-shirt-sand\/15 {
  background-color: rgb(220 203 169 / 0.15);
}
.bg-shirt-sand\/20 {
  background-color: rgb(220 203 169 / 0.2);
}
.bg-shirt-sand\/25 {
  background-color: rgb(220 203 169 / 0.25);
}
.bg-shirt-sand\/30 {
  background-color: rgb(220 203 169 / 0.3);
}
.bg-shirt-sand\/35 {
  background-color: rgb(220 203 169 / 0.35);
}
.bg-shirt-sand\/40 {
  background-color: rgb(220 203 169 / 0.4);
}
.bg-shirt-sand\/45 {
  background-color: rgb(220 203 169 / 0.45);
}
.bg-shirt-sand\/5 {
  background-color: rgb(220 203 169 / 0.05);
}
.bg-shirt-sand\/50 {
  background-color: rgb(220 203 169 / 0.5);
}
.bg-shirt-sand\/55 {
  background-color: rgb(220 203 169 / 0.55);
}
.bg-shirt-sand\/60 {
  background-color: rgb(220 203 169 / 0.6);
}
.bg-shirt-sand\/65 {
  background-color: rgb(220 203 169 / 0.65);
}
.bg-shirt-sand\/70 {
  background-color: rgb(220 203 169 / 0.7);
}
.bg-shirt-sand\/75 {
  background-color: rgb(220 203 169 / 0.75);
}
.bg-shirt-sand\/80 {
  background-color: rgb(220 203 169 / 0.8);
}
.bg-shirt-sand\/85 {
  background-color: rgb(220 203 169 / 0.85);
}
.bg-shirt-sand\/90 {
  background-color: rgb(220 203 169 / 0.9);
}
.bg-shirt-sand\/95 {
  background-color: rgb(220 203 169 / 0.95);
}
.bg-shirt-sky {
  --tw-bg-opacity: 1;
  background-color: rgb(126 200 227 / var(--tw-bg-opacity, 1));
}
.bg-shirt-sky\/0 {
  background-color: rgb(126 200 227 / 0);
}
.bg-shirt-sky\/10 {
  background-color: rgb(126 200 227 / 0.1);
}
.bg-shirt-sky\/100 {
  background-color: rgb(126 200 227 / 1);
}
.bg-shirt-sky\/15 {
  background-color: rgb(126 200 227 / 0.15);
}
.bg-shirt-sky\/20 {
  background-color: rgb(126 200 227 / 0.2);
}
.bg-shirt-sky\/25 {
  background-color: rgb(126 200 227 / 0.25);
}
.bg-shirt-sky\/30 {
  background-color: rgb(126 200 227 / 0.3);
}
.bg-shirt-sky\/35 {
  background-color: rgb(126 200 227 / 0.35);
}
.bg-shirt-sky\/40 {
  background-color: rgb(126 200 227 / 0.4);
}
.bg-shirt-sky\/45 {
  background-color: rgb(126 200 227 / 0.45);
}
.bg-shirt-sky\/5 {
  background-color: rgb(126 200 227 / 0.05);
}
.bg-shirt-sky\/50 {
  background-color: rgb(126 200 227 / 0.5);
}
.bg-shirt-sky\/55 {
  background-color: rgb(126 200 227 / 0.55);
}
.bg-shirt-sky\/60 {
  background-color: rgb(126 200 227 / 0.6);
}
.bg-shirt-sky\/65 {
  background-color: rgb(126 200 227 / 0.65);
}
.bg-shirt-sky\/70 {
  background-color: rgb(126 200 227 / 0.7);
}
.bg-shirt-sky\/75 {
  background-color: rgb(126 200 227 / 0.75);
}
.bg-shirt-sky\/80 {
  background-color: rgb(126 200 227 / 0.8);
}
.bg-shirt-sky\/85 {
  background-color: rgb(126 200 227 / 0.85);
}
.bg-shirt-sky\/90 {
  background-color: rgb(126 200 227 / 0.9);
}
.bg-shirt-sky\/95 {
  background-color: rgb(126 200 227 / 0.95);
}
.bg-shirt-tan {
  --tw-bg-opacity: 1;
  background-color: rgb(198 169 133 / var(--tw-bg-opacity, 1));
}
.bg-shirt-tan\/0 {
  background-color: rgb(198 169 133 / 0);
}
.bg-shirt-tan\/10 {
  background-color: rgb(198 169 133 / 0.1);
}
.bg-shirt-tan\/100 {
  background-color: rgb(198 169 133 / 1);
}
.bg-shirt-tan\/15 {
  background-color: rgb(198 169 133 / 0.15);
}
.bg-shirt-tan\/20 {
  background-color: rgb(198 169 133 / 0.2);
}
.bg-shirt-tan\/25 {
  background-color: rgb(198 169 133 / 0.25);
}
.bg-shirt-tan\/30 {
  background-color: rgb(198 169 133 / 0.3);
}
.bg-shirt-tan\/35 {
  background-color: rgb(198 169 133 / 0.35);
}
.bg-shirt-tan\/40 {
  background-color: rgb(198 169 133 / 0.4);
}
.bg-shirt-tan\/45 {
  background-color: rgb(198 169 133 / 0.45);
}
.bg-shirt-tan\/5 {
  background-color: rgb(198 169 133 / 0.05);
}
.bg-shirt-tan\/50 {
  background-color: rgb(198 169 133 / 0.5);
}
.bg-shirt-tan\/55 {
  background-color: rgb(198 169 133 / 0.55);
}
.bg-shirt-tan\/60 {
  background-color: rgb(198 169 133 / 0.6);
}
.bg-shirt-tan\/65 {
  background-color: rgb(198 169 133 / 0.65);
}
.bg-shirt-tan\/70 {
  background-color: rgb(198 169 133 / 0.7);
}
.bg-shirt-tan\/75 {
  background-color: rgb(198 169 133 / 0.75);
}
.bg-shirt-tan\/80 {
  background-color: rgb(198 169 133 / 0.8);
}
.bg-shirt-tan\/85 {
  background-color: rgb(198 169 133 / 0.85);
}
.bg-shirt-tan\/90 {
  background-color: rgb(198 169 133 / 0.9);
}
.bg-shirt-tan\/95 {
  background-color: rgb(198 169 133 / 0.95);
}
.bg-shirt-texas-orange {
  --tw-bg-opacity: 1;
  background-color: rgb(199 91 18 / var(--tw-bg-opacity, 1));
}
.bg-shirt-texas-orange\/0 {
  background-color: rgb(199 91 18 / 0);
}
.bg-shirt-texas-orange\/10 {
  background-color: rgb(199 91 18 / 0.1);
}
.bg-shirt-texas-orange\/100 {
  background-color: rgb(199 91 18 / 1);
}
.bg-shirt-texas-orange\/15 {
  background-color: rgb(199 91 18 / 0.15);
}
.bg-shirt-texas-orange\/20 {
  background-color: rgb(199 91 18 / 0.2);
}
.bg-shirt-texas-orange\/25 {
  background-color: rgb(199 91 18 / 0.25);
}
.bg-shirt-texas-orange\/30 {
  background-color: rgb(199 91 18 / 0.3);
}
.bg-shirt-texas-orange\/35 {
  background-color: rgb(199 91 18 / 0.35);
}
.bg-shirt-texas-orange\/40 {
  background-color: rgb(199 91 18 / 0.4);
}
.bg-shirt-texas-orange\/45 {
  background-color: rgb(199 91 18 / 0.45);
}
.bg-shirt-texas-orange\/5 {
  background-color: rgb(199 91 18 / 0.05);
}
.bg-shirt-texas-orange\/50 {
  background-color: rgb(199 91 18 / 0.5);
}
.bg-shirt-texas-orange\/55 {
  background-color: rgb(199 91 18 / 0.55);
}
.bg-shirt-texas-orange\/60 {
  background-color: rgb(199 91 18 / 0.6);
}
.bg-shirt-texas-orange\/65 {
  background-color: rgb(199 91 18 / 0.65);
}
.bg-shirt-texas-orange\/70 {
  background-color: rgb(199 91 18 / 0.7);
}
.bg-shirt-texas-orange\/75 {
  background-color: rgb(199 91 18 / 0.75);
}
.bg-shirt-texas-orange\/80 {
  background-color: rgb(199 91 18 / 0.8);
}
.bg-shirt-texas-orange\/85 {
  background-color: rgb(199 91 18 / 0.85);
}
.bg-shirt-texas-orange\/90 {
  background-color: rgb(199 91 18 / 0.9);
}
.bg-shirt-texas-orange\/95 {
  background-color: rgb(199 91 18 / 0.95);
}
.bg-shirt-turf-green {
  --tw-bg-opacity: 1;
  background-color: rgb(47 122 70 / var(--tw-bg-opacity, 1));
}
.bg-shirt-turf-green\/0 {
  background-color: rgb(47 122 70 / 0);
}
.bg-shirt-turf-green\/10 {
  background-color: rgb(47 122 70 / 0.1);
}
.bg-shirt-turf-green\/100 {
  background-color: rgb(47 122 70 / 1);
}
.bg-shirt-turf-green\/15 {
  background-color: rgb(47 122 70 / 0.15);
}
.bg-shirt-turf-green\/20 {
  background-color: rgb(47 122 70 / 0.2);
}
.bg-shirt-turf-green\/25 {
  background-color: rgb(47 122 70 / 0.25);
}
.bg-shirt-turf-green\/30 {
  background-color: rgb(47 122 70 / 0.3);
}
.bg-shirt-turf-green\/35 {
  background-color: rgb(47 122 70 / 0.35);
}
.bg-shirt-turf-green\/40 {
  background-color: rgb(47 122 70 / 0.4);
}
.bg-shirt-turf-green\/45 {
  background-color: rgb(47 122 70 / 0.45);
}
.bg-shirt-turf-green\/5 {
  background-color: rgb(47 122 70 / 0.05);
}
.bg-shirt-turf-green\/50 {
  background-color: rgb(47 122 70 / 0.5);
}
.bg-shirt-turf-green\/55 {
  background-color: rgb(47 122 70 / 0.55);
}
.bg-shirt-turf-green\/60 {
  background-color: rgb(47 122 70 / 0.6);
}
.bg-shirt-turf-green\/65 {
  background-color: rgb(47 122 70 / 0.65);
}
.bg-shirt-turf-green\/70 {
  background-color: rgb(47 122 70 / 0.7);
}
.bg-shirt-turf-green\/75 {
  background-color: rgb(47 122 70 / 0.75);
}
.bg-shirt-turf-green\/80 {
  background-color: rgb(47 122 70 / 0.8);
}
.bg-shirt-turf-green\/85 {
  background-color: rgb(47 122 70 / 0.85);
}
.bg-shirt-turf-green\/90 {
  background-color: rgb(47 122 70 / 0.9);
}
.bg-shirt-turf-green\/95 {
  background-color: rgb(47 122 70 / 0.95);
}
.bg-shirt-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-shirt-white\/0 {
  background-color: rgb(255 255 255 / 0);
}
.bg-shirt-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}
.bg-shirt-white\/100 {
  background-color: rgb(255 255 255 / 1);
}
.bg-shirt-white\/15 {
  background-color: rgb(255 255 255 / 0.15);
}
.bg-shirt-white\/20 {
  background-color: rgb(255 255 255 / 0.2);
}
.bg-shirt-white\/25 {
  background-color: rgb(255 255 255 / 0.25);
}
.bg-shirt-white\/30 {
  background-color: rgb(255 255 255 / 0.3);
}
.bg-shirt-white\/35 {
  background-color: rgb(255 255 255 / 0.35);
}
.bg-shirt-white\/40 {
  background-color: rgb(255 255 255 / 0.4);
}
.bg-shirt-white\/45 {
  background-color: rgb(255 255 255 / 0.45);
}
.bg-shirt-white\/5 {
  background-color: rgb(255 255 255 / 0.05);
}
.bg-shirt-white\/50 {
  background-color: rgb(255 255 255 / 0.5);
}
.bg-shirt-white\/55 {
  background-color: rgb(255 255 255 / 0.55);
}
.bg-shirt-white\/60 {
  background-color: rgb(255 255 255 / 0.6);
}
.bg-shirt-white\/65 {
  background-color: rgb(255 255 255 / 0.65);
}
.bg-shirt-white\/70 {
  background-color: rgb(255 255 255 / 0.7);
}
.bg-shirt-white\/75 {
  background-color: rgb(255 255 255 / 0.75);
}
.bg-shirt-white\/80 {
  background-color: rgb(255 255 255 / 0.8);
}
.bg-shirt-white\/85 {
  background-color: rgb(255 255 255 / 0.85);
}
.bg-shirt-white\/90 {
  background-color: rgb(255 255 255 / 0.9);
}
.bg-shirt-white\/95 {
  background-color: rgb(255 255 255 / 0.95);
}
.object-contain {
  object-fit: contain;
}
.object-cover {
  object-fit: cover;
}
.object-right {
  object-position: right;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-gutter {
  padding-left: clamp(1rem, 4vw, 4rem);
  padding-right: clamp(1rem, 4vw, 4rem);
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-10 {
  padding-bottom: 2.5rem;
}
.pb-12 {
  padding-bottom: 3rem;
}
.pb-14 {
  padding-bottom: 3.5rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-24 {
  padding-bottom: 6rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pb-section {
  padding-bottom: clamp(4rem, 10vw, 10rem);
}
.pt-10 {
  padding-top: 2.5rem;
}
.pt-12 {
  padding-top: 3rem;
}
.pt-16 {
  padding-top: 4rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-8 {
  padding-top: 2rem;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.font-display {
  font-family: Outfit, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}
.font-hero {
  font-family: Anton, Impact, Haettenschweiler, sans-serif;
}
.font-mono {
  font-family: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
}
.text-body {
  font-size: 1rem;
  line-height: 1.6;
}
.text-body-l {
  font-size: 1.125rem;
  line-height: 1.6;
}
.text-display-l {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.text-display-xl {
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
}
.text-h1 {
  font-size: clamp(1.875rem, 3.6vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.text-h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.text-h3 {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.text-micro {
  font-size: 0.75rem;
  line-height: 1.2;
  letter-spacing: 0.12em;
}
.text-small {
  font-size: 0.875rem;
  line-height: 1.5;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.tracking-micro {
  letter-spacing: 0.12em;
}
.text-accent {
  --tw-text-opacity: 1;
  color: rgb(230 51 41 / var(--tw-text-opacity, 1));
}
.text-ink {
  --tw-text-opacity: 1;
  color: rgb(11 11 12 / var(--tw-text-opacity, 1));
}
.text-ink-soft {
  --tw-text-opacity: 1;
  color: rgb(69 69 75 / var(--tw-text-opacity, 1));
}
.text-paper {
  --tw-text-opacity: 1;
  color: rgb(250 248 244 / var(--tw-text-opacity, 1));
}
.text-paper\/60 {
  color: rgb(250 248 244 / 0.6);
}
.text-paper\/70 {
  color: rgb(250 248 244 / 0.7);
}
.text-paper\/75 {
  color: rgb(250 248 244 / 0.75);
}
.text-paper\/80 {
  color: rgb(250 248 244 / 0.8);
}
.outline {
  outline-style: solid;
}
.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
/* ============================================================================
   MakeAmerica.ca — component layer
   Every repeated pattern lives here as an `ma-` class composed with @apply.
   Tokens come from tailwind.config.js — no raw hex / rem values in markup.

   THIS FILE IS THE SOURCE, NOT THE STYLESHEET THE PAGES LOAD.
   Edit here, then run the build:

       npm run build:css      ->  assets/css/build.css

   Every page links assets/css/build.css and nothing else. There is no \3c style> block
   in any page any more, and no Tailwind CDN: the old setup compiled @apply in the
   browser, which forced this file to be duplicated inside a
   \3c style type="text/tailwindcss"> block on all 12 pages. Editing main.css without
   rebuilding now changes nothing on the pages — that is the one thing to remember.

   WARNING: Tailwind aborts on the FIRST unknown class inside @apply. That used to
   leave every page silently unstyled; the build now fails loudly instead, so read the
   error rather than opening a browser. The trap that has already bitten once: opacity
   modifiers must be a multiple of 5 (bg-ink/85 fine, from-ink/92 fatal). Use /[92%]
   if a non-multiple is really needed.
   ========================================================================= */

/* ============================================================================
   Keyframes, declared as plain CSS on purpose.
   Tailwind emits @keyframes only for `animate-*` utilities it finds in the content it
   scans — it does not hoist them when the utility is reached through @apply, which is
   how every animation in this file is composed. Without these blocks the marquee, the
   reveal, the spinner and the preloader all resolve to an animation-name with no
   definition and simply never run.
   The same names are also declared in tailwind.config.js, so add a new animation in
   BOTH places or it will not run.
   ========================================================================= */
@keyframes marquee {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
@keyframes fade-up {
  0% { opacity: 0; transform: translate3d(0, 1.25rem, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes rise-in {
  0% { opacity: 0; transform: translate3d(0, 2rem, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes slogan-cycle {
  0%, 14%   { transform: translate3d(0, 0, 0); }
  20%, 34%  { transform: translate3d(0, -100%, 0); }
  40%, 54%  { transform: translate3d(0, -200%, 0); }
  60%, 74%  { transform: translate3d(0, -300%, 0); }
  80%, 100% { transform: translate3d(0, -400%, 0); }
}
@keyframes bar-fill {
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}
@keyframes preload-out {
  0%, 88% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}
/* Tailwind built-ins used through @apply */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: 0.5; } }

.ma-no-motion .ma-drawer,
.ma-no-motion .ma-overlay-panel,
.ma-no-motion .ma-scrim,
.ma-no-motion .ma-mega,
.ma-no-motion .ma-filters,
.ma-no-motion .ma-toast,
.ma-no-motion .ma-reveal,
.ma-no-motion .ma-header__bar,
.ma-no-motion .ma-logo__img,
.ma-no-motion .ma-product-card__img,
.ma-no-motion .ma-product-card__img--alt,
.ma-no-motion .ma-topbar,
.ma-no-motion .ma-modal,
.ma-no-motion .ma-modal__panel,
.ma-no-motion .ma-card__img,
.ma-no-motion .ma-cat__img,
.ma-no-motion .ma-cat__media,
.ma-no-motion .ma-mega__img,
.ma-no-motion .ma-btn,
.ma-no-motion .ma-btn::before,
.ma-no-motion .ma-product-card__quickadd,
.ma-no-motion .ma-product-card__swatches,
.ma-no-motion .ma-tile__img,
.ma-no-motion .ma-tile__name {
  transition: none;
}

.ma-no-motion .ma-marquee__track,
.ma-no-motion .ma-ticker__track { animation: none; }

/* no animation available -> the preloader must not exist at all */
.ma-no-motion .ma-preloader { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ma-preloader { display: none; }
  .ma-marquee__track, .ma-ticker__track { animation: none; }
  .ma-product-card__img, .ma-tile__img, .ma-card__img, .ma-cat__img { transform: none; }
}

/* ============================================================================
   🔴 `hidden` ATTRIBUTE KO WAPAS JEETNA — round 5 ka ek chhupa hua bug class
   ============================================================================

   JS mein kai jagah element `el.hidden = true` se chhupaye jate hain:

       filters.js     "Apply filters" button (JS chalne par chhupna chahiye)
       quickview.js   variable product par modal ka "Add to cart"
       notices.js     toast ka action link
       variations.js  R5-9 ka red error
       product.js     size guide ka no-JS fallback link

   Magar `[hidden]` browser ki DEFAULT stylesheet mein `display: none` hai, aur
   koi bhi AUTHOR rule us par bhaari hota hai — chahe uski specificity kitni hi
   kam ho. `.ma-btn { display: inline-flex }` (0,1,0) UA ke `[hidden]` ko haraa
   deta hai.

   Nateeja: wo saare elements `hidden` hone ke BAWAJOOD screen par nazar aate
   rahe. Koi error nahi, koi console warning nahi — bas kaam nahi hua. Filters ka
   "Apply filters" button aur quick-view ka add-to-cart dono isi wajah se dikh
   rahe thay jab ke code unhe chhupa raha tha.

   `!important` ki zaroorat nahi (brief usay mana karta hai): `[hidden][hidden]`
   ek hi attribute do bar likhne se specificity 0,2,0 ho jati hai, jo `.ma-btn`
   aur baqi component classes se zyada hai. File ke AAKHIR mein hai, isliye
   0,2,0 wali kisi bhi rule se ties bhi jeet leta hai.

   ⚠️ Naya component likhte waqt: agar us par `display` ki rule hai aur usay JS
   se `hidden` karna hai, to ye rule pehle se sambhal leta hai. Kuch alag mat
   karna.
   ============================================================================ */
[hidden][hidden] { display: none; }

/* Drawer aur cart ki line par "kaam chal raha hai" ka ishara — R6-3.
   `.ma-drawer--busy` update ke dauran, `.ma-cart-item--going` remove ke click
   par (navigation shuru hone se pehle user ko jawab milna chahiye). */
.ma-drawer--busy .ma-drawer__body,
.ma-drawer--busy .ma-drawer__foot {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 150ms linear;
}

.ma-cart-item--going {
  opacity: 0.4;
  pointer-events: none;
}

/* ---------- quick view ka options block (R7-1 / R7-6) ----------
   Modal mein asli PDP form aata hai, isliye us ke andar ki har cheez pehle se
   styled hai. Yahan sirf do baatein: form ko modal ki tang chaudai mein saans
   dena, aur load hone ke lamhe ka message. */
.ma-quickview__form { margin-top: 0.25rem; }
.ma-quickview__product:empty { display: none; }

.ma-quickview__loading {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #45454B;
}

/* Chip jo sirf batati hai, chunwati nahi (R8-9) — simple product ka size.
   Wahi shakl jo asli chip ki hai (customer ke liye "size" ek hi cheez hai),
   magar na hover, na cursor, na koi wada ke ye click hoti hai. */
.ma-chip--static {
  cursor: default;
  border-color: rgba(11,11,12,0.12);
  --tw-bg-opacity: 1;
  background-color: rgb(239 234 225 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(69 69 75 / var(--tw-text-opacity, 1));
}
.ma-chip--static:hover {
  border-color: rgba(11,11,12,0.12);
}
.last\:mb-0:last-child {
  margin-bottom: 0px;
}
.hover\:text-accent:hover {
  --tw-text-opacity: 1;
  color: rgb(230 51 41 / var(--tw-text-opacity, 1));
}
@media (min-width: 375px) {

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

  .sm\:gap-4 {
    gap: 1rem;
  }

  .sm\:gap-y-12 {
    row-gap: 3rem;
  }
}
@media (min-width: 768px) {

  .md\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .md\:mt-12 {
    margin-top: 3rem;
  }

  .md\:aspect-\[16\/6\] {
    aspect-ratio: 16/6;
  }

  .md\:aspect-\[3\/2\] {
    aspect-ratio: 3/2;
  }

  .md\:aspect-hero {
    aspect-ratio: 2 / 1;
  }

  .md\:rotate-90 {
    --tw-rotate: 90deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .md\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

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

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:gap-10 {
    gap: 2.5rem;
  }

  .md\:gap-2 {
    gap: 0.5rem;
  }

  .md\:border-b-0 {
    border-bottom-width: 0px;
  }

  .md\:border-r {
    border-right-width: 1px;
  }

  .md\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .md\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .md\:py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .md\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .md\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .md\:py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  .md\:pb-20 {
    padding-bottom: 5rem;
  }

  .md\:pl-8 {
    padding-left: 2rem;
  }

  .md\:pr-8 {
    padding-right: 2rem;
  }

  .md\:pt-24 {
    padding-top: 6rem;
  }
}
@media (min-width: 1024px) {

  .lg\:sticky {
    position: sticky;
  }

  .lg\:top-28 {
    top: 7rem;
  }

  .lg\:top-32 {
    top: 8rem;
  }

  .lg\:col-span-12 {
    grid-column: span 12 / span 12;
  }

  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .lg\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .lg\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .lg\:col-span-6 {
    grid-column: span 6 / span 6;
  }

  .lg\:col-span-7 {
    grid-column: span 7 / span 7;
  }

  .lg\:col-span-8 {
    grid-column: span 8 / span 8;
  }

  .lg\:col-span-9 {
    grid-column: span 9 / span 9;
  }

  .lg\:col-start-5 {
    grid-column-start: 5;
  }

  .lg\:block {
    display: block;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:items-center {
    align-items: center;
  }

  .lg\:justify-between {
    justify-content: space-between;
  }

  .lg\:gap-10 {
    gap: 2.5rem;
  }

  .lg\:gap-12 {
    gap: 3rem;
  }

  .lg\:gap-16 {
    gap: 4rem;
  }

  .lg\:gap-6 {
    gap: 1.5rem;
  }

  .lg\:gap-8 {
    gap: 2rem;
  }

  .lg\:gap-x-8 {
    column-gap: 2rem;
  }

  .lg\:self-start {
    align-self: flex-start;
  }

  .lg\:pt-4 {
    padding-top: 1rem;
  }
}