/* ============================================================
   u_style.css — GLOBAL STYLES
   ============================================================ */



/* #region |||||||||| FONTS ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*| */

    /* #region ----- BODONI MODA — H1, Headlines, Titles, Quotes ----------------------------*| */
    @font-face {
      font-family: 'Bodoni Moda';
      src: url('../fonts/BodoniModa-VariableFont_opsz,wght.ttf') format('truetype');
      font-weight: 400 900;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Bodoni Moda';
      src: url('../fonts/BodoniModa-Italic-VariableFont_opsz,wght.ttf') format('truetype');
      font-weight: 400 900;
      font-style: italic;
      font-display: swap;
    }
    /* #endregion */

    /* #region ----- YU GOTHIC — H2, H3, Sub-Headline, Body Text ----------------------------*| */
    @font-face {
      font-family: 'Yu Gothic';
      src: url('../fonts/Yu Gothic Light.ttf') format('truetype');
      font-weight: 300;
      font-style: normal;
      font-display: swap;
    }
    /* #endregion */

/* #endregion */



/* #region |||||||||| DESIGN TOKENS ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*| */
:root {

    /* #region ----- BRAND COLOURS --------------------------------------------------------------------------------------------*| */
      --C-RUB:      #BB2026;                  /* Ruby Ember   — primary action */
      --C-RUB-D:    #9e1b20;                  /* Ruby Ember   — hover / pressed */
      --C-GAR:      #411317;                  /* Deep Garnet  — secondary accent */
      --C-GAR-D:    #2e0d10;                  /* Deep Garnet  — hover / pressed */
      --C-COL:      #171718;                  /* Eerie Charcoal — text / dark surfaces */
      --C-BON:      #E5D9CC;                  /* Bone Mist    — light background */
      --C-BON-D:    #d0c2b2;                  /* Bone Mist    — borders / dividers */
      --C-WHT:      #FFFFFF;                  /* Pure White */
      --C-BLK:      #000000;
      --C-GRD:      rgba(65, 19, 23, 0.07);   /* Deep Garnet tint — background grid */
    /* #endregion */

    /* #region ----- FONTS --------------------------------------------------------------------------------------------*| */
      --F-HDG:      'Bodoni Moda', Georgia, serif;       /* H1, headlines, titles, quotes */
      --F-BDY:      'Yu Gothic',   Arial,   sans-serif;  /* H2, H3, sub-headings, body */
    /* #endregion */

    /* #region ----- SPACING SCALE --------------------------------------------------------------------------------------------*| */
      --S-XS:       0.25rem;    /*  4px — tight nudges */
      --S-SM:       0.5rem;     /*  8px — small gaps */
      --S-MD:       1rem;       /* 16px — base unit */
      --S-LG:       1.5rem;     /* 24px — comfortable breathing room */
      --S-XL:       2.5rem;     /* 40px — section padding */
      --S-2XL:      4rem;       /* 64px — large section gaps */
      --S-3XL:      6rem;       /* 96px — hero / page-level spacing */
    /* #endregion */

    /* #region ----- SEMANTIC SPACING --------------------------------------------------------------------------------------------*| */
      --G-SEC:      var(--S-XL);    /* top/bottom padding on every .section */
      --G-SEC-SM:   var(--S-MD);    /* tight sections (.section--tight) */
      --G-SEC-LG:   var(--S-2XL);   /* loose sections (.section--loose) */
      --G-HD:       var(--S-MD);    /* space below a .section__header */
      --G-SHD:      var(--S-MD);    /* space below a .section__sub */
      --G-CNT:      var(--S-LG);    /* gap between header block and content */
      --G-CRD:      var(--S-MD);    /* gap between cards in a grid */
      --P-CRD:      var(--S-LG);    /* internal padding inside cards */
      --P-PGE-X:    var(--S-LG);    /* horizontal page margin on narrow viewports */
    /* #endregion */

    /* #region ----- TYPE SCALE --------------------------------------------------------------------------------------------*| */
      --T-XS:       0.75rem;    /* 12px — labels, captions, legal */
      --T-SM:       0.875rem;   /* 14px — small UI text */
      --T-MD:       1rem;       /* 16px — base body */
      --T-LG:       1.25rem;    /* 20px — lead paragraphs */
      --T-XL:       1.5rem;     /* 24px — small headings */
      --T-2XL:      2rem;       /* 32px — section headings */
      --T-3XL:      3rem;       /* 48px — hero headings */
    /* #endregion */

    /* #region ----- SHAPES --------------------------------------------------------------------------------------------*| */
      --R-SM:       4px;        /* subtle rounding — inputs, tags */
      --R-MD:       8px;        /* cards, buttons */
      --R-LG:       12px;       /* modals, panels */
      --R-XL:       20px;       /* large cards */
      --R-PILL:     999px;      /* fully rounded — badges, pills */
      --R-CIRCLE:   50%;        /* avatars, icons */
    /* #endregion */

    /* #region ----- LAYOUT --------------------------------------------------------------------------------------------*| */
      --L-MWID:     1200px;     /* outer max-width */
      --L-CWID:     1100px;     /* content max-width */
      --L-WPRO:     680px;      /* readable prose line length */
      --L-WNAR:     480px;      /* forms, modals */
      --L-NAV-H:    65px;       /* nav height — adjust if logo changes */
    /* #endregion */

    /* #region ----- GRADIENTS --------------------------------------------------------------------------------------------*| */
      --G-TOP:      linear-gradient(to top,    var(--C-RUB), var(--C-GAR));
      --G-RIGHT:    linear-gradient(to right,  var(--C-RUB), var(--C-GAR));
      --G-BOTTOM:   linear-gradient(to bottom, var(--C-RUB), var(--C-GAR));
      --G-FADE:     linear-gradient(to top,    var(--C-BLK) 0%, transparent 100%);
      --G-90:       90%;
    /* #endregion */

    /* #region ----- SHADOWS --------------------------------------------------------------------------------------------*| */
      --SH-SM:      0 1px  3px  rgba(0, 0, 0, 0.08);
      --SH-MD:      0 4px  12px rgba(0, 0, 0, 0.10);
      --SH-LG:      0 8px  24px rgba(0, 0, 0, 0.12);
      --SH-XL:      0 16px 48px rgba(0, 0, 0, 0.15);
      --SH-CRD:     0 4px  15px rgba(0, 0, 0, 0.06);
      --SH-CRD-HVR: 0 12px 30px rgba(0, 0, 0, 0.16);
    /* #endregion */

    /* #region ----- TRANSITIONS --------------------------------------------------------------------------------------------*| */
      --T-FAST:     0.15s ease;
      --T-BASE:     0.25s ease;
      --T-SLOW:     0.4s  ease;
    /* #endregion */

}
/* #endregion */



