/* ============================================================
   TANYARAT — Organic Luxury Design System
   โหลดต่อจาก theme.css เพื่อยกระดับทุกหน้าเป็น modern web
   โทน: Espresso × Gold × Cream (ออร์แกนิคพรีเมียม)
   ============================================================ */

:root {
    /* Brand palette */
    --ty-espresso: #35261a;
    --ty-espresso-2: #4a3728;
    --ty-cocoa: #6b5138;
    --ty-gold: #c09044;
    --ty-gold-2: #dcb26a;
    --ty-gold-soft: #f0dcb4;
    --ty-cream: #faf6ef;
    --ty-cream-2: #f3ebdd;
    --ty-sand: #e9decb;
    --ty-sage: #6e7f63;
    --ty-ink: #2b2118;
    --ty-muted: #8d7c6a;
    --ty-white: #ffffff;
    --ty-danger: #c0564a;
    --ty-success: #5d8a5e;

    /* Gradients */
    --ty-grad-gold: linear-gradient(135deg, #c09044 0%, #dcb26a 55%, #c09044 100%);
    --ty-grad-hero: radial-gradient(1200px 600px at 85% -10%, rgba(220, 178, 106, .35), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(110, 127, 99, .18), transparent 55%),
        linear-gradient(180deg, #faf6ef 0%, #f3ebdd 100%);

    /* Shape & shadow */
    --ty-radius: 1.25rem;
    --ty-radius-lg: 2rem;
    --ty-shadow-sm: 0 4px 14px rgba(59, 42, 26, .07);
    --ty-shadow: 0 12px 32px rgba(59, 42, 26, .12);
    --ty-shadow-lg: 0 24px 60px rgba(59, 42, 26, .18);
    --ty-shadow-gold: 0 10px 28px rgba(192, 144, 68, .38);

    /* Motion */
    --ty-ease: cubic-bezier(.22, .68, .3, 1);

    /* map เข้าตัวแปรของ theme.css เดิม */
    --primary-color: var(--ty-espresso-2);
    --secondary-color: var(--ty-cream);
    --accent-color: var(--ty-gold);
    --text-color: var(--ty-ink);
    --light-text: var(--ty-muted);
}

/* ---------- Base ---------- */

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'IBM Plex Sans Thai', 'Prompt', sans-serif;
    color: var(--ty-ink);
    background-color: var(--ty-cream);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: 'Prompt', 'IBM Plex Sans Thai', sans-serif;
    color: var(--ty-ink);
    letter-spacing: -.01em;
}

::selection {
    background: var(--ty-gold-soft);
    color: var(--ty-espresso);
}

img {
    max-width: 100%;
}

a {
    color: var(--ty-cocoa);
}

a:hover {
    color: var(--ty-gold);
}

/* ---------- Buttons ---------- */

.btn {
    border-radius: 999px;
    font-weight: 600;
    padding: .625rem 1.5rem;
    transition: transform .25s var(--ty-ease), box-shadow .25s var(--ty-ease),
        background-color .25s, border-color .25s, color .25s;
}

.btn-lg {
    padding: .875rem 2.1rem;
    font-size: 1.05rem;
}

.btn-sm {
    padding: .4rem 1.05rem;
    font-size: .875rem;
}

.btn-primary,
.btn-warning,
.btn-info,
.btn-success {
    background: var(--ty-grad-gold);
    background-size: 160% 160%;
    border: none;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(192, 144, 68, .3);
}

.btn-primary:hover, .btn-primary:focus,
.btn-warning:hover, .btn-warning:focus,
.btn-info:hover, .btn-info:focus,
.btn-success:hover, .btn-success:focus {
    background-position: 100% 0;
    transform: translateY(-2px);
    box-shadow: var(--ty-shadow-gold);
    color: #fff;
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-outline-primary,
.btn-outline-secondary {
    border: 1.5px solid var(--ty-sand);
    color: var(--ty-espresso-2);
    background: rgba(255, 255, 255, .6);
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover {
    background: var(--ty-espresso-2);
    border-color: var(--ty-espresso-2);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--ty-shadow-sm);
}

.btn-dark, .btn-ty-dark {
    background: var(--ty-espresso);
    border: none;
    color: #fff;
}

.btn-dark:hover, .btn-ty-dark:hover {
    background: var(--ty-espresso-2);
    transform: translateY(-2px);
}

/* LINE brand button */
.btn-line-brand {
    background: #06c755;
    border: none;
    color: #fff !important;
    border-radius: 999px;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(6, 199, 85, .35);
}

.btn-line-brand:hover {
    background: #05b34c;
    transform: translateY(-2px);
    color: #fff;
}

/* ---------- Navbar ---------- */

.navbar {
    background: rgba(250, 246, 239, .82) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(59, 42, 26, .06);
    transition: box-shadow .3s, background .3s;
    padding-top: .8rem;
    padding-bottom: .8rem;
}

.navbar.ty-scrolled {
    box-shadow: var(--ty-shadow-sm);
    background: rgba(250, 246, 239, .95) !important;
}

.navbar-brand {
    font-family: 'Prompt', sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--ty-espresso) !important;
    letter-spacing: .06em;
}

.navbar-brand img {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--ty-gold-2);
    box-shadow: 0 0 0 3px rgba(220, 178, 106, .25);
    margin-right: .55rem;
}

