/* ============================================================
   GigaAlbum — Main Stylesheet
   Mirrors gigaalbum_client_php design system
   ============================================================ */

/* ── Fonts ─────────────────────────────────────────────────── */
@font-face { font-family: 'FCLamoon-Light';   src: url("../fonts/FC Lamoon Light ver 1.00.ttf")   format('truetype'); }
@font-face { font-family: 'FCLamoon-Regular'; src: url("../fonts/FC Lamoon Regular ver 1.00.ttf") format('truetype'); }
@font-face { font-family: 'FCLamoon-Bold';    src: url("../fonts/FC Lamoon Bold ver 1.00.ttf")    format('truetype'); }

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
    --primary:      #8DC25B;
    --primary-dark: #7CB98E;
    --primary-light:#DAF0D3;
    --cyan:         #5EB1BC;
    --cyan-light:   #99F3FF;
    --yellow:       #FDD741;
    --yellow-light: #FFF9E0;
    --yellow-dark:  #b8860b;
    --text-dark:    #3A3A3A;
    --text-gray:    #828181;
    --gray-bg:      #EDEEEE;
    --white:        #FFFFFF;
    --red-badge:    #EC7063;
    --border-radius-btn: 50px;
    --border-radius-card: 15px;
}

/* ── Reset / Base ──────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'FCLamoon-Regular', sans-serif;
    font-size: 21px;
    color: var(--text-dark);
    background: var(--white);
}

body.lang-th { font-family: 'FCLamoon-Regular', sans-serif; }

a { text-decoration: none; color: inherit; }
a:hover, a:focus { text-decoration: none; color: inherit; outline: none; }

/* ── Typography — English ──────────────────────────────────── */
.h1-en        { font-family: 'FCLamoon-Regular',  sans-serif; font-size: 53px; }
.h1-en-bold   { font-family: 'FCLamoon-Bold', sans-serif; font-size: 53px; }
.h1-en-light  { font-family: 'FCLamoon-Light',    sans-serif; font-size: 53px; }
.h2-en        { font-family: 'FCLamoon-Regular',  sans-serif; font-size: 32px; }
.h2-en-bold   { font-family: 'FCLamoon-Bold', sans-serif; font-size: 32px; }
.h2-en-light  { font-family: 'FCLamoon-Light',    sans-serif; font-size: 32px; }
.h3-en        { font-family: 'FCLamoon-Regular',  sans-serif; font-size: 27px; }
.h3-en-bold   { font-family: 'FCLamoon-Bold', sans-serif; font-size: 27px; }
.h3-en-light  { font-family: 'FCLamoon-Light',    sans-serif; font-size: 27px; }
.p1-en        { font-family: 'FCLamoon-Regular',  sans-serif; font-size: 24px; }
.p1-en-bold   { font-family: 'FCLamoon-Bold', sans-serif; font-size: 24px; }
.p2-en        { font-family: 'FCLamoon-Regular',  sans-serif; font-size: 21px; }
.p2-en-bold   { font-family: 'FCLamoon-Bold', sans-serif; font-size: 21px; }
.p3-en        { font-family: 'FCLamoon-Regular',  sans-serif; font-size: 19px; }
.p3-en-bold   { font-family: 'FCLamoon-Bold', sans-serif; font-size: 19px; }
.p3-en-light  { font-family: 'FCLamoon-Light',    sans-serif; font-size: 19px; }

/* ── Typography — Thai ─────────────────────────────────────── */
.h1-th        { font-family: 'FCLamoon-Regular',    sans-serif; font-size: 53px; }
.h1-th-bold   { font-family: 'FCLamoon-Bold',   sans-serif; font-size: 53px; }
.h1-th-light  { font-family: 'FCLamoon-Light',      sans-serif; font-size: 53px; }
.h2-th        { font-family: 'FCLamoon-Regular',    sans-serif; font-size: 32px; }
.h2-th-bold   { font-family: 'FCLamoon-Bold',   sans-serif; font-size: 32px; }
.h2-th-light  { font-family: 'FCLamoon-Light',      sans-serif; font-size: 32px; }
.h3-th        { font-family: 'FCLamoon-Regular',    sans-serif; font-size: 27px; }
.h3-th-bold   { font-family: 'FCLamoon-Bold',   sans-serif; font-size: 27px; }
.p1-th        { font-family: 'FCLamoon-Regular',    sans-serif; font-size: 24px; }
.p1-th-bold   { font-family: 'FCLamoon-Bold',   sans-serif; font-size: 24px; }
.p2-th        { font-family: 'FCLamoon-Regular',    sans-serif; font-size: 21px; }
.p2-th-bold   { font-family: 'FCLamoon-Bold',   sans-serif; font-size: 21px; }
.p3-th        { font-family: 'FCLamoon-Light',      sans-serif; font-size: 21px; }
.p3-th-bold   { font-family: 'FCLamoon-Bold',   sans-serif; font-size: 19px; }
.p3-th-light  { font-family: 'FCLamoon-Light', sans-serif; font-size: 20px; }

/* ── Colors ────────────────────────────────────────────────── */
.color-primary  { color: var(--primary); }
.color-dark     { color: var(--primary-dark); }
.color-black    { color: var(--text-dark); }
.color-gray     { color: var(--text-gray); }
.color-white    { color: var(--white); }
.bg-primary     { background-color: var(--primary); }
.bg-primary-light { background-color: var(--primary-light); }

/* ── Announcement Bar ─────────────────────────────────────── */
.announcement-bar {
    background: var(--primary);
    color: var(--white);
    text-align: center;
    padding: 8px 16px;
    font-size: 19px;
    position: relative;
    z-index: 100;
}

/* ── Navbar ────────────────────────────────────────────────── */
.navbar { border-bottom: 1px solid #f0f0f0; }

.nav-custom:hover { color: var(--primary); }

.nav-custom-2:hover,  .nav-custom-2:hover a,  .nav-custom-2:hover span,
.nav-custom-3:hover,  .nav-custom-3:hover a,  .nav-custom-3:hover span,
.nav-custom-4:hover,  .nav-custom-4:hover a,  .nav-custom-4:hover span {
    background-color: var(--primary) !important;
    color: var(--white) !important;
}
.nav-custom-2:hover { border-radius: 10px 10px 0 0 !important; }
.nav-custom-3:hover { border-radius: 0 !important; }
.nav-custom-4:hover { border-radius: 0 0 10px 10px !important; }

.dropdown-menu-custom { margin: 0 !important; padding: 0 !important; }

.dropdown-toggle::after { display: none !important; }

.dropdown-icon-circle {
    width: 15px; height: 15px;
    background: var(--text-dark);
    color: var(--white);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.dropdown-icon-circle i { font-size: 9px; }

/* ── Search bar ────────────────────────────────────────────── */
.search-container { position: relative; width: 200px; }

.search-input {
    border-radius: 40px;
    padding-right: 50px;
    height: 42px;
    width: 100%;
    border: 1px solid var(--primary-dark);
}
.search-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(141,194,91,.2); }

.search-button {
    position: absolute; top: 50%; right: 5px;
    transform: translateY(-50%);
    border: none; background: var(--primary-light);
    color: var(--primary-dark); border-radius: 50%;
    width: 33px; height: 33px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .2s;
}
.search-button:hover { background: #c7e1bf; }

/* ── Cart / Fav badges ─────────────────────────────────────── */
.badge-cart {
    position: absolute; top: -14px; right: -14px;
    background: var(--red-badge); color: var(--white);
    border-radius: 50%; font-size: 11px; font-weight: bold;
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary-custom {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary); color: var(--white);
    border: none; border-radius: var(--border-radius-btn);
    padding: 10px 28px; cursor: pointer; transition: background .2s;
    font-family: inherit; text-decoration: none; line-height: 1.4;
}
.btn-primary-custom:hover { background: #79ac48; color: var(--white); }

.btn-outline-primary-custom {
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: var(--primary);
    border: 2px solid var(--primary); border-radius: var(--border-radius-btn);
    padding: 8px 26px; cursor: pointer; transition: all .2s;
    font-family: inherit; text-decoration: none; line-height: 1.4;
}
.btn-outline-primary-custom:hover { background: var(--primary); color: var(--white); }

/* ── Product Card ──────────────────────────────────────────── */
.product-card {
    border-radius: var(--border-radius-card);
    overflow: hidden; border: 1px solid #eee;
    transition: box-shadow .2s, transform .2s;
    cursor: pointer; background: var(--white);
    display: flex;
    flex-direction: column;
    height: 100%;
}
.product-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.1); transform: translateY(-3px); }

.product-card .product-img-wrap {
    aspect-ratio: 1/1; overflow: hidden; position: relative;
    background: var(--gray-bg);
}
.product-card .product-img-wrap img {
    width: 100%; height: 100%; object-fit: cover; transition: transform .3s;
}
.product-card:hover .product-img-wrap img { transform: scale(1.05); }

.badge-preorder {
    position: absolute; top: 8px; left: 8px;
    background: var(--cyan); color: var(--white);
    font-size: 11px; padding: 3px 10px; border-radius: 20px;
    font-family: 'FCLamoon-Bold', sans-serif;
}

.product-card .product-body {
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Unified product listing info */
.plist-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    margin-bottom: 0;
}
.plist-info-foot {
    margin-top: auto;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.plist-head {
    flex-shrink: 0;
    min-width: 0;
}
.plist-product-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.2;
    margin: 0;
    color: var(--text-gray);
    font-size: 18px;
}
.plist-title {
    font-size: 22px;
    color: var(--text-dark);
    line-height: 1.0;
    /* margin-bottom: 3px; */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.plist-sub { margin-bottom: 0; margin-top: 0; line-height: 1.1; }
.plist-sub span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-dark);
}
.preorder-info-body .plist-sub,
.bs-card-body .plist-sub,
.promo-card-body .plist-sub {
    font-size: inherit;
}
.plist-lines { margin-top: 2px; display: flex; flex-direction: column; gap: 2px; }
.plist-line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--text-gray);
    line-height: 1.25;
    word-break: break-word;
}
.plist-line span { flex: 1; min-width: 0; color: var(--text-dark); }
.plist-row { width: 100%; }
.plist-row-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}
.plist-row-item span {
    flex: 1;
    min-width: 0;
    color: var(--text-dark);
    word-break: break-word;
}
.plist-ico {
    flex-shrink: 0;
    width: 15px;
    margin-top: 2px;
    text-align: center;
    font-size: 13px;
    color: var(--primary);
    opacity: 0.85;
}
.plist-price {
    margin-top: 10px;
    font-size: 24px;
    color: var(--primary);
}
.product-prices {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    margin-top: 10px;
    vertical-align: top;
}
.bs-price-row .product-prices,
.promo-price-row .product-prices {
    margin-top: 0;
}
.product-price-stack {
    position: relative;
    display: inline-block;
    line-height: 1.1;
}
.price-full-badge {
    position: absolute;
    top: 0;
    left: calc(100% - 0.85em);
    right: auto;
    transform: translateY(-28%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(214, 40, 57, 0.03);
    border: 1px solid rgba(214, 40, 57, 0.16);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    color: rgba(214, 40, 57, 0.92);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    box-shadow: none;
    text-shadow: none;
    pointer-events: none;
}
.price-full-badge::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        105deg,
        transparent 0%,
        transparent 32%,
        rgba(255, 196, 72, 0.82) 50%,
        transparent 68%,
        transparent 100%
    );
    transform: translateX(-160%);
    animation: priceFullShimmer 2.8s 0.8s ease-in-out infinite;
}
@keyframes priceFullShimmer {
    0%, 55%, 100% { transform: translateX(-160%); }
    28%           { transform: translateX(160%); }
}
.price-full-badge-text {
    position: relative;
    z-index: 1;
    text-decoration: line-through;
    text-decoration-color: rgba(214, 40, 57, 0.78);
    text-decoration-thickness: 2px;
}
.pd-buy-prices {
    margin-top: 0;
}
.pd-buy-price-wrap {
    text-align: right;
    flex-shrink: 0;
    min-width: 0;
}
.pd-buy-prices .product-price-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    line-height: 1.15;
}
.pd-buy-prices .price-full-badge {
    position: static;
    transform: none;
    left: auto;
    font-size: 20px;
    padding: 4px 12px;
    pointer-events: auto;
}
.pd-buy-prices .price-full-badge-text {
    text-decoration-thickness: 1.5px;
}
.pd-buy-prices .pd-buy-price {
    line-height: 1.1;
}
.preorder-prices .price-full-badge {
    font-size: 19px;
    color: rgba(255, 107, 122, 0.94);
    background: rgba(214, 40, 57, 0.04);
    border-color: rgba(255, 107, 122, 0.18);
}
.preorder-prices .price-full-badge-text {
    text-decoration-color: rgba(255, 107, 122, 0.8);
}
.preorder-prices .price-full-badge::before {
    background: linear-gradient(
        105deg,
        transparent 0%,
        transparent 32%,
        rgba(255, 210, 90, 0.88) 50%,
        transparent 68%,
        transparent 100%
    );
}
.bs-prices .price-full-badge,
.promo-prices .price-full-badge {
    font-size: 18px;
}
.plist-info--dark .plist-sku-name { color: var(--white); }
.plist-info--dark .plist-line.plist-sku-code,
.plist-info--dark .plist-line.plist-sku-code span { color: rgba(255,255,255,.88); }
.plist-info--dark .plist-line { font-size: 12px; }
.plist-info--dark .plist-line span { color: rgba(255,255,255,.88); }
.plist-info--dark .plist-row-item span { color: rgba(255,255,255,.88); }
.plist-info--dark .plist-ico { color: var(--yellow); opacity: 1; font-size: 12px; }

