.bg-paper {
    background: var(--lh-paper);
}

/*margin*/
.mt-16 {
    margin-top: var(--lh-space-4);
}

.mt-24 {
    margin-top: var(--lh-space-5);
}

/*margin*/

/*button*/
.date-open-sale {
    flex: 1;
    padding: clamp(8px, 0.5vw + 6px, 12px) clamp(8px, 1vw + 4px, 16px);
    background: var(--lh-primary);
    color: var(--lh-white);
    border-radius: var(--lh-radius-pill);
    font-size: clamp(12px, 0.5vw + 11px, 14px);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    transition: all var(--lh-transition);
}

.btn-heart {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lh-secondary-soft);
    border-radius: 50%;
    color: var(--lh-secondary);
    transition: all var(--lh-transition);
}

.btn-heart:hover {
    background: var(--lh-secondary);
    color: var(--lh-white);
}

.btn-cart {
    flex: 1;
    padding: clamp(8px, 0.5vw + 6px, 12px) clamp(8px, 1vw + 4px, 16px);
    background: var(--lh-primary);
    color: var(--lh-white);
    border-radius: var(--lh-radius-pill);
    font-size: clamp(12px, 0.5vw + 11px, 14px);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    transition: all var(--lh-transition);
}

.btn-cart > span:not(:first-child) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-cart:hover {
    background: var(--lh-primary-dark);
    transform: translateY(-2px);
    color: var(--lh-white);
}

/*button*/

.m-breadcrumb {
    margin: var(--lh-space-4) 0;
}

/*header*/
.header-row-top {
    text-align: center;
    padding: 12px 0;
    background: #64C4F0;
    border-bottom: 4px solid var(--lh-primary-dark);
    overflow-anchor: none;
}

.header-row-top .container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.site-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--lh-ink);
    flex-shrink: 0;
}

.site-logo:hover .site-logo-image {
    transform: scale(1.04) rotate(-2deg);
}

/* The large brand cluster: [Little] [halo+logo] [Heart] */
.site-logo-large {
    gap: var(--lh-space-4);
}

.site-logo-halo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* ใช้ clamp ให้วงกลมย่อตามหน้าจอ — header ซ่อนที่ <820px จึงไม่ต่ำกว่า 72px */
    width: clamp(72px, 8.5vw, 100px);
    height: clamp(72px, 8.5vw, 100px);
    background: var(--lh-white);
    border-radius: 50%;
    padding: 1px; /* ขอบขาว 1px รอบโลโก้ */
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 100, 160, 0.22),
    inset 0 -2px 6px rgba(100, 196, 240, 0.18);
    transition: transform 120ms var(--lh-ease-soft),
    box-shadow 200ms var(--lh-ease-soft);
    flex-shrink: 0;
}

/* hover สำหรับ halo ที่ไม่ได้อยู่ใน brand-header-wrap (fallback) */
.site-logo-large:hover .site-logo-halo {
    transform: scale(1.04) rotate(-3deg);
    box-shadow: 0 10px 28px rgba(0, 100, 160, 0.30),
    inset 0 -2px 6px rgba(100, 196, 240, 0.22);
}

.site-logo-large .site-logo-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: transparent;
    transition: none;
}

.site-logo-large:hover .site-logo-image {
    transform: none; /* override generic hover spin — halo does the motion */
}

/* "Little" + "Heart" wordmarks flanking the logo halo.
   Lobster is a script-style display face — already 700-ish by default
   so we don't force a weight. Fallback chain ensures it's readable
   while the web font is still loading. */
.brand-word {
    font-family: 'Lobster', var(--lh-font-display), cursive;
    font-weight: 400;
    font-size: clamp(38px, 5.2vw, 58px);
    line-height: 1;
    letter-spacing: 0;
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.6);
}

.brand-word-left {
    color: var(--lh-card);
    text-shadow: 0 2px 0 var(--lh-primary-dark);
}

/* white */

.brand-word-right {
    color: var(--lh-card);
    text-shadow: 0 2px 0 var(--lh-primary-dark);
}

/* white */

