/* ==========================================================================
   LỌ MƠ — BRAND STUDIO & EDITORIAL STOREFRONT HARMONIZATION (B & C1–C4)
   1. C3: Live Mood Palette Studio (Token Reactivity via :where([data-palette]))
   2. C2: Interactive 3D Dual-Artboard Flip & 2.5x Vector/Print Optical Loupe
   3. C1: Editorial × Gallery Storefront, Catalog & Specimen Frames
   4. C4: Live Handwritten Gift Card ("Thiệp viết tay Lọ Mơ") Studio
   All animations & transitions remain active at all times.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TYPOGRAPHIC LEGIBILITY (Targeted balance & pretty — never global *)
   -------------------------------------------------------------------------- */
.storefront-hero-title,
.editorial-page-title,
.storefront-section-title,
.product-detail-title,
.giftcard-studio-title,
.palette-ui-mock-heading,
.floral-plaque-title {
    text-wrap: balance;
}

.storefront-hero-lead,
.editorial-page-subtitle,
.product-detail-desc,
.giftcard-studio-desc,
.stationery-message,
.palette-ui-mock-copy,
.floral-plaque-story {
    text-wrap: pretty;
}

/* ==========================================================================
   C3. LIVE MOOD PALETTE SWITCHER & APPLICATION STUDIO (#quy-chuan)
   ========================================================================== */
.subpalettes-head-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.subpalettes-head-row h4 {
    margin: 4px 0 0;
}

.palette-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-green);
    background: #EFE7D8;
    border: 1px solid #B5A58E;
    padding: 6px 12px;
    border-radius: 999px;
}

.subpalettes-grid {
    align-items: stretch;
}

.subpalette-card.subpalette-selector-btn {
    appearance: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    padding: 14px;
    border-radius: 18px;
    border: 1.5px solid #B9AC98;
    background: #FFFFFF;
    position: relative;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.28s ease,
                box-shadow 0.28s ease;
}

.subpalette-card.subpalette-selector-btn:hover {
    transform: translateY(-3px);
    border-color: var(--color-green);
    box-shadow: 0 12px 26px rgba(40, 86, 64, 0.1);
}

.subpalette-card.subpalette-selector-btn.is-selected {
    border: 2px solid var(--color-green);
    box-shadow: 0 14px 30px rgba(40, 86, 64, 0.14);
}

.subpalette-card.subpalette-selector-btn:focus-visible {
    outline: 3px solid var(--color-orange);
    outline-offset: 2px;
}

.subpalette-card.subpalette-selector-btn .subpalette-preview {
    position: relative;
    width: 100%;
    height: 192px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px 20px;
    margin-bottom: 0;
    border-radius: 12px;
    border: 1px solid rgba(40, 86, 64, 0.14);
    overflow: hidden;
}

.subpalette-card.subpalette-selector-btn .subpalette-preview img {
    width: 82%;
    max-width: 244px;
    height: 104px;
    object-fit: contain;
    object-position: center;
    display: block;
    margin: 0 auto;
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.subpalette-card.subpalette-selector-btn:hover .subpalette-preview img {
    transform: scale(1.035);
}

.subpalette-card.subpalette-selector-btn .subpalette-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    padding: 16px 6px 6px;
}

.subpalette-card.subpalette-selector-btn .subpalette-info h5 {
    font-size: 15.5px;
    line-height: 1.38;
    margin: 0 0 6px;
    color: var(--color-ink);
}

.subpalette-card.subpalette-selector-btn .subpalette-info p {
    font-size: 13px;
    line-height: 1.55;
    color: var(--color-ink-muted);
    margin: 0 0 14px;
}

.subpalette-card.subpalette-selector-btn .subpalette-chips {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.subpalette-active-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #263A30;
    border: 1px solid #9D8F7B;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.subpalette-selector-btn.is-selected .subpalette-active-badge {
    background: var(--color-green);
    color: #FAF5EC;
    border-color: var(--color-green);
}

/* Reactive Higher-Order Palette Tokens via :where() (zero specificity inflation) */
.palette-live-studio {
    --studio-primary: #285640;
    --studio-accent: #D47B61;
    --studio-surface: #FAF5EC;
    --studio-ink: #223129;
    --studio-border: rgba(40, 86, 64, 0.28);
    margin-top: 24px;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 24px;
    padding: 24px;
    border-radius: 18px;
    background: #F4EDE0;
    border: 1px solid #C8BBA6;
    transition: background-color 0.4s ease, border-color 0.4s ease;
}

:where([data-palette="vuon-mo"]) {
    --studio-primary: #285640;
    --studio-accent: #D47B61;
    --studio-surface: #FAF5EC;
    --studio-ink: #223129;
    --studio-border: rgba(40, 86, 64, 0.32);
}

:where([data-palette="mo-hong"]) {
    --studio-primary: #713E50;
    --studio-accent: #DEA6AE;
    --studio-surface: #FCF5F5;
    --studio-ink: #3B202A;
    --studio-border: rgba(113, 62, 80, 0.34);
}

:where([data-palette="som-mai"]) {
    --studio-primary: #285D60;
    --studio-accent: #E8B765;
    --studio-surface: #FAF7EF;
    --studio-ink: #1F393B;
    --studio-border: rgba(40, 93, 96, 0.34);
}

.palette-specimen-card {
    position: relative;
    overflow: hidden;
    background: var(--studio-surface);
    color: var(--studio-ink);
    border: 1.5px solid var(--studio-border);
    border-radius: 14px;
    padding: 24px 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 310px;
    box-shadow: 0 14px 32px rgba(24, 34, 28, 0.08);
    transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease;
}

