/* ==========================================================================
   Structured — Renaissance gallery on putty paper
   Theme foundation: design tokens + base styles + components
   Source: DESIGN.md, tokens.json, variables.css
   Palette is warm grays + black only. No gradients. No shadows. Flat surfaces.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Colors */
  --color-putty: #c4c3b6;   /* dominant light canvas */
  --color-ink: #000000;     /* borders, inverted UI, primary text */
  --color-bone: #e7e5e4;    /* elevated card surfaces */
  --color-chalk: #ebebeb;   /* footer / lightest tier */
  --color-vellum: #dfdcd5;  /* hairline borders */
  --color-graphite: #595855;/* muted secondary text */
  --color-ash: #808080;     /* image placeholder backgrounds */
  --color-paper: #ffffff;   /* reverse type / white strokes */

  /* Typography — Font Families
     Davinci → Playfair Display, Helvetica Now → Inter (free Google Fonts).
     Loaded via <link> in the frontend header. */
  --font-davinci: 'Playfair Display', 'Davinci', 'Canela', 'Tiempos Headline', ui-serif, Georgia, 'Times New Roman', serif;
  --font-helvetica-now: 'Inter', 'Helvetica Now', 'Neue Haas Grotesk', 'Helvetica Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  /* Typography — Scale */
  --text-body-sm: 15px;
  --leading-body-sm: 1.5;

  --text-subheading: 22px;
  --leading-subheading: 1.33;
  --tracking-subheading: -0.11px;

  --text-heading-sm: 26px;
  --leading-heading-sm: 1.33;
  --tracking-heading-sm: -0.13px;

  --text-heading: 43px;
  --leading-heading: 1.1;
  --tracking-heading: -0.215px;

  --text-heading-lg: 52px;
  --leading-heading-lg: 1;
  --tracking-heading-lg: -0.47px;

  --text-section: 94px;
  --leading-section: 0.84;
  --tracking-section: -0.85px;

  --text-display: 374px;
  --leading-display: 0.84;
  --tracking-display: -3.37px;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-52: 52px;
  --spacing-60: 60px;
  --spacing-96: 96px;
  --spacing-168: 168px;

  /* Layout */
  --section-gap: 80px;
  --card-padding: 24px;
  --element-gap: 6px;

  /* Border Radius */
  --radius-sm: 2px;      /* links */
  --radius-lg: 9px;      /* cards */
  --radius-3xl: 28.8px;  /* buttons (near-full pill) */
  --radius-links: 2px;
  --radius-cards: 9px;
  --radius-buttons: 28.8px;

  /* Surfaces (level 0 → 3) */
  --surface-putty-canvas: #c4c3b6;
  --surface-bone-card: #e7e5e4;
  --surface-chalk-footer: #ebebeb;
  --surface-ink-room: #000000;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
.st,
.st-theme {
  background-color: var(--surface-putty-canvas);
  color: var(--color-ink);
  font-family: var(--font-helvetica-now);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  font-weight: var(--font-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   3. Typography scale — utility classes
   Serif (Davinci) is display-only; grotesk (Helvetica Now) is functional.
   -------------------------------------------------------------------------- */
.st-body-sm {
  font-family: var(--font-helvetica-now);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  font-weight: var(--font-weight-regular);
}

.st-subheading {
  font-family: var(--font-helvetica-now);
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--font-weight-medium);
}

.st-heading-sm {
  font-family: var(--font-helvetica-now);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--font-weight-medium);
}

.st-heading {
  font-family: var(--font-helvetica-now);
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--font-weight-medium);
}

/* Davinci serif display steps */
.st-heading-lg {
  font-family: var(--font-davinci);
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
  font-weight: var(--font-weight-medium);
}

.st-section-title {
  font-family: var(--font-davinci);
  font-size: var(--text-section);
  line-height: var(--leading-section);
  letter-spacing: var(--tracking-section);
  font-weight: var(--font-weight-medium);
  text-align: center;
}

.st-display {
  font-family: var(--font-davinci);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--font-weight-medium);
}

/* --------------------------------------------------------------------------
   4. Color / surface helpers
   -------------------------------------------------------------------------- */
.st-bg-putty  { background-color: var(--color-putty); }
.st-bg-ink    { background-color: var(--color-ink); color: var(--color-paper); }
.st-bg-bone   { background-color: var(--color-bone); }
.st-bg-chalk  { background-color: var(--color-chalk); }
.st-bg-paper  { background-color: var(--color-paper); }

.st-text-ink      { color: var(--color-ink); }
.st-text-paper    { color: var(--color-paper); }
.st-text-graphite { color: var(--color-graphite); }

.st-border { border: 1px solid var(--color-vellum); }

/* --------------------------------------------------------------------------
   5. Layout
   Full-bleed sections, no max-width container. Depth from light/dark cuts.
   -------------------------------------------------------------------------- */
.st-section {
  width: 100%;
  padding-block: var(--section-gap);
  padding-inline: var(--spacing-40);
}

.st-section--dark {
  background-color: var(--surface-ink-room);
  color: var(--color-paper);
}

.st-section--light {
  background-color: var(--surface-putty-canvas);
  color: var(--color-ink);
}

.st-stack {
  display: flex;
  flex-direction: column;
  gap: var(--element-gap);
}

.st-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-28);
}

/* --------------------------------------------------------------------------
   6. Components
   -------------------------------------------------------------------------- */

/* 6.1 Pill Action Button — filled black pill, white text. One per viewport. */
.st-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-helvetica-now);
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  line-height: 1;
  padding: 9px 17px;
  border: none;
  border-radius: var(--radius-buttons);
  box-shadow: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.st-btn:hover { opacity: 0.85; }

/* Inverted pill for use on dark sections */
.st-btn--inverse {
  background-color: var(--color-paper);
  color: var(--color-ink);
}

/* 6.2 Ghost Text Link — text only, underline on hover */
.st-link {
  color: var(--color-ink);
  font-family: var(--font-helvetica-now);
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  text-decoration: none;
  border-radius: var(--radius-links);
}
.st-link:hover { text-decoration: underline; }
.st-section--dark .st-link { color: var(--color-paper); }

/* 6.3 Bone Card — elevated light surface */
.st-card {
  background-color: var(--surface-bone-card);
  border: 1px solid var(--color-vellum);
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
  box-shadow: none;
}

/* 6.4 Notched Product Card — dark card with hexagonal corner cuts */
.st-card-notched {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 400px;
  background-color: var(--color-ink);
  color: var(--color-paper);
  border-radius: var(--radius-cards);
  /* geometric notched corners, not standard radius */
  clip-path: polygon(
    16px 0, calc(100% - 16px) 0, 100% 16px,
    100% calc(100% - 16px), calc(100% - 16px) 100%,
    16px 100%, 0 calc(100% - 16px), 0 16px
  );
}
.st-card-notched__label {
  position: absolute;
  left: var(--spacing-16);
  bottom: var(--spacing-16);
  font-family: var(--font-helvetica-now);
  font-size: 9px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-paper);
}

/* 6.5 Circular Feature Vignette — classical painting crop */
.st-vignette {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-16);
  text-align: center;
}
.st-vignette__img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--color-ash);
  border: none;
  box-shadow: none;
}
.st-vignette__caption {
  font-family: var(--font-davinci);
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-subheading);
}

/* 6.6 Hexagonal Nav Indicator — secondary brand shape, ~12px */
.st-hex {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  color: var(--color-ink);
}
.st-hex--outline {
  background-color: transparent;
  border: 1px solid currentColor;
  /* hexagon outline via clip-path is not stroke-able; use box on 12px */
  clip-path: none;
  transform: rotate(0deg);
}
.st-section--dark .st-hex { color: var(--color-paper); }

/* 6.7 Stat Pair — inline label:value data */
.st-stats {
  display: inline-flex;
  gap: var(--spacing-28);
}
.st-stat {
  font-family: var(--font-helvetica-now);
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  color: var(--color-ink);
}
.st-section--dark .st-stat { color: var(--color-paper); }

/* 6.8 Logo Mark — circled monogram */
.st-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--color-ink);
  border-radius: 50%;
  font-family: var(--font-davinci);
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  color: var(--color-ink);
  background: transparent;
}
.st-section--dark .st-logo { border-color: var(--color-paper); color: var(--color-paper); }

/* 6.9 Minimal Header — logo left, single link right */
.st-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: var(--spacing-40);
  padding-inline: var(--spacing-40);
  background-color: var(--surface-putty-canvas);
}

/* 6.10 Hero Wordmark — 374px serif, cropped at viewport edges */
.st-wordmark {
  font-family: var(--font-davinci);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;      /* intentionally crops at the edges */
  width: 100%;
  text-align: center;
}

/* 6.11 Classical Painting Panel — full-bleed atmospheric imagery */
.st-panel {
  width: 100%;
  display: block;
  object-fit: cover;
  border: none;
  border-radius: 0;   /* full-bleed, no rounded corners */
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   7. Responsive — the display wordmark must scale down on small screens
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .st-wordmark { font-size: 22vw; }
  .st-display  { font-size: 22vw; }
  .st-section-title { font-size: 12vw; }
}
@media (max-width: 768px) {
  .st-grid-3 { grid-template-columns: 1fr; }
  .st-section { padding-inline: var(--spacing-20); }
}
/* ========================================================= */
/* CSS FROM: index.blade.php */
/* ========================================================= */