/* ── Brand heading image (replaces brand-word text) ───────── */
.brand-heading-img {
    height: clamp(48px, 5.5vw, 72px);
    width: auto;
    display: block;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
}

/* ── Brand header wrap — วงกลมโลโก้ซ้อนตรงกลางภาพข้อความ ─── */
.brand-header-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* ทำให้ wrap สูงเท่า halo เสมอ → halo ไม่ล้นออกนอก header
       ร่วมกับ padding: 2px ของ header-row-top → ได้ space พอดี 2px บน/ล่าง */
    min-height: clamp(72px, 8.5vw, 100px);
}

/* override: halo เป็น absolute ซ้อนบนภาพข้อความ */
.brand-header-wrap .site-logo-halo {
    position: absolute;
    left: 47%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* รวม translate + scale/rotate เพื่อป้องกัน transform override ตอน hover */
.site-logo-large:hover .brand-header-wrap .site-logo-halo {
    transform: translate(-50%, -50%) scale(1.04) rotate(-3deg);
}

.site-header.is-scrolled .site-logo-small {
    display: flex;
}

.site-logo-small {
    display: none; /* shown only when .is-scrolled */
    flex-shrink: 0;
}

.site-logo-small .site-logo-image {
    width: auto;
    height: 48px;
    display: block;
    object-fit: contain;
    transition: transform 100ms var(--lh-ease-soft);
}

.site-header.is-scrolled .site-logo-small {
    display: flex;
}

/* Generic site-logo-image fallback (for footer, drawer head, etc.) */
.site-logo-image {
    width: auto;
    height: 64px;
    display: block;
    object-fit: contain;
}

.site-logo-image-footer {
    height: 64px;
}

.nav-hamburger {
    width: 44px;
    height: 44px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: var(--lh-paper);
    border-radius: 50%;
    color: var(--lh-primary);
    flex-shrink: 0;
    transition: background 180ms ease, transform 180ms ease;
}

.header-row-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--lh-paper);
    border-bottom: 4px solid var(--lh-primary);
    box-shadow: var(--lh-shadow-md);
    transition: box-shadow 110ms var(--lh-ease-soft);
}

.header-nav-row {
    display: flex;
    align-items: center;
    gap: var(--lh-space-2);
    padding: var(--lh-space-2) 0;
    position: relative;
    min-height: 56px;
}

.nav-hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 999px;
    transition: transform 220ms ease, opacity 200ms ease;
}

.site-logo-small {
    display: none;
    flex-shrink: 0;
}

.primary-nav .nav-c1 {
    color: #ED7AA1;
}

/* coral — สินค้าทั้งหมด */
.primary-nav .nav-c2 {
    color: #37A5DD;
}

/* magenta — 0-3 */
.primary-nav .nav-c3 {
    color: #37A5DD;
}

/* amber — 3-6 */
.primary-nav .nav-c4 {
    color: #37A5DD;
}

/* teal — 6-9 */
.primary-nav .nav-c5 {
    color: var(--lh-primary);
}

/* cyan brand — เกี่ยวกับเรา */
.primary-nav {
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.primary-nav ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--lh-space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.has-submenu {
    position: relative;
}

.primary-nav .nav-link {
    font-family: var(--lh-font-heading);
    font-size: 26px;
    font-weight: 500;
    padding: 10px 16px;
    border-radius: var(--lh-radius-pill);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    letter-spacing: -0.005em;
    transition: background 180ms ease, color 180ms ease, transform 160ms ease;
}

.primary-nav .nav-c1 {
    color: #ED7AA1;
}

.primary-nav .nav-link:hover {
    background: var(--lh-rose-blush);
    transform: translateY(-1px);
}

.primary-nav .nav-link.active {
    background: var(--lh-rose-blush);
}

.nav-caret {
    flex-shrink: 0;
    margin-left: 2px;
    opacity: 0.7;
    transition: transform 220ms var(--lh-ease-soft);
}

.has-submenu {
    position: relative;
}

.nav-submenu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 280px;
    padding: var(--lh-space-3);
    background: var(--lh-paper);
    border-radius: var(--lh-radius-lg);
    box-shadow: var(--lh-warm-shadow-lg);
    border: 1px solid var(--lh-line);
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms var(--lh-ease-soft),
    transform 220ms var(--lh-ease-soft),
    visibility 220ms;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 102;
}