.palette-specimen-watermark {
    position: absolute;
    right: -18px;
    bottom: -24px;
    width: 210px;
    height: auto;
    opacity: 0.26;
    pointer-events: none;
    user-select: none;
}

.palette-specimen-topbar {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--studio-border);
}

.palette-specimen-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    background: var(--studio-primary);
    color: #FFFFFF;
    transition: background-color 0.4s ease;
}

.palette-specimen-meta {
    font-size: 10.5px;
    letter-spacing: 0.12em;
    font-weight: 600;
    opacity: 0.72;
}

.palette-specimen-center {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 22px 12px;
}

.palette-specimen-logo {
    width: 224px;
    max-width: 78%;
    height: 112px;
    object-fit: contain;
    object-position: center;
    margin: 0 auto 14px;
    display: block;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}

.palette-specimen-quote {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 20px;
    color: var(--studio-primary);
    margin: 0 0 6px;
    transition: color 0.4s ease;
}

.palette-specimen-mood {
    font-size: 13px;
    opacity: 0.85;
    margin: 0 auto;
    max-width: 380px;
}

.palette-specimen-footer {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px dashed var(--studio-border);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--studio-primary);
}

.palette-ui-inspector {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
}

.palette-inspector-header h5 {
    font-family: var(--font-serif);
    font-size: 21px;
    color: var(--studio-primary);
    margin: 4px 0 0;
    transition: color 0.4s ease;
}

.palette-ui-mock-box {
    background: var(--studio-surface);
    border: 1.5px solid var(--studio-border);
    border-left: 4px solid var(--studio-accent);
    border-radius: 12px;
    padding: 20px 22px;
    transition: background-color 0.45s ease, border-color 0.45s ease;
}

.palette-ui-mock-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--studio-primary);
    margin-bottom: 6px;
}

.palette-ui-mock-heading {
    font-family: var(--font-serif);
    font-size: 19px;
    font-weight: 600;
    color: var(--studio-primary);
    margin-bottom: 8px;
}

.palette-ui-mock-copy {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--studio-ink);
    margin: 0 0 16px;
}

.palette-ui-mock-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.palette-demo-btn-primary {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    background: var(--studio-primary);
    color: #FFFFFF;
    transition: background-color 0.4s ease;
}

.palette-demo-btn-outline {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    background: transparent;
    color: var(--studio-primary);
    border: 1.5px solid var(--studio-primary);
    transition: color 0.4s ease, border-color 0.4s ease;
}

.palette-token-copy-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.palette-hex-copy-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 10px;
    background: #FFFFFF;
    border: 1px solid #B5A690;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.palette-hex-copy-btn:hover {
    border-color: var(--color-green);
    transform: translateY(-2px);
}

.palette-hex-copy-btn small {
    display: block;
    font-size: 10px;
    color: var(--color-ink-muted);
}

.palette-hex-copy-btn code {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-ink);
}

.hex-swatch-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.22);
    flex-shrink: 0;
}

.hex-copy-tag {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    color: var(--color-green);
}

/* ==========================================================================
   C2. INTERACTIVE 3D DUAL-FACE CARD FLIP & 2.5x VECTOR/PRINT LOUPE
   ========================================================================== */
.pub-stage-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pub-stage-toolbar-modes {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.pub-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pub-loupe-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-green);
    background: #FAF5EC;
    border: 1.5px solid #9E907C;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.pub-loupe-toggle-btn:hover {
    border-color: var(--color-green);
    transform: translateY(-1px);
}

.pub-loupe-toggle-btn.is-active,
.pub-loupe-toggle-btn[aria-pressed="true"] {
    background: var(--color-green);
    color: #FAF5EC;
    border-color: var(--color-green);
}

/* 3D Flip Stage */
.pub-3d-stage {
    --tilt-rx: 0deg;
    --tilt-ry: 0deg;
    --sheen-x: 50%;
    --sheen-y: 50%;
    --viewport-max: 480px;
    padding: 26px 20px 14px;
    background: radial-gradient(circle at 50% 35%, #FCF9F3 0%, #EFE6D6 100%);
    border-radius: 12px;
    border: 1px solid rgba(40, 86, 64, 0.14);
}

.pub-3d-stage[style*="300 / 100"] {
    --viewport-max: 680px;
}

.pub-3d-viewport {
    perspective: 1400px;
    width: 100%;
    max-width: var(--viewport-max, 480px);
    margin: 0 auto;
    transform: rotateX(var(--tilt-rx)) rotateY(var(--tilt-ry));
    transform-style: preserve-3d;
    transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.pub-3d-flipper {
    position: relative;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    width: 100%;
    aspect-ratio: var(--card-aspect, 90 / 54);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: transform 0.78s cubic-bezier(0.22, 1, 0.36, 1);
    cursor: pointer;
}

.pub-3d-flipper.is-flipped {
    transform: rotateY(180deg);
}

.pub-3d-face {
    grid-area: 1 / 1;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 8px;
    background: #FAF5EC;
    border: 1px solid rgba(40, 86, 64, 0.2);
    box-shadow: 0 18px 36px rgba(24, 38, 30, 0.16);
}

.pub-3d-face > img:not(.loupe-zoom-img) {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    display: block;
    border-radius: inherit;
    background: #FAF5EC;
}

.pub-3d-front {
    transform: rotateY(0deg) translateZ(0.5px);
}

.pub-3d-back {
    transform: rotateY(180deg) translateZ(0.5px);
}

.pub-3d-flipper:not(.is-flipped) .pub-3d-back {
    pointer-events: none;
}

.pub-3d-flipper.is-flipped .pub-3d-front {
    pointer-events: none;
}

.pub-3d-flipper.is-flipped .pub-3d-back {
    pointer-events: auto;
}

.pub-3d-sheen {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle at var(--sheen-x) var(--sheen-y), rgba(255, 255, 255, 0.34), transparent 58%);
    mix-blend-mode: soft-light;
}

.pub-3d-controls {
    margin-top: 16px;
    padding-top: 10px;
    border-top: 1px dashed rgba(40, 86, 64, 0.18);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pub-3d-face-status {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-green);
}

.pub-3d-flip-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Optical 2.5x Vector/Print Loupe Lens — use :where() so zero-specificity
   relative positioning never overrides .pub-3d-face { position: absolute } */
:where([data-loupe-surface]) {
    position: relative;
}

.is-loupe-enabled [data-loupe-surface] {
    cursor: crosshair;
}

.lomo-vector-loupe {
    position: absolute;
    top: 0;
    left: 0;
    width: 184px;
    height: 184px;
    border-radius: 50%;
    overflow: hidden;
    pointer-events: none;
    z-index: 30;
    background: #FAF5EC;
    border: 2px solid var(--color-orange);
    box-shadow: 0 16px 38px rgba(18, 28, 22, 0.32), inset 0 0 0 2px rgba(255, 255, 255, 0.78);
    opacity: 0;
    transform: translate3d(-9999px, -9999px, 0) scale(0.92);
    transition: opacity 0.16s ease;
}

.lomo-vector-loupe.is-visible {
    opacity: 1;
}

.lomo-vector-loupe img.loupe-zoom-img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none !important;
    max-height: none !important;
    object-fit: fill;
    pointer-events: none;
    will-change: transform;
}