/* Home section hooks */
.preorder-info-body .plist-title {
    font-family: 'FCLamoon-Bold', sans-serif;
    font-weight: 700;
    margin-bottom: 2px;
}
body.lang-th .preorder-info-body .plist-title { font-family: 'FCLamoon-Bold', sans-serif; }
.preorder-info-body .plist-lines { margin-bottom: 4px; }
.preorder-info-body .plist-line:not(.plist-sku-code):not(.plist-sub) { font-size: 12px; }
.preorder-info-body .plist-ico { font-size: 12px; }

.bs-card-body .plist-title {
    font-family: 'FCLamoon-Bold', sans-serif;
    font-weight: 700;
    margin-bottom: 2px;
}
body.lang-th .bs-card-body .plist-title { font-family: 'FCLamoon-Bold', sans-serif; }
.bs-card-body .plist-lines { margin-bottom: 4px; }
.bs-card-body .plist-line:not(.plist-sku-code):not(.plist-sub) { font-size: 13px; }

.promo-card-body .plist-title {
    font-family: 'FCLamoon-Bold', sans-serif;
    font-weight: 700;
}
body.lang-th .promo-card-body .plist-title { font-family: 'FCLamoon-Bold', sans-serif; }
.promo-card-body .plist-lines { margin-bottom: 4px; }
.promo-card-body .plist-line:not(.plist-sku-code):not(.plist-sub) { font-size: 13px; }

.mag-card-overlay .plist-title {
    font-family: 'FCLamoon-Bold', sans-serif;
    font-weight: 700;
    margin-bottom: 2px;
}
body.lang-th .mag-card-overlay .plist-title { font-family: 'FCLamoon-Bold', sans-serif; }
.mag-card-overlay .plist-line { font-size: 11px; }
.mag-card-overlay .plist-ico { font-size: 12px; }

/* SKU name / code — product_list_info */
.plist-info .plist-sku-name {
    font-size: 30px;
    line-height: 1.05;
    margin-bottom: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    white-space: normal;
}
.plist-info .plist-line.plist-sku-code,
.plist-info .plist-line.plist-sku-code span {
    font-size: 20px;
    line-height: 1.1;
    margin-bottom: 0;
    margin-top: 0;
}
.plist-info .plist-line.plist-sub {
    margin-bottom: 0;
    line-height: 1.1;
}
.plist-info-foot .plist-lines {
    margin-top: 0;
    gap: 2px;
}
.plist-info-foot .plist-line,
.plist-info-foot .plist-sub {
    line-height: 1.1;
    margin: 0;
}
.plist-info .plist-code,
.plist-info .plist-line.plist-sku-code span {
    font-size: 20px;
    line-height: 1.1;
}
.plist-info .plist-lines .row,
.plist-info-foot .plist-dates-row {
    margin-top: 0;
    --bs-gutter-y: 0;
}
.plist-info .plist-dates,
.plist-info-foot .plist-dates-row {
    font-size: 15px;
    line-height: 1.2;
    color: var(--text-gray);
}
.plist-info .plist-dates-item {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
}
.plist-info .plist-dates span,
.plist-info-foot .plist-dates-row span {
    color: var(--text-gray);
    font-size: inherit;
}
.plist-info .plist-dates .plist-ico,
.plist-info-foot .plist-dates-row .plist-ico {
    font-size: 11px;
    color: var(--text-gray);
    opacity: 0.75;
    margin-top: 1px;
}
.plist-info--dark .plist-dates,
.plist-info--dark .plist-dates span {
    color: rgba(255, 255, 255, 0.55);
}
.plist-info--dark .plist-dates .plist-ico {
    color: rgba(255, 255, 255, 0.5);
    opacity: 1;
}

.text-limit {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5em;
    min-height: 3em;
}

/* ── Carousel controls ─────────────────────────────────────── */
.carousel-btn {
    width: 40px; height: 40px; border-radius: 50%;
    border: 2px solid var(--cyan); background: var(--white);
    color: var(--cyan); display: flex; align-items: center;
    justify-content: center; cursor: pointer; transition: all .2s;
}
.carousel-btn:hover { background: var(--cyan); color: var(--white); }

/* ── Section titles ────────────────────────────────────────── */
.section-title {
    font-family: 'FCLamoon-Bold', sans-serif;
    font-size: 25px; color: var(--text-dark);
    border-left: 4px solid var(--primary); padding-left: 12px;
}
body.lang-th .section-title { font-family: 'FCLamoon-Bold', sans-serif; }

/* Homepage large section heading */
.home-section-title {
    font-family: 'FCLamoon-Bold', sans-serif;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700; color: var(--text-dark); line-height: 1.1;
}
.home-section-title.primary { color: var(--primary); }
body.lang-th .home-section-title { font-family: 'FCLamoon-Bold', sans-serif; }

/* See more link */
.see-more-link {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--text-dark); text-decoration: none;
    font-size: 19px; white-space: nowrap; transition: color .15s;
}
.see-more-link:hover { color: var(--primary); }

/* Event cards (legacy) */
.event-card {
    display: flex; gap: 14px; align-items: flex-start;
    background: #fff; border-radius: 14px; padding: 12px;
    transition: box-shadow .2s;
}
.event-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.event-thumb {
    flex-shrink: 0; width: 110px; height: 90px;
    border-radius: 10px; overflow: hidden; background: #f0f0f0;
}
.event-thumb img { width: 100%; height: 100%; object-fit: cover; }
.event-info { flex: 1; display: flex; flex-direction: column; gap: 4px; }

/* ── Activity / Event Section ───────────────────────────────── */
.activity-section {
    background: linear-gradient(160deg, #f5f0eb 0%, var(--white) 60%, #f0f4f0 100%);
    position: relative;
}
.activity-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(124,185,142,0.12) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
}
.activity-section .container { position: relative; z-index: 1; }
.activity-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--white);
    border: 1px solid rgba(124, 185, 142, 0.45);
    color: var(--primary-dark);
    border-radius: 8px;
    font-family: 'FCLamoon-Bold', sans-serif;
    font-size: 15px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow:
        0 2px 4px rgba(124, 185, 142, 0.2),
        0 6px 14px rgba(124, 185, 142, 0.45),
        0 12px 24px rgba(124, 185, 142, 0.22);
}
body.lang-th .activity-label { font-family: 'FCLamoon-Bold', sans-serif; text-transform: none; }
.activity-title {
    color: var(--text-dark) !important;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.55),
        0 3px 8px rgba(124, 185, 142, 0.5),
        0 6px 18px rgba(0, 0, 0, 0.14);
}
body.lang-th .activity-title { font-family: 'FCLamoon-Bold', sans-serif; }
.activity-subtitle {
    color: var(--text-gray);
    font-size: 19px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 4px 14px rgba(0, 0, 0, 0.1);
}
.activity-see-all {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--primary-dark); text-decoration: none;
    font-size: 19px; white-space: nowrap;
    padding: 8px 16px;
    border: 1.5px solid var(--primary-dark);
    border-radius: 50px;
    transition: all .2s;
}
.activity-see-all:hover {
    background: var(--primary-dark);
    color: var(--white);
}

