/* ── Global: no rounded corners anywhere ────────────────────────────────────
   This rule sits at the top of the last-loaded stylesheet so it wins over
   Bootstrap, styles.css, and every component CSS file.
────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
    border-radius: 0 !important;
}

/* ── Global horizontal-overflow guard + sticky-header anchor offset ──────────
   A) The full-bleed hero uses width:100vw + a negative-margin breakout. 100vw
      counts the scrollbar width on desktop, so it overflows the body by a few
      px and produces a stray horizontal scrollbar. `overflow-x: clip` removes
      that overflow WITHOUT creating a scroll container, so a position:sticky
      header keeps sticking (plain `overflow: hidden` would break it).
   B) `scroll-padding-top` keeps in-page anchor targets clear of the ~64–82px
      sticky header when the browser jumps to a #fragment (90px = clearance).
──────────────────────────────────────────────────────────────────────────── */
html, body {
    overflow-x: clip;
}

html {
    scroll-padding-top: 90px;
}

.spinner-border {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: middle;
    border: 0.2em solid currentColor;
    border-right-color: transparent;
    border-radius: 0 !important;
    animation: spinner-border .75s linear infinite;
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

@keyframes spinner-border {
    to { transform: rotate(360deg); }
}

/* Add to cart button loading state */
.add-to-cart-btn,
.btn-add-to-cart,
[data-action="add-to-cart"] {
    position: relative;
    transition: all 0.3s ease;
}

.add-to-cart-btn:disabled,
.btn-add-to-cart:disabled,
[data-action="add-to-cart"]:disabled {
    opacity: 0.8;
    cursor: not-allowed;
}

.add-to-cart-btn .spinner-border,
.btn-add-to-cart .spinner-border,
[data-action="add-to-cart"] .spinner-border {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -0.5rem;
    margin-top: -0.5rem;
}

/* Make sure text is hidden during loading */
.add-to-cart-btn.loading span,
.btn-add-to-cart.loading span,
[data-action="add-to-cart"].loading span {
    opacity: 0;
}

/* Support for different button styles */
.tf-btn .spinner-border {
    color: inherit;
}

.btn-fill .spinner-border {
    color: #fff;
}

.btn-white .spinner-border {
    color: #111;
}

/* ===== MODERN HAMBURGER MENU STYLES ===== */

/* Hamburger Button */
.hamburger-menu-btn {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 0;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 1000;
    visibility: visible !important;
    opacity: 1 !important;
}

.hamburger-menu-btn:hover {
    background: rgba(228, 49, 49, 0.1);
    transform: scale(1.05);
}

.hamburger-menu-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(228, 49, 49, 0.25);
}

/* SVG Hamburger Icon */
.hamburger-icon {
    width: 24px;
    height: 24px;
    transition: all 0.3s ease;
}

.hamburger-icon path {
    stroke: #000000 !important;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: all 0.3s ease;
}

/* Hamburger Animation */
.hamburger-menu-btn[aria-expanded="true"] .hamburger-icon path:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.hamburger-menu-btn[aria-expanded="true"] .hamburger-icon path:nth-child(2) {
    opacity: 0;
    transform: scale(0);
}

.hamburger-menu-btn[aria-expanded="true"] .hamburger-icon path:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Ensure hamburger button is visible on all screen sizes */
@media (max-width: 768px) {
    .hamburger-menu-btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .hamburger-icon {
        width: 24px;
        height: 24px;
    }
    
    .hamburger-icon path {
        stroke: #000000 !important;
    }
}

/* Offcanvas Styling */
.offcanvas {
    border: none;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
}

/* C) Cap the mobile offcanvas menu so it never exceeds the viewport on small
   phones (Bootstrap defaults to a fixed 400px width, wider than 360/375/390px
   screens). Mirrors the #mbAccount / #mbBloggerAccount cap further down. */
#mobileMenu.offcanvas {
    width: min(100vw - 1rem, 400px) !important;
    max-width: 100%;
}