.lomo-loupe-crosshair {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to right, transparent 49.5%, rgba(212, 123, 97, 0.25) 49.5%, rgba(212, 123, 97, 0.25) 50.5%, transparent 50.5%),
        linear-gradient(to bottom, transparent 49.5%, rgba(212, 123, 97, 0.25) 49.5%, rgba(212, 123, 97, 0.25) 50.5%, transparent 50.5%);
}

.lomo-loupe-badge {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(40, 86, 64, 0.92);
    color: #FAF5EC;
    white-space: nowrap;
}

/* Modal Visual Outer Toolbar */
.pub-modal-visual-outer {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pub-modal-interactive-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: #F4EDE0;
    border: 1px solid #CBBDA8;
    border-radius: 10px;
}

.pub-modal-tools-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-green);
}

/* ==========================================================================
   C1. EDITORIAL × GALLERY STOREFRONT HARMONIZATION (/tiem-hoa, /san-pham)
   ========================================================================== */
.storefront-editorial-hero {
    padding: 28px 0 56px;
}

.storefront-hero-grid {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 44px;
    align-items: center;
}

.storefront-hero-title {
    font-family: var(--font-serif);
    font-size: clamp(36px, 4.6vw, 56px);
    line-height: 1.12;
    color: var(--color-green);
    font-weight: 500;
    margin: 14px 0 18px;
    letter-spacing: -0.02em;
}

.storefront-hero-lead {
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--color-ink-muted);
    max-width: 540px;
    margin-bottom: 28px;
}

.storefront-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.storefront-promise-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding-top: 18px;
    border-top: 1px solid var(--color-line);
}

.storefront-promise-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 13px;
    color: var(--color-ink);
}

.promise-index {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 700;
    font-size: 14px;
    color: var(--color-orange);
}

.storefront-specimen-frame {
    margin: 0;
}

.storefront-specimen-viewport {
    aspect-ratio: 4 / 4.2;
    overflow: hidden;
    background: #EFE7D8;
}

.storefront-specimen-viewport img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.storefront-specimen-frame:hover .storefront-specimen-viewport img {
    transform: scale(1.035);
}

.storefront-frame-link {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-green);
    text-decoration: underline;
    white-space: nowrap;
}

.storefront-categories-section {
    padding: 56px 0;
    background: var(--color-cream-light);
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
}

.storefront-featured-section {
    padding: 64px 0 44px;
}

.storefront-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.storefront-section-title {
    font-family: var(--font-serif);
    font-size: clamp(28px, 3.2vw, 36px);
    color: var(--color-green);
    margin: 6px 0 0;
}

.storefront-section-note {
    font-size: 14px;
    color: var(--color-ink-muted);
    max-width: 380px;
    margin: 0;
}

.editorial-category-card {
    text-align: left !important;
    padding: 24px !important;
    border: 1px solid #C8BBA6 !important;
    background: #FAF5EC !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.editorial-cat-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(40, 86, 64, 0.14);
}

.editorial-cat-num {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-orange);
}

.editorial-cat-arrow {
    font-size: 16px;
    color: var(--color-green);
    transition: transform 0.25s ease;
}

.editorial-category-card:hover .editorial-cat-arrow {
    transform: translate(3px, -3px);
}

.editorial-category-card h3 {
    font-family: var(--font-serif);
    font-size: 20px;
    color: var(--color-green);
    margin: 0 0 8px;
}

.editorial-category-card p {
    font-size: 13.5px;
    color: var(--color-ink-muted);
    line-height: 1.55;
    margin: 0;
}

/* Catalog Masthead & Filter Panel */
.editorial-page-masthead {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
    padding-bottom: 22px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--color-line);
}

.editorial-page-title {
    font-family: var(--font-serif);
    font-size: clamp(28px, 3.4vw, 40px);
    color: var(--color-green);
    margin: 6px 0 8px;
}