.activity-card {
    display: block;
    background: var(--white);
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    transition: transform .25s, box-shadow .25s;
    height: 100%;
}
.activity-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 36px rgba(124, 185, 142, 0.18);
}
.activity-card-img {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--gray-bg);
}
.activity-card-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .35s;
}
.activity-card:hover .activity-card-img img { transform: scale(1.05); }
.activity-card-img-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-gray); font-size: 2rem;
}
.activity-date {
    position: absolute;
    top: 12px; left: 12px;
    background: var(--white);
    border-radius: 10px;
    padding: 6px 10px;
    text-align: center;
    line-height: 1.1;
    box-shadow: 0 3px 12px rgba(0,0,0,0.12);
    min-width: 46px;
}
.activity-date-day {
    display: block;
    font-family: 'FCLamoon-Bold', sans-serif;
    font-size: 27px; font-weight: 700;
    color: var(--red-badge);
}
body.lang-th .activity-date-day { font-family: 'FCLamoon-Bold', sans-serif; }
.activity-date-mon {
    display: block;
    font-family: 'FCLamoon-Bold', sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text-gray);
    letter-spacing: 0.05em;
}
body.lang-th .activity-date-mon { font-family: 'FCLamoon-Bold', sans-serif; }
.activity-card-body { padding: 16px; }
.activity-type {
    display: inline-block;
    padding: 2px 10px;
    background: rgba(124, 185, 142, 0.15);
    color: var(--primary-dark);
    border-radius: 4px;
    font-family: 'FCLamoon-Bold', sans-serif;
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
body.lang-th .activity-type { font-family: 'FCLamoon-Bold', sans-serif; text-transform: none; }
.activity-name {
    font-family: 'FCLamoon-Bold', sans-serif;
    font-size: 19px; font-weight: 700;
    color: var(--text-dark);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.45;
    min-height: 2.9em;
    margin-bottom: 8px;
}
body.lang-th .activity-name { font-family: 'FCLamoon-Bold', sans-serif; }
.activity-meta {
    font-size: 11px;
    color: var(--text-gray);
    margin-bottom: 12px;
    display: flex; align-items: center; gap: 5px;
}
.activity-more {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'FCLamoon-Bold', sans-serif;
    font-size: 12px;
    color: var(--primary-dark);
    transition: gap .2s;
}
body.lang-th .activity-more { font-family: 'FCLamoon-Bold', sans-serif; }
.activity-card:hover .activity-more { gap: 10px; }

/* Magazine section dot decoration */
.dot-decor {
    position: absolute; top: 0; bottom: 0; width: 80px;
    background-image: radial-gradient(circle, #c8e6b0 1.5px, transparent 1.5px);
    background-size: 14px 14px; opacity: .5; pointer-events: none;
}
.dot-decor-left  { left: 0; }
.dot-decor-right { right: 0; }

/* ── Magazine editorial cards (legacy) ─────────────────────── */
.mag-card { display: block; }
.mag-card-cover {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: 6px 10px 10px 6px;
    overflow: hidden;
    background: #2a2a2a;
    box-shadow: 0 8px 28px rgba(0,0,0,0.35);
    transition: transform .3s, box-shadow .3s;
}
.mag-card:hover .mag-card-cover {
    transform: translateY(-6px) rotate(-1deg);
    box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}
.mag-spine {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 8px;
    z-index: 2;
    background: linear-gradient(90deg, rgba(0,0,0,0.45) 0%, rgba(255,255,255,0.08) 40%, rgba(0,0,0,0.25) 100%);
    pointer-events: none;
}
.mag-card-cover img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .4s;
}
.mag-card:hover .mag-card-cover img { transform: scale(1.04); }
.mag-card-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.3); font-size: 2.5rem;
}
.mag-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 14px 14px 14px 18px;
    background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.35) 45%, transparent 100%);
}
.mag-issue {
    font-family: 'FCLamoon-Bold', sans-serif;
    font-size: 9px;
    letter-spacing: 0.14em;
    color: var(--yellow);
    margin-bottom: 6px;
}
body.lang-th .mag-issue { font-family: 'FCLamoon-Bold', sans-serif; letter-spacing: 0.06em; }
.mag-name {
    font-family: 'FCLamoon-Bold', sans-serif;
    font-size: 13px; font-weight: 700;
    color: var(--white);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    margin-bottom: 4px;
}
body.lang-th .mag-name { font-family: 'FCLamoon-Bold', sans-serif; }
.mag-artist {
    font-size: 11px;
    color: rgba(255,255,255,0.65);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 6px;
}
.mag-product-name {
    font-size: 10px;
    color: rgba(255,255,255,0.72);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 4px;
}
.mag-meta {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 11px;
    color: rgba(255,255,255,0.55);
}
.mag-meta i { margin-right: 3px; }
.mag-price {
    font-family: 'FCLamoon-Bold', sans-serif;
    font-size: 20px;
    color: var(--yellow);
    white-space: nowrap;
}
body.lang-th .mag-price { font-family: 'FCLamoon-Bold', sans-serif; }

/* ── Artists Section ────────────────────────────────────────── */
.artists-section {
    background: linear-gradient(160deg, var(--white) 0%, #f8faf6 50%, rgba(141, 194, 91, 0.1) 100%);
    position: relative;
    overflow: hidden;
}
.artists-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(141, 194, 91, 0.09) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}
.artists-section::after {
    content: '♪';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'FCLamoon-Bold', sans-serif;
    font-size: clamp(100px, 16vw, 200px);
    color: rgba(141, 194, 91, 0.05);
    pointer-events: none;
    line-height: 1;
}
.artists-section .container {
    position: relative;
    z-index: 1;
}
.artist-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #F5F5F4;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.08),
        0 10px 28px rgba(141, 194, 91, 0.18);
}

/* ── Pre-Order Section ──────────────────────────────────────── */
.preorder-section {
    background-color: var(--primary-light);
    position: relative;
    overflow: hidden;
}
.preorder-section::before {
    content: '';
    position: absolute;
    left: -6%;
    top: -20%;
    width: 42%;
    height: 140%;
    background: rgba(255,255,255,0.55);
    border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
    pointer-events: none;
    z-index: 0;
}

/* PRE-ORDER chip badge */
.preorder-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1.5px solid var(--primary);
    border-radius: 50px;
    padding: 5px 16px;
    color: var(--text-dark);
    font-family: 'FCLamoon-Bold', sans-serif;
    font-size: 18px;
    width: fit-content;
}
body.lang-th .preorder-chip { font-family: 'FCLamoon-Bold', sans-serif; }

/* Decorative stars around heading */
.preorder-deco-star {
    color: var(--primary);
    font-size: 0.55em;
    vertical-align: middle;
    line-height: 1;
}

/* Heading colour override */
.preorder-title {
    color: var(--primary) !important;
    text-shadow: 0 2px 8px rgba(141, 194, 91, 0.35);
}
body.lang-th .preorder-title { font-family: 'FCLamoon-Bold', sans-serif; }

/* Nav buttons */
.preorder-prev-btn,
.preorder-next-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 20px;
    transition: all .2s;
}
.preorder-prev-btn {
    background: var(--white);
    color: var(--text-dark);
    border: 1px solid var(--text-dark);
}
.preorder-prev-btn:hover { background: var(--gray-bg); }
.preorder-next-btn {
    background: var(--primary);
    color: var(--white);
    border: 1px solid var(--primary);
}
.preorder-next-btn:hover { background: #79ac48; border-color: #79ac48; }

/* Allow oval to overflow above swiper clipping area */
.preorderSwiper { overflow: hidden !important; }
.preorderSwiper .swiper-slide { width: auto; height: auto; }

/* Card link wrapper */
.preorder-card-link {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    padding-top: 50%;
    transition: transform .2s;
    --preorder-foot-h: 52px;
}
.preorder-card-link:hover { transform: translateY(-4px); }

/* Circle image — full card width, edge to edge */
.preorder-oval-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    z-index: 2;
}
.preorder-oval {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: var(--gray-bg);
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.08),
        0 12px 32px rgba(0, 0, 0, 0.12),
        0 20px 48px rgba(141, 194, 91, 0.1);
    transition: box-shadow .3s ease;
}
.preorder-oval img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .3s;
}
.preorder-card-link:hover .preorder-oval {
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.1),
        0 16px 40px rgba(0, 0, 0, 0.14),
        0 24px 56px rgba(141, 194, 91, 0.14);
}
.preorder-card-link:hover .preorder-oval img { transform: scale(1.06); }

/* Circular PRE ORDER badge */
.preorder-badge-circle {
    position: absolute;
    top: 7%;
    right: 5%;
    width: clamp(40px, 22%, 52px);
    height: clamp(40px, 22%, 52px);
    border-radius: 50%;
    background: rgba(153, 243, 255, 0.92);
    border: 1px solid rgba(94, 177, 188, 0.4);
    color: var(--cyan);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    font-size: 15px; line-height: 0.8;
    text-align: center;
    box-shadow: 0 2px 8px rgba(94, 177, 188, 0.28);
    color: var(--white);
}

