/* ============================================================
   Bagisto-specific tweaks layered on top of the original theme.
   ============================================================ */

/* The add-to-cart <form> must not disturb the absolutely-positioned
   .quick-add button inside .product-media. */
.product-card .quick-add-form { margin: 0; display: contents; }

/* The "view product" link in the card actions should match the original
   round icon buttons (original CSS only targets <button>). */
.product-card .card-actions a.qv-link {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background: rgba(255, 255, 255, .94);
    color: var(--mw-dark);
    font-size: .88rem;
    box-shadow: var(--mw-shadow-sm);
    text-decoration: none;
    opacity: 0;
    transform: translateX(12px);
    transition: var(--mw-transition);
}
.product-card:hover .card-actions a.qv-link,
.product-card:focus-within .card-actions a.qv-link {
    opacity: 1;
    transform: translateX(0);
}

/* Flash messages */
.alert { border-radius: 12px; margin-bottom: 1.75rem; }

/* ============================================================
   Native pages (checkout / account / compare) also load Tailwind.
   Tailwind's `.collapse` utility = visibility:collapse, which hides the
   Bootstrap header nav (.navbar-collapse.collapse). Keep it visible — Bootstrap
   still controls the responsive show/hide via `display`.
   ============================================================ */
.gsi-native-page .site-header .navbar-collapse { visibility: visible; }

/* ============================================================
   Native pages (checkout / account) render Bagisto's Tailwind form
   controls, but loading Bootstrap alongside distorts their padding/size.
   Normalize them to a clean, consistent input on these pages.
   ============================================================ */
.gsi-native-page #app input[type="text"],
.gsi-native-page #app input[type="email"],
.gsi-native-page #app input[type="password"],
.gsi-native-page #app input[type="number"],
.gsi-native-page #app input[type="tel"],
.gsi-native-page #app input[type="search"],
.gsi-native-page #app input[type="url"],
.gsi-native-page #app input:not([type]),
.gsi-native-page #app select,
.gsi-native-page #app textarea {
    padding: 0.65rem 0.95rem;
    font-size: 0.95rem;
    line-height: 1.5;
    height: auto;
    min-height: 0;
}

/* ============================================================
   Google Website Translate — hide its injected banner/toolbar and
   keep the page from being pushed down.
   ============================================================ */
#google_translate_element { display: none !important; }
.goog-te-banner-frame, .goog-te-balloon-frame { display: none !important; }
.skiptranslate { display: none !important; }
body { top: 0 !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
font[style] { background: none !important; box-shadow: none !important; }

/* Wishlist heart form must not disturb the absolutely-positioned card-actions icons */
.product-card .card-actions .wishlist-form { display: contents; margin: 0; }

/* ============================================================
   Native pages (checkout / account / compare) — recolor Bagisto's
   default blue accents to the God Shema brand gold/teal.
   ============================================================ */
.gsi-native-page #app .text-blue-600,
.gsi-native-page #app .text-blue-700,
.gsi-native-page #app .text-blue-500 { color: #b8923a !important; }
.gsi-native-page #app .bg-blue-600,
.gsi-native-page #app .bg-blue-500 { background-color: #b8923a !important; }
.gsi-native-page #app .bg-blue-700 { background-color: #9c7a2e !important; }
.gsi-native-page #app .border-blue-600,
.gsi-native-page #app .border-blue-700,
.gsi-native-page #app .border-blue-500 { border-color: #b8923a !important; }
.gsi-native-page #app .primary-button { background-color: #b8923a !important; border-color: #9c7a2e !important; color: #fff !important; }
.gsi-native-page #app .secondary-button { border-color: #b8923a !important; color: #9c7a2e !important; }
.gsi-native-page #app .hover\:bg-blue-600:hover { background-color: #9c7a2e !important; }
.gsi-native-page #app input[type=checkbox],
.gsi-native-page #app input[type=radio] { accent-color: #b8923a; }
.gsi-native-page #app .ring-blue-600,
.gsi-native-page #app .focus\:ring-blue-600:focus { --tw-ring-color: #b8923a !important; }
.gsi-native-page #app .text-navyBlue,
.gsi-native-page #app .text-blue-400,
.gsi-native-page #app [class*="icon-"] { color: #9c7a2e !important; }
.gsi-native-page #app .bg-navyBlue { background-color: #14506b !important; }

/* ============================================================
   Account section: match the storefront's "elevated & soft" card
   design (soft shadows, rounded corners, panel for the content) —
   replacing Bagisto's flat thin-bordered boxes.
   ============================================================ */
/* Sidebar cards (profile card + nav card) */
.gsi-account-page #app .panel-side > div {
    box-shadow: 0 12px 40px rgba(20, 80, 107, .07) !important;
    border-radius: 18px !important;
    border: 1px solid rgba(20, 80, 107, .06) !important;
    background: #fff;
    overflow: hidden;
}
/* Sidebar nav items — softer dividers, brand hover */
.gsi-account-page #app .panel-side a[class*="justify-between"]:hover { background: #faf6ec !important; }
.gsi-account-page #app .panel-side a[class*="justify-between"].bg-zinc-100,
.gsi-account-page #app .panel-side a[class*="justify-between"][class*="bg-zinc-100"] { background: #faf6ec !important; }