.offcanvas-header {
    padding: 1.5rem;
    border-bottom: 1px solid #f0f0f0;
    background: linear-gradient(135deg, var(--primary, #E43131) 0%, #c62828 100%);
    color: white;
}

.offcanvas-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.mobile-logo {
    filter: brightness(0) invert(1);
    max-height: 40px;
    width: auto;
}

.btn-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.btn-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.btn-close::before {
    content: "×";
    font-size: 1.5rem;
    color: white;
    font-weight: 300;
}

/* Mobile Navigation */
.mobile-navigation {
    padding: 1rem 0;
}

/* Mobile Menu Sections */
.mobile-menu-section {
    margin-bottom: 2rem;
}

.mobile-menu-section:last-child {
    margin-bottom: 0;
}

.mobile-menu-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--secondary, #4D4E4F);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
    padding: 0 1.5rem;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 0.5rem;
}

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

.mobile-menu-item {
    margin: 0;
    border-bottom: 1px solid #f8f9fa;
    position: relative;
}

.mobile-menu-item:last-child {
    border-bottom: none;
}

.mobile-menu-link {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    color: var(--main, #181818);
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.mobile-menu-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(228, 49, 49, 0.1), transparent);
    transition: left 0.5s ease;
}

.mobile-menu-link:hover::before {
    left: 100%;
}

.mobile-menu-link:hover {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
    color: var(--primary, #E43131);
    transform: translateX(var(--mm-shift, 5px));
    text-decoration: none;
}

.mobile-menu-link:active {
    transform: translateX(var(--mm-shift, 5px)) scale(0.98);
}

/* D) RTL: flip the hover/active nudge so it slides toward the inline-start
   (left) in Arabic/Kurdish instead of the LTR default. Direction-agnostic via
   --mm-shift, so the prefers-reduced-motion `transform:none` still wins. */
body.rtl .mobile-menu-link,
[dir="rtl"] .mobile-menu-link {
    --mm-shift: -5px;
}

.mobile-menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(228, 49, 49, 0.1);
    border-radius: 0;
    margin-inline-end: 1rem; /* D) logical: gap follows text direction (RTL-safe) */
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.mobile-menu-link:hover .mobile-menu-icon {
    background: rgba(228, 49, 49, 0.2);
    transform: scale(1.1);
}

.mobile-menu-icon svg {
    color: var(--primary, #E43131);
    transition: all 0.3s ease;
}

.mobile-menu-link:hover .mobile-menu-icon svg {
    color: var(--primary, #E43131);
    transform: scale(1.1);
}

.mobile-menu-icon .icon {
    color: var(--primary, #E43131);
    font-size: 18px;
    transition: all 0.3s ease;
}

.mobile-menu-link:hover .mobile-menu-icon .icon {
    color: var(--primary, #E43131);
    transform: scale(1.1);
}

/* Category and Brand Icons */
.category-icon,
.brand-icon {
    width: 20px;
    height: 20px;
    object-fit: cover;
    border-radius: 0;
}

/* Mobile Menu Badge */
.mobile-menu-badge {
    background: var(--primary, #E43131);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 0;
    margin-inline-start: auto; /* D) logical: push badge to the trailing edge (RTL-safe) */
    min-width: 20px;
    text-align: center;
}

/* Mobile Submenu */
.mobile-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #f8f9fa;
    border-inline-start: 3px solid var(--primary, #E43131); /* D) accent on inline-start (RTL-safe) */
    margin-inline-start: 1.5rem; /* D) logical indent (RTL-safe) */
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
}

.mobile-menu-item:hover .mobile-submenu {
    max-height: 200px;
}

.mobile-submenu-link {
    display: block;
    padding: 0.75rem 1.5rem;
    color: var(--secondary, #4D4E4F);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border-inline-start: 2px solid transparent; /* D) logical accent edge (RTL-safe) */
}

.mobile-submenu-link:hover {
    background: rgba(228, 49, 49, 0.1);
    color: var(--primary, #E43131);
    border-inline-start-color: var(--primary, #E43131); /* D) RTL-safe */
    text-decoration: none;
}

/* Offcanvas Body */
.offcanvas-body {
    padding: 0;
    background: white;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .hamburger-menu-btn {
        width: 36px;
        height: 36px;
    }
    
    .hamburger-icon {
        width: 24px;
        height: 24px;
    }
    
    .hamburger-icon path {
        stroke: #000000 !important;
    }
    
    .mobile-menu-link {
        padding: 0.875rem 1.25rem;
        font-size: 0.95rem;
    }
    
    .mobile-menu-icon {
        width: 36px;
        height: 36px;
        margin-inline-end: 0.875rem; /* D) logical: RTL-safe */
    }
    
    .offcanvas-header {
        padding: 1.25rem;
    }
    
    .mobile-menu-section-title {
        padding: 0 1.25rem;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .offcanvas {
        background: #1a1a1a;
        color: #fff;
    }
    
    .offcanvas-header {
        background: linear-gradient(135deg, var(--primary, #E43131) 0%, #c62828 100%);
        border-bottom-color: #2d3748;
    }
    
    .mobile-menu-link {
        border-bottom-color: #2d3748;
    }
    
    .mobile-menu-link:hover {
        background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
        color: var(--primary, #E43131);
    }
    
    .mobile-menu-icon {
        background: rgba(228, 49, 49, 0.2);
    }
    
    .mobile-menu-link:hover .mobile-menu-icon {
        background: rgba(228, 49, 49, 0.3);
    }
    
    .mobile-submenu {
        background: #2d3748;
        border-inline-start-color: var(--primary, #E43131); /* D) RTL-safe */
    }
    
    .mobile-submenu-link {
        color: #a0aec0;
    }
    
    .mobile-submenu-link:hover {
        background: rgba(228, 49, 49, 0.2);
        color: var(--primary, #E43131);
    }
}

/* Animation Keyframes */
@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Stagger animation for menu items */
.mobile-menu-item {
    animation: fadeInUp 0.5s ease forwards;
    opacity: 0;
}

.mobile-menu-item:nth-child(1) { animation-delay: 0.1s; }
.mobile-menu-item:nth-child(2) { animation-delay: 0.2s; }
.mobile-menu-item:nth-child(3) { animation-delay: 0.3s; }
.mobile-menu-item:nth-child(4) { animation-delay: 0.4s; }
.mobile-menu-item:nth-child(5) { animation-delay: 0.5s; }
.mobile-menu-item:nth-child(6) { animation-delay: 0.6s; }
.mobile-menu-item:nth-child(7) { animation-delay: 0.7s; }

/* ── Page-Title Banner (matches admin safe-zone widget) ───────────────────────────
   Banner: 2560 × 423 px (aspect 6.05:1)
   TEXT & LOGO SAFE AREA: centre 1546 px wide (≈ 60.4 % of 2560 px)
   Tablet visible area  : centre 1855 px wide
   Keep numbers in sync with static_pages/admin/css/page_title_banner_widget.css
   ────────────────────────────────────────────────────────────────────────────── */

/* ─ Base state: image banner ─────────────────────────────────────────────────── */
.page-title[style*="background-image"] {
    /* Exact 2560:423 ratio — height is driven purely by viewport width */
    aspect-ratio: 2560 / 423;

    /* Zero out ALL padding from styles.css (base + every breakpoint).
       Vertical centering is handled by flex below; adding padding would
       inflate the total height on top of the aspect-ratio value.        */
    padding: 0 !important;
    min-height: 0 !important;

    /* Clip the .row's ±15 px negative margins so they never cause x-scroll */
    overflow: hidden;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;

    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* ─ Ensure padding:0 wins over the ≥992 px rule in styles.css ───────────────── */
@media (min-width: 992px) {
    .page-title[style*="background-image"] {
        padding: 0 !important;
        min-height: 0 !important;
    }
}

/* ─ Mobile: the raw aspect-ratio gives ~62 px on a 375 px phone — too flat.
     Override to a comfortable fixed height; image stays cover-cropped.      ─── */
@media (max-width: 767px) {
    .page-title[style*="background-image"] {
        aspect-ratio: auto;
        min-height: 100px !important;
    }
}

/* ─ Safe zone: content centred in the 1546 px TEXT & LOGO SAFE AREA ─────────── */
.page-title[style*="background-image"] .container-full {
    /* border-box: padding is included in 100 % width → can never overflow */
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;

    /* Horizontal inset = half the strip between banner edge and safe-area edge.
       On viewports narrower than 1546 px the safe-area is the full viewport,
       so a 20 px floor keeps content away from the screen edge.               */
    padding-left:  max(20px, calc((100% - 1546px) / 2));
    padding-right: max(20px, calc((100% - 1546px) / 2));

    position: relative;
    z-index: 1;
}

/* ─ Semi-transparent dark overlay (replaces opaque white from styles.css) ────── */
.page-title[style*="background-image"]::after {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.45) 0%,
        rgba(0, 0, 0, 0.28) 100%
    ) !important;
}

/* ─ Text colour: white over the dark overlay ────────────────────────────────── */
.page-title[style*="background-image"] .heading,
.page-title[style*="background-image"] .breadcrumbs,
.page-title[style*="background-image"] .breadcrumbs a,
.page-title[style*="background-image"] .breadcrumbs li {
    color: #fff !important;
}

.page-title[style*="background-image"] .breadcrumbs a:hover {
    color: rgba(255, 255, 255, 0.72) !important;
}

/* Dynamic page title bars ({% page_title_frame %} + PageTitleAppearance admin) */
.tc-page-title-custom {
    position: relative;
}

/* Desktop + mobile background images (--pt-bg-* set inline from PageTitleAppearance) */
@media (max-width: 767px) {
    .tc-page-title-bg-responsive {
        background-image: var(--pt-bg-mobile, var(--pt-bg-desktop)) !important;
    }
}

.tc-page-title-edit-btn.tc-section-edit-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 21;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(30, 30, 30, 0.88);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    backdrop-filter: blur(6px);
}

.tc-page-title-edit-btn.tc-section-edit-btn:hover {
    background: rgba(59, 130, 246, 0.92);
    color: #fff;
}

.tc-page-title-custom[style*="background-image"]::after {
    display: none !important;
}

.tc-page-title-custom .heading {
    color: var(--pt-title-color, inherit);
    font-size: var(--pt-title-size, clamp(1.5rem, 4vw + 1rem, 2.25rem));
}

.tc-page-title-custom ul.breadcrumbs a.link {
    color: var(--pt-bc-link, inherit);
}

.tc-page-title-custom ul.breadcrumbs li:last-child {
    color: var(--pt-bc-current, inherit);
}

/* Homepage featured / exclusive / preorder: keep 2 columns on small phones (global grid uses 1 col ≤576px).
   Benefits section uses a single column on mobile — see benefits_slider.css */
@media (max-width: 576px) {
    .tc-featured-section .tf-grid-layout.tf-col-2,
    .tc-exclusive-section .tf-grid-layout.tf-col-2,
    .tc-preorder-section .tf-grid-layout.tf-col-2 {
        grid-template-columns: repeat(2, 1fr) !important;
        column-gap: 10px !important;
        row-gap: 20px !important;
    }
}

/* Shop product listing (all products, category, brand, etc.): 2-column grid on small phones */
@media (max-width: 576px) {
    .tf-grid-layout.wrapper-shop.tc-shop-listing-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        column-gap: 10px !important;
        row-gap: 20px !important;
    }
}

/* Product cards & list rows: hide short description on small screens */
@media (max-width: 767px) {
    .product-list-card .card-product-info .product-description,
    .card-product.style-list p.description {
        display: none !important;
    }
}

/* ----- My Account & storefront account pages (responsive) ----- */
.my-account-wrap {
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 1199px) {
    .my-account-wrap {
        gap: clamp(1.25rem, 4vw, 2.5rem);
    }

    .sidebar-account {
        padding: clamp(1.25rem, 4vw, 2.5rem);
    }

    .sidebar-account .my-account-nav .my-account-nav-item {
        font-size: clamp(1rem, 2.8vw, 1.25rem);
        line-height: 1.35;
        padding: 12px 16px;
    }
}

@media (max-width: 991px) {
    .my-account-wrap {
        flex-direction: column;
        gap: 1.25rem;
    }

    .my-account-wrap .my-account-content {
        width: 100%;
        min-width: 0;
    }

    /* Theme hides this at ≥992px; keep it usable on small viewports (above bottom nav if any) */
    .btn-sidebar-account {
        display: flex !important;
        align-items: center;
        justify-content: center;
        top: auto;
        bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
        left: 0;
        z-index: 1025;
    }

    body.rtl .btn-sidebar-account {
        left: auto;
        right: 0;
    }

    .btn-sidebar-account button {
        box-shadow: 0 2px 12px rgba(15, 23, 42, 0.12);
    }

    #mbAccount.offcanvas,
    #mbBloggerAccount.offcanvas {
        width: min(100vw - 1rem, 400px) !important;
        max-width: 100%;
    }

    #mbAccount .offcanvas-body,
    #mbBloggerAccount .offcanvas-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    #mbAccount .my-account-nav .my-account-nav-item,
    #mbBloggerAccount .my-account-nav .my-account-nav-item {
        font-size: 1rem;
        padding: 12px 14px;
    }
}

/* Account profile / password / address forms: stack columns on narrow screens */
@media (max-width: 575px) {
    .my-account-content form .cols {
        flex-direction: column;
        gap: 0;
    }

    .account-details .form-account-details {
        padding: 1rem 1rem !important;
    }

    .account-details .d-flex.align-items-center.gap-3 {
        flex-direction: column;
        align-items: flex-start !important;
    }
}

/* Orders table + any wide account content */
.account-orders .wrap-account-order,
.my-account-content .wrap-account-order {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.account-orders .wrap-account-order table,
.my-account-content .wrap-account-order table {
    min-width: 520px;
}

/* Page title strips: avoid edge-to-edge text on phones */
.page-title .container-full,
.page-title .container {
    padding-left: max(15px, env(safe-area-inset-left, 0px));
    padding-right: max(15px, env(safe-area-inset-right, 0px));
}

/* ── Product Card default style (Site Config: product card chrome) ───────────
   Background from --product-card-chrome-bg (set in admin Site Configuration).
   html[data-product-card-chrome] toggles this block vs a plain card.
────────────────────────────────────────────────────────────────────────── */

html[data-product-card-chrome="on"] .card-product.product-list-card:has(.card-product-media > .card-product-wrapper.card-style-default),
html[data-product-card-chrome="on"]
    .card-product.single-product-component:has(.card-product-media > .card-product-wrapper.card-style-default) {
    background: var(--product-card-chrome-bg, var(--gradient));
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 8px;
    overflow: hidden;
}

html[data-product-card-chrome="on"]
    .card-product.product-list-card:has(.card-product-media > .card-product-wrapper.card-style-default)
    .card-product-media > .card-product-wrapper.card-style-default,
html[data-product-card-chrome="on"]
    .card-product.single-product-component:has(.card-product-media > .card-product-wrapper.card-style-default)
    .card-product-media > .card-product-wrapper.card-style-default {
    border-radius: 8px 8px 0 0;
}

html[data-product-card-chrome="on"]
    .card-product.product-list-card:has(.card-product-media > .card-product-wrapper.card-style-default)
    > .card-product-info,
html[data-product-card-chrome="on"]
    .card-product.single-product-component:has(.card-product-media > .card-product-wrapper.card-style-default)
    > .card-product-info {
    background-color: transparent;
    border-radius: 0 0 8px 8px;
}

html[data-product-card-chrome="off"]
    .card-product.product-list-card:has(.card-product-media > .card-product-wrapper.card-style-default),
html[data-product-card-chrome="off"]
    .card-product.single-product-component:has(.card-product-media > .card-product-wrapper.card-style-default) {
    background: transparent;
    border-radius: 0;
    overflow: visible;
}

html[data-product-card-chrome="off"]
    .card-product.product-list-card:has(.card-product-media > .card-product-wrapper.card-style-default)
    .card-product-media > .card-product-wrapper.card-style-default,
html[data-product-card-chrome="off"]
    .card-product.single-product-component:has(.card-product-media > .card-product-wrapper.card-style-default)
    .card-product-media > .card-product-wrapper.card-style-default {
    border-radius: 8px;
}

html[data-product-card-chrome="off"]
    .card-product.product-list-card:has(.card-product-media > .card-product-wrapper.card-style-default)
    > .card-product-info,
html[data-product-card-chrome="off"]
    .card-product.single-product-component:has(.card-product-media > .card-product-wrapper.card-style-default)
    > .card-product-info {
    border-radius: 0;
}

/* ── Product card: image / name / price zones ───────────────────────────── */

.product-list-card,
.single-product-component {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--white, #fff);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.22s ease;
}

.product-list-card:hover,
.single-product-component:hover {
    border-color: rgba(0, 0, 0, 0.11);
}

.product-list-card .card-product-media,
.single-product-component .card-product-media {
    flex: 0 0 auto;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(0, 0, 0, 0.02);
}

.product-list-card .card-product-media .card-product-wrapper,
.single-product-component .card-product-media .card-product-wrapper {
    border-radius: 0;
    transform: none;
}

.product-list-card .card-product-media .card-product-wrapper:hover,
.single-product-component .card-product-media .card-product-wrapper:hover {
    transform: none;
}

.product-list-card .card-product-info,
.single-product-component .card-product-info {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 14px 16px 16px !important;
    border-top: none;
    background: var(--white, #fff);
}

.product-list-card .card-product-name,
.single-product-component .card-product-name {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.product-list-card .card-product-name .title,
.single-product-component .card-product-name .title {
    margin: 0;
    padding: 0 !important;
    border: none !important;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.product-list-card .card-product-price-row .price,
.single-product-component .card-product-price-row .price {
    margin: 0;
    padding: 0 !important;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.product-list-card .card-product-info .product-description,
.single-product-component .card-product-info .product-description {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(0, 0, 0, 0.07);
    font-size: 13px;
    line-height: 1.5;
    color: var(--secondary-2, #777);
}

.product-list-card .card-product-info .list-color-product,
.single-product-component .card-product-info .list-color-product {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* ── Product Card: image / title / text separators (Site Config: dividers) ─ */

html[data-product-card-dividers="on"] .product-list-card .card-product-info {
    border-top: 2px solid color-mix(in srgb, var(--primary) 28%, transparent);
    padding-top: 12px !important;
    gap: 6px !important;
}

html[data-product-card-dividers="on"] .product-list-card .card-product-info .title {
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 0;
}

html[data-product-card-dividers="on"] .product-list-card .card-product-info .price {
    border-top: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
    padding-top: 8px;
    margin-top: 4px;
}

html[data-product-card-dividers="off"] .product-list-card .card-product-info {
    border-top: none;
    padding-top: 10px !important;
}

html[data-product-card-dividers="off"] .product-list-card .card-product-info .price {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

html[data-product-card-dividers="on"] .product-list-card .card-product-info .product-description {
    padding-top: 4px;
    border-top: 1px dashed rgba(0, 0, 0, 0.07);
    margin-top: 1px;
    font-size: 13px;
    color: var(--secondary-2, #777);
    line-height: 1.5;
}

html[data-product-card-dividers="off"] .product-list-card .card-product-info .product-description {
    padding-top: 0;
    border-top: none;
    margin-top: 0;
    font-size: 13px;
    color: var(--secondary-2, #777);
    line-height: 1.5;
}

/* ── end product card zones / separators ─────────────────────────────────── */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .hamburger-menu-btn,
    .hamburger-icon,
    .mobile-menu-link,
    .mobile-menu-icon,
    .btn-close {
        transition: none;
    }
    
    .mobile-menu-item {
        animation: none;
        opacity: 1;
    }
    
    .mobile-menu-link:hover {
        transform: none;
    }
    
    .mobile-menu-link:hover .mobile-menu-icon {
        transform: none;
    }
    
    .mobile-submenu {
        transition: none;
    }
}

/* ── GitHub backlog: storefront polish (332, 337, 322, 323, 324, 331) ───────── */

/* #332 — remove decorative box shadows (keep keyboard focus visible) */
:root {
    --shadow1: none !important;
    --shadow2: none !important;
    --bs-box-shadow: none;
    --bs-box-shadow-sm: none;
    --bs-box-shadow-lg: none;
}

.card-product,
.flat-wrap-cart,
.modal-content,
.offcanvas,
.tf-mini-cart,
.tf-product-media-thumbs .item,
.testimonial-item,
.flat-wrap-comparison,
.news-item,
.banner-gr-item,
.sw-dots .swiper-pagination-bullet {
    box-shadow: none !important;
}

.form-control:focus,
.form-select:focus,
.btn:focus-visible,
.hamburger-menu-btn:focus {
    box-shadow: none !important;
    outline: 2px solid var(--primary, #e43131);
    outline-offset: 1px;
}

/* #337 — smooth image hover (product cards + detail gallery) */
.card-product .product-img img.img-product,
.card-product .product-img img.img-hover,
.tf-product-media-main .swiper-slide:not(.swiper-slide-active) a.item img,
.tf-product-media-main .swiper-slide a.item img {
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.35s ease;
}

.card-product .product-img:hover img.img-product,
.related-products .product-img:hover img.img-product {
    transform: scale(1.04);
}

.tf-product-media-main .swiper-slide a.item:hover img {
    transform: scale(1.03);
}

/* #331 — product cards use symmetric padding in card-product-info (see card zones above) */
.card-product:not(.product-list-card):not(.single-product-component) .card-product-info {
    padding-left: 0.65rem;
}

/* #324 — benefits: icon centered above copy (Swiper + grid layouts) */
.tf-sw-benefits .tf-icon-box.style-2,
.tc-benefits-section .tc-benefits-grid .tf-icon-box.style-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
}

.tf-sw-benefits .tf-icon-box.style-2 .icon-box,
.tc-benefits-section .tc-benefits-grid .tf-icon-box.style-2 .icon-box {
    margin: 0 auto;
    width: min(33%, 120px);
    max-width: 120px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tf-sw-benefits .tf-icon-box.style-2 .content,
.tc-benefits-section .tc-benefits-grid .tf-icon-box.style-2 .content {
    width: 100%;
}

/* #322 — safer horizontal padding on small phones */
@media (max-width: 576px) {
    .flat-spacing .container-fluid.px-3 {
        padding-left: max(0.75rem, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(0.75rem, env(safe-area-inset-right, 0px)) !important;
    }
}

/* #323 — mobile product grid density (body.shop-mobile-grid-{1,2,3} from Site configuration) */
@media (max-width: 767px) {
    body.shop-mobile-grid-1 .wrapper-shop.tf-grid-layout,
    body.shop-mobile-grid-1 .tf-grid-layout[class*="tf-col"] {
        grid-template-columns: 1fr !important;
    }

    body.shop-mobile-grid-3 .wrapper-shop.tf-col-3,
    body.shop-mobile-grid-3 .tf-grid-layout.tf-col-3,
    body.shop-mobile-grid-3 .wrapper-shop.tf-col-4,
    body.shop-mobile-grid-3 .tf-grid-layout.tf-col-4,
    body.shop-mobile-grid-3 .wrapper-shop.tf-col-5,
    body.shop-mobile-grid-3 .tf-grid-layout.tf-col-5 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 480px) {
    body.shop-mobile-grid-2 .tf-grid-layout.tf-col-4,
    body.shop-mobile-grid-2 .tf-grid-layout.tf-col-5,
    body.shop-mobile-grid-2 .wrapper-shop.tf-col-4,
    body.shop-mobile-grid-2 .wrapper-shop.tf-col-5 {
        grid-template-columns: 1fr !important;
    }

    body.shop-mobile-grid-3 .wrapper-shop.tf-grid-layout,
    body.shop-mobile-grid-3 .tf-grid-layout[class*="tf-col"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Wishlist toggle state */
.btn-icon-action.wishlist.is-in-wishlist {
    color: var(--primary, #e43131);
}

.btn-icon-action.wishlist.is-in-wishlist .icon {
    font-weight: 700;
}

/* #329 — keep sections within horizontal viewport (no sideways bleed) */
section.flat-spacing,
section.flat-spacing-2,
section.flat-spacing-3,
section.flat-spacing-4,
section.flat-spacing-5,
section.media-gallery-section,
section.portfolio-section {
    overflow-x: clip;
    max-width: 100%;
}

/* "View All" section button: consistent top margin in every section context.
   The theme only added margin-top inside .flat-animate-tab / .swiper, so plain
   grid sections (e.g. exclusive / preorder products) rendered the button with
   no top margin against the section's bottom padding. Unify the spacing. */
.sec-btn,
.flat-animate-tab .sec-btn,
.swiper .sec-btn {
    margin-top: 40px;
}

@media (max-width: 767px) {
    .sec-btn,
    .flat-animate-tab .sec-btn,
    .swiper .sec-btn {
        margin-top: 24px;
    }
}

/* #326 / #310 — respect safe areas (notch / home indicator) on phones */
#wrapper {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 768px) {
    .tf-product-media-wrap,
    .hero-section-fullwidth .wrap-slider {
        max-width: 100%;
    }

    /* Larger touch targets for primary nav actions */
    .nav-icon-item,
    .hamburger-menu-btn {
        min-height: 44px;
        min-width: 44px;
    }
}

/* #327 / #328 — gallery media respects slide bounds */
.media-gallery-section .gallery-media,
.media-gallery-section .gallery-video {
    max-height: inherit;
    width: 100%;
    object-fit: cover;
}

/* #332 — remove drop shadows site-wide (theme variables + common UI chrome) */
:root {
    --light-shadow: none !important;
    --medium-shadow: none !important;
    --heavy-shadow: none !important;
}

.card-product,
.card-product .card-product-wrapper,
.modal-content,
.dropdown-menu,
.tf-dropdown-sort .dropdown-menu,
.popover,
.offcanvas,
.nav-search .form-search,
.tf-top-bar,
.tf-mini-cart {
    box-shadow: none !important;
}

/* #337 — smooth image hover using primary brand tint */
.card-product .product-img,
.product-list-card .product-img {
    position: relative;
    overflow: hidden;
}

.card-product .product-img img.img-product,
.card-product .product-img img.img-hover,
.product-list-card .product-img img.img-product,
.product-list-card .product-img img.img-hover {
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.38s ease;
}

.card-product .product-img:hover img.img-product,
.product-list-card .product-img:hover img.img-product {
    transform: scale(1.04);
}

.card-product .product-img::after,
.product-list-card .product-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--primary, #e43131) 14%, transparent);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 1;
}

.card-product .product-img:hover::after,
.product-list-card .product-img:hover::after {
    opacity: 1;
}

.card-product .list-product-btn,
.card-product .list-btn-main {
    z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
    .card-product .product-img img.img-product,
    .card-product .product-img img.img-hover,
    .product-list-card .product-img img.img-product,
    .product-list-card .product-img img.img-hover {
        transition: none;
    }

    .card-product .product-img::after,
    .product-list-card .product-img::after {
        transition: none;
        opacity: 0;
    }
}

/* #310 — large phones / long aspect (e.g. iPhone Pro class): stabilize text scaling & media */
@media (max-width: 430px) {
    html {
        -webkit-text-size-adjust: 100%;
    }

    .hero-section-fullwidth .slide-media,
    .hero-section-fullwidth video {
        object-position: center center;
    }
}

/* Section frame: full-width and content max-width from section editors */
.tc-full-width {
    width: 100%;
}

.tc-category-section.tc-full-width,
.tc-featured-section.tc-full-width,
.tc-benefits-section.tc-full-width,
.tc-exclusive-section.tc-full-width,
.tc-preorder-section.tc-full-width,
.tc-promotions-section.tc-full-width,
.tc-gallery-section.tc-full-width,
.tc-testimonials-section.tc-full-width,
.tc-reviews-section.tc-full-width,
.tc-blog-section.tc-full-width,
.tc-clients-section.tc-full-width,
.tc-contact-section.tc-full-width {
    overflow-x: clip;
}