/* White info card below the oval */
.preorder-info-card {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 2px 14px rgba(0,0,0,.07));
    flex: 1;
    min-height: 0;
}
.preorder-info-body {
    background: var(--white);
    padding: 50% 14px 14px;
    min-height: 200px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.preorder-order-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    min-height: var(--preorder-foot-h);
    padding: 12px 14px 17px;
    background: linear-gradient(135deg, #7db847 0%, #96c96a 50%, #b6e289 100%);
    color: var(--white);
    border: none;
    border-bottom-left-radius: 999px;
    border-bottom-right-radius: 999px;
    font-size: 30px;
    line-height: 1.2;
    text-align: center;
    box-shadow: 0 3px 10px rgba(141, 194, 91, 0.22);
    transition: background .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.preorder-order-btn i { font-size: 20px; opacity: 0.88; transition: all .3s ease; }
.preorder-card-link:hover .preorder-order-btn {
    background: linear-gradient(135deg, #7db847 0%, #96c96a 50%, #b6e289 100%);
    box-shadow: 0 6px 16px rgba(141, 194, 91, 0.35);
    transform: translateY(-2px);
}

/* Category tag pill */
.preorder-tag {
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 2px 12px;
    font-size: 15px;
    color: var(--text-gray);
    font-family: 'FCLamoon-Regular', sans-serif;
    margin-bottom: 7px;
}
body.lang-th .preorder-tag { font-family: 'FCLamoon-Regular', sans-serif; }

/* Album name */
.preorder-name {
    font-family: 'FCLamoon-Bold', sans-serif;
    font-size: 13px; font-weight: 700;
    color: var(--text-dark);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 3px;
}
body.lang-th .preorder-name { font-family: 'FCLamoon-Bold', sans-serif; }

/* Artist name */
.preorder-artist {
    font-family: 'FCLamoon-Regular', sans-serif;
    font-size: 11px;
    color: var(--text-gray);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 10px;
}
body.lang-th .preorder-artist { font-family: 'FCLamoon-Regular', sans-serif; }

.preorder-product-name {
    font-family: 'FCLamoon-Regular', sans-serif;
    font-size: 11px;
    color: var(--text-gray);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 6px;
}
body.lang-th .preorder-product-name { font-family: 'FCLamoon-Regular', sans-serif; }

/* Price + heart row */
.preorder-price-row {
    display: flex; align-items: center; justify-content: space-between;
}
.preorder-price {
    font-family: 'FCLamoon-Bold', sans-serif;
    font-size: 35px; font-weight: 700;
    color: var(--text-dark);
}
body.lang-th .preorder-price { font-family: 'FCLamoon-Bold', sans-serif; }

.preorder-heart-btn {
    background: none; border: none; cursor: pointer;
    color: var(--text-gray); font-size: 21px;
    padding: 0; line-height: 1; transition: color .2s;
}
.preorder-heart-btn:hover { color: #e74c3c; }

/* Shared favorite button (home, product cards, detail) */
.fav-btn {
    background: none; border: none; cursor: pointer;
    color: var(--text-gray); font-size: 21px;
    padding: 0; line-height: 1; transition: color .2s;
    flex-shrink: 0;
}
.fav-btn:hover,
.fav-btn.active { color: #e74c3c; }

.product-card-fav {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    width: 32px; height: 32px;
    background: rgba(255,255,255,.92);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 19px;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

.bs-price-row,
.promo-price-row,
.preorder-price-row {
    display: flex; align-items: center; gap: 8px;
}

.bs-fav-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 4;
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.bs-fav-btn:hover,
.bs-fav-btn.active { color: #e74c3c; }

.promo-fav-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 4;
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.promo-fav-btn:hover,
.promo-fav-btn.active { color: #e74c3c; }

.mag-fav-btn {
    position: absolute; top: 10px; right: 10px; z-index: 4;
    width: 34px; height: 34px;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 19px;
    color: rgba(255,255,255,.85);
}
.mag-fav-btn:hover,
.mag-fav-btn.active { color: #ff6b6b; background: rgba(255,255,255,.25); }

/* Swiper pagination dots */
.preorder-swiper-pagination { text-align: center; }
.preorder-swiper-pagination .swiper-pagination-bullet {
    width: 8px; height: 8px;
    background: #ccc; opacity: 1;
    border-radius: 4px;
    margin: 0 3px;
    transition: all .3s;
    display: inline-block;
}
.preorder-swiper-pagination .swiper-pagination-bullet-active {
    background: var(--primary);
    width: 22px;
}

/* ── Best Seller Section ────────────────────────────────────── */
.bestseller-section {
    background: linear-gradient(135deg, rgba(253, 215, 65, 0.22) 0%, var(--white) 55%, rgba(184, 134, 11, 0.07) 100%);
    position: relative;
    overflow: hidden;
}
.bestseller-section::after {
    content: '★';
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'FCLamoon-Bold', sans-serif;
    font-size: clamp(120px, 18vw, 220px);
    font-weight: 700;
    color: rgba(184, 134, 11, 0.06);
    pointer-events: none;
    line-height: 1;
}
.bestseller-section .container {
    position: relative;
    z-index: 1;
}
.bestseller-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--yellow);
    color: var(--text-dark);
    border-radius: 6px;
    font-family: 'FCLamoon-Bold', sans-serif;
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow:
        0 2px 4px rgba(184, 134, 11, 0.25),
        0 6px 14px rgba(253, 215, 65, 0.6),
        0 12px 24px rgba(184, 134, 11, 0.28);
}
body.lang-th .bestseller-label { font-family: 'FCLamoon-Bold', sans-serif; }
.bestseller-title {
    color: var(--text-dark) !important;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.55),
        0 3px 8px rgba(184, 134, 11, 0.5),
        0 6px 18px rgba(0, 0, 0, 0.14);
}
body.lang-th .bestseller-title { font-family: 'FCLamoon-Bold', sans-serif; }
.bestseller-subtitle {
    color: var(--text-gray);
    font-size: 19px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 4px 14px rgba(0, 0, 0, 0.1);
}

.bestseller-nav-btn {
    width: 40px; height: 40px;
    border-radius: 10px;
    border: 1px solid #e8e8e8;
    background: var(--white);
    color: var(--text-dark);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 19px;
    transition: all .2s;
}
.bestseller-nav-btn:hover { border-color: var(--yellow); color: #b8860b; }
.bestseller-nav-btn--next {
    background: var(--yellow);
    border-color: var(--yellow);
    color: var(--text-dark);
}
.bestseller-nav-btn--next:hover { background: #f5cc3a; border-color: #f5cc3a; }

.bestseller-see-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #b8860b;
    text-decoration: none;
    font-size: 19px;
    white-space: nowrap;
    padding: 7px 16px;
    border: 1.5px solid rgba(253, 215, 65, 0.65);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    transition: color .15s, background .15s, border-color .15s, gap .15s;
}
.bestseller-see-all:hover {
    color: var(--text-dark);
    background: var(--yellow);
    border-color: var(--yellow);
    gap: 10px;
}

.bestsellerSwiper { overflow: hidden !important; padding: 8px 4px 16px; }
.bestsellerSwiper .swiper-slide { height: auto; box-sizing: border-box; }
.bestsellerSwiper .swiper-slide > .bs-card { height: 100%; }

/* Best Seller card — ranking style */
.bs-card {
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    box-shadow: 0 4px 20px rgba(0,0,0,.06);
    transition: transform .25s, box-shadow .25s;
    height: 100%;
}
.bs-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(253, 215, 65, 0.22);
}
.bs-rank {
    position: absolute;
    top: 10px; left: 10px;
    z-index: 3;
    font-family: 'FCLamoon-Bold', sans-serif;
    font-size: 35px; font-weight: 700;
    line-height: 1;
    color: var(--white);
    text-shadow: 0 2px 8px rgba(0,0,0,.45);
}
body.lang-th .bs-rank { font-family: 'FCLamoon-Bold', sans-serif; }
.bs-card-img {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--gray-bg);
}
.bs-card-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .35s;
}
.bs-card:hover .bs-card-img img { transform: scale(1.07); }
.bs-card-img-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-gray); font-size: 2rem;
}
.bs-hot-tag {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    background: rgba(253, 215, 65, 0.92);
    border: 1px solid rgba(184, 134, 11, 0.35);
    color: var(--text-dark);
    border-radius: 99px;
    font-family: 'FCLamoon-Bold', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(184, 134, 11, 0.25);
}
.bs-hot-tag::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
    transform: translateX(-150%);
    animation: bsHotShimmer 4s 1.5s ease-in-out infinite;
}
@keyframes bsHotShimmer {
    0%, 70%, 100% { transform: translateX(-150%); }
    35%         { transform: translateX(150%); }
}
.bs-hot-tag-dot,
.bs-hot-tag-text {
    position: relative;
    z-index: 1;
}
.bs-hot-tag-dot {
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #b8860b;
    box-shadow: 0 0 5px rgba(184, 134, 11, 0.8);
    animation: bsHotPulse 1.6s ease-in-out infinite;
}
@keyframes bsHotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.7); }
}
body.lang-th .bs-hot-tag { font-family: 'FCLamoon-Bold', sans-serif; }
.bs-card-body {
    padding: 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.bs-cat {
    display: inline-block;
    font-size: 15px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #b8860b;
    font-family: 'FCLamoon-Bold', sans-serif;
    margin-bottom: 6px;
}
body.lang-th .bs-cat { font-family: 'FCLamoon-Bold', sans-serif; text-transform: none; }
.bs-name {
    font-family: 'FCLamoon-Bold', sans-serif;
    font-size: 19px; font-weight: 700;
    color: var(--text-dark);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 4px;
}
body.lang-th .bs-name { font-family: 'FCLamoon-Bold', sans-serif; }
.bs-artist {
    font-size: 12px;
    color: var(--text-gray);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 8px;
}
.bs-product-name {
    font-size: 11px;
    color: var(--text-gray);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 4px;
}
.bs-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    margin-top: auto;
    border-top: 1px dashed #eee;
}
.bs-price {
    font-family: 'FCLamoon-Bold', sans-serif;
    font-size: 35px; font-weight: 700;
    color: #c9920a;
}
body.lang-th .bs-price { font-family: 'FCLamoon-Bold', sans-serif; }
.bs-view {
    font-size: 20px;
    color: var(--text-gray);
    display: inline-flex; align-items: center; gap: 4px;
    transition: color .2s;
}
.bs-card:hover .bs-view { color: #b8860b; }

.bestseller-swiper-pagination { text-align: center; }
.bestseller-swiper-pagination .swiper-pagination-bullet {
    width: 8px; height: 8px;
    background: #e0e0e0; opacity: 1;
    border-radius: 50%;
    margin: 0 4px;
    transition: all .3s;
}
.bestseller-swiper-pagination .swiper-pagination-bullet-active {
    background: var(--yellow);
    width: 24px;
    border-radius: 4px;
}

/* ── Promotion Section ──────────────────────────────────────── */
.promotion-section {
    background: linear-gradient(135deg, rgba(153,243,255,0.25) 0%, var(--white) 55%, rgba(94,177,188,0.08) 100%);
    position: relative;
    overflow: hidden;
}
.promotion-section::after {
    content: '%';
    position: absolute;
    right: -20px; top: 50%;
    transform: translateY(-50%);
    font-family: 'FCLamoon-Bold', sans-serif;
    font-size: clamp(120px, 18vw, 220px);
    font-weight: 700;
    color: rgba(94, 177, 188, 0.06);
    pointer-events: none;
    line-height: 1;
}
.promotion-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(153, 243, 255, 0.55);
    border: 1px solid rgba(94, 177, 188, 0.35);
    color: var(--cyan);
    border-radius: 50px;
    font-family: 'FCLamoon-Bold', sans-serif;
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow:
        0 2px 4px rgba(94, 177, 188, 0.2),
        0 6px 14px rgba(94, 177, 188, 0.5),
        0 12px 24px rgba(94, 177, 188, 0.25);
}
body.lang-th .promotion-label { font-family: 'FCLamoon-Bold', sans-serif; text-transform: none; }
.promotion-title {
    color: var(--text-dark) !important;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.55),
        0 3px 8px rgba(94, 177, 188, 0.5),
        0 6px 18px rgba(0, 0, 0, 0.14);
}
body.lang-th .promotion-title { font-family: 'FCLamoon-Bold', sans-serif; }
.promotion-subtitle {
    color: var(--text-gray);
    font-size: 19px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 4px 14px rgba(0, 0, 0, 0.1);
}

.promotion-nav-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1.5px solid rgba(94, 177, 188, 0.4);
    background: var(--white);
    color: var(--cyan);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 19px;
    transition: all .2s;
}
.promotion-nav-btn:hover { background: rgba(153, 243, 255, 0.4); }
.promotion-nav-btn--next {
    background: var(--cyan);
    border-color: var(--cyan);
    color: var(--white);
}
.promotion-nav-btn--next:hover { background: #4a9ea8; border-color: #4a9ea8; }

.promotion-see-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--cyan);
    text-decoration: none;
    font-size: 19px;
    white-space: nowrap;
    padding: 7px 16px;
    border: 1.5px solid rgba(94, 177, 188, 0.45);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    transition: color .15s, background .15s, border-color .15s, gap .15s;
}
.promotion-see-all:hover {
    color: #fff;
    background: var(--cyan);
    border-color: var(--cyan);
    gap: 10px;
}