.navbar .nav-link {
    font-weight: 500;
    color: var(--ty-cocoa) !important;
    padding: .45rem 1rem !important;
    border-radius: 999px;
    transition: color .2s, background .2s;
}

.navbar .nav-link:hover {
    color: var(--ty-espresso) !important;
    background: rgba(220, 178, 106, .16);
}

.navbar .nav-link.active {
    color: var(--ty-espresso) !important;
    background: rgba(220, 178, 106, .24);
    font-weight: 600;
}

.navbar-toggler {
    border: none;
    padding: .4rem .6rem;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(220, 178, 106, .4);
}

/* กลุ่มปุ่มตะกร้า/บัญชี — tanyarat.js ย้ายออกมานอก collapse ให้เห็นบนมือถือเสมอ */
.ty-nav-actions {
    display: flex !important;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
    margin-right: .25rem;
}

.ty-nav-actions .btn {
    padding: .5rem 1.1rem;
    white-space: nowrap;
}

.ty-cart-btn {
    position: relative;
}

.ty-cart-btn #cart-count,
.ty-cart-btn .cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 21px;
    height: 21px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--ty-danger);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

@media (max-width: 767.98px) {
    .ty-nav-actions .btn {
        padding: .45rem .8rem;
        font-size: .875rem;
    }

    .ty-nav-actions .ty-btn-label {
        display: none;
        /* มือถือโชว์เฉพาะไอคอน ประหยัดที่ */
    }
}

/* ---------- Section scaffolding ---------- */

.ty-section {
    padding: 5rem 0;
}

.ty-section-alt {
    background: var(--ty-white);
}

.ty-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: 'Prompt', sans-serif;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ty-gold);
}

.ty-eyebrow::before,
.ty-eyebrow.ty-eyebrow-center::after {
    content: "";
    width: 2rem;
    height: 2px;
    border-radius: 2px;
    background: var(--ty-grad-gold);
}

.ty-title {
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    font-weight: 700;
    line-height: 1.25;
    margin: .75rem 0 1rem;
}

.ty-title .ty-accent {
    background: linear-gradient(120deg, var(--ty-gold) 0%, #a4762e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ty-lead {
    color: var(--ty-muted);
    font-size: 1.05rem;
    line-height: 1.8;
}

/* ---------- Hero ---------- */

.ty-hero {
    position: relative;
    background: var(--ty-grad-hero);
    padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(3rem, 7vw, 5.5rem);
    overflow: hidden;
}

.ty-hero::after {
    /* เส้นโค้งทองจางๆ เพิ่มมิติ */
    content: "";
    position: absolute;
    inset: auto -20% -55% -20%;
    height: 70%;
    background: radial-gradient(closest-side, rgba(220, 178, 106, .16), transparent);
    pointer-events: none;
}

.ty-hero h1 {
    font-size: clamp(2rem, 4.6vw, 3.4rem);
    font-weight: 800;
    line-height: 1.22;
}

.ty-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255, 255, 255, .75);
    border: 1px solid var(--ty-sand);
    color: var(--ty-cocoa);
    font-weight: 600;
    font-size: .85rem;
    padding: .45rem 1.1rem;
    border-radius: 999px;
    box-shadow: var(--ty-shadow-sm);
    backdrop-filter: blur(6px);
}