.nav-submenu::before {
    /* tiny arrow pointing up at parent */
    content: '';
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: var(--lh-paper);
    border-left: 1px solid var(--lh-line);
    border-top: 1px solid var(--lh-line);
}

.has-submenu:hover .nav-submenu,
.has-submenu:focus-within .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.nav-submenu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--lh-radius-md);
    color: var(--lh-ink);
    text-decoration: none;
    font-family: var(--lh-font-heading);
    font-weight: 500;
    font-size: 14.5px;
    transition: background 160ms ease, color 160ms ease, padding-left 160ms ease;
}

.nav-submenu a:hover {
    background: var(--lh-rose-blush);
    color: var(--lh-secondary-dark);
    padding-left: 18px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--lh-space-1);
    margin-left: auto;
    /* Breathing room so the rightmost button doesn't kiss the container edge.
       Container already has its own outer padding, but on narrow screens
       (especially when the signin pill keeps its pink fill + label) it
       visually feels cramped without this extra inset. */
    padding-right: var(--lh-space-2);
    flex-shrink: 0;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 14px;
    border-radius: var(--lh-radius-pill);
    background: transparent;
    color: var(--lh-ink);
    text-decoration: none;
    font-family: var(--lh-font-heading);
    font-size: 24px;
    font-weight: 500;
    border: 0;
    transition: background 160ms ease, color 160ms ease;
    position: relative;
}

.action-btn svg {
    stroke: currentColor;
    flex-shrink: 0;
}

.action-btn:hover {
    background: var(--lh-rose-blush);
    color: var(--lh-secondary-dark);
}

.action-btn-cart .cart-count {
    position: absolute;
    top: 2px;
    right: -2px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--lh-secondary);
    color: var(--lh-white);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--lh-paper);
}

.action-btn-signin {
    background: var(--lh-secondary);
    color: var(--lh-white);
}

.action-btn-signin:hover {
    background: var(--lh-secondary-dark);
    color: var(--lh-white);
}

/*header*/

/*breadcrumb*/
.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    color: var(--lh-mute);
    margin-bottom: var(--lh-space-5);
    padding-bottom: var(--lh-space-3);
    border-bottom: 1px solid var(--lh-line);
}

.breadcrumb {
    --bs-breadcrumb-divider: "›";
    --bs-breadcrumb-divider-color: var(--lh-mute);
}

.breadcrumb-item.active {
    color: var(--lh-mute);
}

/*breadcrumb*/

/*footer*/
.site-logo-image-footer {
    width: 64px;
}

.site-footer {
    max-width: var(--lh-container);
    margin: 0 auto;
    box-shadow: -1px 0 0 rgba(0, 100, 160, 0.06), 1px 0 0 rgba(0, 100, 160, 0.06), 0 8px 32px rgba(0, 100, 160, 0.12);
    background: var(--lh-primary);
    color: var(--lh-white);
    padding-top: var(--lh-space-7);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
    gap: var(--lh-space-6);
    padding: var(--lh-space-4);
}

.footer-brand {
    padding-right: 20px;
}

.footer-brand p {
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    line-height: 1.7;
    margin-top: 10px;
}

.footer-social {
    display: flex;
    gap: 10px;
    margin-top: var(--lh-space-4);
}

.footer-brand .site-logo-text .tag {
    color: var(--lh-white);
    font-size: 28px;
    font-family: 'HelvethaicaMon';
    font-weight: 700;
}

.footer-col h3 {
    color: var(--lh-white);
    font-size: 24px;
    margin-bottom: var(--lh-space-4);
}

.footer-col ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-col ul li, .footer-col ul li a {
    color: var(--lh-white);
    font-size: 14px;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    padding: var(--lh-space-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.92);
}

