/* ==========================================================================
   FONTS
   ========================================================================== */

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */

:root {
    --color-black-1: #191919;
    --color-black: #171719;
    --color-gray: #4B4B4B;
    --color-light-gray: #6B6B6A;
    --color-light-gray-3: #F3F3F3;
    --color-light-gray-4: #C9C9C9;
    --color-border: #B5B5B3;
    --color-light-gray-2: #EBEBEB;
    --color-black-4: #27272A;
    --color-teal: #61CFC2;
    --color-purple: #8678C7;
    --color-pink: #D289C0;
    --color-white: #FFFFFF;
    --color-shop-bg: #F5F5F5;
    --color-social-bg: #171719;
    --color-error: #FD475A;
    --color-result-bg: #F4F4F4;
    --color-btn-gray: #4B4B4B;
    --font-family: 'Montserrat', sans-serif;
    --gradient-button: linear-gradient(198deg, #B5B5B3 6.7%, #F2F2F2 33.6%, #F1F1F1 72.1%, #B5B5B3 113.1%);
}

/* ==========================================================================
   RESET
   ========================================================================== */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-black);
    background: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

ul, ol {
    list-style: none;
}

input, textarea {
    font-family: inherit;
    font-size: inherit;
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 83px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ==========================================================================
   PILL BUTTON (reusable component)
   ========================================================================== */

.pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 20px;
    border-radius: 9999px;
    border: 1px solid var(--color-gray);
    background: var(--color-white);
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-black);
    cursor: pointer;
    transition: opacity 0.2s;
}

.pill-btn:hover {
    opacity: 0.8;
}

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */

.breadcrumb {
    padding: 16px 0;
    font-size: 13px;
    color: var(--color-light-gray);
}

.breadcrumb a {
    color: var(--color-light-gray);
}

.breadcrumb a:hover {
    color: var(--color-black);
}

.breadcrumb .separator {
    margin: 0 8px;
}

/* ==========================================================================
   CAROUSEL ARROWS (reusable)
   ========================================================================== */

.carousel-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.carousel-arrow:hover {
    background: var(--color-light-gray-3);
}

.carousel-arrow svg {
    width: 20px;
    height: 20px;
}

/* Page-specific styles will be added by subsequent tasks below this line */

/* ==========================================================================
   HEADER — DESKTOP
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--color-white);
    width: 100%;
}

/* Top bar */
.header-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 50px;
    border-bottom: 1px solid var(--color-border);
}

/* Salon location (left) — invisible spacer for centering logo */
.header-salon {
    width: 240px;
    opacity: 0;
    pointer-events: none;
}

/* Logo (center) */
.header-logo {
    display: block;
    flex-shrink: 0;
}

.header-logo img {
    width: 175px;
    height: 35px;
    object-fit: contain;
    display: block;
}

/* Icon group (right) */
.header-icons {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 9px 0;
}

.header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-black);
    text-decoration: none;
    transition: opacity 0.2s;
    flex-shrink: 0;
    padding: 0;
}

.header-icon:hover {
    opacity: 0.7;
}

.header-icon svg {
    width: 36px;
    height: 36px;
    display: block;
}

/* Language button */
.header-icon--lang {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.5;
    text-decoration: underline;
    text-underline-offset: 2px;
    color: var(--color-black);
}

.header-lang-label {
    font-size: 24px;
    font-weight: 400;
    text-decoration: underline;
    line-height: 1;
}

/* Navigation bar */
.header-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 50px;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
}

.header-nav__list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1040px;
    width: 100%;
}

.header-nav__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 6px 12px;
    min-width: 144px;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-light-gray);
    text-decoration: none;
    white-space: nowrap;
    border-radius: 5px;
    transition: color 0.2s, background 0.2s;
}

.header-nav__link:hover,
.header-nav__link.is-active {
    color: var(--color-black);
    background: var(--color-light-gray-3);
}

/* Desktop submenu dropdown */
.header-nav__item--has-sub {
    position: relative;
}

.header-nav__submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 180px;
    background: var(--color-white);
    border: 1px solid var(--color-light-gray-2);
    border-radius: 5px;
    padding: 8px 0;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    list-style: none;
    margin: 0;
}

.header-nav__item--has-sub:hover .header-nav__submenu,
.header-nav__item--has-sub:focus-within .header-nav__submenu {
    display: block;
}

.header-nav__submenu-link {
    display: block;
    padding: 10px 20px;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-light-gray);
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.header-nav__submenu-link:hover {
    background: var(--color-light-gray-3);
    color: var(--color-black);
}

/* Search overlay */
.search-overlay {
    display: none;
    flex-direction: column;
    gap: 12px;
    padding: 20px 50px;
    height: 128px;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
}

.search-overlay.is-open {
    display: flex;
    animation: slideDown 0.2s ease;
}

.search-overlay[aria-hidden="false"] {
    aria-hidden: false;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.search-overlay__inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.search-overlay__form-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 8px 12px;
    border: 1px solid var(--color-light-gray-4);
    border-radius: 9999px;
    background: var(--color-white);
    width: 100%;
    max-width: 1266px;
    overflow: hidden;
}

.search-overlay__input {
    flex: 1;
    border: none;
    outline: none;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 13px;
    color: var(--color-black);
    background: transparent;
    padding: 0 8px 0 0;
}

.search-overlay__input::placeholder {
    color: var(--color-light-gray-4);
}

.search-overlay__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    background: var(--color-gray);
    border: none;
    border-radius: 9999px;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-white);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 0.2s;
    min-width: 141px;
    justify-content: center;
}

.search-overlay__btn:hover {
    opacity: 0.85;
}

.search-overlay__btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.search-overlay__suggestions {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 13px;
    color: var(--color-black);
    line-height: 1.5;
}

/* ==========================================================================
   HEADER — MOBILE
   ========================================================================== */

.site-header-mobile {
    display: none;
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--color-white);
    height: 60px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border);
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.mobile-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.mobile-hamburger svg {
    width: 32px;
    height: 32px;
}

.mobile-logo {
    display: block;
    flex-shrink: 0;
}

.mobile-logo img {
    width: 150px;
    height: 30px;
    object-fit: contain;
    display: block;
}

.mobile-profile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.mobile-profile svg {
    width: 32px;
    height: 32px;
}

.mobile-icons {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.mobile-lang {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    text-decoration: underline;
    text-underline-offset: 2px;
    color: var(--color-black);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* Mobile off-canvas nav */
.mobile-nav {
    display: none;
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    background: var(--color-white);
    z-index: 999;
    border-bottom: 1px solid var(--color-border);
    padding: 12px 0;
}

.mobile-nav.is-open {
    display: block;
    animation: slideDown 0.2s ease;
}

.mobile-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-nav__link {
    display: block;
    padding: 14px 24px;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-light-gray);
    text-decoration: none;
    border-bottom: 1px solid var(--color-light-gray-3);
    transition: color 0.2s, background 0.2s;
}

.mobile-nav__link:hover {
    color: var(--color-black);
    background: var(--color-light-gray-3);
}

/* Mobile submenu */
.mobile-nav__item--has-sub {
    position: relative;
}

.mobile-nav__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-light-gray);
    padding: 14px 24px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.mobile-nav__toggle:hover {
    color: var(--color-black);
    background: var(--color-light-gray-3);
}

.mobile-nav__chevron {
    transition: transform 0.2s;
    flex-shrink: 0;
}

.mobile-nav__toggle[aria-expanded="true"] .mobile-nav__chevron {
    transform: rotate(90deg);
}

.mobile-nav__submenu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--color-light-gray-3);
}

.mobile-nav__submenu.is-open {
    display: block;
}

.mobile-nav__submenu-link {
    display: block;
    padding: 12px 24px 12px 40px;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-light-gray);
    transition: color 0.15s;
}

.mobile-nav__submenu-link:hover {
    color: var(--color-black);
}

/* Overlay behind mobile nav */
body.nav-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 998;
}

/* ==========================================================================
   LOGIN MODAL
   ========================================================================== */

.login-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.45);
    align-items: center;
    justify-content: center;
}

.login-modal.is-open {
    display: flex;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.login-modal__dialog {
    background: var(--color-white);
    border-radius: 10px;
    width: 600px;
    max-width: calc(100vw - 32px);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    position: relative;
}

/* Dialog header row */
.login-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 27px;
    flex-shrink: 0;
}

.login-modal__header-title {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-black-1);
    line-height: 1.5;
}

.login-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: opacity 0.2s;
}

.login-modal__close:hover {
    opacity: 0.6;
}

.login-modal__close svg {
    width: 27px;
    height: 27px;
}

/* Body */
.login-modal__body {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
}

/* Title block */
.login-modal__title-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
}

.login-modal__title {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-black);
    line-height: 1.5;
    width: 382px;
    max-width: 100%;
}

.login-modal__register {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 13px;
    color: var(--color-black);
    line-height: 1.5;
}

.login-modal__register-link {
    color: var(--color-teal);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Form */
.login-modal__form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    width: 100%;
}

.login-modal__field {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.login-modal__label {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-black);
    line-height: 1.5;
}

.login-modal__required {
    color: #DD283B;
}

.login-modal__input {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    padding: 12px;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 13px;
    color: var(--color-black);
    background: var(--color-white);
    outline: none;
    transition: border-color 0.2s;
}

.login-modal__input::placeholder {
    color: var(--color-border);
}

.login-modal__input:focus {
    border-color: var(--color-gray);
}

/* Password field with toggle */
.login-modal__pw-wrap {
    position: relative;
    width: 100%;
}

.login-modal__pw-wrap .login-modal__input {
    padding-right: 44px;
}

.login-modal__pw-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.login-modal__pw-toggle:hover {
    opacity: 0.6;
}

.login-modal__pw-toggle svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* Show/hide eye icons based on toggle state */
.pw-icon--hide {
    display: none;
}

#pw-toggle.is-visible .pw-icon--show {
    display: none;
}

#pw-toggle.is-visible .pw-icon--hide {
    display: block;
}

/* Forgot password */
.login-modal__forgot {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 12px;
    color: var(--color-black);
    line-height: 1.5;
    text-align: center;
    width: 100%;
}

.login-modal__forgot-link {
    color: var(--color-teal);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Submit button */
.login-modal__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 230px;
    height: 46px;
    padding: 8px 20px;
    background: var(--color-border);
    border: none;
    border-radius: 9999px;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-white);
    cursor: pointer;
    transition: opacity 0.2s;
    text-align: center;
    white-space: nowrap;
}

.login-modal__submit:hover {
    opacity: 0.85;
}

/* ==========================================================================
   HEADER RESPONSIVE BREAKPOINT
   ========================================================================== */

@media (max-width: 768px) {
    /* Hide desktop header */
    .site-header {
        display: none;
    }

    /* Show mobile header */
    .site-header-mobile {
        display: flex;
    }

    /* Login modal full-width on mobile */
    .login-modal__dialog {
        width: calc(100vw - 32px);
        padding: 16px;
        gap: 24px;
    }

    .login-modal__title {
        width: 100%;
    }
}

/* ==========================================================================
   SITE FOOTER
   ========================================================================== */

.site-footer {
    position: relative;
    background: linear-gradient(197.93deg, #B5B5B3 0%, #F2F2F2 25.43%, #F1F1F1 64.23%, #727272 107.72%);
    padding: 30px 40px;
    overflow: hidden;
}

/* Texture overlay */
.footer-texture {
    position: absolute;
    inset: 0;
    background-image: url('../images/footer-texture.png');
    background-size: cover;
    background-position: center;
    opacity: 0.3;
    pointer-events: none;
    z-index: 0;
}

/* Inner row: max 1200px centered */
.footer-inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
}

/* ---- Column 1: Logo ---- */
.footer-col--logo {
    flex-shrink: 0;
    width: 324px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-logo-link {
    display: inline-block;
    line-height: 0;
}

.footer-logo {
    width: 228px;
    height: 228px;
    object-fit: cover;
    display: block;
}

/* ---- Column 2: Contact + social ---- */
.footer-col--contact {
    flex-shrink: 0;
    width: 311px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Company name */
.footer-company-name {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-black);
    margin: 0 0 20px 0;
}

/* Contact info block */
.footer-contact-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Each contact row */
.footer-contact-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-contact-row--address {
    align-items: flex-start;
}

.footer-contact-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-contact-icon svg {
    width: 16px;
    height: 16px;
}

.footer-contact-icon--top {
    align-self: flex-start;
    margin-top: 2px;
}

.footer-contact-label {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-black);
    white-space: nowrap;
    flex-shrink: 0;
}

.footer-contact-value {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-black);
}

/* Social section */
.footer-social {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-social-heading {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-black);
    margin: 0;
}

.footer-social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.footer-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #171719;
    flex-shrink: 0;
    transition: opacity 0.2s;
    text-decoration: none;
}

.footer-social-btn:hover {
    opacity: 0.75;
}

.footer-social-btn svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* ---- Column 3: Newsletter ---- */
.footer-col--newsletter {
    flex-shrink: 0;
    width: 359px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.footer-newsletter {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.footer-newsletter-heading {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-black);
    margin: 0 0 5px 0;
    min-height: 30px;
    display: flex;
    align-items: center;
}

.footer-newsletter-desc {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-black);
    margin: 0 0 30px 0;
}