.promotionSwiper { overflow: hidden !important; padding: 8px 4px 16px; }
.promotionSwiper .swiper-slide { height: auto; box-sizing: border-box; }
.promotionSwiper .swiper-slide > .promo-card { height: 100%; }

/* Promotion card — ticket / ribbon style */
.promo-card {
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--white);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(94, 177, 188, 0.2);
    box-shadow: 0 4px 18px rgba(94, 177, 188, 0.1);
    transition: transform .25s, box-shadow .25s, border-color .25s;
    height: 100%;
}
.promo-card:hover {
    transform: translateY(-5px);
    border-color: var(--cyan);
    box-shadow: 0 10px 28px rgba(94, 177, 188, 0.22);
}
.promo-ribbon {
    position: absolute;
    top: 14px; left: -28px;
    z-index: 3;
    width: 110px;
    transform: rotate(-45deg);
    background: var(--cyan);
    color: var(--white);
    text-align: center;
    padding: 4px 0;
    font-family: 'FCLamoon-Bold', sans-serif;
    font-size: 10px;
    letter-spacing: 0.1em;
    box-shadow: 0 2px 6px rgba(94, 177, 188, 0.35);
}
body.lang-th .promo-ribbon { font-family: 'FCLamoon-Bold', sans-serif; letter-spacing: 0; }
.promo-card-img {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--gray-bg);
}
.promo-card-img::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(transparent, rgba(0,0,0,0.25));
    pointer-events: none;
}
.promo-card-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .35s;
}
.promo-card:hover .promo-card-img img { transform: scale(1.06); }
.promo-card-img-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-gray); font-size: 2rem;
}
.promo-badge-tag {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(153, 243, 255, 0.92);
    border: 1px solid rgba(94, 177, 188, 0.45);
    color: #3d8f98;
    border-radius: 99px;
    font-family: 'FCLamoon-Bold', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(94, 177, 188, 0.3);
}
.promo-badge-tag::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
    transform: translateX(-150%);
    animation: bsHotShimmer 4s 1.5s ease-in-out infinite;
}
.promo-badge-tag-dot,
.promo-badge-tag-text {
    position: relative;
    z-index: 1;
}
.promo-badge-tag-dot {
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 5px rgba(94, 177, 188, 0.85);
    animation: bsHotPulse 1.6s ease-in-out infinite;
}
.promo-card-body {
    padding: 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.promo-cat {
    display: inline-block;
    padding: 2px 10px;
    background: rgba(153, 243, 255, 0.45);
    border-radius: 4px;
    font-size: 10px;
    color: var(--cyan);
    font-family: 'FCLamoon-Bold', sans-serif;
    margin-bottom: 6px;
}
body.lang-th .promo-cat { font-family: 'FCLamoon-Bold', sans-serif; }
.promo-name {
    font-family: 'FCLamoon-Bold', sans-serif;
    font-size: 13px; font-weight: 700;
    color: var(--text-dark);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 4px;
}
body.lang-th .promo-name { font-family: 'FCLamoon-Bold', sans-serif; }
.promo-artist {
    font-size: 11px;
    color: var(--text-gray);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 8px;
}
.promo-product-name {
    font-size: 11px;
    color: var(--text-gray);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 4px;
}
.promo-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 10px;
    margin-top: auto;
    border-top: 1px dashed #eee;
}
.promo-price {
    font-family: 'FCLamoon-Bold', sans-serif;
    font-size: 35px; font-weight: 700;
    color: var(--cyan);
}
body.lang-th .promo-price { font-family: 'FCLamoon-Bold', sans-serif; }
.promo-shop-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 10px;
    background: var(--cyan);
    color: var(--white);
    border-radius: 50px;
    font-family: 'FCLamoon-Bold', sans-serif;
    font-size: 15px;
    white-space: nowrap;
    transition: background .2s;
}
body.lang-th .promo-shop-btn { font-family: 'FCLamoon-Bold', sans-serif; }
.promo-card:hover .promo-shop-btn { background: #4a9ea8; }

/* Product listing — badge row + search */
.products-list-grid > [class*="col"] > .promo-card { width: 100%; }
.plist-card-badges {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: calc(100% - 48px);
}
.plist-card-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-family: 'FCLamoon-Bold', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid transparent;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
body.lang-th .plist-card-badge { font-family: 'FCLamoon-Bold', sans-serif; letter-spacing: 0; font-size: 10px; }
.plist-card-badge--preorder {
    background: rgba(236, 112, 99, 0.92);
    border-color: rgba(192, 57, 43, 0.35);
    color: #fff;
}
.plist-card-badge--new {
    background: rgba(141, 194, 91, 0.92);
    border-color: rgba(106, 153, 62, 0.4);
    color: #fff;
}
.plist-card-badge--bestseller {
    background: rgba(253, 215, 65, 0.95);
    border-color: rgba(184, 134, 11, 0.45);
    color: #7a5a00;
}
.plist-card-badge--promotion {
    background: rgba(153, 243, 255, 0.92);
    border-color: rgba(94, 177, 188, 0.45);
    color: #3d8f98;
}
.plist-card-badge--event {
    background: rgba(196, 181, 253, 0.92);
    border-color: rgba(124, 58, 237, 0.35);
    color: #5b21b6;
}
.plist-card-badge--magazine {
    background: rgba(254, 205, 211, 0.92);
    border-color: rgba(225, 29, 72, 0.35);
    color: #be123c;
}
.products-search-form .products-search-input {
    border-radius: 999px 0 0 999px;
    border: 1.5px solid rgba(94, 177, 188, 0.35);
    padding-left: 16px;
}
.products-search-form .products-search-input:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 2px rgba(94, 177, 188, 0.15);
}
.products-search-form .products-search-btn {
    border-radius: 0 999px 999px 0;
    padding: 0 16px;
}

.promotion-swiper-pagination { text-align: center; }
.promotion-swiper-pagination .swiper-pagination-bullet {
    width: 8px; height: 8px;
    background: rgba(94, 177, 188, 0.25); opacity: 1;
    border-radius: 50%;
    margin: 0 4px;
    transition: all .3s;
}
.promotion-swiper-pagination .swiper-pagination-bullet-active {
    background: var(--cyan);
    width: 24px;
    border-radius: 4px;
}

/* ── Event Section (Best Seller layout, purple theme) ───────── */
.event-section {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.24) 0%, var(--white) 55%, rgba(124, 58, 237, 0.08) 100%);
    position: relative;
    overflow: hidden;
}
.event-section::after {
    content: '✦';
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'FCLamoon-Bold', sans-serif;
    font-size: clamp(120px, 18vw, 220px);
    font-weight: 700;
    color: rgba(124, 58, 237, 0.07);
    pointer-events: none;
    line-height: 1;
}
.event-section .container {
    position: relative;
    z-index: 1;
}
.event-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: #c4b5fd;
    color: #4c1d95;
    border-radius: 6px;
    font-family: 'FCLamoon-Bold', sans-serif;
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow:
        0 2px 4px rgba(124, 58, 237, 0.22),
        0 6px 14px rgba(167, 139, 250, 0.55),
        0 12px 24px rgba(124, 58, 237, 0.22);
}
body.lang-th .event-label { font-family: 'FCLamoon-Bold', sans-serif; text-transform: none; }
.event-title {
    color: var(--text-dark) !important;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.55),
        0 3px 8px rgba(124, 58, 237, 0.42),
        0 6px 18px rgba(0, 0, 0, 0.14);
}
body.lang-th .event-title { font-family: 'FCLamoon-Bold', sans-serif; }
.event-subtitle {
    color: var(--text-gray);
    font-size: 19px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 4px 14px rgba(0, 0, 0, 0.1);
}
.event-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid #e8e8e8;
    background: var(--white);
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 19px;
    transition: all .2s;
}
.event-nav-btn:hover { border-color: #c4b5fd; color: #6d28d9; }
.event-nav-btn--next {
    background: #8b5cf6;
    border-color: #8b5cf6;
    color: var(--white);
}
.event-nav-btn--next:hover { background: #7c3aed; border-color: #7c3aed; }
.event-see-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6d28d9;
    text-decoration: none;
    font-size: 19px;
    white-space: nowrap;
    padding: 7px 16px;
    border: 1.5px solid rgba(124, 58, 237, 0.45);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    transition: color .15s, background .15s, border-color .15s, gap .15s;
}
.event-see-all:hover {
    color: #fff;
    background: #8b5cf6;
    border-color: #8b5cf6;
    gap: 10px;
}
.eventSwiper { overflow: hidden !important; padding: 8px 4px 16px; }
.eventSwiper .swiper-slide { height: auto; box-sizing: border-box; }
.eventSwiper .swiper-slide > .bs-card { height: 100%; }
.event-section .bs-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.12);
}
.event-section .bs-card:hover .bs-card-img img { transform: scale(1.04); }
.event-section .event-card-tag {
    background: rgba(196, 181, 253, 0.92);
    border-color: rgba(124, 58, 237, 0.35);
    color: #5b21b6;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
}
.event-section .event-card-tag .bs-hot-tag-dot {
    background: #7c3aed;
    box-shadow: 0 0 5px rgba(124, 58, 237, 0.8);
}
.event-section .bs-price { color: #6d28d9; }
body.lang-th .event-section .bs-price { font-family: 'FCLamoon-Bold', sans-serif; }
.event-view-link {
    color: #7c3aed;
}
.event-section .bs-card:hover .event-view-link { color: #5b21b6; }
.event-view-link i { font-size: 0.85em; opacity: 0.9; }
.event-swiper-pagination { text-align: center; }
.event-swiper-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: rgba(124, 58, 237, 0.25);
    opacity: 1;
    border-radius: 50%;
    margin: 0 4px;
    transition: all .3s;
    display: inline-block;
}
.event-swiper-pagination .swiper-pagination-bullet-active {
    background: #8b5cf6;
    width: 24px;
    border-radius: 4px;
}

/* ── Magazine Section (Promotion layout, rose theme) ────────── */
.magazine-section {
    background: linear-gradient(135deg, rgba(251, 113, 133, 0.22) 0%, var(--white) 55%, rgba(225, 29, 72, 0.08) 100%);
    position: relative;
    overflow: hidden;
}
.magazine-section::after {
    content: '◈';
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'FCLamoon-Bold', sans-serif;
    font-size: clamp(120px, 18vw, 220px);
    font-weight: 700;
    color: rgba(225, 29, 72, 0.06);
    pointer-events: none;
    line-height: 1;
}
.magazine-section .container {
    position: relative;
    z-index: 1;
}
.magazine-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(254, 205, 211, 0.72);
    border: 1px solid rgba(225, 29, 72, 0.28);
    color: #be123c;
    border-radius: 50px;
    font-family: 'FCLamoon-Bold', sans-serif;
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow:
        0 2px 4px rgba(225, 29, 72, 0.18),
        0 6px 14px rgba(251, 113, 133, 0.45),
        0 12px 24px rgba(225, 29, 72, 0.2);
}
body.lang-th .magazine-label { font-family: 'FCLamoon-Bold', sans-serif; text-transform: none; }
.magazine-title {
    color: var(--text-dark) !important;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.55),
        0 3px 8px rgba(225, 29, 72, 0.38),
        0 6px 18px rgba(0, 0, 0, 0.14);
}
body.lang-th .magazine-title { font-family: 'FCLamoon-Bold', sans-serif; }
.magazine-subtitle {
    color: var(--text-gray);
    font-size: 19px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 4px 14px rgba(0, 0, 0, 0.1);
}
.magazine-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid rgba(225, 29, 72, 0.32);
    background: var(--white);
    color: #e11d48;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 19px;
    transition: all .2s;
}
.magazine-nav-btn:hover { background: rgba(254, 205, 211, 0.45); }
.magazine-nav-btn--next {
    background: #f43f5e;
    border-color: #f43f5e;
    color: var(--white);
}
.magazine-nav-btn--next:hover { background: #e11d48; border-color: #e11d48; }
.magazine-see-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #e11d48;
    text-decoration: none;
    font-size: 19px;
    white-space: nowrap;
    padding: 7px 16px;
    border: 1.5px solid rgba(225, 29, 72, 0.45);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    transition: color .15s, background .15s, border-color .15s, gap .15s;
}
.magazine-see-all:hover {
    color: #fff;
    background: #f43f5e;
    border-color: #f43f5e;
    gap: 10px;
}
.magazine-section .magazineSwiper { overflow: hidden !important; padding: 8px 4px 16px; }
.magazineSwiper .swiper-slide { height: auto; box-sizing: border-box; }
.magazineSwiper .swiper-slide > .promo-card { height: 100%; }
.magazine-section .promo-card {
    border-color: rgba(225, 29, 72, 0.18);
    box-shadow: 0 4px 18px rgba(225, 29, 72, 0.1);
}
.magazine-section .promo-card:hover {
    transform: translateY(-3px);
    border-color: #f43f5e;
    box-shadow: 0 6px 16px rgba(225, 29, 72, 0.12);
}
.magazine-section .promo-card:hover .promo-card-img img { transform: scale(1.04); }
.magazine-section .magazine-card-tag {
    background: rgba(254, 205, 211, 0.92);
    border-color: rgba(225, 29, 72, 0.35);
    color: #be123c;
    box-shadow: 0 2px 8px rgba(225, 29, 72, 0.25);
}
.magazine-section .magazine-card-tag .promo-badge-tag-dot {
    background: #e11d48;
    box-shadow: 0 0 5px rgba(225, 29, 72, 0.85);
}
.magazine-section .promo-price { color: #e11d48; }
body.lang-th .magazine-section .promo-price { font-family: 'FCLamoon-Bold', sans-serif; }
.magazine-view-link {
    background: rgba(254, 205, 211, 0.28);
    color: #be123c;
    box-shadow: inset 0 0 0 1.5px rgba(225, 29, 72, 0.42);
}
.magazine-section .promo-card:hover .magazine-view-link {
    background: #f43f5e;
    box-shadow: none;
    color: #fff;
}
.magazine-swiper-pagination { text-align: center; }
.magazine-swiper-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: rgba(225, 29, 72, 0.28);
    opacity: 1;
    border-radius: 50%;
    margin: 0 4px;
    transition: all .3s;
    display: inline-block;
}
.magazine-swiper-pagination .swiper-pagination-bullet-active {
    background: #f43f5e;
    width: 24px;
    border-radius: 4px;
}