.ty-hero-badge i {
    color: var(--ty-gold);
}

.ty-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.4rem;
    color: var(--ty-cocoa);
    font-size: .92rem;
    font-weight: 500;
}

.ty-hero-chips i {
    color: var(--ty-sage);
    margin-right: .35rem;
}

/* รูป hero ทรง organic blob */
.ty-hero-visual {
    position: relative;
}

.ty-hero-img {
    width: 100%;
    aspect-ratio: 4 / 4.4;
    object-fit: cover;
    border-radius: 58% 42% 55% 45% / 48% 55% 45% 52%;
    box-shadow: var(--ty-shadow-lg);
    border: 6px solid rgba(255, 255, 255, .85);
    animation: ty-blob 14s ease-in-out infinite alternate;
}

@keyframes ty-blob {
    0% { border-radius: 58% 42% 55% 45% / 48% 55% 45% 52%; }
    50% { border-radius: 46% 54% 44% 56% / 56% 44% 58% 42%; }
    100% { border-radius: 55% 45% 60% 40% / 45% 58% 42% 55%; }
}

.ty-hero-ring {
    position: absolute;
    inset: -7% -7% auto auto;
    width: 45%;
    aspect-ratio: 1;
    border: 2px dashed rgba(192, 144, 68, .5);
    border-radius: 50%;
    animation: ty-spin 40s linear infinite;
    pointer-events: none;
}

@keyframes ty-spin {
    to { transform: rotate(360deg); }
}

.ty-float-card {
    position: absolute;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    border-radius: 1rem;
    box-shadow: var(--ty-shadow);
    padding: .8rem 1.1rem;
    display: flex;
    align-items: center;
    gap: .7rem;
    font-weight: 600;
    font-size: .9rem;
    color: var(--ty-espresso);
    animation: ty-float 6s ease-in-out infinite;
}

.ty-float-card .ty-float-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--ty-grad-gold);
    color: #fff;
    font-size: 1rem;
    flex-shrink: 0;
}

.ty-float-card small {
    display: block;
    color: var(--ty-muted);
    font-weight: 500;
}

@keyframes ty-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ---------- USP strip ---------- */

.ty-usp {
    background: var(--ty-white);
    border: 1px solid var(--ty-sand);
    border-radius: var(--ty-radius-lg);
    box-shadow: var(--ty-shadow-sm);
    padding: 1.6rem 1rem;
}

.ty-usp-item {
    display: flex;
    align-items: center;
    gap: .9rem;
    justify-content: center;
}

.ty-usp-item i {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    color: var(--ty-gold);
    background: rgba(220, 178, 106, .16);
}

.ty-usp-item strong {
    display: block;
    font-family: 'Prompt', sans-serif;
    font-size: .95rem;
}

.ty-usp-item span {
    font-size: .8rem;
    color: var(--ty-muted);
}

/* ---------- Stats band ---------- */

.ty-stats {
    background: var(--ty-espresso);
    border-radius: var(--ty-radius-lg);
    padding: 2.6rem 1.5rem;
    position: relative;
    overflow: hidden;
}

.ty-stats::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(600px 300px at 85% 20%, rgba(220, 178, 106, .25), transparent 60%);
}

.ty-stats h2 {
    font-size: clamp(2.1rem, 4vw, 3rem);
    font-weight: 800;
    background: var(--ty-grad-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: .2rem;
}

.ty-stats p {
    color: rgba(250, 246, 239, .75);
    margin: 0;
}

/* ---------- Product cards ---------- */

.ty-product-card {
    background: var(--ty-white);
    border: 1px solid rgba(59, 42, 26, .06);
    border-radius: var(--ty-radius);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .35s var(--ty-ease), box-shadow .35s var(--ty-ease);
}

.ty-product-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--ty-shadow);
}

.ty-product-media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--ty-cream-2);
    display: block;
}

.ty-product-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ty-ease);
}

.ty-product-card:hover .ty-product-media img {
    transform: scale(1.07);
}

.ty-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
    background: var(--ty-danger);
    padding: .3rem .7rem;
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
}

.ty-badge.ty-badge-gold {
    background: var(--ty-grad-gold);
}