/* Newsletter form */
.footer-newsletter-form {
    width: 100%;
}

.footer-newsletter-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 359px;
    padding: 8px 8px 8px 12px;
    background: #ffffff;
    border: 1px solid #C9C9C9;
    border-radius: 9999px;
    overflow: hidden;
    box-sizing: border-box;
}

.footer-newsletter-input {
    flex: 1 0 0;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-black);
    padding: 0;
}

.footer-newsletter-input::placeholder {
    color: #C9C9C9;
}

.footer-newsletter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 3px 8px;
    background: #4B4B4B;
    border: none;
    border-radius: 9999px;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.5;
    color: #ffffff;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 0.2s;
}

.footer-newsletter-btn:hover {
    opacity: 0.85;
}

.footer-newsletter-btn-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: block;
}

/* ==========================================================================
   FOOTER RESPONSIVE
   ========================================================================== */

@media (max-width: 1280px) {
    .footer-inner {
        gap: 24px;
    }

    .footer-col--logo {
        width: 260px;
    }

    .footer-logo {
        width: 190px;
        height: 190px;
    }

    .footer-col--contact {
        width: 280px;
    }

    .footer-col--newsletter {
        width: 300px;
    }

    .footer-newsletter-input-wrap {
        width: 100%;
    }
}

@media (max-width: 960px) {
    .site-footer {
        padding: 30px 24px;
    }

    .footer-inner {
        flex-direction: column;
        align-items: center;
        gap: 32px;
    }

    .footer-col--logo {
        width: 100%;
        align-items: center;
    }

    .footer-logo {
        width: 160px;
        height: 160px;
    }

    .footer-col--contact {
        width: 100%;
        max-width: 480px;
    }

    .footer-col--newsletter {
        width: 100%;
        max-width: 480px;
    }

    .footer-newsletter-input-wrap {
        width: 100%;
        max-width: 400px;
    }
}

@media (max-width: 600px) {
    .site-footer {
        padding: 24px 16px;
    }

    .footer-inner {
        gap: 28px;
    }

    .footer-logo {
        width: 140px;
        height: 140px;
    }

    .footer-company-name {
        margin-bottom: 12px;
    }

    .footer-newsletter-input-wrap {
        max-width: 100%;
    }
}

/* ==========================================================================
   HOMEPAGE — SECTION 1: HERO BANNER
   ========================================================================== */

.hero {
    position: relative;
    height: 768px;
    overflow: hidden;
    background: #111;
}

.hero__bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 72.34%, rgba(65, 65, 65, 0.8) 100%);
    pointer-events: none;
}

/* ==========================================================================
   HOMEPAGE — SECTION 2: BRAND STORY
   ========================================================================== */

.brand-story {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 60px;
    padding-top: 0;
    text-align: center;
    position: relative;
}

.brand-story__logo-wrap {
    margin-top: -179px; /* half of 357px logo to overlap hero */
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.brand-story__logo {
    width: 358px;
    height: 357px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.brand-story__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    max-width: 802px;
    padding: 40px 20px 0;
}

.brand-story__heading {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.5;
    color: var(--color-black-1);
    margin: 0;
}

.brand-story__text {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-black-1);
    margin: 0;
}

.brand-story__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    height: 40px;
}

.brand-story__btn img {
    width: 16px;
    height: 16px;
    display: block;
    flex-shrink: 0;
}

/* ==========================================================================
   HOMEPAGE — SECTION 3: PRODUCT BANNER
   ========================================================================== */

.product-banner {
    padding: 0 60px 60px;
}

.product-banner__inner {
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    height: 675px;
}

.product-banner__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 10px;
}

/* ==========================================================================
   HOMEPAGE — SECTION 4: SHOP SECTION
   ========================================================================== */

.shop-section {
    background: var(--color-shop-bg);
    padding: 50px 60px 60px;
}

.shop-section__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.shop-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.shop-section__title {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.5;
    color: var(--color-black-1);
    margin: 0;
}

/* Shop carousel */
.shop-carousel {
    position: relative;
}

.shop-carousel__viewport {
    overflow: hidden;
}

.shop-carousel__track {
    display: flex;
    gap: 40px;
    transition: transform 0.4s ease;
    will-change: transform;
}

/* Shop card link wrapper */
.shop-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    flex: 0 0 270px;
    width: 270px;
}

/* Shop card */
.shop-card {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.shop-card__img-wrap {
    position: relative;
    width: 270px;
    height: 300px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-white);
}

.shop-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
    display: block;
}

.shop-card__wish {
    position: absolute;
    top: 15px;
    right: 13px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-light-gray-3);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
    z-index: 2;
}

.shop-card__wish:hover {
    background: var(--color-border);
}

.shop-card__wish svg {
    width: 16px;
    height: 15px;
    display: block;
}

.shop-card__wish--active svg path {
    fill: #4B4B4B;
}

.shop-card__wish--active:hover {
    background: var(--color-light-gray-4);
}

.shop-card__wish--loading {
    pointer-events: none;
    opacity: 0.5;
}

.shop-card__info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
}

.shop-card__category {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-teal);
}

.shop-card__name {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-black-1);
    text-transform: uppercase;
    margin: 0;
}

.shop-card__volume {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-black-1);
    margin: 0;
}

.shop-card__price {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-black);
    margin: 22px 0 0; /* 8px gap + 22px = 30px total from volume, matching Figma */
}

/* Shop carousel arrows */
.shop-carousel__arrow {
    position: absolute;
    top: 132px; /* (300px img / 2) - (36px / 2) */
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-light-gray-3);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: background 0.2s;
}

.shop-carousel__arrow:hover {
    background: var(--color-border);
}

.shop-carousel__arrow svg {
    width: 20px;
    height: 20px;
    display: block;
}

.shop-carousel__arrow--prev {
    left: -50px;
}

.shop-carousel__arrow--next {
    right: -50px;
}

/* Mobile-only shop CTA (hidden on desktop) */
.shop-section__btn-mobile {
    display: none;
}

/* ==========================================================================
   HOMEPAGE — SECTION 5: VIDEO SECTION
   ========================================================================== */

.video-section {
    padding: 0 60px 60px;
}

.video-section__inner {
    max-width: 1200px;
    margin: 0 auto;
    height: 768px;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
}

.video-section__embed {
    width: 100%;
    height: 100%;
    position: relative;
}

.video-section__embed iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
}

/* ==========================================================================
   HOMEPAGE — SECTION 6: EXPLORE SECTION
   ========================================================================== */

.explore-section {
    padding: 0 60px 80px;
}

.explore-section__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.explore-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.explore-section__title {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.5;
    color: var(--color-black-1);
    margin: 0;
}

/* Explore carousel */
.explore-carousel {
    position: relative;
    overflow: hidden;
}

.explore-carousel__track {
    display: flex;
    gap: 38px; /* (1200 - 3*361) / 2 gaps */
    transition: transform 0.4s ease;
    will-change: transform;
}

/* Explore card (now an <a> tag) */
a.explore-card {
    text-decoration: none;
    color: inherit;
}

.explore-card {
    flex: 0 0 361px;
    width: 361px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
}

.explore-card__img-wrap {
    width: 300px;
    height: 300px;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 auto;
    flex-shrink: 0;
}

.explore-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.explore-card__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    text-align: center;
}

.explore-card__title {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-black);
    margin: 0;
    max-width: 290px;
}

.explore-card__excerpt {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 11px;
    line-height: normal;
    color: var(--color-black);
    margin: 0;
    max-width: 290px;
}

/* Explore carousel arrows (shown on mobile) */
.explore-carousel__arrow {
    display: none;
    position: absolute;
    top: 130px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-light-gray-3);
    border: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: background 0.2s;
}

.explore-carousel__arrow svg {
    width: 20px;
    height: 20px;
    display: block;
}

.explore-carousel__arrow--prev {
    left: 0;
}

.explore-carousel__arrow--next {
    right: 0;
}

/* Mobile-only explore CTA (hidden on desktop) */
.explore-section__btn-mobile {
    display: none;
}

/* ==========================================================================
   HOMEPAGE — RESPONSIVE (768px)
   ========================================================================== */

@media (max-width: 768px) {

    /* Hero */
    .hero {
        height: 233px;
    }

    /* Brand story */
    .brand-story__logo-wrap {
        margin-top: -100px;
    }

    .brand-story__logo {
        width: 200px;
        height: 200px;
    }

    .brand-story__content {
        padding: 24px 20px 0;
        gap: 20px;
    }

    .brand-story__heading {
        font-size: 13px;
        font-weight: 600;
    }

    /* Product banner */
    .product-banner {
        padding: 0 16px 40px;
    }

    .product-banner__inner {
        height: 205px;
    }

    /* Shop section */
    .shop-section {
        padding: 30px 0 50px;
    }

    .shop-section__inner {
        gap: 0;
        align-items: center;
    }

    .shop-section__header {
        width: 100%;
        padding: 0 16px;
        margin-bottom: 30px;
    }

    .shop-section__header .pill-btn {
        display: none;
    }

    .shop-section__title {
        font-size: 15px;
    }

    .shop-carousel__viewport {
        overflow: visible;
    }

    .shop-carousel__track {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px 34px;
        padding: 0 30px;
        transform: none !important;
    }

    .shop-card-link {
        flex: none;
        width: auto;
    }

    .shop-card-link:nth-child(n+5) {
        display: none;
    }

    .shop-card__img-wrap {
        width: 100%;
        height: 178px;
        border-radius: 5px;
        background: transparent;
    }

    .shop-card__img {
        border-radius: 5px;
    }

    .shop-card {
        gap: 12px;
    }

    .shop-card__category {
        font-size: 11px;
    }

    .shop-card__name {
        font-size: 13px;
    }

    .shop-card__volume {
        font-size: 11px;
    }

    .shop-card__price {
        font-size: 13px;
        margin: 0;
    }

    .shop-carousel__arrow {
        display: none;
    }

    .shop-section__btn-mobile {
        display: inline-flex;
        height: 48px;
        align-items: center;
        margin-top: 30px;
    }

    /* Video section */
    .video-section {
        padding: 0 16px 40px;
    }

    .video-section__inner {
        height: 233px;
        border-radius: 8px;
    }

    /* Explore section */
    .explore-section {
        padding: 0 0 60px;
    }

    .explore-section__inner {
        gap: 0;
        align-items: center;
    }

    .explore-section__header {
        width: 100%;
        padding: 0 16px;
        margin-bottom: 30px;
    }

    .explore-section__header .pill-btn {
        display: none;
    }

    .explore-section__title {
        font-size: 15px;
    }

    .explore-carousel {
        overflow: visible;
        width: 100%;
    }

    .explore-carousel__track {
        flex-direction: column;
        gap: 12px;
        transform: none !important;
    }

    .explore-card {
        flex: 0 0 auto;
        width: 100%;
        padding: 20px;
    }

    .explore-card__img-wrap {
        width: 300px;
        height: 300px;
        margin: 0 auto;
    }

    .explore-carousel__arrow {
        display: none;
    }

    .explore-section__btn-mobile {
        display: inline-flex;
        height: 48px;
        align-items: center;
        margin-top: 30px;
    }
}

/* ==========================================================================
   HOMEPAGE — RESPONSIVE (414px)
   ========================================================================== */

@media (max-width: 414px) {

    .brand-story__logo-wrap {
        margin-top: -80px;
    }

    .brand-story__logo {
        width: 160px;
        height: 160px;
    }

}

/* ==========================================================================
   ABOUT PAGE — BREADCRUMB
   ========================================================================== */

.about-breadcrumb {
    background: var(--color-light-gray-3);
    padding: 0;
    margin-bottom: 80px;
}

.about-breadcrumb .container {
    max-width: 1366px;
    margin: 0 auto;
    padding: 0 83px;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 35px;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-black-1);
}

.about-breadcrumb a {
    color: var(--color-black-1);
    text-decoration: none;
}

.about-breadcrumb a:hover {
    text-decoration: underline;
}

.about-breadcrumb__sep {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.about-breadcrumb__current {
    color: var(--color-border);
}

/* ==========================================================================
   ABOUT PAGE — SECTION 1: HERO BANNER
   ========================================================================== */

.about-hero {
    position: relative;
    width: 100%;
    height: 768px;
    overflow: hidden;
}

.about-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.about-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 72%, rgba(65,65,65,0.8) 100%);
}

/* ==========================================================================
   ABOUT PAGE — SECTION 2: BRAND STORY
   ========================================================================== */

.about-brand-story {
    position: relative;
    z-index: 1;
    margin-top: -89px;
    padding: 0;
}

.about-brand-story__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 60px;
    background: var(--color-white);
    border-radius: 10px;
    overflow: hidden;
}

.about-brand-story__content {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 64px 50px 0;
}

.about-brand-story__heading {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.5;
    color: var(--color-black-1);
    margin: 0;
}

.about-brand-story__text {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-black-1);
    margin: 0;
}