/* Home — smooth autoplay carousels */
#homeBannerCarousel.carousel-fade .carousel-item {
    transition: opacity 0.85s ease-in-out;
}
.preorderSwiper .swiper-wrapper,
.bestsellerSwiper .swiper-wrapper,
.promotionSwiper .swiper-wrapper,
.eventSwiper .swiper-wrapper,
.magazineSwiper .swiper-wrapper {
    transition-timing-function: cubic-bezier(0.45, 0.05, 0.25, 1);
}

/* ── Pagination ────────────────────────────────────────────── */
.pagination .page-link {
    border-radius: 50% !important;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 2px; border: 1px solid #dee2e6;
    color: var(--text-dark); font-size: 19px;
    transition: all .2s;
}
.pagination .page-item.active .page-link {
    background: var(--primary); border-color: var(--primary); color: var(--white);
}
.pagination .page-link:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }

/* ── Forms ─────────────────────────────────────────────────── */
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(141,194,91,.2); }
.form-label { font-family: 'FCLamoon-Bold', sans-serif; font-size: 19px; }
body.lang-th .form-label { font-family: 'FCLamoon-Regular', sans-serif; }

/* ── Auth Pages ────────────────────────────────────────────── */
.auth-card {
    max-width: 440px; margin: 60px auto;
    border-radius: 20px; padding: 40px;
    box-shadow: 0 4px 30px rgba(0,0,0,.08); background: var(--white);
    font-family: 'FCLamoon-Regular', sans-serif;
    font-size: 20px;
    line-height: 1.5;
}
.auth-card .auth-text {
    font-family: 'FCLamoon-Regular', sans-serif;
    font-size: 20px;
    line-height: 1.5;
}
.auth-card p,
.auth-card a,
.auth-card span,
.auth-card label,
.auth-card button,
.auth-card .btn-primary-custom,
.auth-card .form-control,
.auth-card .alert {
    font-family: 'FCLamoon-Regular', sans-serif;
    font-size: 20px;
}
.auth-card .form-label {
    font-family: 'FCLamoon-Regular', sans-serif;
    font-size: 20px;
    color: var(--text-dark);
}
.auth-card .form-control {
    font-size: 20px;
    color: var(--text-dark);
    padding: 10px 14px;
    min-height: 48px;
}
.auth-card .form-control::placeholder {
    font-family: 'FCLamoon-Regular', sans-serif;
    font-size: 20px;
    color: #767676;
    opacity: 1;
}
.auth-card .color-gray {
    color: var(--text-dark);
}
.auth-card a.color-primary {
    font-family: 'FCLamoon-Regular', sans-serif;
    font-size: 20px;
    color: var(--primary-dark);
}

.auth-card .turnstile-wrap {
    width: 100%;
}
.auth-card .turnstile-wrap .cf-turnstile {
    width: 100%;
}
.auth-card .turnstile-wrap iframe {
    width: 100% !important;
}