/* Content column -> elevated panel like the storefront */
.gsi-account-page #app .container > .flex.items-start > .flex-auto, .gsi-account-page #app .flex.items-start > .flex-auto.mx-4 {
    background: #fff;
    border: 1px solid rgba(20, 80, 107, .06);
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(20, 80, 107, .07);
    padding: 30px 34px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Modal panel -> rounded + soft shadow */
.gsi-native-page #app [role="dialog"] > div,
.gsi-native-page #app .fixed [class*="bg-white"][class*="rounded"] {
    border-radius: 18px !important;
    box-shadow: 0 30px 80px rgba(10, 52, 70, .25) !important;
}

/* Buttons inside the account: pill + brand (matches storefront btn-gold) */
.gsi-native-page #app .primary-button,
.gsi-native-page #app button[class*="bg-navyBlue"],
.gsi-native-page #app .secondary-button {
    border-radius: 50rem !important;
    padding-left: 1.6rem !important;
    padding-right: 1.6rem !important;
}

/* Inputs: rounded + soft like the storefront forms */
.gsi-native-page #app input[type="text"],
.gsi-native-page #app input[type="email"],
.gsi-native-page #app input[type="password"],
.gsi-native-page #app input[type="tel"],
.gsi-native-page #app input[type="number"],
.gsi-native-page #app select,
.gsi-native-page #app textarea {
    border-radius: 12px !important;
    border-color: #e6eaed !important;
    background: #fbfcfd;
}
.gsi-native-page #app input:focus,
.gsi-native-page #app select:focus,
.gsi-native-page #app textarea:focus {
    border-color: #b8923a !important;
    outline: none !important;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(184, 146, 58, .22) !important;
}

/* ============================================================
   ACCOUNT SECTION — match the storefront login/register/contact forms
   (input size, gold pill buttons), tighten the sidebar, and lay form
   fields out two-up. Covers every account page.
   ============================================================ */
/* --- Inputs: same size/look as the storefront .form-control --- */
.gsi-native-page #app input[type="text"],
.gsi-native-page #app input[type="email"],
.gsi-native-page #app input[type="password"],
.gsi-native-page #app input[type="tel"],
.gsi-native-page #app input[type="number"],
.gsi-native-page #app input[type="date"],
.gsi-native-page #app input[type="search"],
.gsi-native-page #app select,
.gsi-native-page #app textarea {
    padding: .55rem .85rem !important;
    font-size: .95rem !important;
    line-height: 1.5 !important;
    border-radius: 10px !important;
    border: 1px solid #d8dde1 !important;
    background: #fff !important;
    min-height: 0 !important;
    height: auto !important;
}
.gsi-native-page #app label,
.gsi-native-page #app .label-text { font-size: .9rem !important; }