.about-brand-story__img-wrap {
    width: 100%;
    height: 603px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.about-brand-story__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

/* ==========================================================================
   ABOUT PAGE — SECTION 3: QUALITY STANDARDS
   ========================================================================== */

.about-quality {
    padding: 80px 0 0;
}

.about-quality__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 83px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.about-quality__text-block {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.about-quality__heading {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.5;
    color: var(--color-black-1);
    margin: 0;
}

.about-quality__description {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-black-1);
    margin: 0;
}

.about-quality__banner-wrap {
    display: flex;
    justify-content: center;
    padding: 0 126px;
}

.about-quality__banner {
    width: 100%;
    max-width: 947px;
    height: 450px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.about-quality__caption {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-black-1);
    text-align: center;
    margin: 0;
    padding: 0 50px;
}

/* ==========================================================================
   ABOUT PAGE — SECTION 4: VIDEO SECTION
   ========================================================================== */

.about-video {
    padding: 80px 0 80px;
}

.about-video__inner {
    max-width: 1366px;
    margin: 0 auto;
}

.about-video__embed-wrap {
    position: relative;
    width: 100%;
    height: 768px;
    overflow: hidden;
    background: #000;
}

.about-video__thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 111.17%;
    top: -11.23%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.about-video__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 40px;
}

.about-video__label {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    color: var(--color-white);
    background: rgba(0, 0, 0, 0.45);
    border-radius: 30px;
    padding: 8px 24px;
    letter-spacing: 0.02em;
}

.about-video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
    transition: opacity 0.2s, transform 0.2s;
}

.about-video__play:hover {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
}

/* ==========================================================================
   ABOUT PAGE — RESPONSIVE (768px)
   ========================================================================== */

@media (max-width: 768px) {

    /* Breadcrumb */
    .about-breadcrumb {
        margin-bottom: 30px;
    }

    .about-breadcrumb .container {
        padding: 0 16px;
    }

    /* Hero */
    .about-hero {
        height: 233px;
    }

    /* Brand story */
    .about-brand-story {
        margin-top: -17px;
    }

    .about-brand-story__inner {
        padding: 0 16px;
        gap: 30px;
        border-radius: 0;
    }

    .about-brand-story__content {
        padding: 30px 20px 0;
        gap: 20px;
    }

    .about-brand-story__img-wrap {
        height: 192px;
        border-radius: 8px;
    }

    /* Quality */
    .about-quality {
        padding: 40px 0 0;
    }

    .about-quality__inner {
        padding: 0 16px;
        gap: 20px;
    }

    .about-quality__banner-wrap {
        padding: 0;
    }

    .about-quality__banner {
        height: 182px;
        border-radius: 8px;
    }

    .about-quality__caption {
        padding: 0;
    }

    /* Video */
    .about-video {
        padding: 40px 0 60px;
    }

    .about-video__embed-wrap {
        height: 233px;
    }

    .about-video__label {
        font-size: 14px;
        padding: 6px 16px;
    }

    .about-video__play svg {
        width: 44px;
        height: 44px;
    }
}

/* ==========================================================================
   ABOUT PAGE — RESPONSIVE (414px)
   ========================================================================== */

@media (max-width: 414px) {

    .about-brand-story__content {
        padding: 20px 0 0;
    }

    .about-quality__heading {
        font-size: 16px;
    }
}

/* ==========================================================================
   SHOP PAGE — LAYOUT
   ========================================================================== */

.page-shop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    background: var(--color-white);
}

.page-shop > * {
    width: 100%;
}

/* ==========================================================================
   SHOP PAGE — BREADCRUMB
   ========================================================================== */

.shop-breadcrumb {
    padding: 0;
    background: var(--color-white);
    display: flex;
    justify-content: center;
    width: 100%;
}

.shop-breadcrumb__inner {
    width: 1200px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-light-gray-3);
    border-radius: 5px;
    height: 35px;
}

.shop-breadcrumb__link {
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-black-1);
    text-decoration: none;
    transition: color 0.2s;
}

.shop-breadcrumb__link:hover {
    color: var(--color-black);
}

.shop-breadcrumb__sep {
    display: flex;
    align-items: center;
    color: var(--color-light-gray);
    flex-shrink: 0;
}

.shop-breadcrumb__current {
    font-family: 'Inter', var(--font-family), sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-border);
}

/* ==========================================================================
   SHOP PAGE — BANNER CAROUSEL
   ========================================================================== */

.shop-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    width: 100%;
}

.shop-banner__viewport {
    width: 100%;
    height: 400px;
    overflow: hidden;
    position: relative;
}

.shop-banner__track {
    display: flex;
    height: 100%;
    transition: transform 0.5s ease;
    will-change: transform;
}

.shop-banner__slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

.shop-banner__slide--teal {
    background: var(--color-teal);
}

.shop-banner__slide--pink {
    background: var(--color-pink);
}

.shop-banner__slide--purple {
    background: var(--color-purple);
}

.shop-banner__slide--dark {
    background: var(--color-black);
}

.shop-banner__img-wrap {
    width: 670px;
    height: 100%;
    flex-shrink: 0;
    overflow: hidden;
}

.shop-banner__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.shop-banner__content {
    flex: 1;
    padding: 0 60px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: center;
}

.shop-banner__title {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.5;
    color: var(--color-white);
    margin: 0;
}

.shop-banner__desc {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-white);
    margin: 0;
    max-width: 498px;
}

.shop-banner__btn {
    align-self: flex-start;
    background: var(--color-white);
    border: 1px solid var(--color-gray);
    color: var(--color-gray);
    margin-top: 30px;
}

/* Banner dots */
.shop-banner__dots {
    display: flex;
    gap: 10px;
    z-index: 4;
}

.shop-banner__dot {
    display: block;
    width: 40px;
    height: 5px;
    border-radius: 12px;
    background: var(--color-light-gray-3);
    transition: background 0.3s;
    cursor: pointer;
}

.shop-banner__dot--active {
    background: var(--color-gray);
}

/* Banner arrows */
.shop-banner__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: background 0.2s;
    box-shadow: 0px 4px 3px rgba(0, 0, 0, 0.16);
}

.shop-banner__arrow:hover {
    background: var(--color-white);
}

.shop-banner__arrow svg {
    width: 20px;
    height: 20px;
    display: block;
}

.shop-banner__arrow--prev {
    left: 11px;
}

.shop-banner__arrow--next {
    right: 11px;
}

/* ==========================================================================
   SHOP PAGE — BODY
   ========================================================================== */

.shop-body {
    background: var(--color-white);
    padding: 20px 83px 60px;
    max-width: 1366px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

/* ==========================================================================
   SHOP PAGE — CATEGORY SECTION
   ========================================================================== */

.shop-cat-section {
    position: relative;
    background: var(--color-shop-bg);
    border-radius: 0;
    padding: 50px 60px;
}

.shop-cat-section__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.shop-cat-section__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
}

.shop-cat-section__title {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.5;
    color: var(--color-black-1);
    margin: 0;
    white-space: nowrap;
}

/* Per-section title colors */
.shop-cat-section--purple .shop-cat-section__title { color: var(--color-purple); }
.shop-cat-section--pink .shop-cat-section__title { color: var(--color-pink); }
.shop-cat-section--teal .shop-cat-section__title { color: var(--color-teal); }
.shop-cat-section--gray .shop-cat-section__title { color: var(--color-gray); }

.shop-cat-section__desc {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-black);
    margin: 0;
    max-width: 502px;
    text-align: right;
    padding-top: 2px;
}

.shop-cat-section__footer {
    display: flex;
    justify-content: center;
    padding-top: 10px;
}

/* Gradient "Xem tất cả" buttons per section */
.shop-cat-section__footer .pill-btn {
    border: none;
}
.shop-cat-section--purple .shop-cat-section__footer .pill-btn {
    background: linear-gradient(90deg, #8678C7 18.7%, #F4EEFF 81.9%);
}
.shop-cat-section--pink .shop-cat-section__footer .pill-btn {
    background: linear-gradient(90deg, #D289C0 18.7%, #FFEEFC 68.3%);
}
.shop-cat-section--teal .shop-cat-section__footer .pill-btn {
    background: linear-gradient(90deg, #61CFC2 0%, #DDFEFA 100%);
}
.shop-cat-section--gray .shop-cat-section__footer .pill-btn {
    background: linear-gradient(270deg, white 0%, #B5B5B3 100%);
}

/* ==========================================================================
   SHOP PAGE — PRODUCT GRID (4 columns)
   ========================================================================== */

.shop-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 40px;
}

.shop-grid .shop-card {
    flex: unset;
    width: 100%;
}

.shop-grid .shop-card__img-wrap {
    width: 100%;
    height: 300px;
}

/* ==========================================================================
   SHOP PAGE — CATEGORY CAROUSEL (horizontal scroll per section)
   ========================================================================== */

.shop-cat-section__carousel {
    overflow: hidden;
}

.shop-cat-section__track {
    display: flex;
    gap: 40px;
    transition: transform 0.4s ease;
    will-change: transform;
}

.shop-cat-section__track .shop-card-link {
    flex: 0 0 270px;
    width: 270px;
}

.shop-cat-section__track .shop-card__img-wrap {
    width: 270px;
    height: 300px;
}

/* Prev / Next arrows inside each category section */
.shop-cat-section__arrow {
    position: absolute;
    top: 170px; /* vertically centered on card image area (50px padding + 300px/2 - 32px/2) */
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0px 4px 3px rgba(0, 0, 0, 0.16);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: background 0.2s;
}

.shop-cat-section__arrow:hover {
    background: rgba(255, 255, 255, 1);
}

.shop-cat-section__arrow svg {
    width: 20px;
    height: 20px;
    display: block;
}

.shop-cat-section__arrow--prev {
    left: 26px;
}

.shop-cat-section__arrow--next {
    right: 26px;
}

/* ==========================================================================
   SHOP PAGE — RESPONSIVE (1024px)
   ========================================================================== */

@media (max-width: 1024px) {

    .shop-banner {
        height: 320px;
    }

    .shop-banner__img-wrap {
        width: 480px;
    }

    .shop-banner__content {
        padding: 0 40px;
        gap: 16px;
    }

    .shop-banner__title {
        font-size: 22px;
    }

    .shop-cat-section {
        padding: 40px 40px;
    }

    .shop-body {
        padding: 20px 40px 60px;
        gap: 60px;
    }

    .shop-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px 30px;
    }

    .shop-cat-section__track {
        gap: 30px;
    }

    .shop-cat-section__arrow {
        top: 150px; /* adjusted for 40px section padding */
    }
}

/* ==========================================================================
   SHOP PAGE — RESPONSIVE (768px)
   ========================================================================== */

@media (max-width: 768px) {

    .shop-breadcrumb__inner {
        padding: 0 16px;
    }

    .shop-banner {
        height: auto;
    }

    .shop-banner__slide {
        flex-direction: column;
        height: auto;
    }

    .shop-banner__img-wrap {
        width: 100%;
        height: 233px;
    }

    .shop-banner__content {
        padding: 24px 16px;
        gap: 12px;
    }

    .shop-banner__title {
        font-size: 18px;
    }

    .shop-banner__desc {
        max-width: 100%;
    }

    .shop-banner__dots {
        display: none;
    }

    .shop-cat-section {
        padding: 30px 16px;
    }

    .shop-body {
        padding: 20px 16px 40px;
        gap: 40px;
    }

    .shop-cat-section__header {
        flex-direction: column;
        gap: 8px;
    }

    .shop-cat-section__desc {
        text-align: left;
        max-width: 100%;
    }

    .shop-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 16px;
    }

    .shop-grid .shop-card__img-wrap {
        height: 200px;
        background: transparent;
    }

    .shop-cat-section__track {
        gap: 16px;
    }

    .shop-cat-section__track .shop-card-link {
        flex: 0 0 200px;
        width: 200px;
    }

    .shop-cat-section__track .shop-card__img-wrap {
        width: 200px;
        height: 220px;
        background: transparent;
    }

    .shop-cat-section__arrow {
        display: none;
    }
}

/* ==========================================================================
   SHOP PAGE — RESPONSIVE (414px)
   ========================================================================== */

@media (max-width: 414px) {

    .shop-banner__img-wrap {
        height: 180px;
    }

    .shop-banner__title {
        font-size: 16px;
    }

    .shop-grid {
        gap: 16px 12px;
    }

    .shop-grid .shop-card__img-wrap {
        height: 160px;
    }

    .shop-card__name {
        font-size: 13px;
    }

    .shop-card__price {
        font-size: 13px;
    }
}

/* ==========================================================================
   SINGLE PRODUCT PAGE
   ========================================================================== */

/* Breadcrumb
   ---------- */
.product-breadcrumb {
    padding: 0;
    background: var(--color-white);
}

.product-breadcrumb__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 35px;
    background: var(--color-light-gray-3);
    border-radius: 5px;
    padding: 0 12px;
}

.product-breadcrumb__link {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-border);
    transition: color 0.2s;
}

.product-breadcrumb__link:hover {
    color: var(--color-black-1);
}

