/* 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: 500px;
    object-fit: cover;
}

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

.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 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;
}

/* 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: 90px 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 a single column regardless of the
   mobile-first tf-col-2/3/4 base class, so phones always get 1 product
   per row instead of 2. */
@media (max-width: 575.98px) {
    .shop-section-grid.tf-col-2,
    .shop-section-grid.tf-col-3,
    .shop-section-grid.tf-col-4 {
        grid-template-columns: minmax(0, 1fr);
    }
}
@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)); }
}
@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)); }
}
@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)); }
}
@media (min-width: 1200px) {
    .shop-section-grid.xl-col-4 { grid-template-columns: repeat(4, 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: 6px 10px;
    font-size: 12px;
}
.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 color from
   the existing brand palette instead of a one-off new color. */
.btn-action-price.js-add-to-cart {
    background: #B08D3E;
}
.btn-action-price.js-add-to-cart:hover {
    background: #96762f;
}
.btn-action-price.js-open-customize,
.btn-action-price.js-customize-login-required {
    background: #A0522D;
}
.btn-action-price.js-open-customize:hover,
.btn-action-price.js-customize-login-required:hover {
    background: #874523;
}
.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: 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;
    }

    #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;
}

/* 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. */
.category-feature-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
}

@media (max-width: 1199px) {
    .category-feature-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
}

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

@media (max-width: 575px) {
    .category-feature-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* Full-bleed tile: image fills the whole card, title overlaid at the
   bottom on a dark gradient scrim instead of sitting in a separate
   white caption box below the photo — reads as one forged steel plate
   per category rather than a plain product-grid card, and holds up
   visually across a long list (~24 categories) better than a bento/
   featured-tile layout would. */
.category-feature-card {
    position: relative;
    display: block;
    border-radius: 14px;
    overflow: hidden;
    background: #15120d;
    text-decoration: none;
    box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.category-feature-card:hover {
    box-shadow: 0 18px 38px -16px rgba(0, 0, 0, 0.45);
    transform: translateY(-3px);
}

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

.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 {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(21, 18, 13, 0) 45%, rgba(21, 18, 13, 0.85) 100%);
    pointer-events: none;
}

.category-feature-card_head {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 14px 16px;
}

.category-feature-card_title {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-family: "DM Sans", sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: #fff;
}

.category-feature-card_arrow {
    flex-shrink: 0;
    display: inline-block;
    color: var(--primary);
    transition: transform 0.25s ease;
}

.category-feature-card:hover .category-feature-card_arrow {
    transform: translateX(4px);
}

/* 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: rgba(255, 255, 255, 0.7);
}

/* 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%;
}

.card-product_info .name-rating-row .name-product {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-product_info .seller-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* 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: 13px;
}

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

/* 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;
}

/* 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: 18px;
    line-height: 26px;
    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);
}

.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 {
    box-shadow: 0 0 0 2px #fff;
}

/* ==========================================================
   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(4, 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 (max-width: 991px) {
    .tf-footer-features-inner {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* 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);
}

/* Homepage "All Reviews" section — 4-box stat row (Google rating, orders
   completed, products, happy clients), reusing the same .box-why card
   markup as the About page stats swiper (see about.blade.php), but as a
   plain light-card grid instead of a dark swiper slide. */
.home-stats_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 24px;
    margin-bottom: 32px;
}

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

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

.home-stats_grid .box-why {
    padding: 18px 16px;
    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.08) 0px 0px 0px 1px;
    gap: 4px;
    cursor: default;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.home-stats_grid .box-why:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 18px 34px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

.home-stats_grid .box-why:hover .home-stats_icon {
    transform: scale(1.12) rotate(-6deg);
}

.home-stats_icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(220, 70, 70, 0.1);
    transition: transform 0.25s ease;
}

.home-stats_icon .icon {
    font-size: 19px;
    color: var(--primary);
}

.home-stats_grid .box-why:nth-child(2) .home-stats_icon {
    background: rgba(112, 133, 122, 0.12);
}

.home-stats_grid .box-why:nth-child(2) .home-stats_icon .icon {
    color: var(--secondary);
}

.home-stats_grid .box-why:nth-child(3) .home-stats_icon {
    background: rgba(240, 167, 80, 0.15);
}

.home-stats_grid .box-why:nth-child(3) .home-stats_icon .icon {
    color: var(--yellow);
}

.home-stats_grid .box-why:nth-child(4) .home-stats_icon {
    background: rgba(44, 39, 98, 0.1);
}

.home-stats_grid .box-why:nth-child(4) .home-stats_icon .icon {
    color: #2C2762;
}

.home-stats_grid .box-why .h1 {
    font-size: 24px;
    color: var(--text);
    margin-bottom: 0;
}

.home-stats_grid .box-why .title {
    color: var(--text);
    font-size: 14px;
}

.home-stats_grid .box-why .sub {
    font-size: 12px;
    line-height: 1.35;
}

.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;
}

.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;
    }
}

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

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

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

/* Product review cards — reuses the theme's own .testimonial-v01.style-2.type-2
   markup/CSS (see styles.css, copied from the theme's home-baby.html demo) as
   the base card, adding only the avatar circle (photo if the reviewer has
   one on file, else initials) and a "featured" dark variant for every 4th
   card. */
.product-review-card {
    height: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.product-review-card:hover {
    transform: translateY(-4px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 16px 32px 0px;
}

/* Theme's own .testimonial-v01.style-2.type-2 CSS (styles.css) swaps the
   card to a green background on hover for every card (matching specificity
   needed to beat it — same 3 classes + :hover). We only want that green
   treatment on the "featured" card (always-on, not hover-triggered), so
   cancel it here for the regular cards. */
.testimonial-v01.style-2.type-2.product-review-card:not(.is-featured):hover {
    background: var(--white);
}

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

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

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

.testimonial-v01.style-2.type-2.product-review-card:not(.is-featured):hover .tes_text,
.testimonial-v01.style-2.type-2.product-review-card:not(.is-featured):hover .author-verified .text {
    color: var(--text-2) !important;
}

.product-review-card_avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-family: "DM Sans", sans-serif;
    font-weight: 600;
    font-size: 20px;
}

.product-review-card_avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-review-card .tes_text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-review-card .tes_product {
    text-decoration: none;
}

.product-review-card .tes_product .product-image {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: var(--bg-2);
}

.product-review-card .tes_product .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-review-card.is-featured {
    background: var(--secondary);
}

.product-review-card.is-featured .author-name,
.product-review-card.is-featured .tes_text,
.product-review-card.is-featured .prd_name {
    color: var(--white);
}

.product-review-card.is-featured .author-verified .text,
.product-review-card.is-featured .prd_price {
    color: rgba(255, 255, 255, 0.85);
}

.product-review-card.is-featured .author-verified .icon {
    color: var(--white);
}

/* 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: 17px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.68);
}

.dmc-intro {
    display: grid;
    grid-template-columns: 0.9fr 1fr;
    gap: 56px;
    align-items: start;
}

.dmc-intro-media {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}

.dmc-intro-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3.4;
}

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

.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: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--primary);
    font-size: 12px;
    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;
}

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

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

    .dmc-intro-media img {
        aspect-ratio: 16 / 9;
    }
}

/* 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-intro .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);
}

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

/* 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);
}