/* #region |||||||||| BROWSER SETTINGS ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*| */

    /* #region ----- RESET --------------------------------------------------------------------------------------------*| */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    /* #endregion */

    /* #region ----- SMOOTH SCROLL --------------------------------------------------------------------------------------------*| */
    html {
      scroll-behavior: smooth;
      overflow-x: hidden;
    }
    /* #endregion */

    /* #region ----- BODY --------------------------------------------------------------------------------------------*| */
    body {
      font-family: var(--F-BDY);
      color: var(--C-COL);
      background: var(--C-BON);
      line-height: 1.6;
      font-weight: 400;
      font-size: var(--T-MD);
      min-height: 100vh;
      isolation: isolate;
      animation: pageFadeIn 0.25s ease forwards;
      overflow-x: hidden;
      max-width: 100vw;
      display: flex;
      flex-direction: column; /* sticky footer — main uses flex:1 */
      /* Smoother rendering — reduces hairline wispiness site-wide */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    /* #endregion */

    /* #region ----- PAGE TRANSITIONS --------------------------------------------------------------------------------------------*| */
    body.is-leaving {
      animation: pageFadeOut 0.2s ease forwards;
      pointer-events: none;
    }
    @keyframes pageFadeIn  { from { opacity: 0; } to { opacity: 1; } }
    @keyframes pageFadeOut { from { opacity: 1; } to { opacity: 0; } }
    /* #endregion */

/* #endregion */



/* #region |||||||||| BACKGROUND ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*| */

    /* Background grid removed */

/* #endregion */



/* #region |||||||||| TYPOGRAPHY ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*| */

    /* #region ----- HEADINGS --------------------------------------------------------------------------------------------*| */
    h1 {
      font-family: var(--F-HDG);
      font-size: var(--T-3XL);       /* 48px */
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -0.03em;
      color: var(--C-COL);
    }
    h2 {
      font-family: var(--F-BDY);
      font-size: var(--T-2XL);       /* 32px */
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -0.025em;
      color: var(--C-COL);
    }
    h3 {
      font-family: var(--F-BDY);
      font-size: var(--T-XL);        /* 24px */
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: -0.02em;
      color: var(--C-COL);
    }
    h4 {
      font-family: var(--F-HDG);
      font-size: var(--T-LG);        /* 20px */
      font-weight: 600;
      line-height: 1.3;
      letter-spacing: -0.01em;
      color: var(--C-COL);
    }
    h5 {
      font-family: var(--F-HDG);
      font-size: var(--T-MD);        /* 16px */
      font-weight: 600;
      line-height: 1.4;
      color: var(--C-COL);
    }
    h6 {
      font-family: var(--F-HDG);
      font-size: var(--T-SM);        /* 14px */
      font-weight: 600;
      line-height: 1.4;
      letter-spacing: 0.01em;
      color: var(--C-COL);
    }
    /* #endregion */

    /* #region ----- BODY VARIANTS --------------------------------------------------------------------------------------------*| */
    .text-xl { font-size: var(--T-XL);  line-height: 1.4; font-weight: 300; } /* hero intro / pull quotes */
    .text-lg { font-size: var(--T-LG);  line-height: 1.5; font-weight: 400; } /* lead paragraph */
    .text-md { font-size: var(--T-MD);  line-height: 1.6; font-weight: 400; } /* standard body */
    .text-sm { font-size: var(--T-SM);  line-height: 1.6; font-weight: 400; } /* captions, meta */
    .text-xs { font-size: var(--T-XS);  line-height: 1.5; font-weight: 500; } /* labels, legal */
    /* #endregion */

/* #endregion */



/* #region |||||||||| SECTIONS ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*| */

    /* #region ----- BASE --------------------------------------------------------------------------------------------*| */
    .section {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: var(--L-CWID);
      margin: 0 auto;
      padding: var(--G-SEC) var(--P-PGE-X);
    }

    /* Remove horizontal padding when the viewport provides a natural gutter */
    @media (min-width: 1160px) {
      .section { padding-left: 0; padding-right: 0; }
    }

    /* Tighten vertical rhythm on mobile */
    @media (max-width: 768px) {
      .section       { padding: var(--S-2XL) var(--S-XL); }
      .section--hero { padding-top: var(--S-2XL); padding-bottom: var(--S-XL); }
    }
    @media (max-width: 480px) {
      .section       { padding: var(--S-XL) var(--S-LG); }
      .section--hero { padding-top: var(--S-XL); padding-bottom: var(--S-LG); }
    }
    /* #endregion */

    /* #region ----- WIDTH MODIFIERS --------------------------------------------------------------------------------------------*| */
    .section--narrow  { max-width: var(--L-WPRO); } /* 680px — article body, success pages */
    /* #endregion */

    /* #region ----- SPACING MODIFIERS --------------------------------------------------------------------------------------------*| */
    .section--flush   { padding-top: 0;               padding-bottom: 0;               }
    .section--tight   { padding-top: var(--G-SEC-SM);  padding-bottom: var(--G-SEC-SM); }
    .section--loose   { padding-top: var(--G-SEC-LG);  padding-bottom: var(--G-SEC-LG); }
    .section--hero    { padding-top: var(--S-3XL);     padding-bottom: var(--G-SEC-LG); }

    main > .section:first-child { padding-top: var(--G-SEC); } /* consistent distance from nav */
    /* #endregion */

    /* #region ----- LAYOUT MODIFIERS --------------------------------------------------------------------------------------------*| */
    .section--split {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: var(--G-SEC-LG);
      align-items: start;
    }
    .section--grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--G-CRD); }
    .section--grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--G-CRD); }

    @media (max-width: 900px) {
      .section--split  { grid-template-columns: 1fr; gap: var(--S-LG); }
      .section--grid-3 { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 560px) {
      .section--grid-2,
      .section--grid-3 { grid-template-columns: 1fr; }
    }
    /* #endregion */

    /* #region ----- SECTION HEADING --------------------------------------------------------------------------------------------*| */
    .section__header {
      font-family: var(--F-HDG);
      font-size: var(--T-2XL);
      color: var(--C-COL);
      margin-bottom: var(--G-HD);
      text-align: left;
      padding: var(--S-SM) 0;
    }
    .section__header--accent { color: var(--C-RUB); }
    .section__header--hero   { font-size: var(--T-3XL); font-weight: 800; }

    @media (max-width: 768px) { .section__header--hero { font-size: var(--T-2XL); } }
    @media (max-width: 480px) { .section__header--hero { font-size: 1.75rem; } }
    /* #endregion */

    /* #region ----- SECTION SUBHEADING --------------------------------------------------------------------------------------------*| */
    .section__sub {
      font-size: var(--T-MD);
      color: var(--C-COL);
      line-height: 1.7;
      max-width: var(--L-WPRO);
      margin-bottom: var(--G-SHD);
    }
    /* #endregion */

/* #endregion */



/* #region |||||||||| BUTTONS ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*| */

    /* #region ----- BASE — <a class="btn" href="#">Label</a> ----------------------------*| */
    .btn {
      display: inline-block;
      padding: var(--S-SM) var(--S-LG);
      background: var(--C-RUB);
      color: var(--C-WHT);
      text-decoration: none;
      font-family: var(--F-BDY);
      font-size: var(--T-SM);
      font-weight: 500;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      border-radius: var(--R-MD);
      border: none;
      cursor: pointer;
      width: fit-content;
      transition: background var(--T-BASE), color var(--T-BASE);
    }
    .btn:hover { background: var(--C-RUB-D); }
    /* #endregion */

    /* #region ----- POSITION HELPERS --------------------------------------------------------------------------------------------*| */
    .btn--left  { margin-top: var(--G-CNT); margin-right: auto; }
    .btn--right { margin-top: var(--G-CNT); margin-left: auto; display: block; }
    .btn--full  { width: 100%; text-align: center; }
    /* #endregion */

    /* #region ----- OUTLINE VARIANT --------------------------------------------------------------------------------------------*| */
    .btn--outline {
      background: transparent;
      color: var(--C-RUB);
      border: 2px solid var(--C-RUB);
    }
    .btn--outline:hover { background: var(--C-RUB); color: var(--C-WHT); }
    /* #endregion */

    /* #region ----- LIGHT VARIANT (for use on red/dark bands) --------------------------------------------------------------*| */
    .btn--light {
      background: var(--C-BON);
      color: var(--C-RUB);
    }
    .btn--light:hover { background: var(--C-WHT); color: var(--C-RUB-D); }
    /* #endregion */

    /* #region ----- ADD TO CART --------------------------------------------------------------------------------------------*| */
    .btn-buy {
      width: 100%;
      padding: var(--S-MD) var(--S-LG);
      background: var(--C-RUB);
      color: var(--C-WHT);
      border: none;
      border-radius: var(--R-MD);
      font-family: var(--F-HDG);
      font-size: var(--T-MD);
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background var(--T-BASE), transform var(--T-FAST);
    }
    .btn-buy:hover:not(:disabled) { background: var(--C-RUB-D); transform: translateY(-1px); }
    .btn-buy:disabled              { opacity: 0.6; cursor: not-allowed; }
    /* #endregion */

/* #endregion */



/* #region |||||||||| BACK TO TOP ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*| */

    #back-to-top {
      position: fixed;
      top: 0;
      left: 50%;
      transform: translateX(-50%) translateY(-100%);
      z-index: 200;
      background: var(--C-GAR);
      color: var(--C-WHT);
      border: none;
      border-radius: 0 0 var(--R-MD) var(--R-MD);
      padding: 0.45rem 1.2rem;
      padding-top: calc(env(safe-area-inset-top, 0px) + 0.45rem);
      font-family: var(--F-HDG);
      font-size: var(--T-SM);
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--T-BASE), transform var(--T-BASE), background var(--T-FAST);
    }
    #back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
    #back-to-top:hover      { background: var(--C-GAR-D); }