.product-breadcrumb__sep {
    display: flex;
    align-items: center;
    color: var(--color-border);
}

.product-breadcrumb__current {
    font-size: 13px;
    color: var(--color-black-1);
    font-weight: 600;
}

/* Product Detail — 2-column layout
   --------------------------------- */
.product-detail {
    background: var(--color-white);
    padding: 20px 0 60px;
}

.product-detail__inner {
    max-width: 1366px;
    margin: 0 auto;
    padding: 0 83px;
    display: flex;
    gap: 50px;
    align-items: flex-start;
}

/* Gallery — left column
   --------------------- */
.product-gallery {
    display: flex;
    gap: 30px;
    flex: 0 0 610px;
    max-width: 610px;
}

.product-gallery__thumbs {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-shrink: 0;
}

.product-thumb {
    width: 102px;
    height: 102px;
    border: 1px solid transparent;
    background: var(--color-light-gray-3);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    transition: border-color 0.2s;
    flex-shrink: 0;
}

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

.product-thumb.is-active,
.product-thumb:hover {
    border-color: var(--color-border);
}

.product-gallery__main {
    flex: 1;
    background: rgba(235, 235, 235, 0.5);
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

.product-gallery__main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    mix-blend-mode: multiply;
}

/* Product Info — right column
   --------------------------- */
.product-info {
    flex: 1;
    min-width: 0;
    padding-top: 0;
}

.product-info__category-line {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.product-info__cat-tag {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-black-1);
}

.product-info__cat-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-teal);
    flex-shrink: 0;
}

.product-info__cat-sub {
    font-size: 13px;
    color: var(--color-teal);
    font-weight: 600;
}

.product-info__name {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-black-1);
    margin-bottom: 16px;
    line-height: 1.3;
}

/* Volume / Swatches
   ----------------- */
.product-info__volume-section {
    margin-bottom: 20px;
}

.product-info__volume-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-gray);
    margin-bottom: 10px;
}

.product-info__swatches {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.swatch-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 132px;
    height: 46px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background: var(--color-white);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    padding: 5px 12px;
    gap: 2px;
}

.swatch-btn.is-active {
    background: var(--color-gray);
    border-color: var(--color-gray);
}

.swatch-btn.is-active .swatch-btn__vol,
.swatch-btn.is-active .swatch-btn__price {
    color: var(--color-white);
}

.swatch-btn:hover:not(.is-active) {
    border-color: var(--color-gray);
}

.swatch-btn__vol {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-gray);
    line-height: 1.8;
}

.swatch-btn__price {
    font-size: 11px;
    color: var(--color-light-gray-4);
    line-height: 1.2;
}

/* Price row
   --------- */
.product-info__price-row {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 16px;
}

.product-info__price-current {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-black);
}

.product-info__price-original {
    font-size: 13px;
    color: var(--color-border);
    text-decoration: line-through;
}

/* Short description
   ----------------- */
.product-info__short-desc {
    font-size: 13px;
    color: var(--color-black-1);
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Divider
   ------- */
.product-info__divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin-bottom: 20px;
}

/* Qty + Add to cart row
   --------------------- */
.product-info__actions {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 16px;
}

/* Quantity selector */
.qty-selector {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    overflow: hidden;
    height: 48px;
    flex-shrink: 0;
    width: 145px;
}

.qty-selector__btn {
    width: 44px;
    height: 100%;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    flex-shrink: 0;
}

.qty-selector__btn:hover {
    background: var(--color-light-gray-3);
}

.qty-selector__input {
    flex: 1;
    height: 100%;
    border: none;
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    text-align: center;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-gray);
    background: transparent;
    -moz-appearance: textfield;
    min-width: 0;
}

.qty-selector__input::-webkit-inner-spin-button,
.qty-selector__input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Add to cart button */
.product-info__add-to-cart {
    flex: 1;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid var(--color-border);
    border-radius: 100px;
    background: var(--color-white);
    color: var(--color-gray);
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s;
    white-space: nowrap;
}

.product-info__add-to-cart:hover {
    border-color: var(--color-gray);
}

/* Buy now button */
.product-info__buy-now {
    width: 100%;
    height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: var(--color-teal);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 16px;
    transition: opacity 0.2s;
}

.product-info__buy-now:hover {
    opacity: 0.9;
}

.product-info__buy-now-main {
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-white);
}

.product-info__buy-now-sub {
    font-family: var(--font-family);
    font-size: 12px;
    color: var(--color-white);
}

/* Commits bar */
.product-info__commits {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 12px;
    background: var(--color-white);
    border-radius: 10px;
}

.product-info__commit {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-black);
}

.product-info__commit svg {
    flex-shrink: 0;
}

/* Product Tabs
   ------------ */
.product-tabs {
    background: var(--color-white);
    padding: 0 0 60px;
}

.product-tabs__inner {
    max-width: 1366px;
    margin: 0 auto;
    padding: 0 83px;
}

.product-tabs__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}

.product-tabs__tab {
    background: none;
    border: none;
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-border);
    padding: 16px 0;
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
    white-space: nowrap;
}

.product-tabs__tab.is-active {
    color: var(--color-black);
}

.product-tabs__tab.is-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-black);
    border-radius: 10px;
}

.product-tabs__nav-sep {
    width: 1px;
    height: 20px;
    background: var(--color-border);
    flex-shrink: 0;
}

.product-tabs__panel {
    display: none;
}

.product-tabs__panel.is-active {
    display: block;
}

.product-tabs__content {
    max-width: 950px;
}

.product-tabs__desc-body {
    max-height: 308px;
    overflow: hidden;
    position: relative;
    transition: max-height 0.4s ease;
}

.product-tabs__desc-body::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 125px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* When expanded: remove height limit and hide gradient */
.product-tabs__content:has(.product-tabs__show-more-btn[aria-expanded="true"]) .product-tabs__desc-body {
    max-height: none;
    overflow: visible;
}

.product-tabs__content:has(.product-tabs__show-more-btn[aria-expanded="true"]) .product-tabs__desc-body::after {
    opacity: 0;
}

.product-tabs__section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-black-1);
    margin-bottom: 16px;
}

.product-tabs__bullet-list {
    list-style: none;
    margin-bottom: 24px;
}

.product-tabs__bullet-list li {
    font-size: 13px;
    color: var(--color-black-1);
    line-height: 1.8;
}

.product-tabs__sub-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: 12px;
}

.product-tabs__text {
    font-size: 13px;
    color: var(--color-black-1);
    line-height: 1.7;
    margin-bottom: 24px;
}

.product-tabs__show-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

.product-tabs__show-more-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-white);
    border: 1px solid var(--color-light-gray-4);
    border-radius: 5px;
    padding: 10px 50px;
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-black);
    text-decoration: underline;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

.product-tabs__show-more-btn:hover {
    border-color: var(--color-gray);
}

.product-tabs__show-more-btn[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* Related Products
   ---------------- */
.related-products {
    background: var(--color-shop-bg);
    padding: 50px 0 60px;
}

.related-products__inner {
    max-width: 1366px;
    margin: 0 auto;
    padding: 0 83px;
}

.related-products__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}

.related-products__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-black);
    letter-spacing: 0.05em;
}

/* Related products grid
   --------------------- */
.related-products__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.related-products__grid .shop-card {
    min-width: 0;
}

.related-products__grid .shop-card__img-wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 270 / 300;
}

/* Product detail page — scoped overrides for shared components */
.page-product-detail .related-products .pill-btn {
    height: 48px;
    padding: 8px 20px;
}

.page-product-detail .shop-card__img-wrap {
    border-radius: 10px;
}

/* ==========================================================================
   SINGLE PRODUCT PAGE — RESPONSIVE (768px)
   ========================================================================== */

@media (max-width: 768px) {

    .product-breadcrumb__inner {
        margin: 0 16px;
        padding: 0 12px;
    }

    .product-detail__inner {
        flex-direction: column;
        padding: 0 16px;
        gap: 24px;
    }

    .product-gallery {
        flex: none;
        max-width: 100%;
        width: 100%;
        flex-direction: column-reverse;
        gap: 12px;
    }

    .product-gallery__thumbs {
        flex-direction: row;
        gap: 14px;
        justify-content: flex-start;
        overflow-x: auto;
    }

    .product-thumb {
        width: 85px;
        height: 85px;
        flex-shrink: 0;
    }

    .product-gallery__main {
        width: 100%;
    }

    .product-info__swatches {
        gap: 8px;
    }

    .swatch-btn {
        width: 120px;
    }

    .product-info__actions {
        flex-wrap: wrap;
    }

    .qty-selector {
        width: 122px;
    }

    .product-info__add-to-cart {
        flex: 1;
    }

    .product-tabs__inner {
        padding: 0 16px;
    }

    .product-tabs__tab {
        font-size: 15px;
    }

    .product-tabs__desc-body {
        max-height: 268px;
    }

    .related-products__inner {
        padding: 0 16px;
    }

    .related-products__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .related-products__title {
        font-size: 15px;
    }

    .related-products__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

/* ==========================================================================
   SINGLE PRODUCT PAGE — RESPONSIVE (414px)
   ========================================================================== */

@media (max-width: 414px) {
}

/* ==========================================================================
   NFC CHECK PAGE
   ========================================================================== */

/* Breadcrumb */
.nfc-breadcrumb {
    background: var(--color-light-gray-3);
    padding: 8px 0;
}

.nfc-breadcrumb .container {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-light-gray);
    flex-wrap: wrap;
}

.nfc-breadcrumb a {
    color: var(--color-light-gray);
    font-weight: 600;
    transition: color 0.2s;
}

.nfc-breadcrumb a:hover {
    color: var(--color-black);
}

.nfc-breadcrumb__sep {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.nfc-breadcrumb__current {
    font-weight: 600;
    color: var(--color-light-gray);
}

/* Banner */
.nfc-banner {
    width: 100%;
    height: 427px;
    background: var(--color-light-gray-4);
    overflow: hidden;
}

.nfc-banner__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   NFC CHECK PAGE — RESPONSIVE (768px)
   ========================================================================== */

@media (max-width: 768px) {

    .nfc-banner {
        height: 220px;
    }

}

/* ==========================================================================
   NFC CHECK PAGE — RESPONSIVE (414px)
   ========================================================================== */

@media (max-width: 414px) {

    .nfc-banner {
        height: 160px;
    }

}

/* ==========================================================================
   NFC AUTHENTICITY CHECK PAGE (page-authentic.php)
   ========================================================================== */

/* Status banner */
.nfc-auth-status {
    padding: 16px 0;
}

.nfc-auth-status[hidden] {
    display: none;
}

.nfc-auth-status .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.nfc-auth-status__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.nfc-auth-status__text {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.nfc-auth-status--success {
    background: transparent;
}

.nfc-auth-status--success .nfc-auth-status__text {
    color: var(--color-teal);
}

.nfc-auth-status--error {
    background: transparent;
}

.nfc-auth-status--error .nfc-auth-status__text {
    color: var(--color-error);
}

/* Main section */
.nfc-auth {
    padding: 60px 0 80px;
}

.nfc-auth__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Form heading */
.nfc-auth__heading-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.nfc-auth__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-black);
    text-align: center;
    letter-spacing: 0.02em;
    margin: 0;
}

.nfc-auth__guide-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-black);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s;
}

.nfc-auth__guide-link:hover {
    color: var(--color-teal);
}

/* Form wrap */
.nfc-auth__form-wrap {
    width: 100%;
}

/* Form card */
.nfc-auth__card {
    width: 100%;
    background: var(--color-white);
    border-radius: 10px;
    padding: 12px 20px;
}

/* Form */
.nfc-auth-form {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

/* Form row: dark label + input */
.nfc-auth-form__row {
    display: flex;
    align-items: center;
    background: var(--color-black);
    border-radius: 10px;
    padding-left: 20px;
    gap: 30px;
    min-height: 45px;
}

.nfc-auth-form__label {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-light-gray-2);
    flex-shrink: 0;
    white-space: nowrap;
    min-width: 90px;
    line-height: 1;
}

.nfc-auth-form__input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 5px;
    padding: 12px;
    min-height: 45px;
}

.nfc-auth-form__search-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.nfc-auth-form__input {
    flex: 1;
    border: none;
    outline: none;
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--color-black);
    background: transparent;
}

.nfc-auth-form__input::placeholder {
    color: var(--color-light-gray-4);
}

.nfc-auth-form__input[readonly] {
    color: var(--color-light-gray);
    cursor: not-allowed;
}

.nfc-auth-form__submit-wrap {
    display: flex;
    justify-content: center;
}

.nfc-auth-form__submit {
    min-width: 200px;
    padding: 13px 40px;
    border-radius: 100px;
    background: linear-gradient(187deg, #B5B5B3 3%, #F1F1F1 47%, #B5B5B3 96%);
    border: none;
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-black);
    cursor: pointer;
    transition: opacity 0.2s;
    letter-spacing: 0.02em;
    height: 45px;
}

.nfc-auth-form__submit:hover {
    opacity: 0.85;
}

.nfc-auth-form__submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Loading state */
.nfc-auth__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 60px 0;
}