.auth-social-login {
    display: flex; flex-direction: column; gap: 10px;
}
.btn-auth-social {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 12px 16px; border-radius: 12px;
    text-decoration: none; border: 1px solid #e0e0e0;
    background: var(--white); color: var(--text-dark);
    font-family: 'FCLamoon-Regular', sans-serif;
    font-size: 20px;
    transition: background .15s, border-color .15s;
}
.btn-auth-social:hover { background: #f8f9fa; color: var(--text-dark); }
.btn-auth-google {
    background: #fff;
    border: 1px solid #dadce0;
    color: #3c4043;
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08);
}
.btn-auth-google .auth-google-logo {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: block;
}
.btn-auth-google:hover {
    background: #f8f9fa;
    border-color: #4285F4;
    color: #202124;
    box-shadow: 0 1px 3px rgba(66, 133, 244, 0.25);
}
.btn-auth-line {
    background: #06C755; border-color: #06C755; color: #fff;
}
.btn-auth-line:hover { background: #05b34c; border-color: #05b34c; color: #fff; }

.auth-divider {
    display: flex; align-items: center; gap: 12px;
}
.auth-divider::before,
.auth-divider::after {
    content: ''; flex: 1; height: 1px; background: #e8e8e8;
}
.auth-divider span { color: var(--gray); white-space: nowrap; font-size: 20px; }

/* ── Admin sidebar ─────────────────────────────────────────── */
.admin-sidebar {
    width: 240px; min-height: 100vh;
    background: var(--text-dark); color: var(--white);
    position: fixed; left: 0; top: 0; z-index: 200;
    overflow-y: auto;
}
.admin-sidebar .sidebar-logo {
    padding: 20px 16px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.admin-sidebar .nav-link {
    color: rgba(255,255,255,.75); padding: 10px 20px;
    display: flex; align-items: center; gap: 10px;
    transition: background .15s;
}
.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link.active { background: rgba(141,194,91,.3); color: var(--white); }
.admin-sidebar .nav-link i { width: 18px; text-align: center; }

.admin-main { margin-left: 240px; padding: 24px; min-height: 100vh; background: #f5f7fa; }
.admin-topbar {
    background: var(--white); border-radius: 12px;
    padding: 12px 20px; margin-bottom: 24px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    display: flex; align-items: center; justify-content: space-between;
}

/* ── Stat cards (admin dashboard) ─────────────────────────── */
.stat-card {
    background: var(--white); border-radius: 16px;
    padding: 24px; box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.stat-card .stat-icon {
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
}

/* ── Footer ────────────────────────────────────────────────── */
.site-footer { background: #f2f8f4; padding: 0 0 0; }
.site-footer a { color: var(--text-dark); transition: color .15s; }
.site-footer a:hover { color: var(--primary); }

/* Social media strip */
.footer-social { background: #fff; padding: 50px 0 80px; border-top: 1px solid #eee; }
.social-col { flex: 1; padding: 16px; text-align: center; }
.social-col-divider { border-right: 1px solid #e0e0e0; }
.social-icon-circle {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 28px; margin: 0 auto;
    transition: background .2s, transform .2s;
}
.social-col a:hover .social-icon-circle { background: var(--primary-dark); transform: translateY(-3px); }

/* Feature banner */
.footer-feature-banner {
    background: #3A3A3A; border-radius: 20px;
    display: flex; align-items: center;
    padding: 0 40px;
    margin-top: -55px;
    position: relative;
    z-index: 2;
}
.footer-feature-item {
    flex: 1; display: flex; align-items: center; gap: 20px;
    color: #fff; padding: 32px 24px;
}
.footer-feature-icon { opacity: .85; flex-shrink: 0; }
.footer-feature-divider { width: 1px; height: 60px; background: rgba(255,255,255,.2); flex-shrink: 0; }

/* Copyright bar */
.footer-copyright {
    background: #3A3A3A; color: #aaa;
    padding: 16px 0;
}
.footer-copyright a { color: #aaa; text-decoration: none; transition: color .15s; }
.footer-copyright a:hover { color: #fff; }

/* ── Language switcher ─────────────────────────────────────── */
.lang-btn {
    border-radius: 20px; background: var(--primary-dark);
    color: var(--white); border: none; padding: 6px 16px;
    cursor: pointer; font-size: 19px; display: inline-flex;
    align-items: center; gap: 6px;
}
.lang-dropdown {
    position: absolute; bottom: 110%; right: 0;
    background: var(--white); border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12); overflow: hidden;
    min-width: 130px; display: none;
}
.lang-dropdown.show { display: block; }
.lang-option {
    padding: 10px 16px; cursor: pointer; display: flex;
    align-items: center; gap: 8px; transition: background .15s;
}
.lang-option:hover { background: var(--primary-light); }

/* ── Favorites page cards ───────────────────────────────────── */
.favorites-page .fav-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--white);
    border: 1px solid #e8ece9;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,.05);
    transition: box-shadow .25s, transform .25s;
}
.favorites-page .fav-card:hover {
    box-shadow: 0 8px 24px rgba(141,194,91,.15);
    transform: translateY(-2px);
}
.fav-card-img {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--gray-bg);
    overflow: hidden;
}
.fav-card-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .3s;
}
.fav-card:hover .fav-card-img img { transform: scale(1.04); }
.fav-card-img-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-gray); font-size: 2rem;
}
.fav-card-badge {
    position: absolute; top: 10px; left: 10px;
    background: var(--cyan); color: var(--white);
    font-size: 10px; padding: 3px 10px; border-radius: 20px;
}
.fav-card-body { padding: 16px; display: flex; flex-direction: column; flex: 1; }
.fav-card-head {
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 12px;
    flex: 1;
    min-height: 0;
}
.fav-card-head > .flex-grow-1 {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    min-width: 0;
}
.fav-card-head .plist-lines { margin-bottom: 0; gap: 2px; }
.fav-card-head .plist-line:not(.plist-sku-code) { font-size: 19px; }
.fav-card-head .plist-ico { font-size: 19px; }
.fav-card-remove {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #fff5f5;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.fav-card-remove.active { background: #ffe8e8; }
.fav-card-footer {
    margin-top: auto;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding-top: 12px;
    border-top: 1px dashed #e8ece9;
}
.fav-card-price { color: var(--primary); font-size: 24px; }
.fav-card-view {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--text-gray); font-size: 12px;
    transition: color .2s, gap .2s;
}
.fav-card-view:hover { color: var(--primary); gap: 8px; }

.img-cover { width: 100%; height: 100%; object-fit: cover; }
.rounded-pill-custom { border-radius: 50px; }
.pointer { cursor: pointer; }
.bg-light-green { background-color: var(--primary-light); }
.bg-multi-color {
    background: linear-gradient(to right, rgba(150,243,255,.1), #99F3FF 50%, rgba(150,243,255,.05));
}
.heart-btn { background: none; border: none; cursor: pointer; font-size: 27px; color: #ccc; transition: color .2s; }
.heart-btn.active, .heart-btn:hover { color: #e74c3c; }

/* ── Product Detail Page ─────────────────────────────────────── */
.product-detail-page {
    background: linear-gradient(180deg, var(--primary-light) 0%, var(--white) 280px);
    position: relative;
    overflow: hidden;
}
.product-detail-page::before {
    content: '';
    position: absolute;
    left: -8%;
    top: 0;
    width: 45%;
    height: 420px;
    background: rgba(255,255,255,0.55);
    border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
    pointer-events: none;
}
.product-detail-page .container { position: relative; z-index: 1; }

/* Detail page typography — body 20px, headings slightly larger */
.product-detail-page { font-size: 20px; }
.product-detail-page .p3-th,
.product-detail-page .p3-en,
.product-detail-page .p3-th-bold,
.product-detail-page .p3-en-bold { font-size: 20px; }
.product-detail-page .p2-th,
.product-detail-page .p2-en,
.product-detail-page .pd-desc-body,
.product-detail-page .pd-detail-text { font-size: 20px; }
.product-detail-page .p2-th-bold,
.product-detail-page .p2-en-bold,
.product-detail-page .pd-buy-type { font-size: 24px; }
.product-detail-page .pd-title,
.product-detail-page .pd-title.h2-th-bold,
.product-detail-page .pd-title.h2-en-bold { font-size: 36px; }
.product-detail-page .pd-buy-price,
.product-detail-page .pd-buy-price-wrap { font-size: 32px; }
.product-detail-page .pd-desc-label,
.product-detail-page .pd-desc-label.p3-th-bold,
.product-detail-page .pd-desc-label.p3-en-bold { font-size: 24px; }
.product-detail-page .pd-detail-heading,
.product-detail-page .pd-detail-heading.h3-th-bold,
.product-detail-page .pd-detail-heading.h3-en-bold { font-size: 28px; }
.product-detail-page .pd-option-label,
.product-detail-page .pd-option-label.p3-th-bold,
.product-detail-page .pd-option-label.p3-en-bold { font-size: 22px; }
.product-detail-page .pd-album { font-size: 20px; }
.product-detail-page .pd-breadcrumb .breadcrumb { font-size: 20px; }

.pd-breadcrumb .breadcrumb-item a { color: var(--text-gray); transition: color .15s; }
.pd-breadcrumb .breadcrumb-item a:hover { color: var(--primary); }
.pd-breadcrumb .breadcrumb-item.active { color: var(--text-dark); }

.pd-hero-card {
    background: var(--white);
    border-radius: 22px;
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.07);
}
@media (min-width: 992px) {
    .pd-hero-card { padding: 32px 36px; }
}

.pd-gallery-main {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--gray-bg);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.pd-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 16px;
    transition: transform .35s;
}
.pd-preorder-badge {
    position: absolute;
    top: 14px; left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: rgba(153, 243, 255, 0.92);
    border: 1px solid rgba(94, 177, 188, 0.4);
    color: var(--cyan);
    border-radius: 50px;
    font-family: 'FCLamoon-Bold', sans-serif;
    font-size: 20px;
    box-shadow: 0 2px 8px rgba(94, 177, 188, 0.25);
}
body.lang-th .pd-preorder-badge { font-family: 'FCLamoon-Bold', sans-serif; }

.pd-gallery-btn {
    border: 1.5px solid var(--cyan);
    color: var(--cyan);
    background: var(--white);
    border-radius: 14px;
    padding: 10px 16px;
    font-size: 20px;
    font-family: 'FCLamoon-Bold', sans-serif;
    cursor: pointer;
    transition: all .2s;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
body.lang-th .pd-gallery-btn { font-family: 'FCLamoon-Bold', sans-serif; }
.pd-variant-btn-name { line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pd-variant-btn-code {
    font-size: 18px;
    font-family: 'FCLamoon-Regular', sans-serif;
    opacity: 0.75;
    letter-spacing: 0.03em;
}
body.lang-th .pd-variant-btn-code { font-family: 'FCLamoon-Regular', sans-serif; }
.pd-gallery-btn.active,
.pd-gallery-btn:hover {
    background: var(--cyan);
    border-color: var(--cyan);
    color: var(--white);
}
.pd-gallery-btn.active .pd-variant-btn-code,
.pd-gallery-btn:hover .pd-variant-btn-code { opacity: 0.9; color: inherit; }

.pd-thumb {
    width: 72px; height: 72px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid #eee;
    flex-shrink: 0;
    transition: border-color .2s, transform .2s;
}
.pd-thumb.active { border-color: var(--cyan); }
.pd-thumb:hover { transform: translateY(-2px); }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }

.pd-info-panel { padding: 4px 0; }
.pd-top-tags { align-items: center; }
.pd-detail-badge {
    font-size: 20px;
    padding: 5px 12px;
    box-shadow: none;
}
body.lang-th .pd-detail-badge { font-size: 20px; }
.pd-tag {
    display: inline-block;
    background: rgba(153, 243, 255, 0.45);
    border: 1px solid rgba(94, 177, 188, 0.35);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 20px;
    color: var(--cyan);
    font-family: 'FCLamoon-Regular', sans-serif;
}
body.lang-th .pd-tag { font-family: 'FCLamoon-Regular', sans-serif; }

.pd-title { color: var(--primary) !important; line-height: 1.2; }
.pd-album { color: var(--text-gray); }

.pd-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--gray-bg);
    border-radius: 50px;
    font-size: 20px;
    color: var(--text-gray);
}
.pd-meta-chip i { color: var(--primary); font-size: 16px; }

.pd-info-list {
    background: rgba(218, 240, 211, 0.35);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pd-info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    color: var(--text-gray);
}
.pd-info-item i { color: var(--primary); width: 16px; text-align: center; }
.pd-info-item strong { color: var(--text-dark); margin-left: auto; }

.pd-buy-card {
    background: var(--white);
    border: 2px solid #eee;
    border-radius: 16px;
    padding: 16px 18px;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.pd-buy-card[data-type] { cursor: pointer; }
.pd-buy-card--active {
    border-color: var(--cyan);
    background: rgba(153, 243, 255, 0.28);
    box-shadow: 0 4px 16px rgba(94, 177, 188, 0.2);
}
.pd-buy-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
    overflow: hidden;
}
.pd-buy-code {
    font-size: 20px;
    color: var(--text-gray);
    margin-top: 4px;
    letter-spacing: 0.02em;
}
.pd-buy-price { color: var(--primary); white-space: nowrap; }
.pd-stock-badge {
    display: inline-block;
    font-size: 20px;
    padding: 5px 12px;
    border-radius: 50px;
    margin-bottom: 12px;
}
.pd-stock-badge--in {
    background: rgba(141, 194, 91, 0.15);
    color: #5a8a38;
}
.pd-stock-badge--preorder {
    background: rgba(153, 243, 255, 0.45);
    color: var(--cyan);
}
.pd-out-of-stock { color: var(--red-badge); font-size: 20px; margin-bottom: 12px; }

.pd-buy-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.pd-qty-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-gray);
    font-size: 20px;
    flex-shrink: 0;
}
.pd-qty-input {
    width: 72px !important;
    text-align: center;
    border-radius: 10px !important;
    border-color: #ddd !important;
    font-size: 20px;
}
.pd-cart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--yellow);
    color: var(--text-dark);
    border: none;
    border-radius: 50px;
    font-size: 20px;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(253, 215, 65, 0.4);
    transition: background .2s ease, box-shadow .2s ease;
    flex-shrink: 0;
}
.pd-cart-btn i { font-size: 18px; opacity: 0.85; }
.pd-cart-btn span { display: inline-block; }
.pd-cart-btn:hover:not(:disabled) {
    background: #f5cc3a;
    box-shadow: 0 4px 12px rgba(253, 215, 65, 0.5);
}
.pd-cart-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.pd-fav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--white);
    border: 1.5px solid #eee;
    border-radius: 50px;
    color: var(--text-gray);
    font-size: 20px;
    cursor: pointer;
    transition: all .2s;
}
.pd-fav-btn i { font-size: 21px; }
.pd-fav-btn:hover,
.pd-fav-btn.active {
    border-color: var(--red-badge);
    color: var(--red-badge);
    background: rgba(236, 112, 99, 0.06);
}