/* #endregion */



/* #region |||||||||| ACCESSIBILITY + GLOBAL FIXES ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*| */

    main { flex: 1; } /* pushes footer to bottom */

    /* #region ----- SKIP LINK --------------------------------------------------------------------------------------------*| */
    .skip-link {
      position: absolute;
      top: -100%;
      left: 1rem;
      z-index: 9999;
      padding: 0.5rem 1rem;
      background: var(--C-RUB);
      color: var(--C-WHT);
      font-family: var(--F-HDG);
      font-size: var(--T-SM);
      font-weight: 600;
      border-radius: 0 0 var(--R-MD) var(--R-MD);
      text-decoration: none;
      transition: top var(--T-BASE);
    }
    .skip-link:focus { top: 0; }
    /* #endregion */

    /* #region ----- VISUALLY HIDDEN — screen-reader only ----------------------------*| */
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    /* #endregion */

    /* #region ----- FOCUS RING --------------------------------------------------------------------------------------------*| */
    :focus-visible             { outline: 2px solid var(--C-RUB); outline-offset: 3px; border-radius: 3px; }
    :focus:not(:focus-visible) { outline: none; }
    /* #endregion */

    /* #region ----- FORM HINT --------------------------------------------------------------------------------------------*| */
    .form-hint { font-size: var(--T-XS); opacity: 0.45; margin-top: 0.2rem; display: block; }
    /* #endregion */

    /* #region ----- CART EMPTY STATE --------------------------------------------------------------------------------------------*| */
    .cart-empty {
      grid-column: 1 / -1;
      min-height: 60vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: var(--S-2XL) var(--S-MD);
    }
    /* #endregion */

    /* #region ----- PREVENT FOUC --------------------------------------------------------------------------------------------*| */
    body.nav-loading    { visibility: hidden; }
    #nav-placeholder,
    #footer-placeholder { min-height: 0; }
    /* #endregion */