.nfc-auth__spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-light-gray-2);
    border-top-color: var(--color-teal);
    border-radius: 50%;
    animation: nfc-spin 0.8s linear infinite;
}

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

.nfc-auth__loading-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-light-gray);
}

/* Result card */
.nfc-auth__result[hidden] {
    display: none;
}

.nfc-auth__result-card {
    width: 100%;
    background: var(--color-result-bg);
    border-radius: 10px;
    padding: 40px 30px;
}

.nfc-auth__product-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-black);
    margin: 0 0 16px;
}

.nfc-auth__divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 0 0 30px;
}

/* 3-column product info grid */
.nfc-auth__product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.nfc-auth__col-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-black);
    margin: 0 0 12px;
}

.nfc-auth__col-list {
    list-style: disc;
    padding-left: 18px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nfc-auth__col-list li {
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-black);
}

.nfc-auth__col-list li strong {
    font-weight: 600;
}

.nfc-auth__nfc-note {
    font-size: 13px;
    font-style: italic;
    color: var(--color-light-gray);
    margin-top: 16px;
}

.nfc-auth__product-img {
    width: 100%;
    max-width: 338px;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 10px;
    background: var(--color-result-bg);
    mix-blend-mode: darken;
}

/* Warning (already scanned) */
.nfc-auth__warning {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
}

.nfc-auth__warning-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.nfc-auth__warning-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-error);
}

/* Error card */
.nfc-auth__error-card {
    width: 100%;
    background: var(--color-result-bg);
    border-radius: 10px;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.nfc-auth__error-msg {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.nfc-auth__error-msg-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-top: 2px;
}

.nfc-auth__error-msg-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-error);
    line-height: 1.5;
}

/* Action buttons */
.nfc-auth__action-wrap {
    display: flex;
    justify-content: center;
}

.nfc-auth__action-btn {
    padding: 12px 30px;
    border-radius: 100px;
    background: var(--color-white);
    border: 1px solid var(--color-btn-gray);
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-black);
    cursor: pointer;
    transition: opacity 0.2s;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.nfc-auth__action-btn:hover {
    opacity: 0.85;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .nfc-auth-status .container {
        flex-direction: column;
        text-align: center;
    }

    .nfc-auth-status__icon svg {
        width: 86px;
        height: 86px;
    }

    .nfc-auth-status__text {
        font-size: 15px;
    }

    .nfc-auth {
        padding: 30px 0 50px;
    }

    .nfc-auth__inner {
        gap: 30px;
    }

    .nfc-auth__title {
        font-size: 15px;
    }

    .nfc-auth-form {
        gap: 24px;
    }

    /* Mobile: labels above inputs, no dark row */
    .nfc-auth-form__row {
        flex-direction: column;
        align-items: stretch;
        background: transparent;
        padding-left: 0;
        gap: 8px;
        border-radius: 0;
    }

    .nfc-auth-form__label {
        font-size: 15px;
        font-weight: 700;
        color: var(--color-black);
    }

    .nfc-auth-form__submit-wrap {
        width: 100%;
    }

    .nfc-auth-form__submit {
        width: 100%;
        border-radius: 5px;
        font-size: 13px;
        padding: 12px 20px;
    }

    /* Result grid: single column */
    .nfc-auth__product-grid {
        grid-template-columns: 1fr;
    }

    .nfc-auth__product-img {
        max-width: 372px;
        width: 100%;
        order: -1;
    }

    .nfc-auth__result-card {
        padding: 20px 16px;
    }

    .nfc-auth__error-card {
        padding: 20px 16px;
    }

    .nfc-auth__error-msg {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .nfc-auth__action-btn {
        width: 100%;
    }
}

/* ==========================================================================
   BLOG / EXPLORE — ARCHIVE & SINGLE POST
   Design tokens:
     #191919  Black 1
     #171719  Black
     #4B4B4B  Black 2 / Gray
     #B5B5B3  Light Gray
     #F3F3F3  Light Gray 3
     #F5F5F5  Section bg (related)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */
.page-blog {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.blog-breadcrumb {
    width: 100%;
    max-width: 1200px;
    padding: 0;
}

.blog-breadcrumb__inner {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 35px;
    padding: 0 12px;
    border-radius: 5px;
    background-color: #f3f3f3;
}

.blog-breadcrumb__link {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.5;
    color: #191919;
    text-decoration: none;
    white-space: nowrap;
}

.blog-breadcrumb__link:hover {
    color: #4b4b4b;
}

.blog-breadcrumb__sep {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.blog-breadcrumb__current {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.5;
    color: #b5b5b3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   Blog Hero Banner (archive)
   -------------------------------------------------------------------------- */
.blog-hero {
    width: 100%;
    overflow: hidden;
    align-self: stretch;
}

.blog-hero__inner {
    width: 100%;
    height: 440px;
    position: relative;
}

.blog-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --------------------------------------------------------------------------
   Single Post Hero Banner
   -------------------------------------------------------------------------- */
.single-hero {
    width: 100%;
    overflow: hidden;
}

.single-hero__inner {
    width: 100%;
    height: 440px;
    position: relative;
    overflow: hidden;
}

.single-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --------------------------------------------------------------------------
   KHÁM PHÁ — 3-col article grid section
   -------------------------------------------------------------------------- */
.blog-grid-section {
    padding: 20px 0;
    background: #fff;
    width: 100%;
    max-width: 1366px;
}

.blog-grid-section__inner {
    max-width: 1366px;
    margin: 0 auto;
    padding: 0 83px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;
}

.blog-grid-section__title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.5;
    color: #191919;
    text-align: center;
    width: 100%;
    margin: 0;
}

/* 3-column grid */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    width: 100%;
    max-width: 1200px;
}

.blog-grid-section__cta {
    display: flex;
    justify-content: center;
}

/* --------------------------------------------------------------------------
   Blog Card (shared between grid + related carousel)
   -------------------------------------------------------------------------- */
.blog-card {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 20px 21px;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    transition: background 0.2s ease;
}

.blog-card:hover {
    background: #f9f9f9;
}

.blog-card__img-link {
    display: block;
    text-decoration: none;
}

.blog-card__img-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
}

.blog-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.blog-card__img-wrap:hover .blog-card__img {
    transform: scale(1.03);
}

.blog-card__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
    color: #171719;
}

.blog-card__title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
    color: #171719;
}

.blog-card__title a {
    color: inherit;
    text-decoration: none;
}

.blog-card__title a:hover {
    color: #4b4b4b;
}

.blog-card__excerpt {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    color: #171719;
    margin: 0;
}

/* --------------------------------------------------------------------------
   TÌM HIỂU THÊM — Related posts carousel section
   -------------------------------------------------------------------------- */
.blog-related-section {
    background: #f5f5f5;
    padding: 50px 0;
    position: relative;
    width: 100%;
}

.blog-related-section__inner {
    max-width: 1366px;
    margin: 0 auto;
    padding: 0 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}

.blog-related-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1201px;
}

.blog-related-section__header .pill-btn {
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    flex-shrink: 0;
}

.blog-related-section__title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.5;
    color: #191919;
    margin: 0;
}

/* Carousel viewport */
.blog-related-carousel {
    position: relative;
    width: 100%;
    max-width: 1200px;
    overflow: hidden;
}

.blog-related-carousel__track {
    display: flex;
    gap: 0;
    transition: transform 0.4s ease;
    will-change: transform;
}

/* Related cards are 1/3 width each (show 3 at a time) */
.blog-card--related {
    flex: 0 0 calc(100% / 3);
    max-width: calc(100% / 3);
    background: transparent;
}

.blog-card--related:hover {
    background: transparent;
}

/* Carousel arrows */
.blog-related-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 3px rgba(0, 0, 0, 0.16);
    z-index: 10;
    transition: background 0.2s ease;
}

.blog-related-carousel__arrow:hover {
    background: #fff;
}

.blog-related-carousel__arrow--prev {
    left: -37px;
}

.blog-related-carousel__arrow--next {
    right: -37px;
}

/* Nav dots */
.blog-related-dots {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

.blog-related-dots__dot {
    width: 15px;
    height: 15px;
    border-radius: 100px;
    background: #e4e4e4;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.blog-related-dots__dot--active,
.blog-related-dots__dot:hover {
    background: #171719;
}

/* --------------------------------------------------------------------------
   Single Post — Page layout
   -------------------------------------------------------------------------- */
.page-single-post {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
}

/* --------------------------------------------------------------------------
   Single Post — Hero banner (768px desktop, gradient overlay)
   -------------------------------------------------------------------------- */
.page-single-post .single-hero {
    align-self: stretch;
}

.page-single-post .single-hero__inner {
    height: 768px;
}

.page-single-post .single-hero__inner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 72.34%, rgba(65, 65, 65, 0.8) 100%);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Single Post — Article content (overlaps hero)
   -------------------------------------------------------------------------- */
.page-single-post .container {
    max-width: 1366px;
    margin: 0 auto;
    padding: 0 83px;
    margin-top: -280px;
    position: relative;
    z-index: 1;
    width: 100%;
}

.single-article {
    background: #fff;
    border-radius: 10px;
    padding: 30px 50px 20px;
    max-width: 1202px;
    margin: 0 auto;
}

.single-article__content-wrap {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.single-article__title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.5;
    color: #191919;
    margin: 0;
}

.single-article__content {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    color: #171719;
}

.single-article__content p {
    margin: 0 0 1em;
}

.single-article__featured-img {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
}

.single-article__img {
    width: 100%;
    height: auto;
    max-height: 362px;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

/* Section spacing variant when on single page — full-width breakout */
.blog-related-section--single {
    margin-top: 0;
    align-self: stretch;
}

/* --------------------------------------------------------------------------
   BLOG / EXPLORE — RESPONSIVE (max-width: 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

    .page-blog {
        padding: 0 16px;
    }

    .blog-breadcrumb {
        padding: 0;
        max-width: 100%;
    }

    .blog-breadcrumb__inner {
        padding: 0 4px;
    }

    .blog-hero {
        width: calc(100% + 32px);
        margin-left: -16px;
        margin-right: -16px;
    }

    .blog-hero__inner {
        height: 133px;
    }

    .blog-hero__inner::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 72.34%, rgba(65, 65, 65, 0.8) 100%);
        pointer-events: none;
    }

    .single-hero__inner {
        height: 233px;
    }

    .page-single-post {
        gap: 30px;
        padding: 0 16px;
    }

    .page-single-post .single-hero {
        width: calc(100% + 32px);
        margin-left: -16px;
        margin-right: -16px;
    }

    .page-single-post .single-hero__inner {
        height: 233px;
    }

    .page-single-post .container {
        margin-top: -80px;
        padding: 0;
    }

    .blog-grid-section {
        padding: 0;
        width: 100%;
    }

    .blog-grid-section__inner {
        padding: 0;
        gap: 30px;
    }

    /* Single column on mobile */
    .blog-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
    }

    .blog-card__img-wrap {
        aspect-ratio: 1 / 1;
    }

    .blog-related-section {
        padding: 20px 0;
    }

    .blog-related-section--single {
        width: calc(100% + 32px);
        margin-left: -16px;
        margin-right: -16px;
    }

    .blog-related-section__inner {
        padding: 0 16px;
        gap: 30px;
    }

    .blog-related-section__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .blog-related-section--single .blog-related-section__header .pill-btn {
        display: none;
    }

    /* 2-up on mobile carousel */
    .blog-card--related {
        flex: 0 0 calc(50% - 10px);
        max-width: calc(50% - 10px);
        padding: 0;
        gap: 20px;
    }

    .blog-related-carousel {
        overflow: visible;
    }

    .blog-related-carousel__track {
        gap: 20px;
        overflow: hidden;
        padding: 0 14px;
    }

    .blog-related-carousel__arrow--prev {
        left: -4px;
    }

    .blog-related-carousel__arrow--next {
        right: -4px;
    }

    .blog-related-dots__dot {
        width: 10px;
        height: 10px;
    }

    .blog-related-dots {
        gap: 10px;
    }

    .single-article {
        padding: 20px 20px;
        border-radius: 5px;
    }
}

/* --------------------------------------------------------------------------
   BLOG / EXPLORE — RESPONSIVE (max-width: 414px)
   -------------------------------------------------------------------------- */
@media (max-width: 414px) {

    .blog-hero__inner {
        height: 133px;
    }

    /* Single column on very narrow mobile */
    .blog-card--related {
        flex: 0 0 100%;
        max-width: 100%;
    }
}


/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */

/* --------------------------------------------------------------------------
   BREADCRUMB
   -------------------------------------------------------------------------- */

.contact-breadcrumb {
    background: var(--color-light-gray-3);
    padding: 10px 0;
    font-size: 12px;
    color: var(--color-light-gray);
}

.contact-breadcrumb .container {
    display: flex;
    align-items: center;
    gap: 6px;
}

.contact-breadcrumb a {
    color: var(--color-light-gray);
    transition: color 0.2s;
}

.contact-breadcrumb a:hover {
    color: var(--color-black);
}

.contact-breadcrumb__sep {
    display: flex;
    align-items: center;
}