.payment-icons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.payment-icons span {
    background: rgba(255, 255, 255, 0.18);
    color: var(--lh-white);
    padding: 4px 10px;
    border-radius: var(--lh-radius-xs);
    font-size: 11px;
    font-weight: 600;
}

/*footer*/

/*maintenance page*/
.maintenance-page {
    display: flex;
    justify-content: center;
    padding: 24px;
    background: var(--lh-paper);
}

.maintenance-card {
    width: 100%;
    max-width: 720px;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 28px;
    padding: 48px 36px;
    text-align: center;
    box-shadow: 0 25px 70px rgba(0, 31, 77, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.7);
}

.icon-box {
    width: 96px;
    height: 96px;
    margin: 0 auto 28px;
    border-radius: 50%;
    background: #EAF4FF;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-theme);
    font-size: 46px;
    box-shadow: inset 0 0 0 8px #D6E9FA;
}

.maintenance-header {
    color: var(--bs-theme);
    font-size: 34px;
    margin-bottom: 14px;
    font-weight: 700;
}

.maintenance-subtitle {
    font-size: 19px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 12px;
}

.maintenance-desc {
    font-size: 16px;
    line-height: 1.8;
    color: #6b7280;
    max-width: 560px;
    margin: 0 auto 30px;
}

.maintenance-status {
    background: #F3F9FF;
    border-left: 5px solid var(--lh-primary);
    border-radius: 14px;
    padding: 18px 20px;
    text-align: left;
    margin: 28px auto;
    max-width: 520px;
    color: #374151;
    font-size: 15px;
}

.site-about {
    margin: var(--lh-space-4) 0;
}

.about-hero {
    text-align: center;
    padding: var(--lh-space-6) var(--lh-space-3);
    background: linear-gradient(180deg, var(--lh-paper) 0%, transparent 100%);
    border-radius: var(--lh-radius-lg);
    margin-bottom: var(--lh-space-5);
}

.display-product {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lh-space-5);
}

/*product*/
.six-product {
    width: 31.56%
}

.six-product:hover {
    transform: translateY(-3px);
}

.product-card-image {
    position: relative;
    background: transparent;
    overflow: visible;
    height: 280px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 4px 14px 0;
}

.product-card-image img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 2px;
    box-shadow: 1px 2px 8px 0 rgba(74, 74, 74, .75);
    transition: transform 400ms ease, filter 400ms ease;
}

.six-product:hover .product-card-image img {
    transform: scale(1.03) translateY(-2px);
    box-shadow: 1px 2px 8px 0 rgba(74, 74, 74, .75);
}

.product-card-body {
    padding: var(--lh-space-3) 24px 4px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 2px;
}

.product-card-title a {
    font-family: var(--lh-font-heading);
    font-size: clamp(26px, 0.85vw + 11px, 32px);
    font-weight: bold;
    color: var(--lh-ink);
    line-height: 1;
    min-height: 1.8em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0 4px;
    margin: 0;
    margin-top: auto;
}

.price-now {
    font-family: var(--lh-font-heading);
    font-size: clamp(41px, 1.53vw + 32px, 48px);
    line-height: 1;
    font-weight: bold;
    color: var(--lh-secondary);
}

.price-was {
    font-size: clamp(17px, 0.64vw + 13px, 20px);
    font-weight: 600;
    color: var(--lh-mute);
    text-decoration: line-through;
}

.price-off {
    font-size: clamp(11px, 0.42vw + 9px, 13px);
    font-weight: 700;
    color: var(--lh-white);
    background: var(--lh-primary-dark);
    padding: 2px 8px;
    border-radius: var(--lh-radius-pill);
    margin-left: auto;
    flex-shrink: 0;
}

.product-card-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: nowrap;
    overflow: hidden;
    padding: 0 4px;
}

.page-style {
    display: flex;
    justify-content: center;
    margin: var(--lh-space-4);
}

.box-btn-add-to-cart {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: var(--lh-space-2);
}

/*product*/

@media only screen and (max-width: 1199px) and (min-width: 501px) {

}

@media only screen and (max-width: 501px) {

}