.editorial-page-subtitle {
    font-size: 15px;
    color: var(--color-ink-muted);
    max-width: 620px;
    margin: 0;
    line-height: 1.6;
}

.editorial-masthead-count {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 10px 16px;
    border: 1px solid #C8BBA6;
    border-radius: 12px;
    background: #FAF5EC;
}

.masthead-count-num {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-orange);
}

.masthead-count-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-ink-muted);
    margin-top: 4px;
}

.editorial-filter-panel {
    background: #FAF5EC;
    border: 1px solid #C8BBA6;
}

.editorial-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-line);
}

.editorial-filter-header h3 {
    font-family: var(--font-serif);
    font-size: 19px;
    color: var(--color-green);
    margin: 0;
}

.editorial-reset-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-orange);
    text-decoration: underline;
}

.editorial-filter-group {
    border-top: 1px solid var(--color-line);
    padding-top: 16px;
    margin-top: 18px;
}

.editorial-filter-group h4 {
    font-family: var(--font-sans);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-ink-muted);
    font-weight: 700;
    margin: 0 0 10px;
}

.editorial-filter-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.editorial-filter-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--color-ink);
    border: 1px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.editorial-filter-item:hover {
    background: rgba(40, 86, 64, 0.06);
}

.editorial-filter-item.is-active {
    background: var(--color-green);
    color: #FAF5EC;
    font-weight: 600;
}

.editorial-catalog-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin-bottom: 20px;
    background: #FAF5EC;
    border: 1px solid var(--color-line);
    border-radius: 10px;
}

.editorial-catalog-status {
    font-size: 13.5px;
    color: var(--color-ink-muted);
}

/* Product Detail Specimen */
.product-specimen-frame {
    background: #FAF5EC;
    border: 1px solid #C5B7A2;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(40, 86, 64, 0.07);
}

.product-specimen-stage {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-cream-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-loupe-btn {
    padding: 3px 10px;
    font-size: 11px;
}

.product-thumbs-row {
    display: flex;
    gap: 12px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.product-natural-note {
    margin-top: 20px;
    padding: 16px 18px;
    background: #FAF5EC;
    border: 1px solid var(--color-line);
    border-left: 3px solid var(--color-green);
    border-radius: 10px;
    font-size: 13px;
    color: var(--color-ink-muted);
    line-height: 1.6;
}

.product-natural-note strong {
    color: var(--color-green);
}

.product-detail-title {
    font-family: var(--font-serif);
    font-size: clamp(30px, 3.6vw, 40px);
    color: var(--color-green);
    line-height: 1.18;
    margin: 0 0 14px;
}

.product-price-meta-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.product-detail-price {
    font-family: var(--font-serif);
    font-size: 32px;
    font-weight: 700;
    color: var(--color-orange);
}

.product-sku-pill {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    border-radius: 999px;
    background: #EFE7D8;
    color: var(--color-ink-muted);
    border: 1px solid #CBBDA8;
}

.product-detail-desc {
    font-size: 15.5px;
    line-height: 1.72;
    color: var(--color-ink);
    margin-bottom: 24px;
}

.product-botanical-spec-card {
    background: #FAF5EC;
    border: 1px solid #C8BBA6;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 22px;
}

.product-botanical-spec-card h4 {
    font-family: var(--font-serif);
    font-size: 17px;
    color: var(--color-green);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-line);
}

.product-botanical-dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    font-size: 13.5px;
}

.product-botanical-dl .spec-label {
    display: block;
    font-size: 11.5px;
    color: var(--color-ink-muted);
    margin-bottom: 3px;
}

.product-botanical-dl .spec-full {
    grid-column: 1 / -1;
}

.product-botanical-dl .spec-full p {
    margin: 0;
    line-height: 1.55;
    color: var(--color-ink);
}

.product-add-form {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}

/* ==========================================================================
   C4. INTERACTIVE HANDWRITTEN GIFT CARD ("THIỆP VIẾT TAY LỌ MƠ") STUDIO
   ========================================================================== */
.product-card-mini-studio {
    background: #FFFFFF;
    border: 1px solid #C8BBA6;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 24px;
}

.giftcard-mini-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.giftcard-mini-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-orange);
}

.giftcard-sync-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-green);
    background: #EEF4F0;
    padding: 3px 9px;
    border-radius: 999px;
}

.giftcard-draft-input {
    width: 100%;
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 8px;
}

.giftcard-suggestion-pills {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.giftcard-chip-btn {
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: #FAF5EC;
    color: var(--color-green);
    border: 1px solid #B5A58E;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.giftcard-chip-btn:hover {
    background: var(--color-green);
    color: #FAF5EC;
    border-color: var(--color-green);
}

.giftcard-char-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--color-ink-muted);
}

.lomo-giftcard-studio {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 24px;
    padding: 26px;
    background: #FFFFFF;
    border: 1px solid #C8BBA6;
    border-radius: 16px;
    align-items: center;
}

.giftcard-studio-title {
    font-family: var(--font-serif);
    font-size: 24px;
    color: var(--color-green);
    margin: 4px 0 8px;
}

.giftcard-studio-desc {
    font-size: 13.5px;
    color: var(--color-ink-muted);
    line-height: 1.6;
    margin: 0 0 14px;
}

/* Authentic Lọ Mơ Stationery Card Preview */
.lomo-stationery-card {
    position: relative;
    overflow: hidden;
    background: #FAF5EC;
    border: 1.5px solid #C9BBA4;
    border-radius: 12px;
    padding: 24px 24px 22px;
    min-height: 270px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 14px 32px rgba(40, 86, 64, 0.1), inset 0 0 0 5px rgba(255, 255, 255, 0.55);
}

.stationery-watermark {
    position: absolute;
    right: -14px;
    bottom: -18px;
    width: 170px;
    height: auto;
    opacity: 0.24;
    pointer-events: none;
}

.stationery-sprig {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 52px;
    height: auto;
    opacity: 0.85;
    pointer-events: none;
}

.stationery-card-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(40, 86, 64, 0.16);
}

.stationery-logo {
    height: 36px;
    width: auto;
}

.stationery-tag {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--color-orange);
}

.stationery-salutation {
    position: relative;
    z-index: 1;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-green);
}

.stationery-message {
    position: relative;
    z-index: 1;
    margin: 12px 0;
    padding: 0 0 0 12px;
    border-left: 2px solid var(--color-orange);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 17.5px;
    line-height: 1.62;
    color: #22352B;
    word-break: break-word;
}

.stationery-signoff {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 12.5px;
    color: var(--color-ink-muted);
    padding-top: 8px;
    border-top: 1px dashed rgba(40, 86, 64, 0.16);
}

.stationery-signoff strong {
    font-family: var(--font-serif);
    font-size: 14.5px;
    color: var(--color-green);
}

/* Cart & Checkout Editorial Layout Refinements */
.editorial-checkout-progress {
    margin-bottom: 32px;
}

.editorial-step-tracker {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.editorial-step-tracker li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--color-ink-muted);
}

.editorial-step-tracker .step-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    border: 1.5px solid #B5A58E;
    background: #FAF5EC;
    color: var(--color-ink-muted);
}

.editorial-step-tracker li.step-done {
    color: var(--color-green);
}

.editorial-step-tracker li.step-done .step-badge {
    background: #E5EFE9;
    border-color: var(--color-green);
    color: var(--color-green);
}

.editorial-step-tracker li.step-active {
    color: var(--color-green);
    font-weight: 700;
}

.editorial-step-tracker li.step-active .step-badge {
    background: var(--color-orange);
    border-color: var(--color-orange);
    color: #FFFFFF;
}

.editorial-cart-panel,
.editorial-checkout-box {
    background: #FFFFFF;
    border: 1px solid #C8BBA6;
    border-radius: 14px;
    padding: 24px;
}

.editorial-cart-panel-head,
.editorial-checkout-box-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--color-line);
}

.editorial-cart-panel-head {
    justify-content: space-between;
    font-weight: 700;
    color: var(--color-green);
}

.editorial-checkout-box-head h2 {
    font-family: var(--font-serif);
    font-size: 19px;
    color: var(--color-green);
    margin: 0;
}

.checkout-sec-num {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 700;
    font-size: 14px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #FAF5EC;
    border: 1px solid #C8BBA6;
    color: var(--color-orange);
}

.cart-item-thumb {
    width: 82px;
    height: 82px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-cream-dark);
    border: 1px solid var(--color-line);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-qty-pill-form {
    display: inline-flex;
    align-items: center;
    border: 1px solid #B5A58E;
    border-radius: 999px;
    background: #FAF5EC;
    overflow: hidden;
}

.cart-qty-pill-form button {
    border: 0;
    background: transparent;
    padding: 4px 11px;
    cursor: pointer;
    color: var(--color-green);
    font-weight: 700;
}

.cart-qty-pill-form span {
    font-size: 13px;
    font-weight: 700;
    min-width: 24px;
    text-align: center;
}

.cart-remove-link {
    background: transparent;
    border: 0;
    color: var(--color-ink-muted);
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
}

.editorial-summary-card {
    background: #FAF5EC;
    border: 1px solid #C8BBA6;
    border-radius: 16px;
    padding: 24px;
    position: sticky;
    top: 100px;
}

.editorial-summary-card h3 {
    font-family: var(--font-serif);
    font-size: 20px;
    color: var(--color-green);
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-line);
}

.editorial-summary-rows {
    display: flex;
    flex-direction: column;
    gap: 11px;
    font-size: 14px;
    margin-bottom: 20px;
}

.summary-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-ink-muted);
}

.summary-line strong {
    color: var(--color-ink);
}

.summary-total-line {
    border-top: 1px dashed #B5A58E;
    padding-top: 14px;
    margin-top: 4px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.summary-total-line span {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-green);
}

.summary-total-amount {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 700;
    color: var(--color-orange);
}

.summary-reassurance {
    text-align: center;
    font-size: 12px;
    color: var(--color-ink-muted);
    line-height: 1.55;
}

.checkout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.checkout-giftcard-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 20px;
    align-items: start;
}

.checkout-payment-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 16px;
    border: 1.5px solid #C8BBA6;
    border-radius: 10px;
    cursor: pointer;
    background: #FAF5EC;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.checkout-payment-option:has(input:checked) {
    border-color: var(--color-green);
    background: #F2F7F4;
}

@media (min-width: 992px) {
    .checkout-grid {
        grid-template-columns: 1.58fr 1fr;
    }
}

@media (max-width: 991px) {
    .subpalettes-grid,
    .palette-live-studio,
    .storefront-hero-grid,
    .lomo-giftcard-studio,
    .checkout-giftcard-grid {
        grid-template-columns: 1fr;
    }

    .palette-token-copy-row,
    .storefront-promise-strip {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   CHƯƠNG I — OPEN 2.5D BOTANICAL ATELIER EXHIBITION STAGE (#bo-suu-tap)
   Replaces legacy wireframe cage & blocky cylinder pedestal with an open
   sunlit botanical exhibition space, dynamic per-bouquet color aura,
   3D coverflow depth, organic floor contact shadow, and 7-piece filmstrip.
   ========================================================================== */
.floral-exhibition-shell {
    --stage-primary: #285640;
    --stage-accent: #D47B61;
    --stage-surface: #FAF5EC;
    --stage-mx: 0;
    --stage-my: 0;
    --floral-spring: linear(
        0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%,
        1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%,
        1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%,
        0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1
    );
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(40, 86, 64, 0.16);
    background:
        radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.92) 0%, transparent 55%),
        linear-gradient(150deg, #FFFDF9 0%, var(--stage-surface) 56%, #EFE6D8 100%);
    box-shadow:
        0 30px 68px -28px rgba(32, 48, 39, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    padding: 26px 32px 24px;
    transition: background 0.7s ease, border-color 0.5s ease;
}

.floral-exhibition-shell:focus-visible {
    outline: 3px solid var(--color-orange);
    outline-offset: 4px;
}

/* Layer 0: Dynamic Ambient Aura, Window Light & Floating Motes */
.floral-stage-ambient {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.floral-aura-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(54px);
    will-change: transform, opacity;
    transition: background-color 0.85s ease;
}

.floral-aura-primary {
    width: 440px;
    height: 440px;
    left: 6%;
    top: 10%;
    background-color: var(--stage-primary);
    opacity: 0.13;
    animation: floralAuraDriftA 14s ease-in-out infinite alternate;
}

.floral-aura-accent {
    width: 390px;
    height: 390px;
    left: 24%;
    bottom: 6%;
    background-color: var(--stage-accent);
    opacity: 0.22;
    animation: floralAuraDriftB 11s ease-in-out infinite alternate;
}

@keyframes floralAuraDriftA {
    0% { transform: translate3d(-14px, -10px, 0) scale(0.96); }
    100% { transform: translate3d(22px, 16px, 0) scale(1.08); }
}

@keyframes floralAuraDriftB {
    0% { transform: translate3d(18px, 10px, 0) scale(1.04); }
    100% { transform: translate3d(-20px, -18px, 0) scale(0.94); }
}

.floral-sunlight-beam {
    position: absolute;
    inset: -12% -10%;
    background:
        linear-gradient(
            122deg,
            rgba(255, 253, 247, 0.82) 0%,
            rgba(255, 248, 234, 0.34) 36%,
            transparent 66%
        );
    transform: translate3d(calc(var(--stage-mx) * -12px), calc(var(--stage-my) * -8px), 0);
    transition: transform 0.25s ease-out;
}

.floral-botanical-motes {
    position: absolute;
    inset: 0;
}

.floral-mote {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFFFFF 0%, var(--stage-accent) 75%, transparent 100%);
    opacity: 0.45;
    animation: floralMoteFloat 10s ease-in-out infinite;
}

.floral-mote-1 { left: 14%; top: 68%; animation-duration: 9.5s; animation-delay: 0s; }
.floral-mote-2 { left: 28%; top: 26%; width: 9px; height: 9px; animation-duration: 12s; animation-delay: -2.4s; }
.floral-mote-3 { left: 44%; top: 74%; width: 6px; height: 6px; animation-duration: 10.8s; animation-delay: -4.2s; }
.floral-mote-4 { left: 52%; top: 22%; width: 8px; height: 8px; animation-duration: 13.2s; animation-delay: -1.6s; }
.floral-mote-5 { left: 9%; top: 36%; width: 6px; height: 6px; animation-duration: 11.4s; animation-delay: -5.8s; }

@keyframes floralMoteFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(0.85);
        opacity: 0.24;
    }
    50% {
        transform: translate3d(14px, -28px, 0) scale(1.2);
        opacity: 0.62;
    }
}

.floral-watermark-layer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4%;
    user-select: none;
}

.floral-watermark-word {
    font-family: var(--font-serif);
    font-size: clamp(72px, 10vw, 138px);
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--stage-primary);
    opacity: 0.048;
    transform: translate3d(calc(var(--stage-mx) * -16px), calc(var(--stage-my) * -10px), 0);
    transition: color 0.7s ease;
}

.floral-watermark-numeral {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(96px, 13vw, 184px);
    line-height: 1;
    color: var(--stage-primary);
    opacity: 0.055;
    transform: translate3d(calc(var(--stage-mx) * 14px), calc(var(--stage-my) * 10px), 0);
    transition: color 0.7s ease, opacity 0.35s ease;
}

/* Stage Top Bar */
.floral-stage-topbar {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(40, 86, 64, 0.11);
}

.floral-stage-brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.floral-stage-brand img {
    height: 40px;
    width: auto;
    display: block;
}

.floral-stage-brand-divider {
    width: 1px;
    height: 22px;
    background: rgba(40, 86, 64, 0.22);
}

.floral-stage-brand-meta {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--color-ink-muted);
}

.floral-stage-status {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.floral-autoplay-track {
    width: 72px;
    height: 3px;
    border-radius: 999px;
    background: rgba(40, 86, 64, 0.14);
    overflow: hidden;
}

.floral-autoplay-fill {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--stage-primary);
    transform-origin: left center;
    transform: scaleX(0);
    transition: background-color 0.5s ease;
}

.floral-counter-pill {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: var(--stage-primary);
    border: 1px solid rgba(40, 86, 64, 0.2);
    box-shadow: 0 4px 12px rgba(32, 48, 39, 0.06);
    transition: color 0.4s ease;
}

/* Main Split Grid: Left Open 2.5D Canvas + Right Curatorial Plaque */
.floral-stage-main {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.85fr);
    gap: 28px;
    align-items: center;
    padding: 18px 0 14px;
}

.floral-canvas-column {
    position: relative;
    min-width: 0;
}

.floral-canvas-viewport {
    position: relative;
    height: 500px;
    perspective: 1400px;
    transform-style: preserve-3d;
    touch-action: pan-y;
    user-select: none;
    cursor: grab;
}

.floral-canvas-viewport.is-dragging {
    cursor: grabbing;
}

/* 2.5D Coverflow Bouquet Slides (Compositor transform + opacity; spring on transform only) */
.floral-slide {
    position: absolute;
    left: 50%;
    top: 48%;
    width: min(74%, 400px);
    height: 430px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    transform-style: preserve-3d;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transform: translate3d(-50%, -46%, -190px) scale(0.48);
    transition:
        transform 0.82s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.48s ease;
    transition-timing-function: var(--floral-spring), ease;
}

.floral-slide.is-prev {
    opacity: 0.42;
    pointer-events: auto;
    cursor: pointer;
    z-index: 2;
    transform:
        translate3d(calc(-50% - 36% + var(--stage-mx) * -8px), -48%, -95px)
        rotateY(16deg)
        scale(0.64);
}

.floral-slide.is-next {
    opacity: 0.42;
    pointer-events: auto;
    cursor: pointer;
    z-index: 2;
    transform:
        translate3d(calc(-50% + 36% + var(--stage-mx) * -8px), -48%, -95px)
        rotateY(-16deg)
        scale(0.64);
}

.floral-slide.is-prev:hover {
    opacity: 0.68;
    transform:
        translate3d(calc(-50% - 35% + var(--stage-mx) * -8px), -49%, -70px)
        rotateY(13deg)
        scale(0.68);
}

.floral-slide.is-next:hover {
    opacity: 0.68;
    transform:
        translate3d(calc(-50% + 35% + var(--stage-mx) * -8px), -49%, -70px)
        rotateY(-13deg)
        scale(0.68);
}

.floral-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 4;
    transform:
        translate3d(
            calc(-50% + var(--floral-drag-x, 0px) + var(--stage-mx) * 14px),
            calc(-50% + var(--stage-my) * 8px),
            36px
        )
        rotateX(calc(var(--stage-my) * -4.2deg))
        rotateY(calc(var(--stage-mx) * 6.5deg))
        scale(1);
}

.floral-canvas-viewport.is-dragging .floral-slide.is-active {
    transition: opacity 0.25s ease;
}

.floral-slide-float {
    position: relative;
    z-index: 2;
    width: 100%;
    height: calc(100% - 26px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.floral-slide.is-active .floral-slide-float {
    animation: floralBouquetFloat 5.2s ease-in-out infinite alternate;
}

@keyframes floralBouquetFloat {
    0% { transform: translate3d(0, 2px, 0); }
    100% { transform: translate3d(0, -10px, 0); }
}

.floral-slide-picture {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.floral-slide-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center bottom;
    display: block;
    filter:
        drop-shadow(0 22px 28px rgba(26, 38, 31, 0.16))
        drop-shadow(0 6px 10px rgba(26, 38, 31, 0.08));
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.floral-slide.is-active:hover .floral-slide-img {
    transform: scale(1.028);
}

/* Open Organic Gallery Floor Presence (No Cage, No Cylinder Block) */
.floral-floor-presence {
    position: relative;
    z-index: 1;
    width: 290px;
    height: 36px;
    margin-top: -12px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.floral-floor-halo {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.86) 0%,
        rgba(255, 251, 244, 0.45) 52%,
        transparent 78%
    );
    border: 1px solid rgba(40, 86, 64, 0.12);
    transform: scaleY(0.76);
    opacity: 0;
    transition: opacity 0.45s ease;
}

.floral-slide.is-active .floral-floor-halo {
    opacity: 1;
}

.floral-floor-shadow {
    position: relative;
    width: 186px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(24, 36, 29, 0.30) 0%,
        rgba(24, 36, 29, 0.12) 54%,
        transparent 80%
    );
    filter: blur(5px);
}

.floral-slide.is-active .floral-floor-shadow {
    animation: floralShadowBreathe 5.2s ease-in-out infinite alternate;
}

@keyframes floralShadowBreathe {
    0% { transform: scale(1.02); opacity: 0.92; }
    100% { transform: scale(0.90); opacity: 0.68; }
}

/* Stage Prev / Next Tactile Round Arrows */
.floral-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(40, 86, 64, 0.22);
    background: rgba(255, 253, 249, 0.9);
    backdrop-filter: blur(8px);
    color: var(--color-green);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(26, 38, 31, 0.1);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.25s ease,
                color 0.25s ease,
                border-color 0.25s ease;
}

.floral-nav-prev { left: 8px; }
.floral-nav-next { right: 8px; }

.floral-nav-arrow:hover {
    background: var(--stage-primary);
    border-color: var(--stage-primary);
    color: #FFFDF9;
    transform: translateY(-50%) scale(1.07);
}

.floral-nav-arrow:focus-visible {
    outline: 3px solid var(--color-orange);
    outline-offset: 2px;
}

/* Right Column: Curatorial Museum Plaque */
.floral-plaque-card {
    position: relative;
    background: rgba(255, 253, 249, 0.86);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(40, 86, 64, 0.16);
    border-top: 3px solid var(--stage-primary);
    border-radius: 22px;
    padding: 28px 30px;
    box-shadow: 0 18px 42px -20px rgba(28, 42, 34, 0.14);
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: border-color 0.5s ease;
}

.floral-plaque-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.floral-plaque-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--color-ink-muted);
}