.pd-desc {
    background: var(--gray-bg);
    border-radius: 14px;
    padding: 18px 20px;
}
.pd-desc-label {
    color: var(--text-dark);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--primary-light);
}
.pd-desc-body { color: var(--text-dark); line-height: 1.7; }

.pd-detail-wrap {
    background: var(--white);
    border-radius: 22px;
    padding: 28px 24px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.06);
}
@media (min-width: 992px) {
    .pd-detail-wrap { padding: 36px 40px; }
}
.pd-detail-heading {
    color: var(--primary);
    padding-left: 14px;
    border-left: 4px solid var(--primary);
}
.pd-detail-img img {
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.pd-detail-text { line-height: 1.75; color: var(--text-dark); }

.pd-vis-dates { font-size: 20px; line-height: 1.4; }

.pd-toast {
    background: var(--primary) !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 20px rgba(141, 194, 91, 0.35);
}

.pd-options { margin-top: 12px; }
.pd-option-label { color: var(--text-dark); }
.pd-option-choice {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1.5px solid #dee2e6;
    border-radius: 999px;
    font-size: 20px;
    cursor: pointer;
    background: #fff;
    transition: border-color .15s, background .15s;
}
.pd-option-choice input { margin: 0; }
.pd-option-choice:has(input:checked) {
    border-color: var(--cyan);
    background: rgba(153, 243, 255, 0.35);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .admin-sidebar { display: none; }
    .admin-main { margin-left: 0; }
    .product-card .product-img-wrap { aspect-ratio: 4/3; }
    .auth-card { margin: 20px; padding: 24px; }
    .pd-hero-card { padding: 18px; border-radius: 16px; }
    .pd-buy-card-head { flex-direction: column; }
    .product-detail-page .pd-buy-price,
    .product-detail-page .pd-buy-price-wrap { font-size: 28px; }
    .product-detail-page .pd-title { font-size: 30px; }
    .pd-buy-actions { flex-direction: column; align-items: stretch; }
    .pd-cart-btn { width: 100%; justify-content: center; }
}

/* ── Cart & Checkout (21px body text — match site default) ───────────────── */
.cart-page,
.checkout-page {
    font-family: 'FCLamoon-Regular', sans-serif;
    font-size: 21px;
    line-height: 1.5;
    color: var(--text-dark);
}

.cart-page .cart-text,
.checkout-page .cart-text {
    font-family: 'FCLamoon-Regular', sans-serif;
    font-size: 21px;
    line-height: 1.5;
}

.cart-page .cart-text-bold,
.checkout-page .cart-text-bold {
    font-family: 'FCLamoon-Bold', sans-serif;
    font-size: 21px;
    line-height: 1.5;
}

.cart-page .cart-meta {
    font-family: 'FCLamoon-Regular', sans-serif;
    font-size: 19px;
    line-height: 1.45;
    color: var(--text-dark);
}

.cart-page .color-gray,
.checkout-page .color-gray {
    color: #5a5a5a;
}

.cart-page .cart-item-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.cart-page .cart-qty-input {
    width: 80px;
    text-align: center;
    font-family: 'FCLamoon-Regular', sans-serif;
    font-size: 21px;
    color: var(--text-dark);
    padding: 8px 10px;
    min-height: 46px;
}

.cart-page .cart-table {
    font-family: 'FCLamoon-Regular', sans-serif;
    font-size: 21px;
    color: var(--text-dark);
}

.cart-page .cart-table th,
.cart-page .cart-table td {
    vertical-align: middle;
    padding: 16px 14px;
    font-size: 21px;
    line-height: 1.45;
}

.cart-page .cart-table thead th {
    font-family: 'FCLamoon-Bold', sans-serif;
    font-size: 21px;
    white-space: nowrap;
    color: var(--text-dark);
}

.cart-page .cart-table .btn-link {
    font-size: 22px;
    padding: 6px 10px;
}

.cart-page .alert {
    font-size: 21px;
}

.cart-page .btn-primary-custom {
    font-size: 21px;
    padding: 14px 20px;
}

/* ── Chat Support FAB ─────────────────────────────────────────────────────── */
.support-fab {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(20px, env(safe-area-inset-bottom));
    z-index: 1040;
    font-size: 18px;
}

.support-fab-panel .support-fab-text {
    font-family: 'FCLamoon-Regular', sans-serif;
    font-size: 18px;
    line-height: 1.45;
}

.support-fab-panel .support-fab-text-bold {
    font-family: 'FCLamoon-Bold', sans-serif;
    font-size: 18px;
    line-height: 1.45;
}

.support-fab-btn {
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white, #fff);
    box-shadow: 0 4px 20px rgba(141, 194, 91, 0.35);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: transform .2s, box-shadow .2s, background .2s;
}
.support-fab-btn:hover {
    transform: scale(1.05);
    background: var(--yellow);
    color: var(--text-dark);
    box-shadow: 0 6px 24px rgba(253, 215, 65, 0.55);
}
.support-fab-btn-icon--close { display: none; }
.support-fab.is-open .support-fab-btn-icon--chat { display: none; }
.support-fab.is-open .support-fab-btn-icon--close { display: block; }
.support-fab.is-open .support-fab-btn {
    background: var(--primary-dark);
    box-shadow:
        0 4px 16px rgba(141, 194, 91, 0.35),
        0 0 0 3px rgba(94, 177, 188, 0.35),
        0 0 0 6px rgba(253, 215, 65, 0.35);
}
.support-fab.is-open .support-fab-btn:hover {
    background: var(--yellow);
    color: var(--text-dark);
    box-shadow:
        0 6px 24px rgba(253, 215, 65, 0.5),
        0 0 0 3px rgba(94, 177, 188, 0.3),
        0 0 0 6px rgba(253, 215, 65, 0.4);
}

.support-fab-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 12px);
    width: min(320px, calc(100vw - 32px));
    max-height: min(70vh, 480px);
    overflow-x: hidden;
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(94, 177, 188, 0.18), 0 4px 12px rgba(253, 215, 65, 0.15);
    padding: 16px;
    padding-top: 20px;
    border: 1px solid rgba(153, 243, 255, 0.55);
}
.support-fab-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(90deg, var(--primary) 0%, var(--cyan) 50%, var(--yellow) 100%);
}

.support-fab-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 10px;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--primary-light), var(--cyan-light), var(--yellow-light)) 1;
}

.support-fab-panel-head .support-fab-text-bold {
    color: var(--cyan);
}

.support-fab-close {
    border: none;
    background: transparent;
    color: var(--cyan);
    font-size: 18px;
    padding: 4px 8px;
    cursor: pointer;
    line-height: 1;
    opacity: 0.75;
    transition: opacity .15s, color .15s;
}
.support-fab-close:hover {
    opacity: 1;
    color: var(--cyan);
}

.support-fab-hours {
    font-size: 16px;
    color: var(--text-gray);
    margin: 0 0 8px;
}
.support-fab-hours .fa-clock {
    color: var(--yellow-dark);
}

.support-fab-status {
    font-size: 18px;
    margin: 0 0 12px;
    padding: 8px 10px;
    border-radius: 8px;
    border-left: 3px solid transparent;
}
.support-fab-status--open {
    background: rgba(153, 243, 255, 0.35);
    color: var(--cyan);
    border: 1px solid rgba(94, 177, 188, 0.25);
    border-left-color: var(--primary);
}
.support-fab-status--open .fa-circle { font-size: 8px; vertical-align: middle; color: var(--primary); }
.support-fab-status--closed {
    background: var(--yellow-light);
    color: var(--yellow-dark);
    border: 1px solid rgba(253, 215, 65, 0.45);
    border-left-color: var(--yellow);
}
.support-fab-status--closed .fa-circle { font-size: 8px; vertical-align: middle; color: var(--yellow-dark); }

.support-fab-section { margin-bottom: 12px; }
.support-fab-section:last-child { margin-bottom: 0; }

.support-fab-section-title {
    font-size: 18px;
    color: var(--cyan);
    margin-bottom: 8px;
}
.support-fab-section--line .support-fab-section-title {
    color: var(--yellow-dark);
}

.support-fab-link--phone .support-fab-link-icon {
    background: var(--yellow-light);
    color: var(--yellow-dark);
}
.support-fab-link--phone:hover {
    background: rgba(255, 249, 224, 0.9);
    border-color: var(--yellow);
    box-shadow: 0 2px 8px rgba(253, 215, 65, 0.25);
}
.support-fab-link--phone:hover .support-fab-link-value {
    color: var(--yellow-dark);
}

.support-fab-link--email .support-fab-link-icon {
    background: rgba(153, 243, 255, 0.4);
    color: var(--cyan);
}

.support-fab-link--line {
    border-color: rgba(253, 215, 65, 0.4);
}
.support-fab-link--line:hover {
    background: var(--yellow-light);
    border-color: var(--yellow);
    box-shadow: 0 2px 8px rgba(253, 215, 65, 0.28);
}
.support-fab-link--line:hover .support-fab-link-value {
    color: var(--yellow-dark);
}

.support-fab-link-icon--line {
    background: linear-gradient(135deg, var(--cyan) 0%, var(--yellow) 100%);
    color: var(--text-dark);
    font-size: 22px;
}
.support-fab-link--line .support-fab-ext {
    color: var(--yellow-dark);
}

.support-fab-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-dark);
    border: 1px solid rgba(153, 243, 255, 0.55);
    margin-bottom: 8px;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.support-fab-link--email:hover {
    background: rgba(153, 243, 255, 0.28);
    border-color: var(--cyan);
    box-shadow: 0 2px 8px rgba(94, 177, 188, 0.12);
}
.support-fab-link--email:hover .support-fab-link-value {
    color: var(--cyan);
}

.support-fab-link:last-child { margin-bottom: 0; }

.support-fab-link-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(153, 243, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--cyan);
    flex-shrink: 0;
}

.support-fab-link-label {
    display: block;
    font-size: 16px;
    color: var(--text-gray);
}
.support-fab-link-value {
    display: block;
    font-size: 18px;
    font-family: 'FCLamoon-Bold', sans-serif;
    color: var(--text-dark);
    word-break: break-all;
}

.support-fab-ext {
    margin-left: auto;
    font-size: 12px;
    color: var(--cyan);
    opacity: 0.55;
    flex-shrink: 0;
}
.support-fab-link--phone:hover .support-fab-ext,
.support-fab-link--line:hover .support-fab-ext,
.support-fab-link--email:hover .support-fab-ext {
    opacity: 1;
}

.support-fab-note {
    font-size: 18px;
    color: var(--text-gray);
    margin: 0;
}

@media (max-width: 768px) {
    .support-fab-btn {
        width: 52px;
        height: 52px;
        font-size: 20px;
    }
    .support-fab-panel {
        width: min(300px, calc(100vw - 24px));
        right: 0;
    }
}