.ty-badge.ty-badge-muted {
    background: var(--ty-cocoa);
}

.ty-product-body {
    padding: 1.15rem 1.25rem 1.35rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: .35rem;
}

.ty-product-name {
    font-family: 'Prompt', sans-serif;
    font-weight: 600;
    font-size: 1.02rem;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ty-product-name a {
    color: var(--ty-ink);
    text-decoration: none;
}

.ty-product-name a:hover {
    color: var(--ty-gold);
}

.ty-product-desc {
    font-size: .85rem;
    color: var(--ty-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

.ty-price-row {
    margin-top: auto;
    padding-top: .6rem;
    display: flex;
    align-items: baseline;
    gap: .55rem;
    flex-wrap: wrap;
}

.ty-price {
    font-family: 'Prompt', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--ty-espresso);
}

.ty-price-old {
    font-size: .88rem;
    color: var(--ty-muted);
    text-decoration: line-through;
}

.ty-stock-note {
    font-size: .78rem;
    font-weight: 600;
}

.ty-stock-note.in { color: var(--ty-success); }
.ty-stock-note.low { color: #b07d1f; }
.ty-stock-note.out { color: var(--ty-danger); }

.ty-product-actions {
    display: flex;
    gap: .5rem;
    margin-top: .7rem;
}

.ty-product-actions .btn {
    flex: 1;
    padding: .5rem .5rem;
    font-size: .88rem;
}

/* ---------- Promo tiles ---------- */

.ty-promo {
    position: relative;
    border-radius: var(--ty-radius);
    padding: 2.2rem 1.8rem;
    height: 100%;
    overflow: hidden;
    color: #fff;
    box-shadow: var(--ty-shadow-sm);
    transition: transform .3s var(--ty-ease), box-shadow .3s var(--ty-ease);
}

.ty-promo:hover {
    transform: translateY(-6px);
    box-shadow: var(--ty-shadow);
}

.ty-promo h3 {
    color: #fff;
    font-weight: 700;
}

.ty-promo p {
    color: rgba(255, 255, 255, .85);
}

.ty-promo .ty-promo-tag {
    display: inline-block;
    background: rgba(255, 255, 255, .2);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: .3rem .9rem;
    margin-bottom: 1rem;
}

.ty-promo-1 { background: linear-gradient(135deg, #6b5138, #35261a); }
.ty-promo-2 { background: linear-gradient(135deg, #c09044, #8a6526); }
.ty-promo-3 { background: linear-gradient(135deg, #6e7f63, #46543e); }

.ty-promo .btn {
    background: #fff;
    color: var(--ty-espresso) !important;
    border: none;
}

.ty-promo .btn:hover {
    background: var(--ty-gold-soft);
    transform: translateY(-2px);
}

/* ---------- Testimonials ---------- */

.ty-quote-card {
    background: var(--ty-white);
    border: 1px solid rgba(59, 42, 26, .06);
    border-radius: var(--ty-radius);
    padding: 1.8rem;
    height: 100%;
    position: relative;
    box-shadow: var(--ty-shadow-sm);
    transition: transform .3s var(--ty-ease), box-shadow .3s var(--ty-ease);
}

.ty-quote-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--ty-shadow);
}

.ty-quote-card::before {
    content: "\201C";
    position: absolute;
    top: .2rem;
    right: 1.2rem;
    font-family: Georgia, serif;
    font-size: 5rem;
    line-height: 1;
    color: var(--ty-gold-soft);
}

.ty-stars {
    color: var(--ty-gold);
    letter-spacing: .15em;
    margin-bottom: .9rem;
}

.ty-quote-card p.ty-quote-text {
    color: var(--ty-cocoa);
    line-height: 1.85;
}

.ty-quote-card .ty-quote-who img {
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--ty-gold-soft);
}

/* ---------- Partner logos ---------- */

.ty-partner-logo {
    max-height: 74px;
    width: auto;
    filter: grayscale(1) opacity(.55);
    transition: filter .3s;
}

.ty-partner-logo:hover {
    filter: grayscale(0) opacity(1);
}

/* ---------- Contact block ---------- */

.ty-contact-card {
    border-radius: var(--ty-radius-lg);
    overflow: hidden;
    box-shadow: var(--ty-shadow);
    background: var(--ty-white);
}

.ty-contact-info {
    background: linear-gradient(160deg, var(--ty-espresso-2), var(--ty-espresso));
    color: #fff;
    padding: 2.6rem 2.2rem;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.ty-contact-info::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -70px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(220, 178, 106, .3), transparent 70%);
}

.ty-contact-info h3 { color: #fff; }

.ty-contact-info .ty-ci-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(220, 178, 106, .22);
    color: var(--ty-gold-2);
}

/* ---------- Forms ---------- */

.form-control, .form-select {
    border-radius: .9rem;
    border: 1.5px solid var(--ty-sand);
    background-color: #fff;
    padding: .65rem 1rem;
    transition: border-color .2s, box-shadow .2s;
}

.form-control:focus, .form-select:focus {
    border-color: var(--ty-gold-2);
    box-shadow: 0 0 0 .25rem rgba(220, 178, 106, .25);
}

.form-label {
    font-weight: 600;
    color: var(--ty-espresso-2);
    font-size: .92rem;
}

.form-check-input:checked {
    background-color: var(--ty-gold);
    border-color: var(--ty-gold);
}

.form-check-input:focus {
    box-shadow: 0 0 0 .25rem rgba(220, 178, 106, .25);
    border-color: var(--ty-gold-2);
}

/* ---------- Cards / misc bootstrap upgrades ---------- */

.card {
    border-radius: var(--ty-radius);
    border-color: rgba(59, 42, 26, .07);
}

.card.shadow, .card.shadow-sm {
    box-shadow: var(--ty-shadow-sm) !important;
}

.badge.bg-primary { background: var(--ty-grad-gold) !important; }
.badge.bg-warning { background: var(--ty-gold) !important; color: #fff; }

.bg-light {
    background-color: var(--ty-cream-2) !important;
}

.text-primary { color: var(--ty-cocoa) !important; }
.text-warning { color: var(--ty-gold) !important; }

.list-group-item {
    background: transparent;
    border-color: rgba(59, 42, 26, .08);
}

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

/* ---------- Page header (หน้ารอง) ---------- */

.ty-page-head {
    background: var(--ty-grad-hero);
    padding: 3.2rem 0 2.6rem;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
}

.ty-page-head h1, .ty-page-head h2 {
    font-weight: 800;
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    margin-bottom: .35rem;
}

.ty-page-head p {
    color: var(--ty-muted);
    margin: 0;
}

/* ---------- Checkout steps ---------- */

.checkout-steps {
    display: flex;
    justify-content: center;
    gap: clamp(1.2rem, 6vw, 4rem);
    margin: 1.4rem 0 2.2rem;
}

.checkout-steps .step {
    text-align: center;
    position: relative;
    color: var(--ty-muted);
}

.checkout-steps .step .step-number {
    width: 46px;
    height: 46px;
    margin: 0 auto .45rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-family: 'Prompt', sans-serif;
    background: #fff;
    border: 2px solid var(--ty-sand);
    color: var(--ty-muted);
    transition: all .3s var(--ty-ease);
}

.checkout-steps .step.active .step-number {
    background: var(--ty-grad-gold);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--ty-shadow-gold);
    transform: scale(1.08);
}

.checkout-steps .step.completed .step-number {
    background: var(--ty-success);
    border-color: transparent;
    color: #fff;
}

.checkout-steps .step.active .step-label,
.checkout-steps .step.completed .step-label {
    color: var(--ty-espresso);
    font-weight: 600;
}

/* ---------- Footer ---------- */

.ty-footer {
    background: var(--ty-espresso);
    color: rgba(250, 246, 239, .78);
    padding: 4rem 0 0;
    margin-top: 5rem;
    position: relative;
}

.ty-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--ty-grad-gold);
}

.ty-footer h5 {
    color: #fff;
    font-weight: 700;
    margin-bottom: 1.1rem;
}

.ty-footer a {
    color: rgba(250, 246, 239, .78);
    text-decoration: none;
    transition: color .2s;
}

.ty-footer a:hover {
    color: var(--ty-gold-2);
}

.ty-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ty-footer ul li {
    margin-bottom: .55rem;
}

.ty-footer .ty-footer-bottom {
    border-top: 1px solid rgba(250, 246, 239, .12);
    margin-top: 2.6rem;
    padding: 1.2rem 0;
    font-size: .85rem;
    color: rgba(250, 246, 239, .55);
}

.ty-footer .ty-social a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background: rgba(250, 246, 239, .1);
    margin-right: .5rem;
    transition: background .2s, transform .2s;
}

.ty-footer .ty-social a:hover {
    background: var(--ty-gold);
    color: #fff;
    transform: translateY(-3px);
}

/* ---------- Floating LINE button ---------- */

.ty-line-fab {
    position: fixed;
    right: 1.1rem;
    bottom: 1.1rem;
    z-index: 1040;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #06c755;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    box-shadow: 0 10px 26px rgba(6, 199, 85, .45);
    transition: transform .25s var(--ty-ease);
}

.ty-line-fab:hover {
    transform: scale(1.1);
    color: #fff;
}

/* ---------- Reveal on scroll ---------- */

.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s var(--ty-ease), transform .7s var(--ty-ease);
}

.reveal.ty-in {
    opacity: 1;
    transform: none;
}

.reveal-d1 { transition-delay: .1s; }
.reveal-d2 { transition-delay: .2s; }
.reveal-d3 { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {

    .reveal,
    .ty-hero-img,
    .ty-hero-ring,
    .ty-float-card {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ---------- Skeleton loading ---------- */

.ty-skeleton {
    border-radius: var(--ty-radius);
    background: linear-gradient(100deg, var(--ty-cream-2) 40%, #fff 50%, var(--ty-cream-2) 60%);
    background-size: 200% 100%;
    animation: ty-shimmer 1.4s infinite;
    min-height: 320px;
}

@keyframes ty-shimmer {
    to { background-position: -200% 0; }
}

/* ---------- Trust strip (ใต้ปุ่มสั่งซื้อ) ---------- */

.ty-trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.2rem;
    justify-content: center;
    font-size: .82rem;
    color: var(--ty-muted);
    margin-top: .8rem;
}

.ty-trust-strip i {
    color: var(--ty-success);
    margin-right: .3rem;
}

/* ปุ่มบนการ์ดสินค้า - กันตัวหนังสือตัดบรรทัดจนปุ่มบวม */
.ty-product-actions .btn {
    white-space: nowrap;
    font-size: .82rem;
    padding: .48rem .4rem;
}

@media (max-width: 575.98px) {
    .ty-product-actions {
        flex-direction: column;
    }
}

/* หน้า cart (และหน้าที่ใช้ .bg-primary เดิม) - เปลี่ยนน้ำเงิน Bootstrap เป็นโทนแบรนด์ */
.bg-primary {
    background: linear-gradient(160deg, var(--ty-espresso-2), var(--ty-espresso)) !important;
}

section.bg-primary h1, section.bg-primary h2, section.bg-primary p,
header.bg-primary h1, header.bg-primary h2, header.bg-primary p,
footer.bg-primary, footer.bg-primary p, footer.bg-primary a, footer.bg-primary h5 {
    color: #fff;
}

/* section/footer ที่ใช้ .bg-primary-gradient เดิม (cart.css เคยทับเป็นน้ำเงิน)
   → เปลี่ยนเป็นโทน espresso ให้เหมือน footer หน้าแรกทั้งเว็บ */
.bg-primary-gradient {
    background: linear-gradient(160deg, var(--ty-espresso-2), var(--ty-espresso)) !important;
    color: rgba(250, 246, 239, .85);
}

.bg-primary-gradient h1, .bg-primary-gradient h2, .bg-primary-gradient h3,
.bg-primary-gradient h4, .bg-primary-gradient h5, .bg-primary-gradient h6 {
    color: #fff;
}

.bg-primary-gradient .text-muted {
    color: rgba(250, 246, 239, .68) !important;
}

.bg-primary-gradient a.text-muted:hover {
    color: var(--ty-gold-2) !important;
}

.bg-primary-gradient .btn-outline-primary {
    border-color: rgba(250, 246, 239, .35);
    color: #fff;
    background: transparent;
}

.bg-primary-gradient .btn-outline-primary:hover {
    background: var(--ty-gold);
    border-color: var(--ty-gold);
}

.bg-primary-gradient hr {
    border-color: rgba(250, 246, 239, .2);
}

.bg-primary-gradient .form-control {
    border-color: transparent;
}