/*
 * Storefront-only CSS. Never load this on admin pages.
 *
 * Everything else in the design comes from Tailwind utility classes exactly as
 * the approved theme used them; only rules Tailwind cannot express live here.
 */

/* Local Gilroy family used by Tailwind's `font-sans` utility. */
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Font-Gilroy-VH-Full/SVN-Gilroy Thin.otf') format('opentype');
    font-style: normal;
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Font-Gilroy-VH-Full/SVN-Gilroy Xlight.otf') format('opentype');
    font-style: normal;
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Font-Gilroy-VH-Full/SVN-Gilroy Light.otf') format('opentype');
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Font-Gilroy-VH-Full/SVN-Gilroy Regular.otf') format('opentype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Font-Gilroy-VH-Full/SVN-Gilroy Medium.otf') format('opentype');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Font-Gilroy-VH-Full/SVN-Gilroy SemiBold.otf') format('opentype');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Font-Gilroy-VH-Full/SVN-Gilroy Bold.otf') format('opentype');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Font-Gilroy-VH-Full/SVN-Gilroy XBold.otf') format('opentype');
    font-style: normal;
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Font-Gilroy-VH-Full/SVN-Gilroy Black.otf') format('opentype');
    font-style: normal;
    font-weight: 900;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Font-Gilroy-VH-Full/SVN-Gilroy Thin Italic.otf') format('opentype');
    font-style: italic;
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Font-Gilroy-VH-Full/SVN-Gilroy Xlight Italic.otf') format('opentype');
    font-style: italic;
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Font-Gilroy-VH-Full/SVN-Gilroy Light Italic.otf') format('opentype');
    font-style: italic;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Font-Gilroy-VH-Full/SVN-Gilroy Italic.otf') format('opentype');
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Font-Gilroy-VH-Full/SVN-Gilroy Medium Italic.otf') format('opentype');
    font-style: italic;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Font-Gilroy-VH-Full/SVN-Gilroy SemiBold Italic.otf') format('opentype');
    font-style: italic;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Font-Gilroy-VH-Full/SVN-Gilroy Bold Italic.otf') format('opentype');
    font-style: italic;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Font-Gilroy-VH-Full/SVN-Gilroy XBold Italic.otf') format('opentype');
    font-style: italic;
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Font-Gilroy-VH-Full/SVN-Gilroy Black Italic.otf') format('opentype');
    font-style: italic;
    font-weight: 900;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Font-Gilroy-VH-Full/SVN-Gilroy Heavy.otf') format('opentype');
    font-style: normal;
    font-weight: 950;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Font-Gilroy-VH-Full/SVN-Gilroy Heavy Italic.otf') format('opentype');
    font-style: italic;
    font-weight: 950;
    font-display: swap;
}

body.font-sans {
    font-family: 'Gilroy', sans-serif;
}

/* The theme used weight 300 for most body copy; use regular Gilroy so text is
 * easier to read throughout the storefront while heading weights stay intact. */
body.font-sans .font-light {
    font-weight: 500;
}

/* Slanted primary block behind the desktop navigation bar. */
.nav-clip-path {
    /* Corners: top-left, top-right, bottom-right, bottom-left */
    clip-path: polygon(0 0, 100% 0, calc(100% - 40px) 100%, 0 100%);
}

@media (max-width: 1024px) {
    .nav-clip-path {
        /* Disable the diagonal cut on mobile/tablet, as in the source theme. */
        clip-path: none;
    }
}

/* Mobile navigation panel: hidden until the hamburger toggles it. */
[data-role="mobile-nav"] {
    display: none;
}

[data-role="mobile-nav"].is-open {
    display: block;
}

/* Async form feedback (quote/contact), styled to match the theme palette. */
[data-role="form-status"]:empty {
    display: none;
}

[data-role="form-status"] {
    border-radius: 0.5rem;
    font-size: 13px;
    line-height: 1.5;
    padding: 0.75rem 1rem;
}

[data-role="form-status"].is-success {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}

[data-role="form-status"].is-error {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
}

[data-role="field-error"]:empty {
    display: none;
}

[data-role="field-error"] {
    color: #dc2626;
    display: block;
    font-size: 11.5px;
    margin-top: 0.35rem;
}

/*
 * Anchor jumps (e.g. the product page's "Nhận báo giá" link to the contact
 * form) scroll instead of teleporting.
 */
html {
    scroll-behavior: smooth;
}