/* Homepage hero slider — shorter than the theme default so the page
   clearly continues below the fold instead of filling the viewport, but
   tall enough to give the slide content room (bumped up from 450/420/380/320,
   then again from 540/500/440/380, then again to 620/570/500/420; mobile
   sizes brought back down since object-fit:cover made the full 500/420
   height feel too dominant on small screens).

   Below 1920px wide the fixed px height is dropped in favor of
   `aspect-ratio` matching the banner images' actual 1920x730 export size
   (set via the <img width/height> attributes in index.blade.php), paired
   with object-fit:contain. Banner images have promo text baked into the
   graphic itself (e.g. "30% OFF"), so object-fit:cover was cropping that
   text off the sides — not just on phones, but on any screen narrower
   than ~1630px (height 620px * the image's 2.63:1 ratio), which covers
   effectively every laptop width (1280/1366/1440/1512/1536/1728), not
   only mobile/tablet. Matching the wrap's aspect ratio to the image's own
   ratio lets `contain` show the whole image edge-to-edge with no cropping
   and no top/bottom letterbox gap. Only screens ≥1920px wide (full-size
   external monitors) are wide enough relative to the fixed 620px height
   for `cover` to crop top/bottom only, never the sides, so those keep the
   original fixed-height/cover treatment. */
.tf-slideshow .slideshow-wrap {
    height: 620px;
}
@media (max-width: 1919px) {
    .tf-slideshow .slideshow-wrap {
        height: auto;
        aspect-ratio: 1920 / 730;
    }
    .tf-slideshow .sld_image img {
        object-fit: contain;
    }
}

/* Category page hero — cover image banner behind the title/breadcrumbs.
   Uses a real <img> (width 100%, height auto) instead of a CSS background
   so the image always renders full-width with zero cropping. There is
   deliberately no max-height/object-fit cap here: full width + the whole
   image visible + a fixed height are mutually exclusive unless the upload
   itself is a wide/panoramic banner — capping height forces either side
   letterboxing or top/bottom cropping, both explicitly unwanted. If a
   shorter banner is needed, upload a wider-aspect-ratio cover image from
   the admin panel rather than fighting this in CSS. padding-bottom needs
   !important because the blade also applies Bootstrap's .pb-0 (also
   !important) alongside this class, which would otherwise zero the spacing. */
.section-page-title.has-cover-bg {
    position: relative;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0 !important;
    margin-bottom: 0;
    border-bottom: 3px solid var(--primary);
}

.section-page-title.has-cover-bg .page-title-cover-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: cover;
}

@media (max-width: 767px) {
    .section-page-title.has-cover-bg .page-title-cover-img {
        max-height: 220px;
    }
}

.section-page-title.has-cover-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, .45);
}

.section-page-title.has-cover-bg .container {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* .cl-text-3 (used on the breadcrumb's "Home" link and separator icon)
   sets color with !important, which otherwise beats this rule and left
   those two pieces gray instead of white over the dark cover image. */
.section-page-title.has-cover-bg .breadcrumbs a,
.section-page-title.has-cover-bg .breadcrumbs p,
.section-page-title.has-cover-bg .breadcrumbs i,
.section-page-title.has-cover-bg h1,
.section-page-title.has-cover-bg h3 {
    color: #fff !important;
}

/* about.blade.php's title section also has a descriptive subtitle
   paragraph directly under the <h3> (distinct from the breadcrumb's own
   <p>, already covered above) - needs the same white treatment to stay
   readable over the dark overlay. */
.section-page-title.has-cover-bg .main-page-title > p {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Breadcrumb cover — opt-in via .has-parallax-bg alongside .has-cover-bg
   (name kept for the class/markup, but the parallax effect itself is
   dropped — see below). Replaces the plain <img class="page-title-cover-img">
   with a CSS background-image (set inline per page, since each banner
   URL is dynamic/admin-configurable). The admin's "Adjust Cover Image"
   cropper (dropzone.js) exports the image at a fixed 1640x400
   ratio, so this box uses that same aspect-ratio instead of a fixed
   min-height: a fixed height made the box's own ratio vary with viewport
   width, and `background-size: cover` then cropped extra off the top/
   bottom (or sides) to fill it — on wide screens this cut off the top of
   the logo and bottom of the shield that were visible in the admin's
   frame. Matching the ratio makes `cover` a no-op crop-wise, so what's
   framed in the modal is exactly what shows, at every screen width; the
   banner's rendered height now scales with page width instead of being
   fixed at 320px/220px.

   background-attachment: fixed (the actual parallax scroll effect) is
   deliberately NOT used: `fixed` makes the browser size/position the
   background against the viewport instead of the element box, so
   `cover` sized the image off the viewport's ratio rather than this
   box's, cropping unpredictably regardless of how the element itself
   was sized. */
.section-page-title.has-cover-bg.has-parallax-bg {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    aspect-ratio: 1640 / 400;
}

/* Below ~768px the 1640:400 ratio shrinks the box to under 100px tall,
   too short for the heading + breadcrumb that sit absolutely centered
   inside it (see .has-cover-bg .container above) — the text was
   overflowing the box and getting clipped by this section's own
   overflow: hidden. Drop the fixed ratio in favor of a min-height and
   let the content flow normally (padding instead of absolute centering)
   so the box grows to fit whatever text a given page has. */
@media (max-width: 767px) {
    .section-page-title.has-cover-bg.has-parallax-bg {
        aspect-ratio: auto;
        min-height: 260px;
    }

    .section-page-title.has-cover-bg .container {
        position: relative;
        inset: auto;
        padding: 48px 16px;
    }
}

/* Cart page — empty state, item cards, summary sidebar. Mirrors the card
   treatment used elsewhere on the site (#shopFilterSidebar,
   .category-feature-card): white surface, soft shadow, rounded corners,
   var(--primary) as the single accent color. */
.cart-empty-state {
    padding: 30px 20px;
    max-width: 420px;
    margin: 0 auto;
}

.cart-empty-icon {
    width: 88px;
    height: 88px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-empty-icon .icon {
    font-size: 34px;
    color: var(--text-3);
}

.cart-items-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(17, 17, 17, 0.05);
    overflow: hidden;
}

.cart-items-card_head {
    padding: 18px 24px;
    border-bottom: 1px solid var(--line);
}

.cart-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--line);
    transition: background-color 0.2s ease;
}

.cart-row:last-child {
    border-bottom: none;
}

.cart-row:hover {
    background-color: var(--bg);
}

.cart-row_img {
    flex-shrink: 0;
    width: 90px;
    border-radius: 10px;
    overflow: hidden;
}

.cart-row_img img {
    width: 100%;
    height: 118px;
    object-fit: cover;
    display: block;
}

.cart-row_body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cart-row_name {
    color: var(--text);
}

.cart-row_price {
    font-size: 15px;
}

.cart-row_footer {
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.cart-row_footer .wg-quantity {
    min-width: 120px;
    padding: 8px 14px;
}

.cart-row_remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--white);
    color: var(--text-2);
    transition: all 0.2s ease;
}

.cart-row_remove:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.cart-row_total {
    flex-shrink: 0;
    padding-top: 4px;
    font-size: 16px;
}

@media (max-width: 575px) {
    .cart-row {
        gap: 14px;
        padding: 16px;
    }

    .cart-row_img {
        width: 70px;
    }

    .cart-row_img img {
        height: 92px;
    }

    .cart-row_total {
        display: none;
    }
}

/* Order summary sidebar: give each stacked box its own card instead of
   the theme's flat var(--bg-2) block, so it reads as one cohesive panel
   next to the item list. */
.fl-sidebar-cart .box-order-summary {
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: 0 4px 20px rgba(17, 17, 17, 0.05);
}

.cart-summary-threshold {
    margin-bottom: 16px;
}

.cart-summary-threshold .text {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cart-summary-threshold .text .icon {
    color: var(--primary);
    font-size: 16px;
    flex-shrink: 0;
}

.cart-summary-threshold.is-unlocked .tf-progress-ship .value {
    background: var(--primary);
}

.cart-coupon-box {
    margin-bottom: 16px;
}

.cart-coupon-box .ko-box-heading {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cart-coupon-box .ko-box-heading .icon {
    color: var(--primary);
    font-size: 15px;
}

.cart-coupon-box .cart-coupon-form {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.cart-coupon-box .cart-coupon-form input {
    flex: 1;
    min-width: 0;
    border-radius: 60px;
}

.cart-coupon-box .cart-coupon-form .tf-btn {
    flex-shrink: 0;
}

.cart-summary-total .title {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.cart-summary-grandtotal .total {
    font-size: 20px;
}

.cart-terms-row {
    margin: 16px 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.cart-terms-row label {
    margin-bottom: 0;
    cursor: pointer;
}

.action-checkout.is-disabled {
    opacity: .5;
    pointer-events: none;
}

.cart-trust-row {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-3);
    text-align: center;
}

.cart-trust-row .icon {
    color: var(--text-3);
    font-size: 15px;
    flex-shrink: 0;
}

/* Button loading state — shared by every form on the site via
   button-loading.js. currentColor keeps the ring visible on both dark
   (white text) and light (dark text) button styles without per-button
   color overrides. */
.btn-loading-spinner {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 6px;
    vertical-align: -1px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-loading-spin .6s linear infinite;
}

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

.is-loading {
    cursor: progress !important;
    opacity: .85;
    white-space: nowrap;
    overflow: hidden;
    font-size: 13px;
}

/* Shop/category sidebar: category name on the left, product count on the
   right, within the same clickable row. */
.group-category .label {
    width: 100%;
    justify-content: space-between;
}

/* The theme only ships mb-* margin utilities, not mt-*, so the below-grid
   "View All" buttons on the homepage need this added explicitly. */
.mt-24 {
    margin-top: 24px;
}

/* Extra breathing room below the Top Picks carousel's pagination dots
   (which sit absolutely positioned per Swiper's default CSS) so the
   "View All" button underneath doesn't crowd them. */
.mt-40 {
    margin-top: 40px;
}

/* Recent-purchase popup: moved from top-right to bottom-left. */
.pop-notice-sale,
.rtl .pop-notice-sale {
    top: auto;
    right: auto;
    bottom: 40px;
    left: 40px;
    transform: translateX(-20px);
}

.pop-notice-sale.active {
    transform: translateX(0);
}

@media (max-width: 1199px) {

    .pop-notice-sale,
    .rtl .pop-notice-sale {
        bottom: 20px;
        left: 15px;
    }
}

/* Product cards: borderless, flush image style (matches home page) applied
   site-wide so shop, search, wishlist, category and related-product grids
   all look the same as the home page grid. */
.card-product {
    padding: 12px 12px 16px;
    background: #fff;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 10px 34px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.card-product:hover {
    border-color: transparent;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 16px 44px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    transform: translateY(-3px);
}

/* Etsy-style tight product-grid gutter, shared by every product grid
   (home page "New Arrivals / Best Sellers / Featured", shop, search,
   wishlist, category) instead of the theme's wider default spacing. */
.shop-section-grid {
    column-gap: 6px;
    row-gap: 14px;
}

/* Plain `1fr` tracks default to `minmax(auto, 1fr)`, so a column's floor
   is its widest item's min-content - and .name-product's `white-space:
   nowrap` (needed for the ellipsis truncation) has a min-content equal
   to its full untruncated text width, which bubbles up through
   .card-product_info/.card-product regardless of the visual overflow
   clipping. That made whichever column held the longest product title
   render measurably wider than the others (verified: 330px/250px/312px/
   279px for a 4-up row), which is why images - sized purely from that
   column width via aspect-ratio - came out different heights per card
   despite every card being the same overall height. minmax(0, 1fr)
   removes the min-content floor so every column is forced to the same
   1fr share regardless of title length.

   Scoped to `.shop-section-grid` (shared by every product grid - home,
   shop, wishlist, search, categories) rather than plain
   `.tf-grid-layout.tf-col-N`, and mirroring styles.css's own
   breakpoints one-for-one instead of one unconditional rule - the home
   page's grid carries a bare `tf-col-2` as its mobile-first base class
   alongside `sm-col-2 md-col-3 lg-col-4` for wider breakpoints, and an
   unconditional override here (no media query) would load after
   styles.css and so beat those media-gated rules at every viewport,
   freezing the home grid at 2 columns even on wide screens. */
.shop-section-grid.tf-col-1 { grid-template-columns: minmax(0, 1fr); }
.shop-section-grid.tf-col-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shop-section-grid.tf-col-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shop-section-grid.tf-col-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Below the `sm` breakpoint, force exactly 2 columns regardless of the
   mobile-first tf-col-2/3/4 base class, so phones always get 2 products
   per row instead of 1 or 3/4. */
@media (max-width: 575.98px) {
    .shop-section-grid.tf-col-1,
    .shop-section-grid.tf-col-2,
    .shop-section-grid.tf-col-3,
    .shop-section-grid.tf-col-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Narrower 2-up cards on mobile need a smaller title so the full
       name has room before the ellipsis kicks in, and a smaller
       "+ Add to basket" button so it doesn't overflow the card width. */
    .shop-section-grid .card-product_info .name-rating-row .seller-rating {
        display: none;
    }
    .shop-section-grid .card-product_info .name-rating-row .name-product {
        font-size: 12px;
        line-height: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .shop-section-grid .tf-btn.s-small {
        height: 28px;
        padding-left: 12px;
        padding-right: 12px;
        font-size: 12px;
        gap: 6px;
    }
    .shop-section-grid .card-product_info .price-new,
    .shop-section-grid .card-product_info .price-old {
        font-size: 14px;
    }
}
@media (min-width: 576px) {
    .shop-section-grid.sm-col-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shop-section-grid.sm-col-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .shop-section-grid.sm-col-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .shop-section-grid.sm-col-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
    .shop-section-grid.md-col-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shop-section-grid.md-col-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .shop-section-grid.md-col-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .shop-section-grid.md-col-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
    .shop-section-grid.lg-col-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .shop-section-grid.lg-col-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .shop-section-grid.lg-col-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .shop-section-grid.xl-col-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .shop-section-grid.xl-col-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1440px) {
    .shop-section-grid.xxl-col-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Narrow grid columns (e.g. the shop page's tf-col-4 layout, which shares
   its row with the filter sidebar and so has less width per card than
   the full-width home/category grids) don't have room for the
   "+ Add to basket" button and "More like this" link side by side - the
   button's own text was wrapping mid-word instead of the row wrapping.
   Letting the row wrap moves "More like this" to its own line, which
   still fits either item on one line at any grid width. */
.card-product_links {
    flex-wrap: wrap;
}
.card-product_links .js-add-to-cart,
.card-product_links .link-underline-text {
    white-space: nowrap;
}

/* Shrink the button/link so "+ Add to basket" and "More like this" fit on
   one line even in the narrower tf-col-4 cards, instead of wrapping. */
.card-product_links .js-add-to-cart {
    padding: 10px 18px;
    font-size: 14px;
    transition: none;
}
.card-product_links .js-add-to-cart:hover {
    color: var(--white);
}
.card-product_links .link-underline-text {
    font-size: 12px;
}

/* Shop page "list view" toggle (.product-style_list): styles.css keeps it
   as a side-by-side row (35%/60% split) all the way down to the smallest
   phones, only hiding description/rating text as it narrows - on a
   360-390px screen the remaining name/price/buttons get squeezed into
   ~130px, crowding "+ Add to basket" and "More like this" together.
   Stacking the image above the info column below 480px gives both the
   full card width to work with, matching how every other card layout on
   the site already behaves on mobile. */
@media (max-width: 480px) {
    .product-style_list {
        flex-direction: column;
    }
    .product-style_list .card-product_wrapper,
    .product-style_list .card-product_info {
        width: 100%;
    }
}

/* Product detail page: quantity selector + "Add To Basket" + "Customize
   Order" sit in one unwrapped flex row (.group-action) with no
   flex-shrink/min-width:0, so on mobile their combined min-content width
   overflows the viewport and clips "Customize Order" off the right edge
   (also dragging the whole page into horizontal scroll). Wrapping the row
   and forcing each item to its own full-width line stacks them cleanly
   with no overflow. */
@media (max-width: 575px) {
    .tf-product-info-wrap .tf-product-total-quantity .group-action {
        flex-wrap: wrap;
    }
    .tf-product-info-wrap .tf-product-total-quantity .group-action .wg-quantity,
    .tf-product-info-wrap .tf-product-total-quantity .group-action .btn-action-price {
        flex: 1 1 100%;
        min-width: 0;
    }
}

/* Add to Basket / Customize Order / Out of Stock all inherited the same
   flat black .tf-btn look, making the disabled state indistinguishable
   from the two clickable actions (product-details, quick view, quick
   add all share .btn-action-price). Give each state its own look from
   the site's black/white palette instead of a one-off color. */
.btn-action-price.js-add-to-cart {
    background: var(--text);
}
.btn-action-price.js-add-to-cart:hover {
    background: #000000;
}
.btn-action-price.js-open-customize,
.btn-action-price.js-customize-login-required {
    background: var(--white);
    color: var(--text);
    border: 2px solid var(--text);
}
.btn-action-price.js-open-customize:hover,
.btn-action-price.js-customize-login-required:hover {
    background: var(--text);
    color: var(--white);
}
.btn-action-price.disabled,
.btn-action-price.is-disabled {
    background: #EFE9E1;
    color: #A79C8E;
    cursor: not-allowed;
    pointer-events: none;
}

/* .wrap-sw-over (theme swiper wrapper) clips overflow and only
   compensates for left/bottom bleed via negative margin + matching
   padding. Our card hover border/shadow also bleeds upward, so without
   the same trick on top it gets clipped at the slider's top edge. */
.wrap-sw-over {
    margin-top: -10px;
    padding-top: 10px;
}
@media (min-width: 1200px) {
    .wrap-sw-over {
        margin-top: -40px;
        padding-top: 40px;
    }
}

/* Shop page: the product listing sits in a .container-fluid, but
   .row's negative margin is -15px !important (styles.css) while
   Bootstrap's .container-fluid padding is only 12px - the extra 3px
   per side pushed the row past the viewport edge and created a
   horizontal scrollbar. Match the container padding to the row's
   gutter so they cancel out exactly. */
.flat-spacing > .container-fluid {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Shop page: keep the filter sidebar fixed in place while the product
   grid on the right scrolls with the page.
   Only the sidebar gets position:sticky - a flex row stretches to match
   its tallest child, so if both columns were sticky, whichever one ends
   up defining the row's height would have no room left to actually
   stick. The products column instead gets a min-height so the row is
   always at least one viewport tall, guaranteeing the sidebar has space
   to stick within even when the product grid itself is short.
   The sticky positioning and the internal scrolling are split across
   two different elements (wrapper vs. #shopFilterSidebar) so the sticky
   wrapper itself never needs its own overflow.
   #shopFilterSidebar's own child, .canvas-body (the filter <form>), is
   the theme's off-canvas mobile-drawer scroller: it ships with its own
   overflow-y:auto + overscroll-behavior-y:contain at every breakpoint.
   With that still active on desktop, the form has nothing to scroll
   internally, and "contain" stops the wheel event from chaining up to
   #shopFilterSidebar's own overflow - so the wheel scrolled the page
   instead of the sidebar. Neutralizing it here at desktop width makes
   #shopFilterSidebar the only scroll container in the chain. */
@media (min-width: 1200px) {
    .shop-sidebar-col {
        position: sticky;
        top: 20px;
        align-self: flex-start;
        max-height: calc(100vh - 40px);
        /* A global ".row > * { padding: 15px !important; }" rule in
           styles.css (line ~1998) beats a plain declaration here
           regardless of source order, so this needs !important too
           to actually shrink the gutter. */
        padding-right: 8px !important;
    }

    #shopFilterSidebar {
        max-height: calc(100vh - 40px);
        overflow-y: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        /* .sidebar-filter caps at max-width:300px!important (styles.css)
           for the off-canvas mobile drawer. On the shop page's desktop
           layout the sidebar instead needs to fill its grid column, so
           the cap has to be lifted here with matching !important + ID
           specificity, otherwise a wide (container-fluid) column leaves
           dead space between the 300px-capped card and the product grid. */
        max-width: none !important;
    }

    #shopFilterSidebar::-webkit-scrollbar {
        display: none;
    }

    #shopFilterSidebar .canvas-body {
        overflow-y: visible;
        overscroll-behavior-y: auto;
        flex: initial;
    }

    .shop-products-col {
        padding-left: 8px !important;
        min-height: calc(100vh + 100px);
    }
}

/* Shop page: filter sidebar visual polish. The theme's default
   .sidebar-filter renders as bare, unbordered text on the page
   background (no card, no section separation) - give it a card
   treatment and clearer visual hierarchy on desktop, where it sits
   permanently visible next to the product grid rather than sliding in
   as a temporary drawer. */
@media (min-width: 1200px) {
    #shopFilterSidebar {
        background-color: var(--white);
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 28px;
        box-shadow: 0 4px 20px rgba(17, 17, 17, 0.05);
    }

    #shopFilterSidebar .canvas-header {
        padding: 0 0 18px;
        margin-bottom: 24px;
        border-bottom: 1px solid var(--line);
    }
    /* Theme's ::after divider assumes the 24px canvas-body padding the
       mobile drawer has; the desktop sidebar zeroes that padding out,
       which would leave the divider floating inset from the card
       edges. The border-bottom above replaces it. */
    #shopFilterSidebar .canvas-header::after {
        display: none;
    }
    #shopFilterSidebar .canvas-header .title {
        font-size: 20px;
        font-weight: 600;
    }

    #shopFilterSidebar .canvas-bottom {
        padding: 20px 0 0;
        margin-top: 4px;
        box-shadow: none;
        border-top: 1px solid var(--line);
    }
}

/* Shared pagination component (shop/category/search): the wrapper relied
   on `.wd-full` (only meaningful inside a `.tf-grid-layout` grid - a
   no-op here, since this div is a plain sibling, not a grid child) and
   `justify-content-center` (only meaningful on a flex/grid container -
   also a no-op, since the wrapper was never given `display:flex`), so
   the pagination has never actually centered at any screen width, just
   hugged the left edge with no gap from the product grid above it. */
.tf-pagination-wrap {
    margin-top: 32px;
}

/* The "Clear" / "Apply Filters" buttons split a `d-flex gap-2` row 50/50
   (both `w-100`) with no white-space:nowrap and no mobile-specific
   sizing, so on narrow screens "Apply Filters" (14 chars) wraps onto two
   lines while "Clear" doesn't, making the pair look mismatched/broken.
   Shared by the shop and category page filter offcanvases. */
@media (max-width: 575px) {
    .canvas-bottom.d-flex .tf-btn {
        padding-left: 8px;
        padding-right: 8px;
        font-size: 13px;
        white-space: nowrap;
    }
}

#shopFilterSidebar .widget-facet .facet-title {
    cursor: pointer;
}
#shopFilterSidebar .widget-facet .facet-title h6 {
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
#shopFilterSidebar .widget-facet .facet-title .icon {
    color: var(--text-3);
}

/* Padding-only (no negative-margin/overflow-width trick): .group-category
   is a max-height + overflow:auto scroll container, and widening rows
   past 100% to compensate for negative margins triggered a spurious
   horizontal scrollbar inside it. */
#shopFilterSidebar .filter-group-check .list-item {
    border-radius: 8px;
    padding: 3px 8px;
    transition: background-color 0.2s ease;
}
#shopFilterSidebar .filter-group-check .list-item:hover {
    background-color: var(--bg);
}
#shopFilterSidebar .filter-group-check .list-item .label {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
#shopFilterSidebar .filter-group-check .count {
    font-size: 12px;
    color: var(--text-3);
    background-color: var(--bg);
    border-radius: 20px;
    padding: 1px 9px;
    min-width: 24px;
    text-align: center;
    transition: all 0.2s ease;
}
#shopFilterSidebar .filter-group-check .label.text-primary .count {
    background-color: var(--primary);
    color: var(--white);
}

/* Give the price slider the same brand-red accent used elsewhere on
   the shop page (sale badges, sale prices) instead of the theme's
   default flat black handle/track. */
#shopFilterSidebar .noUi-connect {
    background-color: var(--primary);
}
#shopFilterSidebar .noUi-horizontal .noUi-handle {
    border-color: var(--primary);
}

#shopFilterSidebar .tf-list-tag {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
#shopFilterSidebar .link-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: 20px;
    font-size: 13px;
    color: var(--text-2);
    transition: all 0.2s ease;
}
#shopFilterSidebar .link-tag:hover,
#shopFilterSidebar .link-tag.active {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

/* search.blade.php's "Categories" tag list uses the same .tf-list-tag /
   .link-tag classes as the search modal (styles.css's `.modal-search
   .tf-list-tag/.link-tag`) and the shop filter sidebar above, but isn't
   scoped under either of those parents, so it had no matching CSS at all
   and rendered as bare underlined inline links instead of pill tags. */
.tf-list-tag {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.link-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: 20px;
    font-size: 13px;
    color: var(--text-2);
    transition: all 0.2s ease;
}
.link-tag:hover,
.link-tag.active {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

/* "Proudly Made in ..." strip under the hero slideshow. */
.made-in-banner {
    padding: 18px 0;
}

.made-in-banner .made-in-text {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 20px;
    border-radius: 999px;
    background-color: #F2F2F2;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text, #222);
}

.made-in-banner .made-in-flag {
    font-size: 20px;
    line-height: 1;
}

img.made-in-flag {
    width: 20px;
    height: 14px;
    border-radius: 2px;
    vertical-align: middle;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* Thin divider under each homepage section, separating it from the next
   without relying on background-color contrast alone. */
.section-divider {
    max-width: 1322px;
    margin: 0 auto;
    padding: 0 15px;
}

.section-divider hr {
    margin: 0;
    border: none;
    border-top: 1px solid #D6D6D6;
    opacity: 1;
}

/* Section titles (e.g. "New Arrivals – Ready to Ship") use the theme's
   h3 clamp(), whose 28px mobile floor is too large — it wraps to 2-3 lines
   and crowds the description right under it. Shrink just the mobile size. */
@media (max-width: 575px) {
    .sect-heading.type-2 .s-title {
        font-size: 15px !important;
        line-height: 20px;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    .sect-heading.type-2 p {
        font-size: 9px !important;
        line-height: 14px;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    .made-in-banner .made-in-text {
        font-size: 7px !important;
        padding: 1px 6px;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    .made-in-banner {
        padding: 12px 0 0;
    }

    .made-in-banner + section.flat-spacing {
        padding-top: 0 !important;
    }
}

/* The section right after the "Made in ..." strip inherits the theme's
   80px .flat-spacing top padding, which — stacked on top of the strip's
   own padding — reads as a huge, disconnected gap before "New Arrivals".
   Pull it in to a tight-but-not-cramped transition instead. */
.made-in-banner + section.flat-spacing {
    padding-top: 8px !important;
}

/* Homepage category cards: full-bleed image tile with title overlaid
   on a gradient, clickable through to that category's product listing. */
/* Mobile-first breakpoints, mirroring the same tf-col-N/sm-col-N/md-col-N/
   lg-col-N/xl-col-N/xxl-col-N progression (576/768/992/1200/1440) used by
   .shop-section-grid for the product grids, so category and product rows
   grow in step at the same viewport widths - ending at 8 per row on large
   desktops instead of the product grid's 5. */
.category-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (min-width: 576px) {
    .category-feature-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (min-width: 768px) {
    .category-feature-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .category-feature-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 20px;
    }
}

@media (min-width: 1200px) {
    .category-feature-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (min-width: 1440px) {
    .category-feature-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
}

/* Card tile: white surface with its own padding/shadow, image inset with
   rounded corners inside the card, and a plain dark title below - reads as
   a distinct product-card style tile per category (matching the shadowed
   white-card look used elsewhere on the site) rather than a full-bleed
   overlay tile. */
.category-feature-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 12px;
    border-radius: 16px;
    background: var(--white);
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(17, 17, 17, 0.12);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.category-feature-card:hover {
    box-shadow: 0 14px 34px rgba(17, 17, 17, 0.2);
    transform: translateY(-3px);
}

.category-feature-card_image {
    position: relative;
    background: #f4f4f4;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 10px;
}

.category-feature-card_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}

.category-feature-card:hover .category-feature-card_image img {
    transform: scale(1.08);
}

.category-feature-card_scrim {
    display: none;
}

.category-feature-card_head {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 14px 4px 4px;
    text-align: center;
}

/* min-height reserves room for 2 lines (line-height 1.35 * 15px * 2) even
   when a name only takes 1 line, so every card's title block is the same
   height and the button below always sits the same distance from the
   image - matching the gap on 2-line titles like "Premium Hunting
   Knives" instead of sitting closer on shorter, 1-line names. */
.category-feature-card_title {
    margin: 0;
    min-height: 41px;
    font-family: "DM Sans", sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text);
}

/* "Explore More" as a centered pill button below the name, instead of a
   plain text/arrow link - the name stays in the flow of the h4 above it,
   with room in the narrow 8-up desktop columns since it wraps to its own
   line and centers regardless of name length.

   Note: don't use the theme's `.mt-4` utility class for spacing here -
   styles.css defines `.mt-4` as margin-top: 4px !important (not
   Bootstrap's 1.5rem), which silently wins over bootstrap.min.css's own
   .mt-4 since it's loaded later, making the class a no-op-looking 4px
   nudge. Set margin-top directly on this rule instead. */
.category-feature-card_arrow {
    display: block;
    width: fit-content;
    margin: 24px auto 0;
    padding: 6px 16px;
    border: 1px solid var(--text);
    border-radius: 20px;
    color: var(--text);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.category-feature-card:hover .category-feature-card_arrow {
    background: var(--text);
    color: var(--white);
}

/* All Categories page reuses this card at a larger size (via
   x-web.category-card) and additionally shows a product count under
   the title. */
.category-feature-card_count {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--text-3);
}

/* Etsy-style product photo crop: slightly portrait rather than a perfect
   square, matching the reference gallery-view listing cards. Both rules
   are needed - the theme sets aspect-ratio on the wrapper AND the <img>
   itself, so overriding only one leaves the other fighting it back to 1:1. */
.card-product_wrapper.square,
.card-product_wrapper.square img {
    aspect-ratio: 1;
}

/* Shape chosen per-product in admin > Adjust thumbnail (Etsy-style crop). */
.card-product_wrapper.portrait,
.card-product_wrapper.portrait img {
    aspect-ratio: 0.8;
}

.card-product_wrapper.landscape,
.card-product_wrapper.landscape img {
    aspect-ratio: 1.33;
}

.card-product_wrapper .product-img {
    height: 100%;
}

.card-product_wrapper img,
.card-product_wrapper video {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

/* Play-button badge on product card images that have a video attached —
   sits above the hover-preview <video> (z-index: 2) so it stays visible
   even while that preview is playing. */
.card-product_wrapper .video-badge {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: #101010;
    box-shadow: 0 2px 8px rgba(16, 16, 16, 0.35);
    z-index: 3;
    pointer-events: none;
}

.card-product_wrapper .video-badge svg {
    margin-left: 2px;
}

/* "By {seller}  ★ rating (count)" line shown above the product name on
   card-product_info, matching a marketplace-listing look. */
.card-product_info .seller-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Title and rating always share one line - title takes the available
   width (min-width: 0 lets it shrink instead of forcing the row, and the
   CSS Grid card, to grow past the column width - the same intrinsic-
   sizing trap .description-1line hit above) and truncates with an
   ellipsis via .name-product's own overflow rule, the rating badge stays
   put right after it. flex-wrap must stay nowrap: a wrapping flex
   container sizes each line using items' unshrunk (max-content) width to
   decide what fits, so with wrap allowed a long title would still push
   the rating onto its own line even though the title itself renders
   truncated. */
.card-product_info .name-rating-row {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 4px 8px;
    width: 100%;
}

/* Wraps .name-product so the hover-tooltip's popup (see below) has an
   offset parent without overflow:hidden - .name-product itself needs
   overflow:hidden for its own ellipsis truncation, which would also
   clip an absolutely-positioned tooltip nested directly inside it. This
   wrapper takes over the flex-sizing duties (flex/min-width) that used
   to live on .name-product directly; .name-product just fills it via
   width:100%. */
.card-product_info .name-rating-row .name-tooltip-wrap {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}

.card-product_info .name-rating-row .name-product {
    display: block;
    width: 100%;
    font-size: 15px;
    line-height: 21px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Full title on hover, for whenever the ellipsis above actually kicks
   in. Reuses the theme's existing .hover-tooltip/.tooltip component
   (same one the wishlist/quick-view icons use) but widens it into a
   wrapping block instead of the component's default single nowrap
   line - product names can run much longer than the icon tooltips'
   short "Add to Wishlist" labels, and would otherwise render as one
   unbroken bar wide enough to run off-screen. z-index bumped past
   .card-product_wrapper's z-index:20 (styles.css) - .card-product:hover
   applies a transform, which makes it a stacking context, and inside
   that context the image wrapper's z-index:20 was otherwise beating
   this tooltip's inherited z-index:5 and painting the product image
   over it since the tooltip pops up right past the image's bottom
   edge. */
.card-product_info .name-rating-row .name-tooltip-wrap .tooltip {
    white-space: normal;
    max-width: 240px;
    text-align: center;
    z-index: 30;
}

.card-product_info .seller-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    font-size: 16px;
    line-height: 22px;
}

/* Rating number + star read as bold/dark so the row is legible at a
   glance instead of blending into the caption-gray text around it; only
   the review count in parens stays muted. */
.card-product_info .seller-rating .rating-value {
    color: var(--text);
    font-size: 16px;
}

.card-product_info .seller-rating .icon {
    color: var(--text);
    font-size: 14px;
}

/* Every price figure on the storefront (product cards, product page, cart,
   mini-cart, checkout, order confirmation) reads at the same weight so
   prices are consistently emphasized wherever they appear. */
.price-new,
.price-old,
.price-on-sale,
.price-val,
.price-val-range,
.price-sub,
.price-ship,
.price-discount,
.tf-mini-cart-price,
.tf-mini-card-price,
.quantity-price,
.total-price-order,
.ko-shipping-price,
.ko-bag-item-price,
.prd__price,
.tb-order_price {
    font-weight: 600;
}

/* Sale/current price reads as a dark green (a "good deal" cue) instead of
   the default red --primary brand color, on both product cards and the
   product detail page. */
.price-new,
.price-on-sale {
    color: #1B5E20 !important;
}

/* Product card price a touch bigger than the inherited 16px body size, to
   stand out more against the title/rating row above it. */
.card-product_info .price-new,
.card-product_info .price-old {
    font-size: 18px;
}

/* In stock / out of stock trust line on the product detail page: bumped a
   notch above the other trust lines' text-caption-01 size, and colored to
   match the in/out stock state instead of a neutral gray. */
.trust-line-stock {
    font-size: 15px;
}

.trust-line-stock.in-stock,
.trust-line-stock.in-stock .icon {
    color: #1B5E20;
}

.trust-line-stock.out-of-stock,
.trust-line-stock.out-of-stock .icon {
    color: var(--primary);
}

/* Filter sidebar's Clear/Apply Filters row: btn-white has no border of its
   own, so on the sidebar's white background it was invisible until hover.
   Stacked full-width (instead of side-by-side halves) so "Apply Filters"
   never wraps onto a second line at the sidebar's width. */
.canvas-bottom.d-flex {
    flex-direction: column;
}

.canvas-bottom.d-flex .tf-btn.btn-white {
    border: 1px solid var(--line);
}

/* Product card blurb under the title: truncated to a single line, with an
   ellipsis when it overflows the card width. line-clamp (matching
   .name-product's own truncation) rather than white-space:nowrap -
   nowrap's intrinsic width is the full unwrapped string, which bubbles up
   through the unstyled .card-product_info/.card-product ancestors as a
   huge min-content and blows out the surrounding CSS Grid's column
   widths. line-clamp keeps normal word-wrap based sizing instead. */
.card-product_info .description-1line {
    display: -webkit-box;
    width: 100%;
    margin: 0;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Grid rows stretch every .card-product to the tallest card's height, but
   cards without a description are shorter inside, so their price/button
   block sat higher than cards with one. Growing card-product_info to fill
   that stretched height and pinning price-wrap to its bottom via
   margin-top:auto keeps price + "Add to basket" on one consistent
   baseline across every card in a row regardless of title/description
   length. */
.card-product_info {
    flex: 1 1 auto;
}

.card-product_info .price-wrap {
    margin-top: auto;
}

/* List view (product-style_list) rows are much wider than a grid card, so
   the title can afford to be bigger and both title and blurb can wrap
   across multiple lines instead of clipping to one - word-wrap keeps a
   long unbroken word (or URL-like string) from pushing past the column
   width instead of wrapping. */
.card-product.product-style_list .name-rating-row .name-product-list {
    display: block;
    font-size: 20px;
    line-height: 28px;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.card-product.product-style_list .description-full {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* List view's row is much taller than its text content (height comes from
   the square image beside it), so .price-wrap's margin-top:auto - needed
   in grid view to pin price/button to a consistent baseline across cards
   of different description length - instead stretches into a large gap
   between description and price here. Clear it (and .card-product_links
   below it) so price and the "Add to basket" / "More like this" row both
   sit right after the description instead of at the bottom of the card. */
.card-product.product-style_list .price-wrap {
    margin-top: 0;
}
.card-product.product-style_list .card-product_links {
    margin-top: 0;
}

/* Product details page: seller row under the title, matching the card
   design. Its own rule (rather than reusing .card-product_info's) since
   it isn't nested inside a card here. */
.tf-product-info-heading .seller-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.tf-product-info-heading .seller-rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: inherit;
}

.tf-product-info-heading .product-trust-lines {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tf-product-info-heading .trust-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.tf-product-info-heading .trust-line .icon {
    color: var(--text, #101010);
    font-size: 14px;
}

/* Wishlist heart + prev/next arrows overlaid on the main product image,
   matching a reference-marketplace listing gallery. */
.pdp-media-wishlist {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 5;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(16, 16, 16, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdp-media-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(16, 16, 16, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.pdp-media-nav-prev {
    left: 16px;
}

.pdp-media-nav-next {
    right: 16px;
}

/* Item details / Delivery accordions in the right-hand info column. */
.pdp-accordion {
    border-top: 1px solid var(--line, #e5e5e5);
    padding-top: 16px;
    margin-bottom: 16px;
}

.pdp-accordion .accordion-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    padding: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text, #101010);
}

.pdp-accordion .accordion-button::after {
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.pdp-accordion .accordion-button.collapsed::after {
    transform: rotate(-45deg);
}

.pdp-accordion .accordion-body {
    padding-top: 16px;
}

.pdp-highlights-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}

.pdp-highlights-list {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pdp-highlights-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text-2, #444);
}

.pdp-desc-preview {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 12px;
}

.pdp-learn-more {
    display: block;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    color: var(--text, #101010);
}

.pdp-delivery-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    margin-bottom: 10px;
}

.pdp-delivery-row:last-child {
    margin-bottom: 0;
}

/* Product details title row: "Back to results" pinned to the left edge,
   the breadcrumb trail centered in the middle, and the prev/next/grid
   nav icons pinned to the right - matching a reference marketplace
   listing page rather than the theme's default plain-text breadcrumb.
   Scoped to .section-page-title-single since plain .main-page-title is
   shared by many other pages (cart, account, auth, etc). The page's own
   off-white body background (see product-details.blade.php's inline
   <style>) carries through underneath it, so no separate band is needed
   here. */
.section-page-title-single {
    padding-top: 20px;
    padding-bottom: 20px;
}

.section-page-title-single .pdp-title-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}

.section-page-title-single .pdp-back-link {
    justify-self: start;
}

.section-page-title-single .pdp-breadcrumbs {
    justify-self: center;
}

.section-page-title-single .nav-post-list {
    justify-self: end;
}

@media (max-width: 767px) {
    .section-page-title-single .pdp-title-row {
        grid-template-columns: 1fr;
        justify-items: start;
        gap: 10px;
    }

    .section-page-title-single .pdp-breadcrumbs,
    .section-page-title-single .nav-post-list {
        justify-self: start;
    }
}

.pdp-breadcrumbs {
    gap: 10px;
}

.pdp-crumb-link {
    color: var(--text, #101010);
    text-decoration: underline;
}

.pdp-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text, #101010);
    text-decoration: underline;
}

/* Product gallery main slide: the box sizes itself to the photo's own
   aspect ratio (height: auto) instead of forcing a fixed one - the
   image is just shown as-is, full and unstretched, with no crop and no
   letterbox/blur filler. Height intentionally varies slide to slide.
   NOTE: this rule intentionally does NOT key off ".tf-image-zoom" -
   product-details.blade.php's inline script strips that class on load
   (to kill the theme's hover-magnifier), which previously made a
   class-scoped override here silently stop applying and fall back to
   the theme's default object-fit: cover. */
.product-thumbs-slider .tf-product-media-main .item,
.product-thumbs-slider .tf-product-media-main .swiper-slide,
.product-thumbs-slider .tf-product-media-main .swiper-wrapper {
    height: auto;
}

.product-thumbs-slider .tf-product-media-main .item img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: initial;
}

/* The theme's global `img { max-width: 100%; height: auto; }` (styles.css)
   clamps whatever width PhotoSwipe computes for its zoomed image down to
   its container's width, while the JS-set height goes through unclamped -
   mismatched aspect ratio, so the photo renders visibly stretched/squashed
   instead of at its real shape. max-width is a separate constraint from
   width and still applies even though PhotoSwipe sets width inline. */
.pswp__img {
    max-width: none;
}

/* Below 1200px, zoom.js switches the thumbnail rail (.tf-product-media-thumbs)
   from a vertical Swiper to a horizontal one (see zoom.js breakpoints), which
   only fixes each slide's width and leaves height up to content - so
   .swiper-slide never gets an explicit height, the theme's height:100% on
   .item/img has nothing real to resolve against, and each thumbnail falls
   back to its own source photo's natural aspect ratio, producing a jagged
   row of mismatched heights. Giving .item a real aspect-ratio (matching the
   82x110 width/height already set on the <img> tag) gives the chain an
   actual height to resolve against, so every thumbnail crops to the same
   uniform size via object-fit:cover. */
@media (max-width: 1199.98px) {
    .tf-product-media-thumbs .swiper-slide .item {
        aspect-ratio: 82 / 110;
        height: auto;
    }
}

/* Product tabs ("Description" / "Shipping & Returns" / "Return Policy" /
   "Reviews") default to a horizontally-scrollable single-line strip
   (overflow:auto + white-space:nowrap, styles.css) - on narrow phones not
   all four labels fit, so the later tabs get clipped at the screen edge
   with only a non-obvious scroll affordance to reach them. Stacking each
   tab on its own full-width line keeps every one visible and tappable
   without scrolling or a cramped 2-up wrap. */
@media (max-width: 767px) {
    .tab-btn-wrap-v1 {
        flex-direction: column;
        white-space: normal;
        overflow: visible;
        gap: 12px;
    }
    .tab-btn-wrap-v1 .nav-tab-item {
        width: 100%;
    }
    .tab-btn-wrap-v1 .tf-btn-tab {
        width: 100%;
    }
}

/* PhotoSwipe's default prev/next arrow buttons are visibility:hidden until
   the library detects mouse usage (photoswipe.css .pswp--has_mouse) and
   are hard-hidden altogether once it detects a touch interaction
   (.pswp--touch) - by design, on the assumption touch users will swipe
   instead. This gallery wants tappable on-screen arrows on touch devices
   too, so force them visible regardless of input type. */
.pswp__button--arrow {
    visibility: visible !important;
}

/* On >=768px the custom right-hand thumbnail rail below sits at
   right:16px, width:72px (through right:88px), which overlaps the
   default next-arrow's own right:0/width:75px box - pull the next arrow
   left of the rail so both are visible and tappable without one covering
   the other. Below 768px the rail is hidden (see the max-width:767px
   rule further down) so the arrow stays at its default right:0. */
@media (min-width: 768px) {
    .pswp__button--arrow--next {
        right: 96px;
    }
}

/* Thumbnail rail inside the click-to-open PhotoSwipe gallery, registered
   from product-details.blade.php's inline script. */
.pswp-custom-thumbs {
    position: absolute;
    top: 76px;
    right: 16px;
    bottom: 16px;
    width: 72px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    z-index: 10000;
    padding: 4px;
}

.pswp-custom-thumb {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease, border-color 0.2s ease;
    background: #fff;
}

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

.pswp-custom-thumb:hover,
.pswp-custom-thumb.is-active {
    opacity: 1;
    border-color: #fff;
}

@media (max-width: 767px) {
    .pswp-custom-thumbs {
        display: none;
    }
}

/* Video slide rendered inside the PhotoSwipe modal (see the contentLoad
   override in product-details.blade.php's inline script). */
.pswp-video-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pswp-video-wrap video {
    max-width: 100%;
    max-height: 100%;
}

/* Nav dropdowns (.sub-menu, e.g. the Categories mega-menu with ~47
   items) are hidden via opacity/visibility so they can fade in on
   hover, but visibility:hidden still lays them out at full size. That
   silently inflated every page's scrollable height by the dropdown's
   full height, invisible as long as the page's real content was
   already taller than that. Short pages (see the auth pages below)
   exposed it as a blank gap before the footer. Collapsing to
   max-height:0 while hidden fixes it without touching the existing
   opacity/transform hover transition in styles.css. */
.sub-menu {
    max-height: 0;
    overflow: hidden;
}
.menu-item:hover .sub-menu {
    max-height: none;
    overflow: visible;
}

/* ---------------------------------------------------------
   Login / Register / auth-modal forms — shared bits layered on top
   of the theme's own .tf-field/.form-log styling (also used by the
   forgot-password and "message seller" modals in master.blade.php).
------------------------------------------------------------ */

.av-alert {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 20px;
}

.av-alert--success {
    background: #eaf7e8;
    color: #2f7d1f;
    border: 1px solid #cdebc7;
}

.av-hint {
    font-size: 12px;
    color: var(--text-3);
    margin-top: 6px;
}

.av-error {
    font-size: 12px;
    color: #e0342a;
    margin-top: 6px;
}

.av-name-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 575px) {
    .av-name-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Login / Register: split-screen (brand image + elevated card) ---- */
.auth-split {
    display: flex;
    min-height: 100vh;
}

.auth-split__visual {
    position: relative;
    flex: 1 1 42%;
    display: flex;
    flex-direction: column;
    background-color: #16130f;
    overflow: hidden;
}

/* The source photo is a wide landscape shot (knife laid diagonally). Inside
   this tall narrow column a plain cover crop only ever showed a close-up
   sliver of the handle; rotating it 90deg first — so the knife's long axis
   runs with the column's tall axis — lets it fill edge to edge (no letterbox
   bars) while still showing the blade tip through to the handle. Only makes
   sense once the column is actually tall (desktop split-screen); below that
   breakpoint it reverts to a normal upright cover crop. */
.auth-split__img {
    position: absolute;
    top: 50%;
    left: 50%;
}

@media (min-width: 992px) {
    .auth-split__img {
        height: 82%;
        width: auto;
        max-width: none;
        transform: translate(-50%, -50%) rotate(90deg);
    }
}

@media (max-width: 991px) {
    .auth-split__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: translate(-50%, -50%);
    }
}

.auth-split__visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(190deg, rgba(16, 16, 16, 0.1) 0%, rgba(16, 16, 16, 0.3) 55%, rgba(16, 16, 16, 0.88) 100%);
}

.auth-split__back {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    margin: 32px 0 0 32px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--white);
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s ease;
}

.auth-split__back:hover {
    background: rgba(255, 255, 255, 0.22);
    color: var(--white);
}

.auth-split__visual-content {
    position: relative;
    z-index: 2;
    margin-top: auto;
    padding: 0 48px 56px;
    max-width: 520px;
}

.auth-split__visual-content h1 {
    font-size: 38px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 14px;
}

.auth-split__visual-content p {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 28px;
}

.auth-split__trust {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin: 0;
    padding: 0;
}

.auth-split__trust li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

.auth-split__trust i {
    color: var(--primary);
    font-size: 16px;
}

.auth-split__panel {
    flex: 1 1 58%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 32px;
    background: var(--surface, #F6F6F6);
}

.auth-split__card {
    width: 100%;
    max-width: 560px;
    background: var(--white);
    border-radius: 20px;
    padding: 44px 40px;
    box-shadow: 0 24px 60px -20px rgba(16, 16, 16, 0.18), 0 4px 16px rgba(16, 16, 16, 0.05);
}

.auth-split__card h2 {
    font-size: 26px;
    font-weight: 600;
    color: var(--text, #101010);
    margin-bottom: 6px;
}

.auth-split__card-text {
    font-size: 14px;
    color: var(--text-3, #8a8a8a);
    margin-bottom: 28px;
}

.auth-split__card .form-log .form-content {
    margin-bottom: 24px;
}

.auth-split__switch {
    text-align: center;
    margin-top: 24px;
    font-size: 14px;
    color: var(--text-3, #8a8a8a);
}

.auth-split__switch a {
    font-weight: 700;
    color: var(--text, #101010);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-split__switch a:hover {
    color: var(--primary);
}

@media (max-width: 991px) {
    .auth-split {
        flex-direction: column;
        min-height: 0;
    }

    .auth-split__visual {
        min-height: 320px;
    }

    .auth-split__visual-content {
        padding: 0 28px 32px;
    }

    .auth-split__visual-content h1 {
        font-size: 28px;
    }

    .auth-split__panel {
        padding: 40px 20px 104px;
    }
}

@media (max-width: 575px) {
    .auth-split__card {
        padding: 32px 24px;
    }

    .auth-split__trust {
        display: none;
    }
}

/* ==========================================================
   Header polish
   ========================================================== */
.tf-header.scr-box-shadow,
header.header-sticky.tf-header.scr-box-shadow {
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
}

.tf-header .box-nav-menu .menu-item:hover .item-link .cus-text {
    color: var(--primary);
}

/* Categories nav item mixes an icomoon <i> glyph inline with the text inside
   a flex row (align-items: center). The icon font's line-height: 1 resolves
   against icomoon's own internal ascent/descent metrics, which browsers
   round differently from the label font — that made the row's cross-axis
   height (and therefore the text baseline) shift depending on the browser.
   Locking the icon to a fixed box that matches the text line-height stops it. */
.tf-header .box-nav-menu .item-link .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1em;
    line-height: 1;
    flex-shrink: 0;
    overflow: hidden;
}

.tf-header .nav-icon-list .nav-icon-item {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    transition: background-color .25s ease, color .25s ease;
}

.tf-header .nav-icon-list .nav-icon-item:hover {
    color: var(--primary);
}

.tf-header .nav-icon-list .shop-cart .count,
.tf-header .nav-icon-list .shop-wishlist .count {
    box-shadow: 0 0 0 2px #fff;
}

/* Wishlist header icon reuses the cart badge's circle/positioning styles
   (styles.css only scopes those to .shop-cart) so both icons match. */
.nav-icon-list .shop-wishlist {
    position: relative;
}

.nav-icon-list .shop-wishlist .count {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 11px;
    line-height: 10px;
    color: var(--white);
    background: var(--primary);
}

/* The theme pushes the wishlist page's card heart/eye quick-action icons
   down 52-56px (styles.css) instead of the standard 8-12px top-right
   corner used on every other product grid — reset to match. */
.wrapper-wishlist .product-action_list {
    top: 8px;
}

@media (min-width: 1200px) {
    .wrapper-wishlist .product-action_list {
        top: 12px;
    }
}

/* ==========================================================
   Footer polish
   ========================================================== */
.tf-footer .footer-heading {
    position: relative;
    padding-bottom: 12px;
}

/* Desktop-only decorative accent bar under each footer column heading.
   Below 576px this same element is also `.footer-heading-mobile`, whose
   own accordion +/- indicator (styles.css) is built from a `::after` on
   that identical selector - since this rule loads later and wins the
   cascade, it was replacing that +/- indicator everywhere, including on
   mobile, where a 28px-wide bar under just the first couple of letters
   reads as a stray/broken underline rather than a decoration. Scoping it
   to >=576px keeps the desktop accent and lets the mobile accordion
   indicator render as intended. */
@media (min-width: 576px) {
    .tf-footer .footer-heading::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 28px;
        height: 2px;
        background: var(--primary);
    }
}

.tf-footer .footer-menu-list a {
    display: inline-block;
    transition: transform .2s ease, color .2s ease;
}

.tf-footer .footer-menu-list a:hover {
    transform: translateX(4px);
    color: var(--primary) !important;
}

.tf-footer .tf-social-icon-2 a {
    transition: transform .25s ease, background-color .25s ease, border-color .25s ease;
}

.tf-footer .tf-social-icon-2 a:hover {
    transform: translateY(-3px);
}

.tf-footer .form-sub fieldset input {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
}

.tf-footer .form-sub fieldset input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.tf-footer .footer-bottom .payment-list li {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    padding: 3px 6px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
}

/* .tf-list (styles.css) is display:flex with no flex-wrap, so all ~10
   payment icons try to fit on one line - on mobile that's wider than the
   screen and the row overflows off the right edge instead of wrapping,
   cutting off the last few icons. Wrap them onto multiple centered rows
   instead. */
@media (max-width: 575px) {
    .tf-footer .footer-bottom .payment-list {
        flex-wrap: wrap;
        justify-content: center;
    }
    /* #goTop (styles.css) is fixed at bottom:90px on mobile, so it always
       occupies the same screen-relative spot regardless of scroll - once
       the footer's payment icons happen to land there at max scroll, the
       button visually sits on top of the last icon. Extra bottom padding
       pushes the icon row above that fixed zone before the page runs out
       of scroll room. */
    .tf-footer .footer-bottom .inner-bottom {
        padding-bottom: 90px;
    }
}

.tf-footer .footer-bottom select.tf-dropdown-select {
    color: #fff;
}

/* Trust strip */
.tf-footer-features {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tf-footer-features-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 28px 0;
}

.tf-footer-feature-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tf-footer-feature-item .icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

@media (min-width: 768px) {
    .tf-footer-feature-item {
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .tf-footer-features-inner {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 20px 0;
    }
}

@media (max-width: 575px) {
    .tf-footer-features-inner {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 20px 0;
    }
}

/* Mobile footer: sections stay expanded, so drop the +/- toggle icons and
   the tap-to-collapse affordance that went with them. */
@media (max-width: 575px) {
    .tf-footer .footer-heading-mobile {
        padding-right: 0;
        pointer-events: none;
    }

    .tf-footer .footer-heading-mobile::before,
    .tf-footer .footer-heading-mobile::after {
        display: none;
    }
}

/* Contact list */
.tf-footer-contact-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tf-footer-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.5;
}

.tf-footer-contact-list li .icon {
    flex-shrink: 0;
    font-size: 16px;
    color: var(--primary);
    margin-top: 4px;
}

/* Chat widget (buyer/seller messaging — product page + messages inbox).
   Shares a black-to-primary-red gradient accent with the admin support
   inbox (resources/views/admin/conversations/index.blade.php) — matches
   the site's own button/accent palette (--text/--primary) instead of an
   off-brand color — so the whole chat module reads as one consistent
   product. */
:root {
    --chat-accent-1: var(--text, #101010);
    --chat-accent-2: var(--primary, #DC4646);
    --chat-accent: var(--primary, #DC4646);
}
/* Floating popup card (HubSpot/Intercom-style) anchored above the
   .chat-fab launcher bubble, not a full-height edge drawer. */
.chat-widget {
    position: fixed;
    right: 24px;
    bottom: 170px;
    width: 370px;
    max-width: calc(100vw - 32px);
    height: 560px;
    max-height: calc(100vh - 210px);
    z-index: 1060;
    transform: translateY(16px) scale(.97);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform-origin: bottom right;
    transition: transform .2s ease, opacity .2s ease, visibility .2s ease;
}
.chat-widget.is-open {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.chat-widget-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--white, #fff);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
}
.chat-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: var(--chat-accent-1, #101010);
    color: var(--white, #fff);
    flex-shrink: 0;
}
.chat-widget-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.chat-widget-avatar {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
}
.chat-widget-seller-name {
    margin: 0;
    font-weight: 600;
    font-size: 14.5px;
    color: var(--white, #fff);
}
.chat-widget-status {
    margin: 0;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-widget-status.is-typing {
    font-weight: 600;
    color: #fff;
}
.chat-widget-product-name {
    margin: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.68);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-widget-msg-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    margin-top: 3px;
    color: #8696a0;
}
.chat-widget-message.is-mine .chat-widget-msg-meta {
    justify-content: flex-end;
    color: rgba(255, 255, 255, 0.75);
}
.chat-widget-ticks {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.75);
}
.chat-widget-ticks.is-read {
    color: #00d1ff;
}
.chat-widget-close {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    flex-shrink: 0;
    line-height: 1;
    color: var(--white, #fff);
    opacity: .85;
}
.chat-widget-close:hover {
    opacity: 1;
}
.chat-widget-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--bg, #f9f7f4);
}
.chat-widget-loading {
    color: var(--text-2);
    font-size: 13.5px;
    text-align: center;
}
.chat-widget-message {
    display: flex;
}
.chat-widget-message.is-mine {
    justify-content: flex-end;
}
.chat-widget-bubble {
    max-width: 78%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 13.5px;
    line-height: 1.5;
    word-break: break-word;
    background: var(--white, #fff);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.chat-widget-message.is-mine .chat-widget-bubble {
    background: var(--chat-accent-1, #101010);
    color: var(--white, #fff);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.chat-widget-typing-bubble {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
}
.chat-widget-typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9c9c9c;
    animation: chatWidgetTypingBounce 1.2s infinite ease-in-out;
}
.chat-widget-typing-dot:nth-child(2) { animation-delay: .15s; }
.chat-widget-typing-dot:nth-child(3) { animation-delay: .3s; }
@keyframes chatWidgetTypingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .5; }
    30% { transform: translateY(-4px); opacity: 1; }
}
.chat-widget-form {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    padding: 14px 20px;
    border-top: 1px solid var(--line, #e9e9e9);
    background: var(--white, #fff);
    flex-shrink: 0;
}
.chat-widget-input {
    flex: 1 1 auto;
    border: 1px solid var(--line, #e9e9e9);
    border-radius: 20px;
    padding: 10px 16px;
    font-size: 13.5px;
    height: 40px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.chat-widget-input:focus {
    outline: none;
    border-color: var(--chat-accent-1, #101010);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}
.chat-widget-send {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    border: none;
    background: var(--chat-accent-1, #101010);
    color: var(--white, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: transform .15s ease;
}
.chat-widget-send:hover {
    transform: scale(1.06);
}
@media (max-width: 575px) {
    .chat-widget {
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
        height: min(70vh, 560px);
    }
}

/* Floating "Chat with seller" bubble on the product page — doubles as the
   open/close toggle for the .chat-widget popup above it. Offset well above
   #goTop (bottom: 40px, 90px on mobile) and, on mobile, above the
   full-width .tf-toolbar-bottom nav + .tf-sticky-btn-atc bar too. */
.chat-icon-svg {
    flex-shrink: 0;
    font-size: 16px;
}
.chat-fab {
    position: fixed;
    /* Centered on the #goTop button below it (right: 20px, width: 38px
       at this breakpoint) rather than sharing its own right/width. */
    right: 11px;
    bottom: 100px;
    z-index: 1065;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 18px 0 16px;
    border-radius: 999px;
    background: var(--white, #fff);
    color: var(--text, #101010);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    transition: transform .2s ease, box-shadow .2s ease;
}
.chat-fab i {
    font-size: 17px;
}
.chat-fab-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 rgba(34, 197, 94, 0.55);
    animation: chatFabDotPulse 1.8s ease-out infinite;
}
@keyframes chatFabDotPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
    }
    70% {
        box-shadow: 0 0 0 7px rgba(34, 197, 94, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}
.chat-fab:hover {
    color: var(--text, #101010);
    transform: scale(1.04);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}
@media (min-width: 992px) {
    .chat-fab {
        /* #goTop grows to right: 40px, width: 48px above this breakpoint. */
        right: 36px;
    }
}
@media (max-width: 1199px) {
    .chat-fab {
        bottom: 170px;
    }
    .chat-widget {
        bottom: 240px;
    }
}

/* Header "Categories" mega menu: N real <ul class="sub-menu_list"> columns
   laid out side-by-side (chunked server-side in header.blade.php, mirroring
   the theme's own mega-menu_home_v2 markup in web-template/index.html)
   rather than one long list relying on CSS multi-column — that broke once
   category count grew past what a single column's fixed height could show,
   spilling extra columns unstyled past the white background. Sized to
   always stay fully inside the viewport — no fixed min-width and no
   display:none/hidden steps. clamp() shrinks the preview image
   continuously instead of hiding it. The 260px subtracted below covers
   the menu's offset from the left edge of the viewport (nav items before
   it + the -32px dropdown inset) so the right edge can never extend past
   the screen. */
.category-hover-menu {
    max-width: min(1240px, calc(100vw - 260px));
    box-sizing: border-box;
}
.category-hover-menu .sub-menu_list {
    width: 200px;
    flex: 0 0 auto;
}
.category-hover-menu .sub-menu_list .sub-menu_link {
    white-space: normal;
    word-break: break-word;
}
.category-hover-menu .image-preview {
    flex-shrink: 1;
    width: clamp(110px, 20vw, 260px);
    height: 380px;
}
.category-hover-menu .image-preview img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

/* Account page: profile card above the sidebar nav */
.account-profile-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--white);
    box-shadow: 0 1px 3px rgba(16, 16, 16, 0.04);
}
.account-profile-avatar {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), #a82f2f);
    color: var(--white);
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
}
.account-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.account-profile-info {
    min-width: 0;
}
.account-profile-name {
    margin: 0 0 2px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.account-profile-email {
    margin: 0;
    font-size: 13px;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Account dashboard: welcome banner */
.account-welcome-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 28px;
    margin-bottom: 24px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), #a82f2f);
    color: var(--white);
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(220, 70, 70, 0.18);
}
.account-welcome-eyebrow {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}
.account-welcome-title {
    margin: 0 0 6px;
    color: var(--white);
}
.account-welcome-text {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
}
.account-welcome-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    font-size: 24px;
    line-height: 1;
    color: var(--white);
}
.account-welcome-icon i {
    display: block;
}
@media (max-width: 575px) {
    .account-welcome-banner {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}

/* Account dashboard: colored stat icons */
.acount-order_stats .order-box {
    background: var(--white);
    box-shadow: 0 1px 3px rgba(16, 16, 16, 0.04);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    justify-content: flex-start;
}
.acount-order_stats .order_info {
    min-width: 0;
}
.acount-order_stats .info__label,
.acount-order_stats .info__count {
    white-space: nowrap;
}
.acount-order_stats .order-box:hover {
    box-shadow: 0 8px 20px rgba(16, 16, 16, 0.08);
    transform: translateY(-2px);
}
.acount-order_stats .order_icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
}
.acount-order_stats .order_icon i {
    display: block;
}
.acount-order_stats .stat-total .order_icon {
    background: rgba(220, 70, 70, 0.1);
    color: var(--primary);
}
.acount-order_stats .stat-pending .order_icon {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}
.acount-order_stats .stat-delivered .order_icon {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
}
.acount-order_stats .stat-cancelled .order_icon {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

/* Chat trigger icon badge (unread count) on the account nav */
.chat-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--chat-accent-1, #101010), var(--chat-accent-2, #DC4646));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    margin-left: 6px;
    box-shadow: 0 2px 6px rgba(220, 70, 70, 0.3);
}

/* Shimmer skeleton for lazy-loaded product/category images: a soft
   diagonal gradient sweep on the placeholder, then the real image fades
   and settles in from a slight scale rather than just popping in. */
.card-product_wrapper .product-img,
.shimmer-wrap {
    position: relative;
    overflow: hidden;
    background: #f0f0f0;
}
.card-product_wrapper .product-img::before,
.shimmer-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        100deg,
        transparent 30%,
        rgba(255, 255, 255, 0.75) 50%,
        transparent 70%
    );
    background-size: 200% 100%;
    background-position: 150% 0;
    animation: shimmer-sweep 1.5s ease-in-out infinite;
    pointer-events: none;
}
.card-product_wrapper .product-img.is-loaded::before,
.shimmer-wrap.loaded::before {
    content: none;
}
.card-product_wrapper .product-img .img-product,
.shimmer-wrap .shimmer-img {
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.card-product_wrapper .product-img .img-product.is-loaded,
.shimmer-wrap .shimmer-img.loaded {
    opacity: 1;
    transform: scale(1);
}
@keyframes shimmer-sweep {
    0% { background-position: 150% 0; }
    100% { background-position: -50% 0; }
}

/* Same shimmer skeleton treatment, sitewide, for any other image that
   isn't inside a .card-product_wrapper/.shimmer-wrap (cart, mini-cart,
   quick view/add, checkout, account orders, product gallery, about page).
   Self-contained on the <img> itself, so no wrapper markup is required —
   just add the "js-shimmer" class and toggle "is-loaded" on load. */
img.js-shimmer {
    background-color: #f0f0f0;
    background-image: linear-gradient(
        100deg,
        transparent 30%,
        rgba(255, 255, 255, 0.75) 50%,
        transparent 70%
    );
    background-size: 200% 100%;
    background-position: 150% 0;
    animation: shimmer-sweep 1.5s ease-in-out infinite;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
img.js-shimmer.is-loaded {
    opacity: 1;
    transform: scale(1);
    background-image: none;
    animation: none;
}

/* Homepage "What Our Customers Say" section — styled after Google's review
   card look (avatar, name, stars, small G badge) to read as a trust widget.
   Content is static/placeholder for now, not pulled from a live Google
   Business Profile, so it lives inline in web/index.blade.php for now. */
.google-rating-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
}

.google-rating-summary_score {
    font-family: "DM Sans", sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    color: var(--text);
}

.google-rating-summary_meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.google-rating-summary_count {
    font-size: 13px;
    color: var(--text-2);
}

.google-reviews-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 991px) {
    .google-reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .google-reviews-grid {
        grid-template-columns: 1fr;
    }
}

.google-review-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

.google-review-card_head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.google-review-card_avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-family: "DM Sans", sans-serif;
    font-weight: 600;
    font-size: 13px;
}

.google-review-card_meta {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tes_avatar-initial {
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    color: var(--white);
    font-family: "DM Sans", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1;
    text-align: center;
    letter-spacing: 0;
    padding: 0;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.tes-review-card_head .tes_avatar {
    flex-shrink: 0;
    width: 48px;
}

.tes-review-swiper {
    padding: 12px 4px 40px;
    margin: -12px -4px -40px;
}

.testimonial-v01.style-2.tes-review-card {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    cursor: pointer;
}

.tes-review-card_head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 2px;
}

.tes-review-card_head .tes_avatar {
    margin-bottom: 0;
}

.tes-review-card_head .tes_author {
    margin-bottom: 0;
}

.tes-review-card .author-verified {
    margin-top: -6px;
}

.tes-review-card .author-verified img {
    margin-top: -3px;
}

.testimonial-v01.style-2.type-2.tes-review-card .star-wrap .icon,
.testimonial-v01.style-2.type-2.tes-review-card .tes_text,
.testimonial-v01.style-2.type-2.tes-review-card .author-name,
.testimonial-v01.style-2.type-2.tes-review-card .author-verified .text,
.testimonial-v01.style-2.type-2.tes-review-card .prd_price,
.testimonial-v01.style-2.type-2.tes-review-card .prd_name {
    transition: none !important;
}

.testimonial-v01.style-2.type-2.tes-review-card:hover {
    background: var(--white) !important;
    border-color: var(--line);
}

.testimonial-v01.style-2.type-2.tes-review-card:hover .tes_text,
.testimonial-v01.style-2.type-2.tes-review-card:hover .author-name,
.testimonial-v01.style-2.type-2.tes-review-card:hover .prd_name {
    color: var(--text) !important;
}

.testimonial-v01.style-2.type-2.tes-review-card:hover .author-verified .text {
    color: var(--text-2) !important;
}

.testimonial-v01.style-2.type-2.tes-review-card:hover .prd_price {
    color: var(--primary) !important;
}

.testimonial-v01.style-2.type-2.tes-review-card:hover .star-wrap .icon {
    color: var(--yellow) !important;
}

.testimonial-v01.style-2.type-2.tes-review-card:hover {
    box-shadow: 0 14px 34px rgba(17, 17, 17, 0.2);
    transform: translateY(-3px);
}

.testimonial-v01.style-2 .tes_text-review {
    font-size: 15px;
    line-height: 24px;
}

.google-review-card_name {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.google-review-card_verified {
    flex-shrink: 0;
}

.google-review-card_time {
    margin: 0;
    font-size: 11px;
    line-height: 1.2;
    color: var(--text-3);
}

.google-review-card_badge {
    flex-shrink: 0;
}

.google-review-card .star-wrap {
    margin-bottom: 6px;
}

.google-review-card .star-wrap .icon {
    font-size: 12px;
}

.google-review-card_text {
    margin: 0;
    font-size: 12.5px;
    line-height: 18px;
    color: var(--text-2);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

@media (max-width: 991px) {
    .reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .reviews-grid {
        grid-template-columns: 1fr;
    }
}

/* Equal-height grid: every card in a row matches the row's tallest
   card, regardless of how much review text it has - unlike a masonry
   layout, card height never varies with content length. */
.product-reviews-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 20px;
}

@media (max-width: 991px) {
    .product-reviews-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .product-reviews-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Product review card used on the /product-reviews grid page: product
   image on top at a fixed aspect-ratio (same height on every card),
   then rating + date, then reviewer, then the review text
   (line-clamped) - so every card ends up the same height as the rest
   of its row no matter how long the review text or product name is. */
.pr-grid-card {
    display: flex;
    height: 100%;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.pr-grid-card:hover {
    box-shadow: 0 14px 34px rgba(17, 17, 17, 0.15);
    transform: translateY(-3px);
}

.pr-grid-card_image {
    position: relative;
    background: var(--surface);
}

/* aspect-ratio goes on the img itself, not the wrapping flex-column
   div - a percentage height on the img (height:100%) failed to
   resolve against an aspect-ratio-sized flex-column parent, so the
   img fell back to its own natural (much taller) intrinsic size. */
.pr-grid-card_image img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}

.pr-grid-card_product-name {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    max-width: calc(100% - 20px);
    background: rgba(17, 17, 17, 0.65);
    color: var(--white);
    font-size: 12px;
    line-height: 1.3;
    padding: 4px 10px;
    border-radius: 20px;
}

.pr-grid-card_body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
}

.pr-grid-card_rating-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pr-grid-card_rating-row .star-wrap .icon {
    font-size: 14px;
}

.pr-grid-card_date {
    font-size: 12px;
    color: var(--text-3);
}

.pr-grid-card_author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pr-grid-card_avatar {
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    color: var(--white);
    font-family: "DM Sans", sans-serif;
    font-weight: 600;
    font-size: 14px;
}

.pr-grid-card_author-meta {
    min-width: 0;
}

.pr-grid-card_author-name {
    margin: 0;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pr-grid-card_verified {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    line-height: 1.3;
    color: var(--text-2);
}

.pr-grid-card_text {
    margin: 0;
    font-size: 13px;
    line-height: 20px;
    color: var(--text-2);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The theme sets a black circle-with-X cursor over the dimmed area
   outside a modal/offcanvas's content box, so it looks like a stray
   cross icon once the mouse leaves the modal. Use a normal cursor there. */
.modal,
.offcanvas-backdrop {
    cursor: default;
}

/* Account pages (dashboard/orders/addresses/settings/chat) sidebar nav
   was `d-lg-block d-none` - completely absent below 992px, with no
   working fallback (the theme's sidebarMobile() clones it into a
   `.sidebar-mobile-append` target that doesn't exist anywhere in this
   project's markup, so it silently did nothing). That left mobile/tablet
   users with zero way to navigate between account pages. The nav is now
   always rendered (see account/partials/nav.blade.php) and its column
   given `col-12` so it stacks full-width above the page content on
   mobile instead of sharing a row; `sticky-top` only makes sense in that
   side-by-side desktop layout, so turn it off below 992px. */
@media (max-width: 991.98px) {
    /* styles.css's `.sticky-top { position: sticky !important; }` needs
       matching !important to actually be overridden here. */
    .sidebar-account-wrap.sticky-top {
        position: static !important;
    }
}

/* Shop page: the "Showing X of Y products" count now lives inside
   .tf-shop-control alongside the sort dropdown and layout switcher so
   they share one row instead of stacking on separate lines. */
.tf-shop-control .count-text {
    white-space: nowrap;
}

/* ==========================================================
   About Us — knife-forge / Damascus-steel redesign
   Dark forge palette (#15120d, matching auth-split__visual's
   #16130f) with the site's existing --primary red as the only
   accent color, plus a CSS-only "folded steel" texture and a
   serrated blade-edge divider — no extra photography needed
   beyond the existing shop-banner-knife.jpg product shot.
   ========================================================== */
.forge-cover.has-cover-bg::before {
    background: linear-gradient(180deg, rgba(10, 8, 6, 0.55) 0%, rgba(10, 8, 6, 0.65) 55%, #15120d 100%);
}

.dmc-section {
    position: relative;
    background: #15120d;
    color: rgba(255, 255, 255, 0.88);
    overflow: hidden;
}

/* Layered diagonal hairlines emulate the wavy grain of folded/
   hammered Damascus steel — decorative texture only, masked to a
   soft vignette so it never competes with foreground content. */
.dmc-pattern {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.55;
    background-image:
        repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 2px, transparent 2px, transparent 15px),
        repeating-linear-gradient(65deg, rgba(255, 255, 255, 0.035) 0px, rgba(255, 255, 255, 0.035) 1px, transparent 1px, transparent 21px);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 78%);
    mask-image: radial-gradient(ellipse at center, #000 0%, transparent 78%);
    pointer-events: none;
}

.dmc-section > .container {
    position: relative;
    z-index: 1;
}

/* Serrated blade-edge strip used to transition a dark forge section
   into the light section below it — a simple repeating triangle-wave
   built from two mirrored diagonal gradients rather than a giant
   clip-path polygon. */
.dmc-edge {
    display: block;
    width: 100%;
    height: 16px;
    background-color: transparent;
    background-image:
        linear-gradient(135deg, #15120d 50%, transparent 50%),
        linear-gradient(-135deg, #15120d 50%, transparent 50%);
    background-position: 0 0, 0 0;
    background-size: 24px 16px;
    background-repeat: repeat-x;
}

.dmc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--primary);
}

.dmc-eyebrow::before {
    content: '';
    width: 26px;
    height: 1px;
    background: var(--primary);
}

.dmc-section h2 {
    color: #fff;
}

.dmc-section .dmc-lead {
    font-size: 15.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.68);
}

.dmc-hero-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    background: #15120d;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}

.dmc-hero-card__media {
    position: relative;
    order: 2;
    flex: 1 1 45%;
    min-width: 320px;
}

.dmc-hero-card__media img,
.dmc-hero-card__media video {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Video: show the whole frame edge-to-edge instead of cropping it. */
.dmc-hero-card__media video {
    object-fit: fill;
}

/* Split layout: media has its own column now, so the darkening
   gradient that used to make text readable over a full-bleed video
   is no longer needed. */
.dmc-hero-card__overlay {
    display: none;
}

.dmc-hero-card__content {
    position: relative;
    order: 1;
    z-index: 1;
    flex: 1 1 480px;
    max-width: 560px;
    padding: 46px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dmc-hero-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    pointer-events: none;
}

@media (min-width: 992px) {
    .dmc-hero-card {
        min-height: 620px;
    }
}

@media (max-width: 991px) {
    .dmc-hero-card {
        flex-direction: column;
    }

    .dmc-hero-card__media {
        order: 1;
        flex: 0 0 auto;
        height: 280px;
    }

    .dmc-hero-card__content {
        order: 2;
        flex: 0 0 auto;
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .dmc-hero-card__content {
        padding: 36px 24px;
    }

    .dmc-hero-card__media {
        height: 220px;
    }
}

.dmc-highlights {
    list-style: none;
    margin: 18px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dmc-highlights li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.dmc-highlights .num {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
}

.dmc-highlights strong {
    display: block;
    color: #fff;
    font-size: 15px;
    margin-bottom: 2px;
}

.dmc-highlights span {
    display: block;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13.5px;
    line-height: 1.6;
}

/* Laptop-height fit: keep the Our Craft card (home + about) inside a
   typical 13-15" laptop viewport by tightening padding and type. */
@media (min-width: 992px) {
    .dmc-section.flat-spacing:has(.dmc-hero-card) {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .dmc-hero-card .tf-btn.mt-24 {
        margin-top: 16px !important;
    }

    /* Text column gets ~60% of the card; the video takes the rest. */
    .dmc-hero-card__content {
        flex: 0 0 60%;
        max-width: 60%;
        padding: 40px 56px;
    }

    .dmc-hero-card__media {
        flex: 1 1 0;
        min-width: 0;
    }

    .dmc-hero-card__content h2 {
        font-size: 38px;
        line-height: 1.2;
        margin-bottom: 14px !important;
    }

    .dmc-hero-card__content .dmc-lead {
        font-size: 16.5px;
        line-height: 1.6;
    }

    .dmc-hero-card .dmc-highlights {
        margin-top: 18px;
        padding-top: 18px;
        gap: 12px;
    }

    .dmc-hero-card .dmc-highlights .num {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .dmc-hero-card .dmc-highlights strong {
        font-size: 17px;
        margin-bottom: 2px;
    }

    .dmc-hero-card .dmc-highlights span {
        font-size: 14.5px;
        line-height: 1.5;
    }
}

/* Homepage "Our Craft" CTA button — kept visually static on hover
   (no color swap) since it sits alone on the dark section rather than
   in a row of other buttons that rely on the theme's default
   invert-on-hover feedback. */
.dmc-hero-card .tf-btn.btn-white:hover {
    background: var(--white);
    color: var(--text);
}

/* Stats strip nested inside the dark forge section — same swiper/
   .box-why structure as before, restyled with a steel-toned card. */
.dmc-stats .box-why {
    padding: 26px 22px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    height: 100%;
}

.dmc-stats .box-why .h1 {
    color: var(--primary);
}

.dmc-stats .box-why .title {
    color: #fff;
}

.dmc-stats .box-why .sub {
    color: rgba(255, 255, 255, 0.6) !important;
}

.dmc-stats .br-line {
    border-color: rgba(255, 255, 255, 0.12);
}

/* "From Raw Steel To Razor Edge" process section — 4 numbered cards,
   light background, replacing the theme's default accordion pattern
   with something closer to how knife/Damascus brands lay out their
   forging process. */
.dmc-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

@media (max-width: 991px) {
    .dmc-process-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 575px) {
    .dmc-process-grid {
        grid-template-columns: 1fr;
    }
}

.dmc-process-card {
    position: relative;
    padding: 30px 24px 26px;
    border-radius: 14px;
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.dmc-process-card:hover {
    transform: translateY(-4px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 16px 34px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

.dmc-process-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: #15120d;
    color: var(--primary);
    font-weight: 700;
    font-size: 15px;
}

.dmc-process-card h5 {
    margin-bottom: 10px;
    color: var(--text);
}

.dmc-process-card p {
    margin: 0;
    color: var(--text-2);
    font-size: 14.5px;
    line-height: 1.7;
}

/* "Meet Our Bladesmiths" team cards — same swiper/card-member-v01
   markup, restyled with a dark caption plate + primary-red rule so
   the section reads as part of the forge story rather than the
   theme's default plain fashion-model card. */
.dmc-team .card-member-v01 .member-info {
    padding: 16px 4px 0;
    border-top: 2px solid var(--primary);
}

.dmc-team .card-member-v01 .name {
    color: var(--text);
}

/* ==========================================================
   Contact Us — same forge redesign language as About Us.
   ========================================================== */

/* Map: thin dark steel frame + label instead of the theme's bare
   rounded iframe, so it reads as part of the same brand instead of a
   generic embedded widget. */
.dmc-map-wrap {
    position: relative;
    padding: 10px;
    border-radius: 20px;
    background: #15120d;
    box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.5);
}

.dmc-map-label {
    position: absolute;
    top: 26px;
    right: 26px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(21, 18, 13, 0.85);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dmc-map-label::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
}

.dmc-map-wrap .wg-map {
    border-radius: 14px;
}

@media (max-width: 575px) {
    .dmc-map-label {
        top: 18px;
        right: 18px;
    }
}

/* Contact section: dark forge info panel next to an elevated white
   form card — same visual pairing as the auth-split screens
   (auth-split__visual + auth-split__card), reused here so the whole
   site reads as one consistent brand instead of a generic template
   contact block. */
.dmc-contact {
    display: grid;
    grid-template-columns: 0.85fr 1fr;
    gap: 32px;
    align-items: stretch;
}

@media (max-width: 991px) {
    .dmc-contact {
        grid-template-columns: 1fr;
    }
}

.dmc-contact-info {
    position: relative;
    padding: 44px 40px;
    border-radius: 20px;
    background: #15120d;
    color: rgba(255, 255, 255, 0.85);
    overflow: hidden;
}

.dmc-contact-info h4 {
    color: #fff;
}

.dmc-contact-rows {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.dmc-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.dmc-contact-row .ic {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--primary);
    font-size: 18px;
}

.dmc-contact-row .label {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.dmc-contact-row a,
.dmc-contact-row span.value {
    color: #fff;
    font-size: 15px;
    line-height: 1.6;
}

.dmc-contact-row a:hover {
    color: var(--primary);
}

.dmc-contact-hours li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
    padding: 3px 0;
}

.dmc-contact-hours li span:first-child {
    color: rgba(255, 255, 255, 0.5);
}

.dmc-contact-social {
    display: flex;
    gap: 10px;
    margin-top: 28px;
}

.dmc-contact-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.dmc-contact-social a:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.dmc-contact-form-card {
    padding: 44px 40px;
    border-radius: 20px;
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: 0 24px 60px -30px rgba(16, 16, 16, 0.25);
}

.dmc-contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 575px) {
    .dmc-contact-info,
    .dmc-contact-form-card {
        padding: 28px 22px;
    }

    .dmc-contact-form-row {
        grid-template-columns: 1fr;
    }
}

/* Share modal — redesigned */
.modal-share .modal-content {
    padding: 24px 20px;
}
@media (min-width: 992px) {
    .modal-share .modal-content {
        padding: 32px 28px;
    }
}
.modal-share .share-subtitle {
    color: var(--text-2);
    font-size: 14px;
    margin: 4px 0 22px;
}
.modal-share .share-social-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}
.modal-share .share-social-link,
.modal-share .share-social-link:hover {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: auto;
    padding: 6px 4px;
    border: none;
    border-radius: 0;
    text-align: center;
    color: var(--text);
    background-color: transparent;
}
.modal-share .share-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    transition: transform .2s ease, box-shadow .2s ease;
}
.modal-share .share-social-link:hover .share-social-icon {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 16px -6px rgba(0, 0, 0, .35);
}
.modal-share .share-social-label {
    font-size: 12px;
    font-weight: 500;
}
.modal-share .share-fb .share-social-icon { background-color: #1877F2; font-size: 22px; }
.modal-share .share-x .share-social-icon { background-color: #000; }
.modal-share .share-social-icon--text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}
.modal-share .share-whatsapp .share-social-icon { background-color: #25D366; }
.modal-share .share-instagram .share-social-icon { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.modal-share .share-threads .share-social-icon { background-color: #000; }
.modal-share .share-email .share-social-icon { background-color: #6c757d; }

.modal-share .wrap-code {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 6px 18px;
}
.modal-share .coppyText {
    flex: 1;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}
.modal-share .btn-action-copy {
    position: static;
    flex-shrink: 0;
    min-width: 96px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    transition: background-color .2s ease;
}
.modal-share .copy-btn-copied,
.modal-share .copy-btn-failed {
    display: none;
    align-items: center;
    gap: 4px;
}
.modal-share .btn-action-copy.is-copied {
    background-color: #1a9e5c;
    border-color: #1a9e5c;
}
.modal-share .btn-action-copy.is-copied .copy-btn-label,
.modal-share .btn-action-copy.is-copied .copy-btn-failed {
    display: none;
}
.modal-share .btn-action-copy.is-copied .copy-btn-copied {
    display: flex;
}
.modal-share .btn-action-copy.is-failed {
    background-color: #d33;
    border-color: #d33;
}
.modal-share .btn-action-copy.is-failed .copy-btn-label,
.modal-share .btn-action-copy.is-failed .copy-btn-copied {
    display: none;
}
.modal-share .btn-action-copy.is-failed .copy-btn-failed {
    display: flex;
}

/* Product page review list (.wg-comment .box-comment) previously showed no
   per-review star rating at all — add it back under the reviewer's name. */
.wg-comment .box-comment .star-wrap {
    margin-bottom: 8px;
}
.wg-comment .box-comment .star-wrap .icon {
    font-size: 14px;
    color: var(--primary);
}

/* Header topbar: continuous right-to-left marquee (infiniteslide.js) for
   site announcements, replacing the old one-slide-at-a-time swiper. */
.tf-topbar-marquee {
    overflow: hidden;
}
.tf-topbar-marquee .infiniteSlide {
    gap: 18px;
}
.tf-topbar-marquee .infiniteSlide .text {
    white-space: nowrap;
}
.tf-topbar-marquee .infiniteSlide i {
    font-size: 14px;
}

/* Page-title breadcrumbs (Home > Page) on every page: shrink from the
   default text-caption-01 (14px) - the breadcrumb is a secondary nav
   aid and reads too large next to the page's big title.
   Font-size has to be set on the "a"/"p" themselves, not just the
   .breadcrumbs wrapper - .text-caption-01 sets font-size directly on
   those elements, and an inherited value never overrides an explicit
   same-element declaration regardless of specificity. */
.section-page-title .breadcrumbs a,
.section-page-title .breadcrumbs p,
.section-page-title-single .breadcrumbs a,
.section-page-title-single .breadcrumbs p {
    font-size: 11px;
    line-height: 16px;
}
.section-page-title .breadcrumbs .icon,
.section-page-title-single .breadcrumbs .icon {
    font-size: 9px;
}

/* Cart page "You May Also Like" - the theme ships no CSS for
   .flat-title at all, so the heading had no divider above it and sat
   flush against the product carousel below it. Border sits on
   .container (not the full-bleed section wrapper) so the line matches
   the page content width instead of spanning the viewport edge-to-edge. */
.cart-suggested-products {
    padding-top: 48px;
}
.cart-suggested-products .container {
    border-top: 1px solid var(--line);
    padding-top: 40px;
}
.cart-suggested-products .flat-title {
    margin-bottom: 30px;
}

/* "Best Seller" product badge — themed as a solid orange pill with a
   subtle light border, matching the requested reference style instead
   of the theme's default black badge. */
.product-badge_item.best-seller {
    background-color: #a0521a;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Order status "pending" bucket (Confirmed/In Process/Hold, see
   OrderStatusEnum::themeBadgeClass) shipped with an off-brand orange
   that didn't match the site's --primary red accent used everywhere
   else (buttons, links, totals). Recolored to --primary for
   consistency across thank-you/track-order/account pages. */
.tb-order_status.stt-pending {
    background: rgba(220, 70, 70, 0.1);
    color: var(--primary);
}


/* Top-level nav labels ("About Us", "Track Order", "Customer Reviews") wrapped
   onto two lines on mid-width screens. Keep each label on one line and tighten
   the gap between items on narrower desktops so the row still fits. */
.tf-header .box-nav-menu > .menu-item > .item-link,
.tf-header .box-nav-menu > .menu-item > .item-link .text {
    white-space: nowrap;
}

@media (min-width: 1200px) and (max-width: 1500px) {
    .tf-header .box-nav-menu {
        column-gap: 20px;
    }
}

/* Temporary site-wide "under development" notice shown above the topbar
   announcements marquee on every page. Remove this block (and its markup in
   web/layouts/partials/header.blade.php) once the site goes live. */
.tf-under-dev-notice {
    background-color: #b02a2a;
    padding: 8px 16px;
    font-size: 13px;
    line-height: 1.4;
    animation: tf-under-dev-blink 1.6s ease-in-out infinite;
}

@keyframes tf-under-dev-blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.55;
    }
}

/* Respect users who've asked the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
    .tf-under-dev-notice {
        animation: none;
    }
}

/* Footer logo: sized by height so any aspect ratio sits flush-left with the
   text below it (a fixed 150px width inflated square logos and exposed
   transparent padding as a visible left gap). */
.footer-infor .logo-site img {
    width: auto;
    height: 56px;
    max-width: 180px;
    object-fit: contain;
    object-position: left center;
}

/* Account sidebar: unread messages badge */
.my-account-nav .account-nav-badge {
    margin-left: auto;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--primary);
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
    line-height: 22px;
    text-align: center;
}

/* Messages page: conversation list scrolls instead of growing the page */
.account-messages-list {
    max-height: 480px;
    overflow-y: auto;
    padding-right: 6px;
    overscroll-behavior: contain;
}