/* --- Buttons: the storefront gold pill (.btn-gold) --- */
.gsi-native-page #app .primary-button {
    background: var(--mw-gold, #b8923a) !important;
    border: 1px solid var(--mw-gold-dark, #9c7a2e) !important;
    color: #fff !important;
    border-radius: 50rem !important;
    padding: .6rem 1.6rem !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    box-shadow: 0 6px 18px rgba(184,146,58,.30);
}
.gsi-native-page #app .secondary-button {
    background: transparent !important;
    border: 1px solid var(--mw-gold, #b8923a) !important;
    color: var(--mw-gold-dark, #9c7a2e) !important;
    border-radius: 50rem !important;
    padding: .6rem 1.6rem !important;
    font-weight: 600 !important;
}

/* --- Sidebar: smaller/tighter (was 342px min, oversized padding) --- */
.gsi-account-page #app .panel-side { min-width: 250px !important; max-width: 270px !important; gap: 1.25rem !important; }
.gsi-account-page #app .panel-side .rounded-xl[class*="px-5"] { padding: 14px 16px !important; }
.gsi-account-page #app .panel-side .h-\[60px\].w-\[60px\] { height: 42px !important; width: 42px !important; }
.gsi-account-page #app .panel-side .text-2xl { font-size: 1.05rem !important; }
.gsi-account-page #app .panel-side a[class*="px-6"][class*="py-5"] { padding: .75rem 1rem !important; }
.gsi-account-page #app .panel-side .text-lg,
.gsi-account-page #app .panel-side .text-xl { font-size: .95rem !important; }
.gsi-account-page #app .panel-side svg { width: 18px !important; height: 18px !important; }

/* --- Two-column form fields — ONLY on real edit/data-entry forms.
   Bagisto wraps each field in <div class="mb-4>; datagrid search forms and the
   logout form do NOT, so `form:has(> div.mb-4)` targets edit forms only and
   never breaks the Orders/Wishlist datagrids or the Logout button. --- */
.gsi-account-page #app form:has(> div.mb-4) {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: .25rem 24px;
    align-items: start;
}
.gsi-account-page #app form:has(> div.mb-4) > h2,
.gsi-account-page #app form:has(> div.mb-4) > [class*="mb-8"],
.gsi-account-page #app form:has(> div.mb-4) > button,
.gsi-account-page #app form:has(> div.mb-4) > div.mb-4:has(textarea),
.gsi-account-page #app form:has(> div.mb-4) > div.mb-4:has(input[type="file"]),
.gsi-account-page #app form:has(> div.mb-4) > div.mb-4:has(input[type="checkbox"]),
.gsi-account-page #app form:has(> div.mb-4) > div.mb-4:has(.icon-camera),
.gsi-account-page #app form:has(> div.mb-4) > div:has(button[type="submit"]) { grid-column: 1 / -1 !important; }
@media (max-width: 768px) { .gsi-account-page #app form:has(> div.mb-4) { grid-template-columns: 1fr; } }

/* ============================================================
   Account: sidebar removed entirely (user request). Hide the nav
   column on every account page; the content panel fills the width.
   ============================================================ */
.gsi-account-page #app .container .flex.items-start > div:has(> .panel-side) { display: none !important; }
.gsi-account-page #app .container .flex.items-start > .flex-auto { width: 100%; }

/* Quantity changer (cart/wishlist): the number is a <p>, and Bootstrap's
   p{margin-bottom:1rem} centers its margin-box in the flex, knocking the
   digit off-center vs the − / + icons. Zero it. */
.gsi-native-page #app .icon-minus + p,
.gsi-native-page #app .flex.items-center.border-navyBlue p { margin: 0 !important; line-height: 1 !important; }

/* ============================================================
   Header account dropdown (shown only when logged in).
   ============================================================ */
.account-menu {
    min-width: 210px;
    border-radius: 14px;
    box-shadow: 0 16px 44px rgba(20, 80, 107, .14);
    border: 1px solid rgba(20, 80, 107, .08);
    padding: .4rem;
    margin-top: .5rem;
}
.account-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    border-radius: 9px;
    padding: .58rem .85rem;
    font-size: .95rem;
    font-weight: 500;
    color: #1f2d3d;
}
.account-menu .dropdown-item i { width: 18px; text-align: center; color: #b8923a; font-size: .95rem; }
.account-menu .dropdown-item:hover,
.account-menu .dropdown-item:focus { background: #faf6ec; color: #9c7a2e; }
.account-menu form { margin: 0; }
.account-menu .dropdown-divider { margin: .35rem .2rem; }

/* ============================================================
   Account section — mobile fit. Grid/flex items default to
   min-width:auto, so a wide child (e.g. wishlist "Move To Cart"
   row) expands the content panel past the viewport. Cap it.
   ============================================================ */
.gsi-account-page #app .container > .flex.items-start > .flex-auto,
.gsi-account-page #app .flex.items-start > .flex-auto.mx-4 { min-width: 0; max-width: 100%; }

@media (max-width: 768px) {
    .gsi-account-page #app .container > .flex.items-start > .flex-auto,
    .gsi-account-page #app .flex.items-start > .flex-auto.mx-4 { padding: 18px 14px !important; }
    /* Wishlist action row (qty changer + Move To Cart) wraps instead of overflowing */
    .gsi-native-page #app .flex.gap-5:has(> .border-navyBlue) { flex-wrap: wrap; gap: .6rem !important; }
}

/* Remove the "Subscribe to newsletter" field from the profile edit form (user request) */
.gsi-account-page #app form div:has(> #is-subscribed) { display: none !important; }

/* ============================================================
   Confirm modal — robust viewport centering. Bagisto centers the
   panel with absolute + translate, which drifts off-center on mobile
   depending on the containing block / any transformed ancestor.
   Pin it with fixed + inset:0 + margin:auto instead.
   ============================================================ */
.gsi-native-page #app [class*="max-w-[475px]"] {
    position: fixed !important;
    inset: 0 !important;
    margin: auto !important;
    transform: none !important;
    width: 90% !important;
    max-width: 460px !important;
    height: -moz-fit-content !important;
    height: fit-content !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
}

/* Checkout responsive grid. Tailwind never compiled the `max-md:grid-cols-[1fr]`
   arbitrary class I added (it wasn't in Bagisto's build), so the grid stayed
   2-column on mobile and the 442px summary sidebar overflowed. Define it here:
   2-col (steps | sticky summary) from 768px up; single column + full-width below. */
.gsi-native-page #app [class*="grid-cols-[1fr_auto]"] > * { min-width: 0; }
@media (max-width: 767px) {
    .gsi-native-page #app [class*="grid-cols-[1fr_auto]"] {
        grid-template-columns: 1fr !important;
        max-width: 100%;
    }
    .gsi-native-page #app [class*="grid-cols-[1fr_auto]"] > * {
        width: auto !important;
        max-width: 100% !important;
    }
}

/* Patent notice line at the very bottom of every page's footer */
.footer-patent {
    margin: 0;
    font-size: .78rem;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .55);
    text-align: center;
}

/* ============================================================
   Branded error page (404 / 500 / 503)
   ============================================================ */
.error-page { padding-top: 4.5rem; padding-bottom: 6rem; }
.error-badge {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background: #faf6ec;
    color: var(--mw-gold, #D4AF37);
    font-size: 2rem;
    box-shadow: 0 12px 34px rgba(184, 146, 58, .20);
}
.error-code {
    font-family: var(--mw-font-heading, 'Playfair Display', serif);
    font-size: clamp(5.5rem, 16vw, 11rem);
    font-weight: 700;
    line-height: .92;
    letter-spacing: -.03em;
    color: var(--mw-gold, #D4AF37);
    margin-top: .4rem;
}
.error-title { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }