/* /assets/css/style.css */

/* Root variables */
:root {
    --hdt-cream: #F7F1E8;
    --hdt-beige: #EFE3D3;
    --hdt-brown: #6B4F3F;
    --hdt-dark: #1F1A17;
    --hdt-soft-gray: #F5F5F5;
    --hdt-gold: #B88A44;
    --hdt-success: #198754;
    --hdt-warning: #ffc107;
    --hdt-danger: #dc3545;
    --hdt-white: rgba(255, 250, 244, 0.94);
    --hdt-surface: rgba(255, 250, 244, 0.92);
    --hdt-surface-strong: #fffaf4;
    --hdt-border: rgba(107, 79, 63, 0.15);
    --hdt-border-strong: rgba(107, 79, 63, 0.24);
    --hdt-text: #2d241d;
    --hdt-muted: #786857;
    --hdt-shadow-sm: 0 10px 24px rgba(53, 38, 27, 0.06);
    --hdt-shadow: 0 20px 45px rgba(53, 38, 27, 0.10);
    --hdt-shadow-lg: 0 28px 70px rgba(53, 38, 27, 0.14);
    --hdt-radius-xs: 14px;
    --hdt-radius-sm: 18px;
    --hdt-radius: 20px;
    --hdt-radius-lg: 28px;
    --hdt-page-padding: 8.5rem 0 4rem;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--hdt-text);
    background:
        radial-gradient(circle at top left, rgba(184, 138, 68, 0.10), transparent 28%),
        radial-gradient(circle at 90% 10%, rgba(239, 227, 211, 0.7), transparent 20%),
        linear-gradient(180deg, #fcf8f2 0%, #f5eee4 45%, #efe6d8 100%);
    font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.65;
}

a {
    color: inherit;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

img {
    max-width: 100%;
}

.container {
    width: min(100% - 2rem, 1320px);
    margin-inline: auto;
}

/* Base layout */
.page-shell,
.generator-shell,
.gallery-shell,
.customize-shell,
.cart-shell,
.checkout-shell {
    padding: var(--hdt-page-padding);
}

.laser-shell {
    padding: var(--hdt-page-padding);
}

.page-hero-small {
    margin-bottom: 1.75rem;
}

.page-title,
.checkout-title,
.customize-title,
.generator-title {
    font-family: "Cormorant Garamond", serif;
    color: var(--hdt-dark);
    line-height: 0.96;
    letter-spacing: -0.02em;
}

.page-title,
.checkout-title,
.customize-title {
    font-size: clamp(2.8rem, 5vw, 4.4rem);
    margin: 0.8rem 0 0.5rem;
}

.page-subtitle,
.customize-text,
.generator-lead,
.page-lead,
.template-text-muted,
.hero-text,
.section-text {
    color: var(--hdt-muted);
}

.page-subtitle {
    max-width: 48rem;
    margin: 0;
}

.content-card,
.soft-card,
.action-card,
.form-card,
.summary-card,
.preview-card,
.generator-panel,
.generator-side-card,
.selected-template-card,
.template-filter-bar,
.template-card,
.page-card,
.filter-card,
.empty-state,
.image-card,
.cart-card,
.cart-summary,
.cart-empty,
.cart-note,
.checkout-card,
.checkout-summary,
.checkout-note,
.mockup-stage,
.mockup-summary-card,
.hero-card,
.feature-card,
.prompt-card,
.style-card,
.room-card,
.product-card,
.reason-card,
.faq-card,
.cta-panel,
.mockup-showcase {
    background: var(--hdt-surface);
    border: 1px solid var(--hdt-border);
    border-radius: var(--hdt-radius-lg);
    box-shadow: var(--hdt-shadow);
}

.content-card,
.soft-card,
.action-card,
.form-card,
.summary-card,
.preview-card,
.generator-panel,
.generator-side-card,
.selected-template-card,
.page-card,
.filter-card,
.empty-state,
.cart-card,
.cart-summary,
.cart-empty,
.cart-note,
.checkout-card,
.checkout-summary,
.checkout-note,
.mockup-stage,
.mockup-summary-card,
.hero-card,
.mockup-showcase,
.cta-panel {
    padding: 1.5rem;
}

.quick-hover,
.feature-card,
.prompt-card,
.style-card,
.room-card,
.product-card,
.reason-card,
.image-card,
.template-card,
.option-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.quick-hover:hover,
.feature-card:hover,
.prompt-card:hover,
.style-card:hover,
.room-card:hover,
.product-card:hover,
.reason-card:hover,
.image-card:hover,
.template-card:hover,
.option-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--hdt-shadow-lg);
}

.catalog-product-card {
    gap: 0.2rem;
}

.catalog-product-card h2 {
    color: var(--hdt-dark);
    line-height: 1.15;
}

.catalog-category-nav {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding: 0.15rem 0.1rem 0.35rem;
    scrollbar-width: thin;
}

.catalog-category-chip {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.45rem;
    min-width: 8.25rem;
    min-height: 6rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(107, 79, 63, 0.13);
    border-radius: 18px;
    background: rgba(255, 252, 247, 0.82);
    color: var(--hdt-muted);
    text-align: center;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 900;
    line-height: 1.2;
    box-shadow: 0 12px 28px rgba(53, 38, 27, 0.06);
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.catalog-category-chip i {
    display: inline-grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 999px;
    background: rgba(184, 138, 68, 0.10);
    color: var(--hdt-gold);
    font-size: 1.15rem;
}

.catalog-category-chip:hover,
.catalog-category-chip:focus,
.catalog-category-chip.is-active {
    border-color: rgba(65, 47, 31, 0.22);
    background: var(--hdt-dark);
    color: var(--hdt-cream);
    box-shadow: 0 18px 36px rgba(31, 26, 23, 0.13);
    transform: translateY(-2px);
}

.catalog-category-chip:hover i,
.catalog-category-chip:focus i,
.catalog-category-chip.is-active i {
    background: rgba(255, 250, 244, 0.14);
    color: var(--hdt-cream);
}

.catalog-search-card {
    padding: 1.15rem;
}

.catalog-landing-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(280px, 0.8fr);
    gap: 1.25rem;
    align-items: center;
    padding: 1.25rem;
    background:
        linear-gradient(135deg, rgba(255, 252, 247, 0.96), rgba(245, 236, 224, 0.78));
    border: 1px solid var(--hdt-border);
    border-radius: var(--hdt-radius-lg);
    box-shadow: var(--hdt-shadow);
}

.catalog-landing-icon {
    display: grid;
    place-items: center;
    width: 4.35rem;
    height: 4.35rem;
    border-radius: 22px;
    background: rgba(184, 138, 68, 0.12);
    color: var(--hdt-gold);
    font-size: 1.75rem;
}

.catalog-landing-image {
    width: 6.4rem;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid rgba(107, 79, 63, 0.13);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.58);
}

.catalog-landing-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.catalog-landing-copy {
    min-width: 0;
}

.catalog-landing-copy > span {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--hdt-gold);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.catalog-landing-copy h2 {
    margin: 0 0 0.35rem;
    color: var(--hdt-dark);
    font-size: 1.35rem;
    font-weight: 850;
    line-height: 1.18;
}

.catalog-landing-copy p {
    margin: 0;
    max-width: 46rem;
    color: var(--hdt-muted);
    line-height: 1.65;
}

.catalog-landing-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.catalog-landing-facts div {
    display: grid;
    place-items: center;
    min-height: 5.4rem;
    padding: 0.8rem 0.65rem;
    border: 1px solid rgba(184, 138, 68, 0.16);
    border-radius: var(--hdt-radius-xs);
    background: rgba(255, 255, 255, 0.55);
    text-align: center;
}

.catalog-landing-facts i {
    color: var(--hdt-gold);
    font-size: 1.05rem;
}

.catalog-landing-facts strong {
    color: var(--hdt-dark);
    font-size: 1rem;
    line-height: 1.1;
}

.catalog-landing-facts span {
    color: var(--hdt-muted);
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.2;
}

.catalog-admin-icon-preview {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: rgba(184, 138, 68, 0.10);
    color: var(--hdt-gold);
}

.catalog-product-media {
    display: grid;
    place-items: center;
    position: relative;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(247, 241, 232, 0.7));
}

.catalog-product-media img {
    position: absolute;
    inset: 0.75rem;
    width: calc(100% - 1.5rem);
    height: calc(100% - 1.5rem);
    max-width: none;
    object-fit: contain;
    object-position: center;
}

.catalog-card-kicker-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
}

.catalog-card-kicker-row .section-kicker {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.catalog-variant-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 0.2rem 0 1.1rem;
}

.catalog-variant-info-card {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 3.15rem;
    padding: 0.65rem 0.72rem;
    border: 1px solid rgba(184, 138, 68, 0.18);
    border-radius: var(--hdt-radius-xs);
    background: linear-gradient(135deg, rgba(255, 250, 244, 0.92), rgba(239, 227, 211, 0.42));
    color: var(--hdt-brown);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.24;
}

.catalog-variant-info-card i {
    color: var(--hdt-gold);
    font-size: 1rem;
}

.catalog-card-price {
    display: grid;
    gap: 0.1rem;
}

.catalog-card-price strong {
    color: var(--hdt-dark);
    font-size: 1.02rem;
}

@media (max-width: 991.98px) {
    .catalog-landing-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .catalog-landing-facts {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {
    .catalog-landing-card {
        grid-template-columns: 1fr;
        gap: 0.9rem;
        padding: 1rem;
    }

    .catalog-landing-icon {
        width: 3.4rem;
        height: 3.4rem;
        border-radius: 18px;
        font-size: 1.35rem;
    }

    .catalog-landing-image {
        width: 100%;
        max-width: 14rem;
    }

    .catalog-landing-copy h2 {
        font-size: 1.15rem;
    }

    .catalog-landing-copy p {
        font-size: 0.92rem;
        line-height: 1.55;
    }

    .catalog-landing-facts {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .catalog-landing-facts div {
        min-height: 4.2rem;
    }
}


.section-kicker,
.hero-pill,
.card-badge,
.hero-card-badge,
.room-tag,
.product-note,
.side-badge,
.template-badge,
.mockup-option-badge,
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 999px;
    padding: 0.55rem 0.9rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.section-kicker,
.hero-pill,
.hero-card-badge,
.side-badge,
.template-badge,
.mockup-option-badge {
    background: rgba(184, 138, 68, 0.12);
    color: var(--hdt-gold);
}

.card-badge,
.room-tag,
.product-note {
    background: rgba(31, 26, 23, 0.06);
    color: var(--hdt-text);
}

.status-badge {
    background: rgba(184, 138, 68, 0.11);
    color: var(--hdt-brown);
}

.display-title,
.section-title {
    font-family: "Cormorant Garamond", serif;
    color: var(--hdt-dark);
    line-height: 0.95;
}

.display-title {
    font-size: clamp(3rem, 5.2vw, 4.8rem);
    margin: 0.75rem 0 0.85rem;
    max-width: 11ch;
}

.section-title {
    font-size: clamp(2.4rem, 4vw, 3.8rem);
    margin: 0.7rem 0 0.8rem;
}

.section-heading {
    margin-bottom: 2rem;
}

.section-heading.text-center .section-text {
    margin-inline: auto;
}

.content-section {
    padding: 4.75rem 0;
}

.section-soft {
    background: linear-gradient(180deg, rgba(255, 250, 244, 0.62), rgba(245, 236, 224, 0.52));
}

/* Navbar */
.site-navbar.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

.site-navbar {
    padding: 1rem 0;
    background: rgba(251, 247, 240, 0.78);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid transparent;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.site-navbar .container,
.site-navbar .navbar-collapse,
.site-navbar .navbar-nav {
    display: flex;
    align-items: center;
}

.site-navbar .container {
    gap: 1rem;
}

.site-navbar .navbar-collapse {
    flex: 1 1 auto;
}

.site-navbar .navbar-nav {
    flex-direction: row;
    gap: 0.5rem;
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
}

.site-navbar .navbar-toggler {
    display: none;
}

.site-navbar.is-scrolled {
    background: rgba(255, 250, 244, 0.94);
    border-color: var(--hdt-border);
    box-shadow: 0 14px 34px rgba(58, 40, 24, 0.08);
}

.brand-mark {
    display: inline-flex;
    flex-direction: column;
    text-decoration: none;
    position: relative;
    width: clamp(13.5rem, 19vw, 19rem);
    height: 4rem;
    background: url("../img/logo-hayaldentabloya.png") left center / contain no-repeat;
}

.brand-title-text {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.9rem, 2.2vw, 2.3rem);
    line-height: 0.95;
    color: var(--hdt-dark);
    font-weight: 700;
}

.brand-mark .brand-title-text,
.brand-mark .brand-subtitle {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.brand-subtitle {
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.68rem;
    color: var(--hdt-muted);
    margin-top: 0.35rem;
}

.custom-toggler {
    border: 1px solid var(--hdt-border);
    border-radius: 16px;
    padding: 0.5rem 0.75rem;
}

.navbar-nav .nav-link {
    color: var(--hdt-text);
    font-weight: 700;
    padding-inline: 0.9rem !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: var(--hdt-gold);
}

.site-cart-nav-link {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid rgba(65, 47, 31, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.56);
    min-height: 46px;
}

.site-cart-nav-link .bi {
    font-size: 1.08rem;
    color: var(--hdt-gold);
}

.site-cart-nav-link.active,
.site-cart-nav-link:hover,
.site-cart-nav-link:focus {
    background: rgba(184, 138, 68, 0.12);
    border-color: rgba(184, 138, 68, 0.28);
}

.site-cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--hdt-dark);
    color: var(--hdt-cream);
    font-size: 0.72rem;
    line-height: 1;
}

.hdt-nav-dropdown {
    border: 1px solid rgba(107, 79, 63, 0.14);
    border-radius: 14px;
    background: rgba(255, 250, 244, 0.98);
    box-shadow: 0 18px 44px rgba(31, 26, 23, 0.13);
    padding: 0.45rem;
}

.hdt-nav-dropdown .dropdown-item {
    border-radius: 10px;
    color: var(--hdt-dark);
    font-weight: 700;
    padding: 0.58rem 0.78rem;
}

.hdt-nav-dropdown .dropdown-item:hover,
.hdt-nav-dropdown .dropdown-item:focus {
    background: rgba(184, 138, 68, 0.11);
    color: var(--hdt-gold);
}

.nav-cta,
.nav-cta-secondary {
    margin-top: 0.4rem;
}

/* Buttons */
.btn-hdt-primary,
.btn-hdt-outline,
.btn-hdt-soft,
.btn-primary-custom,
.btn-outline-custom {
    border-radius: 18px;
    padding: 0.88rem 1.3rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.btn-hdt-primary,
.btn-primary-custom {
    background: var(--hdt-dark);
    color: var(--hdt-cream);
    border: 1px solid var(--hdt-dark);
    box-shadow: 0 16px 30px rgba(31, 22, 17, 0.18);
}

.btn-hdt-primary:hover,
.btn-hdt-primary:focus,
.btn-primary-custom:hover,
.btn-primary-custom:focus {
    background: #3a2a1f;
    border-color: #3a2a1f;
    color: var(--hdt-cream);
    transform: translateY(-1px);
}

.btn-hdt-outline,
.btn-outline-custom {
    background: rgba(255, 255, 255, 0.58);
    color: var(--hdt-text);
    border: 1px solid rgba(65, 47, 31, 0.18);
}

.btn-hdt-outline:hover,
.btn-hdt-outline:focus,
.btn-outline-custom:hover,
.btn-outline-custom:focus {
    background: rgba(255, 255, 255, 0.92);
    color: var(--hdt-dark);
    border-color: rgba(65, 47, 31, 0.32);
}

.btn-hdt-soft {
    background: rgba(184, 138, 68, 0.10);
    color: var(--hdt-brown);
    border: 1px solid rgba(184, 138, 68, 0.12);
}

.btn-hdt-soft:hover,
.btn-hdt-soft:focus {
    background: rgba(184, 138, 68, 0.18);
    color: var(--hdt-dark);
}

.product-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 1rem;
    color: var(--hdt-muted);
    font-weight: 800;
    text-decoration: none;
}

.product-back-link:hover,
.product-back-link:focus {
    color: var(--hdt-dark);
}

.product-detail-layout {
    --product-gap: 1.5rem;
}

.product-gallery-card,
.product-info-card {
    overflow: hidden;
}

.product-gallery-card {
    display: grid;
    gap: 0.85rem;
    padding: 1.15rem;
}

.product-tabs-card {
    display: grid;
    gap: 1rem;
    margin-top: 0;
    padding: 1.25rem;
}

.product-tab-buttons {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    gap: 0.55rem;
    border-radius: 1rem;
    padding: 0.35rem;
    background: rgba(107, 79, 63, 0.07);
}

.product-tab-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.65rem;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    padding: 0.55rem 1rem;
    background: transparent;
    color: var(--hdt-muted);
    font: inherit;
    font-weight: 900;
    line-height: 1.15;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.product-tab-button:hover,
.product-tab-button:focus {
    color: var(--hdt-dark);
}

.product-tab-button.is-active {
    border-color: rgba(65, 47, 31, 0.18);
    background: var(--hdt-dark);
    color: var(--hdt-cream);
    box-shadow: 0 12px 22px rgba(31, 26, 23, 0.13);
}

.product-tab-panel {
    min-height: 13rem;
}

.product-tab-panel[hidden] {
    display: none;
}

.product-empty-reviews {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 7.5rem;
    border: 1px dashed rgba(107, 79, 63, 0.20);
    border-radius: 1rem;
    padding: 1rem;
    color: var(--hdt-muted);
    background: rgba(255, 255, 255, 0.42);
}

.product-empty-reviews i {
    color: var(--hdt-gold);
    font-size: 1.6rem;
}

.product-empty-reviews strong,
.product-empty-reviews span {
    display: block;
}

.product-empty-reviews strong {
    color: var(--hdt-dark);
}

.product-review-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    border-radius: 999px;
    padding: 0.45rem 0.75rem;
    background: rgba(184, 138, 68, 0.10);
    color: var(--hdt-muted);
    font-weight: 800;
}

.product-review-summary strong {
    color: var(--hdt-dark);
}

.product-review-list {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
}

.product-review-card {
    border: 1px solid rgba(107, 79, 63, 0.12);
    border-radius: 1rem;
    padding: 0.9rem;
    background: rgba(255, 255, 255, 0.48);
}

.product-review-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}

.product-review-head span {
    color: var(--hdt-gold);
    letter-spacing: 0.04em;
}

.product-review-card p {
    margin-bottom: 0.4rem;
    color: var(--hdt-muted);
}

.product-review-card small {
    color: var(--hdt-muted);
}

.product-review-form {
    margin-top: 1rem;
    border: 1px solid rgba(107, 79, 63, 0.12);
    border-radius: 1rem;
    padding: 1.15rem;
    background: rgba(255, 252, 247, 0.78);
}

.product-review-form h3 {
    margin: 0 0 0.85rem;
    color: var(--hdt-dark);
    font-size: 1rem;
    font-weight: 900;
}

.product-review-form .form-label {
    margin-bottom: 0.35rem;
    color: var(--hdt-text);
    font-size: 0.88rem;
    font-weight: 800;
}

.product-review-form textarea {
    min-height: 8.5rem;
    resize: vertical;
}

.product-review-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.product-review-actions .btn {
    min-width: 9.5rem;
}

.product-media-frame {
    display: grid;
    place-items: center;
    position: relative;
    min-height: 23rem;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(255, 250, 244, 0.72)),
        rgba(107, 79, 63, 0.05);
}

.product-media-frame img {
    display: block;
    position: absolute;
    inset: 1rem;
    width: calc(100% - 2rem);
    height: calc(100% - 2rem);
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: center;
}

.product-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr));
    gap: 0.65rem;
    margin-top: 0.85rem;
}

.product-gallery-thumb {
    display: block;
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid rgba(107, 79, 63, 0.16);
    border-radius: 0.85rem;
    padding: 0;
    background: rgba(255, 250, 244, 0.78);
    cursor: pointer;
}

.product-gallery-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-gallery-thumb.is-active {
    border-color: var(--hdt-dark);
    box-shadow: 0 0 0 2px rgba(63, 42, 32, 0.12);
}

.product-image-placeholder {
    display: grid;
    place-items: center;
    gap: 0.4rem;
    color: var(--hdt-muted);
    font-weight: 800;
}

.product-image-placeholder i {
    font-size: 2rem;
    color: var(--hdt-gold);
}

.product-gallery-note,
.product-trust-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.product-gallery-note span,
.product-trust-grid div {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 3rem;
    color: var(--hdt-muted);
    font-size: 0.92rem;
    font-weight: 800;
}

.product-gallery-note i,
.product-trust-grid i {
    color: var(--hdt-gold);
    font-size: 1.1rem;
}

.product-tabs-column {
    display: grid;
    gap: 0.9rem;
}

.product-service-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.product-service-strip span {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.5rem;
    min-height: 5.15rem;
    border: 1px solid rgba(107, 79, 63, 0.12);
    border-radius: 16px;
    background: rgba(255, 252, 247, 0.82);
    color: var(--hdt-muted);
    text-align: center;
    font-size: 0.88rem;
    font-weight: 850;
    line-height: 1.25;
    box-shadow: 0 12px 26px rgba(53, 38, 27, 0.05);
}

.product-service-strip i {
    color: var(--hdt-gold);
    display: inline-grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    background: rgba(184, 138, 68, 0.10);
    font-size: 1rem;
}

.product-info-card {
    display: grid;
    gap: 0.95rem;
    padding: 1.45rem;
}

.product-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.product-stock-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 999px;
    padding: 0.55rem 0.85rem;
    background: rgba(25, 135, 84, 0.10);
    color: #176b45;
    font-size: 0.82rem;
    font-weight: 900;
}

.product-page-title {
    margin: 0.15rem 0 0;
    max-width: 18ch;
    font-size: clamp(2.15rem, 3.25vw, 3.35rem);
    line-height: 1.03;
    letter-spacing: 0;
}

.product-buy-box {
    display: grid;
    gap: 1rem;
    margin-top: 0.25rem;
    padding-block: 1.1rem;
    border-block: 1px solid var(--hdt-border);
}

.product-price-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.product-price-strip div {
    display: grid;
    gap: 0.1rem;
}

.product-price-strip span {
    color: var(--hdt-muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.product-price-strip strong {
    color: var(--hdt-dark);
    font-size: clamp(1.45rem, 2.3vw, 2rem);
    line-height: 1.1;
    white-space: nowrap;
}

.product-field {
    margin-bottom: 0;
}

.product-option-panel {
    display: grid;
    gap: 1rem;
}

.product-option-group {
    display: grid;
    gap: 0.45rem;
}

.product-option-group .form-label {
    margin-bottom: 0;
}

.product-option-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.product-option-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.6rem;
    border: 1px solid rgba(65, 47, 31, 0.18);
    border-radius: 0.75rem;
    padding: 0.55rem 0.85rem;
    background: rgba(255, 255, 255, 0.72);
    color: var(--hdt-text);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 850;
    line-height: 1.2;
    text-align: center;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.product-option-button:hover,
.product-option-button:focus {
    border-color: rgba(65, 47, 31, 0.34);
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-1px);
}

.product-option-button.is-selected {
    border-color: var(--hdt-dark);
    background: var(--hdt-dark);
    color: var(--hdt-cream);
    box-shadow: 0 12px 22px rgba(31, 26, 23, 0.14);
}

.product-option-button:disabled {
    cursor: not-allowed;
    opacity: 0.42;
    transform: none;
}

.product-selected-variant {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    border-radius: 999px;
    padding: 0.45rem 0.75rem;
    background: rgba(184, 138, 68, 0.10);
    color: var(--hdt-muted);
    font-size: 0.82rem;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.product-quantity-input {
    width: min(100%, 9rem);
}

.product-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.product-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.product-detail-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    padding-top: 0.25rem;
}

.product-detail-list div {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.05rem 0.55rem;
    align-items: center;
    min-width: 0;
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(107, 79, 63, 0.11);
}

.product-detail-list i {
    grid-row: span 2;
    color: var(--hdt-gold);
}

.product-detail-list span {
    color: var(--hdt-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.product-detail-list strong {
    min-width: 0;
    color: var(--hdt-text);
    font-size: 0.94rem;
    overflow-wrap: anywhere;
}

.product-section-title {
    margin: 0 0 0.75rem;
    color: var(--hdt-dark);
    font-size: 1.1rem;
    font-weight: 900;
}

.product-description {
    max-width: 58rem;
}

.product-description :is(h1, h2, h3, h4) {
    margin: 1rem 0 0.5rem;
    color: var(--hdt-dark);
    font-family: var(--hdt-font-body);
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.28;
}

.product-description :is(p, ul, ol) {
    margin: 0 0 0.8rem;
}

.product-description :is(ul, ol) {
    padding-left: 1.15rem;
}

.product-description li {
    margin-bottom: 0.35rem;
}

.product-description strong {
    color: var(--hdt-text);
}

.product-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.55rem;
    color: var(--hdt-muted);
    font-size: 0.86rem;
    font-weight: 800;
}

.product-breadcrumb a {
    color: var(--hdt-muted);
    text-decoration: none;
}

.product-breadcrumb a:hover,
.product-breadcrumb a:focus {
    color: var(--hdt-dark);
}

.product-breadcrumb i {
    color: rgba(107, 79, 63, 0.42);
    font-size: 0.72rem;
}

.product-breadcrumb span {
    color: var(--hdt-dark);
    overflow-wrap: anywhere;
}

.related-products-section {
    margin-top: 2.1rem;
}

.related-products-head {
    display: grid;
    gap: 0.45rem;
    margin-bottom: 1rem;
}

.related-products-head h2 {
    margin: 0;
    color: var(--hdt-dark);
    font-family: var(--hdt-serif);
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1;
}

.related-products-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}
.related-products-carousel .related-products-head {
    display: block;
}

.related-products-title {
    display: grid;
    gap: 0.45rem;
}

.related-products-stage {
    position: relative;
}
.related-products-controls {
    position: absolute;
    inset-inline: -1.05rem;
    top: 50%;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    pointer-events: none;
    transform: translateY(-50%);
}

.related-products-control {
    pointer-events: auto;
    width: 2.9rem;
    height: 2.9rem;
    border: 1px solid rgba(82, 62, 48, 0.16);
    border-radius: 999px;
    background: rgba(255, 250, 244, 0.94);
    color: var(--hdt-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.8rem 1.8rem rgba(82, 62, 48, 0.10);
    transition: transform 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
}

.related-products-control:hover,
.related-products-control:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(82, 62, 48, 0.28);
}

.related-products-control:disabled {
    opacity: 0.38;
    pointer-events: none;
    box-shadow: none;
}

.related-products-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    margin-inline: -0.35rem;
    padding: 0.35rem;
}

.related-products-viewport::-webkit-scrollbar {
    display: none;
}

.related-products-carousel .related-products-grid {
    display: flex;
    grid-template-columns: none;
    gap: 1.25rem;
}

.related-products-carousel .related-product-card {
    flex: 0 0 calc((100% - 2.5rem) / 3);
    min-width: 0;
    scroll-snap-align: start;
}

.related-product-card {
    padding: 1.15rem;
}

.related-product-card .catalog-product-media {
    min-height: 13rem;
}

.catalog-product-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--hdt-gold);
    font-size: 1.65rem;
}

@media (min-width: 992px) {
    .product-detail-layout {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1.5rem;
        row-gap: 1rem;
        margin-right: 0;
        margin-left: 0;
    }

    .product-gallery-column,
    .product-info-column,
    .product-tabs-column {
        width: 100%;
        max-width: none;
        padding-right: 0;
        padding-left: 0;
    }

    .product-gallery-column {
        grid-column: 1;
        grid-row: 1;
    }

    .product-info-column {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .product-tabs-column {
        grid-column: 1;
        grid-row: 2;
    }

    .product-info-card {
        position: sticky;
        top: 7.25rem;
    }
}

@media (max-width: 767.98px) {
    .product-back-link {
        margin-bottom: 0.75rem;
        font-size: 0.92rem;
    }

    .product-media-frame {
        min-height: 19rem;
        aspect-ratio: 1 / 1;
        border-radius: 18px;
    }

    .product-media-frame img {
        inset: 0.75rem;
        width: calc(100% - 1.5rem);
        height: calc(100% - 1.5rem);
    }

    .product-tab-buttons {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .product-tab-button {
        width: 100%;
        padding-inline: 0.6rem;
    }

    .product-gallery-note,
    .product-trust-grid,
    .product-detail-list,
    .product-service-strip,
    .product-price-strip {
        grid-template-columns: 1fr;
        gap: 0.55rem;
    }

    .product-gallery-note span,
    .product-service-strip span,
    .product-trust-grid div {
        min-height: 4.15rem;
    }

    .product-page-title {
        max-width: 100%;
        font-size: clamp(1.85rem, 8vw, 2.35rem);
        line-height: 1.08;
    }

    .product-price-strip strong {
        font-size: 1.5rem;
    }

    .product-quantity-input {
        width: 100%;
    }

    .product-option-buttons {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-option-button {
        width: 100%;
        min-height: 2.7rem;
        padding-inline: 0.5rem;
        font-size: 0.84rem;
    }

    .catalog-category-chip {
        min-width: 7.25rem;
        min-height: 5.35rem;
        padding: 0.75rem 0.85rem;
        font-size: 0.8rem;
    }

    .catalog-category-chip i {
        width: 2.05rem;
        height: 2.05rem;
        font-size: 1rem;
    }

    .product-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .product-actions .btn {
        width: 100%;
    }

    .product-breadcrumb {
        font-size: 0.82rem;
    }


    .related-products-grid:not([data-related-products-track]) {
        grid-template-columns: 1fr;
    }

    .related-products-carousel .related-product-card {
        flex-basis: min(82vw, 22rem);
    }

    .related-products-head h2 {
        font-size: 2rem;
    }
}

.btn-icon {
    width: 42px;
    height: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1rem;
    font-weight: 700;
    color: var(--hdt-gold);
    text-decoration: none;
}

.text-link:hover {
    color: var(--hdt-dark);
}

/* Cards */
.hero-section {
    position: relative;
    padding: 9.75rem 0 5rem;
}

.hero-copy {
    max-width: 38rem;
}

.hero-actions,
.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.35rem;
}

.admin-action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 1.15rem;
}

.hero-badges span {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 0.82rem;
    background: rgba(255, 250, 243, 0.9);
    border: 1px solid var(--hdt-border);
    border-radius: 16px;
    box-shadow: var(--hdt-shadow-sm);
    color: var(--hdt-text);
    font-size: 0.86rem;
}

.hero-mockup-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.9fr;
    gap: 1rem;
    margin-top: 1.2rem;
}

.hero-side-cards {
    display: grid;
    gap: 1rem;
}

.mini-preview-card {
    background: rgba(255, 255, 255, 0.58);
    border-radius: 22px;
    padding: 1rem;
    min-height: 11rem;
}

.mini-preview-card h3 {
    font-size: 1.15rem;
    margin: 0.9rem 0 0.45rem;
}

.mini-preview-card p {
    margin: 0;
    color: var(--hdt-muted);
    font-size: 0.95rem;
}

.muted-card {
    background: rgba(255, 252, 247, 0.8);
}

.mini-frame,
.mockup-frame,
.mockup-room-frame {
    border-radius: 20px;
}

.mini-frame {
    padding: 0.45rem;
    width: 100%;
    aspect-ratio: 4 / 5;
}

.mini-frame-warm {
    background: linear-gradient(145deg, #b28b63 0%, #d3b08c 100%);
}

.mini-frame-light {
    background: linear-gradient(145deg, #efe5d7 0%, #dccdbc 100%);
}

.mockup-frame-dark {
    background: linear-gradient(145deg, #1c1715 0%, #403129 100%);
}

.mini-art,
.mockup-room-art,
.mockup-art-abstract {
    width: 100%;
    height: 100%;
    border-radius: 16px;
}

.mini-art-botanical {
    background:
        radial-gradient(circle at 70% 26%, rgba(255, 255, 255, 0.36), transparent 26%),
        linear-gradient(135deg, #c8d4c2 0%, #e5dccd 50%, #a6baa2 100%);
}

.mini-art-line {
    background:
        linear-gradient(90deg, rgba(86, 67, 48, 0.08), rgba(86, 67, 48, 0.08)),
        linear-gradient(180deg, #faf4ec 0%, #e8dccd 100%);
    position: relative;
}

.mini-art-line::after {
    content: "";
    position: absolute;
    inset: 18% 28%;
    border: 2px solid rgba(76, 57, 38, 0.18);
    border-radius: 36% 48% 42% 44%;
}

.hero-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1rem;
}

.hero-specs span {
    padding: 0.65rem 0.9rem;
    background: rgba(255, 255, 255, 0.68);
    border-radius: 14px;
    font-size: 0.9rem;
    color: var(--hdt-muted);
}

/* Home Page Editorial Layout */
.home-hero {
    padding: 7.45rem 0 2rem;
}

.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 14% 22%, rgba(184, 138, 68, 0.16), transparent 18rem),
        radial-gradient(circle at 84% 28%, rgba(107, 79, 63, 0.10), transparent 22rem);
}

.home-hero-shell {
    position: relative;
    padding: clamp(1rem, 1.7vw, 1.35rem);
    border: 1px solid rgba(107, 79, 63, 0.10);
    border-radius: 1.8rem;
    background:
        linear-gradient(135deg, rgba(255, 250, 244, 0.70), rgba(239, 227, 211, 0.45)),
        radial-gradient(circle at 80% 0%, rgba(184, 138, 68, 0.12), transparent 26rem);
    box-shadow: 0 34px 90px rgba(53, 38, 27, 0.10);
    overflow: hidden;
}

.home-hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 0.9rem;
}

.home-hero-metrics div {
    padding: 0.62rem 0.75rem;
    border: 1px solid rgba(107, 79, 63, 0.12);
    border-radius: 1.1rem;
    background: rgba(255, 250, 244, 0.72);
}

.home-hero-metrics strong,
.home-hero-metrics span {
    display: block;
}

.home-hero-metrics strong {
    color: var(--hdt-dark);
    line-height: 1.1;
}

.home-hero-metrics span {
    color: var(--hdt-muted);
    font-size: 0.78rem;
}

.home-visual-board {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 0.9rem;
    min-height: clamp(32rem, 38vw, 37rem);
    padding: 0.7rem;
    background:
        linear-gradient(180deg, rgba(255, 250, 244, 0.94), rgba(239, 227, 211, 0.82)),
        linear-gradient(90deg, rgba(107, 79, 63, 0.05), transparent);
}

.home-visual-wall {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 1rem;
    min-height: 0;
    height: 100%;
    padding: 1rem;
    overflow: hidden;
    border-radius: 1.7rem;
    background:
        linear-gradient(90deg, rgba(107, 79, 63, 0.045) 1px, transparent 1px) 0 0 / 4.5rem 100%,
        linear-gradient(180deg, #f7efe4 0%, #f2e5d5 70%, #d8b493 70%, #cda57f 100%);
}

.home-visual-wall::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30%;
    height: 1px;
    background: rgba(107, 79, 63, 0.14);
}

.home-visual-wall .hero-card-badge {
    position: static;
    background: rgba(255, 250, 244, 0.86);
    backdrop-filter: blur(10px);
}

.home-visual-toolbar {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.home-frame-note {
    display: inline-flex;
    align-items: center;
    min-height: 2.35rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid rgba(107, 79, 63, 0.10);
    border-radius: 999px;
    background: rgba(255, 250, 244, 0.78);
    color: var(--hdt-text);
    font-size: 0.8rem;
    font-weight: 800;
    box-shadow: var(--hdt-shadow-sm);
    backdrop-filter: blur(10px);
}

.home-main-poster {
    position: absolute;
    left: 50%;
    top: 48%;
    width: min(36%, 14rem);
    aspect-ratio: 3 / 4;
    transform: translate(-50%, -50%);
    padding: 0.65rem;
    border-radius: 1.3rem;
    background: linear-gradient(145deg, #1f1a17, #4b392d);
    box-shadow: 0 2rem 3.5rem rgba(31, 26, 23, 0.22);
}

.home-poster-art {
    width: 100%;
    height: 100%;
    border-radius: 0.85rem;
    background:
        radial-gradient(circle at 74% 20%, rgba(255, 248, 226, 0.96) 0 8%, transparent 8.5%),
        radial-gradient(circle at 28% 72%, rgba(184, 138, 68, 0.42) 0 14%, transparent 14.5%),
        linear-gradient(145deg, rgba(35, 40, 38, 0.92), rgba(11, 17, 17, 0.96)),
        linear-gradient(90deg, transparent 20%, rgba(255, 255, 255, 0.15) 45%, transparent 72%);
    position: relative;
    overflow: hidden;
}

.home-frame-showcase {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: clamp(0.7rem, 1.15vw, 1rem);
    z-index: 2;
    min-height: 0;
}

.home-frame-card {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-content: stretch;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0.58rem;
    border: 1px solid rgba(107, 79, 63, 0.11);
    border-radius: 1.35rem;
    background: rgba(255, 250, 244, 0.72);
    box-shadow: 0 1.35rem 3rem rgba(31, 26, 23, 0.12);
    backdrop-filter: blur(10px);
}

.home-frame-card img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    border-radius: 1rem;
    background: #fff;
}

.home-frame-card figcaption {
    display: grid;
    gap: 0.12rem;
    justify-self: stretch;
    min-height: 3rem;
    padding: 0.48rem 0.62rem;
    border-radius: 0.95rem;
    background: rgba(255, 250, 244, 0.9);
    color: var(--hdt-text);
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.15;
    text-align: left;
}

.home-frame-card figcaption span {
    color: var(--hdt-muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.home-frame-card-gold,
.home-frame-card-silver {
    transform: none;
    opacity: 0.94;
}

.home-frame-card-black {
    z-index: 2;
    transform: none;
    border-color: rgba(184, 138, 68, 0.28);
}

.home-poster-art::before,
.home-poster-art::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    border: 2px solid rgba(255, 250, 244, 0.18);
}

.home-poster-art::before {
    width: 82%;
    height: 42%;
    left: 12%;
    bottom: 15%;
    transform: rotate(-12deg);
}

.home-poster-art::after {
    width: 54%;
    height: 32%;
    right: -8%;
    bottom: 23%;
    transform: rotate(22deg);
}

.home-studio-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
    margin-top: 0;
    padding: 0.62rem;
    border-radius: 1.2rem;
    background: rgba(239, 227, 211, 0.52);
    border: 1px solid rgba(107, 79, 63, 0.08);
}

.home-studio-features span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.85rem;
    padding: 0.52rem 0.58rem;
    border: 1px solid rgba(107, 79, 63, 0.12);
    border-radius: 0.95rem;
    background: rgba(255, 250, 244, 0.82);
    color: var(--hdt-text);
    font-size: 0.76rem;
    font-weight: 750;
    line-height: 1.25;
    text-align: center;
    box-shadow: var(--hdt-shadow-sm);
}

.home-studio-features i {
    color: var(--hdt-gold);
    font-size: 0.95rem;
    flex: 0 0 auto;
}

.home-mini-poster {
    position: absolute;
    z-index: 2;
    width: 6.3rem;
    aspect-ratio: 4 / 5;
    padding: 0.45rem;
    border-radius: 1rem;
    background: rgba(255, 250, 244, 0.82);
    box-shadow: 0 18px 38px rgba(31, 26, 23, 0.12);
}

.home-mini-poster-left {
    left: 10%;
    top: 32%;
    transform: rotate(-7deg);
}

.home-mini-poster-right {
    right: 12%;
    bottom: 16%;
    transform: rotate(6deg);
}

.home-split-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.7fr);
    align-items: end;
    gap: 2rem;
}

.home-split-heading .section-text {
    margin: 0;
}

.home-process-section {
    padding-top: 3.5rem;
}

.home-process-grid {
    position: relative;
}

.home-process-card {
    position: relative;
    overflow: hidden;
}

.home-process-card::after {
    content: "";
    position: absolute;
    right: 1.4rem;
    bottom: 1.2rem;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: rgba(184, 138, 68, 0.07);
}

.home-idea-grid {
    align-items: stretch;
}

.home-idea-card {
    position: relative;
    overflow: hidden;
    min-height: 14rem;
}

.home-idea-card::before {
    content: "";
    position: absolute;
    right: -2rem;
    top: -2rem;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
    background: rgba(184, 138, 68, 0.09);
}

.home-idea-card-featured {
    min-height: 100%;
    background:
        radial-gradient(circle at 86% 16%, rgba(184, 138, 68, 0.18), transparent 9rem),
        var(--hdt-surface);
}

.home-idea-card-featured h3 {
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    font-family: "Cormorant Garamond", serif;
    line-height: 0.98;
}

.home-style-grid .style-card {
    min-height: 100%;
}

.home-style-grid .style-swatch {
    min-height: 10rem;
}

.home-room-section .room-card {
    position: relative;
    overflow: hidden;
}

.home-room-section .room-card::after {
    content: "";
    position: absolute;
    inset: auto 1.5rem 1.1rem auto;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    border: 1px solid rgba(184, 138, 68, 0.18);
    background: linear-gradient(135deg, rgba(184, 138, 68, 0.08), rgba(255, 250, 244, 0.4));
}


.home-process-grid,
.home-idea-grid,
.home-style-grid,
.home-room-section .row,
.home-products-section .row {
    --bs-gutter-y: 1rem;
}

.home-process-card,
.home-idea-card,
.home-style-grid .style-card,
.home-room-section .room-card,
.home-products-section .product-card,
.home-reasons-section .reason-card {
    padding: 1.05rem;
}

.home-process-card p,
.home-idea-card p,
.home-style-grid .style-card p,
.home-room-section .room-card p,
.home-products-section .product-card p {
    margin-bottom: 0.75rem;
    line-height: 1.45;
}

.home-process-card .feature-step {
    width: 2.45rem;
    height: 2.45rem;
    margin-bottom: 0.75rem;
}

.home-idea-card {
    min-height: 10.75rem;
}

.home-idea-card-featured h3 {
    font-size: clamp(1.45rem, 2.4vw, 2.15rem);
}

.home-style-grid .style-swatch {
    min-height: 7.75rem;
    margin-bottom: 0.75rem;
}

.home-lightbox-section {
    padding-top: 0;
}

.home-lightbox-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.42fr);
    align-items: center;
    gap: clamp(1.1rem, 3vw, 2.2rem);
    padding: clamp(1.15rem, 3vw, 2rem);
    border: 1px solid rgba(107, 79, 63, 0.13);
    border-radius: 1.5rem;
    background: linear-gradient(135deg, rgba(255, 250, 244, 0.96), rgba(245, 238, 229, 0.72));
    box-shadow: var(--hdt-shadow);
}

.home-lightbox-copy .section-title {
    max-width: 38rem;
    margin-bottom: 0.75rem;
}

.home-lightbox-copy .section-text {
    max-width: 43rem;
}

.home-lightbox-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    margin: 1rem 0 1.15rem;
}

.home-lightbox-points span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.8rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid rgba(107, 79, 63, 0.14);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.7);
    font-weight: 800;
    color: var(--hdt-ink);
}

.home-lightbox-points i {
    color: var(--hdt-gold);
}

.home-lightbox-visual {
    justify-self: end;
    width: min(100%, 18rem);
}

.home-lightbox-visual img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border: 0.65rem solid #1f1a17;
    border-radius: 1.25rem;
    box-shadow: 0 1.25rem 2.5rem rgba(31, 26, 23, 0.16);
    display: block;
}

@media (max-width: 991.98px) {
    .home-lightbox-panel {
        grid-template-columns: 1fr;
    }

    .home-lightbox-visual {
        justify-self: start;
        width: min(100%, 22rem);
    }
}

@media (max-width: 575.98px) {
    .home-lightbox-points {
        grid-template-columns: 1fr;
    }
}
.home-mockup-panel {
    padding: clamp(1.2rem, 3vw, 2.25rem);
    border: 1px solid rgba(107, 79, 63, 0.13);
    border-radius: 2rem;
    background:
        linear-gradient(135deg, rgba(255, 250, 244, 0.86), rgba(239, 227, 211, 0.62)),
        radial-gradient(circle at 88% 12%, rgba(184, 138, 68, 0.14), transparent 18rem);
    box-shadow: var(--hdt-shadow);
}

.home-products-section .product-card {
    text-align: center;
}

.home-reasons-section .reason-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 7rem;
}

.feature-card,
.prompt-card,
.style-card,
.room-card,
.product-card,
.reason-card {
    padding: 1.5rem;
    height: 100%;
}

.style-card {
    display: flex;
    flex-direction: column;
}

.style-card p {
    flex-grow: 1;
}

.feature-step {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(184, 138, 68, 0.18), rgba(184, 138, 68, 0.05));
    color: var(--hdt-gold);
    font-weight: 800;
    margin-bottom: 1rem;
}

.feature-card h3,
.prompt-card h3,
.style-card h3,
.room-card h3,
.product-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.8rem;
}

.style-swatch {
    width: 100%;
    min-height: 13.5rem;
    aspect-ratio: 4 / 3;
    border-radius: 20px;
    margin-bottom: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.style-swatch.has-cover {
    padding: 0.75rem;
    background-color: rgba(255, 250, 244, 0.9);
    box-shadow: inset 0 -1rem 2rem rgba(31, 26, 23, 0.05);
}

.style-swatch-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    border-radius: 16px;
}

.style-minimal { background: linear-gradient(135deg, #f2ebdf 0%, #dfd5c7 100%); }
.style-boho { background: linear-gradient(135deg, #cfa57f 0%, #ebd0b6 55%, #a97d59 100%); }
.style-abstract { background: linear-gradient(135deg, #cab39f 0%, #eaded2 30%, #bc9271 100%); }
.style-botanical { background: linear-gradient(135deg, #cfd7c8 0%, #9ab091 50%, #e9dfd1 100%); }
.style-japandi { background: linear-gradient(135deg, #ddd0be 0%, #b9a489 55%, #f1e7d8 100%); }
.style-mono { background: linear-gradient(135deg, #2a2a2a 0%, #c8c8c8 100%); }
.style-kids { background: linear-gradient(135deg, #f1d7c7 0%, #d2e0cb 50%, #f6edc8 100%); }
.style-luxury { background: linear-gradient(135deg, #1f1a17 0%, #8f7149 45%, #e5d0af 100%); }

.product-icon,
.reason-icon {
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(184, 138, 68, 0.10);
    color: var(--hdt-gold);
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.reason-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.faq-list {
    display: grid;
    gap: 1rem;
}

.faq-card {
    overflow: hidden;
}

.faq-toggle {
    width: 100%;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem 1.5rem;
    text-align: left;
    font-weight: 700;
    color: var(--hdt-dark);
}

.faq-toggle i {
    color: var(--hdt-gold);
    transition: transform 0.2s ease;
}

.faq-toggle.is-open i {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 1.5rem;
    transition: max-height 0.25s ease, padding-bottom 0.25s ease;
}

.faq-answer p {
    margin-bottom: 0;
}

.faq-answer.is-open {
    max-height: 15rem;
    padding-bottom: 1.35rem;
}

/* Forms */
.form-card,
.checkout-step-card,
.approval-box {
    padding: 1.5rem;
}

.form-section + .form-section,
.checkout-step-card + .checkout-step-card {
    margin-top: 1.25rem;
}

.form-section-title {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--hdt-dark);
}

.help-text,
.required-mark {
    color: var(--hdt-muted);
    font-size: 0.92rem;
}

.required-mark {
    color: var(--hdt-danger);
}

.form-control,
.form-select {
    min-height: 52px;
    border-radius: 16px;
    border-color: rgba(102, 78, 52, 0.18);
    padding-inline: 1rem;
}

textarea.form-control {
    min-height: 140px;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: rgba(184, 138, 68, 0.45);
    box-shadow: 0 0 0 0.25rem rgba(184, 138, 68, 0.12);
}

.product-type-item {
    border: 1px solid var(--hdt-border);
    border-radius: 20px;
    padding: 1rem 1rem 1rem 3rem;
    position: relative;
    background: rgba(255, 255, 255, 0.72);
}

.product-type-item input {
    position: absolute;
    left: 1rem;
    top: 1.1rem;
}

/* Image gallery */
.image-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.image-card {
    overflow: hidden;
    height: 100%;
}

.image-card-media,
.image-preview {
    aspect-ratio: 3 / 4;
    background: linear-gradient(135deg, #efe3d5 0%, #d8c0a7 58%, #b58c69 100%);
    overflow: hidden;
}

.image-card-media img,
.image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.image-card-body,
.image-body {
    padding: 1.25rem;
}

.image-meta-badges,
.meta-row,
.template-meta,
.cart-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.image-meta-badges span,
.meta-chip,
.template-meta span,
.cart-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.38rem 0.7rem;
    border-radius: 999px;
    background: rgba(36, 28, 21, 0.06);
    color: var(--hdt-muted);
    font-size: 0.82rem;
}

.image-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
}

.gallery-card {
    display: flex;
    flex-direction: column;
}

.gallery-card-media {
    display: block;
    color: inherit;
    text-decoration: none;
}

.gallery-card-media img {
    transition: transform 0.25s ease;
}

.gallery-card:hover .gallery-card-media img {
    transform: scale(1.035);
}

.gallery-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.gallery-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--hdt-muted);
    font-size: 0.8rem;
}

.gallery-card-title {
    display: -webkit-box;
    min-height: 4.15rem;
    margin: 0.9rem 0 0.8rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 1.15rem;
    line-height: 1.2;
}

.gallery-card-tags {
    min-height: 4.45rem;
    align-content: flex-start;
    margin-bottom: 1rem;
}

.gallery-card-tags span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-badge.status-green {
    background: #e4f7eb;
    color: #1f7a42;
    border-color: rgba(31, 122, 66, .25);
}

.gallery-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: auto;
}

.gallery-card-actions form {
    display: contents;
}

.gallery-card-actions .btn {
    width: 100%;
    min-height: 2.75rem;
    padding-right: 0.65rem;
    padding-left: 0.65rem;
    white-space: normal;
}

/* Generate page */
.template-section-title {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    color: var(--hdt-dark);
    line-height: 1;
    margin-bottom: 0.55rem;
}

.template-filter-bar {
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.template-filter-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.7rem 1rem;
    text-decoration: none;
    color: var(--hdt-text);
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid var(--hdt-border);
    font-weight: 700;
}

.template-filter-pill.is-active,
.template-filter-pill:hover {
    background: rgba(184, 138, 68, 0.12);
    color: var(--hdt-gold);
}

.template-card {
    padding: 1.05rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.template-preview {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    max-height: 210px;
    padding: 0.7rem;
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.36), transparent 24%),
        linear-gradient(135deg, #efe3d5 0%, #d8c0a7 58%, #b58c69 100%);
    border: 1px solid rgba(255, 255, 255, 0.45);
}

.template-preview img {
    width: min(86%, 230px);
    height: min(86%, 178px);
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 5px;
    box-shadow: 0 12px 28px rgba(53, 38, 27, 0.14);
}

.template-preview.has-image {
    background:
        radial-gradient(circle at 24% 20%, rgba(255, 255, 255, 0.45), transparent 26%),
        linear-gradient(90deg, #efe5d9 0%, #d9c7b6 58%, #c7a98e 100%);
    border-color: rgba(107, 79, 63, 0.08);
}

.row > [class*="col-"]:nth-child(3n + 1) .template-preview.has-image {
    background:
        radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.42), transparent 25%),
        linear-gradient(90deg, #eee7dc 0%, #dbcab7 60%, #c9ad91 100%);
}

.row > [class*="col-"]:nth-child(3n + 2) .template-preview.has-image {
    background:
        radial-gradient(circle at 72% 18%, rgba(255, 255, 255, 0.36), transparent 24%),
        linear-gradient(90deg, #f0e5da 0%, #d7c2ad 58%, #b99373 100%);
}

.row > [class*="col-"]:nth-child(3n) .template-preview.has-image {
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.28), transparent 25%),
        linear-gradient(90deg, #4a3427 0%, #8b6a4d 48%, #c3a788 100%);
}

.generator-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.style-guide-box {
    padding: 1.1rem;
    border: 1px solid var(--hdt-border);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.58);
}

.style-guide-heading {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-end;
    margin-bottom: 1rem;
}

.style-guide-heading h2 {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    line-height: 1;
    margin: 0.35rem 0 0;
    color: var(--hdt-dark);
}

.style-guide-heading p {
    max-width: 25rem;
    margin: 0;
    color: var(--hdt-muted);
}

.style-guide-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.style-guide-card {
    width: 100%;
    min-height: 220px;
    border: 1px solid var(--hdt-border);
    border-radius: 22px;
    padding: 1rem;
    background: rgba(255, 252, 247, 0.86);
    color: var(--hdt-text);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.style-guide-card:hover,
.style-guide-card.is-active {
    transform: translateY(-2px);
    border-color: rgba(184, 138, 68, 0.58);
    background: rgba(255, 248, 238, 0.96);
    box-shadow: 0 18px 36px rgba(48, 33, 20, 0.12);
}

.style-guide-card.is-active {
    outline: 3px solid rgba(184, 138, 68, 0.16);
}

.style-guide-copy {
    display: grid;
    gap: 0.35rem;
}

.style-guide-copy strong {
    font-size: 1rem;
    color: var(--hdt-dark);
}

.style-guide-copy span {
    color: var(--hdt-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.style-guide-visual {
    margin-top: auto;
    min-height: 118px;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.66);
    box-shadow: inset 0 0 0 1px rgba(31, 26, 23, 0.04);
}

.style-guide-visual > span {
    position: absolute;
    inset: 0;
}

.style-guide-visual.has-upload {
    background: rgba(255, 250, 244, 0.92);
    padding: 0.45rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.style-guide-visual.has-upload img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    border-radius: 14px;
}

.style-guide-photo {
    background:
        linear-gradient(180deg, rgba(245, 239, 229, 0.88) 0 58%, rgba(174, 139, 105, 0.72) 58% 100%),
        linear-gradient(135deg, #d8c9b3 0%, #8f8372 52%, #efe2cc 100%);
}

.style-guide-photo > span {
    background:
        radial-gradient(circle at 22% 70%, rgba(52, 74, 55, 0.58) 0 8%, transparent 9%),
        radial-gradient(circle at 78% 28%, rgba(255, 241, 203, 0.95) 0 10%, transparent 11%),
        linear-gradient(105deg, transparent 0 48%, rgba(255, 255, 255, 0.52) 49% 51%, transparent 52%),
        linear-gradient(90deg, transparent 0 58%, rgba(31, 26, 23, 0.28) 58% 59%, transparent 60%),
        linear-gradient(180deg, transparent 0 52%, rgba(255, 255, 255, 0.34) 52% 54%, transparent 55%);
}

.style-guide-canvas {
    background:
        linear-gradient(180deg, rgba(255, 249, 240, 0.94), rgba(230, 202, 171, 0.72)),
        #ead7bd;
}

.style-guide-canvas > span {
    background:
        repeating-linear-gradient(90deg, rgba(78, 51, 27, 0.10) 0 1px, transparent 1px 7px),
        repeating-linear-gradient(0deg, rgba(78, 51, 27, 0.08) 0 1px, transparent 1px 7px),
        radial-gradient(circle at 28% 38%, rgba(184, 138, 68, 0.34), transparent 18%),
        radial-gradient(circle at 66% 64%, rgba(255, 255, 255, 0.44), transparent 22%),
        linear-gradient(135deg, rgba(145, 99, 57, 0.12), rgba(255, 246, 232, 0.16));
}

.style-guide-oil {
    background:
        linear-gradient(135deg, #f0d4ad 0%, #a9744d 48%, #d8b184 100%);
}

.style-guide-oil > span {
    background:
        radial-gradient(ellipse at 25% 38%, rgba(111, 71, 42, 0.52), transparent 22%),
        radial-gradient(ellipse at 68% 58%, rgba(55, 76, 57, 0.42), transparent 24%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.20) 0 5px, transparent 5px 16px),
        repeating-linear-gradient(25deg, rgba(31, 26, 23, 0.14) 0 4px, transparent 4px 20px);
    filter: saturate(1.12);
}

.style-guide-illustration {
    background:
        linear-gradient(135deg, #ffe8d8 0%, #f8f0ca 100%);
}

.style-guide-illustration > span {
    background:
        radial-gradient(circle at 28% 38%, #ff9f68 0 13%, transparent 14%),
        radial-gradient(circle at 74% 42%, #64b3a2 0 12%, transparent 13%),
        radial-gradient(circle at 50% 74%, #f7d36c 0 14%, transparent 15%),
        linear-gradient(180deg, transparent 0 68%, rgba(31, 26, 23, 0.08) 68% 70%, transparent 71%);
}

.style-guide-illustration > span::before,
.style-guide-illustration > span::after {
    content: "";
    position: absolute;
    background: rgba(31, 26, 23, 0.72);
    border-radius: 999px;
}

.style-guide-illustration > span::before {
    width: 30px;
    height: 6px;
    left: 34%;
    top: 54%;
    transform: rotate(24deg);
}

.style-guide-illustration > span::after {
    width: 22px;
    height: 6px;
    right: 30%;
    top: 58%;
    transform: rotate(-22deg);
}

.style-guide-minimal {
    background:
        linear-gradient(135deg, #f6efe6 0%, #ded2c4 100%);
}

.style-guide-minimal > span {
    background:
        radial-gradient(circle at 34% 44%, rgba(205, 190, 172, 0.62), transparent 19%),
        radial-gradient(circle at 72% 68%, rgba(255, 255, 255, 0.46), transparent 18%),
        linear-gradient(90deg, transparent 0 22%, rgba(31, 26, 23, 0.10) 22% 23%, transparent 24%),
        linear-gradient(180deg, transparent 0 75%, rgba(31, 26, 23, 0.08) 75% 77%, transparent 78%);
}

.style-guide-line {
    background: linear-gradient(135deg, #fbf7f0 0%, #e8ded2 100%);
}

.style-guide-line > span::before,
.style-guide-line > span::after {
    content: "";
    position: absolute;
    border: 2px solid rgba(31, 26, 23, 0.72);
    border-color: rgba(31, 26, 23, 0.72) transparent transparent transparent;
    border-radius: 50%;
}

.style-guide-line > span::before {
    width: 76%;
    height: 56%;
    left: 12%;
    top: 30%;
    transform: rotate(-8deg);
}

.style-guide-line > span::after {
    width: 44%;
    height: 36%;
    right: 16%;
    top: 18%;
    transform: rotate(18deg);
}

.stat-mini-card {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--hdt-border);
    border-radius: var(--hdt-radius);
    padding: 1.2rem;
    height: 100%;
}

.stat-mini-card .value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--hdt-dark);
}

.stat-mini-card .label {
    color: var(--hdt-muted);
    font-size: 0.92rem;
}

.tip-list,
.advisory-list {
    display: grid;
    gap: 0.85rem;
    margin-top: 1rem;
}

.tip-list div,
.advisory-list div {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--hdt-muted);
}

.tip-list i,
.advisory-list i {
    color: var(--hdt-gold);
}

/* Customize page */
.customize-layout,
.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 420px);
    gap: 1.5rem;
    align-items: start;
}

.customize-page .customize-layout {
    grid-template-columns: minmax(310px, 0.72fr) minmax(620px, 1.28fr);
    gap: 1.1rem;
    align-items: start;
    height: auto;
}

.customize-page .preview-card,
.customize-page .price-summary {
    min-width: 0;
    height: auto;
    min-height: 0;
    align-self: start;
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
}

.customize-page .preview-card {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 1.1rem;
}

.customize-page .price-summary .form-card {
    height: auto;
    overflow: visible;
    overscroll-behavior: auto;
    padding: 1.15rem;
    margin-bottom: 0 !important;
}

.customize-page .form-section.mt-4 {
    margin-top: 1rem !important;
}

.customize-page .pricing-choice-card {
    min-height: 116px;
    padding: 0.85rem;
}

.customize-page .pricing-choice-text {
    font-size: 0.82rem;
    line-height: 1.38;
}

.option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.option-card {
    padding: 1.1rem;
    height: 100%;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid var(--hdt-border);
    border-radius: 20px;
}

.option-card.active {
    border-color: rgba(184, 138, 68, 0.35);
    background: rgba(184, 138, 68, 0.08);
}

.pricing-choice-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
}

.customize-page .pricing-choice-grid {
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
}

.customize-page .pricing-choice-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pricing-choice-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pricing-choice-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pricing-choice-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-height: 132px;
    padding: 1rem;
    border: 1px solid var(--hdt-border);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.68);
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.pricing-choice-card:hover {
    transform: translateY(-2px);
    border-color: rgba(184, 138, 68, 0.38);
    box-shadow: 0 18px 42px rgba(31, 26, 23, 0.08);
}

.pricing-choice-card.is-selected {
    border-color: rgba(184, 138, 68, 0.8);
    background: linear-gradient(145deg, rgba(255, 250, 242, 0.96), rgba(239, 227, 211, 0.58));
    box-shadow: inset 0 0 0 1px rgba(184, 138, 68, 0.22), 0 20px 48px rgba(31, 26, 23, 0.08);
}

.size-compare-guide {
    padding: 1rem;
    border: 1px solid rgba(102, 78, 52, 0.12);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.58);
}

.size-compare-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.size-compare-heading strong {
    display: block;
    color: var(--hdt-dark);
    font-size: 1.05rem;
}

.size-compare-heading small {
    color: var(--hdt-muted);
    font-weight: 600;
}

.size-compare-visual {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(102, 78, 52, 0.12);
    border-radius: 18px;
    background: #f6efe6;
    box-shadow: 0 18px 42px rgba(31, 26, 23, 0.08);
}

.size-compare-visual img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.size-compare-wall {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
    align-items: stretch;
    margin-top: 0.75rem;
}

.size-compare-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    min-height: 4rem;
    padding: 0.75rem 0.8rem;
    border: 1px solid rgba(102, 78, 52, 0.11);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--hdt-text);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.size-compare-item:hover,
.size-compare-item.is-selected {
    transform: translateY(-2px);
    border-color: rgba(184, 138, 68, 0.78);
    background: rgba(255, 250, 243, 0.96);
    box-shadow: 0 18px 44px rgba(31, 26, 23, 0.08);
}

.size-compare-label {
    color: var(--hdt-dark);
    font-weight: 800;
    white-space: nowrap;
}

.size-compare-note {
    color: var(--hdt-muted);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: right;
}

.size-use-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
    margin-top: 0.7rem;
}

.size-use-item {
    min-height: 44px;
    padding: 0.65rem 0.55rem;
    border: 1px solid rgba(102, 78, 52, 0.11);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--hdt-muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.size-use-item:hover,
.size-use-item.is-selected {
    transform: translateY(-1px);
    border-color: rgba(184, 138, 68, 0.78);
    background: rgba(255, 250, 243, 0.96);
    color: var(--hdt-dark);
}

.size-compare-guide-inline {
    padding: 0.85rem;
}

.size-compare-guide-inline .size-compare-heading {
    align-items: center;
    margin-bottom: 0.65rem;
}

.size-compare-guide-inline .size-compare-heading strong {
    font-size: 0.98rem;
}

.size-compare-guide-inline .size-compare-visual {
    border-radius: 16px;
    box-shadow: 0 14px 34px rgba(31, 26, 23, 0.08);
}

.size-compare-guide-inline .size-compare-visual img {
    aspect-ratio: 16 / 7;
    object-position: center;
}

.size-compare-guide-sidebar {
    padding: 0.85rem;
}

.size-compare-guide-sidebar .size-compare-heading {
    align-items: flex-start;
    margin-bottom: 0.65rem;
}

.size-compare-guide-sidebar .size-compare-heading strong {
    font-size: 0.98rem;
}

.size-compare-guide-sidebar .size-compare-visual {
    border-radius: 15px;
    box-shadow: 0 14px 32px rgba(31, 26, 23, 0.08);
}

.size-compare-guide-sidebar .size-compare-visual img {
    aspect-ratio: 4 / 3;
}

.size-compare-guide-sidebar .size-compare-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.size-compare-guide-sidebar .size-compare-item {
    align-items: flex-start;
    flex-direction: column;
    min-height: 64px;
    padding: 0.65rem;
}

.size-compare-guide-sidebar .size-compare-note {
    text-align: left;
}

@media (max-width: 767.98px) {
    .size-compare-guide {
        padding: 0.85rem;
        border-radius: 18px;
    }

    .size-compare-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
        margin-bottom: 0.75rem;
    }

    .size-compare-wall {
        display: flex;
        gap: 0.65rem;
        margin-inline: -0.1rem;
        padding: 0.1rem 0.1rem 0.35rem;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .size-compare-item {
        flex: 0 0 142px;
        align-items: flex-start;
        flex-direction: column;
        min-height: 72px;
        padding: 0.75rem 0.6rem;
        scroll-snap-align: start;
    }

    .size-compare-note {
        text-align: left;
    }

    .size-use-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .size-use-item {
        min-height: 42px;
    }

    .size-compare-guide-inline .size-compare-heading {
        align-items: flex-start;
    }

    .size-compare-visual img {
        aspect-ratio: 3 / 2;
    }

    .size-compare-guide-inline .size-compare-visual img {
        aspect-ratio: 4 / 3;
    }
}

.pricing-choice-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pricing-choice-title {
    display: block;
    color: var(--hdt-dark);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.pricing-choice-text {
    display: block;
    color: var(--hdt-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.pricing-choice-price {
    margin-top: auto;
    color: var(--hdt-gold-dark);
    font-size: 0.92rem;
    font-weight: 800;
}

/* Size guide page */
.size-guide-page {
    overflow: hidden;
}

.size-guide-page.page-shell {
    padding-top: 7.6rem;
}

.size-guide-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(380px, 1fr);
    gap: 1.35rem;
    align-items: center;
    max-width: 70rem;
    margin: 0 auto 1.6rem;
    padding: 1.15rem;
}

.size-guide-hero .page-title {
    font-size: clamp(2.45rem, 3.9vw, 3.85rem);
    margin-top: 0.55rem;
}

.size-guide-hero .page-subtitle {
    max-width: 38rem;
    font-size: 0.95rem;
    line-height: 1.55;
}

.size-guide-hero .hero-actions {
    margin-top: 1.15rem !important;
}

.size-guide-hero .btn-lg {
    padding: 0.82rem 1.15rem;
    font-size: 1rem;
}

.size-guide-hero-visual {
    overflow: hidden;
    border: 1px solid rgba(102, 78, 52, 0.12);
    border-radius: 20px;
    background: #f6efe6;
    box-shadow: 0 16px 38px rgba(31, 26, 23, 0.09);
}

.size-guide-hero-visual img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10.4;
    object-fit: contain;
}

.size-guide-section,
.size-guide-faq {
    margin-top: 1.5rem;
}

.size-guide-section {
    max-width: 70rem;
    margin-inline: auto;
}

.section-heading-row {
    max-width: 58rem;
    margin-bottom: 0.85rem;
}

.size-guide-page .section-title {
    font-size: clamp(2.1rem, 3.8vw, 3.25rem);
    line-height: 1;
}

.size-guide-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.95rem;
}

.size-guide-card {
    overflow: hidden;
    min-height: 100%;
    border: 1px solid var(--hdt-border);
    border-radius: 22px;
    background: rgba(255, 250, 244, 0.86);
    box-shadow: var(--hdt-shadow-sm);
}

.size-guide-card-media {
    margin: 0;
    overflow: hidden;
    border-bottom: 1px solid rgba(102, 78, 52, 0.12);
    background: #f1e7da;
}

.size-guide-card-media img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 18rem;
    object-fit: contain;
    transition: transform 0.22s ease;
}

.size-guide-card:hover .size-guide-card-media img {
    transform: scale(1.01);
}

.size-guide-card-body {
    padding: 0.9rem;
}

.size-guide-card-size {
    display: inline-flex;
    margin-bottom: 0.65rem;
    padding: 0.36rem 0.65rem;
    border-radius: 999px;
    background: rgba(184, 138, 68, 0.13);
    color: var(--hdt-gold-dark);
    font-size: 0.74rem;
    font-weight: 900;
}

.size-guide-card h3,
.faq-card h3 {
    color: var(--hdt-dark);
    font-size: 0.98rem;
    font-weight: 850;
    line-height: 1.35;
}

.size-guide-card p,
.faq-card p {
    color: var(--hdt-muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

.size-guide-card strong {
    color: var(--hdt-dark);
}

.size-guide-decision {
    display: grid;
    grid-template-columns: minmax(240px, 0.42fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    max-width: 70rem;
    margin: 1.5rem auto 0;
    padding: 1.15rem;
}

.size-guide-decision-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.size-guide-decision-list div {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.75rem;
    border: 1px solid rgba(102, 78, 52, 0.1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.58);
    color: var(--hdt-muted);
}

.size-guide-decision-list i {
    color: var(--hdt-success);
    font-size: 1.1rem;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.size-guide-faq {
    max-width: 70rem;
    margin-inline: auto;
}

.size-guide-page .faq-card {
    padding: 0.9rem;
}

.size-guide-page .faq-card h3 {
    margin-bottom: 0.55rem;
}

.size-guide-page .faq-card p {
    margin-bottom: 0;
}

.pricing-frame-swatch {
    width: 100%;
    height: 34px;
    border-radius: 14px;
    background: var(--frame-swatch, #1f1a17);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5);
}

.pricing-frame-gold-metal-cerceve {
    background: linear-gradient(135deg, #a87425, #f0d78f 52%, #9d6b25);
}

.pricing-frame-gumus-metal-cerceve {
    background: linear-gradient(135deg, #6b6f72, #e6e7e4 52%, #85898a);
}

.pricing-frame-dogal-ahsap-gorunum {
    background: linear-gradient(135deg, #8b5d32, #c99762 55%, #5c3b22);
}

.pricing-compact-row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 0.9rem;
    align-items: stretch;
}

.pricing-quantity-field {
    display: grid;
    gap: 0.5rem;
    align-content: start;
    padding: 1rem;
    border: 1px solid var(--hdt-border);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.68);
    font-weight: 700;
}

.pricing-choice-card-inline {
    min-height: auto;
    flex-direction: row;
    align-items: center;
}

.pricing-choice-card-inline input {
    position: static;
    opacity: 1;
    pointer-events: auto;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.product-info-box {
    margin-top: 1rem;
    padding: 1.15rem;
    border: 1px solid rgba(184, 138, 68, 0.2);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(255, 250, 242, 0.94), rgba(239, 227, 211, 0.48)),
        rgba(255, 255, 255, 0.72);
}

.product-info-box h3 {
    margin: 0.55rem 0 0.45rem;
    color: var(--hdt-dark);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.product-info-box p {
    margin-bottom: 0.85rem;
    color: var(--hdt-muted);
    line-height: 1.65;
}

.product-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.product-info-grid div {
    padding: 0.8rem;
    border: 1px solid rgba(31, 26, 23, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.64);
}

.product-info-grid strong,
.product-info-grid span {
    display: block;
}

.product-info-grid strong {
    margin-bottom: 0.25rem;
    color: var(--hdt-dark);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.product-info-grid span {
    color: var(--hdt-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.customize-page .product-info-box {
    padding: 1rem;
}

.customize-page .product-info-box h3 {
    margin: 0.4rem 0 0.25rem;
    font-size: 1.2rem;
}

.customize-page .product-info-box p {
    margin-bottom: 0.65rem;
    line-height: 1.5;
}

.customize-page .product-info-grid {
    gap: 0.55rem;
}

.customize-page .product-info-grid div {
    padding: 0.65rem;
}

.customize-page .product-info-grid span {
    font-size: 0.82rem;
    line-height: 1.35;
}

.price-summary,
.order-summary-card,
.summary-card {
    position: sticky;
    top: 7rem;
}

.preview-stage {
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: linear-gradient(135deg, #efe3d5 0%, #d8c0a7 58%, #b58c69 100%);
    margin-bottom: 1rem;
}

.preview-stage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.customize-page .preview-stage {
    flex: 0 0 auto;
    aspect-ratio: auto;
    max-height: none;
    margin-bottom: 0;
    background: rgba(255, 252, 247, 0.72);
}

.customize-page .preview-stage img {
    height: auto;
    object-fit: contain;
}

/* AI laser engraving */
.lightbox-page {
    background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.7), rgba(238, 229, 218, 0.76));
}

.lightbox-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 440px);
    gap: 1.75rem;
    align-items: center;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.lightbox-hero-copy .section-title {
    max-width: 13ch;
}

.lightbox-product-frame {
    border-radius: var(--hdt-radius);
    border: 1px solid rgba(184, 138, 68, 0.28);
    background: #151515;
    padding: 0.7rem;
    box-shadow: 0 24px 54px rgba(31, 26, 23, 0.16);
}

.lightbox-product-frame img {
    display: block;
    width: 100%;
    max-height: 560px;
    object-fit: contain;
    object-position: center;
    border-radius: calc(var(--hdt-radius) - 8px);
}

.lightbox-create-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 1.5rem;
    align-items: start;
}

.lightbox-upload-preview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 280px);
    gap: 1rem;
    align-items: stretch;
}

.lightbox-live-preview {
    display: grid;
    gap: 0.65rem;
}

.lightbox-template-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.85rem;
}

.lightbox-template-card {
    min-height: 132px;
}

.lightbox-personal-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.4rem;
}

.lightbox-summary-card .section-text {
    font-size: 0.94rem;
}

.lightbox-style-library {
    margin-bottom: 1.5rem;
}

.lightbox-style-card-grid {
    margin-top: 0.5rem;
}

.lightbox-style-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.lightbox-style-card.is-selected {
    border-color: var(--hdt-gold);
    box-shadow: 0 18px 42px rgba(184, 138, 68, 0.18);
}

.lightbox-requirement-badge {
    margin-left: 0.35rem;
    background: rgba(31, 26, 23, 0.08);
    color: var(--hdt-ink);
}

.lightbox-style-preview {
    min-height: 132px;
}

.lightbox-style-preview-art {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 132px;
    border-radius: var(--hdt-radius-sm);
    background:
        radial-gradient(circle at 50% 24%, rgba(184, 138, 68, 0.15), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 241, 233, 0.86));
    overflow: hidden;
}

.lightbox-style-preview-art::before,
.lightbox-style-preview-art::after {
    content: "";
    position: absolute;
    border: 3px solid rgba(31, 26, 23, 0.86);
    border-color: rgba(31, 26, 23, 0.86) transparent transparent rgba(31, 26, 23, 0.86);
    border-radius: 50%;
}

.lightbox-style-preview-art::before {
    width: 76px;
    height: 92px;
    top: 22px;
    left: 50%;
    transform: translateX(-50%) rotate(-10deg);
}

.lightbox-style-preview-art::after {
    width: 128px;
    height: 68px;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    border-width: 3px 0 0;
    border-color: rgba(31, 26, 23, 0.86);
}

.lightbox-style-preview-art i {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    color: var(--hdt-dark);
    font-size: 1.45rem;
    -webkit-text-stroke: 0.35px currentColor;
    box-shadow: 0 10px 24px rgba(31, 26, 23, 0.08);
}

.lightbox-style-preview-art span {
    position: absolute;
    width: 62%;
    height: 3px;
    left: 19%;
    bottom: 38px;
    background: rgba(31, 26, 23, 0.86);
}



.lightbox-aspect-field {
    margin-top: 1.25rem;
    border: 1px solid var(--hdt-border);
    border-radius: var(--hdt-radius-sm);
    background: rgba(255, 255, 255, 0.72);
    padding: 1rem;
}

.lightbox-aspect-field .form-label {
    font-weight: 900;
}

.lightbox-aspect-field small {
    display: block;
    margin-top: 0.45rem;
    color: var(--hdt-muted);
    line-height: 1.45;
}.lightbox-selected-template-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.lightbox-selected-requirement {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    border-radius: 999px;
    background: rgba(184, 138, 68, 0.14);
    color: var(--hdt-gold);
    font-size: 0.74rem;
    font-weight: 900;
    padding: 0.25rem 0.65rem;
    white-space: nowrap;
}

.lightbox-selected-requirement.is-optional {
    background: rgba(110, 139, 120, 0.12);
    color: #547261;
}

.lightbox-field-helper {
    margin: 0.35rem 0 0;
    color: var(--hdt-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.lightbox-order-form {
    padding: 1.15rem;
}

.lightbox-order-form .laser-selected-style {
    padding: 0.8rem 0.9rem;
}

.lightbox-order-form .laser-option-section {
    margin-top: 0.95rem;
}

.lightbox-order-form .laser-option-grid-compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lightbox-order-form .laser-radio-card {
    min-height: 126px;
    padding: 0.85rem;
}

.lightbox-order-form textarea.form-control {
    min-height: 112px;
}

.lightbox-watermark-info {
    background: rgba(255, 250, 244, 0.78);
}

@media (max-width: 1199.98px) {
    .lightbox-order-form .laser-option-grid-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .lightbox-selected-template-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .lightbox-order-form .laser-option-grid-compact {
        grid-template-columns: 1fr;
    }
}.lightbox-selected-template a {
    width: max-content;
    color: var(--hdt-gold);
    font-weight: 800;
    text-decoration: none;
}

.lightbox-detail-layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
}

.lightbox-detail-side {
    display: grid;
    gap: 1.25rem;
}

.lightbox-output-figure {
    margin: 1.1rem 0 0;
}

.lightbox-output-watermark {
    width: 100%;
    aspect-ratio: var(--laser-output-ratio, 4 / 5);
    border: 1px solid rgba(184, 138, 68, 0.28);
    border-radius: var(--hdt-radius-sm);
    background: #fff;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-output-figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.lightbox-output-figure figcaption {
    margin-top: 0.55rem;
    text-align: center;
    color: var(--hdt-muted);
    font-size: 0.86rem;
    font-weight: 800;
}

.lightbox-original-strip {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-top: 1rem;
    border: 1px solid var(--hdt-border);
    border-radius: var(--hdt-radius-sm);
    background: rgba(255, 255, 255, 0.72);
    padding: 0.7rem;
}

.lightbox-original-strip img {
    width: 74px;
    height: 74px;
    border-radius: var(--hdt-radius-xs);
    object-fit: cover;
}

.lightbox-original-strip div {
    display: grid;
    gap: 0.2rem;
}

.lightbox-original-strip span {
    color: var(--hdt-muted);
    font-size: 0.9rem;
}

.laser-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.85fr);
    gap: 1.5rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.laser-hero .section-title {
    max-width: 12ch;
}

.laser-hero-points,
.laser-summary-steps {
    display: grid;
    gap: 0.75rem;
}

.laser-hero-points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 1.25rem;
}

.laser-hero-points span,
.laser-summary-steps div {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid var(--hdt-border);
    border-radius: var(--hdt-radius-xs);
    padding: 0.85rem 1rem;
    font-weight: 800;
}

.laser-preview-board {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    min-height: 280px;
    border-radius: var(--hdt-radius);
    border: 1px solid var(--hdt-border);
    background:
        linear-gradient(90deg, rgba(107, 79, 63, 0.08) 1px, transparent 1px) 0 0 / 52px 52px,
        linear-gradient(180deg, rgba(255, 250, 244, 0.88) 0%, rgba(239, 227, 211, 0.78) 100%);
    padding: 1.25rem;
}

.laser-preview-photo,
.laser-preview-result {
    display: grid;
    place-items: center;
    gap: 0.75rem;
    aspect-ratio: 4 / 5;
    border-radius: var(--hdt-radius-sm);
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--hdt-border);
    font-weight: 800;
    text-align: center;
}

.laser-preview-photo {
    position: relative;
    overflow: hidden;
}

.laser-preview-photo img,
.laser-upload-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.laser-preview-photo.has-image {
    padding: 0;
    background: #fff;
}

.laser-preview-photo.has-image i,
.laser-preview-photo.has-image span {
    display: none;
}

.laser-preview-photo i,
.laser-preview-result i {
    font-size: 2.4rem;
    color: var(--hdt-gold);
}

.laser-preview-arrow {
    color: var(--hdt-gold);
    font-size: 1.6rem;
}

.laser-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 1.5rem;
    align-items: start;
}

.laser-form > .laser-option-section:nth-of-type(3),
.laser-form > .laser-option-section:nth-of-type(4),
.laser-form > .row.g-3 {
    display: none;
}

.laser-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 1.5rem;
    align-items: start;
}

.laser-detail-images {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.laser-detail-images figure {
    margin: 0;
}

.laser-detail-images img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border: 1px solid var(--hdt-border);
    border-radius: var(--hdt-radius-sm);
    background: #fff;
}

.laser-detail-images figcaption {
    margin-top: 0.45rem;
    color: var(--hdt-muted);
    font-size: 0.85rem;
    font-weight: 800;
    text-align: center;
}

.laser-detail-form .laser-option-section {
    margin-top: 1.1rem;
}

.laser-option-grid-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.laser-price-pill {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    border-radius: 999px;
    background: rgba(184, 138, 68, 0.12);
    color: var(--hdt-ink);
    font-size: 1.05rem;
    font-weight: 900;
    padding: 0.35rem 1rem;
}

.laser-selected-style {
    display: grid;
    gap: 0.2rem;
    border: 1px solid var(--hdt-border);
    border-radius: var(--hdt-radius-sm);
    background: rgba(184, 138, 68, 0.08);
    padding: 1rem;
}

.laser-selected-style strong {
    font-size: 1.05rem;
}

.laser-selected-style small {
    color: var(--hdt-muted);
}

.laser-form h2,
.laser-summary-card h2 {
    font-size: 1.55rem;
    margin: 0.6rem 0 0.35rem;
}

.laser-form-head {
    margin-bottom: 1rem;
}

.laser-upload-box {
    display: grid;
    place-items: center;
    gap: 0.45rem;
    min-height: 180px;
    border: 1px dashed rgba(184, 138, 68, 0.46);
    border-radius: var(--hdt-radius);
    background: rgba(184, 138, 68, 0.08);
    cursor: pointer;
    text-align: center;
    padding: 1.5rem;
}

.laser-upload-box.is-optional-upload {
    border-style: solid;
    background: rgba(110, 139, 120, 0.08);
}

.laser-upload-box.has-image {
    grid-template-rows: minmax(180px, 260px) auto auto;
    align-items: center;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.84);
}

.laser-upload-box.has-image img {
    min-height: 180px;
    max-height: 260px;
    border: 1px solid var(--hdt-border);
}

.laser-upload-box.has-image i {
    display: none;
}

.laser-upload-box i {
    font-size: 2rem;
    color: var(--hdt-gold);
}

.laser-upload-box input {
    display: none;
}

.lightbox-style-fields {
    margin-top: 1.25rem;
}

.lightbox-style-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    margin-top: 0.8rem;
}

.lightbox-style-field {
    min-width: 0;
}

.lightbox-geocode-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.6rem;
}

.lightbox-geocode-row .btn {
    min-height: 52px;
    white-space: nowrap;
}

.lightbox-geocode-status {
    display: block;
    min-height: 1.2rem;
    margin-top: 0.35rem;
    color: var(--hdt-muted);
}

@media (max-width: 767.98px) {
    .lightbox-style-fields-grid {
        grid-template-columns: 1fr;
    }

    .lightbox-geocode-row {
        grid-template-columns: 1fr;
    }
}

.laser-option-section {
    margin-top: 1.5rem;
}

.laser-option-section h3 {
    font-size: 1.1rem;
    margin-bottom: 0.8rem;
    font-weight: 900;
}

.laser-option-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.laser-radio-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-height: 150px;
    border: 1px solid var(--hdt-border);
    border-radius: var(--hdt-radius-sm);
    background: rgba(255, 255, 255, 0.72);
    padding: 1rem;
    cursor: pointer;
}

.laser-radio-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.laser-radio-card:has(input:checked) {
    border-color: var(--hdt-gold);
    box-shadow: 0 16px 34px rgba(184, 138, 68, 0.13);
    background: rgba(255, 250, 244, 0.96);
}

.laser-radio-card span {
    font-weight: 900;
}

.laser-radio-card small {
    color: var(--hdt-muted);
    line-height: 1.45;
}

.laser-radio-card strong {
    margin-top: auto;
}

.laser-summary-card {
    position: sticky;
    top: 110px;
}

.laser-summary-steps {
    margin: 1rem 0;
}

.laser-summary-steps strong {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--hdt-dark);
    color: #fff;
    flex: 0 0 auto;
}

.laser-disabled-card {
    max-width: 760px;
}

.laser-result-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
    gap: 1.25rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.laser-result-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: var(--hdt-radius-sm);
    border: 1px solid var(--hdt-border);
    background: #fff;
}

.laser-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    margin-top: 1.25rem;
}

@media (max-width: 991.98px) {
    .lightbox-hero,
    .lightbox-create-layout,
    .lightbox-detail-layout,
    .laser-hero,
    .laser-layout,
    .laser-detail-layout,
    .laser-result-card {
        grid-template-columns: 1fr;
    }

    .laser-summary-card {
        position: static;
    }

    .laser-option-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .lightbox-upload-preview,
    .lightbox-personal-fields {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .laser-hero-points,
    .laser-preview-board,
    .laser-option-grid,
    .lightbox-template-grid {
        grid-template-columns: 1fr;
    }

    .laser-preview-arrow {
        transform: rotate(90deg);
        justify-self: center;
    }

    .laser-radio-card {
        min-height: auto;
    }
}

.customize-page .preview-card > .summary-card {
    position: static;
    margin-top: 0 !important;
    padding: 1rem;
}

.customize-page .customize-total-card {
    border-color: rgba(184, 138, 68, 0.32);
    background:
        radial-gradient(circle at top right, rgba(184, 138, 68, 0.13), transparent 34%),
        rgba(255, 252, 247, 0.84);
    box-shadow: 0 22px 54px rgba(31, 26, 23, 0.08);
}

.customize-page .page-hero-small {
    margin-bottom: 1rem !important;
}

.customize-page .page-title {
    font-size: clamp(3rem, 5vw, 4.8rem);
}

.customize-page .page-subtitle {
    margin-bottom: 0;
}

.customize-page .detail-meta {
    gap: 0.55rem;
    margin-top: 0;
}

.customize-page .detail-meta div {
    padding: 0.72rem 0.85rem;
}

.customize-page .detail-meta span {
    font-size: 0.78rem;
}

.customize-page .detail-meta strong {
    font-size: 0.95rem;
}

.customize-page .advisory-list {
    gap: 0.55rem;
}

.customize-page .advisory-list div {
    font-size: 0.9rem;
}

.customize-page .customize-total-card {
    flex: 0 0 auto;
    min-height: 0;
}

.customize-page .customize-total-card .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.customize-page .customize-total-card .hero-actions .btn,
.customize-page .customize-total-card .hero-actions form {
    flex: 1 1 150px;
}

.customize-page .customize-total-card .hero-actions form .btn {
    width: 100%;
}

.customize-page .customize-auto-price-bar {
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.customize-page .customize-auto-price-note {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--hdt-muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.customize-page .customize-auto-price-note::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--hdt-gold);
    box-shadow: 0 0 0 0.35rem rgba(184, 138, 68, 0.12);
}

.detail-meta {
    display: grid;
    gap: 0.8rem;
    margin-top: 1rem;
}

.detail-meta div {
    padding: 0.95rem 1rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.68);
}

.detail-meta span {
    display: block;
    color: var(--hdt-muted);
    font-size: 0.82rem;
    margin-bottom: 0.18rem;
}

.summary-list {
    display: grid;
    gap: 0.85rem;
}

.summary-row,
.checkout-line,
.cart-summary-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.summary-row small {
    display: block;
    margin-bottom: 0.22rem;
    color: var(--hdt-muted);
}

.summary-row strong {
    display: block;
}

.summary-row-prompt {
    align-items: flex-start;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(107, 79, 63, 0.1);
}

.summary-total,
.cart-summary-total {
    border-top: 1px solid var(--hdt-border);
    padding-top: 1rem;
    margin-top: 0.85rem;
}

/* Mockup page */
.mockup-page {
    background:
        radial-gradient(circle at top left, rgba(184, 138, 68, 0.14), transparent 28%),
        radial-gradient(circle at 90% 10%, rgba(212, 198, 170, 0.12), transparent 20%),
        linear-gradient(180deg, #fcf8f2 0%, #f4ecdf 40%, #ece1d1 100%);
}

.room-selector-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid rgba(107, 79, 63, 0.12);
    border-radius: 1.45rem;
    background: rgba(255, 252, 246, 0.9);
    box-shadow: 0 1rem 2.2rem rgba(64, 44, 27, 0.06);
}

.room-selector-card h2 {
    margin: 0.35rem 0 0;
    font-family: var(--hdt-display-font);
    font-size: clamp(1.8rem, 3vw, 2.65rem);
    line-height: 0.95;
}

.mockup-choice-card {
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1.05rem;
}

.mockup-choice-groups {
    display: grid;
    gap: 0.8rem;
    width: 100%;
}

.mockup-choice-group {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    align-items: center;
    gap: 0.45rem;
}

.mockup-choice-group small {
    color: var(--hdt-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mockup-choice-group .room-selector-list {
    justify-content: flex-start;
}

.mockup-stage > .room-selector-card {
    display: none;
}

.mockup-page .order-summary-card {
    display: grid;
    gap: 0.85rem;
}

.mockup-page .order-summary-card .room-selector-card {
    margin-bottom: 0;
    padding: 0.95rem;
    border-radius: 1.25rem;
    box-shadow: 0 1rem 2.2rem rgba(64, 44, 27, 0.05);
}

.mockup-page .order-summary-card .room-selector-card h2 {
    font-family: var(--hdt-body-font);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.mockup-page .order-summary-card .mockup-choice-group {
    grid-template-columns: 1fr;
    gap: 0.4rem;
}

.mockup-page .order-summary-card .room-selector-list {
    justify-content: flex-start;
    gap: 0.45rem;
}

.mockup-page .order-summary-card .room-selector-pill {
    min-height: 2.35rem;
    padding: 0.55rem 0.78rem;
    font-size: 0.78rem;
}

.room-selector-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.55rem;
}

.room-selector-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.65rem 0.95rem;
    border: 1px solid rgba(107, 79, 63, 0.16);
    border-radius: 999px;
    color: var(--hdt-dark);
    background: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.room-selector-pill:hover,
.room-selector-pill.active {
    color: #fffaf3;
    border-color: var(--hdt-dark);
    background: var(--hdt-dark);
    transform: translateY(-1px);
}

.mockup-color-pill {
    gap: 0.45rem;
}

.mockup-color-swatch {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    border: 1px solid rgba(107, 79, 63, 0.2);
    border-radius: 999px;
    background: var(--swatch, #111111);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}

.room-selector-pill.active .mockup-color-swatch,
.room-selector-pill:hover .mockup-color-swatch {
    border-color: rgba(255, 250, 243, 0.65);
}

.real-mockup-preview {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(107, 79, 63, 0.12);
    border-radius: 30px;
    background: rgba(255, 252, 246, 0.9);
    box-shadow: 0 2rem 4rem rgba(64, 44, 27, 0.1);
}

.real-mockup-preview .mockup-option-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    background: rgba(255, 250, 243, 0.88);
    box-shadow: 0 0.75rem 2rem rgba(64, 44, 27, 0.1);
    backdrop-filter: blur(10px);
}

.real-mockup-preview img {
    display: block;
    width: 100%;
    height: auto;
}

.mockup-wall {
    position: relative;
    min-height: 40rem;
    border-radius: 30px;
    overflow: hidden;
    background:
        radial-gradient(circle at 73% 20%, rgba(255, 255, 238, 0.55), transparent 12%),
        linear-gradient(118deg, rgba(255, 255, 255, 0.42) 0 10%, transparent 10% 18%, rgba(255, 255, 255, 0.22) 18% 24%, transparent 24% 100%),
        linear-gradient(90deg, rgba(217, 199, 172, 0.14) 0, rgba(217, 199, 172, 0.14) 10%, transparent 10%, transparent 100%),
        linear-gradient(180deg, #f1e8dc 0%, #e7d8c6 74%, #d2b596 100%);
    background-size: auto, auto, 68px 100%, auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem 7.5rem;
    box-shadow:
        inset 0 0 0 1px rgba(107, 79, 63, 0.08),
        inset 0 -6rem 6rem rgba(122, 82, 47, 0.1);
}

.mockup-wall::before {
    content: "";
    position: absolute;
    right: -12%;
    top: -18%;
    width: 42%;
    height: 62%;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 246, 212, 0.52), rgba(255, 246, 212, 0) 68%);
    pointer-events: none;
}

.mockup-wall::after {
    content: "";
    position: absolute;
    left: 8%;
    bottom: 16%;
    width: 11rem;
    height: 8rem;
    border-radius: 48% 52% 18% 18%;
    background:
        radial-gradient(circle at 44% 18%, rgba(184, 138, 68, 0.18), transparent 18%),
        linear-gradient(145deg, rgba(102, 78, 52, 0.1), rgba(255, 255, 255, 0.08));
    filter: blur(0.2px);
    opacity: 0.65;
    pointer-events: none;
}

.mockup-wall-decor {
    position: absolute;
    inset: 1rem auto auto 1rem;
    z-index: 2;
}

.mockup-floor {
    position: absolute;
    inset: auto 0 0;
    height: 20%;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 32%, rgba(84, 58, 35, 0.08)),
        repeating-linear-gradient(90deg, rgba(95, 65, 43, 0.04) 0 1px, transparent 1px 44px),
        linear-gradient(180deg, #d7bf9f 0%, #caa986 100%);
    border-top: 1px solid rgba(86, 58, 37, 0.1);
}

.mockup-frame {
    position: relative;
    z-index: 1;
    width: min(100%, 20rem);
    aspect-ratio: 4 / 5;
    border-radius: 0.8rem;
    padding: 0.85rem;
    background: linear-gradient(145deg, var(--mockup-frame-color, #111111) 0%, rgba(255, 255, 255, 0.14) 100%);
    transform: translateY(-0.8rem);
    box-shadow:
        0 2.2rem 3.5rem rgba(44, 30, 19, 0.28),
        1.2rem 1.4rem 2rem rgba(92, 61, 37, 0.16);
}

.mockup-frame-elevated {
    border: 0.45rem solid var(--mockup-frame-color, #111111);
}

.mockup-frame-reference-black,
.mockup-frame-reference-gold,
.mockup-frame-reference-silver {
    border: 0 !important;
    border-radius: 0.35rem;
    padding: 11.5% 18% 13.5%;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 178% 178%;
    box-shadow:
        0 2.6rem 3.2rem rgba(44, 30, 19, 0.22),
        0.9rem 1.2rem 1.8rem rgba(92, 61, 37, 0.14);
}

.mockup-frame-reference-black {
    background-image: url('../images/mockup-frames/frame-black-metal.webp');
}

.mockup-frame-reference-gold {
    background-image: url('../images/mockup-frames/frame-gold-metal.webp');
}

.mockup-frame-reference-silver {
    background-image: url('../images/mockup-frames/frame-silver-metal.webp');
}

.mockup-frame-reference-black.mockup-frame-elevated,
.mockup-frame-reference-gold.mockup-frame-elevated,
.mockup-frame-reference-silver.mockup-frame-elevated {
    border: 0 !important;
}

.mockup-frame-reference-black .mockup-art,
.mockup-frame-reference-gold .mockup-art,
.mockup-frame-reference-silver .mockup-art {
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
}

.mockup-frame-reference-black:not(.mockup-passepartout) .mockup-art,
.mockup-frame-reference-gold:not(.mockup-passepartout) .mockup-art,
.mockup-frame-reference-silver:not(.mockup-passepartout) .mockup-art {
    background: #fff;
}

.mockup-frame-poster {
    padding: 0.45rem;
    border: 1px solid rgba(77, 55, 36, 0.16);
    background: rgba(255, 252, 246, 0.86);
    box-shadow: 0 1.35rem 2.5rem rgba(44, 30, 19, 0.18);
}

.mockup-digital-card {
    position: relative;
    z-index: 1;
    width: min(100%, 25rem);
    padding: 1.15rem;
    border-radius: 1.8rem;
    background: rgba(252, 247, 241, 0.88);
    border: 1px solid rgba(102, 78, 52, 0.12);
    box-shadow: 0 1.8rem 3.2rem rgba(44, 30, 19, 0.16);
}

.mockup-digital-shell {
    width: 100%;
    margin-top: 1rem;
    padding: 0.7rem;
    border-radius: 1.4rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 18%),
        linear-gradient(145deg, #3a2d24 0%, #716252 100%);
}

.mockup-art {
    width: 100%;
    height: 100%;
    border-radius: 0.35rem;
    overflow: hidden;
    background: linear-gradient(135deg, #efe3d5 0%, #d8c0a7 58%, #b58c69 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.22),
        inset 0 0 1.5rem rgba(31, 26, 23, 0.08);
}

.mockup-frame-reference-black .mockup-art:not(.mockup-passepartout),
.mockup-frame-reference-gold .mockup-art:not(.mockup-passepartout),
.mockup-frame-reference-silver .mockup-art:not(.mockup-passepartout) {
    transform: scale(1.035);
    transform-origin: center;
}

.mockup-frame-reference-black .mockup-passepartout,
.mockup-frame-reference-gold .mockup-passepartout,
.mockup-frame-reference-silver .mockup-passepartout {
    padding: 0.55rem;
}

.mockup-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mockup-passepartout {
    background: #f7f4ee;
    padding: 0.95rem;
    box-shadow: inset 0 0 0 1px rgba(92, 72, 53, 0.08);
}

.mockup-size-small { width: min(100%, 15rem); }
.mockup-size-medium { width: min(100%, 20rem); }
.mockup-size-large { width: min(100%, 23rem); }
.mockup-size-xlarge { width: min(100%, 26rem); }

.mockup-scale-caption {
    position: absolute;
    left: 50%;
    bottom: calc(20% + 1.1rem);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    transform: translateX(-50%);
    padding: 0.75rem 1rem;
    border: 1px solid rgba(107, 79, 63, 0.12);
    border-radius: 999px;
    background: rgba(255, 252, 246, 0.86);
    box-shadow: 0 1rem 2rem rgba(44, 30, 19, 0.12);
    backdrop-filter: blur(12px);
    white-space: nowrap;
}

.mockup-scale-caption strong {
    color: var(--hdt-dark);
}

.mockup-scale-caption span {
    color: var(--hdt-muted);
    font-size: 0.86rem;
}

.mockup-room {
    min-height: 24rem;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 20%),
        linear-gradient(180deg, #ede1d4 0%, #e2d3c2 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mockup-room-real {
    min-height: 0;
    aspect-ratio: 4 / 3;
    background: #e8dccf;
    display: block;
}

.mockup-room-real img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.mockup-room-real::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(28, 20, 16, 0.05), rgba(28, 20, 16, 0.18));
    pointer-events: none;
}

.mockup-room::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3rem;
    background: linear-gradient(180deg, #c9b49e 0%, #b79f86 100%);
}

.mockup-room-real::after {
    display: none;
}

.mockup-room-label,
.mockup-room-caption {
    position: absolute;
    z-index: 2;
    border-radius: 999px;
    background: rgba(255, 252, 246, 0.9);
    color: var(--hdt-gold);
    font-weight: 800;
    box-shadow: 0 1rem 2rem rgba(44, 30, 19, 0.12);
    backdrop-filter: blur(10px);
}

.mockup-room-label {
    top: 1rem;
    left: 1rem;
    padding: 0.62rem 0.9rem;
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mockup-room-caption {
    right: 1rem;
    bottom: 1rem;
    max-width: min(72%, 18rem);
    padding: 0.75rem 1rem;
    color: var(--hdt-dark);
    font-size: 0.92rem;
}

.mockup-room-frame {
    width: min(100%, 260px);
    aspect-ratio: 4 / 5;
    padding: 0.7rem;
    background: linear-gradient(145deg, #29221c 0%, #5b4a3e 100%);
    box-shadow: 0 24px 50px rgba(38, 27, 18, 0.25);
    z-index: 1;
}

.mockup-room-art {
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.28), transparent 24%),
        linear-gradient(135deg, #d5bea8 0%, #f0e6da 40%, #dcc2ad 75%, #c6a28a 100%);
}

.mockup-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.mockup-meta-item {
    background: rgba(255, 255, 255, 0.68);
    border-radius: 18px;
    padding: 1rem;
}

.mockup-meta-item strong {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--hdt-dark);
}

.mockup-meta-item span {
    color: var(--hdt-muted);
    font-size: 0.93rem;
}

/* Cart / checkout */
.cart-thumb,
.checkout-thumb {
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(135deg, #efe3d5 0%, #d8c0a7 58%, #b58c69 100%);
}

.cart-thumb {
    width: 100%;
    max-width: 138px;
    aspect-ratio: 3 / 4;
}

.checkout-thumb {
    width: 64px;
    aspect-ratio: 3 / 4;
}

.cart-thumb img,
.checkout-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cart-meta {
    display: grid;
    gap: 0.75rem;
}

.cart-item-layout {
    display: grid;
    grid-template-columns: 138px minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
}

.cart-card {
    padding: 1.1rem;
}

.cart-thumb-wrap {
    display: flex;
}

.cart-item-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.1rem;
}

.cart-item-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
}

.cart-item-title {
    margin: 0;
    max-width: 30rem;
    color: var(--hdt-dark);
    font-size: clamp(1.08rem, 1.55vw, 1.35rem);
    line-height: 1.18;
    letter-spacing: 0;
    font-weight: 800;
}

.cart-mini-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    color: var(--hdt-muted);
    font-size: 0.88rem;
}

.cart-mini-facts strong {
    color: var(--hdt-text);
}

.cart-price-block {
    min-width: 132px;
    text-align: right;
    padding: 0.65rem 0.75rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.68);
}

.cart-price-block small,
.cart-summary-total-box small {
    display: block;
    color: var(--hdt-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.cart-price-block strong {
    display: block;
    color: var(--hdt-dark);
    font-size: 1.12rem;
    line-height: 1.25;
}

.cart-actions-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.cart-quantity-form {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: nowrap;
}

.cart-quantity-form .form-control {
    width: 72px;
    min-height: 44px;
}

.cart-remove-form {
    display: inline-flex;
}

.cart-invalid-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(184, 138, 68, 0.28);
    border-radius: 18px;
    background: rgba(255, 243, 205, 0.55);
}

.cart-invalid-card strong {
    display: block;
    color: var(--hdt-dark);
    font-weight: 800;
}

.cart-invalid-card p {
    margin: 0.3rem 0 0;
    color: var(--hdt-muted);
}

.cart-blocked-note {
    padding: 0.75rem 0.9rem;
    border-radius: 16px;
    color: var(--hdt-gold-dark);
    background: rgba(184, 138, 68, 0.1);
    font-size: 0.88rem;
    font-weight: 700;
}

.cart-summary {
    overflow: hidden;
}

.cart-summary-total-box {
    margin-top: 1rem;
    padding: 1.1rem;
    border-radius: 22px;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(31, 26, 23, 0.96), rgba(82, 58, 39, 0.94)),
        var(--hdt-dark);
}

.cart-summary-total-box small,
.cart-summary-total-box span {
    color: rgba(255, 255, 255, 0.72);
}

.cart-summary-total-box strong {
    display: block;
    margin: 0.25rem 0;
    font-size: clamp(2rem, 4vw, 2.7rem);
    line-height: 1;
    letter-spacing: 0;
}

.cart-summary-total-box span {
    display: block;
    font-size: 0.9rem;
}

.cart-summary-lines {
    display: grid;
    gap: 0.8rem;
    margin-top: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--hdt-border);
}

.cart-summary-line span {
    color: var(--hdt-muted);
}

.cart-summary-line strong {
    text-align: right;
}

.cart-shipping-note {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 18px;
    color: var(--hdt-gold-dark);
    background: rgba(184, 138, 68, 0.1);
    font-size: 0.92rem;
    font-weight: 700;
}

.cart-upsell-box {
    padding: 0.9rem;
    border: 1px solid rgba(107, 79, 63, 0.12);
    border-radius: 18px;
    background: rgba(255, 252, 247, 0.78);
}

.cart-upsell-list {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.75rem;
}

.cart-upsell-card {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    padding: 0.7rem;
    border: 1px solid rgba(107, 79, 63, 0.1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
}

.cart-upsell-card.is-text-only {
    grid-template-columns: 1fr;
}

.cart-upsell-thumb {
    width: 4rem;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 13px;
    background: rgba(244, 235, 224, 0.88);
}

.cart-upsell-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.cart-upsell-copy {
    min-width: 0;
    display: grid;
    gap: 0.45rem;
}

.cart-upsell-title-row {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 0.6rem;
}

.cart-upsell-title-row strong {
    color: var(--hdt-dark);
    font-size: 0.95rem;
    line-height: 1.2;
}

.cart-upsell-title-row span {
    flex: 0 0 auto;
    color: var(--hdt-gold-dark);
    font-size: 0.82rem;
    font-weight: 900;
}

.cart-upsell-copy p {
    margin: 0;
    color: var(--hdt-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.cart-upsell-copy .btn {
    justify-self: start;
    min-height: 2.2rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.82rem;
}

.checkout-step-card {
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid var(--hdt-border);
    border-radius: 22px;
    padding: 1.25rem;
}

.checkout-step-heading {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.checkout-step-heading > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    flex: 0 0 2.15rem;
    border-radius: 999px;
    color: var(--hdt-gold-dark);
    background: rgba(184, 138, 68, 0.14);
    font-weight: 800;
}

.checkout-step-heading strong,
.checkout-step-heading small {
    display: block;
}

.checkout-step-heading strong {
    color: var(--hdt-dark);
    font-size: 1.05rem;
    line-height: 1.25;
}

.checkout-step-heading small {
    margin-top: 0.15rem;
    color: var(--hdt-muted);
    font-size: 0.86rem;
}

.checkout-submit-btn {
    min-height: 56px;
    font-size: 1.02rem;
}

.checkout-total-box {
    margin-top: 1rem;
    padding: 1.1rem;
    border-radius: 22px;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(31, 26, 23, 0.96), rgba(82, 58, 39, 0.94)),
        var(--hdt-dark);
}

.checkout-total-box small,
.checkout-total-box span {
    display: block;
    color: rgba(255, 255, 255, 0.72);
}

.checkout-total-box strong {
    display: block;
    margin: 0.25rem 0;
    font-size: clamp(2rem, 4vw, 2.55rem);
    line-height: 1;
    letter-spacing: 0;
}

.checkout-items-list {
    display: grid;
    gap: 0.9rem;
    margin-top: 1rem;
}

.checkout-item-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: start;
    padding: 0.85rem;
    border: 1px solid rgba(107, 79, 63, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.62);
}

.checkout-item-info {
    min-width: 0;
}

.checkout-item-info strong {
    display: block;
    color: var(--hdt-dark);
    font-size: 0.95rem;
    line-height: 1.35;
}

.checkout-item-info small {
    color: var(--hdt-muted);
}

.checkout-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.4rem 0 0.15rem;
}

.checkout-item-meta span {
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    background: rgba(36, 28, 21, 0.06);
    color: var(--hdt-muted);
    font-size: 0.76rem;
}

.checkout-item-price {
    text-align: right;
    color: var(--hdt-dark);
    white-space: nowrap;
}

.checkout-summary-lines {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--hdt-border);
}

.checkout-line span {
    color: var(--hdt-muted);
}

.checkout-line strong {
    text-align: right;
}

.checkout-shipping-note {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 18px;
    color: var(--hdt-gold-dark);
    background: rgba(184, 138, 68, 0.1);
    font-size: 0.9rem;
    font-weight: 700;
}

.approval-box {
    background: rgba(255, 255, 255, 0.64);
    border: 1px solid var(--hdt-border);
    border-radius: 18px;
}

.approval-box .form-check {
    margin: 0;
}

/* Status timeline */
.status-timeline {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1rem 0 0;
}

.status-step {
    flex: 1 1 160px;
    min-width: 150px;
    padding: 1rem;
    border-radius: 18px;
    border: 1px solid var(--hdt-border);
    background: rgba(255, 255, 255, 0.58);
}

.status-step.done {
    background: rgba(25, 135, 84, 0.10);
    border-color: rgba(25, 135, 84, 0.18);
}

.status-step.active {
    background: rgba(184, 138, 68, 0.12);
    border-color: rgba(184, 138, 68, 0.22);
}

.status-step.pending {
    background: rgba(255, 255, 255, 0.6);
}

.status-step.failed {
    background: rgba(220, 53, 69, 0.08);
    border-color: rgba(220, 53, 69, 0.18);
}

/* Footer */
.site-footer {
    position: relative;
    overflow: hidden;
    padding: 3rem 0 1.8rem;
    background:
        radial-gradient(circle at 12% 10%, rgba(247, 188, 101, 0.34), transparent 18rem),
        radial-gradient(circle at 82% 18%, rgba(108, 145, 105, 0.28), transparent 20rem),
        radial-gradient(circle at 55% 100%, rgba(165, 88, 45, 0.22), transparent 18rem),
        linear-gradient(135deg, #21140f 0%, #332016 46%, #17221b 100%);
    color: rgba(255, 247, 238, 0.88);
}

.site-footer::before,
.site-footer::after {
    content: "";
    position: absolute;
    pointer-events: none;
    opacity: 0.55;
}

.site-footer::before {
    width: 18rem;
    height: 18rem;
    right: -5rem;
    top: -5rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 210, 138, 0.35), rgba(86, 122, 82, 0.12));
    filter: blur(2px);
}

.site-footer::after {
    left: -4rem;
    bottom: -7rem;
    width: 22rem;
    height: 13rem;
    border-radius: 50%;
    background: rgba(184, 138, 68, 0.2);
}

.footer-main-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(17rem, 0.95fr) minmax(28rem, 2.25fr) minmax(12rem, 0.95fr);
    align-items: start;
    column-gap: clamp(1.35rem, 2.5vw, 2.25rem);
}

.footer-center-block {
    display: grid;
    gap: 1.65rem;
}

.footer-link-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.1rem, 2vw, 2rem);
}

.footer-brand-link {
    display: inline-flex;
    align-items: center;
    margin-bottom: 1.25rem;
    color: #fff7ee;
    text-decoration: none;
    width: min(18rem, 100%);
    min-height: 4.65rem;
    padding: 0.7rem 1rem;
    border: 1px solid rgba(255, 247, 238, 0.14);
    border-radius: 20px;
    background:
        url("../img/logo-hayaldentabloya.png") center / 88% auto no-repeat,
        linear-gradient(135deg, rgba(255, 250, 244, 0.94), rgba(239, 227, 211, 0.86));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 18px 42px rgba(14, 10, 7, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.footer-brand-link:hover,
.footer-brand-link:focus {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 22px 52px rgba(14, 10, 7, 0.24);
}

.footer-brand-link span {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 2.2rem;
    line-height: 1;
}

.footer-brand-link span,
.footer-brand-link small {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.footer-brand-link small,
.footer-slogan {
    color: rgba(255, 247, 238, 0.58);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.site-footer h4 {
    margin: 0 0 1rem;
    color: rgba(255, 247, 238, 0.94);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.footer-text,
.footer-links a {
    color: rgba(255, 247, 238, 0.68);
}

.footer-text {
    max-width: 27rem;
    margin-bottom: 1rem;
}

.footer-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.72rem;
    margin-top: 1.15rem;
}

.footer-social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.9rem;
    height: 2.9rem;
    border: 1px solid rgba(255, 247, 238, 0.16);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(255, 247, 238, 0.18), rgba(184, 138, 68, 0.1));
    color: #fff7ee;
    font-size: 1.12rem;
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.footer-social-links a:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 210, 138, 0.55);
    background: #f2d4a6;
    color: #1f1a17;
}

.footer-proof-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    padding: 0.9rem;
    border: 1px solid rgba(255, 210, 138, 0.24);
    border-radius: 24px;
    background:
        radial-gradient(circle at 18% 20%, rgba(255, 210, 138, 0.2), transparent 11rem),
        radial-gradient(circle at 90% 90%, rgba(108, 145, 105, 0.14), transparent 10rem),
        linear-gradient(135deg, rgba(255, 247, 238, 0.1), rgba(184, 138, 68, 0.08));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 18px 50px rgba(29, 18, 12, 0.18);
}

.footer-proof-panel span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3.15rem;
    padding: 0.7rem 0.75rem;
    border: 1px solid rgba(255, 247, 238, 0.14);
    border-radius: 18px;
    background: rgba(255, 247, 238, 0.08);
    color: rgba(255, 247, 238, 0.86);
    font-size: 0.84rem;
    font-weight: 700;
    text-align: center;
}

.footer-proof-panel i {
    color: #f2d4a6;
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.65rem;
}

.footer-links a {
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

.footer-links a:hover {
    color: #fff;
    transform: translateX(3px);
}

.footer-bottom-bar {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.8rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 247, 238, 0.12);
    color: rgba(255, 247, 238, 0.52);
    font-size: 0.9rem;
}

/* Alerts and utilities */
.alert {
    border-radius: 18px;
    border: 1px solid transparent;
    box-shadow: var(--hdt-shadow-sm);
}

.table > :not(caption) > * > * {
    vertical-align: middle;
}

/* Responsive rules */
@media (max-width: 1199.98px) {
    .size-guide-hero,
    .size-guide-decision {
        grid-template-columns: 1fr;
    }

    .size-guide-hero {
        max-width: 58rem;
    }

    .size-guide-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .customize-layout,
    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .customize-page .customize-layout {
        height: auto;
    }

    .customize-page .preview-card,
    .customize-page .price-summary {
        height: auto;
        position: static;
        max-height: none;
        overflow: visible;
    }

    .customize-page .price-summary .form-card {
        height: auto;
        overflow: visible;
    }

    .customize-page .preview-stage {
        max-height: none;
    }

    .home-split-heading {
        grid-template-columns: 1fr;
    }

    .price-summary,
    .order-summary-card,
    .summary-card {
        position: static;
    }

    .pricing-choice-grid,
    .pricing-choice-grid-2,
    .pricing-choice-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .site-navbar {
        padding: 0.9rem 0;
    }

    .navbar-nav {
        padding-top: 1rem;
    }

    .nav-cta,
    .nav-cta-secondary {
        width: 100%;
        text-align: center;
        margin-top: 0.6rem;
    }

    .hero-section {
        padding-top: 8.5rem;
    }

    .home-hero-shell {
        padding: 1rem;
    }

    .home-visual-board {
        min-height: auto;
    }

    .home-visual-wall {
        min-height: 23.5rem;
        height: auto;
    }

    .home-main-poster {
        width: min(44%, 13.5rem);
    }

    .home-frame-showcase {
        gap: 0.55rem;
    }

    .home-studio-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-mockup-grid {
        grid-template-columns: 1fr;
    }

    .footer-main-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-brand-block {
        grid-column: 1 / -1;
    }

    .footer-center-block,
    .footer-main-grid > div:last-child {
        grid-column: 1 / -1;
    }

    .mockup-wall {
        min-height: 34rem;
    }

    .cart-price-block {
        min-width: 0;
        text-align: left;
    }

    .cart-item-top {
        grid-template-columns: 1fr;
    }

    .faq-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .display-title {
        max-width: none;
    }

    .home-hero {
        padding-top: 7.25rem;
    }

    .home-hero-metrics {
        grid-template-columns: 1fr;
    }

    .home-visual-wall {
        min-height: 20rem;
        height: auto;
    }

    .home-main-poster {
        width: min(52%, 12rem);
    }

    .home-frame-showcase {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-visual-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .home-frame-note {
        border-radius: 0.9rem;
        font-size: 0.74rem;
    }

    .home-frame-card {
        padding: 0.35rem;
        border-radius: 1rem;
    }

    .home-frame-card img {
        border-radius: 0.78rem;
    }

    .home-frame-card figcaption {
        font-size: 0.68rem;
        min-height: 2.6rem;
        padding: 0.35rem 0.45rem;
    }

    .home-frame-card-gold,
    .home-frame-card-silver,
    .home-frame-card-black {
        transform: none;
    }

    .home-studio-features {
        grid-template-columns: 1fr;
    }

    .home-studio-features span {
        justify-content: flex-start;
        min-height: 2.75rem;
        text-align: left;
    }

    .home-process-section,
    .home-ideas-section,
    .home-style-section,
    .home-room-section,
    .home-products-section,
    .home-reasons-section {
        padding-block: 3.2rem;
    }

    .home-process-section .section-heading,
    .home-ideas-section .section-heading,
    .home-style-section .section-heading,
    .home-room-section .section-heading,
    .home-products-section .section-heading,
    .home-reasons-section .section-heading {
        margin-bottom: 1.1rem;
    }

    .home-process-section .section-title,
    .home-ideas-section .section-title,
    .home-style-section .section-title,
    .home-room-section .section-title,
    .home-products-section .section-title,
    .home-reasons-section .section-title {
        font-size: clamp(2.25rem, 11vw, 3rem);
        line-height: 0.96;
    }

    .home-split-heading {
        gap: 0.7rem;
    }

    .home-split-heading .section-text,
    .home-process-section .section-text,
    .home-products-section .section-text {
        font-size: 0.92rem;
        line-height: 1.55;
    }

    .home-process-grid,
    .home-idea-grid,
    .home-style-grid,
    .home-room-section .row,
    .home-products-section .row,
    .home-reasons-section .row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        margin: 0;
    }

    .home-process-grid > [class*="col-"],
    .home-idea-grid > [class*="col-"],
    .home-style-grid > [class*="col-"],
    .home-room-section .row > [class*="col-"],
    .home-products-section .row > [class*="col-"],
    .home-reasons-section .row > [class*="col-"] {
        width: auto;
        max-width: none;
        padding: 0;
    }

    .home-process-card,
    .home-idea-card,
    .home-idea-card-featured,
    .home-style-grid .style-card,
    .room-card,
    .product-card,
    .reason-card {
        min-height: 100%;
    }

    .home-process-card,
    .home-idea-card,
    .style-card,
    .room-card,
    .product-card,
    .reason-card {
        padding: 0.95rem;
        border-radius: 1.25rem;
    }

    .home-idea-card::before {
        right: -2.9rem;
        top: -2.9rem;
        width: 7.2rem;
        height: 7.2rem;
    }

    .home-idea-card-featured h3,
    .home-idea-card h3,
    .style-card h3,
    .home-process-card h3,
    .room-card h3,
    .product-card h3 {
        font-family: "Manrope", sans-serif;
        font-size: 0.98rem;
        line-height: 1.22;
        margin-bottom: 0.45rem;
    }

    .home-idea-card p,
    .style-card p,
    .home-process-card p,
    .room-card p,
    .product-card p,
    .reason-card p {
        display: -webkit-box;
        min-height: 3.3rem;
        margin-bottom: 0.65rem;
        overflow: hidden;
        color: var(--hdt-text);
        font-size: 0.8rem;
        line-height: 1.38;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .home-idea-card .card-badge {
        padding: 0.42rem 0.58rem;
        font-size: 0.68rem;
    }

    .home-process-card::after,
    .home-room-section .room-card::after {
        width: 5.8rem;
        height: 5.8rem;
        opacity: 0.32;
    }

    .feature-icon,
    .product-icon,
    .reason-icon {
        width: 2rem;
        height: 2rem;
        margin-bottom: 0.55rem;
        font-size: 1rem;
    }

    .reason-card {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
    }

    .reason-card p {
        min-height: 4.4rem;
    }

    .room-tag,
    .product-note {
        font-size: 0.68rem;
        line-height: 1.25;
    }

    .home-idea-card .text-link,
    .style-card .text-link {
        margin-top: auto;
        font-size: 0.78rem;
    }

    .home-style-grid .style-swatch,
    .style-swatch {
        min-height: 6.2rem;
        margin-bottom: 0.72rem;
        border-radius: 1rem;
    }

    .style-swatch.has-cover {
        padding: 0.45rem;
    }

    .style-swatch-image {
        border-radius: 0.75rem;
        object-fit: cover;
    }

    .home-mini-poster {
        width: 5.8rem;
    }

    .footer-bottom-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .footer-main-grid {
        grid-template-columns: 1fr;
    }

    .footer-link-columns,
    .footer-proof-panel {
        grid-template-columns: 1fr;
    }

    .cart-item-layout {
        grid-template-columns: 1fr;
    }

    .cart-thumb {
        max-width: none;
        aspect-ratio: 4 / 3;
    }

    .cart-actions-row,
    .cart-quantity-form {
        align-items: stretch;
        flex-direction: column;
    }

    .cart-quantity-form .form-control,
    .cart-actions-row .btn,
    .cart-actions-row form {
        width: 100%;
    }

    .checkout-item-row {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .checkout-item-price {
        grid-column: 2;
        text-align: left;
    }

    .size-guide-hero {
        gap: 1rem;
    }

    .size-guide-hero-visual img {
        aspect-ratio: 16 / 10.4;
    }

    .size-guide-grid,
    .size-guide-decision-list {
        grid-template-columns: 1fr;
    }

    .size-guide-card-media img {
        aspect-ratio: 4 / 3;
        max-height: none;
    }

    .image-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.8rem;
    }

    .image-card {
        border-radius: 20px;
    }

    .image-card-media {
        aspect-ratio: 4 / 5;
    }

    .image-card-body {
        padding: 0.8rem;
    }

    .image-card-body .status-badge {
        padding: 0.28rem 0.5rem;
        font-size: 0.68rem;
    }

    .image-card-body .small.text-muted {
        display: none;
    }

    .image-card-body h3 {
        display: -webkit-box;
        min-height: 2.7em;
        margin-bottom: 0.55rem !important;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 0.9rem;
        line-height: 1.35;
    }

    .image-meta-badges {
        gap: 0.35rem;
        margin-bottom: 0.65rem !important;
    }

    .image-meta-badges span {
        max-width: 100%;
        padding: 0.22rem 0.45rem;
        overflow: hidden;
        font-size: 0.68rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .image-meta-badges span:nth-child(n+3) {
        display: none;
    }

    .image-card-actions {
        flex-direction: row;
        gap: 0.35rem;
        margin-top: 0.65rem;
    }

    .image-card-actions .btn,
    .image-card-actions form {
        width: auto;
        flex: 1 1 calc(50% - 0.35rem);
        min-width: 0;
    }

    .image-card-actions .btn {
        min-height: 2.2rem;
        padding: 0.42rem 0.48rem;
        font-size: 0.72rem;
        line-height: 1.15;
    }

    .gallery-card-head {
        gap: 0.4rem;
        font-size: 0.68rem;
    }

    .gallery-card-head .status-badge {
        max-width: 6.4rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .gallery-card-title {
        min-height: 2.7em;
        margin: 0.55rem 0;
        font-size: 0.88rem;
        -webkit-line-clamp: 2;
    }

    .gallery-card-tags {
        min-height: 1.55rem;
        margin-bottom: 0.6rem !important;
    }

    .gallery-card-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.35rem;
    }

    .gallery-card-actions form {
        display: contents;
    }

    .gallery-card-actions .btn,
    .gallery-card-actions form {
        width: 100%;
        flex: initial;
    }

    .community-masonry-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.8rem;
        columns: initial;
    }

    .community-gallery-card {
        display: flex;
        flex-direction: column;
        margin: 0;
        border-radius: 20px;
    }

    .community-gallery-media {
        min-height: 0;
        aspect-ratio: 4 / 5;
    }

    .community-gallery-media img {
        width: 100%;
        height: 100%;
        min-height: 0;
        object-fit: cover;
    }

    .community-gallery-overlay {
        display: none;
    }

    .community-gallery-body {
        display: flex;
        flex: 1;
        flex-direction: column;
        padding: 0.8rem;
    }

    .community-gallery-body p {
        display: -webkit-box;
        min-height: 2.7em;
        margin-bottom: 0.65rem;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 0.82rem;
        line-height: 1.35;
    }

    .community-gallery-tags {
        gap: 0.35rem;
        margin-bottom: 0.55rem;
    }

    .community-gallery-tags span {
        max-width: 100%;
        padding: 0.22rem 0.45rem;
        overflow: hidden;
        font-size: 0.66rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .community-gallery-tags span:nth-child(n+3) {
        display: none;
    }

    .community-gallery-body .btn {
        margin-top: auto;
        min-height: 2.25rem;
        padding: 0.42rem 0.48rem;
        font-size: 0.72rem;
        line-height: 1.15;
    }

    .community-live-feed-inline {
        width: 100%;
        max-width: none;
        padding: 0.75rem;
    }

    .community-live-feed-pills {
        gap: 0.35rem;
    }

    .community-live-feed-pills span {
        padding: 0.24rem 0.45rem;
        font-size: 0.68rem;
    }

.hero-actions,
.cta-actions,
.admin-action-bar,
.image-card-actions:not(.image-card .image-card-actions) {
    flex-direction: column;
}

@media (max-width: 575.98px) {
    .pricing-choice-grid,
    .pricing-choice-grid-2,
    .pricing-choice-grid-3,
    .pricing-compact-row {
        grid-template-columns: 1fr;
    }

    .product-info-grid {
        grid-template-columns: 1fr;
    }
}

    .hero-actions .btn,
    .cta-actions .btn,
    .image-card-actions:not(.image-card .image-card-actions) .btn {
        width: 100%;
    }

    .hero-badges {
        flex-direction: column;
    }

    .mockup-meta,
    .generator-grid,
    .style-guide-grid,
    .option-grid {
        grid-template-columns: 1fr;
    }

    .style-guide-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .content-section {
        padding: 4rem 0;
    }

    .cta-panel {
        padding: 1.5rem;
    }

    .mockup-wall {
        min-height: 28rem;
        padding-bottom: 5rem;
    }

    .mockup-digital-card {
        width: 100%;
    }

    .mockup-size-small { width: min(100%, 11rem); }
    .mockup-size-medium { width: min(100%, 13.5rem); }
    .mockup-size-large { width: min(100%, 15rem); }
    .mockup-size-xlarge { width: min(100%, 16.5rem); }

    .mockup-scale-caption {
        bottom: calc(20% + 0.7rem);
        max-width: calc(100% - 2rem);
        white-space: normal;
        justify-content: center;
        text-align: center;
    }

    .cart-card .form-control {
        width: 100% !important;
    }
}

/* Community Gallery */
.community-masonry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13.75rem, 1fr));
    gap: 1.25rem;
    align-items: stretch;
    columns: initial;
}

.community-masonry-grid-small {
    columns: 4 14rem;
}

.gallery-detail-shell .community-masonry-grid-small {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 19rem));
    justify-content: start;
    align-items: stretch;
    gap: 1.35rem;
    columns: initial;
}

.gallery-detail-shell .community-masonry-grid-small .community-gallery-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: 0;
}

.gallery-detail-shell .community-masonry-grid-small .community-gallery-media {
    min-height: 0;
    aspect-ratio: 3 / 4;
}

.gallery-detail-shell .community-masonry-grid-small .community-gallery-media img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
}

.gallery-detail-shell .community-masonry-grid-small .community-gallery-body {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.gallery-detail-shell .community-masonry-grid-small .community-gallery-body .text-link {
    margin-top: auto;
}

.community-preview-section {
    padding: 4rem 0;
}

.community-carousel-shell {
    position: relative;
    isolation: isolate;
}

.community-carousel-shell::before,
.community-carousel-shell::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 1.35rem;
    pointer-events: none;
}

.community-carousel-shell::before {
    left: 0;
    background: linear-gradient(90deg, rgba(247, 241, 232, 0.72) 0%, rgba(247, 241, 232, 0) 100%);
}

.community-carousel-shell::after {
    right: 0;
    background: linear-gradient(270deg, rgba(247, 241, 232, 0.72) 0%, rgba(247, 241, 232, 0) 100%);
}

.community-scroll-row {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-inline: contain;
    padding: 0.25rem 0.1rem 0.85rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scroll-behavior: smooth;
}

.community-carousel-track {
    scrollbar-width: none;
    cursor: grab;
    scroll-snap-type: none;
}

.community-carousel-track::-webkit-scrollbar {
    display: none;
}

.community-carousel-track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

.community-carousel-track.is-paused .community-gallery-card {
    transform: none;
}

.community-carousel-control {
    position: absolute;
    top: 50%;
    z-index: 4;
    width: 2.8rem;
    height: 2.8rem;
    border: 1px solid rgba(107, 79, 63, 0.18);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--hdt-ink);
    background: rgba(255, 250, 243, 0.95);
    box-shadow: 0 18px 42px rgba(64, 44, 27, 0.13);
    transform: translateY(-50%);
}

.community-carousel-control:hover {
    color: #fff;
    background: var(--hdt-ink);
}

.community-carousel-prev {
    left: -1.35rem;
}

.community-carousel-next {
    right: -1.35rem;
}

.community-scroll-row .community-gallery-card {
    display: flex;
    flex: 0 0 clamp(13.75rem, 18vw, 16rem);
    flex-direction: column;
    margin: 0;
    scroll-snap-align: start;
}

.community-scroll-row .community-gallery-media,
.community-scroll-row .community-gallery-cta {
    position: relative;
    z-index: 3;
}

.community-scroll-row .community-gallery-media {
    min-height: 0;
    height: 15.25rem;
}

.community-scroll-row .community-gallery-media img {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    object-fit: cover;
}

.community-scroll-row .community-gallery-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 0.85rem;
}

.community-scroll-row .community-gallery-body p {
    min-height: 4.2rem;
    font-size: 0.82rem;
}

.community-gallery-cta {
    margin-top: auto;
}

.community-live-feed-compact {
    min-width: 10rem;
    padding: 0.65rem 0.85rem;
}

.community-live-feed-compact strong,
.community-live-feed-compact span {
    display: inline;
}

.community-live-feed-compact strong {
    margin-right: 0.35rem;
}

.community-gallery-card {
    display: inline-block;
    width: 100%;
    margin: 0 0 1.25rem;
    overflow: hidden;
    border: 1px solid rgba(107, 79, 63, 0.14);
    border-radius: 1.5rem;
    background: rgba(255, 250, 243, 0.94);
    box-shadow: 0 24px 60px rgba(64, 44, 27, 0.08);
    break-inside: avoid;
}

.community-masonry-grid .community-gallery-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
}

.community-gallery-media {
    position: relative;
    display: block;
    min-height: 15rem;
    overflow: hidden;
    background: linear-gradient(135deg, #efe3d3, #d6b89f);
}

.community-masonry-grid .community-gallery-media {
    min-height: 0;
    aspect-ratio: 4 / 5;
}

.community-gallery-media img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 15rem;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.community-masonry-grid .community-gallery-media img {
    height: 100%;
    min-height: 0;
}

.community-gallery-card:hover .community-gallery-media img {
    transform: scale(1.045);
}

.community-gallery-overlay {
    position: absolute;
    inset: auto 0 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    color: #fff;
    background: linear-gradient(180deg, transparent, rgba(31, 26, 23, 0.78));
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.community-gallery-card:hover .community-gallery-overlay {
    opacity: 1;
    transform: translateY(0);
}

.community-gallery-body {
    padding: 1rem;
}

.community-masonry-grid .community-gallery-body {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.community-gallery-body p {
    color: var(--hdt-muted);
    font-size: 0.94rem;
}

.community-masonry-grid .community-gallery-body p {
    display: -webkit-box;
    min-height: 4.25em;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.community-masonry-grid .community-gallery-body .btn {
    margin-top: auto;
}

.community-gallery-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
}

.community-gallery-tags span {
    display: inline-flex;
    align-items: center;
    padding: 0.36rem 0.62rem;
    border-radius: 999px;
    color: #8a5a1f;
    background: rgba(184, 138, 68, 0.13);
    font-size: 0.76rem;
    font-weight: 800;
}

.community-live-feed {
    min-width: min(100%, 18rem);
    padding: 0.9rem 1rem;
    border: 1px solid rgba(107, 79, 63, 0.14);
    border-radius: 1.2rem;
    background: rgba(255, 250, 243, 0.86);
    box-shadow: 0 16px 40px rgba(64, 44, 27, 0.06);
}

.community-live-feed strong,
.community-live-feed span {
    display: block;
}

.community-live-feed span {
    color: var(--hdt-muted);
    font-size: 0.84rem;
}

.community-live-feed-inline {
    max-width: 24rem;
}

.community-live-feed-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.55rem;
}

.community-live-feed-pills span {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    color: var(--hdt-gold-dark);
    background: rgba(184, 138, 68, 0.12);
    font-size: 0.76rem;
    font-weight: 800;
}

.community-share-status {
    padding: 0.95rem 1rem;
    border: 1px solid rgba(107, 79, 63, 0.14);
    border-radius: 1.1rem;
    background: rgba(247, 241, 232, 0.72);
}

.community-share-status strong,
.community-share-status span,
.community-share-status a {
    display: block;
}

.community-share-status span {
    color: var(--hdt-muted);
    font-size: 0.9rem;
}

.community-share-option {
    display: flex;
    gap: 0.75rem;
    padding: 0.85rem 0.9rem;
    margin-bottom: 0.65rem;
    border: 1px solid rgba(107, 79, 63, 0.14);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.58);
    cursor: pointer;
}

.community-share-option input {
    margin-top: 0.22rem;
}

.community-share-option strong,
.community-share-option small {
    display: block;
}

.community-share-option small {
    color: var(--hdt-muted);
}

.gallery-detail-shell {
    padding-top: 8.5rem;
}

.gallery-detail-media-card {
    overflow: hidden;
    border-radius: 2rem;
    border: 1px solid rgba(107, 79, 63, 0.14);
    background: rgba(255, 250, 243, 0.94);
    box-shadow: 0 24px 60px rgba(64, 44, 27, 0.09);
}

.gallery-detail-media-card img {
    display: block;
    width: 100%;
    height: auto;
}

.gallery-detail-info {
    top: 7rem;
}

.gallery-detail-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    color: var(--hdt-muted);
    font-size: 0.9rem;
}

.gallery-detail-stats span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

@media (max-width: 767.98px) {
    .room-selector-card {
        align-items: stretch;
        flex-direction: column;
    }

    .room-selector-list {
        justify-content: flex-start;
    }

    .mockup-choice-groups {
        min-width: 0;
    }

    .mockup-choice-group {
        grid-template-columns: 1fr;
    }

    .room-selector-pill {
        flex: 1 1 calc(50% - 0.55rem);
    }

.real-mockup-preview {
        border-radius: 1.25rem;
    }
}

.upload-shell {
    padding-top: 8.6rem;
}

.upload-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.8fr);
    gap: clamp(1.25rem, 3vw, 2rem);
    align-items: stretch;
    margin-bottom: 1.4rem;
    padding: clamp(1.35rem, 3vw, 2rem);
}

.upload-hero-copy {
    display: grid;
    align-content: center;
}

.upload-proof-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1rem;
}

.upload-proof-row span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.58rem 0.78rem;
    border: 1px solid rgba(107, 79, 63, 0.12);
    border-radius: 999px;
    background: rgba(255, 250, 244, 0.78);
    color: var(--hdt-text);
    font-size: 0.86rem;
    font-weight: 750;
}

.upload-proof-row i {
    color: var(--hdt-gold);
}

.upload-preview-card {
    min-height: 18rem;
    padding: 0.8rem;
    border-radius: 1.7rem;
    background:
        linear-gradient(90deg, rgba(107, 79, 63, 0.045) 1px, transparent 1px) 0 0 / 4rem 100%,
        linear-gradient(180deg, #f7efe4 0%, #f2e5d5 68%, #d8b493 68%, #cda57f 100%);
}

.upload-preview-frame {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.35rem;
    height: 100%;
    min-height: 16.5rem;
    border: 0.7rem solid rgba(255, 250, 244, 0.85);
    border-radius: 1.35rem;
    background: rgba(255, 250, 244, 0.74);
    text-align: center;
    box-shadow: 0 1.5rem 3rem rgba(31, 26, 23, 0.12);
    overflow: hidden;
}

.upload-preview-frame i {
    color: var(--hdt-gold);
    font-size: 2.35rem;
}

.upload-preview-frame strong {
    color: var(--hdt-dark);
    font-size: 1.2rem;
}

.upload-preview-frame span {
    max-width: 18rem;
    color: var(--hdt-muted);
    font-size: 0.9rem;
}

.upload-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.42fr);
    gap: 1.25rem;
    align-items: start;
}

.upload-form-card,
.upload-side-card {
    padding: clamp(1.2rem, 2vw, 1.65rem);
}

.upload-form-head h2 {
    margin: 0.35rem 0 0.35rem;
    color: var(--hdt-dark);
    font-size: clamp(1.65rem, 3vw, 2.2rem);
}

.upload-form-head p,
.upload-note {
    color: var(--hdt-muted);
}

.upload-dropzone {
    position: relative;
    display: grid;
    place-items: center;
    gap: 0.3rem;
    min-height: 13rem;
    margin-top: 1rem;
    padding: 1.4rem;
    border: 1.5px dashed rgba(184, 138, 68, 0.42);
    border-radius: 1.35rem;
    background:
        radial-gradient(circle at 50% 0%, rgba(184, 138, 68, 0.12), transparent 18rem),
        rgba(255, 250, 244, 0.68);
    color: var(--hdt-text);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.upload-dropzone:hover {
    border-color: rgba(184, 138, 68, 0.72);
    background: rgba(255, 250, 244, 0.88);
    transform: translateY(-1px);
}

.upload-dropzone.has-image,
.upload-preview-frame.has-image {
    border-style: solid;
    background: rgba(255, 255, 255, 0.92);
}

.upload-dropzone img[data-upload-selected-preview],
.upload-preview-frame img[data-upload-selected-preview] {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: 0.75rem;
    object-fit: contain;
    border-radius: inherit;
}

.upload-dropzone.has-image i,
.upload-dropzone.has-image span,
.upload-preview-frame.has-image i,
.upload-preview-frame.has-image strong,
.upload-preview-frame.has-image span {
    display: none;
}

.upload-dropzone.has-image strong {
    position: absolute;
    right: 0.85rem;
    bottom: 0.85rem;
    left: 0.85rem;
    z-index: 2;
    max-width: calc(100% - 1.7rem);
    padding: 0.5rem 0.7rem;
    overflow: hidden;
    border: 1px solid rgba(222, 204, 184, 0.85);
    border-radius: 999px;
    background: rgba(255, 250, 244, 0.92);
    box-shadow: 0 0.65rem 1.4rem rgba(31, 26, 23, 0.08);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-dropzone i {
    color: var(--hdt-gold);
    font-size: 2.2rem;
}

.upload-dropzone strong {
    color: var(--hdt-dark);
    font-size: 1.05rem;
}

.upload-dropzone span {
    color: var(--hdt-muted);
    font-size: 0.88rem;
}

.upload-dropzone input {
    position: absolute;
    inset: 0;
    z-index: 4;
    opacity: 0;
    cursor: pointer;
}

.upload-steps {
    display: grid;
    gap: 0.75rem;
    margin: 1rem 0;
}

.upload-steps div {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.78rem;
    border: 1px solid rgba(107, 79, 63, 0.1);
    border-radius: 1rem;
    background: rgba(255, 250, 244, 0.72);
}

.upload-steps strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--hdt-dark);
    color: var(--hdt-cream);
    font-size: 0.85rem;
}

.upload-steps span {
    color: var(--hdt-text);
    font-weight: 750;
}

@media (max-width: 991.98px) {
    .upload-hero,
    .upload-layout {
        grid-template-columns: 1fr;
    }
}

.home-hero .hero-actions {
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.75rem;
}

.home-hero .hero-actions .btn {
    width: auto;
    min-height: 3.55rem;
    padding-inline: 1.15rem;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .home-hero .hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .home-hero .hero-actions .btn {
        width: 100%;
    }
}

/* Site-wide mobile polish */
@media (max-width: 767.98px) {
    :root {
        --hdt-page-padding: 6.8rem 0 2.6rem;
    }

    body {
        overflow-x: hidden;
    }

    .container {
        padding-inline: 0.85rem;
    }

    .page-shell,
    .generator-shell,
    .gallery-shell,
    .customize-shell,
    .cart-shell,
    .checkout-shell,
    .profile-shell,
    .orders-shell,
    .favorites-shell,
    .mockup-shell,
    .upload-shell,
    .gallery-detail-shell {
        padding-top: 6.8rem;
        padding-bottom: 2.6rem;
    }

    .content-section {
        padding: 3rem 0;
    }

    .page-title,
    .checkout-title,
    .section-title,
    .display-title {
        max-width: 100%;
        font-size: clamp(2.2rem, 11vw, 3.25rem);
        line-height: 0.96;
        overflow-wrap: anywhere;
    }

    .section-heading,
    .page-hero-small,
    .admin-page-header {
        margin-bottom: 1.15rem;
    }

    .section-text,
    .page-subtitle {
        font-size: 0.94rem;
        line-height: 1.58;
    }

    .content-card,
    .soft-card,
    .action-card,
    .form-card,
    .summary-card,
    .preview-card,
    .page-card,
    .filter-card,
    .empty-state,
    .cart-card,
    .cart-summary,
    .checkout-summary,
    .checkout-note,
    .detail-card,
    .step-card,
    .success-card,
    .damage-card,
    .orders-card,
    .profile-card,
    .profile-form-card,
    .upload-form-card,
    .upload-side-card {
        padding: 1rem;
        border-radius: 1.25rem;
    }

    .btn,
    .btn-primary-custom,
    .btn-outline-custom {
        min-height: 2.85rem;
        padding-inline: 0.95rem;
    }

    .filter-card .row,
    .form-card .row,
    .checkout-step-card .row,
    .damage-card .row,
    .profile-form-card .row,
    .upload-form-card .row {
        row-gap: 0.75rem;
    }

    .checkout-layout,
    .customize-layout,
    .upload-layout,
    .hero-mockup-grid,
    .size-guide-hero,
    .size-guide-decision {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .order-summary-card,
    .summary-card,
    .cart-summary,
    .gallery-detail-info {
        position: static;
        top: auto;
    }

    .pricing-choice-grid,
    .pricing-choice-grid-2,
    .pricing-choice-grid-3,
    .pricing-compact-row,
    .profile-stat-grid,
    .orders-stat-grid,
    .order-next-grid,
    .faq-grid,
    .size-guide-decision-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .image-grid,
    .gallery-grid,
    .favorites-shell .row.g-4,
    .profile-shell .row.g-3:last-child,
    .size-guide-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        margin: 0;
    }

    .image-grid > [class*="col-"],
    .gallery-grid > [class*="col-"],
    .favorites-shell .row.g-4 > [class*="col-"],
    .profile-shell .row.g-3:last-child > [class*="col-"] {
        width: auto;
        max-width: none;
        padding: 0;
    }

    .image-card,
    .favorite-card,
    .template-card,
    .community-gallery-card,
    .profile-action-card,
    .size-guide-card {
        border-radius: 1.1rem;
    }

    .image-card-body,
    .image-body,
    .favorite-body,
    .template-card,
    .community-gallery-body,
    .profile-action-card,
    .size-guide-card-body {
        padding: 0.8rem;
    }

    .image-card-media,
    .favorite-preview {
        aspect-ratio: 4 / 5;
    }

    .image-card-body h3,
    .favorite-card h3,
    .template-card h3,
    .community-gallery-body h3,
    .profile-action-card strong,
    .size-guide-card h3 {
        display: -webkit-box;
        min-height: 2.45em;
        overflow: hidden;
        font-size: 0.92rem;
        line-height: 1.22;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .image-card-body p,
    .favorite-card p,
    .template-card p,
    .community-gallery-body p,
    .profile-action-card p,
    .size-guide-card p {
        display: -webkit-box;
        min-height: 3.3em;
        overflow: hidden;
        font-size: 0.78rem;
        line-height: 1.38;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .image-card-actions,
    .gallery-card-actions {
        flex-direction: row;
        gap: 0.35rem;
    }

    .image-card-actions .btn,
    .image-card-actions form,
    .gallery-card-actions .btn,
    .gallery-card-actions form {
        flex: 1 1 calc(50% - 0.35rem);
        min-width: 0;
    }

    .community-masonry-grid,
    .community-masonry-grid-small {
        columns: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .community-masonry-grid .community-gallery-card,
    .community-masonry-grid-small .community-gallery-card {
        display: flex;
        margin: 0;
    }

    .community-gallery-media img {
        min-height: 9.5rem;
        aspect-ratio: 4 / 5;
        object-fit: cover;
    }

    .cart-item-layout,
    .cart-item-top,
    .checkout-item,
    .gallery-detail-shell .row,
    .order-success-page .row,
    .damage-report-page .row {
        grid-template-columns: 1fr;
    }

    .cart-thumb {
        width: 100%;
        max-height: 14rem;
    }

    .cart-item-actions,
    .cart-item-actions form,
    .cart-item-actions .btn,
    .mockup-actions,
    .mockup-actions .btn {
        width: 100%;
    }

    .checkout-step-card {
        padding: 1rem;
    }

    .checkout-item {
        gap: 0.75rem;
    }

    .checkout-thumb {
        width: 4.8rem;
        min-width: 4.8rem;
    }

    .orders-desktop-table {
        display: none !important;
    }

    .orders-mobile-list {
        display: grid !important;
        gap: 0.85rem;
    }

    .order-mobile-card {
        border-radius: 1.15rem;
    }

    .profile-hero .row,
    .profile-shell .row.g-4,
    .damage-card .row.g-3,
    .upload-hero {
        display: grid;
        grid-template-columns: 1fr;
        margin-inline: 0;
    }

    .profile-hero .row > [class*="col-"],
    .profile-shell .row.g-4 > [class*="col-"],
    .damage-card .row.g-3 > [class*="col-"],
    .upload-hero > * {
        width: auto;
        max-width: none;
        padding-inline: 0;
    }
}

@media (max-width: 575.98px) {
    .container {
        padding-inline: 0.7rem;
    }

    .pricing-choice-grid,
    .pricing-choice-grid-2,
    .pricing-choice-grid-3,
    .pricing-compact-row,
    .faq-grid,
    .order-next-grid {
        grid-template-columns: 1fr;
    }

    .profile-stat-grid,
    .orders-stat-grid,
    .image-grid,
    .gallery-grid,
    .favorites-shell .row.g-4,
    .profile-shell .row.g-3:last-child,
    .size-guide-grid,
    .community-masonry-grid,
    .community-masonry-grid-small {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.62rem;
    }

    .image-card-body,
    .image-body,
    .favorite-body,
    .template-card,
    .community-gallery-body,
    .profile-action-card,
    .size-guide-card-body {
        padding: 0.68rem;
    }

    .image-card-actions .btn,
    .gallery-card-actions .btn {
        min-height: 2.15rem;
        padding: 0.4rem 0.45rem;
        font-size: 0.7rem;
        line-height: 1.15;
    }

    .content-card,
    .form-card,
    .summary-card,
    .preview-card,
    .page-card,
    .filter-card,
    .cart-card,
    .checkout-summary,
    .detail-card,
    .step-card,
    .success-card,
    .damage-card,
    .orders-card,
    .profile-card,
    .profile-form-card {
        padding: 0.9rem;
    }
}

/* Light Box compact layout overrides */
.lightbox-page .content-card {
    padding: 1.25rem;
}

.lightbox-page .eyebrow {
    padding: 0.5rem 0.72rem;
    font-size: 0.72rem;
}

.lightbox-hero {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
    gap: 1.2rem;
    margin-bottom: 1rem;
}

.lightbox-hero-copy .section-title {
    max-width: 12ch;
    font-size: clamp(2.15rem, 3.4vw, 3.25rem);
    line-height: 0.98;
}

.lightbox-hero .section-text {
    max-width: 58ch;
    font-size: 0.92rem;
}

.lightbox-product-frame {
    justify-self: end;
    max-width: 330px;
    padding: 0.5rem;
    border-radius: 16px;
    box-shadow: 0 18px 38px rgba(31, 26, 23, 0.14);
}

.lightbox-product-frame img {
    aspect-ratio: 4 / 5;
    max-height: 420px;
    border-radius: 10px;
}

.lightbox-page .laser-hero-points {
    gap: 0.55rem;
    margin-top: 0.95rem;
}

.lightbox-page .laser-hero-points span {
    min-height: 42px;
    padding: 0.62rem 0.75rem;
    gap: 0.5rem;
    font-size: 0.86rem;
}

.lightbox-style-library {
    margin-bottom: 1rem;
}

.lightbox-style-library .template-section-title {
    font-size: clamp(1.85rem, 2.8vw, 2.55rem);
    line-height: 1;
}

.lightbox-style-library .section-text {
    font-size: 0.9rem;
}

.lightbox-page .template-filter-bar {
    padding: 0.65rem;
    gap: 0.45rem;
}

.lightbox-page .filter-chip {
    min-height: 38px;
    padding: 0.5rem 0.8rem;
    font-size: 0.84rem;
}

.lightbox-style-card-grid {
    margin-top: 0.25rem;
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}

.lightbox-page .template-card.lightbox-style-card {
    padding: 1rem;
    gap: 0.65rem;
}

.lightbox-style-preview,
.lightbox-style-preview-art {
    min-height: 104px;
}

.lightbox-style-preview-art::before {
    width: 58px;
    height: 72px;
    top: 16px;
}

.lightbox-style-preview-art::after {
    width: 96px;
    height: 50px;
    bottom: 14px;
}

.lightbox-style-preview-art i {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.15rem;
}

.lightbox-style-preview-art span {
    bottom: 29px;
}

.lightbox-page .template-card h3 {
    font-size: 1rem;
    line-height: 1.2;
}

.lightbox-page .template-card p {
    font-size: 0.84rem;
    line-height: 1.45;
}

.lightbox-page .template-card .btn {
    min-height: 40px;
    padding: 0.55rem 0.8rem;
}

@media (max-width: 991.98px) {
    .lightbox-page .content-card {
        padding: 1.1rem;
    }

    .lightbox-product-frame {
        justify-self: start;
        max-width: 300px;
    }
}

@media (max-width: 575.98px) {
    .lightbox-page .content-card {
        padding: 1rem;
    }

    .lightbox-hero-copy .section-title {
        font-size: 2.05rem;
    }

    .lightbox-product-frame {
        max-width: 260px;
    }
}
/* Light Box card density refinement */
.lightbox-page .template-preview.lightbox-style-preview {
    height: 116px;
    min-height: 0;
    padding: 0.35rem;
    border-radius: 16px;
}

.lightbox-page .template-preview.lightbox-style-preview .lightbox-style-preview-art {
    min-height: 0;
    height: 100%;
    border-radius: 12px;
}

.lightbox-page .template-card.lightbox-style-card {
    min-height: 0;
}

.lightbox-page .template-card.lightbox-style-card h3,
.lightbox-page .template-card.lightbox-style-card p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lightbox-page .template-card.lightbox-style-card h3 {
    -webkit-line-clamp: 2;
}

.lightbox-page .template-card.lightbox-style-card p {
    -webkit-line-clamp: 3;
    margin-bottom: 0.25rem;
}
/* Light Box style cards should not stretch to the tallest row item */
.lightbox-page .template-card.lightbox-style-card {
    position: relative;
    height: auto;
    align-self: flex-start;
}

.lightbox-page .template-card.lightbox-style-card .template-badge {
    width: max-content;
    max-width: 100%;
    min-height: 28px;
    padding: 0.38rem 0.65rem;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
}

.lightbox-page .template-card.lightbox-style-card .lightbox-requirement-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    margin-left: 0;
}

.lightbox-page .template-card.lightbox-style-card h3 {
    margin-top: 0.35rem !important;
    margin-bottom: 0.25rem !important;
}

.lightbox-page .template-card.lightbox-style-card .template-meta {
    gap: 0.35rem;
    margin-bottom: 0.45rem !important;
}

.lightbox-page .template-card.lightbox-style-card .template-meta span {
    padding: 0.28rem 0.55rem;
    font-size: 0.76rem;
}

.lightbox-page .template-card.lightbox-style-card .mt-auto {
    margin-top: 0.4rem !important;
    padding-top: 0.35rem !important;
}
/* AI generation in-progress feedback */
.generation-status {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0 0 1rem;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(184, 138, 68, 0.32);
    border-radius: var(--hdt-radius-sm);
    background: rgba(255, 248, 239, 0.96);
    color: var(--hdt-dark);
    box-shadow: 0 14px 34px rgba(31, 26, 23, 0.1);
}

.generation-status span:last-child,
.generation-overlay-card {
    display: grid;
    gap: 0.22rem;
}

.generation-status strong,
.generation-overlay-card strong {
    font-weight: 900;
}

.generation-status small,
.generation-overlay-card small {
    color: var(--hdt-muted);
    line-height: 1.45;
}

.generation-spinner {
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 3px solid rgba(184, 138, 68, 0.24);
    border-top-color: var(--hdt-gold);
    animation: generationSpin 0.8s linear infinite;
}

.generation-spinner-inline {
    width: 1.05rem;
    height: 1.05rem;
    border-width: 2px;
    margin-right: 0.45rem;
}

.generation-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: rgba(31, 26, 23, 0.28);
    backdrop-filter: blur(3px);
}

.generation-overlay-card {
    width: min(92vw, 430px);
    justify-items: center;
    text-align: center;
    padding: 1.35rem;
    border-radius: var(--hdt-radius);
    border: 1px solid rgba(184, 138, 68, 0.28);
    background: rgba(255, 252, 247, 0.98);
    box-shadow: 0 24px 64px rgba(31, 26, 23, 0.22);
}

.is-generation-busy {
    cursor: wait;
}

button.is-loading {
    pointer-events: none;
}

@keyframes generationSpin {
    to {
        transform: rotate(360deg);
    }
}
/* User-facing preview watermark; does not alter stored image files */
.preview-watermark {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    user-select: none;
}

.preview-watermark > img {
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

.preview-watermark::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image: url("../img/logo-hayaldentabloya.png");
    background-repeat: repeat;
    background-position: 24px 24px;
    background-size: 190px auto;
    opacity: 0.12;
    transform: rotate(-18deg) scale(1.22);
    transform-origin: center;
    mix-blend-mode: multiply;
}

.preview-watermark::after {
    content: attr(data-watermark-label);
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(-18deg);
    padding: 0.45rem 1rem;
    border: 1px solid rgba(31, 26, 23, 0.22);
    border-radius: 999px;
    background: rgba(255, 252, 247, 0.42);
    color: rgba(31, 26, 23, 0.28);
    font-weight: 900;
    font-size: clamp(1.15rem, 3.2vw, 2rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.lightbox-output-figure.preview-watermark::before,
.lightbox-output-figure.preview-watermark::after {
    border-radius: var(--hdt-radius-sm);
}

@media (max-width: 575.98px) {
    .preview-watermark::before {
        background-size: 145px auto;
        opacity: 0.13;
    }

    .preview-watermark::after {
        font-size: 1rem;
    }
}
.lightbox-output-watermark::before,
.lightbox-output-watermark::after {
    border-radius: var(--hdt-radius-sm);
}
/* Compact home cards: keep the landing page lighter without touching order/detail pages. */
.home-process-section .feature-card,
.home-ideas-section .prompt-card,
.home-style-section .style-card,
.home-room-section .room-card,
.home-products-section .product-card,
.home-reasons-section .reason-card {
    height: auto;
    min-height: 0;
    padding: 1.05rem;
}

.home-process-section .feature-card h3,
.home-ideas-section .prompt-card h3,
.home-style-section .style-card h3,
.home-room-section .room-card h3,
.home-products-section .product-card h3 {
    font-size: 1.12rem;
    margin-bottom: 0.55rem;
}

.home-process-section .feature-card p,
.home-ideas-section .prompt-card p,
.home-style-section .style-card p,
.home-room-section .room-card p,
.home-products-section .product-card p {
    line-height: 1.42;
    margin-bottom: 0.65rem;
}

.home-style-section .style-swatch {
    min-height: 7.75rem;
    margin-bottom: 0.7rem;
}
.home-process-section .feature-card,
.home-ideas-section .prompt-card,
.home-style-section .style-card,
.home-room-section .room-card,
.home-products-section .product-card {
    padding: 0.9rem;
}

.home-process-section .feature-step {
    width: 2.15rem;
    height: 2.15rem;
    margin-bottom: 0.55rem;
}

.home-process-section .feature-card p,
.home-ideas-section .prompt-card p,
.home-style-section .style-card p,
.home-room-section .room-card p,
.home-products-section .product-card p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-process-section .feature-card p,
.home-style-section .style-card p,
.home-room-section .room-card p,
.home-products-section .product-card p {
    -webkit-line-clamp: 2;
}

.home-ideas-section .prompt-card p {
    -webkit-line-clamp: 3;
}

.home-style-section .style-swatch {
    height: 6.35rem;
    min-height: 0;
}

.home-style-section .style-card p {
    flex-grow: 0;
}
/* Tighten vertical rhythm between homepage sections. */
.home-process-section,
.home-lightbox-section,
.home-ideas-section,
.home-style-section,
.home-room-section,
.home-products-section,
.home-reasons-section {
    padding-block: 2.6rem;
}

.home-style-section {
    padding-bottom: 1.25rem;
}

.home-room-section {
    padding-top: 1.35rem;
}

.home-style-section .section-heading,
.home-room-section .section-heading,
.home-products-section .section-heading,
.home-reasons-section .section-heading {
    margin-bottom: 1.15rem;
}

@media (max-width: 767.98px) {
    .home-process-section,
    .home-lightbox-section,
    .home-ideas-section,
    .home-style-section,
    .home-room-section,
    .home-products-section,
    .home-reasons-section {
        padding-block: 2rem;
    }

    .home-style-section {
        padding-bottom: 0.9rem;
    }

    .home-room-section {
        padding-top: 1rem;
    }
}

/* Homepage style cards: keep the first view compact, then reveal all cards on demand. */
.home-style-grid.is-collapsed > [class*="col-"]:nth-child(n+9) {
    display: none;
}

.home-style-grid.is-expanded > [class*="col-"] {
    display: block;
}

.home-style-more {
    display: flex;
    justify-content: center;
    margin-top: 1.35rem;
}

.home-style-more-btn {
    min-width: 12rem;
}

@media (max-width: 767.98px) {
    .home-style-grid.is-collapsed > [class*="col-"]:nth-child(n+5) {
        display: none !important;
    }

    .home-style-grid.is-expanded > [class*="col-"] {
        display: block !important;
    }

    .home-style-more {
        margin-top: 0.9rem;
    }

    .home-style-more-btn {
        width: min(100%, 16rem);
    }
}

/* Homepage decoration-studio refresh. Structure stays the same; this only retunes color, depth and material feel. */
:root {
    --hdt-decor-ivory: #fffaf3;
    --hdt-decor-linen: #f4eadf;
    --hdt-decor-sage: #8f9c83;
    --hdt-decor-sage-soft: #eef3ea;
    --hdt-decor-clay: #c9855a;
    --hdt-decor-clay-soft: #f6e3d6;
    --hdt-decor-olive: #5f6f55;
    --hdt-decor-walnut: #3a281f;
}

body {
    background:
        linear-gradient(135deg, rgba(143, 156, 131, 0.16) 0%, rgba(143, 156, 131, 0) 34%),
        linear-gradient(225deg, rgba(201, 133, 90, 0.15) 0%, rgba(201, 133, 90, 0) 32%),
        linear-gradient(180deg, #fffaf3 0%, #f6eee5 42%, #ebe0d3 100%);
}

.site-navbar.fixed-top,
.home-hero-shell,
.home-lightbox-panel,
.home-mockup-panel,
.cta-panel {
    border-color: rgba(58, 40, 31, 0.12);
    background:
        linear-gradient(135deg, rgba(255, 250, 243, 0.96), rgba(246, 227, 214, 0.64)),
        var(--hdt-decor-ivory);
    box-shadow: 0 24px 70px rgba(58, 40, 31, 0.11);
}

.section-soft {
    background:
        linear-gradient(180deg, rgba(238, 243, 234, 0.44), rgba(246, 227, 214, 0.34)),
        linear-gradient(90deg, rgba(255, 250, 243, 0.9), rgba(244, 234, 223, 0.62));
}

.section-kicker,
.hero-pill,
.card-badge,
.room-tag,
.product-note,
.status-badge {
    background: linear-gradient(135deg, rgba(246, 227, 214, 0.95), rgba(238, 243, 234, 0.85));
    color: #a76137;
    border: 1px solid rgba(201, 133, 90, 0.14);
}

.display-title,
.section-title {
    color: var(--hdt-decor-walnut);
}

.hero-text,
.section-text,
.home-hero-metrics span,
.home-service-copy small,
.home-process-card p,
.home-idea-card p,
.home-style-section .style-card p,
.home-room-section .room-card p,
.home-products-section .product-card p,
.home-reasons-section .reason-card p {
    color: #6f5d50;
}

.btn-primary-custom,
.btn-hdt-primary {
    background: linear-gradient(135deg, #2f241d, #5f3a28);
    border-color: rgba(58, 40, 31, 0.92);
    color: #fff8ee;
    box-shadow: 0 18px 34px rgba(58, 40, 31, 0.2);
}

.btn-primary-custom:hover,
.btn-primary-custom:focus,
.btn-hdt-primary:hover,
.btn-hdt-primary:focus {
    background: linear-gradient(135deg, #241b16, #70442f);
    color: #fff8ee;
}

.btn-outline-custom,
.btn-hdt-outline,
.home-style-more-btn {
    background: rgba(255, 250, 243, 0.82);
    border-color: rgba(95, 111, 85, 0.28);
    color: var(--hdt-decor-walnut);
}

.btn-outline-custom:hover,
.btn-outline-custom:focus,
.btn-hdt-outline:hover,
.btn-hdt-outline:focus,
.home-style-more-btn:hover,
.home-style-more-btn:focus {
    background: var(--hdt-decor-sage-soft);
    border-color: rgba(95, 111, 85, 0.45);
    color: #2f3a2b;
}

.feature-card,
.prompt-card,
.style-card,
.room-card,
.product-card,
.reason-card,
.faq-item {
    border-color: rgba(58, 40, 31, 0.1);
    background:
        linear-gradient(180deg, rgba(255, 250, 243, 0.98), rgba(252, 245, 237, 0.9)),
        var(--hdt-decor-ivory);
    box-shadow: 0 18px 45px rgba(58, 40, 31, 0.08);
}

.home-service-card:hover,
.feature-card:hover,
.prompt-card:hover,
.style-card:hover,
.room-card:hover,
.product-card:hover,
.reason-card:hover {
    border-color: rgba(201, 133, 90, 0.24);
    box-shadow: 0 24px 58px rgba(58, 40, 31, 0.12);
}

.home-service-icon,
.feature-step,
.product-icon,
.reason-icon {
    background:
        linear-gradient(135deg, rgba(238, 243, 234, 0.98), rgba(246, 227, 214, 0.9));
    color: var(--hdt-decor-olive);
    border: 1px solid rgba(95, 111, 85, 0.12);
}

.home-idea-card-featured {
    background:
        linear-gradient(135deg, rgba(95, 111, 85, 0.12), rgba(201, 133, 90, 0.12)),
        linear-gradient(180deg, rgba(255, 250, 243, 0.98), rgba(247, 239, 229, 0.94));
}

.home-idea-card-featured .card-badge {
    color: var(--hdt-decor-olive);
}

.home-style-section {
    background:
        linear-gradient(90deg, rgba(255, 250, 243, 0.68), rgba(238, 243, 234, 0.42), rgba(246, 227, 214, 0.42));
}

.home-style-section .style-swatch {
    background:
        linear-gradient(135deg, rgba(238, 243, 234, 0.9), rgba(246, 227, 214, 0.82));
    border: 1px solid rgba(58, 40, 31, 0.08);
    box-shadow: inset 0 0 0 0.42rem rgba(255, 250, 243, 0.62);
}

.home-style-section .style-swatch-image {
    filter: saturate(0.94) contrast(1.02);
}

.home-style-section .style-card h3,
.home-room-section .room-card h3,
.home-products-section .product-card h3,
.home-process-card h3 {
    color: #2f241d;
}

.home-products-section .product-icon i,
.home-lightbox-points i,
.home-studio-features i,
.text-link {
    color: var(--hdt-decor-clay);
}

.home-products-section .product-card:nth-child(odd),
.home-reasons-section .reason-card-sage,
.reason-card-sage {
    background:
        linear-gradient(135deg, rgba(238, 243, 234, 0.78), rgba(255, 250, 243, 0.94));
}

.home-products-section .product-card:nth-child(even),
.home-reasons-section .reason-card-clay,
.reason-card-clay {
    background:
        linear-gradient(135deg, rgba(246, 227, 214, 0.78), rgba(255, 250, 243, 0.94));
}

.home-reasons-section .section-text {
    background: rgba(255, 250, 243, 0.58);
    border-left: 3px solid rgba(143, 156, 131, 0.55);
    padding-left: 1rem;
}

.home-mockup-panel {
    background:
        linear-gradient(115deg, rgba(238, 243, 234, 0.68), rgba(255, 250, 243, 0.94) 48%, rgba(246, 227, 214, 0.58));
}

.mockup-showcase,
.home-visual-board {
    background:
        linear-gradient(135deg, rgba(244, 234, 223, 0.96), rgba(238, 243, 234, 0.58));
}

.faq-item {
    background: rgba(255, 250, 243, 0.86);
}

@media (max-width: 767.98px) {
    .home-hero-shell,
    .home-lightbox-panel,
    .home-mockup-panel,
    .cta-panel {
        box-shadow: 0 14px 34px rgba(58, 40, 31, 0.08);
    }

    .home-reasons-section .section-text {
        border-left-width: 2px;
        padding-left: 0.8rem;
    }
}

.clock-page {
    background:
        radial-gradient(circle at top right, rgba(210, 151, 91, 0.14), transparent 26rem),
        linear-gradient(180deg, #f7efe7 0%, #f3eadf 100%);
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

.clock-page,
.clock-page *,
.clock-page *::before,
.clock-page *::after {
    box-sizing: border-box;
}

.clock-page .container,
.clock-page section,
.clock-page div {
    min-width: 0;
}

.clock-page p,
.clock-page small,
.clock-page span,
.clock-page strong,
.clock-page em,
.clock-page h1,
.clock-page h2 {
    max-width: 100%;
}

.clock-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: end;
    margin-bottom: 1.5rem;
}

.clock-hero h1 {
    max-width: 48rem;
    margin: 0.75rem 0 0.7rem;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.35rem, 4.8vw, 5rem);
    line-height: 0.92;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.clock-hero p {
    max-width: 42rem;
    margin: 0;
    color: #7b6455;
    font-size: 1rem;
    line-height: 1.7;
    overflow-wrap: break-word;
}

.clock-hero-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.55rem;
}

.clock-hero-facts span {
    border: 1px solid rgba(93, 66, 49, 0.12);
    border-radius: 999px;
    background: rgba(255, 250, 245, 0.7);
    padding: 0.55rem 0.85rem;
    color: #8d5f39;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.clock-builder-grid,
.clock-lower-grid {
    display: grid;
    grid-template-columns: minmax(18rem, 0.9fr) minmax(0, 1.1fr);
    gap: 1.25rem;
    align-items: start;
    width: 100%;
    max-width: 100%;
}

.clock-lower-grid {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.8fr);
    margin-top: 1.25rem;
}

.clock-production-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 1.25rem;
}

.clock-info-card {
    display: grid;
    min-height: 11.5rem;
    align-content: start;
    gap: 0.7rem;
}

.clock-info-card span {
    display: grid;
    width: 2.3rem;
    aspect-ratio: 1 / 1;
    place-items: center;
    border-radius: 999px;
    background: rgba(210, 151, 91, 0.15);
    color: #b9783d;
    font-weight: 900;
}

.clock-info-card strong {
    color: #1f1711;
    font-size: 0.98rem;
    line-height: 1.2;
}

.clock-info-card p {
    margin: 0;
    color: #7b6455;
    font-size: 0.82rem;
    line-height: 1.55;
}

.clock-preview-card,
.clock-options-card {
    min-width: 0;
}

.clock-preview-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.2rem;
}

.clock-preview-head h2,
.clock-section-title,
.clock-empty-panel h2 {
    margin: 0.45rem 0 0;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1;
    letter-spacing: 0;
}

.clock-preview-head strong {
    border-radius: 999px;
    background: #211813;
    padding: 0.55rem 0.85rem;
    color: #fff8ef;
    white-space: nowrap;
}

.clock-preview-wrap {
    display: grid;
    place-items: center;
    padding: clamp(0.5rem, 3vw, 1.25rem);
}

.clock-preview-face {
    --clock-hand-color: #1f1711;
    --clock-art-left: 0%;
    --clock-art-top: 0%;
    --clock-art-size: 100%;
    --clock-dial-left: 0%;
    --clock-dial-top: 0%;
    --clock-dial-size: 100%;
    --clock-dial-center-x: 50%;
    --clock-dial-center-y: 50%;
    --clock-mark-origin: 13.6rem;
    position: relative;
    width: min(100%, 29rem);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(145deg, #eadccf, #fff7ef);
    background-position: center;
    background-size: cover;
    box-shadow:
        0 1.4rem 3rem rgba(54, 36, 24, 0.16),
        inset 0 0 0 1px rgba(44, 31, 24, 0.12);
}

.clock-preview-face::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background: radial-gradient(circle, transparent 0 72%, rgba(255, 250, 245, 0.1) 100%);
    pointer-events: none;
}

.clock-art-layer {
    position: absolute;
    z-index: 0;
    left: var(--clock-art-left);
    top: var(--clock-art-top);
    width: var(--clock-art-size);
    height: var(--clock-art-size);
    border-radius: inherit;
    background: var(--clock-art, linear-gradient(145deg, #eadccf, #fff7ef)) center / cover no-repeat;
    pointer-events: none;
}

.clock-face-overlay {
    position: absolute;
    left: var(--clock-dial-center-x);
    top: var(--clock-dial-center-y);
    z-index: 2;
    width: var(--clock-dial-size);
    height: var(--clock-dial-size);
    object-fit: cover;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.clock-preview-face.is-empty {
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #f3e8dc, #fffaf4);
}

.clock-empty-text {
    width: 72%;
    color: #8b6d59;
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
}

.clock-mark {
    position: absolute;
    z-index: 3;
    display: none;
    top: 5.5%;
    left: 50%;
    width: 0.18rem;
    height: 0.78rem;
    border-radius: 999px;
    background: rgba(31, 23, 17, 0.62);
    transform: translateX(-50%) rotate(var(--mark-rotate)) translateY(0);
    transform-origin: 50% var(--clock-mark-origin);
}

.clock-number,
.clock-roman {
    position: absolute;
    z-index: 3;
    color: rgba(31, 23, 17, 0.82);
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.clock-number-12 {
    top: 7%;
    left: 50%;
    transform: translateX(-50%);
}

.clock-number-3 {
    top: 50%;
    right: 8%;
    transform: translateY(-50%);
}

.clock-number-6 {
    bottom: 7%;
    left: 50%;
    transform: translateX(-50%);
}

.clock-number-9 {
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
}

.clock-roman,
.clock-number {
    display: none;
}

.clock-preview-face[data-numerals="minimal_marks"] .clock-mark {
    display: block;
}

.clock-preview-face[data-numerals="arabic"] .clock-number,
.clock-preview-face[data-numerals="roman"] .clock-roman {
    display: block;
}

.clock-preview-face[data-numerals="arabic"] .clock-mark,
.clock-preview-face[data-numerals="roman"] .clock-mark,
.clock-preview-face[data-numerals="none"] .clock-mark {
    display: none;
}

.clock-hand {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 50%;
    z-index: 3;
    width: 0.34rem;
    border-radius: 999px;
    background: var(--clock-hand-color);
    box-shadow: 0 0.15rem 0.6rem rgba(31, 23, 17, 0.28);
    transform-origin: 50% 100%;
}

.clock-hour {
    height: 25%;
    transform: translateX(-50%) rotate(310deg);
}

.clock-minute {
    height: 34%;
    transform: translateX(-50%) rotate(42deg);
}

.clock-center-pin {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;
    z-index: 4;
    width: 1.05rem;
    aspect-ratio: 1 / 1;
    border: 0.18rem solid rgba(255, 250, 245, 0.78);
    border-radius: 50%;
    background: var(--clock-hand-color);
    transform: translate(-50%, -50%);
}

.clock-preview-watermark {
    position: absolute;
    inset: 0;
    z-index: 6;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.clock-preview-watermark::before {
    content: "";
    position: absolute;
    inset: -18%;
    background-image: url("../img/logo-hayaldentabloya.png");
    background-repeat: repeat;
    background-position: 18px 18px;
    background-size: 150px auto;
    opacity: 0.1;
    transform: rotate(-18deg);
    mix-blend-mode: multiply;
}

.clock-preview-watermark::after {
    content: "Hayalden Tabloya";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-18deg);
    border: 1px solid rgba(31, 26, 23, 0.18);
    border-radius: 999px;
    background: rgba(255, 252, 247, 0.46);
    padding: 0.35rem 0.8rem;
    color: rgba(31, 26, 23, 0.3);
    font-size: clamp(0.72rem, 1.8vw, 1.05rem);
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.clock-preview-note {
    border-radius: 0.9rem;
    background: rgba(245, 233, 221, 0.65);
    padding: 0.8rem 1rem;
    color: #7b6455;
    font-size: 0.86rem;
    line-height: 1.45;
    overflow-wrap: break-word;
}

.clock-room-mockup {
    margin-top: 1rem;
    border: 1px solid rgba(93, 66, 49, 0.1);
    border-radius: 1.25rem;
    background: rgba(255, 250, 245, 0.56);
    padding: 0.9rem;
}

.clock-page .clock-room-mockup {
    display: none;
}

.clock-room-copy {
    display: grid;
    gap: 0.45rem;
    align-items: start;
    margin-bottom: 0.8rem;
}

.clock-room-copy h3 {
    margin: 0;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.45rem, 2.4vw, 2rem);
    line-height: 1;
}

.clock-room-scene {
    position: relative;
    min-height: 19rem;
    overflow: hidden;
    border-radius: 1rem;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.28), transparent 26%, rgba(123, 100, 85, 0.06) 100%),
        linear-gradient(180deg, #f2e6d9 0%, #f7efe6 58%, #dfcdbb 58%, #d5bea8 100%);
    box-shadow: inset 0 0 0 1px rgba(93, 66, 49, 0.08);
}

.clock-room-scene::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, transparent 0 58%, rgba(255, 255, 255, 0.28) 58% 64%, transparent 64%),
        radial-gradient(circle at 72% 24%, rgba(255, 255, 255, 0.26), transparent 13rem);
    pointer-events: none;
}

.clock-real-mockup {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--clock-mockup-aspect, 16 / 9);
    border-radius: 1rem;
    background-color: #efe3d7;
    background-position: center;
    background-size: cover;
    box-shadow: inset 0 0 0 1px rgba(93, 66, 49, 0.08);
}

.clock-real-mockup-slot {
    position: absolute;
    top: var(--clock-mockup-top, 20%);
    left: var(--clock-mockup-left, 50%);
    z-index: 2;
    width: var(--clock-mockup-size, 20%);
    aspect-ratio: 1 / 1;
    transform: rotate(var(--clock-mockup-rotation, 0deg));
    transform-origin: center;
}

.clock-real-mockup-slot::before {
    content: "";
    position: absolute;
    inset: 7%;
    border-radius: 999px;
    background: rgba(31, 23, 17, var(--clock-mockup-shadow-opacity, 0.28));
    filter: blur(1.1rem);
    transform: translate(4%, 7%);
}

.clock-real-mockup-slot .clock-mockup-face {
    --clock-mark-origin: 45%;
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: 100%;
    border-width: clamp(0.08rem, 0.55vw, 0.28rem);
    transform: none;
    box-shadow: 0 0.8rem 1.6rem rgba(37, 26, 19, calc(var(--clock-mockup-shadow-opacity, 0.28) + 0.08));
}

.clock-face-calibration {
    position: absolute;
    top: var(--clock-face-top, 0%);
    left: var(--clock-face-left, 0%);
    z-index: 3;
    width: var(--clock-face-size, 100%);
    aspect-ratio: 1 / 1;
    border-radius: 999px;
    pointer-events: none;
}

.clock-real-mockup.has-edge-effect .clock-real-mockup-slot .clock-mockup-face::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: inherit;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.34),
        inset 0 -0.5rem 1.2rem rgba(31, 23, 17, 0.1);
    pointer-events: none;
}

.clock-mockup-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.75rem;
}

.clock-mockup-selector button,
.clock-mockup-selector a {
    border: 1px solid rgba(93, 66, 49, 0.13);
    border-radius: 999px;
    background: rgba(255, 250, 245, 0.82);
    color: #4f3a2c;
    padding: 0.5rem 0.78rem;
    font-size: 0.78rem;
    font-weight: 850;
    text-decoration: none;
}

.clock-mockup-selector button:hover,
.clock-mockup-selector button.is-active,
.clock-mockup-selector a:hover,
.clock-mockup-selector a.is-active {
    border-color: #1f1711;
    background: #1f1711;
    color: #fff;
}

.clock-mockup-page .page-shell {
    padding-top: 8.5rem;
}

.clock-mockup-hero {
    max-width: 58rem;
    margin-bottom: 1.25rem;
}

.clock-mockup-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 25rem);
    gap: clamp(1rem, 2.2vw, 1.5rem);
    align-items: start;
}

.clock-mockup-stage-card {
    display: grid;
    gap: 1rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(107, 79, 63, 0.12);
    border-radius: 1.35rem;
    background: rgba(255, 250, 243, 0.82);
    box-shadow: 0 24px 60px rgba(64, 44, 27, 0.08);
}

.clock-mockup-large {
    min-height: 32rem;
}

.clock-mockup-sidebar {
    display: grid;
    gap: 1rem;
    min-width: 0;
    position: sticky;
    top: 7rem;
}

.clock-mockup-sidebar .content-card,
.clock-mockup-sidebar .mockup-summary-card,
.clock-mockup-info,
.clock-mockup-empty {
    border-radius: 1.25rem;
}

.clock-mockup-sidebar h2 {
    margin: 0.45rem 0 0;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.55rem, 2.2vw, 2rem);
    line-height: 1;
}

.clock-mockup-selector-panel {
    margin-top: 0.85rem;
}

.clock-mockup-info {
    padding: 1rem;
}

.clock-mockup-info ul {
    display: grid;
    gap: 0.65rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--hdt-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

.ai-clock-quality-panel {
    display: grid;
    gap: 0.75rem;
    border: 1px solid rgba(186, 108, 68, 0.18);
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(255, 247, 239, 0.92), rgba(247, 238, 226, 0.64));
    padding: 1rem;
}

.ai-clock-quality-panel strong {
    display: block;
    margin-top: 0.35rem;
    color: #2b211c;
}

.ai-clock-quality-panel ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #765f51;
    font-size: 0.9rem;
    line-height: 1.35;
}

.ai-clock-quality-panel li {
    position: relative;
    padding-left: 1.1rem;
}

.ai-clock-quality-panel li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: #ba6c44;
    box-shadow: 0 0 0 0.25rem rgba(186, 108, 68, 0.1);
}

@media (max-width: 640px) {
    .ai-clock-quality-panel ul {
        grid-template-columns: 1fr;
    }
}

.clock-mockup-info li {
    position: relative;
    padding-left: 1.05rem;
}

.clock-mockup-info li::before {
    content: "";
    position: absolute;
    top: 0.55em;
    left: 0;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: var(--hdt-gold);
}

.clock-mockup-empty {
    padding: clamp(1.4rem, 3vw, 2rem);
}

.clock-mockup-empty h2 {
    margin: 0.55rem 0;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 0.98;
}

.clock-mockup-face {
    --clock-mark-origin: 5.45rem;
    position: absolute;
    top: 11%;
    left: 50%;
    z-index: 2;
    width: min(40%, 11.5rem);
    border-width: 0.32rem;
    transform: translateX(-50%);
    box-shadow: 0 1.2rem 2.2rem rgba(60, 42, 30, 0.28), inset 0 0 0 1px rgba(44, 31, 24, 0.14);
}

.clock-mockup-face .clock-number,
.clock-mockup-face .clock-roman {
    font-size: 1rem;
}

.clock-mockup-face .clock-mark {
    top: 5.2%;
    height: 0.48rem;
}

.clock-mockup-face .clock-empty-text {
    width: 76%;
    font-size: 0.66rem;
}

.clock-mockup-face .clock-center-pin {
    width: 0.58rem;
    border-width: 0.1rem;
}

.clock-mockup-face .clock-hand {
    width: 0.18rem;
}

.clock-room-console {
    position: absolute;
    right: 11%;
    bottom: 7%;
    left: 11%;
    height: 4.7rem;
    border-radius: 1rem 1rem 0.35rem 0.35rem;
    background: linear-gradient(180deg, #b79372 0%, #8f684a 100%);
    box-shadow: 0 1.3rem 2.5rem rgba(72, 48, 31, 0.22);
}

.clock-room-console::before {
    content: "";
    position: absolute;
    top: 0.95rem;
    right: 8%;
    left: 8%;
    height: 0.22rem;
    border-radius: 999px;
    background: rgba(70, 43, 27, 0.22);
}

.clock-room-console::after {
    content: "";
    position: absolute;
    right: 13%;
    bottom: 0.7rem;
    left: 13%;
    height: 0.5rem;
    border-radius: 999px;
    background: rgba(255, 244, 229, 0.18);
}

.clock-room-vase {
    position: absolute;
    bottom: 4.8rem;
    left: 17%;
    z-index: 2;
    width: 2.5rem;
    height: 3.9rem;
    border-radius: 45% 45% 32% 32%;
    background: linear-gradient(145deg, #efe1cf, #b88b63);
    box-shadow: 0 0.7rem 1.3rem rgba(59, 39, 26, 0.16);
}

.clock-room-vase::before,
.clock-room-vase::after {
    content: "";
    position: absolute;
    bottom: 3.25rem;
    width: 0.12rem;
    height: 3.1rem;
    border-radius: 999px;
    background: #6f5b45;
    transform-origin: bottom;
}

.clock-room-vase::before {
    left: 42%;
    transform: rotate(-21deg);
}

.clock-room-vase::after {
    right: 35%;
    transform: rotate(18deg);
}

.clock-room-books {
    position: absolute;
    right: 17%;
    bottom: 5.2rem;
    z-index: 2;
    width: 5rem;
    height: 1.45rem;
    border-radius: 0.18rem;
    background:
        linear-gradient(90deg, #fff6ea 0 30%, #7b6455 30% 43%, #d3a26b 43% 63%, #f5e6d5 63% 100%);
    box-shadow: 0 0.5rem 1rem rgba(59, 39, 26, 0.12);
}

.clock-cart-form,
.clock-prompt-form {
    display: grid;
    gap: 1.25rem;
}

.clock-prompt-ideas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    gap: 0.65rem;
    overflow: hidden;
}

.clock-prompt-idea {
    display: grid;
    min-width: 0;
    min-height: 5.1rem;
    align-content: center;
    gap: 0.36rem;
    border: 1px solid rgba(93, 66, 49, 0.12);
    border-radius: 0.85rem;
    background: rgba(255, 250, 245, 0.72);
    padding: 0.72rem;
    color: #1f1711;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.clock-prompt-idea strong {
    font-size: 0.86rem;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

.clock-prompt-idea span {
    display: -webkit-box;
    overflow: hidden;
    color: #8b6d59;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.clock-prompt-idea:hover,
.clock-prompt-idea.is-active {
    border-color: rgba(188, 121, 64, 0.58);
    box-shadow: inset 0 0 0 2px rgba(188, 121, 64, 0.16);
}

.clock-option-section {
    display: grid;
    gap: 0.72rem;
}

.clock-adjust-panel {
    display: grid;
    gap: 0.75rem;
    padding: 0.9rem;
    border: 1px solid rgba(107, 79, 63, 0.12);
    border-radius: 1rem;
    background: rgba(255, 250, 243, 0.66);
}

.clock-adjust-panel label {
    display: grid;
    grid-template-columns: minmax(7rem, 0.34fr) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    margin: 0;
    color: #7a5e4a;
    font-size: 0.84rem;
    font-weight: 800;
}

.clock-adjust-panel input[type="range"] {
    width: 100%;
    accent-color: var(--hdt-gold);
}

.clock-adjust-panel .btn {
    justify-self: start;
}

.clock-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.72rem;
}

.clock-choice-grid-size {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.clock-choice-grid-face {
    max-height: 21.5rem;
    overflow-y: auto;
    padding-right: 0.28rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(188, 121, 64, 0.42) rgba(255, 250, 243, 0.72);
}

.clock-choice-grid-face::-webkit-scrollbar {
    width: 0.42rem;
}

.clock-choice-grid-face::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(255, 250, 243, 0.72);
}

.clock-choice-grid-face::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(188, 121, 64, 0.42);
}

.clock-choice-card {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 6.1rem;
    gap: 0.7rem;
    align-items: stretch;
    border: 1px solid rgba(93, 66, 49, 0.12);
    border-radius: 0.85rem;
    background: rgba(255, 250, 245, 0.72);
    padding: 0.78rem;
    cursor: pointer;
}

.clock-face-choice-card {
    min-height: 4.75rem;
    align-items: center;
    padding: 0.58rem;
}

.clock-face-mini {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2.85rem;
    height: 2.85rem;
    overflow: hidden;
    border: 1px solid rgba(93, 66, 49, 0.12);
    border-radius: 0.72rem;
    background:
        linear-gradient(45deg, rgba(31, 23, 17, 0.05) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(31, 23, 17, 0.05) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(31, 23, 17, 0.05) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(31, 23, 17, 0.05) 75%),
        #fffaf5;
    background-position: 0 0, 0 0.35rem, 0.35rem -0.35rem, -0.35rem 0;
    background-size: 0.7rem 0.7rem;
}

.clock-face-mini img {
    width: 92%;
    height: 92%;
    object-fit: contain;
}

.clock-choice-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.clock-choice-card span {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
}

.clock-choice-card strong {
    color: #1f1711;
    font-size: 0.94rem;
    line-height: 1.18;
}

.clock-face-choice-card strong {
    font-size: 0.84rem;
}

.clock-choice-card small {
    color: #7b6455;
    font-size: 0.76rem;
    line-height: 1.35;
}

.clock-face-choice-card small {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.68rem;
    line-height: 1.28;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.clock-choice-card em {
    align-self: flex-start;
    border-radius: 999px;
    background: rgba(210, 151, 91, 0.13);
    padding: 0.28rem 0.48rem;
    color: #9a6032;
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
}

.clock-choice-grid-hand .clock-choice-card {
    min-height: 4.9rem;
}

.clock-choice-grid-hand small {
    width: 1.35rem;
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(31, 23, 17, 0.18);
    border-radius: 50%;
    background: var(--swatch-color);
}

.clock-choice-card:has(input:checked) {
    border-color: rgba(188, 121, 64, 0.58);
    box-shadow: inset 0 0 0 2px rgba(188, 121, 64, 0.18);
}

.clock-submit-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.clock-empty-panel {
    display: grid;
    min-height: 20rem;
    align-content: center;
    gap: 0.85rem;
}

.clock-empty-panel p {
    max-width: 34rem;
    color: #7b6455;
    line-height: 1.65;
}

.clock-recent-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
}

.clock-recent-card {
    display: grid;
    gap: 0.45rem;
    color: #1f1711;
    font-weight: 800;
    text-decoration: none;
}

.clock-recent-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0.7rem;
}

.clock-recent-card span {
    font-size: 0.74rem;
    line-height: 1.2;
}

.clock-recent-card.preview-watermark::before {
    background-size: 90px auto;
    opacity: 0.08;
}

.clock-recent-card.preview-watermark::after {
    padding: 0.22rem 0.45rem;
    font-size: 0.55rem;
}

@media (max-width: 991.98px) {
    .clock-hero,
    .clock-builder-grid,
    .clock-lower-grid,
    .clock-production-info-grid {
        grid-template-columns: 1fr;
    }

    .clock-hero-facts {
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .clock-page .container {
        width: 100%;
        max-width: 100%;
        padding-right: 0.75rem;
        padding-left: 0.75rem;
        overflow-x: hidden;
    }

    .clock-page .content-card {
        width: calc(100vw - 2rem);
        max-width: calc(100vw - 2rem);
        margin-right: auto;
        margin-left: auto;
        overflow: hidden;
        padding: 0.95rem;
        border-radius: 1.05rem;
    }

    .clock-builder-grid,
    .clock-lower-grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 100%;
        overflow: hidden;
    }

    .clock-production-info-grid {
        width: calc(100vw - 2rem);
        max-width: calc(100vw - 2rem);
        margin-right: auto;
        margin-left: auto;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.55rem;
    }

    .clock-prompt-form + p,
    .clock-lower-grid .text-muted {
        width: calc(100% - 1.5rem);
        max-width: calc(100% - 1.5rem);
        overflow-wrap: anywhere;
    }

    .clock-production-info-grid .clock-info-card {
        width: auto;
        max-width: 100%;
        margin: 0;
        min-height: 9.2rem;
        padding: 0.78rem !important;
        gap: 0.5rem;
    }

    .clock-info-card span {
        width: 1.95rem;
    }

    .clock-info-card strong {
        font-size: 0.82rem;
    }

    .clock-info-card p {
        display: -webkit-box;
        overflow: hidden;
        font-size: 0.68rem;
        line-height: 1.32;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
    }

    .clock-hero {
        gap: 0.95rem;
        margin-bottom: 1rem;
    }

    .clock-hero h1 {
        font-size: 2.32rem;
        line-height: 0.95;
    }

    .clock-hero p {
        max-width: calc(100vw - 1.5rem);
        font-size: 0.9rem;
        line-height: 1.55;
    }

    .clock-hero-facts {
        gap: 0.42rem;
    }

    .clock-hero-facts span {
        padding: 0.45rem 0.62rem;
        font-size: 0.67rem;
    }

    .clock-preview-head {
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
        gap: 0.6rem;
        margin-bottom: 0.55rem;
    }

    .clock-preview-head h2,
    .clock-section-title,
    .clock-empty-panel h2 {
        font-size: 1.75rem;
    }

    .clock-preview-head strong {
        justify-self: start;
        padding: 0.48rem 0.65rem;
        font-size: 0.8rem;
    }

    .clock-preview-face {
        --clock-mark-origin: 8.9rem;
        width: min(100%, 19rem);
        border-width: 0.48rem;
    }

    .clock-room-mockup {
        padding: 0.68rem;
    }

    .clock-mockup-page .page-shell {
        padding-top: 6.8rem;
    }

    .clock-mockup-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.9rem;
    }

    .clock-mockup-stage-card {
        padding: 0.65rem;
        border-radius: 1rem;
    }

    .clock-mockup-large {
        min-height: 0;
        border-radius: 0.85rem;
    }

    .clock-mockup-sidebar {
        position: static;
    }

    .clock-mockup-info ul {
        font-size: 0.82rem;
        line-height: 1.45;
    }

    .clock-room-copy {
        gap: 0.45rem;
    }

    .clock-room-copy h3 {
        font-size: 1.45rem;
    }

    .clock-room-scene {
        min-height: 15.5rem;
    }

    .clock-mockup-face {
        --clock-mark-origin: 4.15rem;
        top: 10%;
        width: min(45%, 8.8rem);
        border-width: 0.28rem;
    }

    .clock-mockup-face .clock-number,
    .clock-mockup-face .clock-roman {
        font-size: 0.82rem;
    }

    .clock-room-console {
        right: 7%;
        left: 7%;
        height: 4.1rem;
    }

    .clock-room-vase {
        left: 13%;
        width: 2.1rem;
        height: 3.2rem;
    }

    .clock-room-books {
        right: 12%;
        width: 4.2rem;
    }

    .clock-mark {
        transform-origin: 50% 8.9rem;
    }

    .clock-choice-grid,
    .clock-choice-grid-size,
    .clock-recent-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
    }

    .clock-adjust-panel label {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .clock-prompt-ideas {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.55rem;
    }

    .clock-prompt-idea {
        min-height: 4.8rem;
        padding: 0.62rem;
    }

    .clock-prompt-idea strong {
        font-size: 0.76rem;
    }

    .clock-prompt-idea span {
        font-size: 0.62rem;
    }

    .clock-choice-card {
        min-height: 5.7rem;
        padding: 0.65rem;
    }

    .clock-choice-card strong {
        font-size: 0.82rem;
    }

    .clock-choice-card small {
        display: -webkit-box;
        overflow: hidden;
        font-size: 0.68rem;
        line-height: 1.25;
        overflow-wrap: anywhere;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .clock-preview-note,
    .clock-empty-panel p {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .clock-preview-note {
        padding: 0.72rem 0.82rem;
        font-size: 0.78rem;
        line-height: 1.35;
    }

    .clock-choice-card em {
        position: absolute;
        right: 0.5rem;
        bottom: 0.5rem;
        font-size: 0.62rem;
    }

    .clock-submit-row {
        display: grid;
        grid-template-columns: 1fr;
    }

    .clock-submit-row .btn {
        width: 100%;
    }

    .clock-empty-panel .clock-submit-row .btn {
        width: calc(100% - 1.25rem);
        justify-self: start;
    }

    .clock-empty-panel p {
        width: calc(100% - 1.25rem);
    }
}
/* Homepage spacing: keep cards and section transitions evenly separated. */
.home-process-grid,
.home-idea-grid,
.home-style-grid,
.home-room-section .row,
.home-products-section .row,
.home-reasons-section .row {
    row-gap: 50px;
}

.home-style-section {
    padding-bottom: 0.75rem;
}

.home-room-section {
    padding-top: 0.95rem;
}

@media (max-width: 767.98px) {
    .home-process-grid,
    .home-idea-grid,
    .home-style-grid,
    .home-room-section .row,
    .home-products-section .row,
    .home-reasons-section .row {
        row-gap: 32px;
    }

    .home-style-section {
        padding-bottom: 0.55rem;
    }

    .home-room-section {
        padding-top: 0.75rem;
    }
}
/* Bootstrap row spacing override for homepage cards. */
.home-process-grid,
.home-idea-grid,
.home-style-grid,
.home-room-section .row,
.home-products-section .row,
.home-reasons-section .row {
    --bs-gutter-y: 50px;
    row-gap: 50px;
}

.home-style-section {
    padding-bottom: 1rem;
}

.home-room-section {
    padding-top: 1.25rem;
}

@media (max-width: 767.98px) {
    .home-process-grid,
    .home-idea-grid,
    .home-style-grid,
    .home-room-section .row,
    .home-products-section .row,
    .home-reasons-section .row {
        --bs-gutter-y: 32px;
        row-gap: 32px;
    }
}

/* Mobile homepage compaction: keep visual sections short and swipeable. */
@media (max-width: 767.98px) {
    .home-ideas-section,
    .home-style-section,
    .home-room-section,
    .home-products-section,
    .home-reasons-section {
        padding-block: 1.85rem;
    }

    .home-ideas-section .section-heading,
    .home-style-section .section-heading,
    .home-room-section .section-heading,
    .home-products-section .section-heading,
    .home-reasons-section .section-heading {
        margin-bottom: 0.8rem;
    }

    .home-idea-grid,
    .home-style-grid,
    .home-room-section .row,
    .home-products-section .row {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.72rem;
        margin: 0 -0.75rem;
        padding: 0.1rem 0.75rem 0.45rem;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-padding-inline: 0.75rem;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .home-idea-grid::-webkit-scrollbar,
    .home-style-grid::-webkit-scrollbar,
    .home-room-section .row::-webkit-scrollbar,
    .home-products-section .row::-webkit-scrollbar {
        display: none;
    }

    .home-idea-grid > [class*="col-"],
    .home-style-grid > [class*="col-"],
    .home-room-section .row > [class*="col-"],
    .home-products-section .row > [class*="col-"] {
        flex: 0 0 min(78vw, 18.5rem);
        width: min(78vw, 18.5rem);
        max-width: none;
        padding: 0;
        scroll-snap-align: start;
    }

    .home-idea-card,
    .home-style-section .style-card,
    .home-room-section .room-card,
    .home-products-section .product-card {
        min-height: 0;
        height: 100%;
        padding: 0.82rem;
        border-radius: 1.05rem;
    }

    .home-idea-card {
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        min-height: 9.4rem;
    }

    .home-idea-card-featured h3,
    .home-idea-card h3,
    .home-style-section .style-card h3,
    .home-room-section .room-card h3,
    .home-products-section .product-card h3 {
        font-size: 0.98rem;
        line-height: 1.2;
        margin-bottom: 0.35rem;
    }

    .home-idea-card p,
    .home-style-section .style-card p,
    .home-room-section .room-card p,
    .home-products-section .product-card p {
        min-height: 0;
        margin-bottom: 0.45rem;
        font-size: 0.78rem;
        line-height: 1.35;
        -webkit-line-clamp: 2;
    }

    .home-idea-card .card-badge {
        width: max-content;
        max-width: 100%;
        padding: 0.34rem 0.52rem;
        font-size: 0.64rem;
    }

    .home-idea-card .text-link,
    .home-style-section .style-card .text-link {
        margin-top: 0.35rem;
        font-size: 0.74rem;
    }

    .home-style-section .style-swatch,
    .home-style-grid .style-swatch {
        height: 4.9rem;
        min-height: 0;
        margin-bottom: 0.55rem;
        border-radius: 0.8rem;
    }

    .home-style-section .style-swatch.has-cover {
        padding: 0.38rem;
    }

    .home-style-section .style-swatch-image {
        border-radius: 0.62rem;
    }

    .home-room-section .room-card::after {
        width: 3.8rem;
        height: 3.8rem;
        opacity: 0.26;
    }

    .home-products-section .product-icon {
        width: 2rem;
        height: 2rem;
        margin-bottom: 0.45rem;
        font-size: 1rem;
    }

    .home-reasons-section .row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.62rem;
        margin: 0;
    }

    .home-reasons-section .row > [class*="col-"] {
        width: auto;
        max-width: none;
        padding: 0;
    }

    .home-reasons-section .reason-card {
        display: flex;
        align-items: flex-start;
        flex-direction: row;
        gap: 0.5rem;
        min-height: 4.4rem;
        padding: 0.72rem;
        border-radius: 1rem;
    }

    .home-reasons-section .reason-icon {
        width: 1.75rem;
        height: 1.75rem;
        margin: 0;
        font-size: 0.92rem;
        flex: 0 0 auto;
    }

    .home-reasons-section .reason-card p {
        display: -webkit-box;
        min-height: 0;
        margin: 0;
        overflow: hidden;
        font-size: 0.76rem;
        line-height: 1.28;
        text-align: left;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }
}

@media (max-width: 420px) {
    .home-idea-grid > [class*="col-"],
    .home-style-grid > [class*="col-"],
    .home-room-section .row > [class*="col-"],
    .home-products-section .row > [class*="col-"] {
        flex-basis: 82vw;
        width: 82vw;
    }

    .home-reasons-section .reason-card {
        min-height: 3.85rem;
        padding: 0.62rem;
    }

    .home-reasons-section .reason-card p {
        font-size: 0.72rem;
        -webkit-line-clamp: 3;
    }
}

@media (max-width: 767.98px) {
    .home-service-copy small {
        min-height: 0;
        font-size: 0.72rem;
        line-height: 1.32;
        -webkit-line-clamp: 4;
    }

    .upload-path-card span,
    .collage-template-card small,
    .welcome-style-card small {
        min-height: 0;
        -webkit-line-clamp: 3;
    }

    .generator-shell .template-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.62rem;
        margin-right: 0;
        margin-left: 0;
    }

    .generator-shell .template-grid > [class*="col-"] {
        width: auto;
        max-width: none;
        padding-right: 0;
        padding-left: 0;
    }
}

/* Home reasons refresh: warmer editorial cards for the decoration brand block. */
.home-reasons-section {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255, 250, 244, 0.72), rgba(236, 226, 214, 0.86)),
        radial-gradient(circle at 8% 12%, rgba(190, 139, 87, 0.18), transparent 30%),
        radial-gradient(circle at 92% 20%, rgba(101, 121, 92, 0.14), transparent 28%);
}

.home-reasons-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(90deg, rgba(82, 62, 48, 0.045) 1px, transparent 1px),
        linear-gradient(180deg, rgba(82, 62, 48, 0.035) 1px, transparent 1px);
    background-size: 7.5rem 7.5rem;
    mask-image: linear-gradient(180deg, transparent, #000 14%, #000 82%, transparent);
}

.home-reasons-section .container {
    position: relative;
    z-index: 1;
}

.home-reasons-section .home-split-heading {
    align-items: end;
    margin-bottom: 1.55rem;
}

.home-reasons-section .section-title {
    max-width: 42rem;
}

.home-reasons-section .section-text {
    max-width: 31rem;
    padding: 1rem 1.15rem;
    border: 1px solid rgba(112, 83, 63, 0.14);
    border-radius: 1.15rem;
    background: rgba(255, 250, 244, 0.66);
    color: #755846;
    box-shadow: 0 1rem 2.2rem rgba(67, 45, 31, 0.08);
}

.home-reasons-grid {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}

.home-reasons-section .reason-card {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-height: 6.2rem;
    padding: 1rem 1.05rem;
    overflow: hidden;
    border: 1px solid rgba(112, 83, 63, 0.13);
    border-radius: 1.15rem;
    background:
        linear-gradient(135deg, rgba(255, 252, 247, 0.95), rgba(247, 239, 231, 0.88)),
        var(--reason-wash, rgba(190, 139, 87, 0.08));
    box-shadow: 0 1.1rem 2.4rem rgba(63, 43, 30, 0.09);
}

.home-reasons-section .reason-card::before {
    content: "";
    position: absolute;
    top: -3.8rem;
    right: -3.1rem;
    z-index: -1;
    width: 9rem;
    height: 9rem;
    border-radius: 999px;
    background: var(--reason-glow, rgba(190, 139, 87, 0.16));
}

.home-reasons-section .reason-card::after {
    content: "";
    position: absolute;
    inset: auto 1rem 0.72rem 4.45rem;
    height: 1px;
    background: linear-gradient(90deg, var(--reason-line, rgba(190, 139, 87, 0.42)), transparent);
}

.home-reasons-section .reason-icon {
    flex: 0 0 auto;
    width: 3.05rem;
    height: 3.05rem;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.68);
    border-radius: 1rem;
    background: var(--reason-icon-bg, rgba(190, 139, 87, 0.13));
    color: var(--reason-icon, #b88746);
    box-shadow: inset 0 0 0 1px rgba(112, 83, 63, 0.06);
}

.home-reasons-section .reason-copy {
    display: grid;
    gap: 0.22rem;
    min-width: 0;
}

.home-reasons-section .reason-copy small {
    color: var(--reason-icon, #b88746);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-reasons-section .reason-card p {
    min-height: 0;
    margin: 0;
    color: #261c16;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
}

.home-reasons-section .reason-card-clay {
    --reason-icon: #b87945;
    --reason-icon-bg: rgba(184, 121, 69, 0.14);
    --reason-glow: rgba(184, 121, 69, 0.18);
    --reason-line: rgba(184, 121, 69, 0.38);
}

.home-reasons-section .reason-card-sage {
    --reason-icon: #6f8264;
    --reason-icon-bg: rgba(111, 130, 100, 0.15);
    --reason-glow: rgba(111, 130, 100, 0.18);
    --reason-line: rgba(111, 130, 100, 0.36);
}

.home-reasons-section .reason-card-linen {
    --reason-icon: #a7875d;
    --reason-icon-bg: rgba(167, 135, 93, 0.14);
    --reason-glow: rgba(167, 135, 93, 0.17);
    --reason-line: rgba(167, 135, 93, 0.36);
}

.home-reasons-section .reason-card-stone {
    --reason-icon: #7c756c;
    --reason-icon-bg: rgba(124, 117, 108, 0.14);
    --reason-glow: rgba(124, 117, 108, 0.16);
    --reason-line: rgba(124, 117, 108, 0.32);
}

.home-reasons-section .reason-card-rose {
    --reason-icon: #b47a71;
    --reason-icon-bg: rgba(180, 122, 113, 0.14);
    --reason-glow: rgba(180, 122, 113, 0.16);
    --reason-line: rgba(180, 122, 113, 0.34);
}

.home-reasons-section .reason-card-olive {
    --reason-icon: #8a7b4e;
    --reason-icon-bg: rgba(138, 123, 78, 0.14);
    --reason-glow: rgba(138, 123, 78, 0.17);
    --reason-line: rgba(138, 123, 78, 0.34);
}

.home-reasons-section .reason-card-charcoal {
    --reason-icon: #5b5048;
    --reason-icon-bg: rgba(91, 80, 72, 0.12);
    --reason-glow: rgba(91, 80, 72, 0.13);
    --reason-line: rgba(91, 80, 72, 0.32);
}

@media (min-width: 1200px) {
    .home-reasons-section .home-reasons-grid > [class*="col-"]:last-child {
        max-width: 33.333333%;
    }
}

@media (max-width: 767.98px) {
    .home-reasons-section {
        padding-block: 1.75rem;
    }

    .home-reasons-section .home-split-heading {
        align-items: start;
        margin-bottom: 0.9rem;
    }

    .home-reasons-section .section-text {
        max-width: none;
        padding: 0.78rem 0.85rem;
        border-radius: 0.9rem;
        font-size: 0.82rem;
    }

    .home-reasons-section .row.home-reasons-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.62rem;
        margin: 0;
    }

    .home-reasons-section .row.home-reasons-grid > [class*="col-"] {
        width: auto;
        max-width: none;
        padding: 0;
    }

    .home-reasons-section .reason-card {
        flex-direction: row;
        align-items: flex-start;
        gap: 0.52rem;
        min-height: 4.85rem;
        padding: 0.68rem;
        border-radius: 0.92rem;
    }

    .home-reasons-section .reason-card::before {
        width: 6.4rem;
        height: 6.4rem;
    }

    .home-reasons-section .reason-card::after {
        display: none;
    }

    .home-reasons-section .reason-icon {
        width: 1.9rem;
        height: 1.9rem;
        border-radius: 0.72rem;
        font-size: 0.9rem;
    }

    .home-reasons-section .reason-copy small {
        font-size: 0.58rem;
    }

    .home-reasons-section .reason-card p {
        display: -webkit-box;
        overflow: hidden;
        font-size: 0.75rem;
        font-weight: 800;
        line-height: 1.25;
        text-align: left;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }
}

@media (max-width: 380px) {
    .home-reasons-section .row.home-reasons-grid {
        gap: 0.5rem;
    }

    .home-reasons-section .reason-card {
        min-height: 4.55rem;
        padding: 0.58rem;
    }
}

/* Final mobile layout fixes. */
@media (max-width: 991.98px) {
    .site-navbar {
        padding: 0.55rem 0;
    }

    .site-navbar .container {
        flex-wrap: wrap;
        gap: 0.45rem 0.75rem;
    }

    .site-navbar .navbar-toggler {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        min-width: 2.75rem;
        min-height: 2.75rem;
        padding: 0.45rem 0.62rem;
        background: rgba(255, 250, 244, 0.9);
    }

    .site-navbar .navbar-collapse {
        flex: 0 0 100%;
        align-items: stretch;
        width: 100%;
        min-width: 0;
    }

    .site-navbar .navbar-collapse.collapse:not(.show) {
        display: none;
    }

    .site-navbar .navbar-collapse.show,
    .site-navbar .navbar-collapse.collapsing {
        display: block;
    }

    .site-navbar .navbar-nav {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0.35rem;
        margin: 0.55rem 0 0;
        padding: 0.7rem;
        border: 1px solid rgba(107, 79, 63, 0.12);
        border-radius: 1.15rem;
        background: rgba(255, 250, 244, 0.96);
        box-shadow: 0 18px 42px rgba(53, 38, 27, 0.12);
    }

    .site-navbar .nav-item,
    .site-navbar .nav-link,
    .site-navbar .nav-cta,
    .site-navbar .nav-cta-secondary {
        width: 100%;
    }

    .site-navbar .nav-link {
        padding: 0.68rem 0.85rem !important;
        border-radius: 0.85rem;
    }

    .site-navbar .nav-link:hover,
    .site-navbar .nav-link:focus {
        background: rgba(184, 138, 68, 0.09);
    }

    .site-navbar .nav-cta,
    .site-navbar .nav-cta-secondary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-top: 0.2rem;
    }
}

@media (max-width: 767.98px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .brand-mark {
        width: clamp(10.5rem, 58vw, 14rem);
        height: 3.35rem;
    }

    .container {
        box-sizing: border-box;
    }

    .page-title,
    .checkout-title,
    .customize-title,
    .generator-title,
    .display-title,
    .section-title {
        letter-spacing: 0;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    .hero-pill,
    .hero-card-badge,
    .section-kicker,
    .card-badge,
    .room-tag,
    .product-note,
    .template-badge,
    .status-badge {
        max-width: 100%;
        white-space: normal;
        text-align: left;
    }

    .home-hero {
        padding-top: 6.6rem;
    }

    .home-hero .display-title {
        font-size: clamp(2.05rem, 9.2vw, 2.7rem);
        line-height: 1;
    }

    .home-hero-shell {
        padding: 0.8rem;
        border-radius: 1.25rem;
    }

    .home-hero .row {
        margin-inline: 0;
    }

    .home-hero .row > [class*="col-"] {
        width: 100%;
        max-width: none;
        padding-inline: 0;
    }

    .home-visual-board {
        gap: 0.7rem;
        padding: 0.55rem;
        border-radius: 1.15rem;
    }

    .home-visual-wall {
        min-height: 0;
        padding: 0.72rem;
        border-radius: 1rem;
    }

    .home-visual-wall::after {
        display: none;
    }

    .home-frame-showcase {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
        gap: 0.45rem;
    }

    .home-frame-card {
        grid-template-rows: minmax(7.2rem, auto) auto;
        gap: 0.38rem;
        padding: 0.34rem;
        border-radius: 0.85rem;
    }

    .home-frame-card figcaption {
        min-height: auto;
        padding: 0.34rem 0.38rem;
        border-radius: 0.7rem;
        font-size: 0.68rem;
    }

    .home-frame-card figcaption span {
        font-size: 0.62rem;
    }

    .home-studio-features {
        grid-template-columns: 1fr;
        padding: 0.48rem;
    }

    .home-studio-features span {
        min-height: 2.45rem;
    }

    .home-process-grid,
    .home-idea-grid,
    .home-style-grid,
    .home-room-section .row,
    .home-products-section .row,
    .home-reasons-section .row {
        grid-template-columns: 1fr;
        gap: 0.85rem;
        row-gap: 0.85rem;
    }

    .home-process-grid > [class*="col-"],
    .home-idea-grid > [class*="col-"],
    .home-style-grid > [class*="col-"],
    .home-room-section .row > [class*="col-"],
    .home-products-section .row > [class*="col-"],
    .home-reasons-section .row > [class*="col-"] {
        width: 100%;
    }

    .image-card-actions,
    .gallery-card-actions,
    .cart-item-actions,
    .mockup-actions,
    .hero-actions,
    .cta-actions {
        align-items: stretch;
    }

    .image-card-actions .btn,
    .gallery-card-actions .btn,
    .hero-actions .btn,
    .cta-actions .btn {
        justify-content: center;
        white-space: normal;
    }

    .community-carousel-prev {
        left: 0.25rem;
    }

    .community-carousel-next {
        right: 0.25rem;
    }
}

@media (max-width: 575.98px) {
    .container {
        width: 100%;
        padding-inline: 0.75rem;
    }

    .brand-mark {
        width: clamp(9.2rem, 54vw, 11.4rem);
        height: 2.9rem;
    }

    .site-navbar .navbar-toggler {
        min-width: 2.45rem;
        min-height: 2.45rem;
        border-radius: 0.85rem;
    }

    .home-service-strip {
        padding-top: 5.75rem;
    }

    .home-service-card {
        display: grid;
        overflow: hidden;
        box-sizing: border-box;
    }

    .home-service-copy strong,
    .home-service-copy small {
        overflow-wrap: anywhere;
    }

    .home-service-arrow {
        display: inline-block;
    }

    .home-hero {
        padding-top: 0.65rem;
    }

    .home-hero .display-title {
        max-width: 100%;
        font-size: clamp(1.9rem, 8.4vw, 2.3rem);
    }

    .home-visual-toolbar {
        gap: 0.45rem;
    }

    .home-frame-showcase {
        grid-template-columns: 1fr;
    }

    .home-frame-card {
        grid-template-columns: minmax(0, 6.25rem) minmax(0, 1fr);
        grid-template-rows: auto;
        align-items: center;
    }

    .home-frame-card img {
        aspect-ratio: 4 / 5;
        height: auto;
    }

    .home-frame-card figcaption {
        align-self: stretch;
        align-content: center;
    }

    .home-hero-metrics,
    .profile-stat-grid,
    .orders-stat-grid,
    .image-grid,
    .gallery-grid,
    .favorites-shell .row.g-4,
    .profile-shell .row.g-3:last-child,
    .size-guide-grid,
    .community-masonry-grid,
    .community-masonry-grid-small {
        grid-template-columns: 1fr;
    }
}

/* Upload collage studio. */
.upload-path-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.35rem;
}

.upload-path-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    min-height: 6rem;
    padding: 1rem;
    border: 1px solid rgba(107, 79, 63, 0.13);
    border-radius: 18px;
    background: rgba(255, 252, 247, 0.88);
    color: var(--hdt-text);
    text-decoration: none;
    box-shadow: 0 16px 36px rgba(64, 44, 27, 0.06);
}

.upload-path-card:hover {
    color: var(--hdt-dark);
    border-color: rgba(199, 129, 61, 0.38);
}

.upload-path-card-ai {
    border-color: rgba(99, 55, 38, 0.2);
    background:
        linear-gradient(135deg, rgba(255, 250, 244, 0.96), rgba(248, 232, 215, 0.72));
}

.upload-path-card i {
    display: inline-grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 14px;
    background: rgba(244, 235, 224, 0.92);
    color: #b77a41;
    font-size: 1.15rem;
}

.upload-path-card strong {
    display: block;
    color: var(--hdt-dark);
    font-size: 1.05rem;
    line-height: 1.2;
}

.upload-path-card span {
    display: block;
    color: var(--hdt-muted);
    font-size: 0.86rem;
    line-height: 1.4;
}

.upload-path-card .bi-arrow-right {
    width: auto;
    height: auto;
    background: transparent;
    font-size: 1.25rem;
}

.upload-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin: 1rem 0 0.9rem;
}

.upload-mode-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.7rem;
    min-height: 5.25rem;
    padding: 0.95rem;
    border: 1px solid rgba(107, 79, 63, 0.13);
    border-radius: 1rem;
    background: rgba(255, 252, 247, 0.76);
    cursor: pointer;
}

.upload-mode-card:has(input:checked) {
    border-color: rgba(199, 112, 54, 0.72);
    box-shadow: 0 14px 32px rgba(64, 44, 27, 0.08);
}

.upload-mode-card input {
    width: 1rem;
    height: 1rem;
    margin-top: 0.2rem;
    accent-color: #c77236;
}

.upload-mode-card strong,
.upload-mode-card small {
    display: block;
}

.upload-mode-card strong {
    color: var(--hdt-dark);
    line-height: 1.25;
}

.upload-mode-card small {
    margin-top: 0.25rem;
    color: var(--hdt-muted);
    line-height: 1.4;
}

.upload-transform-panel {
    display: grid;
    grid-template-columns: minmax(13rem, 0.42fr) minmax(0, 1fr);
    gap: 0.9rem;
    align-items: end;
    margin-bottom: 1rem;
    padding: 0.95rem;
    border: 1px solid rgba(199, 112, 54, 0.18);
    border-radius: 1rem;
    background: rgba(248, 238, 228, 0.56);
}

.upload-transform-panel p {
    margin: 0;
    color: var(--hdt-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.photo-compare-shell {
    padding-top: 8rem;
}

.photo-compare-hero,
.photo-compare-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
    padding: clamp(1.2rem, 2vw, 1.8rem);
}

.photo-compare-hero .section-title {
    margin-bottom: 0.45rem;
}

.photo-compare-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    justify-content: flex-end;
}

.photo-compare-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
    margin-bottom: 1.25rem;
}

.photo-compare-card {
    padding: 1rem;
}

.photo-compare-card-result {
    border-color: rgba(199, 112, 54, 0.32);
}

.photo-compare-frame {
    position: relative;
    display: grid;
    place-items: center;
    min-height: clamp(20rem, 42vw, 33rem);
    margin-top: 0.9rem;
    padding: 0.8rem;
    border: 1px solid rgba(107, 79, 63, 0.1);
    border-radius: 1.2rem;
    background:
        linear-gradient(135deg, rgba(255, 250, 244, 0.88), rgba(244, 235, 224, 0.58));
    overflow: hidden;
}

.photo-compare-frame img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: clamp(19rem, 40vw, 31.5rem);
    object-fit: contain;
    border-radius: 0.85rem;
}

.photo-compare-empty {
    padding: 2rem;
    color: var(--hdt-muted);
    text-align: center;
}

.photo-compare-summary h2 {
    margin: 0.35rem 0 0.25rem;
    color: var(--hdt-dark);
    font-size: clamp(1.4rem, 2.4vw, 2rem);
}

.photo-compare-summary p {
    margin: 0;
    color: var(--hdt-muted);
}

.photo-quality-card {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(20rem, 1.05fr);
    gap: 1.15rem;
    align-items: start;
    margin-bottom: 1.25rem;
    padding: clamp(1.15rem, 2vw, 1.65rem);
    border-color: rgba(107, 79, 63, 0.12);
}

.photo-quality-good {
    border-color: rgba(46, 125, 84, 0.22);
}

.photo-quality-warn {
    border-color: rgba(199, 129, 61, 0.32);
}

.photo-quality-danger {
    border-color: rgba(186, 65, 55, 0.32);
}

.photo-quality-head h2 {
    margin: 0.45rem 0 0.35rem;
    color: var(--hdt-dark);
    font-size: clamp(1.45rem, 2.6vw, 2.1rem);
}

.photo-quality-head p {
    margin: 0;
    color: var(--hdt-muted);
    line-height: 1.5;
}

.photo-quality-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.photo-quality-metric {
    min-height: 7.2rem;
    padding: 0.85rem;
    border: 1px solid rgba(107, 79, 63, 0.1);
    border-radius: 1rem;
    background: rgba(255, 250, 244, 0.72);
}

.photo-quality-metric i {
    display: inline-grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    margin-bottom: 0.7rem;
    border-radius: 999px;
    background: rgba(244, 235, 224, 0.9);
    color: #b86d3d;
}

.photo-quality-good .photo-quality-metric:first-child i {
    background: rgba(220, 239, 229, 0.95);
    color: #237a50;
}

.photo-quality-warn .photo-quality-metric:first-child i {
    background: rgba(255, 241, 216, 0.95);
    color: #b7751e;
}

.photo-quality-danger .photo-quality-metric:first-child i {
    background: rgba(255, 226, 223, 0.95);
    color: #b63f35;
}

.photo-quality-metric span,
.photo-quality-metric strong {
    display: block;
}

.photo-quality-metric span {
    color: var(--hdt-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.photo-quality-metric strong {
    margin-top: 0.25rem;
    color: var(--hdt-dark);
    font-size: 1rem;
    line-height: 1.25;
}

.photo-quality-notes {
    grid-column: 1 / -1;
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.photo-quality-notes li {
    position: relative;
    padding-left: 1.35rem;
    color: var(--hdt-muted);
    line-height: 1.45;
}

.photo-quality-notes li::before {
    content: "";
    position: absolute;
    top: 0.58rem;
    left: 0.25rem;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: #c7813d;
}

.collage-studio-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(20rem, 0.55fr);
    gap: 1.25rem;
    align-items: start;
}

.collage-hero {
    align-items: center;
}

.collage-mini-preview {
    width: min(18rem, 100%);
    aspect-ratio: 3 / 4;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    padding: 1.2rem;
    border-radius: 24px;
    background: #fff;
    box-shadow: inset 0 0 24px rgba(31, 26, 23, 0.14), 0 18px 38px rgba(31, 26, 23, 0.08);
}

.collage-mini-preview span {
    border-radius: 3px;
    background: #d7d8d8;
}

.collage-workspace,
.collage-side-panel,
.collage-template-carousel {
    padding: 1.35rem;
}

.collage-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.collage-toolbar h2,
.collage-side-panel h2 {
    margin: 0.35rem 0 0;
    font-size: clamp(1.35rem, 3vw, 2rem);
}

.collage-template-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.collage-template-carousel {
    grid-column: 1 / -1;
}

.collage-template-carousel .collage-toolbar {
    margin-bottom: 0.75rem;
}

.collage-template-carousel-frame {
    position: relative;
    display: grid;
}

.collage-carousel-btn {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: inline-grid;
    place-items: center;
    width: 2.65rem;
    height: 2.65rem;
    border: 1px solid rgba(107, 79, 63, 0.16);
    border-radius: 999px;
    background: rgba(255, 250, 243, 0.96);
    color: var(--brand-brown);
    box-shadow: 0 14px 32px rgba(64, 44, 27, 0.16);
    transform: translateY(-50%);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.collage-carousel-btn:hover,
.collage-carousel-btn:focus-visible {
    border-color: rgba(196, 126, 65, 0.5);
    box-shadow: 0 18px 38px rgba(64, 44, 27, 0.2);
    transform: translateY(-50%) scale(1.04);
}

.collage-carousel-btn-prev {
    left: -0.95rem;
}

.collage-carousel-btn-next {
    right: -0.95rem;
}

.collage-template-carousel .collage-template-grid {
    display: flex;
    grid-template-columns: none;
    gap: 0.75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 0.15rem 1.1rem 0.7rem;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

.collage-template-carousel .collage-template-card {
    flex: 0 0 clamp(18rem, calc((100% - 3.7rem) / 3), 25rem);
    min-height: 8.4rem;
    scroll-snap-align: start;
}

.collage-workspace .collage-preview-shell + .row {
    margin-top: 1rem !important;
}

.collage-template-card {
    display: grid;
    grid-template-columns: 5.2rem minmax(0, 1fr);
    align-items: start;
    gap: 0.7rem 0.82rem;
    text-align: left;
    min-height: 9.4rem;
    padding: 1rem;
    border: 1px solid rgba(107, 79, 63, 0.14);
    border-radius: 18px;
    background: rgba(255, 252, 247, 0.88);
    color: var(--hdt-text);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.collage-template-card:hover,
.collage-template-card:focus {
    border-color: rgba(199, 129, 61, 0.38);
    box-shadow: 0 16px 34px rgba(64, 44, 27, 0.09);
    transform: translateY(-1px);
}

.collage-template-card.active {
    border-color: rgba(199, 129, 61, 0.9);
    box-shadow: 0 0 0 0.18rem rgba(199, 129, 61, 0.12);
}

.collage-template-layout {
    position: relative;
    display: block;
    grid-row: 1 / span 5;
    width: 5.2rem;
    aspect-ratio: 3 / 4;
    border-radius: 13px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(244, 235, 224, 0.64));
    border: 1px solid rgba(107, 79, 63, 0.12);
    box-shadow: inset 0 0 14px rgba(31, 26, 23, 0.08);
    overflow: hidden;
}

.collage-template-layout i {
    position: absolute;
    left: calc(var(--x) * 100%);
    top: calc(var(--y) * 100%);
    width: calc(var(--w) * 100%);
    height: calc(var(--h) * 100%);
    border-radius: 3px;
    background: #d9dbdb;
    border: 1px solid rgba(107, 79, 63, 0.12);
}

.collage-template-badge {
    display: inline-block;
    margin-bottom: 0.65rem;
    padding: 0.42rem 0.62rem;
    border-radius: 999px;
    background: rgba(244, 235, 224, 0.9);
    color: #b77a41;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.collage-template-card strong,
.collage-template-card small {
    display: block;
}

.collage-template-card small {
    margin-top: 0.45rem;
    color: var(--hdt-muted);
    line-height: 1.45;
}

.collage-template-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.62rem;
}

.collage-template-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.32rem 0.46rem;
    border-radius: 999px;
    background: rgba(244, 235, 224, 0.72);
    color: #775a49;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.25;
}

.collage-template-note {
    display: block;
    margin-top: 0.42rem;
    color: #7d6a5e;
    font-size: 0.74rem;
    line-height: 1.35;
}

.collage-size-info,
.collage-side-summary {
    display: grid;
    gap: 0.65rem;
}

.collage-size-info {
    grid-template-columns: 1.15fr 0.85fr;
    padding: 0.78rem;
    border: 1px solid rgba(107, 79, 63, 0.11);
    border-radius: 18px;
    background: rgba(244, 235, 224, 0.52);
}

.collage-size-info div,
.collage-side-summary span {
    min-width: 0;
    padding: 0.7rem;
    border-radius: 14px;
    background: rgba(255, 252, 247, 0.78);
}

.collage-size-info span {
    display: block;
    margin-bottom: 0.25rem;
    color: #9b765f;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.collage-size-info strong,
.collage-side-summary strong {
    color: var(--hdt-dark);
    font-size: 0.86rem;
    line-height: 1.25;
}

.collage-side-summary {
    margin: 0.8rem 0 0.9rem;
}

.collage-side-summary span {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: #b77a41;
}

.collage-preview-shell {
    width: min(34rem, 100%);
    margin-inline: auto;
    aspect-ratio: var(--collage-preview-ratio, 3 / 4);
    padding: 1rem;
    border-radius: 24px;
    background: rgba(244, 235, 224, 0.72);
}

.collage-preview-canvas {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 18px;
    background: #fff;
    box-shadow: inset 0 0 20px rgba(31, 26, 23, 0.11);
    overflow: hidden;
}

.collage-preview-canvas[data-bg="warm"] {
    background: #faf6f0;
}

.collage-preview-canvas[data-bg="soft_gray"] {
    background: #f5f5f4;
}

.collage-slot {
    position: absolute;
    left: calc(var(--x) * 100%);
    top: calc(var(--y) * 100%);
    width: calc(var(--w) * 100%);
    height: calc(var(--h) * 100%);
    display: grid;
    place-items: center;
    border: 1px solid rgba(107, 79, 63, 0.11);
    background: #d9dbdb;
    color: rgba(31, 26, 23, 0.42);
    font-weight: 800;
    overflow: hidden;
}

.collage-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.collage-slot.has-caption {
    overflow: visible;
}

.collage-slot em {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 0.18rem);
    display: block;
    min-height: 1.15rem;
    padding: 0 0.2rem;
    color: var(--caption-color, var(--hdt-dark));
    font-size: calc(0.72rem * var(--caption-scale, 1));
    font-style: normal;
    font-weight: var(--caption-weight, 900);
    line-height: 1.1rem;
    text-align: var(--caption-align, center);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.collage-dropzone {
    min-height: 10rem;
}

.collage-file-list {
    display: grid;
    gap: 0.65rem;
    margin-top: 1rem;
    max-height: 22rem;
    overflow: auto;
}

.collage-empty-files,
.collage-help-card {
    padding: 0.9rem;
    border-radius: 16px;
    background: rgba(244, 235, 224, 0.68);
    color: var(--hdt-muted);
}

.collage-help-card p {
    margin: 0.45rem 0 0;
    color: var(--hdt-muted);
    line-height: 1.5;
}

.collage-file-item {
    display: grid;
    grid-template-columns: 1.65rem 3.2rem minmax(0, 1fr);
    gap: 0.72rem;
    align-items: center;
    padding: 0.65rem;
    border: 1px solid rgba(107, 79, 63, 0.11);
    border-radius: 16px;
    background: rgba(255, 252, 247, 0.88);
    cursor: grab;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease, transform 0.16s ease;
}

.collage-file-item:active {
    cursor: grabbing;
}

.collage-file-item.is-dragging {
    opacity: 0.54;
    transform: scale(0.985);
}

.collage-file-item.is-drop-target {
    border-color: rgba(199, 129, 61, 0.8);
    box-shadow: 0 0 0 0.18rem rgba(199, 129, 61, 0.14);
}

.collage-drag-handle {
    display: grid;
    place-items: center;
    width: 1.65rem;
    height: 3.2rem;
    border-radius: 999px;
    background: rgba(244, 235, 224, 0.74);
    color: #b77a41;
    font-size: 1.05rem;
}

.collage-file-item img {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 12px;
    object-fit: cover;
}

.collage-file-item strong,
.collage-file-item small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.collage-file-item small {
    color: var(--hdt-muted);
}

.collage-file-main {
    min-width: 0;
}

.collage-caption-field {
    display: grid;
    gap: 0.28rem;
    margin-top: 0.55rem;
    color: var(--hdt-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.collage-caption-field .form-control {
    min-height: 2.35rem;
    padding: 0.42rem 0.65rem;
    font-size: 0.86rem;
}

.collage-caption-tools {
    border: 1px solid rgba(107, 79, 63, 0.12);
    border-radius: 16px;
    background: rgba(255, 252, 247, 0.84);
    overflow: hidden;
}

.collage-caption-tools summary {
    cursor: pointer;
    padding: 0.8rem 0.9rem;
    color: var(--hdt-dark);
    font-weight: 900;
    list-style-position: inside;
}

.collage-caption-tool-actions,
.collage-caption-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0 0.9rem 0.85rem;
}

.collage-caption-tool-actions button,
.collage-caption-presets button {
    border: 1px solid rgba(107, 79, 63, 0.14);
    border-radius: 999px;
    background: #fff;
    color: var(--hdt-text);
    padding: 0.35rem 0.62rem;
    font-size: 0.78rem;
    font-weight: 900;
}

.collage-caption-style-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 0.9rem;
    border-top: 1px solid rgba(107, 79, 63, 0.1);
    background: rgba(244, 235, 224, 0.42);
}

.collage-caption-style-grid label {
    display: grid;
    gap: 0.35rem;
    color: var(--hdt-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.collage-caption-style-grid .form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    grid-column: 1 / -1;
}

.collage-file-actions {
    grid-column: 2 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.collage-file-actions button {
    border: 1px solid rgba(107, 79, 63, 0.14);
    border-radius: 999px;
    background: #fff;
    padding: 0.35rem 0.62rem;
    font-size: 0.78rem;
    font-weight: 800;
}

@media (max-width: 991.98px) {
    .upload-path-grid,
    .collage-studio-grid {
        grid-template-columns: 1fr;
    }

    .upload-mode-grid,
    .upload-transform-panel,
    .photo-compare-grid,
    .photo-quality-card,
    .photo-quality-grid {
        grid-template-columns: 1fr;
    }

    .photo-compare-hero,
    .photo-compare-summary {
        align-items: stretch;
        flex-direction: column;
    }

    .photo-compare-actions {
        justify-content: stretch;
    }

    .photo-compare-actions .btn {
        width: 100%;
    }

    .collage-template-grid {
        grid-template-columns: 1fr;
    }
}

/* Homepage service path below the header. */
.home-service-strip {
    padding: 6.65rem 0 0.55rem;
    background:
        linear-gradient(180deg, rgba(255, 250, 244, 0.84), rgba(245, 236, 224, 0.32));
    border-bottom: 1px solid rgba(107, 79, 63, 0.05);
}

.home-service-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.72rem;
    align-items: stretch;
    padding: 0.85rem;
    border: 1px solid rgba(107, 79, 63, 0.1);
    border-radius: 1.35rem;
    background: rgba(255, 252, 247, 0.66);
    box-shadow: 0 18px 46px rgba(58, 40, 31, 0.08);
}

.home-service-card {
    display: grid;
    position: relative;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 0.42rem 0.62rem;
    min-height: 104px;
    padding: 0.85rem;
    border: 1px solid rgba(107, 79, 63, 0.12);
    border-radius: 1rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 250, 243, 0.78));
    color: var(--hdt-text);
    text-decoration: none;
    box-shadow: 0 12px 32px rgba(58, 40, 31, 0.06);
}

.home-service-card:hover,
.home-service-card:focus {
    color: var(--hdt-dark);
    border-color: rgba(199, 129, 61, 0.35);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 247, 239, 0.9));
    transform: translateY(-1px);
}

.home-service-icon {
    display: inline-grid;
    place-items: center;
    grid-row: 1 / span 2;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.78rem;
    background: rgba(244, 235, 224, 0.92);
    color: #b77a41;
    font-size: 0.98rem;
}

.home-service-copy {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
    padding-right: 1.35rem;
}

.home-service-copy strong {
    color: var(--hdt-dark);
    font-size: 0.96rem;
    line-height: 1.18;
    white-space: normal;
}

.home-service-copy small {
    display: block;
    color: #765f4f;
    font-size: 0.74rem;
    line-height: 1.34;
}

.home-service-arrow {
    position: absolute;
    top: 0.76rem;
    right: 0.74rem;
    color: #b77a41;
    font-size: 1.05rem;
    line-height: 1;
}

.home-service-strip + .home-hero {
    padding-top: 0.55rem;
}

@media (max-width: 1199.98px) {
    .home-service-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .home-service-strip {
        padding-top: 5.75rem;
        padding-bottom: 0.4rem;
    }

    .home-service-grid {
        grid-template-columns: 1fr;
        gap: 0.58rem;
        padding: 0.65rem;
        border-radius: 1.05rem;
    }

    .home-service-card {
        min-height: 88px;
        padding: 0.72rem;
        border-radius: 0.86rem;
    }

    .home-service-strip + .home-hero {
        padding-top: 0.5rem;
    }
}

/* Homepage V2: decision-first entry flow. */
.home-choice-strip {
    padding-top: 6.45rem;
    padding-bottom: 1rem;
}

.home-choice-heading {
    display: grid;
    grid-template-columns: minmax(0, 0.54fr) minmax(340px, 0.46fr);
    gap: 0.55rem 1.4rem;
    align-items: center;
    margin-bottom: 1.05rem;
}

.home-choice-heading .section-kicker {
    grid-column: 1 / -1;
    justify-self: start;
}

.home-choice-heading h2 {
    margin: 0;
    color: var(--hdt-dark);
    font-family: var(--hdt-display-font);
    font-size: clamp(2rem, 2.35vw, 2.62rem);
    line-height: 1.05;
    letter-spacing: 0;
    white-space: nowrap;
}

.home-choice-heading p {
    margin: 0;
    color: #765f4f;
    font-size: 0.98rem;
    line-height: 1.55;
    max-width: 560px;
    justify-self: end;
}

.home-choice-strip .home-service-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.home-choice-card {
    min-height: 132px;
    padding: 0.86rem;
    border-color: rgba(107, 79, 63, 0.14);
    gap: 0.58rem;
}

.home-choice-card .home-service-copy em {
    color: #b87345;
    font-size: 0.61rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.home-choice-card .home-service-copy strong {
    font-size: 0.88rem;
    line-height: 1.13;
}

.home-choice-card .home-service-copy small {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.71rem;
    line-height: 1.32;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.home-choice-card.home-choice-primary {
    border-color: rgba(72, 42, 31, 0.24);
    background: linear-gradient(145deg, rgba(72, 42, 31, 0.98), rgba(124, 78, 52, 0.94));
    color: #fff7ee;
}

.home-choice-card.home-choice-primary .home-service-icon {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.home-choice-card.home-choice-primary .home-service-copy em,
.home-choice-card.home-choice-primary .home-service-copy strong,
.home-choice-card.home-choice-primary .home-service-copy small,
.home-choice-card.home-choice-primary .home-service-arrow {
    color: #fff7ee;
}

.home-choice-upload .home-service-icon,
.home-choice-photo .home-service-icon {
    background: rgba(217, 238, 229, 0.92);
    color: #47745f;
}

.home-choice-clock .home-service-icon,
.home-choice-laser .home-service-icon {
    background: rgba(238, 227, 217, 0.96);
    color: #8d5d42;
}

.home-choice-event .home-service-icon,
.home-choice-banner .home-service-icon {
    background: rgba(246, 223, 218, 0.96);
    color: #a85d4f;
}

.home-choice-strip + .home-hero {
    padding-top: 0.35rem;
}

@media (max-width: 1399.98px) {
    .home-choice-strip .home-service-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .home-choice-card {
        grid-column: span 3;
    }

    .home-choice-card:nth-child(5) {
        grid-column: 2 / span 3;
    }

    .home-choice-card:nth-child(6) {
        grid-column: 5 / span 3;
    }

    .home-choice-card:nth-child(7) {
        grid-column: 8 / span 3;
    }
}

@media (max-width: 991.98px) {
    .home-choice-heading {
        grid-template-columns: 1fr;
    }

    .home-choice-heading h2 {
        white-space: normal;
    }

    .home-choice-heading p {
        justify-self: start;
    }

    .home-choice-strip .home-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-choice-card,
    .home-choice-card:nth-child(5),
    .home-choice-card:nth-child(6),
    .home-choice-card:nth-child(7) {
        grid-column: auto;
    }
}

@media (max-width: 767.98px) {
    .home-choice-strip {
        padding-top: 5.75rem;
        padding-bottom: 0.85rem;
    }

    .home-choice-heading {
        margin-bottom: 0.75rem;
    }

    .home-choice-heading h2 {
        font-size: 2.15rem;
        line-height: 1.04;
    }

    .home-choice-heading p {
        font-size: 0.92rem;
    }

    .home-choice-strip .home-service-grid {
        grid-template-columns: 1fr;
        gap: 0.62rem;
    }

    .home-choice-card {
        min-height: 96px;
    }
}
/* Final homepage card spacing normalization. */
.home-process-grid,
.home-idea-grid,
.home-style-grid,
.home-room-section .row,
.home-products-section .row,
.home-reasons-section .row {
    --bs-gutter-y: 50px;
    row-gap: 0;
}

.home-style-section {
    padding-bottom: 0.72rem;
}

.home-room-section {
    padding-top: 0.92rem;
}

@media (max-width: 767.98px) {
    .home-process-grid,
    .home-idea-grid,
    .home-style-grid,
    .home-room-section .row,
    .home-products-section .row,
    .home-reasons-section .row {
        --bs-gutter-y: 0;
        row-gap: 32px;
    }
}

/* Absolute final mobile compaction overrides for the homepage card sections. */
@media (max-width: 767.98px) {
    .home-service-strip {
        padding-top: 5.75rem;
        padding-bottom: 0.4rem;
    }

    .home-service-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.58rem;
        overflow: visible;
    }

    .home-service-card {
        display: grid;
        align-items: start;
        min-height: 88px;
        padding: 0.72rem;
        border-radius: 0.86rem;
        gap: 0.38rem 0.58rem;
    }

    .home-service-icon {
        width: 2rem;
        height: 2rem;
        border-radius: 0.72rem;
        font-size: 0.9rem;
    }

    .home-service-copy {
        display: grid;
        gap: 0.16rem;
        padding-right: 1.25rem;
    }

    .home-service-copy strong {
        display: block;
        overflow: visible;
        font-size: 0.88rem;
        line-height: 1.18;
        max-width: none;
        text-overflow: clip;
        white-space: normal;
    }

    .home-service-copy small {
        display: block;
    }

    .home-service-arrow {
        display: inline-block;
        top: 0.7rem;
        right: 0.68rem;
    }

    .home-process-grid,
    .home-idea-grid,
    .home-style-grid,
    .home-room-section .row,
    .home-products-section .row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.68rem;
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    .home-process-grid > [class*="col-"],
    .home-idea-grid > [class*="col-"],
    .home-style-grid > [class*="col-"],
    .home-room-section .row > [class*="col-"],
    .home-products-section .row > [class*="col-"] {
        width: auto;
        max-width: none;
        padding: 0;
    }

    .home-process-card,
    .home-idea-card,
    .home-style-section .style-card,
    .home-room-section .room-card,
    .home-products-section .product-card {
        min-height: 100%;
        padding: 0.72rem;
        border-radius: 1rem;
    }

    .home-process-card h3,
    .home-idea-card-featured h3,
    .home-idea-card h3,
    .home-style-section .style-card h3,
    .home-room-section .room-card h3,
    .home-products-section .product-card h3 {
        display: -webkit-box;
        min-height: 2.35em;
        overflow: hidden;
        font-size: 0.9rem;
        line-height: 1.18;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .home-process-card p,
    .home-idea-card p,
    .home-style-section .style-card p,
    .home-room-section .room-card p,
    .home-products-section .product-card p {
        min-height: 2.7em;
        font-size: 0.72rem;
        line-height: 1.32;
        -webkit-line-clamp: 2;
    }

    .home-process-section .feature-step {
        width: 1.9rem;
        height: 1.9rem;
        margin-bottom: 0.5rem;
        font-size: 0.82rem;
    }

    .home-process-card::after {
        right: -1.2rem;
        bottom: -1rem;
        width: 4.1rem;
        height: 4.1rem;
    }

    .home-style-section .style-swatch,
    .home-style-grid .style-swatch {
        height: 4.25rem;
        margin-bottom: 0.5rem;
    }

    .home-idea-card .text-link,
    .home-style-section .style-card .text-link {
        font-size: 0.7rem;
    }

    .home-reasons-section .row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.62rem;
        margin: 0;
        row-gap: 0.62rem;
    }

    .home-reasons-section .row > [class*="col-"] {
        width: auto;
        max-width: none;
        padding: 0;
    }

    .home-idea-grid > [class*="col-"]:nth-child(n+5),
    .home-style-grid > [class*="col-"]:nth-child(n+7) {
        display: none;
    }
}

@media (max-width: 420px) {
    .home-service-grid,
    .home-process-grid,
    .home-idea-grid,
    .home-style-grid,
    .home-room-section .row,
    .home-products-section .row,
    .home-reasons-section .row {
        gap: 0.58rem;
    }
}

/* Site-wide compact mobile grids. */
@media (max-width: 767.98px) {
    .page-shell,
    .generator-shell,
    .gallery-shell,
    .customize-shell,
    .cart-shell,
    .checkout-shell,
    .profile-shell,
    .orders-shell,
    .favorites-shell,
    .mockup-shell,
    .upload-shell,
    .gallery-detail-shell,
    .detail-shell,
    .success-shell,
    .damage-shell,
    .legal-shell {
        padding-top: 5.95rem;
        padding-bottom: 2.2rem;
    }

    .content-card,
    .page-card,
    .filter-card,
    .form-card,
    .summary-card,
    .preview-card,
    .cart-card,
    .cart-summary,
    .checkout-summary,
    .checkout-note,
    .detail-card,
    .step-card,
    .success-card,
    .orders-card,
    .profile-card,
    .profile-form-card,
    .upload-form-card,
    .upload-side-card,
    .order-summary-card,
    .room-selector-card,
    .mockup-summary-card {
        padding: 0.85rem;
        border-radius: 1.05rem;
    }

    .page-title,
    .checkout-title,
    .customize-title,
    .generator-title,
    .section-title,
    .display-title,
    .orders-title,
    .profile-title,
    .welcome-title {
        font-size: clamp(2rem, 9vw, 2.75rem);
        line-height: 0.98;
    }

    .section-text,
    .page-subtitle,
    .customize-text,
    .orders-subtitle,
    .profile-muted,
    .welcome-muted {
        font-size: 0.88rem;
        line-height: 1.48;
    }

    .gallery-grid,
    .image-grid,
    .favorites-shell .row.g-4,
    .community-masonry-grid,
    .community-masonry-grid-small,
    .template-grid,
    .style-guide-grid,
    .lightbox-style-card-grid,
    .upload-path-grid,
    .collage-template-grid,
    .profile-stat-grid,
    .profile-summary-grid,
    .profile-quick-grid,
    .orders-stat-grid,
    .order-mobile-grid,
    .order-progress,
    .order-next-grid,
    .size-guide-grid,
    .size-guide-decision-list,
    .welcome-style-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.62rem;
        margin-right: 0;
        margin-left: 0;
    }

    .gallery-grid > [class*="col-"],
    .image-grid > [class*="col-"],
    .favorites-shell .row.g-4 > [class*="col-"],
    .template-grid > [class*="col-"],
    .lightbox-style-card-grid > [class*="col-"],
    .size-guide-grid > [class*="col-"] {
        width: auto;
        max-width: none;
        padding-right: 0;
        padding-left: 0;
    }

    .image-card,
    .gallery-card,
    .favorite-card,
    .template-card,
    .community-gallery-card,
    .profile-action-card,
    .size-guide-card,
    .style-guide-card,
    .upload-path-card,
    .collage-template-card,
    .welcome-style-card,
    .order-mobile-card {
        min-width: 0;
        border-radius: 0.95rem;
    }

    .image-card-media,
    .favorite-preview,
    .community-gallery-media,
    .size-guide-card-media,
    .generator-shell .template-preview,
    .style-guide-visual,
    .lightbox-style-preview,
    .lightbox-style-preview-art {
        min-height: 0 !important;
        aspect-ratio: 1 / 1;
    }

    .image-card-media img,
    .favorite-preview img,
    .community-gallery-media img,
    .size-guide-card-media img,
    .generator-shell .template-preview img {
        width: 100%;
        height: 100%;
        min-height: 0 !important;
        object-fit: cover;
    }

    .image-card-body,
    .gallery-card-body,
    .favorite-body,
    .template-card,
    .community-gallery-body,
    .profile-action-card,
    .size-guide-card-body {
        padding: 0.68rem;
    }

    .gallery-card-title,
    .image-card-body h3,
    .favorite-card h3,
    .template-card h3,
    .community-gallery-body h3,
    .profile-action-card strong,
    .size-guide-card h3,
    .style-guide-copy strong,
    .upload-path-card strong,
    .collage-template-card strong,
    .welcome-style-card strong {
        display: -webkit-box;
        min-height: 2.25em;
        overflow: hidden;
        font-size: 0.86rem;
        line-height: 1.18;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .image-card-body p,
    .favorite-card p,
    .template-card p,
    .community-gallery-body p,
    .profile-action-card p,
    .size-guide-card p,
    .style-guide-copy span,
    .upload-path-card span,
    .collage-template-card small,
    .welcome-style-card small {
        display: -webkit-box;
        min-height: 2.55em;
        overflow: hidden;
        font-size: 0.72rem;
        line-height: 1.28;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .gallery-card-tags,
    .image-meta-badges,
    .community-gallery-tags {
        min-height: 0;
        gap: 0.3rem;
        margin-bottom: 0.5rem !important;
    }

    .gallery-card-tags span:nth-child(n+3),
    .image-meta-badges span:nth-child(n+3),
    .community-gallery-tags span:nth-child(n+3) {
        display: none;
    }

    .gallery-card-head,
    .gallery-card-tags span,
    .image-meta-badges span,
    .community-gallery-tags span {
        font-size: 0.64rem;
    }

    .gallery-card-actions,
    .image-card-actions,
    .mockup-actions,
    .laser-result-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.34rem;
    }

    .gallery-card-actions form,
    .image-card-actions form {
        display: contents;
    }

    .gallery-card-actions .btn,
    .image-card-actions .btn,
    .mockup-actions .btn,
    .laser-result-actions .btn,
    .community-gallery-body .btn {
        min-height: 2.1rem;
        padding: 0.38rem 0.45rem;
        font-size: 0.68rem;
        line-height: 1.15;
    }

    .community-live-feed-inline {
        padding: 0.72rem;
    }

    .community-live-feed-pills {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.34rem;
    }

    .community-live-feed-pills span {
        justify-content: center;
        min-width: 0;
        padding: 0.28rem 0.35rem;
        overflow: hidden;
        font-size: 0.64rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .style-guide-card {
        min-height: 9.4rem;
        padding: 0.68rem;
        gap: 0.5rem;
    }

    .style-guide-visual {
        min-height: 4.8rem !important;
        border-radius: 0.8rem;
    }

    .lightbox-create-layout,
    .lightbox-upload-preview,
    .laser-layout,
    .laser-detail-layout,
    .mockup-page .customize-layout,
    .collage-studio-grid,
    .upload-layout,
    .checkout-layout,
    .customize-layout {
        grid-template-columns: 1fr !important;
        gap: 0.85rem;
    }

    .lightbox-style-card,
    .lightbox-template-card {
        min-height: 9rem;
    }

    .lightbox-style-preview,
    .lightbox-style-preview-art {
        min-height: 5.4rem !important;
    }

    .laser-hero-points,
    .laser-summary-steps,
    .upload-proof-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
    }

    .laser-hero-points span,
    .laser-summary-steps div,
    .upload-proof-row span {
        min-width: 0;
        padding: 0.5rem 0.55rem;
        font-size: 0.72rem;
        line-height: 1.25;
    }

    .upload-path-card {
        grid-template-columns: 2rem minmax(0, 1fr);
        align-items: start;
        min-height: 7.1rem;
        padding: 0.68rem;
        gap: 0.52rem;
    }

    .upload-path-card i:not(.bi-arrow-right) {
        width: 2rem;
        height: 2rem;
        border-radius: 0.72rem;
        font-size: 0.9rem;
    }

    .upload-path-card .bi-arrow-right {
        display: none;
    }

    .upload-preview-card,
    .collage-mini-preview {
        width: min(15rem, 100%);
        max-height: 14rem;
        justify-self: center;
    }

    .collage-toolbar {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .collage-template-card {
        min-height: 6.8rem;
        padding: 0.72rem;
    }

    .collage-preview-shell {
        width: min(22rem, 100%);
        padding: 0.65rem;
        border-radius: 1rem;
    }

    .collage-size-info {
        grid-template-columns: 1fr;
    }

    .pricing-choice-grid,
    .pricing-choice-grid-2,
    .pricing-choice-grid-3,
    .pricing-compact-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.62rem;
    }

    .pricing-choice-card,
    .product-type-item,
    .laser-radio-card {
        min-width: 0;
        padding: 0.68rem;
        border-radius: 0.95rem;
    }

    .pricing-choice-card strong,
    .product-type-item strong,
    .laser-radio-card span,
    .laser-radio-card strong {
        font-size: 0.86rem;
        line-height: 1.18;
    }

    .pricing-choice-card small,
    .product-type-item .customize-text,
    .laser-radio-card small {
        display: -webkit-box;
        overflow: hidden;
        font-size: 0.7rem;
        line-height: 1.28;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .cart-item-layout {
        grid-template-columns: 5.4rem minmax(0, 1fr) !important;
        gap: 0.72rem;
    }

    .cart-thumb {
        width: 5.4rem;
        max-width: 5.4rem;
        max-height: none;
        aspect-ratio: 1 / 1;
    }

    .cart-item-top {
        grid-template-columns: 1fr;
        gap: 0.52rem;
    }

    .cart-item-title {
        display: -webkit-box;
        overflow: hidden;
        font-size: 0.92rem;
        line-height: 1.18;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .cart-meta {
        gap: 0.48rem;
    }

    .cart-meta-row,
    .cart-mini-facts {
        gap: 0.35rem;
    }

    .cart-badge,
    .cart-mini-facts,
    .cart-price-block small {
        font-size: 0.68rem;
    }

    .cart-price-block {
        min-width: 0;
        padding: 0.45rem 0.55rem;
        text-align: left;
    }

    .cart-price-block strong {
        font-size: 0.92rem;
    }

    .cart-actions-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem;
    }

    .cart-quantity-form {
        grid-column: 1 / -1;
        justify-content: space-between;
        width: 100%;
    }

    .cart-actions-row .btn,
    .cart-remove-form,
    .cart-remove-form .btn {
        width: 100%;
    }

    .checkout-item-row {
        display: grid;
        grid-template-columns: 3.9rem minmax(0, 1fr);
        gap: 0.62rem;
    }

    .checkout-thumb {
        width: 3.9rem;
        min-width: 3.9rem;
        aspect-ratio: 1 / 1;
    }

    .checkout-item-price {
        grid-column: 2;
        text-align: left;
    }

    .profile-menu {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .profile-menu .nav-link,
    .order-mobile-card,
    .order-progress-card,
    .profile-stat,
    .orders-stat {
        min-width: 0;
        padding: 0.72rem;
    }

    .profile-stat strong,
    .orders-stat strong {
        font-size: 1.35rem;
    }

    .order-status-badge {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .order-progress-card strong,
    .order-mobile-meta span,
    .profile-action-card strong {
        font-size: 0.8rem;
    }

    .admin-main {
        padding-inline: 0.75rem;
    }

    .admin-page-header,
    .admin-card,
    .admin-table-card {
        padding: 0.9rem;
        border-radius: 1rem;
    }

    .admin-table-card .table,
    .admin-card .table {
        min-width: 42rem;
        font-size: 0.82rem;
    }
}

@media (max-width: 420px) {
    .gallery-grid,
    .image-grid,
    .favorites-shell .row.g-4,
    .community-masonry-grid,
    .community-masonry-grid-small,
    .template-grid,
    .style-guide-grid,
    .lightbox-style-card-grid,
    .upload-path-grid,
    .collage-template-grid,
    .profile-stat-grid,
    .profile-summary-grid,
    .profile-quick-grid,
    .orders-stat-grid,
    .order-mobile-grid,
    .order-progress,
    .order-next-grid,
    .size-guide-grid,
    .size-guide-decision-list,
    .welcome-style-grid,
    .pricing-choice-grid,
    .pricing-choice-grid-2,
    .pricing-choice-grid-3,
    .pricing-compact-row {
        gap: 0.5rem;
    }

    .gallery-card-actions .btn,
    .image-card-actions .btn,
    .mockup-actions .btn,
    .laser-result-actions .btn,
    .community-gallery-body .btn {
        font-size: 0.64rem;
    }
}

@media (max-width: 575.98px) {
    .collage-template-grid {
        grid-template-columns: 1fr !important;
    }

    .collage-template-card {
        grid-template-columns: 4.4rem minmax(0, 1fr);
    }

    .collage-template-layout {
        width: 4.4rem;
    }
}

@media (max-width: 767.98px) {
    .home-service-copy small {
        min-height: 0;
        font-size: 0.72rem;
        line-height: 1.32;
        -webkit-line-clamp: 4;
    }

    .upload-path-card span,
    .collage-template-card small,
    .welcome-style-card small {
        min-height: 0;
        -webkit-line-clamp: 3;
    }

    .generator-shell .template-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.62rem;
        margin-right: 0;
        margin-left: 0;
    }

    .generator-shell .template-grid > [class*="col-"] {
        width: auto;
        max-width: none;
        padding-right: 0;
        padding-left: 0;
    }
}
/* Final homepage style-card reveal rules. Keep these after mobile compaction overrides. */
.home-style-grid.is-collapsed > [class*="col-"]:nth-child(n+9) {
    display: none !important;
}

.home-style-grid.is-expanded > [class*="col-"] {
    display: block !important;
}

.home-style-more {
    display: flex;
    justify-content: center;
    margin-top: 1.35rem;
}

.home-style-more-btn {
    min-width: 12rem;
}

@media (max-width: 767.98px) {
    .home-style-grid.is-collapsed > [class*="col-"]:nth-child(n+5) {
        display: none !important;
    }

    .home-style-grid.is-expanded > [class*="col-"] {
        display: block !important;
    }

    .home-style-more {
        margin-top: 0.9rem;
    }

    .home-style-more-btn {
        width: min(100%, 16rem);
    }
}

/* Last-pass homepage decor color layer. */
body {
    background:
        linear-gradient(135deg, rgba(143, 156, 131, 0.16) 0%, rgba(143, 156, 131, 0) 34%),
        linear-gradient(225deg, rgba(201, 133, 90, 0.15) 0%, rgba(201, 133, 90, 0) 32%),
        linear-gradient(180deg, #fffaf3 0%, #f6eee5 42%, #ebe0d3 100%);
}

.site-navbar.fixed-top,
.home-hero-shell,
.home-lightbox-panel,
.home-mockup-panel,
.cta-panel {
    border-color: rgba(58, 40, 31, 0.12);
    background:
        linear-gradient(135deg, rgba(255, 250, 243, 0.96), rgba(246, 227, 214, 0.64)),
        #fffaf3;
    box-shadow: 0 24px 70px rgba(58, 40, 31, 0.11);
}

.section-soft {
    background:
        linear-gradient(180deg, rgba(238, 243, 234, 0.44), rgba(246, 227, 214, 0.34)),
        linear-gradient(90deg, rgba(255, 250, 243, 0.9), rgba(244, 234, 223, 0.62));
}

.feature-card,
.prompt-card,
.style-card,
.room-card,
.product-card,
.reason-card,
.faq-item {
    border-color: rgba(58, 40, 31, 0.1);
    background:
        linear-gradient(180deg, rgba(255, 250, 243, 0.98), rgba(252, 245, 237, 0.9)),
        #fffaf3;
    box-shadow: 0 18px 45px rgba(58, 40, 31, 0.08);
}

.section-kicker,
.hero-pill,
.card-badge,
.room-tag,
.product-note,
.status-badge {
    background: linear-gradient(135deg, rgba(246, 227, 214, 0.95), rgba(238, 243, 234, 0.85));
    color: #a76137;
    border: 1px solid rgba(201, 133, 90, 0.14);
}

.btn-outline-custom,
.btn-hdt-outline,
.home-style-more-btn {
    background: rgba(255, 250, 243, 0.82);
    border-color: rgba(95, 111, 85, 0.28);
    color: #3a281f;
}

/* Final homepage card rhythm: align idea and style cards into clean rows. */
.home-idea-grid,
.home-style-grid {
    align-items: stretch;
}

.home-idea-grid > [class*="col-"],
.home-style-grid > [class*="col-"] {
    display: flex;
}

.home-ideas-section .prompt-card,
.home-style-section .style-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 15.6rem;
}

.home-ideas-section .prompt-card h3,
.home-style-section .style-card h3 {
    min-height: 1.55em;
    margin-bottom: 0.55rem;
}

.home-ideas-section .prompt-card p,
.home-style-section .style-card p {
    flex: 1 1 auto;
    margin-bottom: 0.9rem;
}

.home-ideas-section .prompt-card .text-link,
.home-style-section .style-card .text-link {
    margin-top: auto;
}

.home-style-section .style-swatch {
    flex: 0 0 auto;
    height: 6.2rem;
    min-height: 0;
}

@media (max-width: 767.98px) {
    .home-ideas-section .prompt-card,
    .home-style-section .style-card {
        min-height: 12.4rem;
    }

    .home-ideas-section .prompt-card h3,
    .home-style-section .style-card h3 {
        min-height: 2.25em;
    }

    .home-style-section .style-swatch {
        height: 4.25rem;
    }
}

/* Collage studio: keep template selection as a carousel after global mobile grid overrides. */
.collage-template-carousel .collage-template-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    padding-right: 1.1rem;
    padding-left: 1.1rem;
}

.collage-template-carousel .collage-template-card {
    flex: 0 0 clamp(18rem, calc((100% - 3.7rem) / 3), 25rem);
}

@media (max-width: 991.98px) {
    .collage-template-carousel .collage-template-card {
        flex-basis: clamp(17rem, calc((100% - 2.95rem) / 2), 24rem);
    }
}

@media (max-width: 575.98px) {
    .collage-carousel-btn {
        width: 2.3rem;
        height: 2.3rem;
    }

    .collage-carousel-btn-prev {
        left: -0.45rem;
    }

    .collage-carousel-btn-next {
        right: -0.45rem;
    }

    .collage-template-carousel .collage-template-grid {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .collage-template-carousel .collage-template-card {
        flex-basis: min(18rem, 86vw);
    }
}

.product-page-title {
    font-size: clamp(2.15rem, 3.25vw, 3.35rem);
    line-height: 1.03;
    letter-spacing: 0;
    max-width: 18ch;
    overflow-wrap: normal;
}

@media (max-width: 575.98px) {
    .product-page-title {
        max-width: 100%;
        font-size: clamp(1.85rem, 8vw, 2.35rem);
        line-height: 1.08;
    }
}

.site-assistant {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1080;
    font-family: var(--body-font, inherit);
}

.assistant-launcher {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.72rem;
    padding: 0 0.86rem;
    border: 1px solid rgba(58, 40, 31, 0.18);
    border-radius: 999px;
    background: #3a281f;
    color: #fffaf3;
    box-shadow: 0 16px 38px rgba(58, 40, 31, 0.24);
    font-weight: 800;
    font-size: 0.88rem;
    isolation: isolate;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
    animation: assistantLauncherFloat 4.8s ease-in-out infinite;
}

.assistant-launcher::before {
    content: "";
    position: absolute;
    inset: -0.35rem;
    z-index: -1;
    border-radius: inherit;
    background: rgba(58, 40, 31, 0.16);
    animation: assistantLauncherPulse 2.4s ease-out infinite;
}

.assistant-launcher:hover,
.assistant-launcher:focus-visible,
.site-assistant.is-open .assistant-launcher {
    transform: translateY(-2px);
    background: #071246;
    box-shadow: 0 20px 46px rgba(7, 18, 70, 0.28);
}

.assistant-launcher i {
    display: grid;
    place-items: center;
    width: 1.64rem;
    height: 1.64rem;
    border-radius: 999px;
    background: rgba(255, 250, 243, 0.14);
}

.assistant-launcher em {
    position: absolute;
    top: -0.22rem;
    right: -0.14rem;
    display: grid;
    place-items: center;
    min-width: 1.22rem;
    height: 1.22rem;
    padding: 0 0.22rem;
    border: 2px solid #fffaf3;
    border-radius: 999px;
    background: #d55f3d;
    color: #ffffff;
    font-size: 0.68rem;
    font-style: normal;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(213, 95, 61, 0.28);
    animation: assistantBadgePop 1.9s ease-in-out infinite;
}

.site-assistant.is-open .assistant-launcher em,
.site-assistant.has-opened .assistant-launcher em {
    display: none;
}

.assistant-launcher:active {
    transform: translateY(0) scale(0.98);
}

.assistant-nudge {
    position: absolute;
    right: 0.2rem;
    bottom: calc(100% + 0.85rem);
    width: max-content;
    max-width: 13rem;
    padding: 0.65rem 0.82rem;
    border: 1px solid rgba(58, 40, 31, 0.12);
    border-radius: 0.9rem 0.9rem 0.25rem 0.9rem;
    background: #fffaf3;
    color: #3a281f;
    box-shadow: 0 14px 34px rgba(58, 40, 31, 0.16);
    font-size: 0.88rem;
    font-weight: 800;
    animation: assistantNudgeIn 0.3s ease both;
}

.assistant-nudge::after {
    content: "";
    position: absolute;
    right: 1rem;
    bottom: -0.42rem;
    width: 0.8rem;
    height: 0.8rem;
    border-right: 1px solid rgba(58, 40, 31, 0.12);
    border-bottom: 1px solid rgba(58, 40, 31, 0.12);
    background: #fffaf3;
    transform: rotate(45deg);
}

.assistant-panel[hidden] {
    display: none;
}

.assistant-panel:not([hidden]) {
    display: block;
}

.assistant-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.85rem);
    width: min(19.75rem, calc(100vw - 2rem));
    overflow: hidden;
    border: 1px solid rgba(58, 40, 31, 0.13);
    border-radius: 1.12rem;
    background:
        linear-gradient(180deg, rgba(255, 250, 243, 0.98), rgba(246, 238, 229, 0.96)),
        #fffaf3;
    box-shadow: 0 24px 65px rgba(58, 40, 31, 0.2);
    transform-origin: 86% 100%;
    animation: assistantPanelIn 0.28s cubic-bezier(.2,.8,.2,1);
}

.assistant-panel-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.78rem 0.86rem;
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.25), transparent 28%),
        linear-gradient(135deg, #071246 0%, #09205f 52%, #3a281f 100%);
    color: #ffffff;
    overflow: hidden;
}

.assistant-panel-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 0%, transparent 34%, rgba(255, 255, 255, 0.16) 46%, transparent 58%, transparent 100%);
    transform: translateX(-120%);
    animation: assistantHeaderShine 5.2s ease-in-out infinite;
}

.assistant-avatar {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.18rem;
    height: 2.18rem;
    flex: 0 0 2.18rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.assistant-avatar i {
    animation: assistantSpark 2.8s ease-in-out infinite;
}

.assistant-title-block {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-width: 0;
}

.assistant-panel-header strong {
    display: block;
    font-size: 0.94rem;
}

.assistant-title-block small {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.18rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.68rem;
    font-weight: 700;
}

.assistant-title-block small span {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: #76f2aa;
    box-shadow: 0 0 0 0 rgba(118, 242, 170, 0.55);
    animation: assistantStatusPulse 1.8s ease-out infinite;
}

.assistant-eyebrow {
    display: block;
    margin-bottom: 0.1rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.assistant-close {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    transition: transform 0.2s ease, background 0.2s ease;
}

.assistant-close:hover,
.assistant-close:focus-visible {
    transform: rotate(90deg);
    background: rgba(255, 255, 255, 0.17);
}

.assistant-messages {
    display: grid;
    gap: 0.5rem;
    max-height: 8.2rem;
    overflow-y: auto;
    padding: 0.78rem 0.86rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(58, 40, 31, 0.24) transparent;
}

.assistant-messages::-webkit-scrollbar {
    width: 0.45rem;
}

.assistant-messages::-webkit-scrollbar-track {
    background: transparent;
}

.assistant-messages::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(58, 40, 31, 0.24);
}

.assistant-message {
    width: fit-content;
    max-width: 90%;
    padding: 0.58rem 0.68rem;
    border-radius: 0.78rem;
    font-size: 0.82rem;
    line-height: 1.38;
    animation: assistantBubbleIn 0.22s ease both;
}

.assistant-message-bot {
    border-top-left-radius: 0.25rem;
    background: #071246;
    color: #ffffff;
}

.assistant-message-user {
    justify-self: end;
    border-top-right-radius: 0.25rem;
    background: #efe5dc;
    color: #2a201b;
}

.assistant-message-link {
    display: inline-flex;
    align-items: center;
    margin-top: 0.55rem;
    color: inherit;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.assistant-message-link::after {
    content: "\F138";
    display: inline-block;
    margin-left: 0.35rem;
    font-family: "bootstrap-icons";
    font-size: 0.9em;
    transform: translateY(0.05em);
}

.assistant-message-actions {
    display: grid;
    gap: 0.42rem;
    margin-top: 0.7rem;
}

.assistant-message-action {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    padding: 0.48rem 0.58rem;
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
}

.assistant-message-action::after {
    content: "\F138";
    font-family: "bootstrap-icons";
    font-size: 0.92em;
}

.assistant-message-action:hover,
.assistant-message-action:focus-visible {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.assistant-typing {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    min-width: 3.1rem;
}

.assistant-typing span {
    width: 0.38rem;
    height: 0.38rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    animation: assistantTypingDot 1s ease-in-out infinite;
}

.assistant-typing span:nth-child(2) {
    animation-delay: 0.12s;
}

.assistant-typing span:nth-child(3) {
    animation-delay: 0.24s;
}

.assistant-context-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.36rem;
    padding: 0 0.86rem 0.58rem;
}

.assistant-context-action {
    border: 1px solid rgba(167, 97, 55, 0.22);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(246, 227, 214, 0.64));
    color: #4b2c21;
    padding: 0.34rem 0.56rem;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.1;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.assistant-context-action:hover,
.assistant-context-action:focus-visible {
    border-color: rgba(167, 97, 55, 0.5);
    background: #fffaf5;
    transform: translateY(-1px);
}

.assistant-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.42rem;
    padding: 0 0.86rem 0.7rem;
}

.assistant-action {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.42rem;
    width: 100%;
    border: 1px solid rgba(58, 40, 31, 0.12);
    border-radius: 0.74rem;
    background: rgba(255, 255, 255, 0.72);
    color: #2a201b;
    min-height: 3.1rem;
    padding: 0.46rem 0.5rem;
    text-align: left;
    font-weight: 750;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.assistant-panel:not([hidden]) .assistant-action {
    animation: assistantActionIn 0.28s ease both;
}

.assistant-panel:not([hidden]) .assistant-action:nth-child(2) {
    animation-delay: 0.04s;
}

.assistant-panel:not([hidden]) .assistant-action:nth-child(3) {
    animation-delay: 0.08s;
}

.assistant-panel:not([hidden]) .assistant-action:nth-child(4) {
    animation-delay: 0.12s;
}

.assistant-panel:not([hidden]) .assistant-action:nth-child(n+5) {
    animation-delay: 0.16s;
}

.assistant-action span {
    display: grid;
    place-items: center;
    width: 1.48rem;
    height: 1.48rem;
    border-radius: 0.5rem;
    font-size: 0.78rem;
    background: linear-gradient(135deg, rgba(246, 227, 214, 0.95), rgba(238, 243, 234, 0.82));
    color: #a76137;
}

.assistant-action strong {
    min-width: 0;
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.72rem;
    line-height: 1.16;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.assistant-action-arrow {
    display: none;
}

.assistant-action:hover,
.assistant-action:focus-visible {
    border-color: rgba(201, 133, 90, 0.52);
    background: #fffaf3;
    box-shadow: 0 10px 24px rgba(58, 40, 31, 0.09);
    transform: translateX(-3px);
}

.assistant-action:hover .assistant-action-arrow,
.assistant-action:focus-visible .assistant-action-arrow {
    transform: translateX(3px);
}

.assistant-hint {
    display: none;
    align-items: center;
    gap: 0.42rem;
    margin: 0 0.86rem 0.62rem;
    padding: 0.55rem 0.62rem;
    border: 1px solid rgba(201, 133, 90, 0.16);
    border-radius: 0.9rem;
    background:
        linear-gradient(135deg, rgba(246, 227, 214, 0.72), rgba(238, 243, 234, 0.54)),
        rgba(255, 250, 243, 0.82);
    color: #6f584b;
    font-size: 0.72rem;
    line-height: 1.35;
}

.assistant-hint i {
    display: grid;
    place-items: center;
    width: 1.46rem;
    height: 1.46rem;
    flex: 0 0 1.46rem;
    border-radius: 999px;
    background: #fffaf3;
    color: #b86f43;
}

.assistant-hint kbd {
    display: inline-grid;
    place-items: center;
    min-width: 1.55rem;
    height: 1.3rem;
    margin: 0 0.08rem;
    border: 1px solid rgba(58, 40, 31, 0.12);
    border-bottom-width: 2px;
    border-radius: 0.35rem;
    background: #fffaf3;
    color: #3a281f;
    font-size: 0.68rem;
    font-weight: 900;
    box-shadow: none;
}

.assistant-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.42rem;
    padding: 0.64rem 0.86rem 0.82rem;
    border-top: 1px solid rgba(58, 40, 31, 0.1);
}

.assistant-form input {
    min-width: 0;
    border: 1px solid rgba(58, 40, 31, 0.15);
    border-radius: 999px;
    background: #ffffff;
    padding: 0.58rem 0.76rem;
    font-size: 0.84rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.assistant-form input:focus {
    border-color: rgba(7, 18, 70, 0.38);
    box-shadow: 0 0 0 0.22rem rgba(7, 18, 70, 0.08);
    outline: 0;
}

.assistant-panel:focus-within {
    box-shadow:
        0 24px 65px rgba(58, 40, 31, 0.2),
        0 0 0 0.22rem rgba(201, 133, 90, 0.1);
}

.assistant-form button {
    display: grid;
    place-items: center;
    width: 2.34rem;
    height: 2.34rem;
    border: 0;
    border-radius: 999px;
    background: #3a281f;
    color: #ffffff;
    transition: transform 0.18s ease, background 0.18s ease;
}

.assistant-form button:hover,
.assistant-form button:focus-visible {
    transform: translateY(-1px) rotate(-8deg);
    background: #071246;
}

@keyframes assistantPanelIn {
    from {
        opacity: 0;
        transform: translateY(0.65rem) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes assistantBubbleIn {
    from {
        opacity: 0;
        transform: translateY(0.35rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes assistantLauncherPulse {
    0% {
        opacity: 0.55;
        transform: scale(0.92);
    }
    100% {
        opacity: 0;
        transform: scale(1.28);
    }
}

@keyframes assistantLauncherFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

@keyframes assistantHeaderShine {
    0%, 55% {
        transform: translateX(-120%);
    }
    82%, 100% {
        transform: translateX(120%);
    }
}

@keyframes assistantSpark {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(1.12) rotate(10deg);
    }
}

@keyframes assistantStatusPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(118, 242, 170, 0.55);
    }
    100% {
        box-shadow: 0 0 0 0.55rem rgba(118, 242, 170, 0);
    }
}

@keyframes assistantBadgePop {
    0%, 100% {
        transform: scale(1);
    }
    45% {
        transform: scale(1.12);
    }
}

@keyframes assistantTypingDot {
    0%, 80%, 100% {
        opacity: 0.38;
        transform: translateY(0);
    }
    35% {
        opacity: 1;
        transform: translateY(-0.16rem);
    }
}

@keyframes assistantNudgeIn {
    from {
        opacity: 0;
        transform: translateY(0.4rem) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes assistantActionIn {
    from {
        opacity: 0;
        transform: translateY(0.35rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .assistant-launcher,
    .assistant-launcher::before,
    .assistant-launcher em,
    .assistant-panel,
    .assistant-panel-header::after,
    .assistant-avatar i,
    .assistant-title-block small span,
    .assistant-message,
    .assistant-typing span,
    .assistant-nudge,
    .assistant-panel:not([hidden]) .assistant-action {
        animation: none !important;
    }
}

@media (max-width: 575.98px) {
    .site-assistant {
        right: 0.72rem;
        bottom: 0.72rem;
    }

    .assistant-launcher span {
        display: none;
    }

    .assistant-launcher {
        width: 2.82rem;
        min-height: 2.82rem;
        justify-content: center;
        padding: 0;
    }

    .assistant-launcher i {
        width: 1.7rem;
        height: 1.7rem;
    }

    .assistant-panel {
        right: -0.15rem;
        width: min(18.9rem, calc(100vw - 1.45rem));
        max-height: min(29rem, calc(100vh - 6rem));
        border-radius: 1rem;
    }

    .assistant-messages {
        max-height: 7rem;
    }

    .assistant-nudge {
        right: 0;
        max-width: 10.5rem;
        font-size: 0.76rem;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .assistant-panel {
        width: 19.5rem;
    }
}

/* Final mobile tuning for the homepage decision strip. */
@media (max-width: 767.98px) {
    .home-choice-strip {
        padding-top: 5.2rem;
        padding-bottom: 0.7rem;
    }

    .home-choice-heading {
        display: block;
        margin-bottom: 0.7rem;
    }

    .home-choice-heading .section-kicker {
        margin-bottom: 0.5rem;
    }

    .home-choice-heading h2 {
        max-width: 100%;
        font-size: clamp(1.42rem, 6vw, 1.72rem);
        line-height: 1.08;
        white-space: nowrap;
    }

    .home-choice-heading p {
        margin-top: 0.46rem;
        max-width: 96%;
        font-size: 0.84rem;
        line-height: 1.42;
    }

    .home-choice-strip .home-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.58rem;
    }

    .home-choice-card,
    .home-choice-card:nth-child(5),
    .home-choice-card:nth-child(6),
    .home-choice-card:nth-child(7) {
        grid-column: auto;
        min-height: 104px;
        padding: 0.64rem;
        border-radius: 0.86rem;
    }

    .home-choice-card .home-service-icon {
        width: 1.92rem;
        height: 1.92rem;
        border-radius: 0.68rem;
        font-size: 0.86rem;
    }

    .home-choice-card .home-service-copy {
        gap: 0.12rem;
        padding-right: 0.9rem;
    }

    .home-choice-card .home-service-copy em {
        font-size: 0.54rem;
        letter-spacing: 0.06em;
    }

    .home-choice-card .home-service-copy strong {
        display: -webkit-box;
        overflow: hidden;
        font-size: 0.78rem;
        line-height: 1.1;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .home-choice-card .home-service-copy small {
        display: -webkit-box;
        overflow: hidden;
        font-size: 0.64rem;
        line-height: 1.25;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .home-choice-card .home-service-arrow {
        top: 0.58rem;
        right: 0.52rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 389.98px) {
    .home-choice-heading h2 {
        font-size: clamp(1.3rem, 5.8vw, 1.52rem);
    }

    .home-choice-strip .home-service-grid {
        gap: 0.48rem;
    }

    .home-choice-card,
    .home-choice-card:nth-child(5),
    .home-choice-card:nth-child(6),
    .home-choice-card:nth-child(7) {
        min-height: 98px;
        padding: 0.58rem;
    }
}

/* Live homepage hero overflow fix. */
.home-hero .hero-actions {
    align-items: stretch;
    flex-wrap: wrap !important;
    gap: 0.72rem;
    max-width: 100%;
}

.home-hero .hero-actions .btn {
    flex: 1 1 10.8rem;
    min-width: min(100%, 10.8rem);
    max-width: 100%;
    justify-content: center;
    line-height: 1.18;
    text-align: center;
    white-space: normal;
}

@media (min-width: 1200px) {
    .home-hero .hero-actions .btn {
        min-height: 3.35rem;
        padding-inline: 1rem;
    }
}
/* Homepage product cards as links. */
.product-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.product-card-link:hover,
.product-card-link:focus {
    color: inherit;
    text-decoration: none;
}

.product-card-link:focus-visible {
    outline: 3px solid rgba(184, 138, 68, 0.38);
    outline-offset: 4px;
}
/* Compact homepage hero actions on mobile. */
@media (max-width: 767.98px) {
    .home-hero .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.58rem;
        margin-top: 1rem;
    }

    .home-hero .hero-actions .btn {
        width: 100%;
        min-width: 0;
        min-height: 3.1rem;
        flex: 0 0 auto;
        padding: 0.78rem 1rem;
        font-size: 1rem;
        line-height: 1.15;
    }

    .home-hero-metrics {
        grid-template-columns: 1fr;
        gap: 0.55rem;
        margin-top: 0.85rem;
    }

    .home-hero-metrics div {
        min-height: auto;
        padding: 0.7rem 0.85rem;
    }
}
/* Mobile homepage category carousel. */
@media (max-width: 767.98px) {
    .home-choice-strip {
        padding-top: 5.25rem;
        padding-bottom: 0.85rem;
    }

    .home-choice-heading {
        margin-bottom: 0.62rem;
    }

    .home-choice-heading h2,
    .home-choice-heading p {
        display: none;
    }

    .home-choice-heading .section-kicker {
        margin-bottom: 0;
        font-size: 0.76rem;
    }

    .home-choice-strip .home-service-grid {
        display: flex;
        grid-template-columns: none;
        gap: 0.68rem;
        margin: 0 -1rem;
        padding: 0.1rem 1rem 0.45rem;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .home-choice-strip .home-service-grid::-webkit-scrollbar {
        display: none;
    }

    .home-choice-card,
    .home-choice-card:nth-child(5),
    .home-choice-card:nth-child(6),
    .home-choice-card:nth-child(7) {
        flex: 0 0 min(72vw, 15.6rem);
        width: min(72vw, 15.6rem);
        min-height: 6.25rem;
        padding: 0.72rem;
        scroll-snap-align: start;
    }

    .home-choice-card .home-service-icon {
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }

    .home-choice-card .home-service-copy em {
        font-size: 0.66rem;
    }

    .home-choice-card .home-service-copy strong {
        font-size: 0.88rem;
        line-height: 1.08;
    }

    .home-choice-card .home-service-copy small {
        display: -webkit-box;
        min-height: 2.35em;
        overflow: hidden;
        font-size: 0.72rem;
        line-height: 1.18;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
}
/* Mobile carousel controls for homepage category strip. */
.home-choice-carousel {
    position: relative;
}

.home-choice-carousel-btn {
    display: none;
}

@media (max-width: 767.98px) {
    .home-choice-carousel {
        margin-inline: -0.1rem;
        padding-inline: 2.15rem;
    }

    .home-choice-carousel .home-service-grid {
        margin-inline: -2.15rem;
        padding-inline: 2.15rem;
    }

    .home-choice-carousel-btn {
        position: absolute;
        top: 50%;
        z-index: 5;
        display: inline-grid;
        place-items: center;
        width: 2.15rem;
        height: 2.15rem;
        border: 1px solid rgba(107, 79, 63, 0.18);
        border-radius: 999px;
        background: rgba(255, 250, 244, 0.94);
        color: #4b3025;
        box-shadow: 0 12px 28px rgba(53, 38, 27, 0.14);
        transform: translateY(-50%);
    }

    .home-choice-carousel-btn:active {
        transform: translateY(-50%) scale(0.96);
    }

    .home-choice-carousel-prev {
        left: 0.12rem;
    }

    .home-choice-carousel-next {
        right: 0.12rem;
    }
}
/* Mobile category carousel polish. */
@media (max-width: 767.98px) {
    .home-choice-carousel {
        padding-inline: 1.85rem;
    }

    .home-choice-carousel .home-service-grid {
        gap: 0.58rem;
        margin-inline: -1.85rem;
        padding-inline: 1.85rem;
    }

    .home-choice-card,
    .home-choice-card:nth-child(5),
    .home-choice-card:nth-child(6),
    .home-choice-card:nth-child(7) {
        flex-basis: min(43vw, 13.1rem);
        width: min(43vw, 13.1rem);
        min-height: 5.85rem;
        padding: 0.66rem 0.68rem;
    }

    .home-choice-card .home-service-icon {
        width: 1.85rem;
        height: 1.85rem;
    }

    .home-choice-card .home-service-copy strong {
        font-size: 0.82rem;
        line-height: 1.06;
    }

    .home-choice-card .home-service-copy small {
        min-height: 2.15em;
        font-size: 0.68rem;
    }

    .home-choice-carousel-btn {
        width: 1.92rem;
        height: 1.92rem;
        background: rgba(255, 250, 244, 0.88);
        box-shadow: 0 10px 22px rgba(53, 38, 27, 0.12);
        opacity: 0.92;
    }

    .home-choice-carousel-prev {
        left: 0.2rem;
    }

    .home-choice-carousel-next {
        right: 0.2rem;
    }
}

@media (max-width: 340px) {
    .home-choice-card,
    .home-choice-card:nth-child(5),
    .home-choice-card:nth-child(6),
    .home-choice-card:nth-child(7) {
        flex-basis: 70vw;
        width: 70vw;
    }
}
/* Mobile category carousel: two clean cards with subtle peek only. */
@media (max-width: 767.98px) {
    .home-choice-carousel {
        padding-inline: 1.7rem;
        overflow: hidden;
    }

    .home-choice-carousel .home-service-grid {
        gap: 0.56rem;
        margin-inline: 0;
        padding-inline: 0;
        padding-bottom: 0.35rem;
    }

    .home-choice-card,
    .home-choice-card:nth-child(5),
    .home-choice-card:nth-child(6),
    .home-choice-card:nth-child(7) {
        flex-basis: calc((100% - 0.56rem) / 2);
        width: calc((100% - 0.56rem) / 2);
        min-width: 0;
    }

    .home-choice-carousel-prev {
        left: 0.22rem;
    }

    .home-choice-carousel-next {
        right: 0.22rem;
    }
}

@media (max-width: 340px) {
    .home-choice-card,
    .home-choice-card:nth-child(5),
    .home-choice-card:nth-child(6),
    .home-choice-card:nth-child(7) {
        flex-basis: calc((100% - 0.56rem) / 2);
        width: calc((100% - 0.56rem) / 2);
    }
}
/* Home Light Box visual fit override */
.home-lightbox-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.home-lightbox-visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
}
/* Community gallery carousel fit override */
.community-carousel-shell {
    overflow: hidden;
    padding-inline: 3.2rem;
    margin-inline: -3.2rem;
}

.community-carousel-shell::before {
    left: 3.2rem;
}

.community-carousel-shell::after {
    right: 3.2rem;
}

.community-scroll-row {
    overflow-x: auto;
    overflow-y: hidden;
    padding-inline: 0;
    scroll-padding-inline: 0;
}

.community-scroll-row .community-gallery-card {
    flex-basis: calc((100% - 4rem) / 5);
    max-width: calc((100% - 4rem) / 5);
    min-width: 0;
}

.community-carousel-prev {
    left: 0.6rem;
}

.community-carousel-next {
    right: 0.6rem;
}

@media (max-width: 1199.98px) {
    .community-scroll-row .community-gallery-card {
        flex-basis: calc((100% - 3rem) / 4);
        max-width: calc((100% - 3rem) / 4);
    }
}

@media (max-width: 991.98px) {
    .community-scroll-row .community-gallery-card {
        flex-basis: calc((100% - 2rem) / 3);
        max-width: calc((100% - 2rem) / 3);
    }
}

@media (max-width: 767.98px) {
    .community-carousel-shell {
        padding-inline: 2.6rem;
        margin-inline: -2.6rem;
    }

    .community-carousel-shell::before {
        left: 2.6rem;
    }

    .community-carousel-shell::after {
        right: 2.6rem;
    }

    .community-scroll-row .community-gallery-card {
        flex-basis: calc((100% - 1rem) / 2);
        max-width: calc((100% - 1rem) / 2);
    }

    .community-carousel-prev {
        left: 0.35rem;
    }

    .community-carousel-next {
        right: 0.35rem;
    }
}

@media (max-width: 480px) {
    .community-scroll-row .community-gallery-card {
        flex-basis: 100%;
        max-width: 100%;
    }
}
/* Community gallery mobile carousel correction */
@media (max-width: 575.98px) {
    .community-carousel-shell {
        padding-inline: 2.35rem;
        margin-inline: 0;
        overflow: hidden;
    }

    .community-carousel-shell::before {
        left: 2.35rem;
    }

    .community-carousel-shell::after {
        right: 2.35rem;
    }

    .community-scroll-row {
        gap: 0.85rem;
    }

    .community-scroll-row .community-gallery-card {
        flex-basis: 100%;
        max-width: 100%;
    }

    .community-carousel-control {
        width: 2.25rem;
        height: 2.25rem;
    }

    .community-carousel-prev {
        left: 0;
    }

    .community-carousel-next {
        right: 0;
    }
}
/* Community gallery two-card mobile layout */
@media (min-width: 391px) and (max-width: 575.98px) {
    .community-carousel-shell {
        padding-inline: 1.85rem;
        margin-inline: 0;
        overflow: hidden;
    }

    .community-carousel-shell::before {
        left: 1.85rem;
    }

    .community-carousel-shell::after {
        right: 1.85rem;
    }

    .community-scroll-row {
        gap: 0.72rem;
    }

    .community-scroll-row .community-gallery-card {
        flex-basis: calc((100% - 0.72rem) / 2);
        max-width: calc((100% - 0.72rem) / 2);
        min-width: 0;
    }

    .community-scroll-row .community-gallery-media {
        height: 11.8rem;
    }

    .community-scroll-row .community-gallery-body {
        padding: 0.78rem;
    }

    .community-scroll-row .community-gallery-body p {
        min-height: 3.6rem;
        font-size: 0.78rem;
        line-height: 1.45;
    }

    .community-gallery-tags {
        gap: 0.35rem;
    }

    .community-gallery-tags span {
        padding: 0.32rem 0.5rem;
        font-size: 0.68rem;
    }

    .community-scroll-row .community-gallery-cta {
        padding: 0.58rem 0.5rem;
        font-size: 0.72rem;
        border-radius: 14px;
    }

    .community-carousel-control {
        width: 2.05rem;
        height: 2.05rem;
    }

    .community-carousel-prev {
        left: 0.12rem;
    }

    .community-carousel-next {
        right: 0.12rem;
    }
}
/* Light Box mobile hero readability */
@media (max-width: 991.98px) {
    .lightbox-page .lightbox-hero {
        grid-template-columns: 1fr !important;
        overflow: visible;
    }

    .lightbox-page .lightbox-hero-copy,
    .lightbox-page .lightbox-hero .section-text {
        min-width: 0;
        max-width: none;
    }

    .lightbox-page .lightbox-hero-copy .section-title {
        max-width: none;
        overflow-wrap: normal;
        word-break: normal;
        line-height: 1.03;
    }

    .lightbox-page .lightbox-product-frame {
        justify-self: center;
        width: min(100%, 320px);
        max-width: 320px;
    }

    .lightbox-page .template-card.lightbox-style-card .lightbox-requirement-badge {
        position: static;
        align-self: flex-start;
        margin: 0.15rem 0 0;
    }
}

@media (max-width: 575.98px) {
    .lightbox-page .content-card {
        padding: 0.95rem;
    }

    .lightbox-page .lightbox-hero {
        gap: 0.95rem;
    }

    .lightbox-page .lightbox-hero-copy .section-title {
        font-size: clamp(2rem, 10vw, 2.55rem);
    }

    .lightbox-page .laser-hero-points {
        grid-template-columns: 1fr;
    }

    .lightbox-page .laser-hero-points span {
        min-height: 0;
        justify-content: flex-start;
        font-size: 0.82rem;
        line-height: 1.25;
    }

    .lightbox-page .template-filter-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .lightbox-page .template-filter-bar::-webkit-scrollbar {
        display: none;
    }

    .lightbox-page .template-filter-pill {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .lightbox-page .lightbox-product-frame {
        width: min(100%, 280px);
        max-width: 280px;
    }
}
@media (min-width: 576px) and (max-width: 991.98px) {
    .related-products-carousel .related-product-card {
        flex-basis: calc((100% - 1.25rem) / 2);
    }
}

@media (max-width: 575.98px) {
    .related-products-carousel .related-products-head {
        gap: 0.8rem;
    }

    .related-products-stage {
    position: relative;
}
.related-products-controls {
        inset-inline: -0.65rem;
    }

    .related-products-control {
        width: 2.6rem;
        height: 2.6rem;
    }

    .related-products-carousel .related-product-card {
        padding: 1rem;
    }

    .related-products-carousel .related-product-card .catalog-product-media {
        min-height: 11rem;
    }

    .related-products-carousel .related-product-card h2 {
        font-size: 1.22rem;
        line-height: 1.16;
    }

    .related-products-carousel .related-product-card .customize-text {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}
@media (max-width: 575.98px) {
    .catalog-products-grid .catalog-product-card {
        padding: 0.82rem;
        border-radius: 18px;
        gap: 0.12rem;
    }

    .catalog-products-grid .catalog-product-media {
        min-height: 0;
        margin-bottom: 0.7rem !important;
        border-radius: 14px !important;
    }

    .catalog-products-grid .section-kicker {
        padding: 0.45rem 0.58rem;
        font-size: 0.62rem;
        line-height: 1.05;
        letter-spacing: 0;
    }

    .catalog-products-grid .catalog-product-card h2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-top: 0.45rem !important;
        margin-bottom: 0.35rem;
        font-size: 1rem;
        line-height: 1.15;
    }

    .catalog-products-grid .catalog-product-card .customize-text {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 0.75rem;
        font-size: 0.78rem;
        line-height: 1.35;
    }

    .catalog-products-grid .catalog-variant-info-grid {
        display: none;
    }

    .catalog-products-grid .catalog-product-card .mt-auto {
        align-items: stretch !important;
        flex-direction: column;
        gap: 0.55rem !important;
    }

    .catalog-products-grid .catalog-card-price strong {
        font-size: 0.98rem;
    }

    .catalog-products-grid .btn {
        width: 100%;
        min-height: 2.55rem;
        padding: 0.55rem 0.65rem;
        font-size: 0.9rem;
    }
}
/* Related product carousel: fixed arrows and one-card mobile view */
@media (max-width: 767.98px) {
    .related-products-stage {
        position: relative;
        overflow: visible;
    }

    .related-products-stage .related-products-controls {
        inset-inline: 0.45rem;
        top: 50%;
        transform: translateY(-50%);
    }

    .related-products-stage .related-products-viewport {
        margin-inline: 0;
        padding: 0;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .related-products-stage .related-products-grid {
        gap: 0;
    }

    .related-products-stage .related-product-card {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 1rem;
    }
}
/* Related product cards: equal visual height */
.related-products-stage .related-products-grid {
    align-items: stretch;
}

.related-products-stage .related-product-card {
    height: 100%;
    min-height: 35.5rem;
}

.related-products-stage .related-product-card h2 {
    min-height: 3.25rem;
}

.related-products-stage .related-product-card .customize-text {
    min-height: 4.2rem;
}

.related-products-stage .related-product-card .catalog-product-media {
    min-height: 17rem;
}

@media (max-width: 767.98px) {
    .related-products-stage .related-product-card {
        min-height: 31rem;
    }

    .related-products-stage .related-product-card h2 {
        min-height: 2.9rem;
    }

    .related-products-stage .related-product-card .customize-text {
        min-height: 4rem;
    }

    .related-products-stage .related-product-card .catalog-product-media {
        min-height: 13rem;
    }
}
/* Two-level public header */
.site-navbar.has-action-row {
    align-items: stretch;
    flex-wrap: wrap;
    padding-bottom: 0;
}

.site-navbar-main {
    flex: 0 0 100%;
    min-height: 4.6rem;
    width: 100%;
}

.site-navbar .site-primary-nav {
    gap: 0.45rem;
}

.site-action-row {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    border-top: 1px solid rgba(107, 79, 63, 0.09);
    background: rgba(255, 250, 244, 0.58);
}

.site-action-row .container {
    display: block;
}

.site-action-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin: 0;
    padding: 0.5rem 0;
    list-style: none;
}

.site-action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    color: var(--hdt-text);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.site-action-link:hover,
.site-action-link:focus-visible,
.site-action-link.active {
    background: rgba(184, 138, 68, 0.12);
    color: var(--hdt-gold);
}

.site-mobile-action-group {
    display: none;
}



/* Desktop public header fix: keep logo and primary navigation on one row while action row stays separate. */
@media (min-width: 992px) {
    .site-navbar.has-action-row > .site-navbar-main {
        flex-wrap: nowrap !important;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .site-navbar.has-action-row .brand-mark {
        flex: 0 0 auto;
    }

    .site-navbar.has-action-row .navbar-collapse {
        display: flex !important;
        flex: 1 1 auto;
        flex-basis: auto;
        width: auto;
        min-width: 0;
    }

    .site-navbar.has-action-row .site-primary-nav {
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        min-width: 0;
    }

    .site-navbar.has-action-row .site-primary-nav .nav-link,
    .site-navbar.has-action-row .site-primary-nav .nav-cta,
    .site-navbar.has-action-row .site-primary-nav .nav-cta-secondary {
        white-space: nowrap;
    }
}
@media (max-width: 991.98px) {
    .site-action-row {
        display: none;
    }

    .site-navbar.has-action-row {
        padding-bottom: 0.55rem;
    }

    .site-mobile-action-group {
        display: grid;
        gap: 0.45rem;
        margin-top: 0.55rem;
        padding-top: 0.7rem;
        border-top: 1px solid rgba(107, 79, 63, 0.12);
    }

    .site-mobile-action-title {
        padding-inline: 0.85rem;
        color: var(--hdt-muted);
        font-size: 0.72rem;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .site-navbar .site-mobile-action-nav {
        margin-top: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
}
@media (min-width: 992px) {
    .site-header.has-action-row + main.page-shell,
    .site-header.has-action-row + main.generator-shell,
    .site-header.has-action-row + main.gallery-shell,
    .site-header.has-action-row + main.customize-shell,
    .site-header.has-action-row + main.cart-shell,
    .site-header.has-action-row + main.checkout-shell,
    .site-header.has-action-row + main.laser-shell,
    .site-header.has-action-row + main .page-shell,
    .site-header.has-action-row + main .generator-shell,
    .site-header.has-action-row + main .gallery-shell,
    .site-header.has-action-row + main .customize-shell,
    .site-header.has-action-row + main .cart-shell,
    .site-header.has-action-row + main .checkout-shell,
    .site-header.has-action-row + main .laser-shell {
        padding-top: 9.75rem;
    }
}
/* Mobile production shortcut strip */
@media (max-width: 991.98px) {
    .site-header.has-action-row .site-mobile-action-group {
        display: none !important;
    }

    .site-navbar.has-action-row {
        padding-bottom: 0;
    }

    .site-navbar.has-action-row .site-navbar-main {
        min-height: 4.4rem;
    }

    .site-header.has-action-row .site-action-row {
        display: block;
        border-top: 1px solid rgba(107, 79, 63, 0.08);
        border-bottom: 1px solid rgba(107, 79, 63, 0.08);
        background: rgba(255, 250, 244, 0.82);
    }

    .site-header.has-action-row .site-action-row .container {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    .site-header.has-action-row .site-action-nav {
        justify-content: flex-start;
        gap: 0.35rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        margin: 0;
        padding: 0.42rem 0.9rem;
        scrollbar-width: none;
    }

    .site-header.has-action-row .site-action-nav::-webkit-scrollbar {
        display: none;
    }

    .site-header.has-action-row .site-action-nav li {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .site-header.has-action-row .site-action-link {
        min-height: 2.05rem;
        padding: 0.4rem 0.78rem;
        border: 1px solid rgba(107, 79, 63, 0.1);
        background: rgba(255, 250, 244, 0.76);
        font-size: 0.82rem;
        box-shadow: none;
    }

    .site-header.has-action-row .site-action-link.active {
        background: rgba(184, 138, 68, 0.16);
    }

    .site-header.has-action-row + main.page-shell,
    .site-header.has-action-row + main.generator-shell,
    .site-header.has-action-row + main.gallery-shell,
    .site-header.has-action-row + main.customize-shell,
    .site-header.has-action-row + main.cart-shell,
    .site-header.has-action-row + main.checkout-shell,
    .site-header.has-action-row + main.laser-shell,
    .site-header.has-action-row + main .page-shell,
    .site-header.has-action-row + main .generator-shell,
    .site-header.has-action-row + main .gallery-shell,
    .site-header.has-action-row + main .customize-shell,
    .site-header.has-action-row + main .cart-shell,
    .site-header.has-action-row + main .checkout-shell,
    .site-header.has-action-row + main .laser-shell {
        padding-top: 8.65rem;
    }
}

@media (max-width: 575.98px) {
    .site-header.has-action-row .site-action-link {
        min-height: 1.95rem;
        padding: 0.34rem 0.68rem;
        font-size: 0.78rem;
    }

    .site-header.has-action-row .site-action-nav {
        padding-inline: 0.72rem;
    }

    .site-header.has-action-row + main.page-shell,
    .site-header.has-action-row + main.generator-shell,
    .site-header.has-action-row + main.gallery-shell,
    .site-header.has-action-row + main.customize-shell,
    .site-header.has-action-row + main.cart-shell,
    .site-header.has-action-row + main.checkout-shell,
    .site-header.has-action-row + main.laser-shell,
    .site-header.has-action-row + main .page-shell,
    .site-header.has-action-row + main .generator-shell,
    .site-header.has-action-row + main .gallery-shell,
    .site-header.has-action-row + main .customize-shell,
    .site-header.has-action-row + main .cart-shell,
    .site-header.has-action-row + main .checkout-shell,
    .site-header.has-action-row + main .laser-shell {
        padding-top: 8.2rem;
    }
}
/* Refine mobile production strip spacing */
@media (max-width: 575.98px) {
    .site-header.has-action-row .site-action-row {
        box-shadow: 0 8px 18px rgba(53, 38, 27, 0.045);
    }

    .site-header.has-action-row .site-action-nav {
        gap: 0.28rem;
        padding: 0.34rem 0.68rem 0.38rem;
    }

    .site-header.has-action-row .site-action-link {
        min-height: 1.82rem;
        padding: 0.3rem 0.58rem;
        font-size: 0.74rem;
        line-height: 1;
    }
}

@media (max-width: 340px) {
    .site-header.has-action-row .site-action-link {
        padding-inline: 0.5rem;
        font-size: 0.72rem;
    }
}
/* Short mobile labels for production strip */
.site-action-label-short {
    display: none;
}

@media (max-width: 575.98px) {
    .site-header.has-action-row .site-action-label-full {
        display: none;
    }

    .site-header.has-action-row .site-action-label-short {
        display: inline;
    }

    .site-header.has-action-row .site-action-link {
        padding-inline: 0.5rem;
    }
}

@media (max-width: 340px) {
    .site-header.has-action-row .site-action-link {
        padding-inline: 0.42rem;
        font-size: 0.7rem;
    }
}
/* Homepage header breathing room */
@media (min-width: 992px) {
    .home-choice-strip {
        padding-top: 7.75rem;
    }
}
/* Event and welcome pages header breathing room */
@media (max-width: 991.98px) {
    .welcome-shell,
    .event-banner-shell {
        padding-top: 8.55rem !important;
    }
}

@media (max-width: 575.98px) {
    .welcome-shell,
    .event-banner-shell {
        padding-top: 8.15rem !important;
    }
}
/* Final mobile production row guard: prevents unstyled bullet lists in account pages. */
@media (max-width: 991.98px) {
    .site-header.has-action-row .site-action-row {
        display: block !important;
        width: 100%;
        overflow: hidden;
        border-top: 1px solid rgba(107, 79, 63, 0.08);
        border-bottom: 1px solid rgba(107, 79, 63, 0.08);
        background: rgba(255, 250, 244, 0.9);
    }

    .site-header.has-action-row .site-action-row .container {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    .site-header.has-action-row .site-action-nav {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 0.35rem;
        margin: 0 !important;
        padding: 0.38rem 0.72rem !important;
        list-style: none !important;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .site-header.has-action-row .site-action-nav::-webkit-scrollbar {
        display: none;
    }

    .site-header.has-action-row .site-action-nav li {
        flex: 0 0 auto;
        margin: 0;
        padding: 0;
        list-style: none !important;
    }

    .site-header.has-action-row .site-action-link {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-height: 1.9rem;
        padding: 0.32rem 0.64rem !important;
        border: 1px solid rgba(107, 79, 63, 0.1);
        border-radius: 999px;
        background: rgba(255, 250, 244, 0.78);
        color: var(--hdt-text);
        font-size: 0.76rem;
        font-weight: 800;
        line-height: 1;
        text-decoration: none !important;
        white-space: nowrap;
    }

    .site-header.has-action-row .site-action-link.active {
        background: rgba(184, 138, 68, 0.16);
        color: var(--hdt-gold);
    }

    .site-header.has-action-row .site-action-label-full {
        display: inline;
    }

    .site-header.has-action-row .site-action-label-short {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .site-header.has-action-row .site-action-label-full {
        display: none;
    }

    .site-header.has-action-row .site-action-label-short {
        display: inline;
    }
}

/* Compact mobile footer layout */
.footer-link-group,
.footer-legal-block {
    min-width: 0;
}

@media (max-width: 767.98px) {
    .site-footer {
        padding: 1.65rem 0 1.1rem;
        background:
            radial-gradient(circle at 12% 6%, rgba(247, 188, 101, 0.22), transparent 12rem),
            radial-gradient(circle at 88% 0%, rgba(108, 145, 105, 0.18), transparent 13rem),
            linear-gradient(135deg, #21140f 0%, #2d1b13 55%, #17221b 100%);
    }

    .site-footer::before,
    .site-footer::after {
        opacity: 0.28;
        transform: scale(0.72);
    }

    .footer-main-grid {
        gap: 1.15rem;
    }

    .footer-brand-block {
        display: grid;
        gap: 0.78rem;
    }

    .footer-brand-link {
        width: min(15.5rem, 78vw);
        min-height: 3.9rem;
        margin-bottom: 0;
        border-radius: 16px;
        background-size: 86% auto;
    }

    .footer-text {
        max-width: none;
        margin: 0;
        color: rgba(255, 247, 238, 0.72);
        font-size: 0.94rem;
        line-height: 1.55;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .footer-social-links {
        margin-top: 0;
        gap: 0.52rem;
    }

    .footer-social-links a {
        width: 2.45rem;
        height: 2.45rem;
        border-radius: 14px;
        font-size: 1rem;
    }

    .footer-center-block {
        gap: 1rem;
    }

    .footer-link-columns {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.82rem;
    }

    .footer-link-group {
        padding: 0.9rem;
        border: 1px solid rgba(255, 247, 238, 0.12);
        border-radius: 18px;
        background: rgba(255, 247, 238, 0.055);
    }

    .footer-link-group-discover {
        grid-column: 1 / -1;
    }

    .footer-link-group-discover .footer-links,
    .footer-legal-block .footer-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.48rem;
    }

    .site-footer h4 {
        margin-bottom: 0.62rem;
        font-size: 0.68rem;
        letter-spacing: 0.1em;
    }

    .footer-links {
        gap: 0.48rem;
    }

    .footer-links a {
        display: flex;
        align-items: center;
        min-height: 2.35rem;
        padding: 0.52rem 0.62rem;
        border: 1px solid rgba(255, 247, 238, 0.1);
        border-radius: 13px;
        background: rgba(255, 247, 238, 0.055);
        color: rgba(255, 247, 238, 0.8);
        font-size: 0.83rem;
        line-height: 1.18;
    }

    .footer-links a:hover {
        transform: none;
    }

    .footer-proof-panel {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.48rem;
        padding: 0.6rem;
        border-radius: 18px;
    }

    .footer-proof-panel span {
        min-height: 3rem;
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.52rem 0.42rem;
        border-radius: 14px;
        font-size: 0.72rem;
        line-height: 1.15;
    }

    .footer-proof-panel i {
        font-size: 1rem;
    }

    .footer-legal-block {
        padding: 0.9rem;
        border: 1px solid rgba(255, 247, 238, 0.12);
        border-radius: 18px;
        background: rgba(255, 247, 238, 0.05);
    }

    .footer-bottom-bar {
        margin-top: 1rem;
        padding-top: 0.85rem;
        gap: 0.35rem;
        font-size: 0.78rem;
        line-height: 1.35;
    }
}

@media (max-width: 340px) {
    .footer-link-group-discover .footer-links,
    .footer-legal-block .footer-links {
        grid-template-columns: 1fr;
    }

    .footer-proof-panel {
        grid-template-columns: 1fr;
    }

    .footer-proof-panel span {
        min-height: 2.35rem;
        flex-direction: row;
    }
}
/* Auth pages: keep production shortcut strip out of login/register flows. */
body.auth-page .site-action-row,
body.auth-page .site-header.has-action-row .site-action-row,
body.auth-page .site-mobile-action-group,
body.auth-page .site-header.has-action-row .site-mobile-action-group {
    display: none !important;
}

body.auth-page .site-navbar.has-action-row {
    padding-bottom: 0 !important;
}

body.auth-page .site-navbar.has-action-row .site-navbar-main {
    min-height: 4.6rem;
}

@media (max-width: 767.98px) {
    body.auth-page .site-navbar.has-action-row .site-navbar-main {
        min-height: 4.2rem;
    }

    body.register-auth-page .brand-card .mini-note {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    body.register-auth-page .brand-card > .d-flex.flex-column > .d-flex {
        min-height: 3.85rem;
    }
}
/* Customize mobile UX: choices first, compact summary actions. */
@media (max-width: 767.98px) {
    body.customize-page {
        padding-bottom: 1rem;
    }

    .customize-page .page-hero-small {
        margin-bottom: 0.85rem !important;
        padding: 1rem;
        border-radius: 20px;
    }

    .customize-page .page-hero-small .page-title {
        font-size: clamp(1.75rem, 8vw, 2.25rem);
        line-height: 1.02;
    }

    .customize-page .page-hero-small .page-subtitle {
        display: -webkit-box;
        margin-bottom: 0;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .customize-page .customize-layout {
        display: flex !important;
        flex-direction: column;
        gap: 0.85rem;
    }

    .customize-page .preview-card {
        display: contents;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .customize-page .preview-stage {
        order: 1;
        max-height: 52vh;
        margin: 0;
        border-radius: 20px;
    }

    .customize-page .preview-stage img {
        max-height: 52vh;
        object-fit: contain;
    }

    .customize-page .detail-meta {
        order: 2;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
        padding: 0;
    }

    .customize-page .detail-meta > div {
        min-height: 3.45rem;
        padding: 0.64rem 0.72rem;
        border-radius: 15px;
    }

    .customize-page .detail-meta span,
    .customize-page .summary-row small {
        font-size: 0.68rem;
    }

    .customize-page .detail-meta strong {
        display: -webkit-box;
        overflow: hidden;
        font-size: 0.8rem;
        line-height: 1.25;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .customize-page .price-summary {
        order: 3;
    }

    .customize-page .price-summary .form-card {
        padding: 0.92rem;
        border-radius: 20px;
    }

    .customize-page .form-section-title {
        margin-bottom: 0.62rem;
        font-size: 0.76rem;
    }

    .customize-page .product-info-box {
        padding: 0.82rem;
        border-radius: 18px;
    }

    .customize-page .product-info-box h3 {
        margin-bottom: 0.35rem;
        font-size: 1.12rem;
    }

    .customize-page .product-info-box p {
        display: -webkit-box;
        overflow: hidden;
        font-size: 0.82rem;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .customize-page .product-info-grid {
        grid-template-columns: 1fr !important;
        gap: 0.45rem;
    }

    .customize-page .product-info-grid div {
        padding: 0.65rem;
        border-radius: 14px;
    }

    .customize-page .pricing-choice-grid,
    .customize-page .pricing-choice-grid-2,
    .customize-page .pricing-choice-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.52rem;
        margin-bottom: 0.8rem !important;
    }

    .customize-page .pricing-choice-card {
        min-height: 0;
        padding: 0.66rem;
        border-radius: 15px;
        gap: 0.22rem;
    }

    .customize-page .pricing-choice-icon {
        width: 1.75rem;
        height: 1.75rem;
        margin-bottom: 0.12rem;
        font-size: 0.9rem;
    }

    .customize-page .pricing-choice-title {
        font-size: 0.82rem;
        line-height: 1.18;
    }

    .customize-page .pricing-choice-text {
        display: -webkit-box;
        overflow: hidden;
        min-height: 0;
        font-size: 0.68rem;
        line-height: 1.18;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .customize-page .pricing-choice-price {
        margin-top: 0.18rem;
        font-size: 0.75rem;
    }

    .customize-page .pricing-frame-swatch {
        width: 1.55rem;
        height: 1.55rem;
    }

    .customize-page .size-use-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.35rem;
        margin-top: 0.15rem;
    }

    .customize-page .size-use-item {
        min-height: 2.2rem;
        padding: 0.4rem 0.3rem;
        border-radius: 12px;
        font-size: 0.64rem;
        line-height: 1.12;
    }

    .customize-page .size-compare-guide-inline {
        padding: 0.7rem;
        border-radius: 16px;
    }

    .customize-page .size-compare-guide-inline .size-compare-visual img {
        aspect-ratio: 16 / 8;
    }

    .customize-page .pricing-quantity-field {
        grid-template-columns: minmax(0, 1fr) 6rem;
        align-items: center;
        padding: 0.65rem 0.72rem;
        border-radius: 15px;
    }

    .customize-page .pricing-quantity-field .form-control {
        min-height: 2.35rem;
        text-align: center;
    }

    .customize-page .admin-action-bar.customize-auto-price-bar {
        align-items: stretch;
        flex-direction: column;
        gap: 0.55rem;
        margin-top: 0.85rem !important;
    }

    .customize-page .customize-auto-price-note {
        font-size: 0.76rem;
        line-height: 1.32;
    }

    .customize-page .summary-card:not(.customize-total-card) {
        order: 4;
        margin-top: 0 !important;
        padding: 0.9rem;
        border-radius: 18px;
    }

    .customize-page .summary-card:not(.customize-total-card) h2 {
        margin-bottom: 0.35rem;
        font-size: 1.05rem;
    }

    .customize-page .summary-card:not(.customize-total-card) p,
    .customize-page .advisory-list span {
        font-size: 0.78rem;
        line-height: 1.42;
    }

    .customize-page .customize-total-card {
        order: 5;
        margin-top: 0 !important;
        padding: 0.95rem;
        border-radius: 20px;
    }

    .customize-page .customize-total-card .summary-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
        margin-top: 0.7rem !important;
    }

    .customize-page .summary-row {
        min-height: 3.15rem;
        padding: 0.55rem 0.62rem;
        border: 1px solid rgba(102, 78, 52, 0.1);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.58);
    }

    .customize-page .summary-row.summary-total {
        grid-column: 1 / -1;
        min-height: 3.3rem;
    }

    .customize-page .summary-row strong {
        font-size: 0.84rem;
        line-height: 1.18;
    }

    .customize-page .summary-row.summary-total strong {
        font-size: 1.1rem;
    }

    .customize-page .customize-total-card .hero-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
        margin-top: 0.75rem !important;
    }

    .customize-page .customize-total-card .hero-actions form {
        display: contents !important;
    }

    .customize-page .customize-total-card .btn {
        width: 100%;
        min-height: 2.85rem;
        padding: 0.7rem 0.65rem;
        border-radius: 14px;
        font-size: 0.86rem;
        line-height: 1.12;
    }

    .customize-page .customize-total-card .btn[hidden] + form .btn,
    .customize-page .customize-total-card .hero-actions form:only-child .btn {
        grid-column: 1 / -1;
    }
}

@media (max-width: 380px) {
    .customize-page .pricing-choice-grid,
    .customize-page .pricing-choice-grid-2,
    .customize-page .pricing-choice-grid-3 {
        grid-template-columns: 1fr !important;
    }

    .customize-page .size-use-grid,
    .customize-page .customize-total-card .summary-list,
    .customize-page .customize-total-card .hero-actions {
        grid-template-columns: 1fr;
    }
}
/* Cart mobile UX polish: product preview first, compact controls. */
@media (max-width: 767.98px) {
    body.cart-page .page-shell {
        padding-top: 6.7rem;
    }

    body.cart-page .page-hero-small {
        display: none;
    }

    body.cart-page .alert {
        margin-bottom: 0.85rem;
        padding: 0.85rem 1rem;
        border-radius: 1rem;
        font-size: 0.92rem;
    }

    body.cart-page .checkout-layout {
        gap: 1rem;
    }

    body.cart-page .cart-card,
    body.cart-page .order-summary-card,
    body.cart-page .cart-note {
        border-radius: 1.25rem;
        padding: 0.9rem;
        box-shadow: 0 14px 34px rgba(64, 44, 27, 0.08);
    }

    body.cart-page .cart-item-layout {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 0.85rem;
    }

    body.cart-page .cart-thumb-wrap {
        display: block;
    }

    body.cart-page .cart-thumb {
        width: 100%;
        max-width: none;
        aspect-ratio: 16 / 10;
        border-radius: 1rem;
        background: rgba(255, 250, 243, 0.88);
    }

    body.cart-page .cart-thumb img {
        object-fit: contain;
        background: rgba(255, 250, 243, 0.9);
    }

    body.cart-page .cart-item-main {
        gap: 0.8rem;
    }

    body.cart-page .cart-item-top {
        grid-template-columns: 1fr;
        gap: 0.7rem;
    }

    body.cart-page .cart-item-title {
        display: -webkit-box;
        overflow: hidden;
        font-size: 1rem;
        line-height: 1.25;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    body.cart-page .cart-meta {
        gap: 0.55rem;
    }

    body.cart-page .cart-meta-row {
        gap: 0.4rem;
    }

    body.cart-page .cart-badge {
        max-width: 100%;
        padding: 0.42rem 0.62rem;
        font-size: 0.72rem;
        line-height: 1.15;
    }

    body.cart-page .cart-mini-facts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
        font-size: 0.78rem;
    }

    body.cart-page .cart-mini-facts span,
    body.cart-page .cart-price-block {
        padding: 0.62rem 0.7rem;
        border-radius: 0.9rem;
        background: rgba(255, 255, 255, 0.7);
    }

    body.cart-page .cart-price-block {
        text-align: left;
    }

    body.cart-page .cart-price-block strong {
        font-size: 1rem;
    }

    body.cart-page .cart-actions-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    body.cart-page .cart-quantity-form {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 5rem minmax(0, 1fr);
        gap: 0.5rem;
        width: 100%;
    }

    body.cart-page .cart-quantity-form .form-control,
    body.cart-page .cart-actions-row .btn,
    body.cart-page .cart-remove-form,
    body.cart-page .cart-remove-form .btn {
        width: 100%;
    }

    body.cart-page .cart-actions-row .btn,
    body.cart-page .cart-quantity-form .form-control {
        min-height: 2.75rem;
        border-radius: 0.9rem;
        padding: 0.65rem 0.7rem;
        font-size: 0.9rem;
        line-height: 1.15;
        white-space: normal;
    }

    body.cart-page .cart-remove-form {
        grid-column: 1 / -1;
    }

    body.cart-page .cart-remove-form .btn {
        color: #9d3b32;
        border-color: rgba(157, 59, 50, 0.24);
        background: rgba(157, 59, 50, 0.035);
    }

    body.cart-page .cart-summary {
        margin-bottom: 0.9rem !important;
    }

    body.cart-page .cart-summary-total-box {
        margin-top: 0.7rem;
        padding: 0.95rem;
        border-radius: 1.1rem;
    }

    body.cart-page .cart-summary-total-box strong {
        font-size: clamp(1.85rem, 10vw, 2.35rem);
    }

    body.cart-page .cart-summary-lines {
        gap: 0.68rem;
        margin-top: 0.8rem;
        padding: 0.85rem 0;
    }

    body.cart-page .cart-shipping-note {
        margin-top: 0.8rem;
        padding: 0.78rem 0.85rem;
        border-radius: 0.95rem;
        font-size: 0.86rem;
    }

    body.cart-page .coupon-box .d-flex {
        gap: 0.45rem !important;
    }

    body.cart-page .coupon-box .form-control,
    body.cart-page .coupon-box .btn {
        min-height: 2.75rem;
        border-radius: 0.9rem;
    }

    body.cart-page .cart-upsell-box {
        padding: 0.75rem;
        border-radius: 1rem;
    }

    body.cart-page .cart-upsell-card {
        grid-template-columns: 3.5rem minmax(0, 1fr);
        padding: 0.6rem;
        border-radius: 0.95rem;
    }

    body.cart-page .cart-upsell-thumb {
        width: 3.5rem;
        border-radius: 0.8rem;
    }

    body.cart-page .cart-upsell-copy p {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    body.cart-page .order-summary-card > .cart-note {
        margin-top: 0.85rem;
    }

    body.cart-page .cart-note .advisory-list {
        gap: 0.55rem;
    }

    body.cart-page .cart-note .advisory-list div {
        align-items: flex-start;
        font-size: 0.84rem;
        line-height: 1.35;
    }
}

@media (max-width: 420px) {
    body.cart-page .cart-thumb {
        aspect-ratio: 4 / 3;
    }

    body.cart-page .cart-mini-facts {
        grid-template-columns: 1fr;
    }

    body.cart-page .cart-actions-row {
        grid-template-columns: 1fr;
    }

    body.cart-page .cart-quantity-form {
        grid-template-columns: 4.7rem minmax(0, 1fr);
    }
}
/* Final mobile footer override: compact, scannable footer. */
@media (max-width: 767.98px) {
    .site-footer {
        padding: 1.25rem 0 1rem !important;
    }

    .site-footer .footer-main-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.9rem !important;
    }

    .site-footer .footer-brand-block {
        display: grid !important;
        gap: 0.65rem !important;
    }

    .site-footer .footer-brand-link {
        width: min(14.5rem, 72vw) !important;
        min-height: 3.45rem !important;
        margin: 0 !important;
        border-radius: 0.95rem !important;
        background-size: 84% auto !important;
    }

    .site-footer .footer-text {
        display: -webkit-box !important;
        margin: 0 !important;
        overflow: hidden !important;
        color: rgba(255, 247, 238, 0.72) !important;
        font-size: 0.86rem !important;
        line-height: 1.45 !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 3 !important;
    }

    .site-footer .footer-social-links {
        gap: 0.45rem !important;
        margin: 0 !important;
    }

    .site-footer .footer-social-links a {
        width: 2.35rem !important;
        height: 2.35rem !important;
        border-radius: 0.8rem !important;
    }

    .site-footer .footer-center-block,
    .site-footer .footer-link-columns {
        display: grid !important;
        gap: 0.7rem !important;
    }

    .site-footer .footer-link-columns {
        grid-template-columns: 1fr !important;
    }

    .site-footer .footer-link-group,
    .site-footer .footer-legal-block {
        padding: 0.75rem !important;
        border: 1px solid rgba(255, 247, 238, 0.12) !important;
        border-radius: 0.95rem !important;
        background: rgba(255, 247, 238, 0.055) !important;
    }

    .site-footer h4 {
        margin: 0 0 0.55rem !important;
        font-size: 0.66rem !important;
        letter-spacing: 0.1em !important;
    }

    .site-footer .footer-links {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.42rem !important;
    }

    .site-footer .footer-links a {
        display: flex !important;
        align-items: center !important;
        min-height: 2.2rem !important;
        padding: 0.48rem 0.55rem !important;
        border: 1px solid rgba(255, 247, 238, 0.1) !important;
        border-radius: 0.78rem !important;
        background: rgba(255, 247, 238, 0.055) !important;
        font-size: 0.78rem !important;
        line-height: 1.16 !important;
        color: rgba(255, 247, 238, 0.82) !important;
        transform: none !important;
    }

    .site-footer .footer-proof-panel {
        grid-template-columns: 1fr !important;
        gap: 0.42rem !important;
        padding: 0.55rem !important;
        border-radius: 0.95rem !important;
    }

    .site-footer .footer-proof-panel span {
        flex-direction: row !important;
        justify-content: flex-start !important;
        min-height: 2.35rem !important;
        padding: 0.48rem 0.65rem !important;
        border-radius: 0.78rem !important;
        font-size: 0.78rem !important;
        text-align: left !important;
    }

    .site-footer .footer-bottom-bar {
        display: grid !important;
        gap: 0.28rem !important;
        margin-top: 0.85rem !important;
        padding-top: 0.75rem !important;
        font-size: 0.72rem !important;
        line-height: 1.32 !important;
    }
}

@media (max-width: 360px) {
    .site-footer .footer-links {
        grid-template-columns: 1fr !important;
    }
}
.mockup-page .customize-layout.is-loading {
    opacity: 0.58;
    pointer-events: none;
    transition: opacity 0.18s ease;
}
/* Mobile mockup preview sizing */
@media (max-width: 767.98px) {
    .mockup-page .page-shell {
        padding-top: 1rem;
    }

    .mockup-page .page-hero-small {
        margin-bottom: 1.1rem !important;
    }

    .mockup-page .page-title {
        font-size: clamp(2.45rem, 13vw, 3.35rem);
        line-height: 0.95;
    }

    .mockup-page .mockup-stage {
        padding: 0.8rem;
        border-radius: 1.25rem;
    }

    .mockup-page .real-mockup-preview {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        aspect-ratio: 4 / 3;
        max-height: 52vh;
        min-height: 15.5rem;
        border-radius: 1.05rem;
        background: rgba(255, 252, 246, 0.96);
    }

    .mockup-page .real-mockup-preview img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }

    .mockup-page .real-mockup-preview .mockup-option-badge {
        top: 0.75rem;
        left: 0.75rem;
        max-width: calc(100% - 1.5rem);
        padding: 0.48rem 0.68rem;
        font-size: 0.68rem;
        letter-spacing: 0.07em;
    }
}

@media (max-width: 420px) {
    .mockup-page .real-mockup-preview {
        aspect-ratio: 1.18 / 1;
        max-height: 47vh;
        min-height: 13.75rem;
    }
}
/* Checkout mobile layout */
@media (max-width: 767.98px) {
    body.checkout-page .page-shell {
        padding-top: 6.35rem;
        padding-bottom: 2.25rem;
    }

    body.checkout-page .container {
        padding-inline: 0.75rem;
    }

    body.checkout-page .page-hero-small {
        margin-bottom: 1rem;
    }

    body.checkout-page .section-kicker {
        padding: 0.5rem 0.78rem;
        font-size: 0.7rem;
        line-height: 1.1;
    }

    body.checkout-page .page-title {
        margin-top: 0.55rem;
        margin-bottom: 0.45rem;
        font-size: 2.35rem;
        line-height: 1;
        letter-spacing: 0;
        overflow-wrap: normal;
    }

    body.checkout-page .page-subtitle {
        max-width: 21rem;
        font-size: 0.94rem;
        line-height: 1.48;
    }

    body.checkout-page .checkout-layout {
        gap: 0.9rem;
    }

    body.checkout-page .form-card,
    body.checkout-page .checkout-summary,
    body.checkout-page .checkout-note {
        padding: 0.78rem;
        border-radius: 1.1rem;
    }

    body.checkout-page .checkout-step-card {
        padding: 0.9rem;
        border-radius: 1rem;
        margin-bottom: 0.9rem !important;
    }

    body.checkout-page .checkout-step-heading {
        gap: 0.62rem;
        margin-bottom: 0.85rem;
    }

    body.checkout-page .checkout-step-heading > span {
        width: 2rem;
        height: 2rem;
        flex-basis: 2rem;
        font-size: 0.92rem;
    }

    body.checkout-page .checkout-step-heading strong {
        font-size: 1rem;
        line-height: 1.2;
    }

    body.checkout-page .checkout-step-heading small {
        margin-top: 0.12rem;
        font-size: 0.8rem;
        line-height: 1.35;
    }

    body.checkout-page .row.g-3 {
        --bs-gutter-y: 0.85rem;
    }

    body.checkout-page .form-label {
        margin-bottom: 0.35rem;
        font-size: 0.86rem;
        font-weight: 700;
    }

    body.checkout-page .form-control,
    body.checkout-page .form-select {
        min-height: 2.85rem;
        border-radius: 0.9rem;
        padding: 0.68rem 0.82rem;
        font-size: 0.95rem;
        line-height: 1.35;
    }

    body.checkout-page textarea.form-control {
        min-height: 6.5rem;
    }

    body.checkout-page .alert {
        padding: 0.78rem 0.9rem;
        border-radius: 0.95rem;
        font-size: 0.84rem;
        line-height: 1.45;
    }

    body.checkout-page .approval-box {
        padding: 0.78rem;
        border-radius: 0.95rem;
    }

    body.checkout-page .approval-box .form-check {
        display: grid;
        grid-template-columns: 1.18rem minmax(0, 1fr);
        column-gap: 0.62rem;
        align-items: flex-start;
        padding-left: 0;
    }

    body.checkout-page .approval-box .form-check-input {
        position: static;
        width: 1.08rem;
        height: 1.08rem;
        margin: 0.2rem 0 0;
    }

    body.checkout-page .approval-box .form-check-label {
        min-width: 0;
        font-size: 0.88rem;
        line-height: 1.45;
    }

    body.checkout-page .product-type-item {
        display: grid;
        grid-template-columns: 1.18rem minmax(0, 1fr);
        column-gap: 0.62rem;
        align-items: flex-start;
        min-height: 0;
        padding: 0.82rem;
        border-radius: 0.95rem;
    }

    body.checkout-page .product-type-item input {
        position: static;
        grid-row: 1 / span 2;
        width: 1.08rem;
        height: 1.08rem;
        margin: 0.2rem 0 0;
    }

    body.checkout-page .product-type-item strong {
        min-width: 0;
        font-size: 0.96rem;
        line-height: 1.22;
    }

    body.checkout-page .product-type-item .customize-text {
        display: block;
        overflow: visible;
        margin-top: 0.25rem !important;
        font-size: 0.82rem;
        line-height: 1.38;
        -webkit-line-clamp: unset;
    }

    body.checkout-page .checkout-submit-btn {
        position: sticky;
        bottom: 0.75rem;
        z-index: 30;
        min-height: 3rem;
        border-radius: 999px;
        font-size: 0.96rem;
        box-shadow: 0 14px 32px rgba(64, 44, 27, 0.22);
    }

        body.checkout-page .site-assistant {
        bottom: 4.75rem;
    }

    body.checkout-page .checkout-total-box {
        margin-top: 0.75rem;
        padding: 0.9rem;
        border-radius: 1rem;
    }

    body.checkout-page .checkout-total-box strong {
        font-size: 1.65rem;
    }

    body.checkout-page .checkout-items-list {
        gap: 0.65rem;
    }

    body.checkout-page .checkout-item-row {
        grid-template-columns: 3.4rem minmax(0, 1fr);
        gap: 0.62rem;
        padding: 0.68rem;
        border-radius: 0.9rem;
    }

    body.checkout-page .checkout-thumb {
        width: 3.4rem;
        min-width: 3.4rem;
        border-radius: 0.72rem;
    }

    body.checkout-page .checkout-item-info strong {
        font-size: 0.82rem;
        line-height: 1.25;
    }

    body.checkout-page .checkout-item-meta {
        gap: 0.28rem;
        margin-top: 0.32rem;
    }

    body.checkout-page .checkout-item-meta span {
        padding: 0.18rem 0.4rem;
        font-size: 0.68rem;
    }

    body.checkout-page .checkout-item-price {
        grid-column: 2;
        text-align: left;
        font-size: 0.86rem;
    }

    body.checkout-page .checkout-summary-lines {
        gap: 0.55rem;
    }

    body.checkout-page .checkout-line {
        display: flex;
        justify-content: space-between;
        gap: 0.75rem;
        font-size: 0.86rem;
        line-height: 1.35;
    }

    body.checkout-page .checkout-line strong {
        flex: 0 0 auto;
        max-width: 48%;
        text-align: right;
    }

    body.checkout-page .checkout-shipping-note {
        padding: 0.68rem 0.78rem;
        border-radius: 0.9rem;
        font-size: 0.82rem;
        line-height: 1.35;
    }

    body.checkout-page .coupon-box .d-flex {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 0.55rem !important;
    }

    body.checkout-page .coupon-box .btn,
    body.checkout-page .coupon-box form {
        width: 100%;
    }

    body.checkout-page .advisory-list {
        gap: 0.65rem;
    }

    body.checkout-page .advisory-list div {
        align-items: flex-start;
        font-size: 0.84rem;
        line-height: 1.42;
    }
}

@media (max-width: 420px) {
    body.checkout-page .page-title {
        font-size: 2.05rem;
    }

    body.checkout-page .form-card,
    body.checkout-page .checkout-summary,
    body.checkout-page .checkout-note,
    body.checkout-page .checkout-step-card {
        padding: 0.72rem;
    }

    body.checkout-page .checkout-step-heading {
        gap: 0.55rem;
    }

    body.checkout-page .checkout-step-heading strong {
        font-size: 0.95rem;
    }

    body.checkout-page .product-type-item,
    body.checkout-page .approval-box {
        padding: 0.72rem;
    }
}

.dashboard-date-filter {
    position: relative;
}

.dashboard-date-filter summary {
    list-style: none;
    cursor: pointer;
}

.dashboard-date-filter summary::-webkit-details-marker {
    display: none;
}

.dashboard-date-filter-panel {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    z-index: 20;
    display: grid;
    gap: 0.7rem;
    min-width: 260px;
    padding: 1rem;
    border: 1px solid var(--hdt-border);
    border-radius: 18px;
    background: var(--hdt-surface-strong);
    box-shadow: var(--hdt-shadow-sm);
}

.dashboard-date-filter-panel label {
    display: grid;
    gap: 0.35rem;
    color: var(--hdt-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.dashboard-date-filter-panel input {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--hdt-border-strong);
    border-radius: 12px;
    padding: 0.55rem 0.7rem;
    background: #fff;
    color: var(--hdt-text);
}

@media (max-width: 768px) {
    .dashboard-date-filter,
    .dashboard-date-filter summary {
        width: 100%;
    }

    .dashboard-date-filter-panel {
        position: static;
        margin-top: 0.75rem;
        min-width: 100%;
    }
}

/* Homepage mockup promo mobile compact layout */
@media (max-width: 575.98px) {
    .home-mockup-section.content-section {
        padding-block: 1.25rem 2rem;
    }

    .home-mockup-section .container {
        padding-inline: 0.85rem;
    }

    .home-mockup-section .home-mockup-panel {
        padding: 1.05rem;
        border-radius: 1.45rem;
    }

    .home-mockup-section .home-mockup-panel .row {
        --bs-gutter-x: 0;
        --bs-gutter-y: 1.15rem;
    }

    .home-mockup-section .section-heading {
        margin-bottom: 0;
    }

    .home-mockup-section .section-kicker {
        padding: 0.5rem 0.72rem;
        font-size: 0.7rem;
        letter-spacing: 0.08em;
    }

    .home-mockup-section .section-title {
        max-width: 11ch;
        margin: 0.65rem 0 0.7rem;
        font-size: clamp(2rem, 9.5vw, 2.55rem);
        line-height: 1;
        overflow-wrap: normal;
    }

    .home-mockup-section .section-text {
        margin-bottom: 1rem;
        font-size: 0.92rem;
        line-height: 1.45;
    }

    .home-mockup-section .btn {
        width: 100%;
        justify-content: center;
        padding: 0.9rem 1rem;
        border-radius: 1rem;
    }

    .home-mockup-section .mockup-showcase {
        padding: 0.8rem;
        border-radius: 1.35rem;
        box-shadow: 0 12px 26px rgba(58, 40, 31, 0.08);
    }

    .home-mockup-section .mockup-room-real {
        aspect-ratio: 4 / 3;
        border-radius: 1rem;
    }

    .home-mockup-section .mockup-room-label {
        top: 0.65rem;
        left: 0.65rem;
        max-width: calc(100% - 1.3rem);
        padding: 0.48rem 0.65rem;
        font-size: 0.62rem;
        white-space: normal;
    }

    .home-mockup-section .mockup-room-caption {
        right: 0.65rem;
        bottom: 0.65rem;
        max-width: 72%;
        padding: 0.62rem 0.75rem;
        font-size: 0.82rem;
        line-height: 1.3;
    }

    .home-mockup-section .mockup-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
        margin-top: 0.75rem;
    }

    .home-mockup-section .mockup-meta-item {
        min-height: 5.25rem;
        padding: 0.78rem;
        border-radius: 0.95rem;
    }

    .home-mockup-section .mockup-meta-item strong {
        margin-bottom: 0.25rem;
        font-size: 0.9rem;
        line-height: 1.2;
    }

    .home-mockup-section .mockup-meta-item span {
        font-size: 0.8rem;
        line-height: 1.38;
    }
}

@media (max-width: 374.98px) {
    .home-mockup-section .mockup-meta {
        grid-template-columns: 1fr;
    }

    .home-mockup-section .mockup-meta-item {
        min-height: 0;
    }
}

/* Blog experience */
.blog-page {
    --blog-sidebar-width: 280px;
}

.blog-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1rem;
    color: var(--hdt-muted);
    font-size: 0.94rem;
}

.blog-breadcrumb a {
    color: var(--hdt-brown);
    font-weight: 800;
    text-decoration: none;
}

.blog-index-hero,
.blog-article-hero {
    background: linear-gradient(135deg, rgba(255, 250, 244, 0.96), rgba(246, 236, 224, 0.92));
    border: 1px solid var(--hdt-border);
    border-radius: var(--hdt-radius-lg);
    box-shadow: var(--hdt-shadow);
}

.blog-index-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: 2rem;
    align-items: end;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    margin-bottom: 1.25rem;
}

.blog-search {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--hdt-border);
    border-radius: 20px;
    padding: 1rem;
}

.blog-search label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--hdt-dark);
    font-weight: 800;
}

.blog-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px;
    gap: 0.65rem;
}

.blog-category-strip {
    display: flex;
    gap: 0.65rem;
    overflow-x: auto;
    padding: 0 0 0.75rem;
    margin-bottom: 1rem;
}

.blog-category-strip a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 42px;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--hdt-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--hdt-dark);
    font-weight: 800;
    white-space: nowrap;
    text-decoration: none;
}

.blog-category-strip a.active {
    background: var(--hdt-brown);
    border-color: var(--hdt-brown);
    color: #fff;
}

.blog-category-strip span {
    color: inherit;
    opacity: 0.72;
    font-size: 0.82rem;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.blog-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: var(--hdt-surface);
    border: 1px solid var(--hdt-border);
    border-radius: var(--hdt-radius-lg);
    box-shadow: var(--hdt-shadow);
    overflow: hidden;
}

.blog-card-featured {
    grid-column: span 2;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.blog-card-media {
    display: block;
    min-height: 220px;
    background: rgba(74, 49, 35, 0.08);
}

.blog-card-media img,
.blog-featured-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog-card-body,
.blog-card:not(.blog-card-featured) {
    padding: 1.25rem;
}

.blog-card:has(.blog-card-body) {
    padding: 0;
}

.blog-card-meta,
.blog-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    color: var(--hdt-muted);
    font-size: 0.92rem;
}

.blog-meta-row span,
.blog-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.blog-card-category {
    color: var(--hdt-brown);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.blog-card h2,
.blog-card h3 {
    color: var(--hdt-dark);
    font-family: "Cormorant Garamond", serif;
    font-weight: 700;
    line-height: 1.04;
    margin: 0.75rem 0 0.6rem;
}

.blog-card h2 {
    font-size: clamp(1.7rem, 2.4vw, 2.35rem);
}

.blog-card h3 {
    font-size: 1.6rem;
}

.blog-card p,
.blog-article-excerpt,
.blog-side-panel p {
    color: var(--hdt-muted);
    line-height: 1.75;
}

.blog-article-shell {
    display: grid;
    gap: 1.25rem;
}

.blog-article-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    gap: 1.5rem;
    align-items: stretch;
    padding: clamp(1.5rem, 4vw, 2rem);
}

.blog-article-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.blog-featured-media {
    min-height: 320px;
    margin: 0;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--hdt-border);
}

.blog-article-grid {
    display: grid;
    grid-template-columns: var(--blog-sidebar-width) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.blog-article-side {
    position: sticky;
    top: 1rem;
    display: grid;
    gap: 1rem;
}

.blog-side-panel,
.blog-answer-box,
.blog-empty-state,
.blog-faq-section {
    background: var(--hdt-surface);
    border: 1px solid var(--hdt-border);
    border-radius: var(--hdt-radius-lg);
    box-shadow: var(--hdt-shadow);
}

.blog-side-panel {
    padding: 1.15rem;
}

.blog-side-panel h2,
.blog-section-heading h2 {
    color: var(--hdt-dark);
    font-size: 1.2rem;
    font-weight: 900;
    margin: 0 0 0.75rem;
}

.blog-toc {
    display: grid;
    gap: 0.55rem;
}

.blog-toc a {
    color: var(--hdt-muted);
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
}

.blog-toc a:hover {
    color: var(--hdt-brown);
}

.blog-toc .toc-level-3 {
    padding-left: 0.85rem;
    font-size: 0.9rem;
}

.blog-side-cta {
    background: linear-gradient(145deg, rgba(255, 246, 225, 0.96), rgba(255, 250, 244, 0.98));
}

.blog-article-main {
    min-width: 0;
}

.blog-answer-box {
    padding: 1.25rem 1.35rem;
    margin-bottom: 1rem;
}

.blog-answer-box span {
    color: var(--hdt-brown);
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.82rem;
}

.blog-answer-box p {
    margin: 0.55rem 0 0;
    color: var(--hdt-dark);
    font-size: 1.05rem;
    line-height: 1.75;
}

.blog-content {
    background: var(--hdt-surface);
    border: 1px solid var(--hdt-border);
    border-radius: var(--hdt-radius-lg);
    box-shadow: var(--hdt-shadow);
    padding: clamp(1.35rem, 3vw, 2rem);
}

.blog-content h2,
.blog-content h3 {
    scroll-margin-top: 110px;
}

.blog-content h2 {
    margin-top: 1.6rem;
    font-size: clamp(1.75rem, 3vw, 2.35rem);
}

.blog-content h3 {
    margin-top: 1.25rem;
    font-size: 1.45rem;
}

.blog-content p,
.blog-content li,
.blog-faq-item p {
    font-size: 1.03rem;
    line-height: 1.85;
}

.blog-content blockquote {
    margin: 1.25rem 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--hdt-gold);
    background: rgba(190, 139, 76, 0.08);
    border-radius: 0 16px 16px 0;
}

.blog-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1rem;
}

.blog-tags span {
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--hdt-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--hdt-muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.blog-section-heading {
    margin-bottom: 1rem;
}

.blog-faq-section {
    padding: clamp(1.35rem, 3vw, 2rem);
}

.blog-faq-list {
    display: grid;
    gap: 0.85rem;
}

.blog-faq-item {
    border: 1px solid var(--hdt-border);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    padding: 1rem 1.1rem;
}

.blog-faq-item summary {
    cursor: pointer;
    color: var(--hdt-dark);
    font-weight: 900;
}

.blog-faq-item p {
    margin: 0.7rem 0 0;
    color: var(--hdt-muted);
}

.blog-related-section {
    margin-bottom: 1rem;
}

.blog-empty-state {
    padding: clamp(1.5rem, 4vw, 2rem);
    text-align: center;
}

@media (max-width: 1180px) {
    .blog-grid,
    .blog-card-featured,
    .blog-index-hero,
    .blog-article-hero,
    .blog-article-grid {
        grid-template-columns: 1fr;
    }

    .blog-card-featured {
        grid-column: span 1;
    }

    .blog-article-side {
        position: static;
        order: 2;
    }
}

@media (max-width: 720px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }

    .blog-index-hero,
    .blog-article-hero,
    .blog-content,
    .blog-faq-section {
        border-radius: 24px;
    }

    .blog-search-row {
        grid-template-columns: 1fr 52px;
    }

    .blog-featured-media,
    .blog-card-media {
        min-height: 210px;
    }
}
.generator-panel[id="ai-generator"] {
    scroll-margin-top: 8.5rem;
}

@media (max-width: 767.98px) {
    .generator-panel[id="ai-generator"] {
        scroll-margin-top: 10.5rem;
    }
}
.product-quantity-tier-panel {
    border: 1px solid rgba(184, 138, 68, 0.22);
    border-radius: 18px;
    padding: 0.9rem;
    margin-bottom: 1rem;
    background: rgba(255, 247, 232, 0.68);
}

.product-quantity-tier-panel > strong {
    display: block;
    font-size: 0.86rem;
    margin-bottom: 0.65rem;
    color: var(--hdt-brown, #4b2e22);
}

.product-quantity-tier-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 0.55rem;
}

.product-quantity-tier-chip {
    border: 1px solid rgba(184, 138, 68, 0.28);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.82);
    padding: 0.72rem 0.78rem;
    text-align: left;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.product-quantity-tier-chip:hover,
.product-quantity-tier-chip.is-selected {
    border-color: rgba(184, 138, 68, 0.72);
    box-shadow: 0 10px 24px rgba(63, 42, 31, 0.08);
    transform: translateY(-1px);
}

.product-quantity-tier-chip.is-selected {
    background: rgba(255, 247, 232, 0.96);
}

.product-quantity-tier-chip span,
.product-quantity-tier-chip small {
    display: block;
}

.product-quantity-tier-chip span {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--hdt-gold, #b77b2f);
}

.product-quantity-tier-chip strong {
    display: block;
    margin-top: 0.18rem;
    font-size: 1rem;
    color: var(--hdt-brown, #4b2e22);
}

.product-quantity-tier-chip small {
    margin-top: 0.12rem;
    color: var(--hdt-muted, #7b6c62);
}

.product-quantity-tier-regular {
    font-size: 0.85rem;
}

.product-quantity-tier-regular s {
    color: #8d7b6f;
    text-decoration-line: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(130, 63, 42, 0.78);
}

.product-quantity-saving {
    margin-top: 0.7rem;
    border-radius: 12px;
    padding: 0.62rem 0.75rem;
    background: rgba(30, 132, 73, 0.11);
    color: #17633a;
    font-weight: 800;
    font-size: 0.86rem;
}
.cart-quantity-nudge {
    margin-top: 0.65rem;
}

.cart-quantity-nudge .btn {
    border-color: rgba(30, 132, 73, 0.28);
    background: rgba(30, 132, 73, 0.08);
    color: #17633a;
    font-weight: 800;
}

.cart-quantity-nudge .btn:hover {
    background: rgba(30, 132, 73, 0.14);
    border-color: rgba(30, 132, 73, 0.42);
}