.contact-breadcrumb__current {
    color: var(--color-black);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   BODY WRAPPER
   -------------------------------------------------------------------------- */

.contact-body {
    padding: 32px 0 48px;
}

/* --------------------------------------------------------------------------
   2-COLUMN LAYOUT
   -------------------------------------------------------------------------- */

.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}

/* --------------------------------------------------------------------------
   LEFT: CONTACT INFO
   -------------------------------------------------------------------------- */

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-info__company {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-black);
    line-height: 1.4;
}

.contact-info__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    margin: 0;
}

.contact-info__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-black);
    flex-wrap: wrap;
}

.contact-info__item--address {
    align-items: flex-start;
}

.contact-info__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
}

.contact-info__icon--top {
    margin-top: 2px;
}

.contact-info__label {
    font-weight: 700;
    white-space: nowrap;
}

.contact-info__value {
    color: var(--color-black);
    font-weight: 400;
    line-height: 1.5;
}

a.contact-info__value:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   SOCIAL LINKS
   -------------------------------------------------------------------------- */

.contact-social {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-social__heading {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-black);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.contact-social__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.contact-social__pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border: 1.5px solid var(--color-border);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-black);
    background: var(--color-white);
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    cursor: pointer;
    white-space: nowrap;
}

.contact-social__pill:hover {
    background: var(--color-black);
    border-color: var(--color-black);
    color: var(--color-white);
}

.contact-social__pill:hover svg path,
.contact-social__pill:hover svg rect,
.contact-social__pill:hover svg circle {
    fill: var(--color-white);
    stroke: none;
}

.contact-social__pill-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   CTA BUTTON
   -------------------------------------------------------------------------- */

.contact-cta-btn {
    display: block;
    width: 100%;
    padding: 14px 24px;
    background: var(--color-black);
    color: var(--color-white);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    border-radius: 4px;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: background 0.2s, opacity 0.2s;
}

.contact-cta-btn:hover {
    background: var(--color-gray);
    color: var(--color-white);
}

/* --------------------------------------------------------------------------
   RIGHT: MAP
   -------------------------------------------------------------------------- */

.contact-map {
    position: relative;
}

.contact-map__wrap {
    position: relative;
    width: 100%;
    height: 300px;
    border-radius: 4px;
    overflow: hidden;
}

.contact-map__iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.contact-map__directions {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--color-black);
    color: var(--color-white);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.2s;
    z-index: 10;
}

.contact-map__directions:hover {
    background: var(--color-gray);
    color: var(--color-white);
}

/* --------------------------------------------------------------------------
   CONTACT PAGE — RESPONSIVE (max-width: 768px)
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

    .contact-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .contact-map__wrap {
        height: 260px;
    }

    .contact-info__company {
        font-size: 15px;
    }

    .contact-social__grid {
        gap: 8px;
    }

    .contact-social__pill {
        font-size: 11px;
        padding: 6px 13px;
    }
}

/* --------------------------------------------------------------------------
   CONTACT PAGE — RESPONSIVE (max-width: 414px)
   -------------------------------------------------------------------------- */

@media (max-width: 414px) {

    .contact-body {
        padding: 20px 0 32px;
    }

    .contact-map__wrap {
        height: 220px;
    }

    .contact-cta-btn {
        font-size: 13px;
        padding: 12px 16px;
    }

    .contact-social__pill {
        font-size: 11px;
        padding: 6px 12px;
    }
}

/* ==========================================================================
   MOBILE RESPONSIVE POLISH — Task 13
   Breakpoints: 1366 → 1024 → 768 → 414 → 375
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CONTAINER: fluid padding 83px → 40px → 16px
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .container {
        padding: 0 40px;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }
}

/* --------------------------------------------------------------------------
   2. HEADER: search overlay full-width on mobile
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .search-overlay {
        padding: 16px;
        height: auto;
    }

    .search-overlay__btn {
        min-width: 100px;
        padding: 0 14px;
    }
}

/* --------------------------------------------------------------------------
   3. HOMEPAGE: 1024px intermediate breakpoint
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    /* Hero */
    .hero {
        height: 500px;
    }

    /* Brand story */
    .brand-story__logo-wrap {
        margin-top: -140px;
    }

    .brand-story__logo {
        width: 280px;
        height: 280px;
    }

    /* Product banner */
    .product-banner {
        padding: 0 40px 60px;
    }

    /* Shop section */
    .shop-section {
        padding: 50px 40px 60px;
    }

    /* Video */
    .video-section {
        padding: 0 40px 60px;
    }

    /* Explore */
    .explore-section {
        padding: 0 40px 60px;
    }
}

/* --------------------------------------------------------------------------
   4. HOMEPAGE 375px: iPhone SE tweaks
   -------------------------------------------------------------------------- */

@media (max-width: 375px) {
    .hero {
        height: 200px;
    }

    .brand-story__logo {
        width: 140px;
        height: 140px;
    }

    .brand-story__logo-wrap {
        margin-top: -70px;
    }

    .shop-card {
        flex: 0 0 130px;
        width: 130px;
    }

    .shop-card__img-wrap {
        width: 130px;
        height: 150px;
    }

    .explore-card {
        flex: 0 0 220px;
        width: 220px;
    }
}

/* --------------------------------------------------------------------------
   5. ABOUT PAGE: 1024px intermediate breakpoint
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .about-breadcrumb .container {
        padding: 0 40px;
    }

    .about-brand-story {
        margin-top: -60px;
    }

    .about-brand-story__inner {
        padding: 0;
    }

    .about-brand-story__content {
        padding: 40px 30px 0;
    }

    .about-quality__inner {
        padding: 0 40px;
    }

    .about-quality__banner-wrap {
        padding: 0 60px;
    }

    .about-hero {
        height: 500px;
    }
}

/* About 375px */
@media (max-width: 375px) {
    .about-hero {
        height: 200px;
    }

    .about-brand-story__img-wrap {
        height: 160px;
    }

    .about-quality__banner {
        height: 150px;
    }
}

/* --------------------------------------------------------------------------
   6. SHOP PAGE: 1024px and 375px tweaks
   -------------------------------------------------------------------------- */

@media (max-width: 375px) {
    .shop-banner__img-wrap {
        height: 160px;
    }

    .shop-banner__title {
        font-size: 15px;
    }

    .shop-grid {
        gap: 12px 10px;
    }

    .shop-grid .shop-card__img-wrap {
        height: 140px;
    }

    .shop-cat-section__title {
        font-size: 16px;
    }
}

/* --------------------------------------------------------------------------
   7. BLOG PAGE: 1024px two-column grid; fix blog-breadcrumb padding; fix blog-grid 3→2→1
   -------------------------------------------------------------------------- */

/* Fix blog breadcrumb at 1024px */
@media (max-width: 1024px) {
    .page-blog {
        padding: 0 40px;
    }

    .blog-breadcrumb {
        max-width: 100%;
    }

    .blog-grid-section__inner {
        padding: 0;
    }

    .blog-related-section__inner {
        padding: 0 40px;
    }

    .blog-related-carousel__arrow--prev {
        left: -20px;
    }

    .blog-related-carousel__arrow--next {
        right: -20px;
    }

    .page-single-post {
        padding: 0 40px;
    }

    .page-single-post .single-hero {
        width: calc(100% + 80px);
        margin-left: -40px;
        margin-right: -40px;
    }

    .page-single-post .container {
        padding: 0;
        margin-top: -200px;
    }

    .page-single-post .single-hero__inner {
        height: 500px;
    }

    /* 2-column grid at 1024 (tablet) */
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Blog hero full bleed */
    .blog-hero {
        width: calc(100% + 80px);
        margin-left: -40px;
        margin-right: -40px;
    }

    .blog-hero__inner {
        height: 300px;
    }

    .single-hero__inner {
        height: 320px;
    }
}

/* Blog 375px: ensure 1 column */
@media (max-width: 375px) {
    .blog-card--related {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .blog-hero__inner {
        height: 110px;
    }

    .single-article {
        padding: 16px;
    }
}

/* --------------------------------------------------------------------------
   8. SINGLE PRODUCT PAGE: 1024px intermediate; 375px tweaks
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .product-breadcrumb__inner {
        padding: 0 40px;
    }

    .product-detail__inner {
        padding: 0 40px;
        gap: 36px;
    }

    .product-gallery {
        flex: 0 0 380px;
        max-width: 380px;
    }

    .product-thumb {
        width: 80px;
        height: 80px;
    }

    .product-tabs__inner {
        padding: 0 40px;
    }

    .related-products__inner {
        padding: 0 40px;
    }
}

@media (max-width: 375px) {
    .product-info__name {
        font-size: 16px;
    }

    .swatch-btn {
        width: 90px;
        height: 42px;
    }

    .product-info__add-to-cart {
        width: 100%;
        flex: none;
    }

    .product-info__actions {
        flex-direction: column;
    }

    .qty-selector {
        width: 100%;
    }

    .product-tabs__tab {
        font-size: 12px;
    }

    .product-tabs__nav-sep {
        margin: 0 12px;
    }
}

/* --------------------------------------------------------------------------
   9. NFC CHECK PAGE: 375px tweaks
   -------------------------------------------------------------------------- */

@media (max-width: 375px) {
    .nfc-banner {
        height: 140px;
    }
}

/* --------------------------------------------------------------------------
   10. CONTACT PAGE: 1024px intermediate; 375px tweaks
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .contact-layout {
        gap: 24px;
    }
}

@media (max-width: 375px) {
    .contact-body {
        padding: 16px 0 28px;
    }

    .contact-map__wrap {
        height: 200px;
    }

    .contact-cta-btn {
        font-size: 13px;
        padding: 12px 16px;
    }

    .contact-social__pill {
        font-size: 10px;
        padding: 5px 10px;
    }
}

/* --------------------------------------------------------------------------
   11. FOOTER: 375px tweaks
   -------------------------------------------------------------------------- */

@media (max-width: 375px) {
    .site-footer {
        padding: 20px 12px;
    }

    .footer-logo {
        width: 120px;
        height: 120px;
    }

    .footer-newsletter-input-wrap {
        max-width: 100%;
    }

    .footer-social-btn {
        width: 26px;
        height: 26px;
    }

    .footer-social-btn svg {
        width: 14px;
        height: 14px;
    }
}

/* ==========================================================================
   CATEGORY PAGE
   ========================================================================== */

.page-category {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    background: var(--color-white);
}

.page-category .shop-breadcrumb {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
}

/* Layout: sidebar + content */
.cat-layout {
    display: flex;
    gap: 12px;
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
    align-items: flex-start;
}

/* --- Sidebar --- */
.cat-sidebar {
    width: 220px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    border-radius: 5px;
    background: var(--color-white);
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 100vh;
}

.cat-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 70px;
    padding: 12px;
    background: var(--color-gray);
    border-radius: 5px;
    color: var(--color-white);
}

.cat-sidebar__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.cat-sidebar__title {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
}

.cat-sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cat-sidebar__link {
    display: flex;
    align-items: center;
    height: 70px;
    padding: 8px 20px;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-black-4);
    transition: background 0.15s;
}

.cat-sidebar__link:hover {
    background: var(--color-light-gray-3);
}

.cat-sidebar__link--active {
    background: var(--color-light-gray-2);
}

/* --- Sort/filter bar --- */
.cat-sort {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 70px;
    padding: 12px 20px;
    background: var(--color-light-gray-2);
    border-radius: 5px;
    width: 100%;
}

.cat-sort__label {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-gray);
    white-space: nowrap;
}

.cat-sort__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 6px 12px;
    background: var(--color-white);
    border: 1px solid var(--color-light-gray-4);
    border-radius: 5px;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-black);
    cursor: pointer;
    white-space: nowrap;
    min-width: 150px;
    transition: border-color 0.15s;
}

.cat-sort__btn:hover {
    border-color: var(--color-gray);
}

.cat-sort__btn--active {
    border-color: var(--color-black);
}

.cat-sort__dropdown {
    min-width: 200px;
    justify-content: space-between;
    gap: 8px;
}

.cat-sort__dropdown-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* --- Content area --- */
.cat-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* --- Product grid --- */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 12px;
    padding: 0 30px 30px;
}

.cat-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.cat-card__img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-white);
}

.cat-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
    display: block;
}

.cat-card__wish {
    position: absolute;
    top: 14px;
    right: 11px;
    width: 36px;
    height: 36px;
    border-radius: 100px;
    background: var(--color-light-gray-3);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    padding: 6px 8px;
    transition: background 0.15s;
}

.cat-card__wish:hover {
    background: var(--color-border);
}

.cat-card__wish svg {
    width: 16px;
    height: 15px;
    display: block;
}

.cat-card__info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
    width: 100%;
}

.cat-card__category {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-teal);
}

.cat-card__name {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-black-1);
    text-transform: uppercase;
}

.cat-card__volume {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-black-1);
}

.cat-card__price {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-black);
}

/* --- Mobile tabs (hidden on desktop) --- */
.cat-tabs {
    display: none;
}

/* --- Mobile category list (hidden on desktop) --- */
.cat-mobile-categories {
    display: none;
}