.floral-plaque-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    background: var(--stage-surface);
    color: var(--stage-primary);
    border: 1px solid rgba(40, 86, 64, 0.18);
    transition: background-color 0.45s ease, color 0.45s ease;
}

.floral-plaque-body {
    transition: opacity 0.24s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.floral-plaque-body.is-switching {
    opacity: 0;
    transform: translate3d(0, 7px, 0);
}

.floral-plaque-title {
    font-family: var(--font-serif);
    font-size: clamp(26px, 2.7vw, 34px);
    line-height: 1.2;
    color: var(--stage-primary);
    margin: 0 0 8px;
    transition: color 0.45s ease;
}

.floral-plaque-subtitle {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 16.5px;
    color: var(--color-orange);
    margin: 0 0 12px;
}

.floral-plaque-story {
    font-size: 14.5px;
    line-height: 1.68;
    color: var(--color-ink-muted);
    margin: 0;
}

.floral-plaque-material-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(250, 245, 236, 0.78);
    border: 1px solid rgba(40, 86, 64, 0.12);
}

.floral-plaque-swatches {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.floral-swatch-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
    transition: background-color 0.45s ease;
}

.floral-swatch-dot + .floral-swatch-dot {
    margin-left: -5px;
}

.floral-swatch-surface {
    border-color: #C8BBA6;
}

.floral-plaque-material-text {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--color-ink);
}

.floral-plaque-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px dashed rgba(40, 86, 64, 0.18);
}

.floral-plaque-nav-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.floral-plaque-step-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(40, 86, 64, 0.24);
    background: #FFFFFF;
    color: var(--color-ink);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.floral-plaque-step-btn:hover {
    background: var(--stage-primary);
    border-color: var(--stage-primary);
    color: #FFFFFF;
    transform: translateY(-1px);
}

.floral-plaque-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--stage-primary);
    text-decoration: none;
    transition: transform 0.25s ease, color 0.25s ease;
}

.floral-plaque-cta:hover {
    color: var(--color-orange);
    transform: translateX(2px);
}

/* Bottom Visual Filmstrip Dock (All 7 Cutouts) */
.floral-filmstrip-bar {
    position: relative;
    z-index: 3;
    padding-top: 16px;
    border-top: 1px solid rgba(40, 86, 64, 0.11);
}

.floral-filmstrip-scroller {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(148px, 1fr);
    gap: 10px;
    overflow-x: auto;
    padding: 4px 10px 8px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}

.floral-thumb-btn {
    appearance: none;
    scroll-snap-align: center;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 14px;
    border: 1.5px solid rgba(40, 86, 64, 0.14);
    background: rgba(255, 255, 255, 0.76);
    color: var(--color-ink);
    text-align: left;
    cursor: pointer;
    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.floral-thumb-btn:hover {
    transform: translateY(-2px);
    background: #FFFFFF;
    border-color: var(--stage-primary);
}

.floral-thumb-btn.is-active {
    background: #FFFFFF;
    border-color: var(--stage-primary);
    box-shadow: 0 10px 22px -12px rgba(40, 86, 64, 0.28);
    transform: translateY(-2px);
}

.floral-thumb-btn:focus-visible {
    outline: 3px solid var(--color-orange);
    outline-offset: 2px;
}

.floral-thumb-media {
    width: 44px;
    height: 54px;
    border-radius: 10px;
    background: var(--stage-surface);
    border: 1px solid rgba(40, 86, 64, 0.1);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 3px;
    flex-shrink: 0;
    overflow: hidden;
}

.floral-thumb-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.floral-thumb-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.floral-thumb-num {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--color-orange);
}

.floral-thumb-btn.is-active .floral-thumb-num {
    color: var(--stage-primary);
}

.floral-thumb-title {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Decorative Inline Scroll-Driven Slide Scale on Filmstrip Scroller */
@keyframes floralThumbInlineGlide {
    0% {
        opacity: 0.72;
        scale: 0.94;
    }
    50% {
        opacity: 1;
        scale: 1;
    }
    100% {
        opacity: 0.72;
        scale: 0.94;
    }
}

@supports ((animation-timeline: view()) and (animation-range: entry)) {
    .floral-filmstrip-scroller > .floral-thumb-btn {
        animation: floralThumbInlineGlide auto linear both;
        animation-timeline: view(inline);
    }
}

@media (max-width: 991px) {
    .floral-exhibition-shell {
        padding: 20px 18px 18px;
        border-radius: 22px;
    }

    .floral-stage-main {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .floral-canvas-viewport {
        height: 410px;
    }

    .floral-slide {
        width: min(76%, 340px);
        height: 360px;
    }

    .floral-filmstrip-scroller {
        grid-auto-columns: minmax(168px, 190px);
    }
}

@media (max-width: 575px) {
    .floral-stage-brand-divider,
    .floral-stage-brand-meta {
        display: none;
    }

    .floral-canvas-viewport {
        height: 340px;
    }

    .floral-slide {
        width: min(82%, 280px);
        height: 300px;
    }

    .floral-slide.is-prev,
    .floral-slide.is-next {
        opacity: 0.24;
    }

    .floral-plaque-card {
        padding: 20px 18px;
    }
}

/* Forced Colors Mode Accessibility Fallbacks */
@media (forced-colors: active) {
    .subpalette-selector-btn.is-selected,
    .pub-loupe-toggle-btn[aria-pressed="true"],
    .editorial-filter-item.is-active,
    .checkout-payment-option:has(input:checked) {
        outline: 2px solid Highlight;
        outline-offset: 2px;
    }

    .hex-swatch-dot,
    .subpalette-chips span {
        forced-color-adjust: none;
    }
}