/* =========================================
       MODERN HERO - PHOTO COLLAGE & STATS
       ========================================= */
    .modern-hero {
        width: 100% !important;
        position: relative !important;
        overflow: hidden !important;
        background-color: var(--color-putty, #c4c3b6) !important; /* flat putty canvas — no gradient per DESIGN.md */
        padding-top: 104px !important;
        padding-bottom: 56px !important;
        font-family: var(--font-helvetica-now, sans-serif) !important;
    }

    .hero-bg-video {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        transform: translate(-50%, -50%) !important;
        z-index: 1 !important;
        opacity: 0.85 !important;
        filter: grayscale(0.12) contrast(1.03) !important; /* muted gallery tone, video stays visible */
    }

    .hero-overlay {
        position: absolute !important;
        inset: 0 !important;
        background: rgba(196, 195, 182, 0.42) !important; /* subtle flat putty veil — readable, video visible */
        z-index: 2 !important;
        pointer-events: none !important;
    }

    /* =========================================
       HERO GALLERY WALL — centered, aspect-true
       ========================================= */
    .hero-gallery-block {
        margin-top: 64px !important;
    }
    .gallery-eyebrow {
        font-family: var(--font-helvetica-now, sans-serif) !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.18em !important;
        color: var(--color-graphite, #595855) !important;
        text-align: center !important;
        margin: 0 0 10px 0 !important;
    }
    .gallery-heading {
        font-family: var(--font-davinci, serif) !important;
        font-size: clamp(26px, 3.2vw, 40px) !important;
        font-weight: 500 !important;
        color: var(--color-ink, #000000) !important;
        letter-spacing: -0.01em !important;
        line-height: 1.1 !important;
        text-align: center !important;
        margin: 0 auto 36px auto !important;
        max-width: 720px !important;
    }
    .hero-gallery {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 16px !important;
        max-width: 1180px !important;
        margin: 0 auto !important;
    }
    .hero-gallery-item {
        height: 280px !important;
        margin: 0 !important;
        border: 1px solid var(--color-vellum, #dfdcd5) !important;
        border-radius: 9px !important;       /* theme card radius */
        overflow: hidden !important;
        background-color: var(--color-bone, #e7e5e4) !important;
        box-shadow: none !important;         /* flat — no shadow */
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    .hero-gallery-item img {
        height: 100% !important;
        width: auto !important;              /* preserve each image's real height : width */
        display: block !important;
        object-fit: contain !important;
    }
    .hero-gallery-item:hover {
        transform: translateY(-6px) !important;
    }
    .gallery-caption {
        font-family: var(--font-helvetica-now, sans-serif) !important;
        font-size: 15px !important;
        line-height: 1.7 !important;
        color: var(--color-graphite, #595855) !important;
        text-align: center !important;
        max-width: 640px !important;
        margin: 40px auto 20px auto !important;
    }
    .gallery-link {
        display: inline-block !important;
        font-family: var(--font-helvetica-now, sans-serif) !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.08em !important;
        color: var(--color-ink, #000000) !important;
        text-decoration: none !important;
        border-bottom: 1px solid var(--color-ink, #000000) !important;
        padding-bottom: 3px !important;
        transition: opacity 0.2s ease !important;
    }
    .gallery-link:hover {
        opacity: 0.6 !important;
    }
    @media (max-width: 768px) {
        .hero-gallery-item { height: 180px !important; }
    }
    @media (max-width: 480px) {
        .hero-gallery-item { height: 140px !important; }
    }

    .modern-hero .auto-container {
        position: relative !important;
        z-index: 3 !important;
        text-align: center !important; /* Bootstrap utilities aren't loaded — center here */
    }

    .hero-badge-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        justify-content: center !important;
        margin-bottom: 16px !important;
    }

    .hero-mini-tag {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 11px !important;
        color: var(--color-paper, #ffffff) !important;
        text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
        font-weight: 500 !important;
        letter-spacing: 0.05em !important;
        text-transform: uppercase !important;
    }

    .pulse-dot {
        width: 6px !important;
        height: 6px !important;
        background-color: var(--color-paper, #ffffff) !important;
        box-shadow: 0 0 4px rgba(255,255,255,0.8) !important;
        border-radius: 50% !important;
        display: inline-block !important;
        animation: pulse-glow 1.5s infinite ease-in-out !important;
    }

    @keyframes pulse-glow {
        0%, 100% { opacity: 0.3; transform: scale(1); }
        50% { opacity: 1; transform: scale(1.3); }
    }

    .hero-badge {
        display: inline-block !important;
        background-color: var(--color-paper, #ffffff) !important;
        color: var(--color-ink, #000000) !important;
        border: 1px solid var(--color-vellum, #dfdcd5) !important;
        padding: 6px 16px !important;
        border-radius: 20px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.15em !important;
    }

    .modern-h1 {
        font-family: var(--font-davinci, serif) !important;
        font-size: 56px !important;
        font-weight: 500 !important;
        color: var(--color-paper, #ffffff) !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
        line-height: 1.15 !important;
        letter-spacing: -0.02em !important;
        margin: 16px auto 20px auto !important;
        text-align: center !important;
    }

    .hero-subtitle {
        font-size: 15px !important;
        color: var(--color-paper, #ffffff) !important;
        text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
        line-height: 1.7 !important;
        margin: 0 auto 30px auto !important;
        text-align: center !important;
    }

    .hero-cta-buttons {
        display: flex !important;
        gap: 16px !important;
        margin-bottom: 40px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .modern-btn {
        font-family: var(--font-helvetica-now, sans-serif) !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        padding: 12px 32px !important;
        border-radius: 24px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        cursor: pointer !important;
    }

    .modern-btn-solid {
        background-color: var(--color-ink, #000000) !important;
        color: var(--color-paper, #ffffff) !important;
        border: 1px solid var(--color-ink, #000000) !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .modern-btn-solid::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: -100% !important;
        width: 100% !important;
        height: 100% !important;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
        transition: all 0.6s ease !important;
    }

    .modern-btn-solid:hover::before {
        left: 100% !important;
    }

    .modern-btn-solid:hover {
        background-color: transparent !important;
        color: var(--color-ink, #000000) !important;
    }

    .modern-btn-outline {
        background-color: transparent !important;
        color: var(--color-ink, #000000) !important;
        border: 1px solid var(--color-ink, #000000) !important;
    }

    .modern-btn-outline:hover {
        background-color: var(--color-ink, #000000) !important;
        color: var(--color-paper, #ffffff) !important;
    }

    .highlight-art {
        font-family: var(--font-davinci, serif) !important;
        font-style: italic !important;
        color: var(--color-ink, #000000) !important; /* flat ink — no gradient/saturated color per DESIGN.md */
        display: inline-block !important;
        padding-right: 0.1em !important;
    }

    /* Floating Image Collage animations with custom rotation tilt effects */
    @keyframes float-up-tl {
        0% { transform: translateY(0px) rotate(-3deg); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); }
        50% { transform: translateY(-12px) rotate(-1deg); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); }
        100% { transform: translateY(0px) rotate(-3deg); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); }
    }
    @keyframes float-up-tr {
        0% { transform: translateY(0px) rotate(2deg); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); }
        50% { transform: translateY(-12px) rotate(4deg); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); }
        100% { transform: translateY(0px) rotate(2deg); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); }
    }
    @keyframes float-up-br {
        0% { transform: translateY(0px) rotate(-1.5deg); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); }
        50% { transform: translateY(-12px) rotate(0.5deg); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); }
        100% { transform: translateY(0px) rotate(-1.5deg); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); }
    }
    @keyframes float-up-fr {
        0% { transform: translateY(0px) rotate(4deg); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); }
        50% { transform: translateY(-12px) rotate(2deg); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); }
        100% { transform: translateY(0px) rotate(4deg); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); }
    }
    @keyframes float-up-bl {
        0% { transform: translateY(0px) rotate(1deg); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); }
        50% { transform: translateY(-12px) rotate(3deg); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); }
        100% { transform: translateY(0px) rotate(1deg); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); }
    }
    @keyframes float-up-fl {
        0% { transform: translateY(0px) rotate(-2deg); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); }
        50% { transform: translateY(-12px) rotate(-4deg); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); }
        100% { transform: translateY(0px) rotate(-2deg); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); }
    }

    .hero-collage-container {
        height: 600px !important;
        position: relative !important;
        width: 100% !important;
        max-width: 1200px !important;
        margin: 50px auto !important;
        z-index: 3 !important;
    }

    .collage-wrapper {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
    }

    .collage-item {
        position: absolute !important;
        overflow: hidden !important;
        background-color: var(--color-paper, #ffffff) !important;
        border: 1px solid var(--color-vellum, #dfdcd5) !important;
        border-radius: 12px !important;
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease !important;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.06) !important;
    }

    .collage-item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    /* Elevate and glow hover effect on all images */
    .collage-item:hover {
        transform: scale(1.1) rotate(0deg) !important;
        animation-play-state: paused !important;
        z-index: 99 !important;
        box-shadow: 0 35px 70px rgba(0, 0, 0, 0.2) !important;
        border-color: rgba(255, 255, 255, 0.8) !important;
    }

    .collage-item:hover img {
        transform: scale(1.05) !important;
    }

    /* Absolute Placement matching actual asset horizontal / vertical aspect ratios */
    .collage-center {
        left: 50% !important;
        top: 50% !important;
        width: 440px !important;  /* Landscape image b1.webp */
        height: 260px !important;
        border-radius: 16px !important;
        z-index: 10 !important;
    }

    @keyframes float-up-center {
        0% { transform: translate(-50%, -50%) translateY(0px); box-shadow: 0 25px 50px rgba(0,0,0,0.1); }
        50% { transform: translate(-50%, -50%) translateY(-15px); box-shadow: 0 35px 65px rgba(0,0,0,0.15); }
        100% { transform: translate(-50%, -50%) translateY(0px); box-shadow: 0 25px 50px rgba(0,0,0,0.1); }
    }
    .collage-center.animate-float-up {
        animation: float-up-center 6s ease-in-out infinite !important;
    }
    .collage-center:hover {
        transform: translate(-50%, -50%) scale(1.08) !important;
        animation: none !important;
    }

    .collage-top-left {
        left: 18% !important;
        top: 6% !important;
        width: 200px !important;  /* Landscape image i1.webp */
        height: 150px !important;
        z-index: 5 !important;
        animation: float-up-tl 5.5s ease-in-out infinite !important;
    }

    .collage-top-right {
        right: 20% !important;
        top: 4% !important;
        width: 170px !important;  /* Portrait image i2.webp */
        height: 215px !important;
        z-index: 5 !important;
        animation: float-up-tr 6.2s ease-in-out infinite !important;
    }

    .collage-bottom-right {
        right: 18% !important;
        bottom: 4% !important;
        width: 200px !important;  /* Square image i3.webp */
        height: 200px !important;
        z-index: 8 !important;
        animation: float-up-br 5.8s ease-in-out infinite !important;
    }

    .collage-far-right {
        right: 3% !important;
        top: 30% !important;
        width: 160px !important;  /* Square image i4.webp */
        height: 160px !important;
        z-index: 4 !important;
        animation: float-up-fr 6.5s ease-in-out infinite !important;
    }

    .collage-bottom-left {
        left: 14% !important;
        bottom: 2% !important;
        width: 180px !important;  /* Portrait image i5.webp */
        height: 250px !important;
        z-index: 8 !important;
        animation: float-up-bl 5.9s ease-in-out infinite !important;
    }

    .collage-far-left {
        left: 3% !important;
        top: 22% !important;
        width: 150px !important;  /* Portrait image i9.webp */
        height: 240px !important;
        z-index: 4 !important;
        animation: float-up-fl 6.4s ease-in-out infinite !important;
    }

    /* Stats Section Styling */
    .hero-stats-container {
        border-top: 1px solid var(--color-vellum, #dfdcd5) !important;
        padding-top: 32px !important;
        margin-top: 40px !important;
    }

    .stat-box .stat-value {
        font-family: var(--font-helvetica-now, sans-serif) !important;
        font-size: 36px !important;
        font-weight: 700 !important;
        color: var(--color-ink, #000000) !important;
        margin: 0 !important;
    }

    .stat-box .stat-label {
        font-size: 13px !important;
        color: var(--color-graphite, #595855) !important;
        margin: 4px 0 0 0 !important;
    }

    .stat-divider {
        width: 1px !important;
        height: 40px !important;
        background-color: var(--color-vellum, #dfdcd5) !important;
    }

    /* Compatible Formats Ticker Styling */
    .hero-formats-ticker {
        margin-top: 50px !important;
        border-top: 1px dashed var(--color-vellum, #dfdcd5) !important;
        padding-top: 24px !important;
    }

    .formats-title {
        font-size: 10px !important;
        font-weight: 600 !important;
        letter-spacing: 0.15em !important;
        color: var(--color-graphite, #595855) !important;
        text-transform: uppercase !important;
        margin-bottom: 0 !important;
    }

    .format-tag {
        font-size: 12.5px !important;
        color: var(--color-ink, #000000) !important;
        background-color: var(--color-paper, #ffffff) !important;
        border: 1px solid var(--color-vellum, #dfdcd5) !important;
        padding: 6px 14px !important;
        border-radius: 16px !important;
        font-weight: 550 !important;
        display: inline-flex !important;
        align-items: center !important;
        transition: all 0.25s ease !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02) !important;
    }

    .format-tag:hover {
        transform: translateY(-2px) !important;
        border-color: var(--color-ink, #000000) !important;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05) !important;
    }

    /* Responsive adjustments */
    @media (max-width: 1199px) {
        .hero-collage-container {
            height: 480px !important;
        }
        .collage-center {
            width: 320px !important;
            height: 200px !important;
        }
        .collage-top-left { width: 160px !important; height: 120px !important; left: 12% !important; }
        .collage-top-right { width: 130px !important; height: 160px !important; right: 14% !important; }
        .collage-bottom-left { width: 140px !important; height: 190px !important; left: 10% !important; }
        .collage-bottom-right { width: 150px !important; height: 150px !important; right: 12% !important; }
        .collage-far-left { width: 120px !important; height: 190px !important; left: 1% !important; }
        .collage-far-right { width: 120px !important; height: 120px !important; right: 1% !important; }
    }

    @media (max-width: 991px) {
        .hero-collage-container {
            height: 400px !important;
        }
        .collage-center {
            width: 280px !important;
            height: 175px !important;
        }
        .collage-top-left { width: 120px !important; height: 90px !important; left: 8% !important; }
        .collage-top-right { width: 100px !important; height: 125px !important; right: 10% !important; }
        .collage-bottom-left { width: 100px !important; height: 140px !important; left: 6% !important; }
        .collage-bottom-right { width: 110px !important; height: 110px !important; right: 8% !important; }
        .collage-far-left, .collage-far-right {
            display: none !important;
        }
    }

    @media (max-width: 575px) {
        .modern-h1 {
            font-size: 36px !important;
        }
        .hero-collage-container {
            height: 260px !important;
        }
        .collage-center {
            width: 220px !important;
            height: 140px !important;
        }
        .collage-top-left, .collage-top-right, .collage-bottom-left, .collage-bottom-right {
            display: none !important;
        }
        .hero-stats-container {
            flex-direction: column !important;
            gap: 20px !important;
        }
    }


/* =========================================
       SECTION 2 — CATEGORY CARDS (vertical, image-only, title on hover)
       ========================================= */
    .inkwave-categories {
        padding: 96px 40px !important;
    }
    .inkwave-categories .cat-section-head {
        text-align: center !important;
        margin-bottom: 48px !important;
    }
    .cat-eyebrow {
        font-family: var(--font-helvetica-now, sans-serif) !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.18em !important;
        color: var(--color-graphite, #595855) !important;
        margin: 0 0 10px 0 !important;
    }
    .cat-heading {
        font-family: var(--font-davinci, serif) !important;
        font-size: clamp(28px, 3.5vw, 44px) !important;
        font-weight: 500 !important;
        color: var(--color-ink, #000000) !important;
        letter-spacing: -0.01em !important;
        line-height: 1.1 !important;
        margin: 0 !important;
    }
    .cat-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;      /* short last row (e.g. 2 cards) centers */
        gap: 20px !important;
        max-width: 1100px !important;
        margin: 0 auto !important;
    }
    .cat-card {
        position: relative !important;
        display: block !important;
        flex: 0 1 calc(33.333% - 14px) !important;   /* three per row */
        max-width: calc(33.333% - 14px) !important;
        aspect-ratio: 1 / 1 !important;          /* square category card */
        overflow: hidden !important;
        border: 1px solid var(--color-vellum, #dfdcd5) !important;
        border-radius: 9px !important;           /* theme card radius */
        background-color: var(--color-putty, #c4c3b6) !important;
        text-decoration: none !important;
        box-shadow: none !important;             /* flat — no shadow */
    }
    .cat-card__img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    .cat-card:hover .cat-card__img { transform: scale(1.06) !important; }
    .cat-card__placeholder {
        position: absolute !important;
        inset: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--color-graphite, #595855) !important;
        font-size: 40px !important;
        background-color: var(--color-bone, #e7e5e4) !important;
    }
    .cat-card__veil {
        position: absolute !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.35) !important;   /* flat ink veil, reveals on hover */
        opacity: 0 !important;
        transition: opacity 0.4s ease !important;
        z-index: 1 !important;
    }
    .cat-card:hover .cat-card__veil { opacity: 1 !important; }
    .cat-card__content {
        position: absolute !important;
        inset: 0 !important;                          /* cover whole card so the full summary fits */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 24px !important;
        text-align: center !important;
        opacity: 0 !important;                        /* title + summary hidden until hover */
        transform: translateY(14px) !important;
        transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
        z-index: 30 !important;
        overflow-y: auto !important;                  /* a very long summary can scroll, never clips */
    }
    .cat-card:hover .cat-card__content {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
    .cat-card__title {
        font-family: var(--font-davinci, serif) !important;
        font-size: 22px !important;
        font-weight: 500 !important;
        line-height: 1.15 !important;
        color: var(--color-paper, #ffffff) !important;
        margin: 0 !important;
    }
    .cat-card__summary {
        font-family: var(--font-helvetica-now, sans-serif) !important;
        font-size: 13px !important;
        line-height: 1.55 !important;
        color: rgba(255, 255, 255, 0.85) !important;
        margin: 0 !important;
        max-width: 92% !important;                    /* full summary — no truncation */
    }
    /* Touch devices have no hover — keep titles readable */
    @media (hover: none) {
        .cat-card__veil { opacity: 0.4 !important; }
        .cat-card__content { opacity: 1 !important; transform: none !important; }
    }
    @media (max-width: 768px) {
        .inkwave-categories { padding: 60px 20px !important; }
        .cat-grid { gap: 14px !important; }
        .cat-card { flex-basis: calc(50% - 7px) !important; max-width: calc(50% - 7px) !important; }
        .cat-card__title { font-size: 18px !important; }
        .cat-card__content { padding: 16px !important; }
    }
    @media (max-width: 480px) {
        .cat-card { flex-basis: 100% !important; max-width: 100% !important; }
    }


/* =========================================
       SECTION 3 — HOW IT WORKS (three steps in a row)
       ========================================= */
    .inkwave-how-it-works { padding: 96px 40px !important; }
    .steps-head { text-align: center !important; margin-bottom: 48px !important; }
    .steps-eyebrow {
        font-family: var(--font-helvetica-now, sans-serif) !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.18em !important;
        color: var(--color-graphite, #595855) !important;
        margin: 0 0 10px 0 !important;
    }
    .steps-heading {
        font-family: var(--font-davinci, serif) !important;
        font-size: clamp(28px, 3.5vw, 44px) !important;
        font-weight: 500 !important;
        color: var(--color-ink, #000000) !important;
        letter-spacing: -0.01em !important;
        line-height: 1.1 !important;
        margin: 0 0 14px 0 !important;
    }
    .steps-sub {
        font-family: var(--font-helvetica-now, sans-serif) !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
        color: var(--color-graphite, #595855) !important;
        max-width: 560px !important;
        margin: 0 auto !important;
    }
    .steps-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 24px !important;
        max-width: 1100px !important;
        margin: 0 auto !important;
    }
    .step-card {
        flex: 0 1 calc(33.333% - 16px) !important;   /* three in a row */
        max-width: calc(33.333% - 16px) !important;
        background-color: var(--color-bone, #e7e5e4) !important;
        border: 1px solid var(--color-vellum, #dfdcd5) !important;
        border-radius: 9px !important;
        padding: 36px 28px !important;
        text-align: center !important;
        box-shadow: none !important;                 /* flat — no shadow */
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    .step-card:hover { transform: translateY(-6px) !important; }
    .step-num {
        display: block !important;
        font-family: var(--font-davinci, serif) !important;
        font-size: 40px !important;
        font-weight: 500 !important;
        line-height: 1 !important;
        color: var(--color-ink, #000000) !important;
        margin-bottom: 18px !important;
    }
    .step-title {
        font-family: var(--font-davinci, serif) !important;
        font-size: 22px !important;
        font-weight: 500 !important;
        color: var(--color-ink, #000000) !important;
        margin: 0 0 12px 0 !important;
    }
    .step-desc {
        font-family: var(--font-helvetica-now, sans-serif) !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
        color: var(--color-graphite, #595855) !important;
        margin: 0 !important;
    }
    @media (max-width: 768px) {
        .inkwave-how-it-works { padding: 60px 20px !important; }
        .step-card { flex-basis: 100% !important; max-width: 100% !important; }
    }


/* =========================================
       SECTION 4 — PRODUCTS CAROUSEL (image + title only)
       ========================================= */
    .inkwave-products { padding: 96px 0 !important; }
    .inkwave-products .prod-head {
        text-align: center !important;
        margin-bottom: 48px !important;
        padding: 0 40px !important;
    }
    .prod-eyebrow {
        font-family: var(--font-helvetica-now, sans-serif) !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.18em !important;
        color: var(--color-graphite, #595855) !important;
        margin: 0 0 10px 0 !important;
    }
    .prod-heading {
        font-family: var(--font-davinci, serif) !important;
        font-size: clamp(28px, 3.5vw, 44px) !important;
        font-weight: 500 !important;
        color: var(--color-ink, #000000) !important;
        letter-spacing: -0.01em !important;
        line-height: 1.1 !important;
        margin: 0 !important;
    }

    .prod-carousel {
        position: relative !important;
        max-width: 1280px !important;
        margin: 0 auto !important;
        padding: 0 56px !important;
    }
    .prod-track {
        display: flex !important;
        gap: 20px !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;
        padding: 4px 4px 10px 4px !important;
        scrollbar-width: none !important;          /* Firefox */
        -ms-overflow-style: none !important;       /* IE / Edge */
    }
    .prod-track::-webkit-scrollbar { display: none !important; }  /* Chrome / Safari */

    .prod-slide {
        flex: 0 0 auto !important;
        width: 260px !important;
        scroll-snap-align: start !important;
        text-decoration: none !important;
        display: block !important;
    }
    .prod-slide__img {
        position: relative !important;
        width: 100% !important;
        aspect-ratio: 4 / 5 !important;
        overflow: hidden !important;
        border: 1px solid var(--color-vellum, #dfdcd5) !important;
        border-radius: 9px !important;             /* theme card radius */
        background-color: var(--color-putty, #c4c3b6) !important;
        box-shadow: none !important;               /* flat — no shadow */
    }
    .prod-slide__img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    .prod-slide:hover .prod-slide__img img { transform: scale(1.06) !important; }
    .prod-slide__ph {
        position: absolute !important;
        inset: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--color-graphite, #595855) !important;
        font-size: 32px !important;
        background-color: var(--color-bone, #e7e5e4) !important;
    }
    .prod-slide__title {
        font-family: var(--font-davinci, serif) !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        color: var(--color-ink, #000000) !important;
        line-height: 1.35 !important;
        margin: 14px 4px 0 4px !important;
        text-align: center !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* Prev / next capsule buttons */
    .prod-nav {
        position: absolute !important;
        top: 44% !important;
        transform: translateY(-50%) !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        background-color: var(--color-paper, #ffffff) !important;
        border: 1px solid var(--color-vellum, #dfdcd5) !important;
        color: var(--color-ink, #000000) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px !important;
        cursor: pointer !important;
        z-index: 3 !important;
        transition: background-color 0.2s ease !important;
    }
    .prod-nav:hover { background-color: var(--color-bone, #e7e5e4) !important; }
    .prod-nav--prev { left: 6px !important; }
    .prod-nav--next { right: 6px !important; }

    .prod-empty {
        text-align: center !important;
        width: 100% !important;
        color: var(--color-graphite, #595855) !important;
        font-family: var(--font-helvetica-now, sans-serif) !important;
    }

    @media (max-width: 768px) {
        .inkwave-products { padding: 60px 0 !important; }
        .prod-carousel { padding: 0 20px !important; }
        .prod-slide { width: 200px !important; }
        .prod-nav { display: none !important; }     /* touch-scroll on mobile */
    }


/* =========================================
       PREMIUM TIER CARDS - LUXURY DESIGN
       ========================================= */

    .premium-tier-section {
        background: #ffffff;
        border-radius: 20px;
        padding: 28px 32px;
        box-shadow: 0 2px 8px rgba(21, 145, 220, 0.06);
        border: 1px solid rgba(232, 93, 142, 0.12);
    }

    /* Header */
    .tier-section-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 20px;
    }

    .header-icon {
        width: 40px;
        height: 40px;
        background: rgba(21, 145, 220, 0.08);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .tier-title {
        font-size: 20px;
        font-weight: 800;
        color: #0a0e27;
        margin: 0;
    }

    .tier-subtitle {
        font-size: 13px;
        color: #666;
        margin: 4px 0 0 0;
        font-weight: 500;
    }

    /* Tier Cards Grid */
    .tier-cards-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 12px;
    }

    .tier-card {
        background: #f8fafc;
        border: 1px solid #e8eef8;
        border-radius: 12px;
        padding: 14px;
        position: relative;
    }

    .tier-badge-large {
        display: inline-flex;
        width: 32px;
        height: 32px;
        background: #f0f4ff;
        color: #E85D8E;
        border-radius: 8px;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 14px;
        margin-bottom: 6px;
        border: none;
    }

    .tier-badge-premium {
        background: #f0f4ff;
    }

    .tier-badge-elite {
        background: #f0f4ff;
    }

    .tier-badge-vip {
        background: #f0f4ff;
    }

    .tier-card-label {
        font-size: 15px;
        font-weight: 700;
        color: #0a0e27;
        margin: 0 0 6px 0;
    }

    .tier-range-text {
        font-size: 12px;
        color: #666;
        margin-bottom: 10px;
        font-weight: 500;
    }

    .tier-multiplier {
        display: flex;
        align-items: baseline;
        gap: 4px;
        margin-bottom: 8px;
    }

    .multiplier-text {
        font-size: 18px;
        font-weight: 700;
        color: #666;
    }

    .multiplier-active {
        color: #E85D8E;
        font-weight: 800;
    }

    .multiplier-label {
        font-size: 11px;
        color: #999;
        text-transform: uppercase;
        font-weight: 600;
    }

    .tier-indicator-bar {
        width: 100%;
        height: 3px;
        background: #e8eef8;
        border-radius: 2px;
        overflow: hidden;
    }

    .tier-indicator-fill {
        height: 100%;
        background: #E85D8E;
    }

    .currency-note {
        font-size: 12px;
        color: #E85D8E;
        background: rgba(21, 145, 220, 0.06);
        padding: 10px 14px;
        border-radius: 8px;
        display: inline-block;
        font-weight: 600;
    }

    /* =========================================
       LUXURY CALCULATOR - PREMIUM DESIGN
       ========================================= */

    .luxury-calculator-wrapper {
        position: relative;
        height: 100%;
    }

    .calc-bg-blob {
        display: none;
    }

    .luxury-calculator {
        background: #ffffff;
        border: 1px solid rgba(232, 93, 142, 0.12);
        border-radius: 20px;
        padding: 28px 32px;
        box-shadow: 0 2px 8px rgba(21, 145, 220, 0.06);
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    /* Calculator Header */
    .calc-header-premium {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 18px;
    }

    .calc-title-premium {
        font-size: 20px;
        font-weight: 800;
        color: #0a0e27;
        margin: 0 0 4px 0;
    }

    .calc-tagline {
        font-size: 13px;
        color: #666;
        margin: 0;
        font-weight: 500;
    }

    .calc-currency-badge {
        width: 40px;
        height: 40px;
        background: #E85D8E;
        color: white;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 700;
        box-shadow: none;
    }

    /* Form Styling */
    .luxury-calc-form {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .premium-input-section {
        margin-bottom: 16px;
    }

    .input-label-premium {
        display: block;
        font-size: 12px;
        font-weight: 700;
        color: #E85D8E;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 10px;
    }

    .premium-amount-input-wrapper {
        position: relative;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        padding-bottom: 8px;
        border-bottom: 3px solid rgba(232, 93, 142, 0.2);
        transition: border-color 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        gap: 8px;
        white-space: nowrap;
    }

    .premium-amount-input-wrapper:focus-within {
        border-bottom-color: #E85D8E;
    }

    .input-currency {
        font-size: 28px;
        font-weight: 700;
        background: linear-gradient(135deg, #E85D8E 0%, #C86BFA 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        white-space: nowrap;
        flex-shrink: 0;
        margin-right: 0;
    }

    .premium-amount-input {
        flex: 1;
        font-size: 36px;
        font-weight: 800;
        color: #0a0e27;
        background: transparent;
        border: none;
        padding: 12px 0;
        outline: none;
        letter-spacing: -0.5px;
        width: auto;
        min-width: 0;
    }

    .premium-amount-input:focus {
        outline: none;
    }

    /* Points Breakdown */
    .points-breakdown-card {
        background: rgba(255,255,255,0.6);
        border: 1.5px solid rgba(232, 93, 142, 0.15);
        border-radius: 14px;
        padding: 16px;
        margin-bottom: 16px;
    }

    .breakdown-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
        font-size: 13px;
    }

    .breakdown-row.breakdown-total {
        margin-bottom: 0;
    }

    .breakdown-label {
        color: #0a0e27;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .breakdown-value {
        font-weight: 700;
        color: #E85D8E;
        font-size: 14px;
    }

    .bonus-badge {
        background: linear-gradient(135deg, #E85D8E 0%, #C86BFA 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-weight: 800;
        font-size: 15px;
    }

    .breakdown-divider {
        height: 2px;
        background: linear-gradient(90deg, transparent 0%, rgba(232, 93, 142, 0.3) 50%, transparent 100%);
        margin: 10px 0;
    }

    .breakdown-value-total {
        font-size: 16px;
        font-weight: 800;
        background: linear-gradient(135deg, #E85D8E 0%, #C86BFA 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* Large Points Display */
    .points-display-premium {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-bottom: 20px;
        padding: 14px 16px;
        background: rgba(255,255,255,0.6);
        border-radius: 14px;
        border: 1.5px solid rgba(232, 93, 142, 0.2);
        box-shadow: 0 8px 20px rgba(232, 93, 142, 0.08);
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .points-display-premium:hover {
        border-color: rgba(232, 93, 142, 0.3);
        box-shadow: 0 12px 30px rgba(232, 93, 142, 0.15);
    }

    .points-number {
        font-size: 36px;
        font-weight: 900;
        background: linear-gradient(135deg, #E85D8E 0%, #C86BFA 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        letter-spacing: -1px;
    }

    .points-unit {
        font-size: 12px;
        color: #E85D8E;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Benefits */
    .benefits-section {
        display: flex;
        gap: 12px;
        margin-bottom: 20px;
    }

    .benefit-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 14px 12px;
        background: rgba(255,255,255,0.6);
        border-radius: 14px;
        border: 1.5px solid rgba(232, 93, 142, 0.15);
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .benefit-item:hover {
        background: rgba(255,255,255,0.8);
        border-color: rgba(232, 93, 142, 0.3);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(232, 93, 142, 0.1);
    }

    .benefit-item i {
        font-size: 16px;
        background: linear-gradient(135deg, #E85D8E 0%, #C86BFA 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-weight: 700;
    }

    .benefit-item span {
        font-size: 11px;
        color: #0a0e27;
        font-weight: 600;
        text-align: center;
        line-height: 1.3;
    }

    /* Premium Button */
    .btn-premium-checkout {
        width: 100%;
        padding: 16px 24px;
        background: linear-gradient(135deg, #E85D8E 0%, #C86BFA 100%);
        color: white;
        border: none;
        border-radius: 16px;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(232, 93, 142, 0.25);
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        margin-bottom: 16px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .btn-premium-checkout:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 50px rgba(232, 93, 142, 0.4);
    }

    .btn-premium-checkout:active {
        transform: translateY(-2px);
    }

    .btn-label {
        font-weight: 700;
    }

    .btn-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }

    .btn-shine {
        display: none;
    }

    /* Trust Badge */
    .trust-indicator {
        text-align: center;
        font-size: 11px;
        color: #888;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }

    .trust-indicator i {
        color: #E85D8E;
        font-size: 12px;
    }

    /* =========================================
       RESPONSIVE DESIGN
       ========================================= */

    @media (max-width: 768px) {
        .premium-tier-section,
        .luxury-calculator {
            padding: 24px 20px;
        }

        .calc-title-premium {
            font-size: 16px;
        }

        .premium-amount-input {
            font-size: 24px;
        }

        .points-number {
            font-size: 32px;
        }

        .tier-title {
            font-size: 16px;
        }
    }

    @media (max-width: 480px) {
        .premium-tier-section,
        .luxury-calculator {
            padding: 20px 16px;
        }

        .tier-section-header {
            gap: 10px;
            margin-bottom: 16px;
        }

        .header-icon {
            width: 36px;
            height: 36px;
        }

        .tier-title {
            font-size: 16px;
        }

        .tier-subtitle {
            font-size: 11px;
        }

        .calc-title-premium {
            font-size: 15px;
        }

        .calc-tagline {
            font-size: 11px;
        }

        .premium-amount-input {
            font-size: 22px;
        }

        .points-number {
            font-size: 30px;
        }

        .tier-cards-grid {
            grid-template-columns: 1fr;
            gap: 10px;
        }

        .tier-card {
            padding: 12px;
        }

        .btn-premium-checkout {
            padding: 10px 16px;
            font-size: 13px;
        }

        .calc-header-premium {
            flex-direction: column;
            gap: 10px;
        }

        .calc-currency-badge {
            width: 36px;
            height: 36px;
            font-size: 16px;
        }
    }


/* =========================================
       SECTION 5 — TOP-UP TABLE + CALCULATOR (Structured theme redesign)
       Overrides the legacy pink/luxury styles above. Markup + IDs unchanged.
       ========================================= */
    .points-topup-section { padding: 96px 40px !important; }
    .points-topup-section .row {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 24px !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
    }
    .points-topup-section .col-lg-5,
    .points-topup-section .col-md-12 {
        flex: 1 1 460px !important;
        max-width: 560px !important;
        width: auto !important;
        padding: 0 !important;
    }

    /* Section header */
    .topup-head { text-align: center !important; margin-bottom: 48px !important; }
    .topup-eyebrow {
        font-family: var(--font-helvetica-now, sans-serif) !important;
        font-size: 11px !important; font-weight: 600 !important;
        text-transform: uppercase !important; letter-spacing: 0.18em !important;
        color: var(--color-graphite, #595855) !important; margin: 0 0 10px 0 !important;
    }
    .topup-heading {
        font-family: var(--font-davinci, serif) !important;
        font-size: clamp(28px, 3.5vw, 44px) !important; font-weight: 500 !important;
        color: var(--color-ink, #000000) !important; letter-spacing: -0.01em !important;
        line-height: 1.1 !important; margin: 0 0 14px 0 !important;
    }
    .topup-sub {
        font-family: var(--font-helvetica-now, sans-serif) !important;
        font-size: 15px !important; line-height: 1.6 !important;
        color: var(--color-graphite, #595855) !important;
        max-width: 560px !important; margin: 0 auto !important;
    }

    /* Card surfaces — flat, hairline border, no shadow */
    .premium-tier-section,
    .luxury-calculator {
        background-color: var(--color-paper, #ffffff) !important;
        border: 1px solid var(--color-vellum, #dfdcd5) !important;
        border-radius: 9px !important;
        box-shadow: none !important;
        padding: 32px !important;
        height: 100% !important;
    }
    .luxury-calculator-wrapper { position: relative !important; height: 100% !important; }
    .calc-bg-blob { display: none !important; }

    /* Tier header */
    .tier-section-header {
        display: flex !important; align-items: center !important; gap: 14px !important;
        margin-bottom: 24px !important; padding-bottom: 20px !important;
        border-bottom: 1px solid var(--color-vellum, #dfdcd5) !important;
    }
    .header-icon {
        width: 40px !important; height: 40px !important;
        background-color: var(--color-bone, #e7e5e4) !important;
        border: 1px solid var(--color-vellum, #dfdcd5) !important;
        border-radius: 9px !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
        flex-shrink: 0 !important;
    }
    .tier-title {
        font-family: var(--font-davinci, serif) !important;
        font-size: 20px !important; font-weight: 500 !important;
        color: var(--color-ink, #000000) !important; margin: 0 !important;
    }
    .tier-subtitle {
        font-family: var(--font-helvetica-now, sans-serif) !important;
        font-size: 13px !important; color: var(--color-graphite, #595855) !important;
        margin: 4px 0 0 0 !important; font-weight: 400 !important;
    }

    /* Tier table */
    .tier-table-wrapper { overflow-x: auto !important; }
    .tier-table {
        width: 100% !important; border-collapse: collapse !important;
        font-family: var(--font-helvetica-now, sans-serif) !important;
    }
    .tier-table thead th {
        font-size: 10px !important; font-weight: 600 !important;
        text-transform: uppercase !important; letter-spacing: 0.1em !important;
        color: var(--color-graphite, #595855) !important;
        text-align: left !important;
        padding: 0 12px 12px 12px !important;
        border-bottom: 1px solid var(--color-vellum, #dfdcd5) !important;
        background: transparent !important;
    }
    .tier-table td {
        font-size: 13px !important;
        color: var(--color-ink, #000000) !important;
        padding: 14px 12px !important;
        border-bottom: 1px solid var(--color-vellum, #dfdcd5) !important;
        background: transparent !important;
        vertical-align: middle !important;
    }
    .tier-table tbody tr:last-child td { border-bottom: none !important; }
    .tier-row { background: transparent !important; }
    .tier-row:hover td { background-color: var(--color-bone, #e7e5e4) !important; }
    .tier-cell-tier {
        display: flex !important; align-items: center !important; gap: 10px !important;
        font-weight: 500 !important;
    }
    .tier-badge {
        display: inline-flex !important; align-items: center !important; justify-content: center !important;
        width: 22px !important; height: 22px !important;
        background-color: var(--color-ink, #000000) !important;
        color: var(--color-paper, #ffffff) !important;
        border-radius: 50% !important;
        font-size: 11px !important; font-weight: 600 !important;
        flex-shrink: 0 !important;
    }
    .tier-cell-range { color: var(--color-graphite, #595855) !important; white-space: nowrap !important; }
    .tier-cell-bonus { font-weight: 600 !important; color: var(--color-ink, #000000) !important; text-align: right !important; }
    .currency-note {
        margin-top: 16px !important;
        font-family: var(--font-helvetica-now, sans-serif) !important;
        font-size: 11.5px !important; line-height: 1.5 !important;
        color: var(--color-graphite, #595855) !important;
    }

    /* Calculator header */
    .calc-header-premium {
        display: flex !important; align-items: flex-start !important; justify-content: space-between !important;
        gap: 16px !important; margin-bottom: 24px !important; padding-bottom: 20px !important;
        border-bottom: 1px solid var(--color-vellum, #dfdcd5) !important;
    }
    .calc-title-premium {
        font-family: var(--font-davinci, serif) !important;
        font-size: 22px !important; font-weight: 500 !important;
        color: var(--color-ink, #000000) !important; margin: 0 !important;
    }
    .calc-tagline {
        font-family: var(--font-helvetica-now, sans-serif) !important;
        font-size: 13px !important; color: var(--color-graphite, #595855) !important; margin: 4px 0 0 0 !important;
    }
    .calc-currency-badge {
        width: 40px !important; height: 40px !important; flex-shrink: 0 !important;
        background-color: var(--color-ink, #000000) !important; color: var(--color-paper, #ffffff) !important;
        border-radius: 50% !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
        font-family: var(--font-helvetica-now, sans-serif) !important; font-size: 16px !important; font-weight: 600 !important;
    }

    /* Amount input */
    .premium-input-section { margin-bottom: 20px !important; }
    .input-label-premium {
        display: block !important;
        font-family: var(--font-helvetica-now, sans-serif) !important;
        font-size: 11px !important; font-weight: 600 !important;
        text-transform: uppercase !important; letter-spacing: 0.08em !important;
        color: var(--color-graphite, #595855) !important; margin-bottom: 8px !important;
    }
    .premium-amount-input-wrapper { position: relative !important; }
    .premium-amount-input {
        width: 100% !important;
        font-family: var(--font-helvetica-now, sans-serif) !important;
        font-size: 24px !important; font-weight: 500 !important;
        color: var(--color-ink, #000000) !important;
        background-color: var(--color-bone, #e7e5e4) !important;
        border: 1px solid var(--color-vellum, #dfdcd5) !important;
        border-radius: 9px !important;
        padding: 14px 44px 14px 16px !important;
        outline: none !important; box-shadow: none !important;
        transition: border-color 0.2s ease !important;
    }
    .premium-amount-input:focus { border-color: var(--color-ink, #000000) !important; }
    .input-currency {
        position: absolute !important; right: 16px !important; top: 50% !important;
        transform: translateY(-50%) !important;
        font-family: var(--font-helvetica-now, sans-serif) !important;
        font-size: 18px !important; font-weight: 600 !important;
        color: var(--color-graphite, #595855) !important;
    }

    /* Breakdown */
    .points-breakdown-card {
        background-color: var(--color-bone, #e7e5e4) !important;
        border: 1px solid var(--color-vellum, #dfdcd5) !important;
        border-radius: 9px !important; padding: 18px !important; margin-bottom: 20px !important;
        box-shadow: none !important;
    }
    .breakdown-row { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 6px 0 !important; }
    .breakdown-label { font-family: var(--font-helvetica-now, sans-serif) !important; font-size: 13px !important; color: var(--color-graphite, #595855) !important; }
    .breakdown-value { font-family: var(--font-helvetica-now, sans-serif) !important; font-size: 14px !important; font-weight: 600 !important; color: var(--color-ink, #000000) !important; }
    .bonus-badge {
        background-color: var(--color-ink, #000000) !important; color: var(--color-paper, #ffffff) !important;
        padding: 2px 10px !important; border-radius: 28.8px !important; font-size: 12px !important;
    }
    .breakdown-divider { height: 1px !important; background-color: var(--color-vellum, #dfdcd5) !important; margin: 10px 0 !important; border: none !important; }
    .breakdown-total .breakdown-label { color: var(--color-ink, #000000) !important; font-weight: 600 !important; }
    .breakdown-value-total { font-family: var(--font-helvetica-now, sans-serif) !important; font-size: 18px !important; font-weight: 700 !important; color: var(--color-ink, #000000) !important; }

    /* Large points display — ink room */
    .points-display-premium {
        text-align: center !important;
        background-color: var(--color-ink, #000000) !important;
        border-radius: 9px !important; padding: 24px !important; margin-bottom: 20px !important;
        display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important;
    }
    .points-number {
        font-family: var(--font-davinci, serif) !important;
        font-size: 44px !important; font-weight: 500 !important; line-height: 1 !important;
        color: var(--color-paper, #ffffff) !important;
    }
    .points-unit {
        font-family: var(--font-helvetica-now, sans-serif) !important;
        font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.18em !important;
        color: rgba(255, 255, 255, 0.6) !important;
    }

    /* Benefits */
    .benefits-section { margin-bottom: 24px !important; display: flex !important; flex-direction: column !important; gap: 10px !important; }
    .benefit-item {
        display: flex !important; align-items: center !important; gap: 10px !important;
        font-family: var(--font-helvetica-now, sans-serif) !important;
        font-size: 13px !important; color: var(--color-graphite, #595855) !important;
    }
    .benefit-item i { color: var(--color-ink, #000000) !important; font-size: 12px !important; width: 16px !important; text-align: center !important; }

    /* Checkout button — ink pill */
    .btn-premium-checkout {
        position: relative !important; overflow: hidden !important; width: 100% !important;
        display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important;
        font-family: var(--font-helvetica-now, sans-serif) !important;
        font-size: 13px !important; font-weight: 600 !important;
        text-transform: uppercase !important; letter-spacing: 0.05em !important;
        background-color: var(--color-ink, #000000) !important;
        color: var(--color-paper, #ffffff) !important;
        border: 1px solid var(--color-ink, #000000) !important;
        border-radius: 28.8px !important;
        padding: 14px 24px !important;
        cursor: pointer !important; box-shadow: none !important;
        transition: opacity 0.2s ease !important;
    }
    .btn-premium-checkout:hover { opacity: 0.85 !important; }
    .btn-premium-checkout:disabled { opacity: 0.6 !important; cursor: default !important; }
    .btn-shine { display: none !important; }

    /* Trust indicator */
    .trust-indicator {
        margin-top: 16px !important;
        display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
        font-family: var(--font-helvetica-now, sans-serif) !important;
        font-size: 12px !important; color: var(--color-graphite, #595855) !important;
    }
    .trust-indicator i { color: var(--color-ink, #000000) !important; }

    @media (max-width: 768px) {
        .points-topup-section { padding: 60px 20px !important; }
        .points-topup-section .col-lg-5,
        .points-topup-section .col-md-12 { flex-basis: 100% !important; max-width: 100% !important; }
        .premium-tier-section, .luxury-calculator { padding: 24px !important; }
    }


/* =========================================
       SECTION 5 — TIER PRICING CARDS (reference-style, four across)
       ========================================= */
    .topup-layout { max-width: 1200px !important; margin: 0 auto !important; }
    .tier-cards {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;   /* four in a row */
        gap: 20px !important;
        align-items: stretch !important;
    }
    .tier-card {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        background-color: var(--color-ink, #000000) !important;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        border-radius: 14px !important;
        padding: 28px 24px !important;
        box-shadow: none !important;
    }
    .tier-card--featured {
        border-color: var(--color-paper, #ffffff) !important;
        border-width: 1.5px !important;
    }
    .tier-card__flag {
        position: absolute !important;
        top: -11px !important;
        right: 18px !important;
        background-color: var(--color-paper, #ffffff) !important;
        color: var(--color-ink, #000000) !important;
        font-family: var(--font-helvetica-now, sans-serif) !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.08em !important;
        padding: 4px 12px !important;
        border-radius: 28.8px !important;
    }
    .tier-card__icon {
        width: 44px !important;
        height: 44px !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--color-paper, #ffffff) !important;
        font-size: 16px !important;
        margin-bottom: 20px !important;
    }
    .tier-card__name {
        font-family: var(--font-davinci, serif) !important;
        font-size: 22px !important;
        font-weight: 500 !important;
        color: var(--color-paper, #ffffff) !important;
        margin: 0 0 16px 0 !important;
    }
    .tier-card__price {
        display: flex !important;
        align-items: baseline !important;
        gap: 8px !important;
        margin-bottom: 20px !important;
        padding-bottom: 20px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    }
    .tier-card__mult {
        font-family: var(--font-davinci, serif) !important;
        font-size: 40px !important;
        font-weight: 500 !important;
        line-height: 1 !important;
        color: var(--color-paper, #ffffff) !important;
    }
    .tier-card__per {
        font-family: var(--font-helvetica-now, sans-serif) !important;
        font-size: 12px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.1em !important;
        color: rgba(255, 255, 255, 0.55) !important;
    }
    .tier-card__feats {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 0 24px 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        flex-grow: 1 !important;
    }
    .tier-card__feats li {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        font-family: var(--font-helvetica-now, sans-serif) !important;
        font-size: 13px !important;
        color: rgba(255, 255, 255, 0.8) !important;
        line-height: 1.4 !important;
    }
    .tier-card__feats li i { color: var(--color-paper, #ffffff) !important; font-size: 13px !important; flex-shrink: 0 !important; }
    .tier-card__btn {
        width: 100% !important;
        font-family: var(--font-helvetica-now, sans-serif) !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        background-color: transparent !important;
        color: var(--color-paper, #ffffff) !important;
        border: 1px solid rgba(255, 255, 255, 0.4) !important;
        border-radius: 28.8px !important;
        padding: 12px 18px !important;
        cursor: pointer !important;
        margin-top: auto !important;
    }
    .tier-card--featured .tier-card__btn {
        background-color: var(--color-paper, #ffffff) !important;
        color: var(--color-ink, #000000) !important;
        border-color: var(--color-paper, #ffffff) !important;
    }
    .tier-note {
        text-align: center !important;
        font-family: var(--font-helvetica-now, sans-serif) !important;
        font-size: 12px !important;
        color: var(--color-graphite, #595855) !important;
        margin: 24px auto 0 auto !important;
        max-width: 720px !important;
    }
    .calc-center { max-width: 560px !important; margin: 56px auto 0 auto !important; }

    /* ===== Remove legacy button shine + ALL hover effects in this section ===== */
    .btn-shine { display: none !important; }
    .btn-premium-checkout::before,
    .btn-premium-checkout::after { display: none !important; content: none !important; }
    .btn-premium-checkout:hover { opacity: 1 !important; transform: none !important; box-shadow: none !important; }
    .premium-tier-section:hover,
    .luxury-calculator:hover,
    .luxury-calculator-wrapper:hover,
    .points-breakdown-card:hover,
    .points-display-premium:hover,
    .tier-card:hover,
    .tier-card__btn:hover,
    .premium-amount-input:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    @media (max-width: 992px) { .tier-cards { grid-template-columns: repeat(2, 1fr) !important; } }
    @media (max-width: 560px) { .tier-cards { grid-template-columns: 1fr !important; } }


/* =========================================
       HERO SPLIT — text left, collage right
       ========================================= */
    .modern-hero .auto-container.hero-split {
        display: flex !important;
        align-items: center !important;
        gap: 48px !important;
        text-align: left !important;
        max-width: 1240px !important;
        margin: 0 auto !important;
    }
    .hero-col--text {
        flex: 1 1 46% !important;
        min-width: 0 !important;
        animation: st-hero-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both !important;
    }
    .hero-col--media { flex: 1 1 54% !important; min-width: 0 !important; }

    .hero-split .hero-badge-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        margin-bottom: 22px !important;
    }
    .hero-split .hero-mini-tag { justify-content: flex-start !important; }
    .hero-split .modern-h1 {
        text-align: left !important;
        margin: 0 0 18px 0 !important;
        max-width: none !important;
        font-size: clamp(34px, 4vw, 54px) !important;
        line-height: 1.12 !important;
    }
    .hero-split .hero-subtitle {
        text-align: left !important;
        margin: 0 0 28px 0 !important;
        max-width: 520px !important;
        font-size: 16px !important;
    }
    .hero-split .hero-cta-buttons { justify-content: flex-start !important; margin-bottom: 0 !important; }

    .hero-collage {
        position: relative;
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        aspect-ratio: 1 / 1;
    }
    .hero-collage__item {
        position: absolute;
        margin: 0;
        overflow: hidden;
        border: 5px solid var(--color-paper, #ffffff);   /* white photo frame — flat collage depth */
        border-radius: 4px;
        background-color: var(--color-bone, #e7e5e4);
        box-shadow: none;
        transform: rotate(var(--r, 0deg));
        animation: st-collage-float 6.5s ease-in-out infinite;
        animation-delay: var(--d, 0s);
    }
    .hero-collage__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
    /* scattered, overlapping placement — a real collage */
    .hero-collage__item:nth-child(1) { left: 3%;  top: 2%;  width: 40%; aspect-ratio: 3/4; --r: -6deg; z-index: 3; }
    .hero-collage__item:nth-child(2) { left: 56%; top: 0;   width: 38%; aspect-ratio: 1/1; --r: 5deg;  z-index: 2; }
    .hero-collage__item:nth-child(3) { left: 27%; top: 30%; width: 44%; aspect-ratio: 4/5; --r: -2deg; z-index: 6; }
    .hero-collage__item:nth-child(4) { left: 1%;  top: 56%; width: 38%; aspect-ratio: 1/1; --r: 4deg;  z-index: 4; }
    .hero-collage__item:nth-child(5) { left: 58%; top: 54%; width: 40%; aspect-ratio: 1/1; --r: -5deg; z-index: 3; }
    .hero-collage__item:nth-child(6) { left: 62%; top: 26%; width: 28%; aspect-ratio: 3/4; --r: 8deg;  z-index: 1; }

    @keyframes st-collage-float {
        0%, 100% { transform: rotate(var(--r, 0deg)) translateY(0); }
        50%      { transform: rotate(var(--r, 0deg)) translateY(-7px); }
    }
    @keyframes st-hero-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

    @media (max-width: 900px) {
        .modern-hero .auto-container.hero-split { flex-direction: column !important; text-align: center !important; gap: 36px !important; }
        .hero-split .modern-h1, .hero-split .hero-subtitle { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
        .hero-split .hero-badge-wrapper { align-items: center !important; }
        .hero-split .hero-mini-tag { justify-content: center !important; }
        .hero-split .hero-cta-buttons { justify-content: center !important; }
        .hero-col--text, .hero-col--media { flex-basis: 100% !important; width: 100% !important; }
    }
    @media (prefers-reduced-motion: reduce) { .hero-collage__item { animation: none; } }

    /* =========================================
       CALCULATOR REDESIGN — fresh classes (legacy pink cannot reach these).
       High-specificity selectors (.calc-center .ink-calc …) win outright.
       ========================================= */
    .calc-center .ink-calc {
        background-color: var(--color-paper, #ffffff) !important;
        border: 1px solid var(--color-vellum, #dfdcd5) !important;
        border-radius: 14px !important;
        padding: 30px !important;
        box-shadow: none !important;
    }
    .ink-calc__head {
        display: flex !important; align-items: flex-start !important; justify-content: space-between !important;
        gap: 16px !important; padding-bottom: 20px !important; margin-bottom: 22px !important;
        border-bottom: 1px solid var(--color-vellum, #dfdcd5) !important;
    }
    .ink-calc__title { font-family: var(--font-davinci, serif) !important; font-size: 22px !important; font-weight: 500 !important; color: var(--color-ink, #000) !important; margin: 0 !important; }
    .ink-calc__tag { font-family: var(--font-helvetica-now, sans-serif) !important; font-size: 13px !important; color: var(--color-graphite, #595855) !important; margin: 4px 0 0 0 !important; }
    .ink-calc__cur {
        flex-shrink: 0 !important; width: 40px !important; height: 40px !important; border-radius: 50% !important;
        background-color: var(--color-ink, #000) !important; color: var(--color-paper, #fff) !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
        font-family: var(--font-helvetica-now, sans-serif) !important; font-size: 16px !important; font-weight: 600 !important;
    }
    .ink-calc__label {
        display: block !important; font-family: var(--font-helvetica-now, sans-serif) !important;
        font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important;
        color: var(--color-graphite, #595855) !important; margin-bottom: 8px !important;
    }
    .ink-calc__field {
        display: flex !important; align-items: center !important;
        background-color: var(--color-bone, #e7e5e4) !important;
        border: 1px solid var(--color-vellum, #dfdcd5) !important;
        border-radius: 9px !important; padding: 0 16px !important; margin-bottom: 22px !important;
        transition: border-color 0.2s ease !important;
    }
    .ink-calc__field:focus-within { border-color: var(--color-ink, #000) !important; }
    .ink-calc__prefix { font-family: var(--font-helvetica-now, sans-serif) !important; font-size: 20px !important; font-weight: 600 !important; color: var(--color-graphite, #595855) !important; margin-right: 8px !important; }
    .ink-calc__input {
        flex: 1 !important; width: 100% !important; border: none !important; outline: none !important; background: transparent !important;
        font-family: var(--font-helvetica-now, sans-serif) !important; font-size: 26px !important; font-weight: 500 !important;
        color: var(--color-ink, #000) !important; padding: 14px 0 !important; box-shadow: none !important;
    }
    .ink-calc__rows {
        background-color: var(--color-bone, #e7e5e4) !important;
        border: 1px solid var(--color-vellum, #dfdcd5) !important;
        border-radius: 9px !important; padding: 16px 18px !important; margin-bottom: 22px !important;
    }
    .ink-calc__row {
        display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 6px 0 !important;
        font-family: var(--font-helvetica-now, sans-serif) !important; font-size: 13px !important; color: var(--color-graphite, #595855) !important;
    }
    .ink-calc__row > span:last-child:not(.ink-calc__mult) { color: var(--color-ink, #000) !important; font-weight: 600 !important; }
    .ink-calc__mult {
        background-color: var(--color-ink, #000) !important; color: var(--color-paper, #fff) !important;
        padding: 2px 10px !important; border-radius: 28.8px !important; font-size: 12px !important;
    }
    .ink-calc__row--total { margin-top: 8px !important; padding-top: 12px !important; border-top: 1px solid var(--color-vellum, #dfdcd5) !important; }
    .ink-calc__row--total > span { font-size: 15px !important; color: var(--color-ink, #000) !important; font-weight: 700 !important; }
    .ink-calc__display {
        background-color: var(--color-ink, #000) !important; border-radius: 9px !important;
        padding: 22px !important; margin-bottom: 22px !important; text-align: center !important;
        display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important;
    }
    .ink-calc__big { font-family: var(--font-davinci, serif) !important; font-size: 44px !important; font-weight: 500 !important; line-height: 1 !important; color: var(--color-paper, #fff) !important; }
    .ink-calc__unit { font-family: var(--font-helvetica-now, sans-serif) !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.18em !important; color: rgba(255, 255, 255, 0.6) !important; }
    .ink-calc__benefits { list-style: none !important; padding: 0 !important; margin: 0 0 22px 0 !important; display: flex !important; flex-direction: column !important; gap: 10px !important; }
    .ink-calc__benefits li { display: flex !important; align-items: center !important; gap: 10px !important; font-family: var(--font-helvetica-now, sans-serif) !important; font-size: 13px !important; color: var(--color-graphite, #595855) !important; }
    .ink-calc__benefits li i { color: var(--color-ink, #000) !important; font-size: 11px !important; }
    .calc-center .ink-calc .btn-premium-checkout {
        width: 100% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important;
        font-family: var(--font-helvetica-now, sans-serif) !important; font-size: 13px !important; font-weight: 600 !important;
        text-transform: uppercase !important; letter-spacing: 0.05em !important;
        background: var(--color-ink, #000) !important; background-color: var(--color-ink, #000) !important; background-image: none !important;
        color: var(--color-paper, #fff) !important;
        border: 1px solid var(--color-ink, #000) !important; border-radius: 28.8px !important;
        padding: 15px 24px !important; cursor: pointer !important; box-shadow: none !important;
    }
    .ink-calc__trust {
        display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
        margin: 16px 0 0 0 !important;
        font-family: var(--font-helvetica-now, sans-serif) !important; font-size: 12px !important; color: var(--color-graphite, #595855) !important;
    }
    .ink-calc__trust i { color: var(--color-ink, #000) !important; }


/* =========================================
       PREMIUM CATEGORY CARDS
       ========================================= */

    .category-section {
        position: relative;
        overflow: hidden;
    }

    .category-card-premium {
        background: white;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(21, 145, 220, 0.08);
        border: 1px solid rgba(232, 93, 142, 0.1);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .category-card-premium:hover {
        box-shadow: 0 12px 32px rgba(232, 93, 142, 0.15);
        transform: translateY(-4px);
        border-color: rgba(21, 145, 220, 0.2);
    }

    .category-card-image {
        position: relative;
        width: 100%;
        height: 220px;
        overflow: hidden;
        background: linear-gradient(135deg, #f0f4ff 0%, #e8f1f9 100%);
    }

    .category-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    .category-card-premium:hover .category-img {
        transform: scale(1.05);
    }

    .category-img-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 48px;
        color: #E85D8E;
        background: linear-gradient(135deg, #f0f4ff 0%, #e8f1f9 100%);
    }

    .category-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(10, 14, 39, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
        backdrop-filter: blur(2px);
    }

    .category-card-premium:hover .category-overlay {
        opacity: 1;
    }

    .category-explore-btn {
        background: linear-gradient(135deg, #E85D8E 0%, #C86BFA 100%);
        color: white;
        padding: 10px 20px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 14px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(232, 93, 142, 0.3);
    }

    .category-explore-btn:hover {
        background: linear-gradient(135deg, #d64577 0%, #b857e8 100%);
        box-shadow: 0 6px 16px rgba(232, 93, 142, 0.4);
        transform: translateY(-2px);
        color: white;
    }

    .category-card-content {
        padding: 20px 16px;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .category-title {
        font-size: 16px;
        font-weight: 700;
        color: #0a0e27;
        margin: 0 0 12px 0;
    }

    .category-title a {
        color: #0a0e27;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .category-title a:hover {
        color: #E85D8E;
    }

    .category-count {
        font-size: 12px;
        color: #E85D8E;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 0 0 10px 0;
    }

    .category-count i {
        font-size: 11px;
    }

    .category-description {
        font-size: 13px;
        color: #666;
        margin: 0;
        line-height: 1.5;
    }

    /* =========================================
       RESPONSIVE DESIGN
       ========================================= */

    @media (max-width: 768px) {
        .category-card-image {
            height: 180px;
        }

        .category-card-content {
            padding: 16px 14px;
        }

        .category-title {
            font-size: 14px;
        }
    }

    @media (max-width: 480px) {
        .category-card-image {
            height: 160px;
        }

        .category-card-content {
            padding: 14px 12px;
        }

        .category-title {
            font-size: 13px;
        }

        .category-count {
            font-size: 11px;
        }

        .category-explore-btn {
            padding: 8px 14px;
            font-size: 12px;
        }
    }


/* ========================================================= */
/* CSS FROM: dashboard.blade.php */
/* ========================================================= */

/* =========================================================
       USER DASHBOARD — Structured theme (sidebar + tabs)
       ========================================================= */
    .dash-section { background-color: var(--color-putty, #c4c3b6); padding: 64px 40px; }
    .dash-container { max-width: 1160px; margin: 0 auto; }
    .dash-grid { display: grid; grid-template-columns: 320px 1fr; gap: 28px; align-items: start; }

    /* Sidebar */
    .dash-side { background-color: var(--color-paper, #fff); border: 1px solid var(--color-vellum, #dfdcd5); border-radius: 14px; padding: 26px; position: sticky; top: 96px; }
    .dash-profile { display: flex; align-items: center; gap: 14px; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--color-vellum, #dfdcd5); }
    .dash-avatar {
        width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        background-color: var(--color-ink, #000); color: var(--color-paper, #fff);
        font-family: var(--font-davinci, serif); font-size: 22px; font-weight: 500;
    }
    .dash-profile__meta { min-width: 0; }
    .dash-profile__name { display: block; font-family: var(--font-davinci, serif); font-size: 17px; font-weight: 500; color: var(--color-ink, #000); line-height: 1.2; word-break: break-word; }
    .dash-profile__email { display: block; font-family: var(--font-helvetica-now, sans-serif); font-size: 12.5px; color: var(--color-graphite, #595855); margin-top: 3px; word-break: break-word; }

    .dash-stats { display: flex; flex-direction: column; gap: 10px; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--color-vellum, #dfdcd5); }
    .dash-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
    .dash-stat__label { font-family: var(--font-helvetica-now, sans-serif); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-graphite, #595855); }
    .dash-stat__value { font-family: var(--font-davinci, serif); font-size: 18px; font-weight: 500; color: var(--color-ink, #000); }
    .dash-stat__value small { font-family: var(--font-helvetica-now, sans-serif); font-size: 11px; color: var(--color-graphite, #595855); }

    .dash-nav { display: flex; flex-direction: column; gap: 4px; }
    .dash-nav__btn {
        display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
        font-family: var(--font-helvetica-now, sans-serif); font-size: 13.5px; font-weight: 600;
        color: var(--color-ink, #000); background: transparent; border: none; border-radius: 9px;
        padding: 12px 14px; cursor: pointer; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease;
    }
    .dash-nav__btn i { width: 16px; font-size: 13px; color: var(--color-graphite, #595855); }
    .dash-nav__btn:hover { background-color: var(--color-bone, #e7e5e4); }
    .dash-nav__btn.active { background-color: var(--color-ink, #000); color: var(--color-paper, #fff); }
    .dash-nav__btn.active i { color: var(--color-paper, #fff); }
    .dash-nav__btn--logout { margin-top: 8px; border-top: 1px solid var(--color-vellum, #dfdcd5); border-radius: 0 0 9px 9px; padding-top: 16px; }

    /* Content */
    .dash-main { min-width: 0; }
    .dash-panel { display: none; }
    .dash-panel.active { display: block; animation: dash-fade 0.3s ease both; }
    @keyframes dash-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
    .dash-card { background-color: var(--color-paper, #fff); border: 1px solid var(--color-vellum, #dfdcd5); border-radius: 14px; padding: 32px; }
    .dash-h { font-family: var(--font-davinci, serif); font-size: 24px; font-weight: 500; color: var(--color-ink, #000); margin: 0 0 24px 0; }

    /* Table */
    .dash-tablewrap { overflow-x: auto; }
    .dash-table { width: 100%; border-collapse: collapse; font-family: var(--font-helvetica-now, sans-serif); }
    .dash-table th { text-align: left; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-graphite, #595855); padding: 0 14px 12px 14px; border-bottom: 1px solid var(--color-vellum, #dfdcd5); white-space: nowrap; }
    .dash-table td { font-size: 13.5px; color: var(--color-ink, #000); padding: 14px; border-bottom: 1px solid var(--color-vellum, #dfdcd5); white-space: nowrap; }
    .dash-table tbody tr:last-child td { border-bottom: none; }
    .dash-table tbody tr:hover td { background-color: var(--color-bone, #e7e5e4); }
    .dash-table .is-strong { font-weight: 600; }

    .dash-pill { display: inline-flex; align-items: center; gap: 6px; background-color: var(--color-ink, #000); color: var(--color-paper, #fff); border-radius: 28.8px; padding: 4px 12px; font-size: 12px; font-weight: 600; }
    .dash-pill i { font-size: 10px; }
    .dash-tag { display: inline-block; background-color: var(--color-bone, #e7e5e4); color: var(--color-ink, #000); border: 1px solid var(--color-vellum, #dfdcd5); border-radius: 28.8px; padding: 3px 11px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
    .dash-tag--ok { background-color: var(--color-ink, #000); color: var(--color-paper, #fff); border-color: var(--color-ink, #000); }
    .dash-tag--err { background-color: transparent; color: var(--color-ink, #000); }
    .dash-tag--muted { color: var(--color-graphite, #595855); }
    .dash-view { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ink, #000); text-decoration: none; border: 1px solid var(--color-vellum, #dfdcd5); border-radius: 28.8px; padding: 6px 14px; transition: all 0.2s ease; }
    .dash-view:hover { background-color: var(--color-ink, #000); color: var(--color-paper, #fff); border-color: var(--color-ink, #000); }

    .dash-empty { text-align: center; padding: 56px 20px; }
    .dash-empty i { font-size: 42px; color: var(--color-graphite, #595855); opacity: 0.35; margin-bottom: 16px; }
    .dash-empty p { font-family: var(--font-davinci, serif); font-size: 18px; color: var(--color-ink, #000); margin: 0; }

    /* Change password form */
    .dash-field { margin-bottom: 18px; }
    .dash-label { display: block; font-family: var(--font-helvetica-now, sans-serif); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-graphite, #595855); margin-bottom: 8px; }
    .dash-input {
        width: 100%; box-sizing: border-box;
        background-color: var(--color-bone, #e7e5e4); border: 1px solid var(--color-vellum, #dfdcd5); border-radius: 9px;
        padding: 12px 14px; font-family: var(--font-helvetica-now, sans-serif); font-size: 14px; color: var(--color-ink, #000);
        outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .dash-input:focus { border-color: var(--color-ink, #000); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08); background-color: var(--color-paper, #fff); }
    .dash-input.is-invalid { border-color: #cf7d7d; box-shadow: 0 0 0 3px rgba(207, 125, 125, 0.18); }
    .dash-error { display: block; margin-top: 7px; font-family: var(--font-helvetica-now, sans-serif); font-size: 12.5px; color: #c0392b; font-weight: 500; }
    .dash-submit {
        width: 100%; margin-top: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
        font-family: var(--font-helvetica-now, sans-serif); font-size: 13px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.05em;
        background-color: var(--color-ink, #000); color: var(--color-paper, #fff); border: 1px solid var(--color-ink, #000);
        border-radius: 28.8px; padding: 14px; cursor: pointer; transition: opacity 0.2s ease;
    }
    .dash-submit:hover { opacity: 0.85; }

    @media (max-width: 900px) {
        .dash-section { padding: 40px 20px; }
        .dash-grid { grid-template-columns: 1fr; gap: 20px; }
        .dash-side { position: static; }
        .dash-nav { flex-direction: row; flex-wrap: wrap; }
        .dash-nav__btn { width: auto; flex: 1 1 auto; justify-content: center; }
        .dash-nav__btn--logout { border-top: none; padding-top: 12px; border-radius: 9px; }
    }


/* ========================================================= */
/* CSS FROM: show.blade.php */
/* ========================================================= */

/* =========================================================
       ORDER DETAIL — Structured theme (receipt layout)
       ========================================================= */
    .od-section { background-color: var(--color-putty, #c4c3b6); padding: 72px 40px; }
    .od-container { max-width: 860px; margin: 0 auto; }
    .od-card { background-color: var(--color-paper, #fff); border: 1px solid var(--color-vellum, #dfdcd5); border-radius: 14px; padding: 40px; }

    .od-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--color-vellum, #dfdcd5); }
    .od-eyebrow { font-family: var(--font-helvetica-now, sans-serif); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--color-graphite, #595855); margin: 0 0 8px 0; }
    .od-num { font-family: var(--font-davinci, serif); font-size: clamp(26px, 3.4vw, 36px); font-weight: 500; letter-spacing: -0.01em; color: var(--color-ink, #000); margin: 0; }
    .od-actions { display: flex; gap: 10px; flex-wrap: wrap; }
    .od-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-helvetica-now, sans-serif); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 28.8px; padding: 11px 20px; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: opacity 0.2s ease, background-color 0.2s ease; }
    .od-btn--primary { background-color: var(--color-ink, #000); color: var(--color-paper, #fff); border-color: var(--color-ink, #000); }
    .od-btn--primary:hover { opacity: 0.85; color: var(--color-paper, #fff); }
    .od-btn--ghost { background-color: transparent; color: var(--color-ink, #000); border-color: var(--color-vellum, #dfdcd5); }
    .od-btn--ghost:hover { background-color: var(--color-bone, #e7e5e4); }

    /* Summary strip */
    .od-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 34px; }
    .od-summary__item { background-color: var(--color-bone, #e7e5e4); border: 1px solid var(--color-vellum, #dfdcd5); border-radius: 10px; padding: 18px 20px; }
    .od-summary__label { display: block; font-family: var(--font-helvetica-now, sans-serif); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-graphite, #595855); margin-bottom: 8px; }
    .od-summary__amt { font-family: var(--font-davinci, serif); font-size: 24px; font-weight: 500; color: var(--color-ink, #000); }
    .od-tag { display: inline-block; background-color: transparent; color: var(--color-ink, #000); border: 1px solid var(--color-vellum, #dfdcd5); border-radius: 28.8px; padding: 5px 14px; font-family: var(--font-helvetica-now, sans-serif); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
    .od-tag--solid { background-color: var(--color-ink, #000); color: var(--color-paper, #fff); border-color: var(--color-ink, #000); }

    /* Details grid */
    .od-h { font-family: var(--font-davinci, serif); font-size: 20px; font-weight: 500; color: var(--color-ink, #000); margin: 0 0 18px 0; }
    .od-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .od-field { background-color: var(--color-bone, #e7e5e4); border: 1px solid var(--color-vellum, #dfdcd5); border-radius: 10px; padding: 16px 18px; }
    .od-field--wide { grid-column: 1 / -1; }
    .od-field__label { display: block; font-family: var(--font-helvetica-now, sans-serif); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-graphite, #595855); margin-bottom: 6px; }
    .od-field__value { font-family: var(--font-helvetica-now, sans-serif); font-size: 14.5px; font-weight: 500; color: var(--color-ink, #000); word-break: break-word; }

    @media (max-width: 700px) {
        .od-section { padding: 48px 20px; }
        .od-card { padding: 28px 22px; }
        .od-head { flex-direction: column; }
        .od-actions { width: 100%; }
        .od-btn { flex: 1 1 auto; justify-content: center; }
        .od-summary { grid-template-columns: 1fr; }
        .od-grid { grid-template-columns: 1fr; }
    }


/* ========================================================= */
/* CSS FROM: footer.blade.php */
/* ========================================================= */

@keyframes footer-slide-up {
        from {
            opacity: 0;
            transform: translateY(24px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ==========================================================================
       Redesigned Premium Footer Styling (Ink Black / Minimalist Gallery Theme)
       ========================================================================== */
    .main-footer {
        background-color: var(--color-ink, #000000) !important;
        color: var(--color-paper, #ffffff) !important;
        font-family: var(--font-helvetica-now, sans-serif) !important;
        border-top: 1px solid var(--color-vellum, #dfdcd5) !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .main-footer .footer-column {
        animation: footer-slide-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both !important;
    }
    .main-footer .footer-column:nth-child(1) { animation-delay: 0.1s !important; }
    .main-footer .footer-column:nth-child(2) { animation-delay: 0.2s !important; }
    .main-footer .footer-column:nth-child(3) { animation-delay: 0.3s !important; }
    .main-footer .footer-column:nth-child(4) { animation-delay: 0.4s !important; }

    .footer-logo-img {
        max-height: 48px !important;
        width: auto !important;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        background-color: var(--color-paper, #ffffff) !important;
        padding: 10px 16px !important;
        border-radius: 10px !important;
        box-sizing: content-box !important;
    }
    .footer-logo-link:hover .footer-logo-img {
        transform: scale(1.05) !important;
    }

    .main-footer a {
        color: rgba(255, 255, 255, 0.6) !important;
        text-decoration: none !important;
        transition: color 0.3s ease !important;
    }

    .main-footer a:hover {
        color: var(--color-paper, #ffffff) !important;
    }

    /* Newsletter Section (Top) */
    .main-footer .newsletter-section {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding: 60px 40px !important;
    }

    .main-footer .newsletter-container {
        max-width: 1200px !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .main-footer .widget-title {
        font-family: var(--font-davinci, serif) !important;
        font-size: 22px !important;
        font-weight: 500 !important;
        letter-spacing: -0.01em !important;
        color: var(--color-paper, #ffffff) !important;
        text-transform: none !important;
        margin-bottom: 12px !important;
    }

    .main-footer .newsletter-message {
        font-size: 13.5px !important;
        color: rgba(255, 255, 255, 0.5) !important;
        max-width: 480px !important;
        margin: 0 auto !important;
        line-height: 1.5 !important;
    }

    .main-footer .subscribe-form {
        width: 100% !important;
        max-width: 480px !important;
        margin: 24px auto 0 auto !important;
    }

    /* Unified pill: input + button inside one rounded, bordered container */
    .main-footer .subscribe-form .form-group {
        display: flex !important;
        gap: 8px !important;
        align-items: center !important;
        width: 100% !important;
        position: relative !important;
        background-color: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-radius: 40px !important;
        padding: 6px 6px 6px 24px !important;
        transition: border-color 0.3s ease, background-color 0.3s ease !important;
    }

    .main-footer .subscribe-form .form-group:focus-within {
        border-color: rgba(255, 255, 255, 0.55) !important;
        background-color: rgba(255, 255, 255, 0.10) !important;
    }

    .main-footer .subscribe-form .form-group::after {
        display: none !important;
    }

    .main-footer .subscribe-form input[type="email"] {
        flex-grow: 1 !important;
        background: transparent !important;
        border: none !important;
        outline: none !important;
        color: var(--color-paper, #ffffff) !important;
        font-size: 14px !important;
        padding: 12px 0 !important;
        font-family: var(--font-helvetica-now, sans-serif) !important;
    }

    .main-footer .subscribe-form input[type="email"]::placeholder {
        color: rgba(255, 255, 255, 0.4) !important;
    }

    .main-footer .subscribe-btn {
        font-family: var(--font-helvetica-now, sans-serif) !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.06em !important;
        background-color: var(--color-paper, #ffffff) !important;
        color: var(--color-ink, #000000) !important;
        border: 1px solid var(--color-paper, #ffffff) !important;
        border-radius: 40px !important;
        padding: 0 26px !important;
        height: 46px !important;
        gap: 8px !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .main-footer .subscribe-btn:hover {
        background-color: transparent !important;
        color: var(--color-paper, #ffffff) !important;
    }

    /* Newsletter success message — distinct green box.
       NOTE: do NOT force `display` here — visibility is controlled by JS
       (.hide()/.show()); forcing display would make it show before submit. */
    .main-footer .suces_rinfo {
        width: fit-content !important;
        max-width: 100% !important;
        background-color: #1a7f4b !important;
        color: #ffffff !important;
        border: 1px solid #35b075 !important;
        border-radius: 10px !important;
        padding: 11px 20px !important;
        margin: 16px auto 0 auto !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        letter-spacing: 0.01em !important;
        text-align: center !important;
    }

    /* Widgets Section (Middle Grid) */
    .main-footer .widgets-section {
        padding: 60px 40px !important;
    }

    .main-footer .widgets-container {
        max-width: 1200px !important;
        margin: 0 auto !important;
    }

    .main-footer .widgets-grid {
        display: grid !important;
        grid-template-columns: 1.5fr 1fr 1fr 1fr !important;
        gap: 40px !important;
    }

    .main-footer .brand-bio {
        font-size: 13.5px !important;
        color: rgba(255, 255, 255, 0.5) !important;
        line-height: 1.5 !important;
    }

    @media (max-width: 991px) {
        .main-footer .widgets-grid {
            grid-template-columns: 1fr !important;
            gap: 40px !important;
        }
    }

    .main-footer .footer-widget h4 {
        font-family: var(--font-helvetica-now, sans-serif) !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.1em !important;
        color: var(--color-paper, #ffffff) !important;
        margin-bottom: 20px !important;
    }

    .main-footer .footer-logo {
        font-family: var(--font-davinci, serif) !important;
        font-size: 24px !important;
        font-weight: 500 !important;
        color: var(--color-paper, #ffffff) !important;
        text-decoration: none !important;
        letter-spacing: -0.5px !important;
        display: inline-block !important;
        margin-bottom: 20px !important;
        transition: opacity 0.3s ease !important;
    }
    .main-footer .footer-logo:hover {
        opacity: 0.7 !important;
    }

    .main-footer .contact-info,
    .main-footer .user-links {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .main-footer .contact-info li {
        font-size: 13.5px !important;
        color: rgba(255, 255, 255, 0.5) !important;
        margin-bottom: 12px !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .main-footer .contact-info li i {
        color: var(--color-paper, #ffffff) !important;
        font-size: 12px !important;
        width: 16px !important;
        text-align: center !important;
    }

    .main-footer .user-links li {
        margin-bottom: 10px !important;
    }

    .main-footer .user-links li a {
        font-size: 13.5px !important;
        display: inline-block !important;
        position: relative !important;
        padding-bottom: 2px !important;
    }

    .main-footer .user-links li a::after {
        content: "" !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 1px !important;
        background-color: var(--color-paper, #ffffff) !important;
        transform: scaleX(0) !important;
        transform-origin: left !important;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .main-footer .user-links li a:hover::after {
        transform: scaleX(1) !important;
    }

    /* Footer Bottom Section */
    .main-footer .footer-bottom {
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding: 40px !important;
        background-color: var(--color-ink, #000000) !important;
    }

    .main-footer .bottom-container {
        max-width: 1200px !important;
        margin: 0 auto !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 20px !important;
    }

    @media (max-width: 767px) {
        .main-footer .bottom-container {
            flex-direction: column !important;
            text-align: center !important;
        }
    }

    .main-footer .copyright-text {
        font-size: 12px !important;
        color: rgba(255, 255, 255, 0.4) !important;
    }

    .main-footer .payment-icons {
        opacity: 1 !important;
    }

    .main-footer .payment-icons img {
        height: 20px !important;
        width: auto !important;
    }

    /* Scroll To Top Button (Minimalist Capsule) */
    .scroll-to-top {
        display: none;
        position: fixed;
        bottom: 30px;
        right: 30px;
        width: 40px;
        height: 40px;
        background-color: var(--color-ink, #000000) !important;
        color: var(--color-paper, #ffffff) !important;
        border: 1px solid var(--color-vellum, #dfdcd5) !important;
        border-radius: 50% !important;
        text-align: center !important;
        line-height: 38px !important; /* Centers icon vertically */
        z-index: 999 !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }

    .scroll-to-top:hover {
        background-color: var(--color-paper, #ffffff) !important;
        color: var(--color-ink, #000000) !important;
        transform: translateY(-4px) !important;
    }

    .scroll-to-top span {
        font-size: 16px !important;
        line-height: 1 !important;
    }


/* ========================================================= */
/* CSS FROM: head.blade.php */
/* ========================================================= */

#preloader {
            position: fixed;
            inset: 0;
            background: var(--color-putty, #c4c3b6);
            z-index: 999999;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .st-preloader {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            animation: st-pre-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
        }
        /* Brand logo mark (transparent webp) on a light plate */
        .st-preloader__logo {
            width: clamp(88px, 16vw, 132px);
            height: auto;
            display: block;
            background-color: var(--color-paper, #ffffff);
            padding: 22px;
            border-radius: 22px;
            box-sizing: content-box;
            box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
            animation: st-pre-breathe 1.9s ease-in-out infinite;
        }
        @keyframes st-pre-breathe {
            0%, 100% { transform: scale(1);    opacity: 0.85; }
            50%      { transform: scale(1.06); opacity: 1; }
        }
        /* Museum wall-label caption */
        .st-preloader__label {
            font-family: var(--font-helvetica-now, 'Inter', sans-serif);
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--color-graphite, #595855);
            animation: st-pre-pulse 1.6s ease-in-out infinite;
        }
        /* Hairline indeterminate progress — ink segment sweeping a vellum track */
        .st-preloader__bar {
            position: relative;
            width: 160px;
            height: 2px;
            background: var(--color-vellum, #dfdcd5);
            overflow: hidden;
        }
        .st-preloader__bar span {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 40%;
            background: var(--color-ink, #000000);
            animation: st-pre-slide 1.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
        }
        @keyframes st-pre-slide {
            0%   { transform: translateX(-100%); }
            100% { transform: translateX(400%); }
        }
        @keyframes st-pre-pulse {
            0%, 100% { opacity: 0.4; }
            50%      { opacity: 1; }
        }
        @keyframes st-pre-in {
            from { opacity: 0; transform: translateY(12px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @media (prefers-reduced-motion: reduce) {
            .st-preloader,
            .st-preloader__logo,
            .st-preloader__label,
            .st-preloader__bar span { animation: none; }
        }


/* ========================================================= */
/* CSS FROM: header.blade.php */
/* ========================================================= */

html, body {
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        width: 100% !important;
    }
    .page-wrapper {
        overflow-x: hidden !important;
        width: 100% !important;
        position: relative !important;
    }

    /* ==========================================================================
       Bootstrap utility shims — Bootstrap CSS is no longer loaded in this theme,
       so the layout utilities the header markup relies on are reimplemented here
       (scoped to the header) to restore alignment. No markup or JS changes.
       ========================================================================== */
    .custom-nav-bar .d-flex { display: flex !important; }
    .custom-nav-bar .d-block { display: block !important; }
    .custom-nav-bar .d-none { display: none !important; }
    .custom-nav-bar .align-items-center { align-items: center !important; }
    .custom-nav-bar .justify-content-between { justify-content: space-between !important; }
    .custom-nav-bar .justify-content-center { justify-content: center !important; }
    .custom-nav-bar .ms-1 { margin-left: 4px !important; }
    .custom-nav-bar .ms-2 { margin-left: 8px !important; }
    .custom-nav-bar .ms-3 { margin-left: 16px !important; }
    .custom-nav-bar .me-1 { margin-right: 4px !important; }
    .custom-nav-bar .me-2 { margin-right: 8px !important; }
    .custom-nav-bar .my-1 { margin-top: 4px !important; margin-bottom: 4px !important; }

    @media (min-width: 576px) {
        .custom-nav-bar .d-sm-flex { display: flex !important; }
        .custom-nav-bar .d-sm-inline { display: inline !important; }
        .custom-nav-bar .d-sm-inline-block { display: inline-block !important; }
    }
    @media (min-width: 768px) {
        .custom-nav-bar .d-md-block { display: block !important; }
    }
    @media (min-width: 992px) {
        .custom-nav-bar .d-lg-block { display: block !important; }
        .custom-nav-bar .d-lg-none { display: none !important; }
    }

    /* Right-side actions row — the key alignment fix */
    .custom-nav-actions {
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }

    /* Design system: flat surfaces only — neutralize any Bootstrap shadow utilities */
    .custom-nav-bar .shadow-sm,
    .custom-nav-bar .shadow { box-shadow: none !important; }

    /* Reset and custom styling for the redesigned premium header */
    .custom-nav-bar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1030 !important;
        width: 100% !important;
        height: 72px !important;
        background-color: var(--color-paper, #ffffff) !important; /* solid white — flat, no blur */
        border-bottom: 1px solid var(--color-vellum) !important; /* Vellum hairline border */
        display: flex !important;
        align-items: center !important;
        box-shadow: none !important;
        padding: 0 20px !important;
        margin: 0 !important;
        transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }

    .custom-nav-bar.floating {
        background-color: var(--color-paper, #ffffff) !important;
        height: 56px !important;
        box-shadow: none !important;
        border-bottom: 1px solid var(--color-ink, #000000) !important; /* hairline darkens on scroll — flat, no shadow */
    }

    .custom-nav-container {
        width: 100% !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 100% !important;
        flex-wrap: nowrap !important;
    }

    /* Logo Image and Wordmark */
    .custom-logo-link {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        text-decoration: none !important;
    }
    
    .custom-logo-link:hover {
        text-decoration: none !important;
    }

    .custom-logo-img {
        height: 52px !important;
        width: auto !important;
        object-fit: contain !important;
    }

    .custom-logo-text {
        font-family: var(--font-davinci) !important;
        font-size: 20px !important;
        font-weight: 500 !important;
        color: #000000 !important;
        letter-spacing: -0.5px !important;
    }

    /* Main Navigation Links (Desktop) */
    .custom-nav-links {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .custom-nav-link {
        font-family: var(--font-helvetica-now) !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #000000 !important;
        padding: 8px 12px !important;
        text-decoration: none !important;
        opacity: 0.65 !important;
        transition: opacity 0.25s ease, color 0.25s ease !important;
        display: inline-flex !important;
        align-items: center;
    }

    .custom-nav-link:hover,
    .custom-nav-link.active,
    .custom-nav-menu .dropdown:hover > .custom-nav-link {
        opacity: 1 !important;
        text-decoration: none !important;
        background-color: transparent !important;
        color: #000000 !important;
    }

    /* Animated hairline underline — the gallery hover effect (flat, ink) */
    .custom-nav-link { position: relative !important; }
    .custom-nav-link::after {
        content: "" !important;
        position: absolute !important;
        left: 12px !important;
        right: 12px !important;
        bottom: 2px !important;
        height: 1px !important;
        background-color: var(--color-ink, #000000) !important;
        transform: scaleX(0) !important;
        transform-origin: left center !important;
        transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }
    .custom-nav-link:hover::after,
    .custom-nav-link.active::after {
        transform: scaleX(1) !important;
    }

    .custom-chevron {
        font-size: 9px !important;
        opacity: 0.6 !important;
        transition: transform 0.2s ease !important;
    }

    /* Modern Dropdown Panels (Bone Surface + Hairline border + Shadow) */
    .custom-dropdown-panel {
        display: block !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(10px) scale(0.98) !important;
        transition: opacity 0.25s cubic-bezier(0.25, 1, 0.5, 1), transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.25s ease !important;
        pointer-events: none !important; /* Prevent clicks when hidden */
        background-color: var(--color-paper, #ffffff) !important;
        border: 1px solid var(--color-vellum) !important;
        border-radius: 9px !important;
        box-shadow: none !important;
        padding: 8px !important;
        margin-top: 8px !important;
        min-width: 260px !important;
        border-top: 1px solid var(--color-vellum) !important;
        position: absolute !important;
        z-index: 1050 !important;
    }

    .custom-dropdown-panel::after {
        display: none !important;
    }
    /* Bridge the margin gap so hover doesn't break when moving mouse to menu */
    .custom-dropdown-panel::before {
        content: "" !important;
        position: absolute !important;
        top: -20px !important;
        left: 0 !important;
        width: 100% !important;
        height: 20px !important;
        display: block !important;
        background: transparent !important;
    }

    /* Show dropdown panel on hover (desktop) or when clicked (.show) */
    @media (min-width: 992px) {
        .custom-nav-bar .dropdown:hover .custom-dropdown-panel {
            opacity: 1 !important;
            visibility: visible !important;
            transform: translateY(0) scale(1) !important;
            pointer-events: auto !important;
        }
        .custom-nav-bar .dropdown:hover .custom-chevron {
            transform: rotate(180deg) !important;
        }
        .custom-nav-menu .dropdown:hover > .custom-nav-link::after {
            transform: scaleX(1) !important;
        }
        /* Hide script.js appended dropdown button on desktop */
        .custom-nav-bar .dropdown-btn {
            display: none !important;
        }
    }

    .dropdown.show .custom-dropdown-panel,
    .dropdown-menu.show {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) scale(1) !important;
        pointer-events: auto !important;
    }
    .dropdown.show .custom-chevron {
        transform: rotate(180deg) !important;
    }

    .custom-dropdown-item {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 8px 12px !important;
        border-radius: 6px !important;
        background: transparent !important;
        transition: background-color 0.2s ease !important;
        text-decoration: none !important;
    }

    .custom-dropdown-item:hover,
    .custom-dropdown-item.active {
        background-color: var(--color-bone) !important; /* Bone color hover */
        color: #000000 !important;
    }

    .custom-dropdown-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        background-color: var(--color-bone) !important; /* Bone */
        border: 1px solid var(--color-vellum) !important; /* Vellum */
        border-radius: 6px !important;
        color: #000000 !important;
        flex-shrink: 0 !important;
        font-size: 13px !important;
    }

    .custom-dropdown-info {
        display: flex !important;
        flex-direction: column !important;
    }

    .custom-dropdown-title {
        font-family: var(--font-helvetica-now) !important;
        font-size: 13.5px !important;
        font-weight: 500 !important;
        color: #000000 !important;
        line-height: 1.2 !important;
    }

    /* ==========================================================================
       Language / Currency Capsule Switcher Buttons
       ========================================================================== */
    .custom-switcher-btn {
        font-family: var(--font-helvetica-now) !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        color: var(--color-ink) !important;
        background-color: var(--color-paper) !important;
        border: 1px solid var(--color-vellum) !important;
        padding: 0 12px !important;
        height: 32px !important;
        border-radius: 28.8px !important;
        text-decoration: none !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        transition: all 0.2s ease !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
        white-space: nowrap !important;
    }

    .custom-switcher-btn:hover {
        background-color: var(--color-bone) !important;
        color: var(--color-ink) !important;
        text-decoration: none !important;
    }

    /* ==========================================================================
       Points & User Profile capsule buttons
       ========================================================================== */
    .custom-points-badge {
        background-color: var(--color-bone) !important;
        border: 1px solid var(--color-vellum) !important;
        color: var(--color-ink) !important;
        font-family: var(--font-helvetica-now) !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        letter-spacing: 0.03em !important;
        border-radius: 28.8px !important;
        padding: 0 12px !important;
        height: 32px !important;
        display: inline-flex !important;
        align-items: center !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }
    .custom-points-badge:hover {
        background-color: var(--color-vellum) !important;
        text-decoration: none !important;
        color: var(--color-ink) !important;
    }

    .custom-user-badge {
        background-color: var(--color-paper) !important;
        border: 1px solid var(--color-vellum) !important;
        color: var(--color-ink) !important;
        font-family: var(--font-helvetica-now) !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        border-radius: 28.8px !important;
        padding: 0 12px !important;
        height: 32px !important;
        display: inline-flex !important;
        align-items: center !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
        white-space: nowrap !important;
    }
    .custom-user-badge:hover {
        background-color: var(--color-bone) !important;
        text-decoration: none !important;
        color: var(--color-ink) !important;
    }

    .custom-auth-btn {
        font-family: var(--font-helvetica-now) !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        background-color: var(--color-ink) !important;
        color: var(--color-paper) !important;
        padding: 8px 16px !important;
        border-radius: 28.8px !important;
        border: 1px solid var(--color-ink) !important;
        text-decoration: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 32px !important;
        transition: all 0.2s ease !important;
        box-sizing: border-box !important;
    }
    .custom-auth-btn:hover {
        background-color: transparent !important;
        color: var(--color-ink) !important;
        text-decoration: none !important;
    }

    /* ==========================================================================
       Shopping Cart Capsule Button
       ========================================================================== */
    .custom-cart-toggle {
        background-color: var(--color-paper, #ffffff) !important;
        color: var(--color-ink, #000000) !important;
        border: 1px solid var(--color-vellum) !important;
        border-radius: 50% !important;
        width: 32px !important;
        height: 32px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        box-sizing: border-box !important;
        position: relative !important;
    }
    .custom-cart-toggle:hover {
        background-color: var(--color-bone) !important;
        color: var(--color-ink) !important;
    }
    .custom-cart-toggle i {
        font-size: 13px !important;
    }
    .custom-cart-count {
        position: absolute !important;
        top: -6px !important;
        right: -6px !important;
        background-color: var(--color-ink, #000000) !important;
        color: var(--color-paper, #ffffff) !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        border-radius: 50% !important;
        width: 16px !important;
        height: 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid var(--color-paper, #ffffff) !important;
        transition: all 0.2s ease !important;
    }
    .custom-cart-toggle:hover .custom-cart-count {
        background-color: var(--color-ink) !important;
        color: var(--color-paper) !important;
    }

    /* ==========================================================================
       Dropdown Panel & Item Styling
       ========================================================================== */
    .custom-nav-bar .dropdown {
        position: relative !important;
    }
    .custom-nav-bar .dropdown-menu-end {
        right: 0 !important;
        left: auto !important;
    }
    .custom-dropdown-panel {
        display: block !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(12px) scale(0.97) !important;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        pointer-events: none !important;
        background-color: var(--color-paper, #ffffff) !important;
        border: 1px solid var(--color-vellum, #dfdcd5) !important;
        border-radius: 9px !important; /* theme card radius */
        padding: 8px !important;
        margin-top: 10px !important;
        min-width: 200px !important;
        box-shadow: none !important; /* flat surfaces — no shadows */
        position: absolute !important;
        z-index: 1050 !important;
        list-style: none !important;
        list-style-type: none !important;
        padding-left: 0 !important;
    }
    .custom-dropdown-panel li {
        list-style: none !important;
        list-style-type: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .custom-dropdown-panel .dropdown-item {
        font-family: var(--font-helvetica-now, sans-serif) !important;
        font-size: 13.5px !important;
        font-weight: 550 !important;
        color: var(--color-ink, #000000) !important;
        padding: 8px 12px !important;
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        transition: all 0.2s ease !important;
        background-color: transparent !important;
        margin-bottom: 2px !important;
        white-space: nowrap !important;
    }
    .custom-dropdown-panel .dropdown-item:last-child {
        margin-bottom: 0 !important;
    }
    .custom-dropdown-panel .dropdown-item i {
        font-size: 13px !important;
        color: var(--color-ink, #000000) !important;
        transition: all 0.2s ease !important;
        flex-shrink: 0 !important;
    }
    .custom-dropdown-panel .dropdown-item:hover,
    .custom-dropdown-panel .dropdown-item.active {
        background-color: var(--color-bone, #e7e5e4) !important;
        color: var(--color-ink, #000000) !important;
        text-decoration: none !important;
        padding-left: 14px !important;
    }

    /* ==========================================================================
       Mobile Hamburger Toggle
       ========================================================================== */
    .custom-mobile-toggle {
        display: none !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        color: #000000 !important;
        font-size: 22px !important;
        padding: 8px !important;
        cursor: pointer !important;
        transition: opacity 0.2s ease !important;
    }

    @media (max-width: 991px) {
        .custom-mobile-toggle {
            display: flex !important;
        }
    }

    .custom-mobile-toggle:hover {
        opacity: 0.7 !important;
    }

    /* Hide default bootstrap dropdown carets globally in the header */
    .custom-nav-bar .dropdown-toggle::after,
    .custom-nav-bar [data-toggle="dropdown"]::after,
    .custom-nav-bar [data-bs-toggle="dropdown"]::after {
        display: none !important;
        content: none !important;
    }

    /* ==========================================================================
       Mobile Sidebar Drawer Styling
       ========================================================================== */
    .mobile-menu {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        width: 320px !important;
        max-width: 100vw !important;
        height: 100vh !important;
        background-color: var(--color-bone) !important;
        border-right: 1px solid var(--color-vellum) !important;
        z-index: 999999 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
        padding: 40px 24px !important;
    }

    .mobile-menu-visible .mobile-menu {
        transform: translateX(0) !important;
    }

    .mobile-menu .menu-backdrop {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.4) !important;
        z-index: -1 !important;
        opacity: 0 !important;
        transition: opacity 0.4s ease !important;
        pointer-events: none !important;
    }

    .mobile-menu-visible .mobile-menu .menu-backdrop {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .mobile-menu .nav-logo {
        margin-bottom: 40px !important;
        text-align: center !important;
    }

    .mobile-menu .navigation li {
        border-bottom: 1px solid var(--color-vellum) !important;
    }

    .mobile-menu .navigation li a {
        display: block !important;
        padding: 14px 24px !important;
        font-family: var(--font-helvetica-now) !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        color: #000000 !important;
        text-decoration: none !important;
        transition: background-color 0.2s ease !important;
    }

    .mobile-menu .navigation li a:hover {
        background-color: var(--color-putty) !important;
        text-decoration: none !important;
    }

    .mobile-menu .close-btn {
        cursor: pointer !important;
        font-size: 20px !important;
        color: #000000 !important;
        transition: opacity 0.2s ease !important;
    }

    .mobile-menu .close-btn:hover {
        opacity: 0.7 !important;
    }

    /* ==========================================================================
       Sidebar Cart Styling (Self-contained, Structured gallery styling)
       ========================================================================== */
    .cartcanvas__info {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        width: 380px !important;
        max-width: 100vw !important;
        height: 100vh !important;
        background-color: var(--color-bone, #e7e5e4) !important;
        z-index: 1050 !important;
        transform: translateX(100%) !important;
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 24px !important;
        border-left: 1px solid var(--color-vellum, #dfdcd5) !important;
        box-shadow: none !important;
        border-radius: 0 !important; /* Flat surface, no round corners */
        overflow-x: hidden !important;
    }

    .cartcanvas__info, .cartcanvas__info * {
        box-sizing: border-box !important;
    }

    .cartcanvas__info.info-open {
        transform: translateX(0) !important;
    }

    .offcanvas__overlay {
        position: fixed !important;
        inset: 0 !important;
        background-color: rgba(0, 0, 0, 0.4) !important;
        z-index: 1040 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.4s ease !important;
    }

    .offcanvas__overlay.overlay-open {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .cart-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        border-bottom: 1px solid var(--color-vellum, #dfdcd5) !important;
        padding-bottom: 16px !important;
        margin-bottom: 24px !important;
    }

    .cart-header h4 {
        font-family: var(--font-davinci, serif) !important;
        font-size: 20px !important;
        font-weight: 500 !important;
        color: var(--color-ink, #000000) !important;
    }

    .cartcanvas__close {
        cursor: pointer !important;
        font-size: 20px !important;
        color: var(--color-ink, #000000) !important;
        transition: opacity 0.2s ease !important;
        position: relative !important;
        z-index: 10 !important; /* keep close (cross) button in front of cart content */
    }

    .cartcanvas__close:hover {
        opacity: 0.6 !important;
    }

    .cart-list {
        flex-grow: 1 !important;
        overflow-y: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important;  /* IE and Edge */
    }
    .cart-list::-webkit-scrollbar {
        display: none !important; /* Chrome, Safari, and Opera */
    }

    .cart-item {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
        padding: 16px !important;
        border: 1px solid var(--color-vellum, #dfdcd5) !important;
        background-color: var(--color-paper, #ffffff) !important;
        border-radius: 9px !important; /* theme card radius */
        margin-bottom: 16px !important;
        position: relative !important;
        box-shadow: none !important;
    }

    .cart-item-points {
        background-color: var(--color-paper, #ffffff) !important;
    }

    .cart-item .remove-item {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        color: var(--color-graphite, #595855) !important;
        font-size: 14px !important;
        transition: color 0.2s ease !important;
        opacity: 0.6 !important;
    }

    .cart-item .remove-item:hover {
        color: var(--color-ink, #000000) !important;
        opacity: 1 !important;
    }

    .cart-item .item-img {
        width: 64px !important;
        height: 64px !important;
        border: 1px solid var(--color-vellum, #dfdcd5) !important;
        background-color: var(--color-bone, #e7e5e4) !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
    }

    .cart-item .item-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .cart-item .item-details {
        flex-grow: 1 !important;
        min-width: 0 !important;
    }

    .cart-item .item-details h6 {
        font-family: var(--font-helvetica-now, sans-serif) !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: var(--color-ink, #000000) !important;
        margin: 0 0 6px 0 !important;
    }

    .cart-item .item-details p {
        font-family: var(--font-helvetica-now, sans-serif) !important;
        font-size: 12px !important;
        color: var(--color-graphite, #595855) !important;
        margin: 0 !important;
    }

    .cart-item .item-details span {
        color: var(--color-ink, #000000) !important;
    }

    .cart-item .badge {
        background-color: var(--color-bone, #e7e5e4) !important;
        color: var(--color-ink, #000000) !important;
        border: 1px solid var(--color-vellum, #dfdcd5) !important;
        font-family: var(--font-helvetica-now, sans-serif) !important;
        font-size: 10px !important;
        font-weight: 500 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        border-radius: 2px !important;
        padding: 4px 8px !important;
    }

    .cart-footer {
        border-top: 1px solid var(--color-vellum, #dfdcd5) !important;
        padding-top: 20px !important;
        margin-top: auto !important;
        background-color: var(--color-bone, #e7e5e4) !important;
    }

    .cart-footer h5 {
        font-family: var(--font-helvetica-now, sans-serif) !important;
        font-size: 12px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        color: var(--color-graphite, #595855) !important;
        margin: 0 !important;
    }

    .cart-footer h4 {
        font-family: var(--font-davinci, serif) !important;
        font-size: 20px !important;
        font-weight: 500 !important;
        color: var(--color-ink, #000000) !important;
        margin: 0 !important;
    }

    .cart-footer-top {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 16px !important;
    }

    .cart-footer-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }

    /* Buttons inside Cart Drawer */
    .btn-sakura,
    .btn-sakura-outline {
        font-family: var(--font-helvetica-now, sans-serif) !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        padding: 10px 16px !important;
        border-radius: 28.8px !important; /* theme pill radius for action buttons */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.2s ease !important;
        text-decoration: none !important;
        cursor: pointer !important;
        border: 1px solid var(--color-ink, #000000) !important;
        width: 100% !important;
    }

    .btn-sakura {
        background-color: var(--color-ink, #000000) !important;
        color: var(--color-paper, #ffffff) !important;
    }

    .btn-sakura:hover {
        background-color: var(--color-graphite, #595855) !important;
        border-color: var(--color-graphite, #595855) !important;
        color: var(--color-paper, #ffffff) !important;
        text-decoration: none !important;
    }

    .btn-sakura-outline {
        background-color: transparent !important;
        color: var(--color-ink, #000000) !important;
    }

    .btn-sakura-outline:hover {
        background-color: rgba(0, 0, 0, 0.05) !important;
        color: var(--color-ink, #000000) !important;
        text-decoration: none !important;
    }


/* ========================================================= */
/* CSS FROM: about-us.blade.php */
/* ========================================================= */

/* =========================================================
       ABOUT — Structured theme (flat, putty/ink, serif display)
       ========================================================= */
    .abt-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 40px; }
    .abt-section { padding: 96px 0; }
    .abt-story  { background-color: var(--color-putty, #c4c3b6); }
    .abt-values { background-color: var(--color-bone, #e7e5e4); }
    .abt-craft  { background-color: var(--color-putty, #c4c3b6); }

    /* Shared type */
    .abt-eyebrow {
        font-family: var(--font-helvetica-now, sans-serif);
        font-size: 11px; font-weight: 600; text-transform: uppercase;
        letter-spacing: 0.18em; color: var(--color-graphite, #595855); margin: 0 0 12px 0;
    }
    .abt-heading {
        font-family: var(--font-davinci, serif);
        font-size: clamp(28px, 3.6vw, 44px); font-weight: 500;
        line-height: 1.12; letter-spacing: -0.01em;
        color: var(--color-ink, #000); margin: 0 0 20px 0;
    }
    .abt-heading--center { text-align: center; margin-left: auto; margin-right: auto; max-width: 640px; }
    .abt-lead {
        font-family: var(--font-helvetica-now, sans-serif);
        font-size: 17px; line-height: 1.7; color: var(--color-ink, #000);
        margin: 0 0 16px 0; max-width: 560px;
    }
    .abt-body {
        font-family: var(--font-helvetica-now, sans-serif);
        font-size: 15px; line-height: 1.8; color: var(--color-graphite, #595855);
        margin: 0 0 24px 0; max-width: 560px;
    }

    /* Split (text + media) */
    .abt-split { display: flex; align-items: center; gap: 56px; }
    .abt-split--reverse { flex-direction: row-reverse; }
    .abt-split__text { flex: 1 1 48%; min-width: 0; }
    .abt-split__media { flex: 1 1 52%; min-width: 0; }

    .abt-frame {
        margin: 0; overflow: hidden;
        border: 1px solid var(--color-vellum, #dfdcd5);
        border-radius: 12px; background-color: var(--color-bone, #e7e5e4);
        box-shadow: none;
    }
    .abt-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .abt-frame--tall { aspect-ratio: 4 / 5; }
    .abt-frame--wide { aspect-ratio: 5 / 4; }

    /* Movement tags */
    .abt-tags { display: flex; flex-wrap: wrap; gap: 8px; }
    .abt-tags span {
        font-family: var(--font-helvetica-now, sans-serif);
        font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em;
        color: var(--color-ink, #000);
        background-color: var(--color-paper, #fff);
        border: 1px solid var(--color-vellum, #dfdcd5);
        border-radius: 28.8px; padding: 6px 14px;
    }

    /* Manifesto video band */
    .abt-manifesto {
        position: relative; overflow: hidden;
        min-height: 460px; display: flex; align-items: center; justify-content: center;
        background-color: var(--color-ink, #000);
        border-top: 1px solid var(--color-vellum, #dfdcd5);
        border-bottom: 1px solid var(--color-vellum, #dfdcd5);
    }
    .abt-manifesto__video {
        position: absolute; inset: 0; width: 100%; height: 100%;
        object-fit: cover; z-index: 1; filter: grayscale(0.15) contrast(1.02);
    }
    .abt-manifesto__veil { position: absolute; inset: 0; z-index: 2; background: rgba(0, 0, 0, 0.5); pointer-events: none; }
    .abt-manifesto__inner { position: relative; z-index: 3; text-align: center; padding-top: 80px; padding-bottom: 80px; }
    .abt-manifesto__label {
        font-family: var(--font-helvetica-now, sans-serif);
        font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em;
        color: rgba(255, 255, 255, 0.6); margin: 0 0 20px 0;
    }
    .abt-manifesto__quote {
        font-family: var(--font-davinci, serif);
        font-size: clamp(24px, 3.4vw, 40px); font-weight: 500; line-height: 1.28;
        letter-spacing: -0.01em; color: var(--color-paper, #fff);
        margin: 0 auto; max-width: 900px;
    }

    /* Values grid */
    .abt-head { text-align: center; margin-bottom: 48px; }
    .abt-values__grid {
        display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
    }
    .abt-value {
        background-color: var(--color-paper, #fff);
        border: 1px solid var(--color-vellum, #dfdcd5);
        border-radius: 12px; padding: 30px 26px; box-shadow: none;
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .abt-value:hover { transform: translateY(-6px); }
    .abt-value__icon {
        display: inline-flex; align-items: center; justify-content: center;
        width: 46px; height: 46px; margin-bottom: 18px;
        border: 1px solid var(--color-vellum, #dfdcd5); border-radius: 50%;
        color: var(--color-ink, #000); font-size: 16px;
        background-color: var(--color-bone, #e7e5e4);
    }
    .abt-value__title {
        font-family: var(--font-davinci, serif); font-size: 19px; font-weight: 500;
        color: var(--color-ink, #000); margin: 0 0 10px 0; line-height: 1.25;
    }
    .abt-value__desc {
        font-family: var(--font-helvetica-now, sans-serif); font-size: 13.5px; line-height: 1.6;
        color: var(--color-graphite, #595855); margin: 0;
    }

    /* Checklist */
    .abt-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
    .abt-checklist li {
        display: flex; align-items: center; gap: 12px;
        font-family: var(--font-helvetica-now, sans-serif); font-size: 14px;
        color: var(--color-ink, #000);
    }
    .abt-checklist li i {
        color: var(--color-ink, #000); font-size: 11px; flex-shrink: 0;
        width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid var(--color-vellum, #dfdcd5); border-radius: 50%;
        background-color: var(--color-paper, #fff);
    }

    /* CTA */
    .abt-cta {
        background-color: var(--color-ink, #000); text-align: center;
        padding: 100px 0;
    }
    .abt-cta__heading {
        font-family: var(--font-davinci, serif); font-size: clamp(30px, 4vw, 52px); font-weight: 500;
        line-height: 1.08; letter-spacing: -0.02em; color: var(--color-paper, #fff); margin: 0 0 14px 0;
    }
    .abt-cta__sub {
        font-family: var(--font-helvetica-now, sans-serif); font-size: 15px; line-height: 1.6;
        color: rgba(255, 255, 255, 0.65); margin: 0 auto 32px auto; max-width: 480px;
    }
    .abt-cta__btn {
        display: inline-flex; align-items: center; gap: 10px;
        font-family: var(--font-helvetica-now, sans-serif); font-size: 13px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.05em;
        background-color: var(--color-paper, #fff); color: var(--color-ink, #000);
        border: 1px solid var(--color-paper, #fff); border-radius: 28.8px;
        padding: 14px 28px; text-decoration: none;
        transition: opacity 0.2s ease;
    }
    .abt-cta__btn:hover { opacity: 0.85; color: var(--color-ink, #000); text-decoration: none; }

    /* Responsive */
    @media (max-width: 900px) {
        .abt-section { padding: 64px 0; }
        .abt-split, .abt-split--reverse { flex-direction: column; gap: 36px; }
        .abt-split__text, .abt-split__media { flex-basis: 100%; width: 100%; }
        .abt-lead, .abt-body { max-width: none; }
        .abt-values__grid { grid-template-columns: repeat(2, 1fr); }
        .abt-manifesto { min-height: 380px; }
    }
    @media (max-width: 560px) {
        .abt-container { padding: 0 20px; }
        .abt-values__grid { grid-template-columns: 1fr; }
    }


/* ========================================================= */
/* CSS FROM: cart.blade.php */
/* ========================================================= */

/* =========================================================
       CART — Structured theme (items list + sticky summary)
       ========================================================= */
    .cart-wrap { background-color: var(--color-putty, #c4c3b6); padding: 72px 40px; }
    .cart-container { max-width: 1160px; margin: 0 auto; }

    .cart-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 28px; align-items: start; }

    /* Items panel */
    .cart-items {
        background-color: var(--color-paper, #fff);
        border: 1px solid var(--color-vellum, #dfdcd5);
        border-radius: 14px; padding: 32px;
    }
    .cart-h {
        font-family: var(--font-davinci, serif); font-size: 22px; font-weight: 500;
        color: var(--color-ink, #000); margin: 0 0 20px 0;
        display: flex; align-items: center; gap: 10px;
    }
    .cart-h i { font-size: 15px; }
    .cart-list { display: flex; flex-direction: column; }
    .cart-item {
        display: flex; align-items: center; gap: 20px;
        padding: 18px 0; border-bottom: 1px solid var(--color-vellum, #dfdcd5);
    }
    .cart-item:last-child { border-bottom: none; padding-bottom: 0; }
    .cart-item:first-child { padding-top: 0; }
    .cart-item__main { flex: 1 1 auto; min-width: 0; }
    .cart-item__title {
        display: block; font-family: var(--font-helvetica-now, sans-serif); font-size: 15px; font-weight: 600;
        color: var(--color-ink, #000); text-decoration: none; margin-bottom: 7px; word-break: break-word;
    }
    .cart-item__title:hover { text-decoration: underline; }
    .cart-item__tag {
        display: inline-block; font-family: var(--font-helvetica-now, sans-serif);
        font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
        color: var(--color-ink, #000); background-color: var(--color-bone, #e7e5e4);
        border: 1px solid var(--color-vellum, #dfdcd5); border-radius: 28.8px; padding: 3px 10px;
    }
    .cart-item__meta { display: flex; gap: 28px; flex-shrink: 0; }
    .cart-item__col { display: flex; flex-direction: column; gap: 4px; text-align: right; }
    .cart-item__label {
        font-family: var(--font-helvetica-now, sans-serif); font-size: 10px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-graphite, #595855);
    }
    .cart-item__val {
        font-family: var(--font-helvetica-now, sans-serif); font-size: 14px; font-weight: 600;
        color: var(--color-ink, #000); white-space: nowrap;
    }
    .cart-item__val i { color: var(--color-graphite, #595855); margin-right: 5px; }
    .cart-item__remove {
        flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        background-color: var(--color-paper, #fff); border: 1px solid var(--color-vellum, #dfdcd5);
        color: var(--color-ink, #000); font-size: 14px; transition: all 0.2s ease;
    }
    .cart-item__remove:hover { background-color: var(--color-ink, #000); color: var(--color-paper, #fff); border-color: var(--color-ink, #000); }

    /* Summary */
    .cart-summary__card {
        position: sticky; top: 96px;
        background-color: var(--color-paper, #fff);
        border: 1px solid var(--color-vellum, #dfdcd5);
        border-radius: 14px; padding: 28px;
    }
    .cart-summary__h {
        font-family: var(--font-davinci, serif); font-size: 20px; font-weight: 500;
        color: var(--color-ink, #000); margin: 0 0 18px 0;
    }
    .cart-summary__row {
        display: flex; justify-content: space-between; align-items: center; padding: 8px 0;
        font-family: var(--font-helvetica-now, sans-serif); font-size: 14px; color: var(--color-graphite, #595855);
    }
    .cart-summary__row span:last-child { color: var(--color-ink, #000); font-weight: 600; }
    .cart-summary__total {
        display: flex; justify-content: space-between; align-items: baseline;
        padding: 16px 0 20px 0; margin-top: 8px; border-top: 1px solid var(--color-vellum, #dfdcd5);
    }
    .cart-summary__total .lbl {
        font-family: var(--font-helvetica-now, sans-serif); font-size: 13px;
        text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-graphite, #595855);
    }
    .cart-summary__total .amt { font-family: var(--font-davinci, serif); font-size: 28px; font-weight: 500; color: var(--color-ink, #000); }

    .cart-btn {
        display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
        font-family: var(--font-helvetica-now, sans-serif); font-size: 12.5px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.05em;
        border-radius: 28.8px; padding: 14px; text-decoration: none; box-sizing: border-box;
        transition: opacity 0.2s ease, background-color 0.2s ease;
    }
    .cart-btn--primary { background-color: var(--color-ink, #000); color: var(--color-paper, #fff); border: 1px solid var(--color-ink, #000); }
    .cart-btn--primary:hover { opacity: 0.85; color: var(--color-paper, #fff); }
    .cart-btn--ghost { background-color: transparent; color: var(--color-ink, #000); border: 1px solid var(--color-vellum, #dfdcd5); margin-top: 12px; }
    .cart-btn--ghost:hover { background-color: var(--color-bone, #e7e5e4); color: var(--color-ink, #000); }

    .cart-pay { text-align: center; margin-top: 22px; }
    .cart-pay img { max-height: 30px; width: auto; opacity: 1; }

    /* Empty state */
    .cart-empty {
        max-width: 620px; margin: 0 auto; text-align: center;
        background-color: var(--color-paper, #fff);
        border: 1px solid var(--color-vellum, #dfdcd5);
        border-radius: 14px; padding: 72px 32px;
    }
    .cart-empty i { font-size: 46px; color: var(--color-graphite, #595855); opacity: 0.4; margin-bottom: 22px; }
    .cart-empty h3 { font-family: var(--font-davinci, serif); font-size: 24px; font-weight: 500; color: var(--color-ink, #000); margin: 0 0 8px 0; }
    .cart-empty p { font-family: var(--font-helvetica-now, sans-serif); font-size: 14px; color: var(--color-graphite, #595855); margin: 0 0 24px 0; }
    .cart-empty__btn { width: auto; display: inline-flex; padding: 13px 28px; }

    @media (max-width: 900px) {
        .cart-wrap { padding: 48px 20px; }
        .cart-grid { grid-template-columns: 1fr; gap: 20px; }
        .cart-summary__card { position: static; }
    }
    @media (max-width: 520px) {
        .cart-items { padding: 24px; }
        .cart-item { flex-wrap: wrap; gap: 14px; }
        .cart-item__meta { gap: 20px; }
        .cart-item__col { text-align: left; }
    }


/* ========================================================= */
/* CSS FROM: checkout.blade.php */
/* ========================================================= */

/* =========================================================
       CHECKOUT — Structured theme (form + sticky summary)
       ========================================================= */
    .co-section { background-color: var(--color-putty, #c4c3b6); padding: 72px 40px; }
    .co-container { max-width: 1200px; margin: 0 auto; }
    .co-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; align-items: start; }

    .co-card {
        background-color: var(--color-paper, #fff);
        border: 1px solid var(--color-vellum, #dfdcd5);
        border-radius: 14px; padding: 30px; margin-bottom: 24px;
    }
    .co-main .co-card:last-child { margin-bottom: 0; }
    .co-card__title {
        font-family: var(--font-davinci, serif); font-size: 20px; font-weight: 500;
        color: var(--color-ink, #000); margin: 0 0 22px 0;
        display: flex; align-items: center; gap: 10px;
    }
    .co-card__title i { font-size: 15px; color: var(--color-graphite, #595855); }

    .co-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    .co-field { display: flex; flex-direction: column; }
    .co-field--full { grid-column: 1 / -1; }
    .co-label {
        font-family: var(--font-helvetica-now, sans-serif); font-size: 11px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-graphite, #595855); margin-bottom: 8px;
    }
    .co-input {
        width: 100%; box-sizing: border-box;
        background-color: var(--color-bone, #e7e5e4);
        border: 1px solid var(--color-vellum, #dfdcd5);
        border-radius: 9px; padding: 12px 14px;
        font-family: var(--font-helvetica-now, sans-serif); font-size: 14px; color: var(--color-ink, #000);
        outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .co-input::placeholder { color: #9a9a92; }
    .co-input:focus { border-color: var(--color-ink, #000); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08); background-color: var(--color-paper, #fff); }
    .co-select { appearance: none; -webkit-appearance: none; background-image: none; cursor: pointer; }
    .co-textarea { resize: vertical; min-height: 110px; }

    /* Validation state + message (always below the field) */
    .co-input.co-error { border-color: #cf7d7d; box-shadow: 0 0 0 3px rgba(207, 125, 125, 0.18); background-color: var(--color-paper, #fff); }
    .co-error, label.co-error, span.co-error {
        display: block; margin-top: 7px;
        font-family: var(--font-helvetica-now, sans-serif); font-size: 12.5px; line-height: 1.4;
        color: #c0392b; font-weight: 500;
    }

    /* Expiry */
    .co-expiry { display: flex; align-items: center; gap: 10px; }
    .co-expiry .co-input { flex: 1; }
    .co-expiry__sep { color: var(--color-graphite, #595855); font-weight: 600; }

    /* Checkboxes */
    .co-field--check { margin-bottom: 4px; }
    .co-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
    .co-check input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--color-ink, #000); flex-shrink: 0; cursor: pointer; }
    .co-check span { font-family: var(--font-helvetica-now, sans-serif); font-size: 13.5px; line-height: 1.5; color: var(--color-ink, #000); }
    .co-check a { color: var(--color-ink, #000); font-weight: 600; text-decoration: underline; }

    .co-billnote { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--color-vellum, #dfdcd5); text-align: left; }
    .co-billnote p { font-family: var(--font-helvetica-now, sans-serif); font-size: 13px; line-height: 2.1; color: var(--color-graphite, #595855); margin: 0; }
    .co-billnote img { display: inline; height: 2.2em; width: auto; max-width: 100%; vertical-align: middle; margin: 0 4px; object-fit: contain; }

    /* Summary */
    .co-summary { position: sticky; top: 96px; margin-bottom: 0; }
    .co-order { padding-bottom: 8px; margin-bottom: 20px; border-bottom: 1px solid var(--color-vellum, #dfdcd5); }
    .co-order__head {
        display: flex; justify-content: space-between;
        font-family: var(--font-helvetica-now, sans-serif); font-size: 10px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-graphite, #595855);
        padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid var(--color-vellum, #dfdcd5);
    }
    .co-order__item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--color-vellum, #dfdcd5); }
    .co-order__points { display: flex; align-items: center; gap: 8px; font-family: var(--font-helvetica-now, sans-serif); font-size: 13px; color: var(--color-graphite, #595855); }
    .co-order__points i { color: var(--color-ink, #000); }
    .co-order__price { font-family: var(--font-helvetica-now, sans-serif); font-size: 14px; font-weight: 600; color: var(--color-ink, #000); }
    .co-order__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 16px; margin-top: 6px; }
    .co-order__total .lbl { font-family: var(--font-helvetica-now, sans-serif); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-graphite, #595855); }
    .co-order__total .amt { font-family: var(--font-davinci, serif); font-size: 26px; font-weight: 500; color: var(--color-ink, #000); }

    .co-field--captcha { margin: 8px 0 18px 0; }
    .co-captcha { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
    .co-captcha__img img { height: 46px; width: auto; border-radius: 9px; border: 1px solid var(--color-vellum, #dfdcd5); background: var(--color-paper, #fff); }

    .co-btn {
        display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box;
        font-family: var(--font-helvetica-now, sans-serif); font-size: 12.5px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.05em;
        border-radius: 28.8px; padding: 15px; text-decoration: none; cursor: pointer; border: 1px solid transparent;
        transition: opacity 0.2s ease, background-color 0.2s ease;
    }
    .co-btn--primary { background-color: var(--color-ink, #000); color: var(--color-paper, #fff); border-color: var(--color-ink, #000); margin-bottom: 12px; }
    .co-btn--primary:hover { opacity: 0.85; color: var(--color-paper, #fff); }
    .co-btn--ghost { background-color: transparent; color: var(--color-ink, #000); border-color: var(--color-vellum, #dfdcd5); }
    .co-btn--ghost:hover { background-color: var(--color-bone, #e7e5e4); color: var(--color-ink, #000); }

    .co-pay { text-align: center; margin-top: 20px; }
    .co-pay img { max-height: 30px; opacity: 1; }

    @media (max-width: 900px) {
        .co-section { padding: 48px 20px; }
        .co-grid { grid-template-columns: 1fr; gap: 20px; }
        .co-summary { position: static; }
    }
    @media (max-width: 520px) {
        .co-card { padding: 22px; }
        .co-fields { grid-template-columns: 1fr; gap: 16px; }
    }


/* ========================================================= */
/* CSS FROM: contact.blade.php */
/* ========================================================= */

/* =========================================================
       CONTACT — Structured theme (video-behind-form, image-behind-info)
       ========================================================= */
    .ct-section { background-color: var(--color-putty, #c4c3b6); padding: 84px 40px; }
    .ct-head { text-align: center; max-width: 640px; margin: 0 auto 48px auto; }
    .ct-eyebrow {
        font-family: var(--font-helvetica-now, sans-serif); font-size: 11px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-graphite, #595855); margin: 0 0 10px 0;
    }
    .ct-heading {
        font-family: var(--font-davinci, serif); font-size: clamp(28px, 3.6vw, 44px); font-weight: 500;
        line-height: 1.12; letter-spacing: -0.01em; color: var(--color-ink, #000); margin: 0;
    }

    .ct-grid {
        display: grid; grid-template-columns: 0.85fr 1.15fr;
        max-width: 1160px; margin: 0 auto;
        border: 1px solid var(--color-vellum, #dfdcd5); border-radius: 16px; overflow: hidden;
        background-color: var(--color-paper, #fff);
    }

    /* ---------- Company info (light, art behind) ---------- */
    .ct-info {
        position: relative; overflow: hidden;
        background-color: var(--color-bone, #e7e5e4);
        padding: 48px 40px;
        display: flex; flex-direction: column;
    }
    .ct-info__art { position: absolute; z-index: 1; pointer-events: none; }
    .ct-info__art--1 {
        top: 50%; left: 50%; transform: translate(-50%, -50%);
        height: 90%; width: auto; opacity: 0.10;   /* centered, faint watermark so text stays readable */
    }
    .ct-info__inner { position: relative; z-index: 2; }
    .ct-info__title {
        font-family: var(--font-davinci, serif); font-size: 26px; font-weight: 500;
        color: var(--color-ink, #000); margin: 0 0 10px 0;
    }
    .ct-info__sub {
        font-family: var(--font-helvetica-now, sans-serif); font-size: 14px; line-height: 1.6;
        color: var(--color-graphite, #595855); margin: 0 0 28px 0; max-width: 300px;
    }
    .ct-info__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; }
    .ct-info__list li { display: flex; align-items: flex-start; gap: 14px; }
    .ct-info__ic {
        flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        background-color: var(--color-paper, #fff); border: 1px solid var(--color-vellum, #dfdcd5);
        color: var(--color-ink, #000); font-size: 14px;
    }
    .ct-info__label {
        display: block; font-family: var(--font-helvetica-now, sans-serif);
        font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
        color: var(--color-graphite, #595855); margin-bottom: 3px;
    }
    .ct-info__list a, .ct-info__list div > span:last-child {
        font-family: var(--font-helvetica-now, sans-serif); font-size: 14px;
        color: var(--color-ink, #000); text-decoration: none; word-break: break-word;
    }
    .ct-info__list a:hover { text-decoration: underline; }

    /* ---------- Form (dark, video behind) ---------- */
    .ct-form { position: relative; overflow: hidden; background-color: var(--color-ink, #000); }
    .ct-form__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 1; filter: grayscale(0.2) contrast(1.02); }
    .ct-form__veil { position: absolute; inset: 0; z-index: 2; background: rgba(0, 0, 0, 0.62); pointer-events: none; }
    .ct-form__inner { position: relative; z-index: 3; padding: 44px 40px; }
    .ct-form__title {
        font-family: var(--font-davinci, serif); font-size: 26px; font-weight: 500;
        color: var(--color-paper, #fff); margin: 0 0 26px 0;
    }

    .ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    .ct-field { margin-bottom: 16px; }
    .ct-label {
        display: flex; align-items: center; gap: 7px;
        font-family: var(--font-helvetica-now, sans-serif); font-size: 11px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.75); margin-bottom: 7px;
    }
    .ct-label i { font-size: 11px; color: rgba(255, 255, 255, 0.55); }
    .ct-input {
        width: 100%; box-sizing: border-box;
        background-color: var(--color-paper, #fff);
        border: 1px solid var(--color-vellum, #dfdcd5);
        border-radius: 9px; padding: 12px 14px;
        font-family: var(--font-helvetica-now, sans-serif); font-size: 14px; color: var(--color-ink, #000);
        outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .ct-input::placeholder { color: #9a9a92; }
    .ct-input:focus { border-color: var(--color-ink, #000); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25); }
    .ct-input.is-invalid { border-color: #d98a8a; box-shadow: 0 0 0 3px rgba(217, 138, 138, 0.25); }
    .ct-textarea { resize: vertical; min-height: 110px; }

    /* Validation message — always directly below its input */
    .ct-error {
        display: flex; align-items: center; gap: 6px; margin-top: 7px;
        font-family: var(--font-helvetica-now, sans-serif); font-size: 12.5px; line-height: 1.4;
        color: #f0a9a9;
    }
    .ct-error i { font-size: 11px; }

    /* Captcha */
    .ct-captcha { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
    .ct-captcha__img { display: flex; align-items: center; }
    .ct-captcha__img img {
        height: 46px; width: auto; border-radius: 9px;
        border: 1px solid var(--color-vellum, #dfdcd5); background: var(--color-paper, #fff);
    }

    .ct-submit {
        width: 100%; margin-top: 8px;
        display: inline-flex; align-items: center; justify-content: center; gap: 10px;
        font-family: var(--font-helvetica-now, sans-serif); font-size: 13px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.05em;
        background-color: var(--color-paper, #fff); color: var(--color-ink, #000);
        border: 1px solid var(--color-paper, #fff); border-radius: 28.8px;
        padding: 15px 24px; cursor: pointer; transition: opacity 0.2s ease;
    }
    .ct-submit:hover { opacity: 0.88; }

    @media (max-width: 900px) {
        .ct-section { padding: 60px 20px; }
        .ct-grid { grid-template-columns: 1fr; }
        .ct-info { padding: 40px 28px; }
        .ct-info__art--1 { height: auto; width: 72%; left: 50%; right: auto; top: 50%; transform: translate(-50%, -50%); opacity: 0.08; }
        .ct-form__inner { padding: 36px 28px; }
    }
    @media (max-width: 560px) {
        .ct-row { grid-template-columns: 1fr; gap: 0; }
        .ct-captcha { grid-template-columns: 1fr; }
        .ct-captcha__img { justify-content: flex-start; }
    }


/* ========================================================= */
/* CSS FROM: coursecart.blade.php */
/* ========================================================= */

/* =========================================================
       COURSE / CREDITS CART — Structured theme
       ========================================================= */
    .cc-section { background-color: var(--color-putty, #c4c3b6); padding: 72px 40px; }
    .cc-container { max-width: 1160px; margin: 0 auto; }

    /* Credits balance bar */
    .cc-balance {
        display: flex; align-items: center; gap: 16px;
        background-color: var(--color-ink, #000); color: var(--color-paper, #fff);
        border-radius: 14px; padding: 20px 26px; margin-bottom: 24px;
    }
    .cc-balance__icon {
        width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        background-color: rgba(255, 255, 255, 0.12); color: var(--color-paper, #fff); font-size: 18px;
    }
    .cc-balance__label { display: block; font-family: var(--font-helvetica-now, sans-serif); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.6); margin-bottom: 2px; }
    .cc-balance__amount { font-family: var(--font-davinci, serif); font-size: 26px; font-weight: 500; color: var(--color-paper, #fff); }
    .cc-balance__amount small { font-family: var(--font-helvetica-now, sans-serif); font-size: 12px; color: rgba(255, 255, 255, 0.6); }

    .cc-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 28px; align-items: start; }

    .cc-items { background-color: var(--color-paper, #fff); border: 1px solid var(--color-vellum, #dfdcd5); border-radius: 14px; padding: 30px; }
    .cc-h { font-family: var(--font-davinci, serif); font-size: 20px; font-weight: 500; color: var(--color-ink, #000); margin: 0 0 20px 0; display: flex; align-items: center; gap: 10px; }
    .cc-h i { font-size: 15px; }

    /* NEW card design — horizontal thumbnail card */
    .cc-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .cc-card {
        position: relative; display: flex; gap: 16px; padding: 16px;
        background-color: var(--color-paper, #fff); border: 1px solid var(--color-vellum, #dfdcd5);
        border-radius: 12px; transition: transform 0.3s ease, border-color 0.2s ease;
    }
    .cc-card:hover { transform: translateY(-4px); border-color: var(--color-graphite, #595855); }
    .cc-card__remove {
        position: absolute; top: 10px; right: 10px; z-index: 2;
        width: 28px; height: 28px; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        background-color: var(--color-paper, #fff); border: 1px solid var(--color-vellum, #dfdcd5);
        color: var(--color-graphite, #595855); font-size: 12px; transition: all 0.2s ease;
    }
    .cc-card__remove:hover { background-color: var(--color-ink, #000); color: var(--color-paper, #fff); border-color: var(--color-ink, #000); }
    .cc-card__img { width: 92px; height: 92px; flex-shrink: 0; overflow: hidden; border: 1px solid var(--color-vellum, #dfdcd5); border-radius: 9px; background-color: var(--color-bone, #e7e5e4); }
    .cc-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .cc-card__body { flex: 1 1 auto; min-width: 0; padding-right: 20px; }
    .cc-card__title {
        display: block; font-family: var(--font-helvetica-now, sans-serif); font-size: 14px; font-weight: 600;
        color: var(--color-ink, #000); text-decoration: none; line-height: 1.35; margin-bottom: 8px; word-break: break-word;
    }
    .cc-card__title:hover { text-decoration: underline; }
    .cc-card__pill {
        display: inline-flex; align-items: center; gap: 6px;
        font-family: var(--font-helvetica-now, sans-serif); font-size: 10px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-ink, #000);
        background-color: var(--color-bone, #e7e5e4); border: 1px solid var(--color-vellum, #dfdcd5);
        border-radius: 28.8px; padding: 4px 10px; margin-bottom: 12px;
    }
    .cc-card__cost { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
    .cc-card__credits, .cc-card__price { font-family: var(--font-helvetica-now, sans-serif); font-size: 15px; font-weight: 700; color: var(--color-ink, #000); }
    .cc-card__credits i { color: var(--color-graphite, #595855); margin-right: 3px; }
    .cc-card__sub { font-family: var(--font-helvetica-now, sans-serif); font-size: 12px; color: var(--color-graphite, #595855); }

    /* Summary */
    .cc-summary { position: sticky; top: 96px; background-color: var(--color-paper, #fff); border: 1px solid var(--color-vellum, #dfdcd5); border-radius: 14px; padding: 28px; }
    .cc-summary__h { font-family: var(--font-davinci, serif); font-size: 20px; font-weight: 500; color: var(--color-ink, #000); margin: 0 0 20px 0; display: flex; align-items: center; gap: 10px; }
    .cc-summary__h i { font-size: 15px; }
    .cc-summary__row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; font-family: var(--font-helvetica-now, sans-serif); font-size: 14px; color: var(--color-graphite, #595855); border-bottom: 1px solid var(--color-vellum, #dfdcd5); }
    .cc-summary__row span:last-child { color: var(--color-ink, #000); font-weight: 600; }
    .cc-summary__total { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0 22px 0; }
    .cc-summary__total .lbl { font-family: var(--font-helvetica-now, sans-serif); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-graphite, #595855); }
    .cc-summary__total .amt { font-family: var(--font-davinci, serif); font-size: 26px; font-weight: 500; color: var(--color-ink, #000); }
    .cc-summary__total .amt small { font-family: var(--font-helvetica-now, sans-serif); font-size: 12px; color: var(--color-graphite, #595855); }
    .cc-summary__empty { text-align: center; padding: 20px 0; }
    .cc-summary__empty i { font-size: 24px; color: var(--color-graphite, #595855); opacity: 0.4; margin-bottom: 10px; }
    .cc-summary__empty p { font-family: var(--font-helvetica-now, sans-serif); font-size: 14px; color: var(--color-graphite, #595855); margin: 0; }

    /* Buttons */
    .cc-btn {
        display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box;
        font-family: var(--font-helvetica-now, sans-serif); font-size: 12.5px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.05em;
        border-radius: 28.8px; padding: 14px; text-decoration: none; cursor: pointer; border: 1px solid transparent;
        transition: opacity 0.2s ease, background-color 0.2s ease;
    }
    .cc-btn--primary { background-color: var(--color-ink, #000); color: var(--color-paper, #fff); border-color: var(--color-ink, #000); margin-bottom: 12px; }
    .cc-btn--primary:hover { opacity: 0.85; color: var(--color-paper, #fff); }
    .cc-btn--ghost { background-color: transparent; color: var(--color-ink, #000); border-color: var(--color-vellum, #dfdcd5); }
    .cc-btn--ghost:hover { background-color: var(--color-bone, #e7e5e4); color: var(--color-ink, #000); }

    /* Empty / sign-in */
    .cc-empty { text-align: center; padding: 56px 20px; }
    .cc-empty i { font-size: 44px; color: var(--color-graphite, #595855); opacity: 0.35; margin-bottom: 18px; }
    .cc-empty h3 { font-family: var(--font-davinci, serif); font-size: 22px; font-weight: 500; color: var(--color-ink, #000); margin: 0 0 8px 0; }
    .cc-empty p { font-family: var(--font-helvetica-now, sans-serif); font-size: 14px; color: var(--color-graphite, #595855); margin: 0 0 22px 0; }
    .cc-empty__btn, .cc-signin__btn { width: auto; display: inline-flex; padding: 13px 26px; }

    .cc-signin {
        max-width: 560px; margin: 0 auto; text-align: center;
        background-color: var(--color-paper, #fff); border: 1px solid var(--color-vellum, #dfdcd5);
        border-radius: 14px; padding: 72px 40px;
    }
    .cc-signin i { font-size: 44px; color: var(--color-graphite, #595855); opacity: 0.4; margin-bottom: 20px; }
    .cc-signin h3 { font-family: var(--font-davinci, serif); font-size: 24px; font-weight: 500; color: var(--color-ink, #000); margin: 0 0 8px 0; }
    .cc-signin p { font-family: var(--font-helvetica-now, sans-serif); font-size: 14px; color: var(--color-graphite, #595855); margin: 0 auto 24px auto; max-width: 380px; }

    @media (max-width: 900px) {
        .cc-section { padding: 48px 20px; }
        .cc-grid { grid-template-columns: 1fr; gap: 20px; }
        .cc-summary { position: static; }
    }
    @media (max-width: 560px) {
        .cc-items { padding: 22px; }
        .cc-cards { grid-template-columns: 1fr; }
    }


/* ========================================================= */
/* CSS FROM: page.blade.php */
/* ========================================================= */

/* =========================================================
       CMS PAGE — Structured theme + rich-text ("prose") styling
       Works for EN & JA content coming raw from the database.
       ========================================================= */
    .page-section { background-color: var(--color-putty, #c4c3b6); padding: 72px 40px; }
    .page-container { max-width: 920px; margin: 0 auto; }
    .page-card {
        background-color: var(--color-paper, #fff);
        border: 1px solid var(--color-vellum, #dfdcd5);
        border-radius: 14px; padding: 52px 56px; box-shadow: none;
    }

    /* ---------- Base text ---------- */
    .page-prose {
        font-family: var(--font-helvetica-now, sans-serif);
        font-size: 15.5px; line-height: 1.85; color: #2c2c29;
    }
    .page-prose > *:first-child { margin-top: 0 !important; }
    .page-prose > *:last-child { margin-bottom: 0 !important; }

    /* ---------- Headings (serif) ---------- */
    .page-prose h1, .page-prose h2, .page-prose h3,
    .page-prose h4, .page-prose h5, .page-prose h6 {
        font-family: var(--font-davinci, serif);
        color: var(--color-ink, #000); font-weight: 500;
        line-height: 1.2; letter-spacing: -0.01em;
        margin: 2.4rem 0 1rem 0;
    }
    .page-prose h1 { font-size: clamp(28px, 3.4vw, 36px); padding-bottom: 0.7rem; border-bottom: 1px solid var(--color-vellum, #dfdcd5); }
    .page-prose h2 { font-size: 26px; }
    .page-prose h3 { font-size: 21px; }
    .page-prose h4 { font-size: 18px; font-family: var(--font-helvetica-now, sans-serif); font-weight: 700; }
    .page-prose h5, .page-prose h6 { font-size: 15px; font-family: var(--font-helvetica-now, sans-serif); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-graphite, #595855); }

    /* ---------- Paragraphs & inline ---------- */
    .page-prose p { margin: 0 0 1.3rem 0; }
    .page-prose a { color: var(--color-ink, #000); text-decoration: underline; text-underline-offset: 2px; }
    .page-prose a:hover { color: var(--color-graphite, #595855); }
    .page-prose strong, .page-prose b { color: var(--color-ink, #000); font-weight: 700; }
    .page-prose em, .page-prose i { font-style: italic; }
    .page-prose small { font-size: 0.85em; color: var(--color-graphite, #595855); }
    .page-prose mark { background-color: var(--color-bone, #e7e5e4); color: var(--color-ink, #000); padding: 1px 4px; border-radius: 3px; }

    /* ---------- Lists ---------- */
    .page-prose ul, .page-prose ol { margin: 0 0 1.4rem 0; padding-left: 1.6rem; }
    .page-prose ul { list-style: disc; }
    .page-prose ol { list-style: decimal; }
    .page-prose li { margin-bottom: 0.55rem; padding-left: 0.25rem; }
    .page-prose li::marker { color: var(--color-graphite, #595855); }

    /* Numbered sections (ol > li > h3): render the number INSIDE the heading so the
       number's size/weight/font exactly match the heading (e.g. "3. Cookies and Tracking…") */
    .page-prose ol:has(> li > h3) { list-style: none; padding-left: 0; counter-reset: sec; }
    .page-prose ol:has(> li > h3) > li { counter-increment: sec; padding-left: 0; }
    .page-prose ol:has(> li > h3) > li > h3:first-child::before { content: counter(sec) ". "; }
    .page-prose ul ul, .page-prose ol ol, .page-prose ul ol, .page-prose ol ul { margin: 0.5rem 0 0.5rem 0; }
    .page-prose li > p { margin-bottom: 0.5rem; }
    .page-prose li > h2, .page-prose li > h3, .page-prose li > h4 { margin-top: 0.4rem; }

    /* ---------- Blockquote ---------- */
    .page-prose blockquote {
        margin: 1.6rem 0; padding: 8px 0 8px 22px;
        border-left: 3px solid var(--color-ink, #000);
        color: var(--color-graphite, #595855); font-style: italic;
    }
    .page-prose blockquote p:last-child { margin-bottom: 0; }

    /* ---------- Horizontal rule ---------- */
    .page-prose hr { border: none; border-top: 1px solid var(--color-vellum, #dfdcd5); margin: 2.2rem 0; }

    /* ---------- Images ---------- */
/*     .page-prose img { max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--color-vellum, #dfdcd5); margin: 1.2rem 0; }
 */    /* inline logo (e.g. billing descriptor) that flows within a sentence */
    .page-prose img.dba-inline { display: inline-block; height: 1.7em; width: auto; vertical-align: middle; border: none !important; border-radius: 0; }
    /* DBA inside the info table cell: sized to the cell text, no border, no extra space */
    .page-prose td img.dba-inline { height: 1.7em; margin: 0; }

    /* ---------- Code ---------- */
    .page-prose code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.88em; background-color: var(--color-bone, #e7e5e4); padding: 2px 6px; border-radius: 5px; color: var(--color-ink, #000); }
    .page-prose pre { background-color: var(--color-bone, #e7e5e4); border: 1px solid var(--color-vellum, #dfdcd5); border-radius: 9px; padding: 16px 18px; overflow-x: auto; margin: 1.4rem 0; }
    .page-prose pre code { background: none; padding: 0; }

    /* ---------- Tables (flat, hairline) ---------- */
    .page-prose table {
        width: 100%; border-collapse: collapse; margin: 2rem 0;
        border: 1px solid var(--color-vellum, #dfdcd5);
        font-family: var(--font-helvetica-now, sans-serif); font-size: 14px;
    }
    .page-prose thead, .page-prose table th { background-color: var(--color-bone, #e7e5e4); }
    .page-prose th {
        text-align: left; padding: 14px 16px;
        font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
        color: var(--color-ink, #000); border: 1px solid var(--color-vellum, #dfdcd5); white-space: nowrap;
    }
    .page-prose td { padding: 13px 16px; border: 1px solid var(--color-vellum, #dfdcd5); color: var(--color-ink, #000); line-height: 1.6; vertical-align: top; }
    .page-prose tbody tr:nth-child(even) { background-color: rgba(0, 0, 0, 0.02); }
    .page-prose table strong { background: none; padding: 0; }

    /* ---------- Responsive ---------- */
    @media (max-width: 768px) {
        .page-section { padding: 48px 20px; }
        .page-card { padding: 32px 24px; }
        .page-prose { font-size: 14.5px; }
        .page-prose h1 { font-size: 26px; }
        .page-prose h2 { font-size: 22px; }
        .page-prose h3 { font-size: 19px; }
    }
    @media (max-width: 640px) {
        /* let wide tables scroll horizontally instead of breaking the layout */
        .page-prose table { display: block; overflow-x: auto; white-space: nowrap; }
    }


/* ========================================================= */
/* CSS FROM: product-lists.blade.php */
/* ========================================================= */

/* =========================================================
       PRODUCT LISTS — Structured theme
       ========================================================= */
    .pl-container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
    .pl-eyebrow {
        font-family: var(--font-helvetica-now, sans-serif); font-size: 11px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-graphite, #595855); margin: 0 0 10px 0;
    }

    .pl-section { background-color: var(--color-putty, #c4c3b6); padding: 80px 0; }
    .pl-layout--split { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 40px; align-items: stretch; }
    .pl-catcol { position: relative; }

    /* Category image with hover overlay (JS makes it follow the scroll) */
    .pl-catfig {
        position: relative; margin: 0; box-sizing: border-box;
        aspect-ratio: 1 / 1; overflow: hidden;
        border: 1px solid var(--color-vellum, #dfdcd5); border-radius: 14px;
        background-color: var(--color-bone, #e7e5e4);
    }
    .pl-catfig img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
    .pl-catfig:hover img { transform: scale(1.05); }
    .pl-catfig__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--color-graphite, #595855); opacity: 0.4; font-size: 44px; }
    .pl-catfig__overlay {
        position: absolute; inset: 0; z-index: 30;
        display: flex; flex-direction: column; justify-content: flex-end;
        padding: 28px; text-align: left;
        background: rgba(0, 0, 0, 0.55);
        opacity: 0; transition: opacity 0.4s ease;
    }
    .pl-catfig:hover .pl-catfig__overlay { opacity: 1; }
    .pl-catfig__title {
        font-family: var(--font-davinci, serif); font-size: 30px; font-weight: 500; line-height: 1.1;
        color: var(--color-paper, #fff); margin: 0 0 12px 0;
        transform: translateY(10px); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .pl-catfig__summary {
        font-family: var(--font-helvetica-now, sans-serif); font-size: 14px; line-height: 1.6;
        color: rgba(255, 255, 255, 0.85); margin: 0;
        transform: translateY(10px); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;
    }
    .pl-catfig:hover .pl-catfig__title,
    .pl-catfig:hover .pl-catfig__summary { transform: translateY(0); }
    @media (hover: none) {
        .pl-catfig__overlay { opacity: 1; }
        .pl-catfig__title, .pl-catfig__summary { transform: none; }
    }

    /* Products */
    .pl-head { margin-bottom: 32px; }
    .pl-head--center { text-align: center; max-width: 620px; margin-left: auto; margin-right: auto; margin-bottom: 44px; }
    .pl-head__title {
        font-family: var(--font-davinci, serif); font-size: clamp(24px, 3vw, 38px); font-weight: 500;
        line-height: 1.1; letter-spacing: -0.01em; color: var(--color-ink, #000); margin: 0 0 8px 0;
    }
    .pl-head__sub { font-family: var(--font-helvetica-now, sans-serif); font-size: 15px; color: var(--color-graphite, #595855); margin: 0; }

    .pl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .pl-layout--split .pl-grid { grid-template-columns: repeat(2, 1fr); }
    .pl-card {
        display: flex; flex-direction: column; text-decoration: none; overflow: hidden;
        background-color: var(--color-paper, #fff);
        border: 1px solid var(--color-vellum, #dfdcd5); border-radius: 12px;
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .pl-card:hover { transform: translateY(-6px); }
    .pl-card__img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background-color: var(--color-bone, #e7e5e4); }
    .pl-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
    .pl-card:hover .pl-card__img img { transform: scale(1.06); }
    .pl-card__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--color-graphite, #595855); opacity: 0.4; font-size: 34px; }
    .pl-card__body { 
        display: flex; 
        flex-direction: column; 
        align-items: flex-start; 
        padding: 22px 24px; 
    }
    .pl-card__title { 
        font-family: var(--font-davinci, serif); 
        font-size: 20px; 
        font-weight: 500; 
        line-height: 1.25; 
        color: var(--color-ink, #000); 
        margin: 0 0 6px 0; 
    }
    .pl-card__link { 
        display: inline-flex; 
        align-items: center; 
        justify-content: space-between;
        width: 100%;
        margin-top: 18px;
        padding-top: 14px;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        color: var(--color-ink, #000); 
        font-size: 12px; 
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        transition: color 0.3s ease;
    }
    .pl-card__link i { 
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease; 
        font-size: 14px;
        color: var(--color-graphite, #595855);
    }
    .pl-card:hover .pl-card__link {
        color: var(--color-graphite, #595855);
    }
    .pl-card:hover .pl-card__link i { 
        transform: translateX(6px); 
        color: var(--color-ink, #000);
    }

    .pl-empty { text-align: center; padding: 60px 20px; }
    .pl-empty i { font-size: 42px; color: var(--color-graphite, #595855); opacity: 0.35; margin-bottom: 16px; }
    .pl-empty p, .pl-empty__text { font-family: var(--font-helvetica-now, sans-serif); font-size: 15px; color: var(--color-graphite, #595855); margin: 0; }

    /* Pagination */
    .pl-pagination { margin-top: 44px; display: flex; justify-content: center; }
    .pl-pagination nav > p { display: none; }
    .pl-pagination .pagination { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
    .pl-pagination a, .pl-pagination span, .pl-pagination .page-link {
        display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px;
        font-family: var(--font-helvetica-now, sans-serif); font-size: 13px; text-decoration: none;
        color: var(--color-ink, #000); background-color: var(--color-paper, #fff);
        border: 1px solid var(--color-vellum, #dfdcd5); border-radius: 9px; transition: background-color 0.2s ease;
    }
    .pl-pagination a:hover, .pl-pagination .page-link:hover { background-color: var(--color-bone, #e7e5e4); }
    .pl-pagination .active span, .pl-pagination .active .page-link, .pl-pagination [aria-current] span {
        background-color: var(--color-ink, #000); color: var(--color-paper, #fff); border-color: var(--color-ink, #000);
    }
    .pl-pagination .disabled span, .pl-pagination [aria-disabled] span { opacity: 0.45; }
    .pl-pagination svg { width: 16px; height: 16px; }

    /* Other categories — carousel */
    .pl-cats { background-color: var(--color-bone, #e7e5e4); padding: 80px 0; }
    .pl-carousel { position: relative; max-width: 1280px; margin: 0 auto; padding: 0 56px; }
    .pl-track {
        display: flex; gap: 20px; overflow-x: auto;
        scroll-snap-type: x mandatory; scroll-behavior: smooth;
        padding: 4px 4px 10px 4px; scrollbar-width: none; -ms-overflow-style: none;
    }
    .pl-track::-webkit-scrollbar { display: none; }
    .pl-slide { flex: 0 0 auto; width: 240px; scroll-snap-align: start; text-decoration: none; }
    .pl-slide__img {
        position: relative; aspect-ratio: 4 / 5; overflow: hidden;
        border: 1px solid var(--color-vellum, #dfdcd5); border-radius: 12px; background-color: var(--color-putty, #c4c3b6);
    }
    .pl-slide__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
    .pl-slide:hover .pl-slide__img img { transform: scale(1.06); }
    .pl-slide__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--color-graphite, #595855); opacity: 0.4; font-size: 30px; }
    .pl-slide__title { font-family: var(--font-davinci, serif); font-size: 16px; font-weight: 500; color: var(--color-ink, #000); text-align: center; margin: 14px 4px 0 4px; }

    .pl-nav {
        position: absolute; top: 42%; transform: translateY(-50%);
        width: 44px; height: 44px; border-radius: 50%;
        background-color: var(--color-paper, #fff); border: 1px solid var(--color-vellum, #dfdcd5);
        color: var(--color-ink, #000); display: flex; align-items: center; justify-content: center;
        font-size: 14px; cursor: pointer; z-index: 3; transition: background-color 0.2s ease;
    }
    .pl-nav:hover { background-color: var(--color-bone, #e7e5e4); }
    .pl-nav--prev { left: 6px; }
    .pl-nav--next { right: 6px; }

    @media (max-width: 992px) {
        .pl-grid, .pl-layout--split .pl-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 768px) {
        .pl-container { padding: 0 20px; }
        .pl-section, .pl-cats { padding: 56px 0; }
        .pl-layout--split { grid-template-columns: 1fr; gap: 28px; }
        .pl-catfig { position: static; aspect-ratio: 1 / 1; }
        .pl-carousel { padding: 0 20px; }
        .pl-slide { width: 180px; }
        .pl-nav { display: none; }
    }
    @media (max-width: 560px) {
        .pl-grid, .pl-layout--split .pl-grid { grid-template-columns: 1fr; }
    }


/* ========================================================= */
/* CSS FROM: product_detail.blade.php */
/* ========================================================= */

/* =========================================================
       PRODUCT DETAIL — Structured theme
       ========================================================= */
    .pd-section { background-color: var(--color-putty, #c4c3b6); padding: 72px 0; }
    .pd-container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
    .pd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }

    /* Gallery */
    .pd-gallery__main {
        aspect-ratio: 4 / 5; overflow: hidden;
        border: 1px solid var(--color-vellum, #dfdcd5); border-radius: 14px; background-color: var(--color-bone, #e7e5e4);
    }
    .pd-gallery__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .pd-gallery__thumbs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
    .pd-thumb {
        width: 72px; height: 72px; padding: 0; overflow: hidden; cursor: pointer;
        border: 1px solid var(--color-vellum, #dfdcd5); border-radius: 9px; background: var(--color-bone, #e7e5e4);
        transition: border-color 0.2s ease;
    }
    .pd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .pd-thumb.active, .pd-thumb:hover { border-color: var(--color-ink, #000); }

    /* Info */
    .pd-eyebrow {
        font-family: var(--font-helvetica-now, sans-serif); font-size: 11px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-graphite, #595855); margin: 0 0 12px 0;
    }
    .pd-title {
        font-family: var(--font-davinci, serif); font-size: clamp(30px, 4vw, 48px); font-weight: 500;
        line-height: 1.08; letter-spacing: -0.02em; color: var(--color-ink, #000); margin: 0 0 24px 0;
    }
    .pd-overview { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--color-vellum, #dfdcd5); }
    .pd-overview__label {
        display: block; font-family: var(--font-helvetica-now, sans-serif); font-size: 11px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-graphite, #595855); margin-bottom: 10px;
    }
    .pd-overview__text { font-family: var(--font-helvetica-now, sans-serif); font-size: 15px; line-height: 1.8; color: var(--color-ink, #000); margin: 0; }

    /* Levels */
    .pd-levels__label {
        display: block; font-family: var(--font-helvetica-now, sans-serif); font-size: 11px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-graphite, #595855); margin-bottom: 12px;
    }
    .pd-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
    .pd-tab {
        font-family: var(--font-helvetica-now, sans-serif); font-size: 12px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.05em;
        color: var(--color-ink, #000); background-color: transparent;
        border: 1px solid var(--color-vellum, #dfdcd5); border-radius: 28.8px;
        padding: 10px 20px; cursor: pointer; transition: all 0.2s ease;
    }
    .pd-tab:hover { background-color: var(--color-bone, #e7e5e4); }
    .pd-tab.active { background-color: var(--color-ink, #000); color: var(--color-paper, #fff); border-color: var(--color-ink, #000); }

    .pd-level__concept { background-color: var(--color-bone, #e7e5e4); border: 1px solid var(--color-vellum, #dfdcd5); border-radius: 10px; padding: 20px 22px; margin-bottom: 22px; }
    .pd-level__concept-label {
        display: inline-flex; align-items: center; gap: 7px;
        font-family: var(--font-helvetica-now, sans-serif); font-size: 10px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-graphite, #595855); margin-bottom: 10px;
    }
    .pd-level__concept-label i { color: var(--color-ink, #000); }
    .pd-level__purpose { font-family: var(--font-helvetica-now, sans-serif); font-size: 14px; line-height: 1.7; color: var(--color-ink, #000); margin: 0; }

    /* Learning panel — Learn info / Purpose / Outcome */
    .pd-learn {
        border: 1px solid var(--color-vellum, #dfdcd5); border-radius: 14px;
        background-color: var(--color-paper, #fff); overflow: hidden; margin-bottom: 24px;
    }
    .pd-learn__row { display: flex; align-items: flex-start; gap: 16px; padding: 20px 22px; transition: background-color 0.2s ease; }
    .pd-learn__row + .pd-learn__row { border-top: 1px solid var(--color-vellum, #dfdcd5); }
    .pd-learn__row:hover { background-color: var(--color-bone, #e7e5e4); }
    .pd-learn__icon {
        flex-shrink: 0; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
        border-radius: 50%; background-color: var(--color-ink, #000); color: var(--color-paper, #fff); font-size: 15px;
    }
    .pd-learn__body { flex: 1 1 auto; min-width: 0; }
    .pd-learn__label {
        display: block; font-family: var(--font-helvetica-now, sans-serif); font-size: 10px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-graphite, #595855); margin-bottom: 6px;
    }
    .pd-learn__text { font-family: var(--font-helvetica-now, sans-serif); font-size: 14px; line-height: 1.7; color: var(--color-ink, #000); margin: 0; }

    .pd-buybar {
        display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
        padding: 20px 24px; border: 1px solid var(--color-vellum, #dfdcd5); border-radius: 12px; background-color: var(--color-paper, #fff);
    }
    .pd-price__label { display: block; font-family: var(--font-helvetica-now, sans-serif); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-graphite, #595855); margin-bottom: 4px; }
    .pd-price__amt { font-family: var(--font-davinci, serif); font-size: 30px; font-weight: 500; color: var(--color-ink, #000); line-height: 1; }
    .pd-price__amt small { font-family: var(--font-helvetica-now, sans-serif); font-size: 13px; font-weight: 500; color: var(--color-graphite, #595855); }
    .pd-buyform { flex: 1 1 200px; }
    .pd-buy {
        width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
        font-family: var(--font-helvetica-now, sans-serif); font-size: 13px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.05em;
        background-color: var(--color-ink, #000); color: var(--color-paper, #fff);
        border: 1px solid var(--color-ink, #000); border-radius: 28.8px;
        padding: 15px 24px; cursor: pointer; transition: opacity 0.2s ease;
    }
    .pd-buy:hover { opacity: 0.85; }
    .pd-buy .icon-arrow { transition: transform 0.3s ease; }
    .pd-buy:hover .icon-arrow { transform: translateX(4px); }

    @media (max-width: 900px) {
        .pd-section { padding: 48px 0; }
        .pd-container { padding: 0 20px; }
        .pd-grid { grid-template-columns: 1fr; gap: 32px; }
        .pd-learn__row { padding: 16px; gap: 13px; }
        .pd-learn__icon { width: 38px; height: 38px; font-size: 14px; }
    }


/* ========================================================= */
/* CSS FROM: topup.blade.php */
/* ========================================================= */

/* =========================================================
       TOP-UP — Structured theme (tier cards + calculator)
       ========================================================= */
    .points-topup-section { background-color: var(--color-putty, #c4c3b6); padding: 84px 40px; }
    .topup-head { text-align: center; margin-bottom: 48px; }
    .topup-eyebrow {
        font-family: var(--font-helvetica-now, sans-serif); font-size: 11px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-graphite, #595855); margin: 0 0 10px 0;
    }
    .topup-heading {
        font-family: var(--font-davinci, serif); font-size: clamp(28px, 3.5vw, 44px); font-weight: 500;
        color: var(--color-ink, #000); letter-spacing: -0.01em; line-height: 1.1; margin: 0 0 14px 0;
    }
    .topup-sub {
        font-family: var(--font-helvetica-now, sans-serif); font-size: 15px; line-height: 1.6;
        color: var(--color-graphite, #595855); max-width: 560px; margin: 0 auto;
    }
    .topup-layout { max-width: 1200px; margin: 0 auto; }

    /* Tier pricing cards */
    .tier-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }
    .tier-card {
        position: relative; display: flex; flex-direction: column;
        background-color: var(--color-ink, #000); border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 14px; padding: 28px 24px; box-shadow: none;
    }
    .tier-card--featured { border-color: var(--color-paper, #fff); border-width: 1.5px; }
    .tier-card__flag {
        position: absolute; top: -11px; right: 18px;
        background-color: var(--color-paper, #fff); color: var(--color-ink, #000);
        font-family: var(--font-helvetica-now, sans-serif); font-size: 10px; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 12px; border-radius: 28.8px;
    }
    .tier-card__icon {
        width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%;
        display: flex; align-items: center; justify-content: center; color: var(--color-paper, #fff); font-size: 16px; margin-bottom: 20px;
    }
    .tier-card__name { font-family: var(--font-davinci, serif); font-size: 22px; font-weight: 500; color: var(--color-paper, #fff); margin: 0 0 16px 0; }
    .tier-card__price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
    .tier-card__mult { font-family: var(--font-davinci, serif); font-size: 40px; font-weight: 500; line-height: 1; color: var(--color-paper, #fff); }
    .tier-card__per { font-family: var(--font-helvetica-now, sans-serif); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.55); }
    .tier-card__feats { list-style: none; padding: 0; margin: 0 0 24px 0; display: flex; flex-direction: column; gap: 12px; flex-grow: 1; }
    .tier-card__feats li { display: flex; align-items: center; gap: 10px; font-family: var(--font-helvetica-now, sans-serif); font-size: 13px; color: rgba(255, 255, 255, 0.8); line-height: 1.4; }
    .tier-card__feats li i { color: var(--color-paper, #fff); font-size: 13px; flex-shrink: 0; }
    .tier-card__btn {
        width: 100%; font-family: var(--font-helvetica-now, sans-serif); font-size: 12px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.05em; background-color: transparent; color: var(--color-paper, #fff);
        border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 28.8px; padding: 12px 18px; cursor: pointer; margin-top: auto;
    }
    .tier-card--featured .tier-card__btn { background-color: var(--color-paper, #fff); color: var(--color-ink, #000); border-color: var(--color-paper, #fff); }
    .tier-note { text-align: center; font-family: var(--font-helvetica-now, sans-serif); font-size: 12px; color: var(--color-graphite, #595855); margin: 24px auto 0 auto; max-width: 720px; }
    .calc-center { max-width: 560px; margin: 56px auto 0 auto; }

    /* Calculator (fresh ink-calc classes) */
    .calc-center .ink-calc { background-color: var(--color-paper, #fff); border: 1px solid var(--color-vellum, #dfdcd5); border-radius: 14px; padding: 30px; box-shadow: none; }
    .ink-calc__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--color-vellum, #dfdcd5); }
    .ink-calc__title { font-family: var(--font-davinci, serif); font-size: 22px; font-weight: 500; color: var(--color-ink, #000); margin: 0; }
    .ink-calc__tag { font-family: var(--font-helvetica-now, sans-serif); font-size: 13px; color: var(--color-graphite, #595855); margin: 4px 0 0 0; }
    .ink-calc__cur { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background-color: var(--color-ink, #000); color: var(--color-paper, #fff); display: flex; align-items: center; justify-content: center; font-family: var(--font-helvetica-now, sans-serif); font-size: 16px; font-weight: 600; }
    .ink-calc__label { display: block; font-family: var(--font-helvetica-now, sans-serif); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-graphite, #595855); margin-bottom: 8px; }
    .ink-calc__field { display: flex; align-items: center; background-color: var(--color-bone, #e7e5e4); border: 1px solid var(--color-vellum, #dfdcd5); border-radius: 9px; padding: 0 16px; margin-bottom: 22px; transition: border-color 0.2s ease; }
    .ink-calc__field:focus-within { border-color: var(--color-ink, #000); }
    .ink-calc__prefix { font-family: var(--font-helvetica-now, sans-serif); font-size: 20px; font-weight: 600; color: var(--color-graphite, #595855); margin-right: 8px; }
    .ink-calc__input { flex: 1; width: 100%; border: none; outline: none; background: transparent; font-family: var(--font-helvetica-now, sans-serif); font-size: 26px; font-weight: 500; color: var(--color-ink, #000); padding: 14px 0; box-shadow: none; }
    .ink-calc__rows { background-color: var(--color-bone, #e7e5e4); border: 1px solid var(--color-vellum, #dfdcd5); border-radius: 9px; padding: 16px 18px; margin-bottom: 22px; }
    .ink-calc__row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; font-family: var(--font-helvetica-now, sans-serif); font-size: 13px; color: var(--color-graphite, #595855); }
    .ink-calc__row > span:last-child:not(.ink-calc__mult) { color: var(--color-ink, #000); font-weight: 600; }
    .ink-calc__mult { background-color: var(--color-ink, #000); color: var(--color-paper, #fff); padding: 2px 10px; border-radius: 28.8px; font-size: 12px; }
    .ink-calc__row--total { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--color-vellum, #dfdcd5); }
    .ink-calc__row--total > span { font-size: 15px; color: var(--color-ink, #000); font-weight: 700; }
    .ink-calc__display { background-color: var(--color-ink, #000); border-radius: 9px; padding: 22px; margin-bottom: 22px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
    .ink-calc__big { font-family: var(--font-davinci, serif); font-size: 44px; font-weight: 500; line-height: 1; color: var(--color-paper, #fff); }
    .ink-calc__unit { font-family: var(--font-helvetica-now, sans-serif); font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.6); }
    .ink-calc__benefits { list-style: none; padding: 0; margin: 0 0 22px 0; display: flex; flex-direction: column; gap: 10px; }
    .ink-calc__benefits li { display: flex; align-items: center; gap: 10px; font-family: var(--font-helvetica-now, sans-serif); font-size: 13px; color: var(--color-graphite, #595855); }
    .ink-calc__benefits li i { color: var(--color-ink, #000); font-size: 11px; }
    .calc-center .ink-calc .btn-premium-checkout {
        width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
        font-family: var(--font-helvetica-now, sans-serif); font-size: 13px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.05em;
        background: var(--color-ink, #000); background-color: var(--color-ink, #000); background-image: none;
        color: var(--color-paper, #fff); border: 1px solid var(--color-ink, #000); border-radius: 28.8px;
        padding: 15px 24px; cursor: pointer; box-shadow: none;
    }
    .calc-center .ink-calc .btn-premium-checkout:hover { opacity: 0.9; }
    .ink-calc__trust { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 0 0 0; font-family: var(--font-helvetica-now, sans-serif); font-size: 12px; color: var(--color-graphite, #595855); }
    .ink-calc__trust i { color: var(--color-ink, #000); }

    @media (max-width: 992px) { .tier-cards { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 560px) {
        .points-topup-section { padding: 56px 20px; }
        .tier-cards { grid-template-columns: 1fr; }
    }


/* ========================================================= */
/* CSS FROM: auth-style.blade.php */
/* ========================================================= */

/* =========================================================
       AUTH PAGES — Structured theme split card (brand aside + form)
       ========================================================= */
    .au-section { background-color: var(--color-putty, #c4c3b6); padding: 72px 40px; }
    .au-card {
        display: grid; grid-template-columns: 0.9fr 1.1fr;
        max-width: 1040px; margin: 0 auto;
        background-color: var(--color-paper, #fff);
        border: 1px solid var(--color-vellum, #dfdcd5);
        border-radius: 16px; overflow: hidden;
    }

    /* Branding aside (ink room, i9.webp art behind) */
    .au-aside {
        position: relative; overflow: hidden;
        background-color: var(--color-ink, #000);
        padding: 48px 40px; display: flex; flex-direction: column; justify-content: center;
    }
    .au-aside__art {
        position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
        height: 94%; width: auto; z-index: 1;
        opacity: 0.16; pointer-events: none;
        filter: brightness(0) invert(1);   /* black dragon -> soft white, centered watermark on the ink panel */
    }
    .au-aside__inner { position: relative; z-index: 2; }
    .au-aside__mark {
        display: inline-flex; align-items: center; justify-content: center;
        width: 48px; height: 48px; border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.3); color: var(--color-paper, #fff);
        font-size: 18px; margin-bottom: 22px;
    }
    .au-aside__title {
        font-family: var(--font-davinci, serif); font-size: 30px; font-weight: 500;
        color: var(--color-paper, #fff); line-height: 1.15; margin: 0 0 12px 0;
    }
    .au-aside__sub {
        font-family: var(--font-helvetica-now, sans-serif); font-size: 14px; line-height: 1.6;
        color: rgba(255, 255, 255, 0.65); margin: 0 0 24px 0; max-width: 300px;
    }
    .au-aside__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
    .au-aside__list li {
        display: flex; align-items: center; gap: 10px;
        font-family: var(--font-helvetica-now, sans-serif); font-size: 13px; color: rgba(255, 255, 255, 0.8);
    }
    .au-aside__list li i { color: var(--color-paper, #fff); font-size: 11px; }

    /* Form panel (paper) */
    .au-main { padding: 48px 44px; }
    .au-main__head { margin-bottom: 26px; }
    .au-eyebrow {
        font-family: var(--font-helvetica-now, sans-serif); font-size: 11px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.16em; color: var(--color-graphite, #595855); margin: 0 0 8px 0;
    }
    .au-title {
        font-family: var(--font-davinci, serif); font-size: clamp(26px, 3vw, 34px); font-weight: 500;
        color: var(--color-ink, #000); margin: 0; line-height: 1.1;
    }

    .au-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .au-field { margin-bottom: 16px; }
    .au-label {
        display: flex; align-items: center; gap: 7px;
        font-family: var(--font-helvetica-now, sans-serif); font-size: 11px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-graphite, #595855); margin-bottom: 7px;
    }
    .au-label i { font-size: 11px; }
    .au-input {
        width: 100%; box-sizing: border-box;
        background-color: var(--color-bone, #e7e5e4);
        border: 1px solid var(--color-vellum, #dfdcd5);
        border-radius: 9px; padding: 12px 14px;
        font-family: var(--font-helvetica-now, sans-serif); font-size: 14px; color: var(--color-ink, #000);
        outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .au-input::placeholder { color: #9a9a92; }
    .au-input:focus { border-color: var(--color-ink, #000); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08); background-color: var(--color-paper, #fff); }
    .au-input.error, .au-input.is-invalid { border-color: #cf7d7d; box-shadow: 0 0 0 3px rgba(207, 125, 125, 0.18); }

    /* Validation message — always directly below the input (incl. jQuery-validate spans) */
    .au-error, .au-main span.error, .au-main label.error {
        display: block; margin-top: 7px;
        font-family: var(--font-helvetica-now, sans-serif); font-size: 12.5px; line-height: 1.4;
        color: #c0392b; font-weight: 500;
    }
    .au-error i { font-size: 11px; margin-right: 4px; }

    /* Captcha */
    .au-captcha { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
    .au-captcha__img img {
        height: 46px; width: auto; border-radius: 9px;
        border: 1px solid var(--color-vellum, #dfdcd5); background: var(--color-paper, #fff);
    }

    .au-forgot { text-align: right; margin: -4px 0 18px 0; }
    .au-forgot a { font-family: var(--font-helvetica-now, sans-serif); font-size: 12.5px; color: var(--color-ink, #000); text-decoration: none; }
    .au-forgot a:hover { text-decoration: underline; }

    .au-submit {
        width: 100%; margin-top: 6px;
        display: inline-flex; align-items: center; justify-content: center; gap: 10px;
        font-family: var(--font-helvetica-now, sans-serif); font-size: 13px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.05em;
        background-color: var(--color-ink, #000); color: var(--color-paper, #fff);
        border: 1px solid var(--color-ink, #000); border-radius: 28.8px;
        padding: 14px 24px; cursor: pointer; transition: opacity 0.2s ease;
    }
    .au-submit:hover { opacity: 0.88; }

    .au-divider { display: flex; align-items: center; gap: 14px; margin: 24px 0; }
    .au-divider::before, .au-divider::after { content: ""; flex: 1; height: 1px; background: var(--color-vellum, #dfdcd5); }
    .au-divider span { font-family: var(--font-helvetica-now, sans-serif); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-graphite, #595855); }

    .au-alt { text-align: center; font-family: var(--font-helvetica-now, sans-serif); font-size: 13.5px; color: var(--color-graphite, #595855); }
    .au-alt a { color: var(--color-ink, #000); font-weight: 600; text-decoration: none; }
    .au-alt a:hover { text-decoration: underline; }

    @media (max-width: 860px) {
        .au-section { padding: 48px 20px; }
        .au-card { grid-template-columns: 1fr; }
        .au-aside { padding: 40px 28px; }
        .au-aside__art { height: auto; width: 68%; left: 50%; right: auto; top: 50%; transform: translate(-50%, -50%); opacity: 0.12; }
        .au-main { padding: 36px 28px; }
    }
    @media (max-width: 520px) {
        .au-row { grid-template-columns: 1fr; gap: 0; }
        .au-captcha { grid-template-columns: 1fr; }
    }


/* ========================================================= */
/* CSS FROM: order-style.blade.php */
/* ========================================================= */

/* =========================================================
       ORDER RESULT PAGES — Structured theme (success / failed)
       ========================================================= */
    .ord-section { position: relative; overflow: hidden; background-color: var(--color-putty, #c4c3b6); padding: 84px 40px; }
    .ord-bg {
        position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
        width: min(900px, 96%); z-index: 0; opacity: 0.18; pointer-events: none;
        filter: blur(1px);   /* soft colourful backdrop behind the card */
    }
    .ord-card {
        position: relative; z-index: 1;
        max-width: 640px; margin: 0 auto; text-align: center;
        background-color: var(--color-paper, #fff);
        border: 1px solid var(--color-vellum, #dfdcd5);
        border-radius: 16px; padding: 52px 44px; box-shadow: none;
        animation: ord-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .ord-badge {
        width: 84px; height: 84px; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 32px; margin-bottom: 24px;
        animation: ord-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
    .ord-badge--ok { background-color: var(--color-ink, #000); color: var(--color-paper, #fff); }
    .ord-badge--err { background-color: var(--color-bone, #e7e5e4); color: var(--color-ink, #000); border: 1.5px solid var(--color-ink, #000); }

    .ord-title {
        font-family: var(--font-davinci, serif); font-size: clamp(26px, 3.4vw, 38px); font-weight: 500;
        line-height: 1.1; letter-spacing: -0.01em; color: var(--color-ink, #000); margin: 0 0 12px 0;
    }
    .ord-sub {
        font-family: var(--font-helvetica-now, sans-serif); font-size: 15px; line-height: 1.7;
        color: var(--color-graphite, #595855); margin: 0 auto 32px auto; max-width: 460px;
    }

    /* Detail grid (success) */
    .ord-details { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; margin-bottom: 32px; }
    .ord-detail {
        background-color: var(--color-bone, #e7e5e4); border: 1px solid var(--color-vellum, #dfdcd5);
        border-radius: 9px; padding: 16px 18px;
    }
    .ord-detail__label {
        display: block; font-family: var(--font-helvetica-now, sans-serif);
        font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
        color: var(--color-graphite, #595855); margin-bottom: 6px;
    }
    .ord-detail__value {
        font-family: var(--font-helvetica-now, sans-serif); font-size: 15px; font-weight: 600;
        color: var(--color-ink, #000); word-break: break-word;
    }
    .ord-pill {
        display: inline-block; background-color: var(--color-ink, #000); color: var(--color-paper, #fff);
        padding: 3px 12px; border-radius: 28.8px; font-size: 12px; font-weight: 600;
    }

    /* Help list (failed) */
    .ord-help {
        text-align: left; background-color: var(--color-bone, #e7e5e4);
        border: 1px solid var(--color-vellum, #dfdcd5); border-radius: 9px;
        padding: 22px 24px; margin-bottom: 28px;
    }
    .ord-help__title {
        font-family: var(--font-helvetica-now, sans-serif); font-size: 11px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-ink, #000); margin: 0 0 14px 0;
    }
    .ord-help ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
    .ord-help li {
        display: flex; align-items: flex-start; gap: 10px;
        font-family: var(--font-helvetica-now, sans-serif); font-size: 13.5px; color: var(--color-graphite, #595855); line-height: 1.5;
    }
    .ord-help li i { color: var(--color-ink, #000); font-size: 11px; margin-top: 3px; flex-shrink: 0; }

    /* Actions */
    .ord-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
    .ord-btn {
        display: inline-flex; align-items: center; gap: 8px;
        font-family: var(--font-helvetica-now, sans-serif); font-size: 12.5px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.05em;
        border-radius: 28.8px; padding: 13px 24px; text-decoration: none;
        transition: opacity 0.2s ease, background-color 0.2s ease;
    }
    .ord-btn--primary { background-color: var(--color-ink, #000); color: var(--color-paper, #fff); border: 1px solid var(--color-ink, #000); }
    .ord-btn--primary:hover { opacity: 0.85; color: var(--color-paper, #fff); }
    .ord-btn--ghost { background-color: transparent; color: var(--color-ink, #000); border: 1px solid var(--color-vellum, #dfdcd5); }
    .ord-btn--ghost:hover { background-color: var(--color-bone, #e7e5e4); color: var(--color-ink, #000); }

    /* Footer notes */
    .ord-note, .ord-assist { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--color-vellum, #dfdcd5); }
    .ord-note {
        font-family: var(--font-helvetica-now, sans-serif); font-size: 13px; line-height: 1.6;
        color: var(--color-graphite, #595855);
    }
    .ord-assist h6 { font-family: var(--font-helvetica-now, sans-serif); font-size: 13px; font-weight: 600; color: var(--color-ink, #000); margin: 0 0 8px 0; }
    .ord-assist p { font-family: var(--font-helvetica-now, sans-serif); font-size: 13px; line-height: 1.6; color: var(--color-graphite, #595855); margin: 0; }
    .ord-note a, .ord-assist a { color: var(--color-ink, #000); font-weight: 600; text-decoration: none; }
    .ord-note a:hover, .ord-assist a:hover { text-decoration: underline; }

    @keyframes ord-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes ord-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }

    @media (max-width: 600px) {
        .ord-section { padding: 56px 20px; }
        .ord-card { padding: 36px 24px; }
        .ord-details { grid-template-columns: 1fr; }
        .ord-btn { width: 100%; justify-content: center; }
    }
    @media (prefers-reduced-motion: reduce) {
        .ord-card, .ord-badge { animation: none; }
    }

/* =========================================
   STARTING FROM PRICE ON CARDS
   ========================================= */
.prod-slide__price, .pl-card__price {
    font-family: var(--font-helvetica-now, sans-serif);
    font-size: 13.5px;
    color: var(--color-graphite, #595855);
    margin: 0;
    font-weight: 500;
}
.prod-slide__price strong, .pl-card__price strong {
    color: var(--color-ink, #000);
    font-size: 15px;
}
.pl-card__price {
    margin: 4px 0 0 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.prod-slide__price {
    text-align: center !important;
    margin: 8px auto 0 auto !important;
    width: 100%;
    display: block !important;
}