/* --- Mobile "View all" button (hidden on desktop) --- */
.cat-mobile-viewall {
    display: none;
}

/* --- Category page — Mobile --- */
@media (max-width: 768px) {
    .page-category {
        gap: 20px;
        padding: 0 16px;
    }

    .page-category .shop-breadcrumb {
        width: 100%;
    }

    /* Hide sidebar on mobile */
    .cat-sidebar {
        display: none;
    }

    .cat-layout {
        width: 100%;
        flex-direction: column;
    }

    /* Show tabs on mobile */
    .cat-tabs {
        display: block;
        width: 100%;
    }

    .cat-tabs__bar {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        background: var(--color-light-gray-3);
        padding: 20px 0 0;
    }

    .cat-tabs__tab {
        flex: 1;
        padding: 8px;
        background: none;
        border: none;
        font-family: var(--font-family);
        font-weight: 600;
        font-size: 13px;
        color: var(--color-border);
        text-align: center;
        cursor: pointer;
        border-bottom: 2px solid transparent;
        transition: color 0.15s;
    }

    .cat-tabs__tab--active {
        color: var(--color-black);
        border-bottom-color: var(--color-black);
    }

    .cat-tabs__divider {
        width: 1px;
        height: 20px;
        background: var(--color-border);
        flex-shrink: 0;
    }

    /* Sort bar mobile */
    .cat-sort {
        height: auto;
        padding: 0 30px;
        background: none;
        justify-content: space-between;
    }

    .cat-sort__label {
        display: none;
    }

    .cat-sort__btn {
        min-width: 98px;
        height: 35px;
    }

    .cat-sort__dropdown {
        min-width: 131px;
    }

    /* Product grid mobile: 2 columns */
    .cat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 16px;
        padding: 0;
    }

    .cat-card {
        gap: 12px;
    }

    .cat-card__img-wrap {
        height: 178px;
        aspect-ratio: auto;
        border-radius: 5px;
        background: transparent;
    }

    .cat-card__img {
        border-radius: 5px;
    }

    .cat-card__wish {
        width: 24px;
        height: 24px;
        top: 8px;
        right: 8px;
        padding: 4px;
    }

    .cat-card__wish svg {
        width: 12px;
        height: 11px;
    }

    .cat-card__category {
        font-size: 11px;
    }

    .cat-card__volume {
        font-size: 11px;
    }

    .cat-card__price {
        font-size: 13px;
    }

    /* Show mobile category list */
    .cat-mobile-categories {
        width: 100%;
        padding: 0 16px;
    }

    .cat-mobile-categories__list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .cat-mobile-categories__item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60px;
        padding: 8px 20px;
        background: var(--color-white);
        border-radius: 10px;
        font-family: var(--font-family);
        font-weight: 600;
        font-size: 13px;
        color: var(--color-black);
        text-decoration: none;
        transition: background 0.15s;
    }

    .cat-mobile-categories__item:hover {
        background: var(--color-light-gray-3);
    }

    .cat-mobile-categories__item--active {
        background: var(--color-gray);
        color: var(--color-white);
    }

    .cat-mobile-categories__item--active:hover {
        background: var(--color-gray);
    }

    .cat-mobile-categories__item svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    .cat-mobile-categories__footer {
        display: flex;
        justify-content: center;
        padding: 30px 0;
    }

    /* Show "View all" on mobile */
    .cat-mobile-viewall {
        display: flex;
        justify-content: center;
        padding: 0 0 20px;
        width: 100%;
    }

    /* Content wraps in background on mobile */
    .cat-content {
        background: var(--color-light-gray-3);
        gap: 30px;
        padding: 20px 0;
    }
}

/* --------------------------------------------------------------------------
   12. GLOBAL TOUCH TARGET MINIMUM (44px) — ensure interactive elements
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .mobile-hamburger,
    .mobile-profile {
        width: 44px;
        height: 44px;
    }

    .mobile-nav__link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .footer-social-btn {
        min-width: 36px;
        min-height: 36px;
    }

    .pill-btn {
        min-height: 44px;
        padding: 10px 20px;
    }

    .shop-card__wish {
        width: 40px;
        height: 40px;
    }

    .contact-social__pill {
        min-height: 44px;
    }

    .blog-related-carousel__arrow {
        width: 40px;
        height: 40px;
    }
}

/* ==========================================================================
   WOOCOMMERCE — SHARED FOUNDATIONS
   ========================================================================== */

/* Page container — classic (My Account) */
.woocommerce-account .woocommerce {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 60px 60px;
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--color-black);
    line-height: 1.5;
}

/* Page container — block-based (Cart, Checkout) */
.woocommerce-cart .page-content,
.woocommerce-checkout .page-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 60px 60px;
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--color-black);
    line-height: 1.5;
}

/* Page titles */
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-account .entry-title {
    font-family: var(--font-family);
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 30px;
    color: var(--color-black);
}

/* WooCommerce breadcrumb */
.woocommerce-cart .woocommerce-breadcrumb,
.woocommerce-checkout .woocommerce-breadcrumb,
.woocommerce-account .woocommerce-breadcrumb {
    background: var(--color-light-gray-3);
    padding: 8px 60px;
    font-size: 13px;
    color: var(--color-light-gray);
    margin-bottom: 0;
}

.woocommerce-cart .woocommerce-breadcrumb a,
.woocommerce-checkout .woocommerce-breadcrumb a,
.woocommerce-account .woocommerce-breadcrumb a {
    color: var(--color-light-gray);
    text-decoration: none;
}

.woocommerce-cart .woocommerce-breadcrumb a:hover,
.woocommerce-checkout .woocommerce-breadcrumb a:hover,
.woocommerce-account .woocommerce-breadcrumb a:hover {
    color: var(--color-teal);
}

/* Form inputs */
.woocommerce-cart input[type="text"],
.woocommerce-cart input[type="number"],
.woocommerce-cart input[type="email"],
.woocommerce-cart input[type="tel"],
.woocommerce-cart input[type="password"],
.woocommerce-cart select,
.woocommerce-cart textarea,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="number"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="number"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="tel"],
.woocommerce-account input[type="password"],
.woocommerce-account select,
.woocommerce-account textarea {
    height: 48px;
    border-radius: 5px;
    border: 1px solid var(--color-border);
    padding: 0 15px;
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--color-black);
    background: var(--color-white);
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.woocommerce-cart textarea,
.woocommerce-checkout textarea,
.woocommerce-account textarea {
    height: auto;
    min-height: 100px;
    padding: 12px 15px;
}

.woocommerce-cart input:focus,
.woocommerce-checkout input:focus,
.woocommerce-account input:focus,
.woocommerce-cart select:focus,
.woocommerce-checkout select:focus,
.woocommerce-account select:focus,
.woocommerce-cart textarea:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-account textarea:focus {
    border-color: var(--color-teal);
    outline: none;
}

/* Primary buttons (teal) */
.woocommerce-cart .button,
.woocommerce-checkout .button,
.woocommerce-account .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 30px;
    border-radius: 5px;
    background: var(--color-teal);
    color: var(--color-white);
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
    text-decoration: none;
    letter-spacing: 0.5px;
}

.woocommerce-cart .button:hover,
.woocommerce-checkout .button:hover,
.woocommerce-account .button:hover {
    opacity: 0.85;
    color: var(--color-white);
}

.woocommerce-cart .button:disabled,
.woocommerce-checkout .button:disabled,
.woocommerce-account .button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Tables */
.woocommerce-cart table,
.woocommerce-checkout table,
.woocommerce-account table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.woocommerce-cart table th,
.woocommerce-checkout table th,
.woocommerce-account table th {
    background: var(--color-light-gray-3);
    font-weight: 600;
    text-transform: uppercase;
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    font-size: 11px;
    letter-spacing: 0.5px;
}

.woocommerce-cart table td,
.woocommerce-checkout table td,
.woocommerce-account table td {
    padding: 15px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

/* Links */
.woocommerce-cart .woocommerce a:not(.button),
.woocommerce-checkout .woocommerce a:not(.button),
.woocommerce-account .woocommerce a:not(.button) {
    color: var(--color-black);
    transition: color 0.2s;
}

.woocommerce-cart .woocommerce a:not(.button):hover,
.woocommerce-checkout .woocommerce a:not(.button):hover,
.woocommerce-account .woocommerce a:not(.button):hover {
    color: var(--color-teal);
}

/* Notices */
.woocommerce-message {
    background: rgba(97, 207, 194, 0.1);
    border-left: 4px solid var(--color-teal);
    padding: 15px 20px;
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--color-black);
    margin-bottom: 20px;
    border-top: none;
}

.woocommerce-message .button {
    float: right;
    font-size: 11px;
    height: 36px;
    padding: 0 20px;
}

.woocommerce-error {
    background: rgba(253, 71, 90, 0.08);
    border-left: 4px solid var(--color-error);
    padding: 15px 20px;
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--color-black);
    margin-bottom: 20px;
    list-style: none;
    border-top: none;
}

.woocommerce-info {
    background: rgba(97, 207, 194, 0.1);
    border-left: 4px solid var(--color-teal);
    padding: 15px 20px;
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--color-black);
    margin-bottom: 20px;
    border-top: none;
}

/* Responsive — shared */
@media (max-width: 768px) {
    .woocommerce-account .woocommerce {
        padding: 20px;
    }

    .woocommerce-cart .page-content,
    .woocommerce-checkout .page-content {
        padding: 20px;
    }

    .woocommerce-cart .woocommerce-breadcrumb,
    .woocommerce-checkout .woocommerce-breadcrumb,
    .woocommerce-account .woocommerce-breadcrumb {
        padding: 8px 20px;
    }
}

/* ==========================================================================
   WOOCOMMERCE — CART PAGE (Block-based)
   ========================================================================== */

/* Cart block container */
.woocommerce-cart .wp-block-woocommerce-cart {
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--color-black);
}

/* Cart items header row */
.woocommerce-cart .wc-block-cart-items__header {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-black);
}

/* Product thumbnail */
.woocommerce-cart .wc-block-cart-item__image img {
    border-radius: 10px;
    object-fit: cover;
}

/* Product name */
.woocommerce-cart .wc-block-components-product-name {
    font-weight: 600;
    font-size: 13px;
    font-family: var(--font-family);
    color: var(--color-black);
    text-decoration: none;
}

.woocommerce-cart .wc-block-components-product-name:hover {
    color: var(--color-teal);
}

/* Product price */
.woocommerce-cart .wc-block-components-product-price {
    font-family: var(--font-family);
    color: var(--color-black);
}

/* Quantity selector */
.woocommerce-cart .wc-block-components-quantity-selector {
    border: 1px solid var(--color-border);
    border-radius: 5px;
    overflow: hidden;
}

.woocommerce-cart .wc-block-components-quantity-selector__input {
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--color-black);
}

.woocommerce-cart .wc-block-components-quantity-selector__button {
    color: var(--color-black);
    transition: color 0.2s;
}

.woocommerce-cart .wc-block-components-quantity-selector__button:hover {
    color: var(--color-teal);
}

/* Remove link */
.woocommerce-cart .wc-block-cart-item__remove-link {
    color: var(--color-light-gray);
    font-size: 12px;
    font-family: var(--font-family);
    text-decoration: none;
    transition: color 0.2s;
}

.woocommerce-cart .wc-block-cart-item__remove-link:hover {
    color: var(--color-error);
}

/* Cart item rows */
.woocommerce-cart .wc-block-cart-items__row {
    border-bottom: 1px solid var(--color-border);
}

/* Cart sidebar (totals) */
.woocommerce-cart .wc-block-cart__sidebar {
    font-family: var(--font-family);
}

/* Totals title */
.woocommerce-cart .wc-block-cart__totals-title {
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Totals items */
.woocommerce-cart .wc-block-components-totals-item__label {
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--color-black);
}

.woocommerce-cart .wc-block-components-totals-item__value {
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--color-black);
}

/* Totals footer (grand total) */
.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-weight: 700;
    font-size: 15px;
}

/* Totals wrapper borders */
.woocommerce-cart .wc-block-components-totals-wrapper {
    border-color: var(--color-border);
}

/* Coupon form */
.woocommerce-cart .wc-block-components-totals-coupon__content .wc-block-components-text-input input {
    border: 1px solid var(--color-border);
    border-radius: 5px;
    font-family: var(--font-family);
    font-size: 13px;
}

.woocommerce-cart .wc-block-components-totals-coupon__content .wc-block-components-text-input input:focus {
    border-color: var(--color-teal);
    outline: none;
}

.woocommerce-cart .wc-block-components-totals-coupon__button {
    background: var(--color-teal);
    color: var(--color-white);
    border: none;
    border-radius: 5px;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.woocommerce-cart .wc-block-components-totals-coupon__button:hover {
    opacity: 0.85;
}

/* Proceed to checkout button */
.woocommerce-cart .wc-block-cart__submit-button {
    background: var(--color-teal) !important;
    color: var(--color-white) !important;
    border: none;
    border-radius: 5px;
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-height: 56px;
    transition: opacity 0.2s;
}

.woocommerce-cart .wc-block-cart__submit-button:hover {
    opacity: 0.85;
}

/* Empty cart */
.woocommerce-cart .wc-block-cart__empty-cart__title {
    font-family: var(--font-family);
    color: var(--color-light-gray);
}

/* Empty cart product grid */
.woocommerce-cart .wc-block-grid__product-title {
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-black);
}