/* #endregion */



/* #region |||||||||| COOKIE BANNER ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*| */

    /* #region ----- BANNER --------------------------------------------------------------------------------------------*| */
    #cookie-banner {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 500;
      background: var(--C-COL);
      color: var(--C-BON);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--S-LG);
      padding: var(--S-MD) var(--P-PGE-X);
      font-family: var(--F-BDY);
      font-size: var(--T-SM);
      line-height: 1.5;
      transform: translateY(100%);
      transition: transform 0.35s ease;
    }
    #cookie-banner.is-visible { transform: translateY(0); }

    #cookie-banner p         { margin: 0; opacity: 0.8; max-width: var(--L-WPRO); }
    #cookie-banner p a       { color: var(--C-RUB); text-decoration: underline; text-underline-offset: 2px; }
    #cookie-banner p a:hover { color: var(--C-WHT); }
    /* #endregion */

    /* #region ----- ACCEPT BUTTON --------------------------------------------------------------------------------------------*| */
    #cookie-accept {
      flex-shrink: 0;
      padding: var(--S-XS) var(--S-LG);
      background: var(--C-RUB);
      color: var(--C-WHT);
      border: none;
      border-radius: var(--R-MD);
      font-family: var(--F-HDG);
      font-size: var(--T-XS);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      cursor: pointer;
      transition: background var(--T-FAST);
    }
    #cookie-accept:hover { background: var(--C-RUB-D); }
    /* #endregion */

    /* #region ----- RESPONSIVE --------------------------------------------------------------------------------------------*| */
    @media (max-width: 600px) {
      #cookie-banner { flex-direction: column; align-items: flex-start; gap: var(--S-SM); }
      #cookie-accept { width: 100%; text-align: center; }
    }
    /* #endregion */

/* #endregion */