.woocommerce-cart .wc-block-grid__product-image img {
    border-radius: 10px;
}

.woocommerce-cart .wc-block-grid__product-price {
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--color-black);
}

.woocommerce-cart .wc-block-grid__product .wp-block-button__link {
    background: var(--color-teal);
    color: var(--color-white);
    border-radius: 5px;
    font-family: var(--font-family);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: opacity 0.2s;
}

.woocommerce-cart .wc-block-grid__product .wp-block-button__link:hover {
    opacity: 0.85;
}

/* Shipping address link */
.woocommerce-cart .wc-block-components-totals-shipping__change-address__link {
    color: var(--color-teal);
    font-family: var(--font-family);
    font-size: 12px;
}

/* Cart page responsive */
@media (max-width: 768px) {
    .woocommerce-cart .wc-block-cart__submit-button {
        min-height: 48px;
    }
}

/* ==========================================================================
   WOOCOMMERCE — CHECKOUT PAGE (Block-based)
   ========================================================================== */

/* Checkout block container */
.woocommerce-checkout .wp-block-woocommerce-checkout {
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--color-black);
}

/* Checkout step headings */
.woocommerce-checkout .wc-block-components-checkout-step__heading {
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
}

.woocommerce-checkout .wc-block-components-checkout-step__description {
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--color-light-gray);
}

/* Step container borders */
.woocommerce-checkout .wc-block-components-checkout-step {
    border-color: var(--color-border);
}

/* Text inputs */
.woocommerce-checkout .wc-block-components-text-input input,
.woocommerce-checkout .wc-block-components-text-input textarea {
    border: 1px solid var(--color-border);
    border-radius: 5px;
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--color-black);
}

.woocommerce-checkout .wc-block-components-text-input input:focus,
.woocommerce-checkout .wc-block-components-text-input textarea:focus {
    border-color: var(--color-teal);
    outline: none;
}

/* Text input labels */
.woocommerce-checkout .wc-block-components-text-input label {
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--color-light-gray);
}

/* Select inputs (country/state dropdowns) */
.woocommerce-checkout .wc-block-components-select-input select,
.woocommerce-checkout .wc-block-components-country-input select {
    border: 1px solid var(--color-border);
    border-radius: 5px;
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--color-black);
}

.woocommerce-checkout .wc-block-components-select-input select:focus,
.woocommerce-checkout .wc-block-components-country-input select:focus {
    border-color: var(--color-teal);
    outline: none;
}

/* Checkbox styling */
.woocommerce-checkout .wc-block-components-checkbox__input[type="checkbox"] {
    accent-color: var(--color-teal);
}

.woocommerce-checkout .wc-block-components-checkbox__label {
    font-family: var(--font-family);
    font-size: 13px;
}

/* Order summary sidebar */
.woocommerce-checkout .wc-block-components-sidebar {
    font-family: var(--font-family);
}

/* Order summary title */
.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-panel__button {
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-black);
}

/* Order summary items */
.woocommerce-checkout .wc-block-components-order-summary-item__description {
    font-family: var(--font-family);
}

.woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-product-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--color-black);
    text-decoration: none;
}

.woocommerce-checkout .wc-block-components-order-summary-item__image img {
    border-radius: 5px;
}

/* Totals items */
.woocommerce-checkout .wc-block-components-totals-item__label {
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--color-black);
}

.woocommerce-checkout .wc-block-components-totals-item__value {
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--color-black);
}

/* Totals wrapper borders */
.woocommerce-checkout .wc-block-components-totals-wrapper {
    border-color: var(--color-border);
}

/* Totals footer (grand total) */
.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-weight: 700;
    font-size: 15px;
}

/* Payment methods */
.woocommerce-checkout .wc-block-components-radio-control__input {
    accent-color: var(--color-teal);
}

.woocommerce-checkout .wc-block-components-radio-control__label {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 13px;
}

.woocommerce-checkout .wc-block-components-radio-control__description {
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--color-light-gray);
}

/* Radio control accordion (payment method details) */
.woocommerce-checkout .wc-block-components-radio-control-accordion-content {
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--color-light-gray);
}

/* Place order button */
.woocommerce-checkout .wc-block-components-checkout-place-order-button {
    background: var(--color-teal) !important;
    color: var(--color-white) !important;
    border: none;
    border-radius: 5px;
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-height: 56px;
    transition: opacity 0.2s;
}

.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
    opacity: 0.85;
}

/* Return to cart link */
.woocommerce-checkout .wc-block-components-checkout-return-to-cart-button {
    color: var(--color-black);
    font-family: var(--font-family);
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s;
}

.woocommerce-checkout .wc-block-components-checkout-return-to-cart-button:hover {
    color: var(--color-teal);
}

/* Coupon link */
.woocommerce-checkout .wc-block-components-totals-coupon-link {
    color: var(--color-teal);
    font-family: var(--font-family);
    font-size: 13px;
}

/* Coupon form */
.woocommerce-checkout .wc-block-components-totals-coupon__content .wc-block-components-text-input input {
    border: 1px solid var(--color-border);
    border-radius: 5px;
}

.woocommerce-checkout .wc-block-components-totals-coupon__button {
    background: var(--color-teal);
    color: var(--color-white);
    border: none;
    border-radius: 5px;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: opacity 0.2s;
}

.woocommerce-checkout .wc-block-components-totals-coupon__button:hover {
    opacity: 0.85;
}

/* Shipping options */
.woocommerce-checkout .wc-block-components-totals-shipping__via {
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--color-light-gray);
}

.woocommerce-checkout .wc-block-components-totals-shipping__change-address__link {
    color: var(--color-teal);
    font-family: var(--font-family);
    font-size: 12px;
}

/* Validation errors */
.woocommerce-checkout .wc-block-components-validation-error {
    color: var(--color-error);
    font-family: var(--font-family);
    font-size: 12px;
}

/* Notice banners */
.woocommerce-checkout .wc-block-components-notice-banner.is-error {
    border-left-color: var(--color-error);
}

.woocommerce-checkout .wc-block-components-notice-banner.is-success {
    border-left-color: var(--color-teal);
}

/* Checkout page responsive */
@media (max-width: 768px) {
    .woocommerce-checkout .wc-block-components-checkout-place-order-button {
        min-height: 48px;
    }
}

/* ==========================================================================
   WOOCOMMERCE — MY ACCOUNT PAGE
   ========================================================================== */

/* Two-column layout */
.woocommerce-account .woocommerce {
    display: flex;
    gap: 40px;
}

/* Sidebar navigation */
.woocommerce-account .woocommerce-MyAccount-navigation {
    flex-shrink: 0;
    width: 220px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background: var(--color-light-gray-3);
    border-radius: 10px;
    overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid var(--color-light-gray-2);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 14px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-black);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all 0.2s;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    color: var(--color-teal);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    color: var(--color-teal);
    border-left-color: var(--color-teal);
    background: var(--color-white);
}

/* Content area */
.woocommerce-account .woocommerce-MyAccount-content {
    flex: 1;
    min-width: 0;
}

/* Dashboard */
.woocommerce-account .woocommerce-MyAccount-content > p {
    font-size: 13px;
    line-height: 1.8;
}

.woocommerce-account .woocommerce-MyAccount-content a {
    color: var(--color-teal);
    text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-content a:hover {
    text-decoration: underline;
}

/* Orders table */
.woocommerce-account .woocommerce-orders-table .button {
    height: 36px;
    padding: 0 16px;
    font-size: 11px;
}

/* Order status badges */
.woocommerce-account .woocommerce-orders-table .order-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
}

/* WooCommerce uses "on-hold", "processing", "completed", "cancelled" etc. as classes on the <td> —
   but status text is inline. Style via nth-child or rely on text color from WooCommerce.
   We add a general badge style and color the most common statuses via attribute selectors
   where possible, plus a fallback light gray background. */

.woocommerce-account table td.woocommerce-orders-table__cell-order-status {
    font-size: 11px;
    font-weight: 600;
}

/* Order detail */
.woocommerce-account .woocommerce-order-details .shop_table {
    margin-bottom: 30px;
}

.woocommerce-account .order-again .button {
    margin-top: 10px;
}

/* Customer details (order view) */
.woocommerce-account .woocommerce-customer-details {
    display: flex;
    gap: 30px;
    margin-top: 30px;
}

.woocommerce-account .woocommerce-customer-details .woocommerce-column {
    flex: 1;
    background: var(--color-light-gray-3);
    border-radius: 10px;
    padding: 20px;
}

.woocommerce-account .woocommerce-customer-details .woocommerce-column h2 {
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.woocommerce-account .woocommerce-customer-details address {
    font-size: 13px;
    line-height: 1.8;
    font-style: normal;
}

/* Addresses page */
.woocommerce-account .woocommerce-Addresses {
    display: flex;
    gap: 30px;
}

.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
    flex: 1;
    background: var(--color-light-gray-3);
    border-radius: 10px;
    padding: 25px;
}

.woocommerce-account .woocommerce-Addresses .woocommerce-Address header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
}

.woocommerce-account .woocommerce-Addresses .woocommerce-Address header h3 {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    border: none;
}

.woocommerce-account .woocommerce-Addresses .woocommerce-Address header .edit {
    font-size: 11px;
    color: var(--color-teal);
    font-weight: 600;
}

.woocommerce-account .woocommerce-Addresses address {
    font-size: 13px;
    line-height: 1.8;
    font-style: normal;
}

/* Edit address / account details form */
.woocommerce-account .woocommerce-EditAccountForm .form-row,
.woocommerce-account .woocommerce-address-fields .form-row {
    margin-bottom: 15px;
}

.woocommerce-account .woocommerce-EditAccountForm .form-row label,
.woocommerce-account .woocommerce-address-fields .form-row label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.woocommerce-account .woocommerce-EditAccountForm .form-row .required,
.woocommerce-account .woocommerce-address-fields .form-row .required {
    color: var(--color-teal);
}

/* Fieldset (password change) */
.woocommerce-account fieldset {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 25px;
    margin: 20px 0;
}

.woocommerce-account fieldset legend {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0 10px;
}

/* Downloads table */
.woocommerce-account .woocommerce-table--order-downloads .button {
    height: 36px;
    padding: 0 16px;
    font-size: 11px;
}

/* Login / Register page */
.woocommerce-account .u-columns {
    display: flex;
    gap: 40px;
}

.woocommerce-account .u-columns .u-column-1,
.woocommerce-account .u-columns .u-column1,
.woocommerce-account .u-columns .col-1 {
    flex: 1;
}

.woocommerce-account .u-columns .u-column-2,
.woocommerce-account .u-columns .u-column2,
.woocommerce-account .u-columns .col-2 {
    flex: 1;
}

.woocommerce-account .u-columns h2 {
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
}

.woocommerce-account .woocommerce-form-login .form-row,
.woocommerce-account .woocommerce-form-register .form-row {
    margin-bottom: 15px;
}

.woocommerce-account .woocommerce-form-login .form-row label,
.woocommerce-account .woocommerce-form-register .form-row label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.woocommerce-account .woocommerce-LostPassword a {
    font-size: 13px;
    color: var(--color-teal);
}

/* Remember me checkbox */
.woocommerce-account .woocommerce-form-login .woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin: 10px 0;
}

.woocommerce-account .woocommerce-form-login .woocommerce-form__label-for-checkbox input[type="checkbox"] {
    accent-color: var(--color-teal);
    width: auto;
    height: auto;
}

/* My Account responsive */
@media (max-width: 768px) {
    .woocommerce-account .woocommerce {
        flex-direction: column;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation {
        width: 100%;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        display: flex;
        overflow-x: auto;
        border-radius: 5px;
        -webkit-overflow-scrolling: touch;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul li {
        border-bottom: none;
        flex-shrink: 0;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
        padding: 12px 16px;
        white-space: nowrap;
        font-size: 11px;
        border-left: none;
        border-bottom: 3px solid transparent;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
        border-left-color: transparent;
        border-bottom-color: var(--color-teal);
    }

    /* Addresses stack */
    .woocommerce-account .woocommerce-Addresses {
        flex-direction: column;
    }

    .woocommerce-account .woocommerce-customer-details {
        flex-direction: column;
    }

    /* Login/register stack */
    .woocommerce-account .u-columns {
        flex-direction: column;
    }
}
}

/* =====================================================================
   WISHLIST PAGE
   ===================================================================== */

/* No sidebar on wishlist — grid takes full width */
.page-wishlist .cat-layout {
    display: block;
}

.page-wishlist__grid {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
}

/* Wishlist empty state */
.wishlist-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 20px;
}

.wishlist-empty__text {
    font-size: 16px;
    color: var(--color-light-gray);
    margin-bottom: 24px;
}

.wishlist-empty__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}