.ct-l .owl-carousel .owl-dots.disabled {
  display: block !important;
}

.mt-lm .owl-carousel .owl-dots.disabled {
  display: block !important;
}
.mt-lm .owl-carousel .owl-nav.disabled {
  display: block !important;
}

.mt .owl-carousel .owl-dots.disabled {
  display: block !important;
}

.owl-stage-out img {
  width: 60% !important;
}

.balancco_icon_padding {
  padding-left: 2px !important;
  padding-right: 2px !important;
}

.custom-settings1 .owl-nav {
  display: none;
}
.custom-settings1 .owl-dots {
  position: absolute;
  left: 0%;
  right: 0%;
  bottom: 2%;
}

.detail-custom .product-details {
  text-align: left !important;
}
.detail-custom .zoomContainer {
  display: none !important;
}/*# sourceMappingURL=Custom.css.map */
html {
    overflow-x: hidden !important;
}

body {
    overflow-x: hidden !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
}

.page-wrapper {
    background-color: #fff;
    overflow-x: hidden;
    max-width: 100%;
}

/* Fix 100vw elements causing right-side overflow.
   100vw includes the scrollbar, 100% does not. */
.off-canvas .canvas-overlay,
.canvas-overlay {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
}

.mobile-menu-close {
    left: auto !important;
    right: 10px !important;
}
/* Single page css start here */

.woocommerce-page div.product div.images
{
    width: 100% !important;
}
.product_meta .posted_in,.product_meta .tagged_as,.product_meta .sku_wrapper
{
    display: none;
}
.is-right-sidebar
{
    display: none;
}
.shop-page .is-right-sidebar
{
    display: block;
}
.post-type-archive-product .is-right-sidebar
{
  display: block !important;
}
.product_title
{
    margin-bottom: 0.6rem;
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    white-space: normal;
    color: #222;

}
.product-single .product-details .price
{
    display: block;
    margin-bottom: 1.1rem;
    color: #2f3945 !important;
    font-size: 3rem !important;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1;
}
.woocommerce-loop-product__title
{
   
    margin-bottom: 0.3rem;
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: #444;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}
.related-products ul
{
    text-align: center;
}
.related-products .price
{
        overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block !important;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1.3rem !important;
    font-size: 1.6rem !important;
    font-weight: 600 !important;
    line-height: 1.86;
    color: #2f3945 !important;
}
.woocommerce span.onsale
{
    top: 0px !important;
    background-color: #EA191F !important;
    display: inline-block;
    text-align: center !important;
    margin-bottom: 0.5rem !important;
    padding: 0.5rem 1.1rem !important;
    font-size: 1.1rem !important;
    border-radius: 2px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: #fff;
    text-transform: uppercase;
    min-height: 0px !important;
}
.product-popup span.onsale
{
    top: 0px !important;
    background-color: #EA191F !important;
    display: inline-block;
    text-align: center !important;
    margin-bottom: 0.5rem !important;
    padding: 0.5rem 1.1rem !important;
    font-size: 1.1rem !important;
    border-radius: 2px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: #fff;
    text-transform: uppercase;
    min-height: 0px !important;
}
.product-popup div.product .stock {
    display: inline-block;
    padding: 4px 2rem;
    margin-bottom: 2rem;
    border-radius: 2px;
    color: #fff !important;
    background: #2f3945;
    font-weight: 600;
}
.product-popup .quantity .qty {
    width: 3.631em;
    text-align: center;
}

.product-popup .quantity .qty {
    height: 4.5rem;
    background: transparent;
    font-size: 1.4rem;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
}
.product-single .onsale
{
    left: 10px !important;
}
.woocommerce div.product form.cart .button {
    vertical-align: middle;
    float: unset !important;
    border: 0;
    flex: 1;
    font-size: 1.4rem;
    border-radius: 0.3rem;
    background-color: #EA191F;
    transition: background-color 0.3s;
    color: #fff;
    cursor: pointer;
    min-width: 45.7rem;
    height: 4.5rem;
    margin-left: 1rem;
}
.single-product div.product form.cart .quantity {
float: none;
margin: 0;
display: inline-block;
}
/* End here single page css */
/* cart page */
.woocommerce-cart-form th {
    border-bottom: 1px solid #e1e1e1 !important;
}
table, td, th {
    border: none !important;
}
.shop-table td {
    border-bottom: 1px solid #e1e1e1 !important;
}
.woocommerce .quantity .qty {
    height: 4.5rem;
    background: transparent;
    font-size: 1.4rem;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
}

.custom-m .qty {
    border: 0 !important;
}
#post-9 .entry-header,#post-8 .entry-header
{
  display: none !important;
}
/* end here */
/* Shop page */
.is-right-sidebar
{
  width: 100% !important;
}
.custom-sm{
display: none !important;
}
.sidebar .widget>*:not(.widget-title) {
    transition: opacity 0.3s;
}
.sidebar.shop-sidebar .yith-wcan-list .empty {
    text-decoration: line-through;
}
.sidebar .widget>ul>li:not(:last-child) {
    border-bottom: 1px solid #eee;
}
.yith-wcan-list
{
    padding-left: 0px;
}
.wc-block-price-filter__controls input
{
    background-color: #fff !important;
}
.yith-wcan-select-wrapper ul.yith-wcan-select.yith-wcan li
{
    border-bottom: 0px solid #cecece !important;
    border-top: 0px solid #cecece !important;
}
.yith-wcan-select-wrapper ul.yith-wcan-select.yith-wcan li:hover
{
    -webkit-box-shadow: 0px 0px 0px #F2F2F2 inset, 0px 0px 0px #F2F2F2 inset !important;
    -moz-box-shadow: 0px 0px 0px #f2f2f2 inset, 0px 0px 0px #f2f2f2 inset !important;
    box-shadow: 0px 0px 0px #F2F2F2 inset, 0px 0px 0px #F2F2F2 inset !important;
    border-bottom: 0px solid #cecece !important;
    border-top: 0px solid #cecece !important;
}
.wp-block-heading
{
    margin-bottom: 2rem;
    padding: 1.1rem 0;
    font-size: 1.6rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2;
    letter-spacing: -0.025em;
}
.sidebar .widget .wc-layered-nav-term, .sidebar .widget .with-checkbox li, .sidebar .widget .yith-wcan-list li {
    padding: 0;
    display: flex;
    align-items: center;
}
.sidebar .widget .wc-layered-nav-term, .sidebar .widget .with-checkbox li, .sidebar .widget .yith-wcan-list li small
{
        margin-right: 0px !important;
    margin: auto;

}
.sidebar.shop-sidebar .yith-woo-ajax-navigation li, .sidebar.shop-sidebar .widget .wc-layered-nav-term, .sidebar.shop-sidebar .widget-price-filter li, .sidebar.shop-sidebar .widget_product_categories .cat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.yith-woocommerce-ajax-product-filter ul li {
    list-style: none;
}
.sidebar .widget .wc-layered-nav-term>a, .sidebar .widget .with-checkbox li>a, .sidebar .widget .yith-wcan-list li>a, .sidebar .widget .wc-layered-nav-term.empty span, .sidebar .widget .with-checkbox li.empty span, .sidebar .widget .yith-wcan-list li.empty span {
    position: relative;
    display: block;
    padding: 1.35rem 0 1.35rem 3rem;
}
.sidebar .widget .wc-layered-nav-term.chosen>a:before, .sidebar .widget .with-checkbox li.chosen>a:before, .sidebar .widget .yith-wcan-list li.chosen>a:before {
    content: "\f00c";
    color: #fff;
    background-color: #222;
    border-color: #222;

}
 .sidebar .widget .yith-wcan-list li>a:before
 {
    content: '';
    position: absolute;
    border: 1px solid;
    border-radius: 2px;
    width: calc(18px * var(--rio-typo-ratio,1));
    height: calc(18px * var(--rio-typo-ratio,1));
    top: 50%;
    transform: translateY(-50%);
    left: 3px;
    color: #999;
    font-size: .7em;
    font-weight: 900;
    font-family: 'Font Awesome 5 Free';
    text-align: center;
    text-indent: 1px;
    line-height: 16px;
 }
 @charset "UTF-8";
:root {
  --star-size: 24px;
  --star-color: #D3D3D3;
  --star-background: #fc0;
}

.Stars {
  --percent: calc(var(--rating) / 5 * 100%);
  display: inline-block;
  font-size: var(--star-size);
  font-family: "riode";
  line-height: 1;
}
.Stars::before {
  content: "★★★★★";
  letter-spacing: 3px;
  background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.reviews_container {
    cursor: pointer;
}

/* ============================================================
   TECHNOOR HEADER — NEW FIGMA DESIGN
   ============================================================ */

/* ── Override all existing header-middle styles ── */
.header.tz-header,
.header.tz-header .header-middle,
.header-middle.tz-header-main,
.tz-header-main {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    color: #222222 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-family: 'Lexend', sans-serif;
    border-bottom: none;
}

/* ── Cart z-index hierarchy ──
   style.css values:  overlay=2998 | cart-panel=2999
   We put header-middle above both (3001).
──────────────────────────────────────────────── */
.tz-header {
    position: relative;
    z-index: 3001;
}
.tz-header-main,
.tz-header .header-middle {
    position: relative;
    z-index: 3001;
}
.tz-header .sticky-content.fixed {
    z-index: 3001 !important;
    background: #FFFFFF !important;
    box-shadow: none;
}

/* ═══════════════════════════════════════════════════════
   CART OFF-CANVAS PANEL
   Opacity bug fix: the base .dropdown-box rule in style.css
   has opacity:0 + visibility:hidden + transition:opacity 0.2s.
   The .dropdown:hover rule fires because the canvas-overlay
   covers the viewport and is inside .dropdown.cart-dropdown.
   Fix: kill pointer-events on the outer div unless opened,
   force visibility:visible + opacity:1 in ALL states, and
   replace the transition with right-only so opacity never
   animates.
═══════════════════════════════════════════════════════ */

/* Outer wrapper: no pointer-events when closed (prevents
   .dropdown:hover from firing on the ghost div) */
.tz-cart-wrap {
    pointer-events: none !important;
}
.tz-cart-wrap.opened {
    pointer-events: auto !important;
}
/* Always allow clicks on the panel itself and close button */
.tz-cart-wrap .dropdown-box,
.tz-cart-wrap .btn-close,
.tz-cart-wrap .cart-toggle {
    pointer-events: auto !important;
}

/* Panel: lock opacity/visibility, right-only transition */
.tz-cart-wrap .dropdown-box,
.tz-cart-wrap:hover .dropdown-box,
.dropdown:hover .tz-cart-wrap .dropdown-box,
.dropdown.tz-cart-wrap .dropdown-box {
    position: fixed !important;
    top: 0 !important;
    right: -400px !important;
    width: 380px !important;
    max-width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
    background: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: right 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-shadow: -4px 0 32px rgba(0,0,0,0.14) !important;
    min-width: unset !important;
}
/* Opened: slide in */
.tz-cart-wrap.opened .dropdown-box {
    right: 0 !important;
}

/* Canvas overlay */
.tz-cart-wrap .canvas-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    z-index: 9998 !important;
    background: rgba(0,0,0,0.48) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.32s ease, visibility 0.32s ease !important;
    pointer-events: none !important;
    cursor: pointer;
}
.tz-cart-wrap.opened .canvas-overlay {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* ── Cart Panel Header ── */
.tz-cart-wrap .canvas-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 20px !important;
    background: #111111 !important;
    border-bottom: none !important;
    flex-shrink: 0 !important;
    min-height: 60px !important;
}
.tz-cart-wrap .tz-cart-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tz-cart-wrap .canvas-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}
.tz-cart-wrap .tz-cart-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #EA191F !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    min-width: 22px !important;
    height: 22px !important;
    border-radius: 11px !important;
    padding: 0 6px !important;
    line-height: 1 !important;
}
.tz-cart-wrap .btn-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.1) !important;
    border: 1.5px solid rgba(255,255,255,0.18) !important;
    color: #ffffff !important;
    cursor: pointer !important;
    transition: background 0.18s !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
}
.tz-cart-wrap .btn-close svg {
    display: block !important;
    color: #ffffff !important;
    stroke: #ffffff !important;
}
.tz-cart-wrap .btn-close:hover {
    background: rgba(255,255,255,0.22) !important;
    border-color: rgba(255,255,255,0.35) !important;
    color: #ffffff !important;
}

/* ── Product list ── */
.tz-cart-wrap .tz-cart-products {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    max-height: none !important;
    scrollbar-width: thin !important;
    scrollbar-color: #e0e0e0 transparent !important;
}
.tz-cart-wrap .tz-cart-products::-webkit-scrollbar {
    width: 4px;
}
.tz-cart-wrap .tz-cart-products::-webkit-scrollbar-track {
    background: transparent;
}
.tz-cart-wrap .tz-cart-products::-webkit-scrollbar-thumb {
    background: #e0e0e0;
    border-radius: 4px;
}
.tz-cart-wrap .header-quickcart {
    padding: 0 !important;
}

/* Each cart item row */
.tz-cart-wrap .product.product-cart {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    position: relative !important;
    background: #ffffff !important;
    margin: 0 !important;
    transition: background 0.15s !important;
}
.tz-cart-wrap .product.product-cart:hover {
    background: #fafafa !important;
}
/* Product thumbnail */
.tz-cart-wrap .product-media {
    flex-shrink: 0 !important;
    width: 70px !important;
    height: 70px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #f7f7f7 !important;
    border: 1px solid #efefef !important;
    margin: 0 !important;
    padding: 0 !important;
}
.tz-cart-wrap .product-media a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
}
.tz-cart-wrap .product-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 4px !important;
    box-sizing: border-box !important;
    float: none !important;
}
/* Product details */
.tz-cart-wrap .product-detail {
    flex: 1 !important;
    min-width: 0 !important;
    padding-right: 30px !important;
}
.tz-cart-wrap a.product-name {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #222222 !important;
    text-decoration: none !important;
    line-height: 1.45 !important;
    margin-bottom: 7px !important;
    display: block !important;
    font-family: inherit !important;
    letter-spacing: normal !important;
    padding: 0 !important;
    text-align: left !important;
}
.tz-cart-wrap a.product-name:hover {
    color: #EA191F !important;
}
.tz-cart-wrap .price-box {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
}
/* Qty stepper */
.tz-cart-wrap .tz-qty-control {
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    height: 26px !important;
    background: #f7f7f7 !important;
    flex-shrink: 0 !important;
}
.tz-cart-wrap .tz-qty-btn {
    background: transparent !important;
    border: none !important;
    width: 26px !important;
    height: 26px !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #555555 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    transition: background 0.15s, color 0.15s !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}
.tz-cart-wrap .tz-qty-btn:hover {
    background: #EA191F !important;
    color: #ffffff !important;
}
.tz-cart-wrap .tz-qty-val {
    min-width: 24px !important;
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #222222 !important;
    line-height: 1 !important;
    padding: 0 2px !important;
    user-select: none !important;
}
.tz-cart-wrap .product-price,
.tz-cart-wrap .product-price .woocommerce-Price-amount {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}
/* Remove button */
.tz-cart-wrap a.mini_remove {
    position: absolute !important;
    top: 14px !important;
    right: 16px !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: #f0f0f0 !important;
    color: #888888 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: background 0.15s, color 0.15s !important;
    line-height: 1 !important;
    border: none !important;
    padding: 0 !important;
    min-width: unset !important;
    min-height: unset !important;
    box-shadow: none !important;
    margin: 0 !important;
}
.tz-cart-wrap a.mini_remove:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
}
/* Overrides legacy .cart-dropdown .dropdown-box .header-quickcart .mini_remove rule
   in skyphonez.css, which shrank this to an invisible 0.5em dot. Higher specificity
   than that selector (6 classes + tag) is required to win regardless of load order. */
.tz-cart-wrap.cart-dropdown .dropdown-box .header-quickcart .product-cart a.mini_remove {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
    font-weight: 400 !important;
    background: #f0f0f0 !important;
    color: #888888 !important;
    border: none !important;
}
.tz-cart-wrap.cart-dropdown .dropdown-box .header-quickcart .product-cart a.mini_remove:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
}
.tz-cart-wrap a.mini_remove svg {
    width: 13px !important;
    height: 13px !important;
    display: block !important;
    pointer-events: none !important;
}

/* Updating state */
.tz-cart-wrap .tz-cart-products.tz-cart-updating {
    opacity: 0.5 !important;
    pointer-events: none !important;
    transition: opacity 0.2s !important;
}

/* Empty cart */
.tz-cart-wrap .woocommerce-mini-cart__empty-message {
    text-align: center !important;
    padding: 56px 24px 40px !important;
    color: #999999 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* ── Subtotal row ── */
.tz-cart-wrap .cart-total {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 20px !important;
    border-top: 1px solid #f0f0f0 !important;
    background: #ffffff !important;
    flex-shrink: 0 !important;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.04) !important;
}
.tz-cart-wrap .tz-cart-subtotal-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #666666 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}
.tz-cart-wrap .header-total-amount {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #111111 !important;
    letter-spacing: -0.02em !important;
}

/* ── Action buttons ── */
.tz-cart-wrap .cart-action {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 14px 20px 20px !important;
    background: #ffffff !important;
    flex-shrink: 0 !important;
}
.tz-cart-wrap .tz-cart-btn {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 13px 20px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: background 0.18s, color 0.18s, border-color 0.18s !important;
    box-sizing: border-box !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
}
.tz-cart-wrap .tz-cart-btn--outline {
    background: #ffffff !important;
    color: #333333 !important;
    border: 1.5px solid #d0d0d0 !important;
}
.tz-cart-wrap .tz-cart-btn--outline:hover {
    background: #f5f5f5 !important;
    color: #111111 !important;
    border-color: #aaaaaa !important;
}
.tz-cart-wrap .tz-cart-btn--filled {
    background: #EA191F !important;
    color: #ffffff !important;
    border: 1.5px solid #EA191F !important;
}
.tz-cart-wrap .tz-cart-btn--filled:hover {
    background: #C4141A !important;
    border-color: #C4141A !important;
    color: #ffffff !important;
}

/* Mobile: full-width panel */
@media (max-width: 479px) {
    .tz-cart-wrap .dropdown-box,
    .tz-cart-wrap:hover .dropdown-box {
        width: 100vw !important;
        right: -100vw !important;
    }
    .tz-cart-wrap.opened .dropdown-box {
        right: 0 !important;
    }
}

.tz-header .sticky-content-wrapper {
    height: auto !important;
}

/* ── Inner flex container ── */
.tz-hdr-inner {
    display: flex !important;
    align-items: center !important;
    gap: 70px;
    padding: 13px 20px !important;
    width: 100%;
    box-sizing: border-box;
}

/* ── Logo ── */
.tz-hdr-logo {
    flex-shrink: 0;
    display: flex !important;
    align-items: center;
    gap: 10px;
}

.tz-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none !important;
}

.tz-logo-img {
    height: 32px !important;
    width: auto;
    display: block;
    object-fit: contain;
}

.tz-logo-text {
    color: #EA191F;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* Mobile hamburger */
.tz-mobile-toggle {
    color: #222222 !important;
    font-size: 20px;
    display: none;
    margin-right: 8px;
    text-decoration: none !important;
}

/* ── FIX 1: Search bar — clear visible SEARCH button ── */
.tz-hdr-search {
    flex: 1 !important;
    display: flex !important;
    align-items: center;
    min-width: 0;
}

.tz-search-wrap {
    position: relative;
    width: 100%;
}

.tz-search-form {
    width: 100%;
    margin: 0;
    padding: 0;
}

.tz-search-bar {
    display: flex !important;
    align-items: center;
    background: #fff;
    border-radius: 15px !important;
    height: 48px;
    padding: 4px 4px 4px 20px;
    overflow: visible;
    box-shadow: 0 0px 7px rgba(0,0,0,0.18);
    width: 100%;
    box-sizing: border-box;
    border: none;
}

.tz-search-input {
    flex: 1;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 14px;
    color: #333;
    padding: 0;
    height: 40px !important;
    min-height: unset !important;
    box-shadow: none !important;
    font-family: 'Lexend', sans-serif;
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
}

.tz-search-input::placeholder {
    color: #aaa;
    font-size: 14px;
}

/* Ensure button is clearly visible — target with high specificity */
.tz-search-form .tz-search-bar button.tz-search-btn,
.tz-search-bar .tz-search-btn {
    background: #EA191F !important;
    background-color: #EA191F !important;
    color: #fff !important;
    border: none !important;
    border-radius: 15px !important;
    padding: 0 24px !important;
    height: 40px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
    transition: background 0.2s;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    line-height: 1;
    -webkit-appearance: none;
    appearance: none;
}

.tz-search-form .tz-search-bar button.tz-search-btn:hover,
.tz-search-bar .tz-search-btn:hover {
    background: #C4141A !important;
    background-color: #C4141A !important;
}

/* Search autocomplete results */
#datafetch {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.14);
    z-index: 9999;
    overflow: hidden;
    color: #333 !important;
}

#datafetch ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 4px 0 !important;
}

#datafetch ul li {
    border-bottom: 1px solid #f0f0f0 !important;
}

#datafetch ul li:last-child {
    border-bottom: none !important;
}

#datafetch ul li a.search_txt {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 14px !important;
    color: #333 !important;
    text-decoration: none !important;
    transition: background .15s;
}

#datafetch ul li a.search_txt:hover {
    background: #fdeceb !important;
    color: #EA191F !important;
}

#datafetch ul li a.search_txt > div:first-child {
    flex-shrink: 0 !important;
    width: 44px !important;
    height: 44px !important;
    overflow: hidden !important;
    border-radius: 6px !important;
    background: #f5f5f5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#datafetch ul li a.search_txt > div:first-child img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

#datafetch ul li a.search_txt > div:last-child {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #333 !important;
    line-height: 1.4 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

/* ── Right actions ── */
.tz-hdr-actions {
    display: flex !important;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

/* Login / Register */
.tz-action-login {
    display: flex !important;
    align-items: center;
    gap: 7px;
    color: #222222 !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.2s;
    line-height: 1.3;
}

.tz-action-login:hover {
    opacity: 1;
    color: #EA191F !important;
}

.tz-action-login i {
    font-size: 19px;
    flex-shrink: 0;
}

/* Wishlist & generic action icons */
.tz-action-icon {
    display: flex !important;
    align-items: center;
    color: #222222 !important;
    font-size: 20px;
    text-decoration: none !important;
    cursor: pointer;
    transition: color 0.2s;
    position: relative;
}

.tz-action-icon:hover {
    opacity: 1;
    color: #EA191F !important;
}

/* Cart badge */
.tz-cart-wrap .tz-cart-link {
    color: #222222 !important;
    font-size: 21px;
    display: flex !important;
    align-items: center;
    position: relative;
    text-decoration: none !important;
}

.tz-cart-wrap .tz-cart-link i {
    color: #222222 !important;
}

.tz-cart-badge {
    position: absolute !important;
    top: -9px !important;
    right: -11px !important;
    background: #EA191F !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    width: 18px !important;
    height: 18px !important;
    min-width: unset !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 !important;
}

/* Wishlist badge — matches the cart badge, pinned to the heart's top-right.
   .tz-action-icon is already position:relative, so this anchors to it. */
.tz-wishlist.tz-action-icon {
    position: relative !important;
}
.tz-wishlist-badge {
    position: absolute !important;
    top: -9px !important;
    right: -11px !important;
    background: #EA191F !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    width: 18px !important;
    height: 18px !important;
    min-width: unset !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 !important;
}

/* GTranslate Wrapper */
.tz-country-wrap {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.tz-country-wrap .gtranslate_wrapper {
    display: inline-flex;
    align-items: center;
    position: relative;
}

/* Saari language links ko aik jaga stack karein taake layout disturb na ho */
/* .tz-country-wrap a[data-gt-lang] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    font-size: 0 !important;
} */

/* Sirf current active language wali link ko visible aur clickable rakhein */
.tz-country-wrap a.gt-current-lang {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Unwanted text (EN, AR) ko hide karne ke liye */
.tz-country-wrap a[data-gt-lang]::before,
.tz-country-wrap a[data-gt-lang]::after {
    display: none !important;
}

/* Flag Icon ka size set karein */
.tz-country-wrap a[data-gt-lang] img {
    width: 24px !important;
    height: auto !important;
    display: inline-block !important;
    border-radius: 2px;
}

/* ── Announcement bar ── */
.tz-announcement-bar {
    background: #EA191F !important;
    color: #FFFFFF;
    width: 100%;
    height: 35px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Bar stays full width (background fills the screen); the marquee itself is
   capped to the site's 1420px content width and centered, same as the hero/
   USP/subscribe sections, so the scrolling text never starts flush at the
   screen edge. */
.tz-announcement-inner {
    width: 100%;
    max-width: 1420px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding: 0 20px;
}

.tz-announcement-marquee {
    width: 100%;
    height: 35px;
    line-height: 35px;
}

.tz-announcement-bar .welcome-msg {
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Clickable announcement — same look as plain text, underline on hover so
   it reads as a link without breaking the bar's flat design. */
a.tz-announcement-link.welcome-msg {
    text-decoration: none;
}
a.tz-announcement-link.welcome-msg:hover {
    text-decoration: underline;
    color: #FFFFFF;
}

/* Separator between multiple announcements scrolling in the same marquee */
.tz-announcement-sep {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}

/* =========================================================
   TECHNOOR FLASH DEALS BAR
========================================================= */

.tz-flash-bar {
    width: 100% !important;
    height: 38px !important;
    overflow: hidden !important;
    background: #c9151e !important;
    color: #ffffff !important;
    display: block !important;
    position: relative !important;
    z-index: 9999 !important;
}

/* .top-notification-bar: not used by any current template — kept only
   because it was present in the Additional CSS being merged in. */
.top-notification-bar {
    width: 100% !important;
}

.tz-flash-bar > div,
.top-notification-bar .container,
.tz-flash-item-wrapper {
    max-width: 1420px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: hidden !important;
}


/* Horizontal scrolling track */

.tz-flash-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;

    width: max-content !important;
    min-width: max-content !important;

    height: 38px !important;

    animation: tzFlashScroll 25s linear infinite !important;
}


/* Individual deal */

.tz-flash-item {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;

    flex: 0 0 auto !important;

    padding: 0 35px !important;

    white-space: nowrap !important;
}


/* Link */

.tz-flash-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;

    color: #ffffff !important;
    text-decoration: none !important;

    white-space: nowrap !important;
}


/* Text */

.tz-flash-text {
    display: inline-block !important;

    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    white-space: nowrap !important;
}


/* Image */

.tz-flash-image {
    width: 24px !important;
    height: 24px !important;

    object-fit: contain !important;

    display: inline-block !important;

    flex-shrink: 0 !important;
}


/* Scrolling */

@keyframes tzFlashScroll {

    0% {
        transform: translateX(100vw);
    }

    100% {
        transform: translateX(-100%);
    }

}


/* Pause on hover */

.tz-flash-bar:hover .tz-flash-track {
    animation-play-state: paused !important;
}


/* Mobile */

@media (max-width: 768px) {

    .tz-flash-bar {
        height: 34px !important;
    }

    .tz-flash-track {
        height: 34px !important;
    }

    .tz-flash-item {
        padding: 0 22px !important;
    }

    .tz-flash-text {
        font-size: 11px !important;
    }

    .tz-flash-image {
        width: 20px !important;
        height: 20px !important;
    }

}



/* ── FIX 3: Navigation bar — blue background ──
   NO z-index here. The cart panel (z-index 2999) must sit
   on top of the nav bar so its canvas-header is visible.
   position:relative is kept for background painting only.

   box-shadow (not border-bottom): on the homepage the hero image sits right
   under the nav bar so the edge is obvious, but every other page is plain
   white behind a white nav bar, and a hard border reads as an odd stray
   line. A soft downward shadow gives the same "this bar has ended" cue
   without looking like a rule drawn under it. */
.tz-header-nav,
.tz-header .header-bottom {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: 0 4px 10px -6px rgba(0, 0, 0, 0.15) !important;
    padding: 14px 0 18px !important;
    position: relative;
}

/* Kill the old red background */
.tz-header-nav .header-category-menu,
.tz-header .header-category-menu,
header.tz-header .header-category-menu {
    background-color: transparent !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.tz-main-nav {
    display: flex;
    align-items: center;
    width: 100%;
}

/* Wrapper div that wp_nav_menu generates */
.tz-main-nav > div {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* ── FIX 4: Left-align nav items ── */
.tz-main-nav > ul,
.tz-main-nav .menu,
.tz-main-nav > div > ul {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: nowrap;
    width: 100%;
}

/* Nav links — dark text on white */
.tz-main-nav > ul > li > a,
.tz-main-nav .menu > li > a,
.tz-main-nav > div > ul > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 0 15px !important;
    color: #333333 !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: color 0.2s;
    line-height: 1.2;
    opacity: 1;
}

.tz-main-nav > ul > li > a:hover,
.tz-main-nav .menu > li > a:hover,
.tz-main-nav > div > ul > li > a:hover,
.tz-main-nav > ul > li.current-menu-item > a,
.tz-main-nav .menu > li.current-menu-item > a {
    color: #EA191F !important;
    opacity: 1;
    font-weight: 400 !important;
}

/* ── Dropdown chevron: shown only on items with a sub-menu ── */
.tz-main-nav li > a::after,
.tz-main-nav .sub-arrow {
    display: none !important;
    content: '' !important;
}
.tz-main-nav .menu-item-has-children > a::after {
    display: inline-block !important;
    content: '\25BE' !important;
    font-size: 10px !important;
    line-height: 1 !important;
    margin-left: 2px !important;
    transform: translateY(1px);
}

/* Sub-menus: allow hover to show them, but keep them above everything */
.tz-main-nav .sub-menu {
    z-index: 4000 !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    border-radius: 0 !important;
}

/* Square corners on any nested mega-menu panels too */
.tz-main-nav .megamenu,
.tz-main-nav .sub-menu .sub-menu {
    border-radius: 0 !important;
}

/* Close the gap between the blue nav bar and the dropdown
   (base theme opens it at top:104% — pull it flush to 100%) */
.tz-main-nav .menu > li:hover > ul,
.tz-main-nav .menu > li.show > ul,
.tz-main-nav .menu > li:hover > .megamenu,
.tz-main-nav .menu > li.show > .megamenu {
    top: 100% !important;
}

.tz-main-nav .sub-menu li a {
    color: #333 !important;
    font-size: 13px !important;
    padding: 10px 18px !important;
    white-space: nowrap;
}

.tz-main-nav .sub-menu li a:hover {
    color: #EA191F !important;
    /* background: #fdeceb !important; */
}

/* Sale link */
.tz-main-nav .sale_container a {
    display: block;
    padding: 13px 15px;
    color: #EA191F !important;
    font-weight: 700;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

/* ════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════ */

/* ── Tablet: 768px – 991px ── */
@media (max-width: 991px) {
    .tz-mobile-toggle { display: flex !important; }
    .tz-login-text   { display: none; }
    .tz-hdr-inner    { gap: 14px; padding: 10px 16px !important; }
    .tz-logo-img     { height: 40px !important; }
    .tz-search-bar .tz-search-btn { padding: 0 14px !important; font-size: 12px !important; }
    /* Nav bar: shrink font, allow horizontal scroll */
    .tz-main-nav > ul > li > a,
    .tz-main-nav .menu > li > a,
    .tz-main-nav > div > ul > li > a { font-size: 12.5px !important; padding: 11px 11px !important; }
    .tz-main-nav > ul,
    .tz-main-nav .menu,
    .tz-main-nav > div > ul {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        scrollbar-width: none;
    }
    .tz-main-nav > ul::-webkit-scrollbar,
    .tz-main-nav .menu::-webkit-scrollbar { display: none; }
}

/* ── Mobile: ≤ 700px — hide search bar ── */
@media (max-width: 700px) {
    /* Search bar hidden — space freed for logo + actions */
    .tz-hdr-search { display: none !important; }

    /* Nav bar hidden — hamburger mobile menu takes over */
    .tz-header-nav,
    .tz-header .header-bottom { display: none !important; }

    /* Tighten header — space-between pushes logo left, icons right */
    .tz-hdr-inner    { gap: 12px; padding: 8px 14px !important; justify-content: space-between !important; }
    .tz-logo-img     { height: 36px !important; }
    .tz-hdr-actions  { gap: 14px; }
    .tz-country-wrap { display: none !important; }
}

/* ── Small mobile: ≤ 480px ── */
@media (max-width: 480px) {
    .tz-hdr-inner   { gap: 10px; padding: 8px 12px !important; }
    .tz-logo-img    { height: 26px !important; width: auto !important; }
    .tz-hdr-actions { gap: 12px; }
    /* Hide login/register label — keep icon only */
    .tz-action-login span.tz-login-text { display: none !important; }
}
/* ── End Technoor Header ── */

/* ============================================================
   NEW ARRIVALS SECTION — FIGMA REDESIGN
   ============================================================ */
.tz-na-section {
    background: #fff;
    padding: 48px 0;
}

/* ── Header row ── */
.tz-na-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 12px;
}

.tz-na-title {
    font-size: 26px;
    font-weight: 700;
    color: #111;
    margin: 0;
    letter-spacing: -0.3px;
}

/* ── Category filter pills ── */
.tz-na-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.tz-na-filter {
    background: none;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 5px 16px;
    font-size: 12px;
    font-weight: 500;
    color: #555;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1.5;
}

.tz-na-filter:hover {
    background: #EA191F;
    border-color: #EA191F;
    color: #fff;
}

.tz-na-filter.active {
    background: #EA191F !important;
    border-color: transparent;
    color: #fff !important;
    font-weight: 600 !important;
}

/* ── Products grid ── */
.tz-na-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

/* ── Product card ── */
.tz-na-card {
    background: #ffffff !important;
    border: 1px solid #E5E5E5 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transition: box-shadow 0.22s, transform 0.22s !important;
}

.tz-na-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.10) !important;
    transform: translateY(-2px) !important;
}

/* ── Image area ── */
.tz-na-img-wrap {
    position: relative !important;
    overflow: hidden !important;
    background: #fff !important;
    aspect-ratio: 1 / 1.05 !important;
}

.tz-na-img-wrap > a:not(.tz-na-wishlist) {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.tz-na-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    transition: transform 0.3s !important;
}

.tz-na-card:hover .tz-na-img {
    transform: scale(1.04) !important;
}

/* ── Wishlist circle button ── */
.tz-na-wishlist {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 2 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #aaa !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: color 0.2s, border-color 0.2s !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.09) !important;
    padding: 0 !important;
    min-width: unset !important;
    min-height: unset !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.tz-na-wishlist:hover {
    color: #e53935 !important;
    border-color: #e53935 !important;
}

/* ── Discount badge ── */
.tz-na-badge {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 2 !important;
    background: #EA191F !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    line-height: 1.4 !important;
    display: inline-block !important;
    border: none !important;
}

/* ── Card body ── */
.tz-na-body {
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    flex: 1 !important;
    background: #fff !important;
}

/* ── Name row: title + cart icon ── */
.tz-na-name-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 6px !important;
}

.tz-na-name {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #111111 !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    flex: 1 !important;
    height: auto !important;
    white-space: normal !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    background: transparent !important;
}

.tz-na-name:hover {
    color: #EA191F !important;
    text-decoration: none !important;
}

.tz-na-cart-icon {
    color: #aaa !important;
    font-size: 14px !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
    transition: color 0.2s, background 0.2s !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    display: inline-block !important;
}

.tz-na-cart-icon:hover {
    color: #EA191F !important;
}

.tz-na-cart-icon.is-loading {
    opacity: 0.5 !important;
    pointer-events: none !important;
}

.tz-na-cart-icon.is-added {
    color: #2ecc71 !important;
}

/* ── Footer: price + Buy Now ── */
.tz-na-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-top: auto !important;
    flex-wrap: nowrap !important;
    padding: 0 !important;
}

.tz-na-price {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    white-space: nowrap !important;
    background: transparent !important;
    text-decoration: none !important;
    padding: 0 !important;
    margin: 0 !important;
    letter-spacing: normal !important;
    line-height: 1.4 !important;
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;
    gap: 4px !important;
}

.tz-na-old-price {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #888888 !important;
    text-decoration: line-through !important;
    margin-left: 0 !important;
    white-space: nowrap !important;
}

.tz-na-buy-btn,
.tz-na-buy-btn:link,
.tz-na-buy-btn:visited {
    background: #EA191F !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 7px 16px !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background 0.2s !important;
    flex-shrink: 0 !important;
    line-height: 1.4 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border: none !important;
    box-shadow: none !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    width: auto !important;
    margin: 0 !important;
    outline: none !important;
}

.tz-na-buy-btn:hover,
.tz-na-buy-btn:focus {
    background: #C4141A !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* ── Skeleton loader ── */
.tz-na-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.tz-na-skeleton-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    overflow: hidden;
}

.tz-na-skeleton-img {
    width: 100%;
    aspect-ratio: 1 / 1.05;
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: tz-shimmer 1.5s infinite;
}

.tz-na-skeleton-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tz-na-skeleton-line {
    height: 11px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: tz-shimmer 1.5s infinite;
}

.tz-na-skeleton-line.w-full { width: 100%; }
.tz-na-skeleton-line.w-80  { width: 80%; }
.tz-na-skeleton-line.w-50  { width: 50%; }

@keyframes tz-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .tz-na-grid,
    .tz-na-skeleton-grid { grid-template-columns: repeat(3, 1fr); }
    .tz-na-title { font-size: 22px; }
}

@media (max-width: 600px) {
    .tz-na-grid,
    .tz-na-skeleton-grid { grid-template-columns: repeat(2, 1fr); }
    .tz-na-section { padding: 32px 0; }
    .tz-na-header { flex-direction: column; align-items: flex-start; }
    .tz-na-price { font-size: 13px !important; }
    .tz-na-buy-btn,
    .tz-na-buy-btn:link,
    .tz-na-buy-btn:visited { padding: 6px 12px !important; font-size: 11px !important; }
}
/* ── New Arrivals: strict single row (max 6 cards) ──
   This caps the DESKTOP row, where .tz-na-grid is 6-up (>=1024px). Below that
   the grid is 3-up (<=900px) and 2-up (<=600px) by design, so 6 cards still
   occupy 2 or 3 rows there — that is the responsive layout, not overflow. The
   real limit lives in the query args + loop guard in
   inc/home_page_js_func.php; this is a display-only safety net for the case
   where more than 6 ever come back. */
.tz-na-section .tz-na-grid .tz-na-card:nth-child(n+7) {
    display: none !important;
}

/* ── End New Arrivals ── */

/* ============================================================
   SINGLE PRODUCT PAGE — FIGMA REVAMP
   ============================================================ */

/* ── Wrap ── */
.tz-sp-wrap {
    padding-top: 16px;
    padding-bottom: 56px;
}

.tz-sp-wrap .woocommerce-breadcrumb {
    font-size: 13px;
    color: #888;
    margin-bottom: 28px;
    display: block;
}

/* ── Hero layout ── */
.tz-sp-hero {
    display: flex;
    gap: 48px;
    align-items: flex-start;
    margin-bottom: 56px;
}

.tz-sp-gallery-col {
    flex: 0 0 46%;
    max-width: 46%;
}

.tz-sp-info-col {
    flex: 1;
    min-width: 0;
}

/* Desktop: main image frame is a fixed 590px wide. The gallery column grows
   to fit it (72px thumbs + 14px gap + 590px = 676px); the info column takes
   whatever is left. Below 1200px the frame falls back to fluid. */
@media (min-width: 1200px) {
    .tz-sp-gallery-col {
        flex: 0 0 676px;
        max-width: 676px;
    }
    /* .tz-sp-hero prefix: out-ranks the later fluid .flex-viewport rule */
    .tz-sp-hero .tz-sp-gallery-col .flex-viewport {
        flex: 0 0 450px !important;
        width: 450px !important;
        /* Pushes the main image right, away from the thumbnails.
           Increase / decrease this value to move it more / less. */
        margin-left: 70px;
    }
}

/* ── Gallery: vertical thumbnails on the left, main image on the right ── */
.tz-sp-gallery-col .woocommerce-product-gallery {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 14px;
}

/* Main image viewport — fills remaining width, no background */
.tz-sp-gallery-col .flex-viewport {
    order: 1;
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    /* Fixed 440px frame: the main image and its hover zoom both live in it. */
    height: 440px !important;
    border-radius: 0;
    overflow: hidden;
    background: transparent;
}

.tz-sp-gallery-col .woocommerce-product-gallery__wrapper {
    display: block;
}

/* Hover-zoom containment: WooCommerce's zoom plugin injects an absolutely
   positioned img.zoomImg into each slide. Without a positioned, clipping
   slide it anchors to .woocommerce-product-gallery (outside .flex-viewport)
   and spills over the thumbnails and the info column. */
.tz-sp-gallery-col .woocommerce-product-gallery__image {
    position: relative;
    overflow: hidden;
    height: 440px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tz-sp-gallery-col .woocommerce-product-gallery__image > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* DO NOT force width on slides — FlexSlider JS sets these per-slide */
.tz-sp-gallery-col .woocommerce-product-gallery__image img {
    width: 100%;
    height: auto;
    max-height: 440px;
    object-fit: contain;
    display: block;
    padding: 0;
    box-sizing: border-box;
}

/* Thumbnail strip — vertical column to the left of main image */
.tz-sp-gallery-col .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs {
    order: 0;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap;
    gap: 8px;
    flex: 0 0 72px;
    width: 72px !important;
    /* Own fixed-size container, independent of the main image frame.
       Change this height to resize the thumbnail column; extra thumbnails
       scroll inside it instead of spilling out. */
    height: 440px;
    padding: 0;
    margin: 0;
    list-style: none;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Override the legacy rules in assets/css/style.css that clip the strip:
     .woocommerce div.product div.images .flex-control-thumbs li  { margin-left: 1rem !important }
     .woocommerce div.product div.images .flex-control-thumbs     { overflow: hidden !important }
   The li margin pushed every thumbnail ~10px right inside the 72px column,
   so its right edge was cut off; the overflow rule also blocked scrolling.
   The extra .tz-sp-hero class + html/body make these win the !important tie. */
html body .tz-sp-hero .tz-sp-gallery-col .woocommerce-product-gallery .flex-control-thumbs li {
    margin: 0 !important;
    float: none !important;
    max-width: none !important;
}
html body .tz-sp-hero .tz-sp-gallery-col .woocommerce-product-gallery .flex-control-thumbs {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* Hidden scrollbar so it never eats into the 72px column and clips the
   thumbnails (the global 4px red scrollbar rule is !important, so this must
   be too). */
.tz-sp-gallery-col .flex-control-thumbs {
    scrollbar-width: none !important;
    -ms-overflow-style: none;
}
.tz-sp-gallery-col .flex-control-thumbs::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.tz-sp-gallery-col .flex-control-thumbs li {
    list-style: none;
    width: 72px !important;
    height: 72px !important;
    flex-shrink: 0;
    border: 1.5px solid #e8e8e8;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .2s;
    background: #f5f5f5;
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.tz-sp-gallery-col .flex-control-thumbs li img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    padding: 5px;
    box-sizing: border-box;
}

/* No hover / active border on thumbnails. style.css puts a red
   "border: 2px solid #ea1b25 !important" on img.flex-active and img:hover;
   html body + .tz-sp-hero out-rank it. */
html body .tz-sp-hero .tz-sp-gallery-col .woocommerce-product-gallery .flex-control-thumbs li img,
html body .tz-sp-hero .tz-sp-gallery-col .woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
html body .tz-sp-hero .tz-sp-gallery-col .woocommerce-product-gallery .flex-control-thumbs li img:hover {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Hide FlexSlider dot pagination — thumbnails replace it */
.tz-sp-gallery-col .flex-control-paging,
.tz-sp-gallery-col ol.flex-control-paging,
.tz-sp-gallery-col .flex-control-nav.flex-control-paging {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Sale flash badge ("4% OFF").
   WooCommerce prints <span class="onsale"> as a direct child of
   .tz-sp-gallery-col (before the gallery div, via
   woocommerce_before_single_product_summary), so the old
   ".woocommerce-product-gallery .onsale" selector never matched it and the
   badge was positioned against some farther ancestor. Anchor it to the
   gallery column instead. */
.tz-sp-gallery-col {
    position: relative !important;
}
html body .tz-sp-gallery-col .onsale,
html body .tz-sp-gallery-col span.onsale {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    z-index: 10 !important;
}

/* ── Category link ── */
.tz-sp-cat-link {
    display: inline-block;
    font-size: 13px;
    color: #999;
    text-decoration: none;
    margin-bottom: 10px;
    transition: color .2s;
    font-weight: 400;
}

.tz-sp-cat-link:hover {
    color: #EA191F;
}

/* ── Product title ── */
.tz-sp-info-col h1.product_title {
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #1a1a2e !important;
    margin: 0 0 14px !important;
}

/* ── Price row ── */
.tz-sp-price-row {
    margin-bottom: 16px;
}

.tz-sp-price-row .price {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    display: block !important;
    margin: 0 !important;
}

.tz-sp-price-row .price ins {
    text-decoration: none !important;
    color: #1a1a2e !important;
}

.tz-sp-price-row .price del {
    color: #bbb !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    margin-left: 6px;
}

/* ── Availability ── */
.tz-sp-avail-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.tz-sp-avail-label {
    font-size: 14px;
    color: #555;
    font-weight: 500;
}

.tz-sp-instock {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.tz-sp-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22a84a;
    display: inline-block;
    flex-shrink: 0;
}

.tz-sp-outofstock {
    font-size: 14px;
    color: #e53935;
    font-weight: 600;
}

.tz-sp-qty-badge {
    background: #22a84a;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 20px;
    letter-spacing: 0.2px;
}

/* ── Short description, directly below the price ── */
/* style.css hides .woocommerce-product-details__short-description outright
   (it was only ever wanted in the quick-view popup), so the single-product
   copy has to be switched back on explicitly. */
.tz-sp-info-col .woocommerce-product-details__short-description {
    display: block !important;
    font-size: 14px;
    line-height: 1.6;
    color: #4a5568;
    margin: 0 0 18px;
}

.tz-sp-info-col .woocommerce-product-details__short-description p:last-child {
    margin-bottom: 0;
}

/* ── CTA block: Quantity + Add to cart + Buy Now — horizontal row ──
   flex-start keeps the three controls grouped at the left of the column; the
   form and both buttons are flex: 0 (see below) so nothing stretches to fill
   the row and shove Buy Now against the right edge. */
.tz-sp-cta-block {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap;
    margin-bottom: 22px;
    width: 100%;
    box-sizing: border-box;
}

/* Buy Now — outlined red/white, sits on the right.
   DOM order is untouched (Buy Now markup stays before the WooCommerce form);
   flex `order` moves it visually after Quantity + Add to Cart instead of
   editing the WooCommerce form markup. */
.tz-sp-buy-now {
    /* Quantity is order 1 and Add to Cart order 2 inside the same flex parent
       (.simple-cart / .woocommerce-variation-add-to-cart), so order 3 puts Buy
       Now last: [ Qty ][ Add to Cart ][ Buy Now ]. */
    order: 3 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 130px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background: transparent !important;
    color: #e50914 !important;
    border: 2px solid #e50914 !important;
    border-radius: 8px !important;
    padding: 16px 24px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .2s, color .2s;
    letter-spacing: 0.2px;
    line-height: 1;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.tz-sp-buy-now:hover {
    background: #e50914 !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* The form is now the only child of .tz-sp-cta-block and holds all three
   controls, so it is just a full-width pass-through. */
.tz-sp-cta-block form.cart {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* THE row: quantity + Add to Cart + Buy Now are siblings in here — .simple-cart
   for simple products, .woocommerce-variation-add-to-cart for variable ones.
   Because all three share this one parent, flex order and percentage widths
   finally measure against the same box. */
.tz-sp-cta-block .simple-cart,
.tz-sp-cta-block .woocommerce-variation-add-to-cart {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Quantity first */
.tz-sp-cta-block .quantity {
    order: 1 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}

/* Add to cart button — filled red, white text + cart icon
   Uses 4-layer specificity + html prefix to beat all WC/theme !important rules */
html body .tz-sp-info-col .tz-sp-cta-block form.cart .single_add_to_cart_button,
html body .tz-sp-info-col .tz-sp-cta-block .single_add_to_cart_button {
    width: auto !important;
    /* order 2 — between quantity (1) and Buy Now (3) in the same flex row.
       No grow, so the button sizes to its label. */
    order: 2 !important;
    flex: 0 0 auto !important;
    background: #e50914 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background .2s !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    white-space: nowrap;
    min-height: 44px;
    line-height: 1;
    box-sizing: border-box !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 0 !important;
    max-width: none !important;
    height: auto !important;
}

/* cart icon, left of the "Add to cart" label */
html body .tz-sp-info-col .tz-sp-cta-block form.cart .single_add_to_cart_button::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/></svg>") center / contain no-repeat;
}

html body .tz-sp-info-col .tz-sp-cta-block form.cart .single_add_to_cart_button:hover,
html body .tz-sp-info-col .tz-sp-cta-block .single_add_to_cart_button:hover {
    background: #c40810 !important;
    color: #fff !important;
}

/* Variable product: variations table hidden */
.tz-sp-cta-block .variations {
    display: none !important;
}

/* Suppress all WooCommerce auto-outputs inside the CTA flex row */
.tz-sp-cta-block p.stock,
.tz-sp-cta-block .stock { display: none !important; }

.tz-sp-cta-block .woocommerce-variation { display: none !important; }

/* Variable: .single_variation_wrap just passes width through to the row above */
.tz-sp-cta-block .single_variation_wrap {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
}

/* ── Variation pill buttons ── */
.tz-sp-variations-wrap {
    margin-bottom: 16px;
}

.tz-var-group {
    margin-bottom: 12px;
}

.tz-var-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-bottom: 8px;
}

.tz-var-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tz-var-pill {
    background: #fff !important;
    border: 1.5px solid #ddd !important;
    border-radius: 24px !important;
    padding: 7px 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #333 !important;
    cursor: pointer !important;
    transition: border-color .2s, background .2s, color .2s !important;
    line-height: 1.4 !important;
    outline: none !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    font-family: inherit !important;
}

.tz-var-pill:hover {
    border-color: #EA191F !important;
    color: #EA191F !important;
    background: #f0f6ff !important;
}

.tz-var-pill.active {
    background: #EA191F !important;
    border-color: #EA191F !important;
    color: #fff !important;
    font-weight: 600 !important;
}

/* ── Buy-now-pay-later promo (Tabby / Tamara) ── */
.tz-sp-bnpl {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    background: #f0fbf6;
    border: 1px solid #d7f0e4;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 0 0 16px;
    font-size: 13px;
    color: #2d3748;
}

.tz-sp-bnpl-lead,
.tz-sp-bnpl-or {
    font-weight: 500;
}

/* Text chips instead of hosted logo images, so the banner has no external
   asset dependency and stays crisp at any zoom. */
.tz-sp-bnpl-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 5px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: lowercase;
    letter-spacing: 0.2px;
}

.tz-sp-bnpl-chip--tabby {
    background: #3fe0c5;
    color: #0b1f3a;
}

.tz-sp-bnpl-chip--tamara {
    background: linear-gradient(90deg, #f8c8dc 0%, #cbd5f5 100%);
    color: #1a1a2e;
}

.tz-sp-bnpl-note {
    flex: 1 1 100%;
    font-size: 12.5px;
    color: #4a5568;
}

.tz-sp-bnpl-learn {
    color: #e50914;
    font-weight: 600;
    text-decoration: underline;
}

/* ── Action links (Wishlist / Compare / Share) ── */
.product-action-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0 0 6px;
    font-size: 14px;
    color: #4a5568;
}

/* .tz-sp-action covers both the <a> links and the <button>, so the share
   button has to be reset out of the browser's default button styling. */
.product-action-links .tz-sp-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: inherit;
    font-size: 14px !important;
    font-weight: 500;
    line-height: 1.4;
    color: #4a5568 !important;
    text-decoration: none !important;
    text-transform: none !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: color .2s;
    /* YITH's stylesheet absolutely-positions .add_to_wishlist inside product
       wrappers; keep it in the flow here. */
    position: static !important;
    opacity: 1 !important;
}

.product-action-links .tz-sp-action:hover,
.product-action-links .tz-sp-action:focus-visible {
    color: #e50914 !important;
}

.product-action-links .tz-sp-action i {
    font-size: 16px;
    color: inherit;
}

/* The Compare link carries .button + .yith-woocompare-button so YITH's own JS
   picks it up, which also drags in the theme button styling — strip it back to
   a plain text link. */
.product-action-links a.tz-sp-action.button,
.product-action-links a.tz-sp-action.yith-woocompare-button {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    letter-spacing: normal !important;
    font-weight: 500 !important;
    flex: 0 0 auto !important;
}

/* ── WhatsApp action link ──
   Icon is an inline SVG (not a webfont glyph like Compare/Share), so it needs
   its own size rule to match the 16px .tz-sp-action i icons beside it. */
.product-action-links .tz-sp-whatsapp-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: inherit;
}

.product-action-links .yith-wcwl-add-to-wishlist {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.product-action-links .yith-wcwl-add-to-wishlist a,
.product-action-links .yith-wcwl-add-button a,
.product-action-links .yith-wcwl-wishlistaddedbrowse a,
.product-action-links .yith-wcwl-wishlistexistsbrowse a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    color: #4a5568 !important;
    position: static !important;
    opacity: 1 !important;
}

.product-action-links .yith-wcwl-add-to-wishlist a:hover {
    color: #e50914 !important;
}

.product-action-links .yith-wcwl-add-to-wishlist i,
.product-action-links .yith-wcwl-add-to-wishlist svg,
.product-action-links .yith-wcwl-icon {
    font-size: 16px !important;
    width: auto !important;
    height: auto !important;
    color: inherit !important;
    margin: 0 !important;
}

/* YITH swaps in its own feedback markup after a successful add; keep it inline
   and sized with the rest of the row. */
.product-action-links .yith-wcwl-add-to-wishlist > div,
.product-action-links .yith-wcwl-wishlistaddedbrowse,
.product-action-links .yith-wcwl-wishlistexistsbrowse,
.product-action-links .yith-wcwl-add-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* The plugin spinner/blockUI overlay must not stretch the row. */
.product-action-links .yith-wcwl-add-to-wishlist .blockUI,
.product-action-links .ajax-loading {
    display: none !important;
}

/* ── Trust badges bar ──
   Full-width 4-up bar between the hero and the tabs. gap is 0 because the
   separators are per-cell border-rights, not grid gutters. */
.tz-sp-feat-row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    border: 1px solid #edf2f7 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    padding: 20px !important;
    /* margin: 25px 0 !important; */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Dividing lines between cells (skip the last) */
.tz-sp-feat-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 15px !important;
    border-right: 1px solid #edf2f7 !important;
    text-align: left !important;
    min-width: 0 !important;
}

.tz-sp-feat-item:last-child {
    border-right: none !important;
}

/* Icons — linear, brand red. The SVGs use stroke: currentColor, so setting
   color here is enough; the [stroke] rule is a fallback for any markup that
   still hard-codes a stroke value. */
.tz-sp-feat-item i,
.tz-sp-feat-item svg {
    color: #e50914 !important;
    font-size: 26px !important;
    flex-shrink: 0 !important;
}

.tz-sp-feat-item svg [stroke]:not([stroke="currentColor"]) {
    stroke: #e50914 !important;
}

/* Text formatting */
.tz-sp-feat-text {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0;
}

.tz-sp-feat-text strong {
    display: block;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1a202c !important;
    line-height: 1.2 !important;
}

.tz-sp-feat-text span {
    font-size: 11px !important;
    color: #718096 !important;
    line-height: 1.4;
    margin-top: 2px !important;
}

/* ── Description / Tabs area ── */
.tz-sp-tabs-area {
    margin-bottom: 56px;
    border-top: 1px solid #ebebeb;
    padding-top: 40px;
}

.tz-sp-tabs-area .woocommerce-tabs ul.tabs {
    border-bottom: 2px solid #ebebeb !important;
    padding: 0 !important;
    margin: 0 0 28px !important;
    display: flex;
    gap: 0;
    background: none !important;
    list-style: none !important;
}

.tz-sp-tabs-area .woocommerce-tabs ul.tabs::before,
.tz-sp-tabs-area .woocommerce-tabs ul.tabs::after { display: none !important; }

.tz-sp-tabs-area .woocommerce-tabs ul.tabs li {
    border: none !important;
    background: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.tz-sp-tabs-area .woocommerce-tabs ul.tabs li a {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #888 !important;
    padding: 12px 22px !important;
    display: block;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    text-decoration: none !important;
    transition: color .2s, border-color .2s;
    background: none !important;
}

.tz-sp-tabs-area .woocommerce-tabs ul.tabs li.active a,
.tz-sp-tabs-area .woocommerce-tabs ul.tabs li a:hover {
    color: #EA191F !important;
    border-bottom-color: #EA191F !important;
}

.tz-sp-tabs-area .woocommerce-tabs .panel {
    padding: 0 !important;
    border: none !important;
    margin: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

.tz-sp-tabs-area .woocommerce-Reviews .comment-form h3,
.tz-sp-tabs-area .woocommerce-Reviews .woocommerce-Reviews-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 20px;
}

/* Review card styling */
.tz-sp-tabs-area .commentlist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tz-sp-tabs-area .commentlist li.comment {
    background: #fff;
    border: 1px solid #ebebeb;
    border-radius: 12px;
    padding: 20px;
    margin: 0 !important;
}

.tz-sp-tabs-area .commentlist li.comment .comment-text {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.tz-sp-tabs-area .commentlist li .star-rating {
    margin-bottom: 8px;
}

/* ── Best Sellers / Featured row sections ── */
.tz-sp-row-section {
    margin-bottom: 56px;
}

.tz-sp-row-title {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    text-align: left !important;
    margin: 0 0 28px !important;
    letter-spacing: -0.3px;
}

/* Section headings ("Related Products", "Featured", ...) sit on the left
   edge of the product grid. Extra selectors cover headings whose markup
   doesn't carry the .tz-sp-row-title class. */
h2.tz-sp-row-title,
.tz-sp-row-section h2,
.tz-sp-row-section .tz-sp-row-title {
    text-align: left !important;
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .tz-sp-hero {
        flex-direction: column;
        gap: 28px;
    }
    .tz-sp-gallery-col,
    .tz-sp-info-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .tz-sp-gallery-col .flex-control-thumbs li {
        width: 60px !important;
        height: 60px !important;
    }
    .tz-sp-gallery-col .woocommerce-product-gallery {
        gap: 10px;
    }
    /* Mobile / tablet: the 440px desktop frames are far too tall (a 320px
       phone showed a ~440px gallery with a big empty gap under the image).
       Scale all three heights together: min(440px, 70vw) = ~224px on a
       320px phone, up to the full 440px from ~630px wide. The thumbnail
       strip uses the same height, so it fits ~3 thumbnails and the rest
       scroll inside it. */
    .tz-sp-gallery-col .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs {
        flex: 0 0 60px;
        width: 60px !important;
        height: min(440px, 70vw);
    }
    .tz-sp-hero .tz-sp-gallery-col .flex-viewport {
        height: min(440px, 70vw) !important;
        margin-left: 0;
    }
    .tz-sp-gallery-col .woocommerce-product-gallery__image {
        height: min(440px, 70vw);
    }
    .tz-sp-gallery-col .woocommerce-product-gallery__image img {
        max-height: min(440px, 70vw);
    }
    .tz-na-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .tz-sp-feat-row {
        grid-template-columns: repeat(2, 1fr) !important;
        row-gap: 18px !important;
    }
    /* 2 columns: divider only between the pair, none at the row end */
    .tz-sp-feat-item:nth-child(2n) {
        border-right: none !important;
    }
    .tz-sp-feat-item {
        padding: 0 12px !important;
    }
}

@media (max-width: 600px) {
    .tz-sp-info-col h1.product_title {
        font-size: 18px !important;
    }
    .tz-sp-row-title {
        font-size: 20px !important;
    }
    /* Single column: horizontal rules read better than vertical ones */
    .tz-sp-feat-row {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        padding: 6px 14px !important;
    }
    .tz-sp-feat-item {
        border-right: none !important;
        border-bottom: 1px solid #edf2f7 !important;
        padding: 14px 0 !important;
    }
    .tz-sp-feat-item:last-child {
        border-bottom: none !important;
    }
    .product-action-links {
        gap: 14px;
        justify-content: space-between;
    }
    .tz-sp-bnpl {
        padding: 10px 12px;
    }
    .tz-na-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .tz-var-pill {
        padding: 6px 14px !important;
        font-size: 12px !important;
    }
}

/* =========================================================================
   Single product page — Related Products / Featured card rows
   Both rows render the global loop card (woocommerce/content-product.php)
   inside <ul class="products tz-na-grid">, so the cards must look exactly
   like the homepage New Arrivals cards. That means this block deliberately
   carries NO card-appearance rules — no card shell, no colours, no image
   sizing, no column counts. All of that comes from the shared .tz-na-card /
   .tz-na-grid rules further down the file, the same ones the homepage uses.
   What is left here is only the plumbing a <ul>/<li> loop needs that the
   homepage's <div> markup does not, plus the two centering/hide rules that
   have to beat WooCommerce and theme selectors.
   ========================================================================= */

/* WooCommerce puts a clearfix ::before/::after on ul.products; under
   display:grid those become empty grid cells. */
.tz-sp-row-section ul.products::before,
.tz-sp-row-section ul.products::after {
    content: none !important;
    display: none !important;
}

/* Grid comes from .tz-na-grid (5 cols, 6 at >=1024px, 3 at <=900px, 2 at
   <=600px, gap 16px) — only the list-specific resets are needed here. */
.tz-sp-row-section ul.products.tz-na-grid {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.tz-sp-row-section ul.products li.product {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    /* the theme clamps .product-name height on loop items */
    height: auto !important;
}

/* No CTA in these rows. .tz-na-buy-btn is already hidden site-wide; .button
   is listed too because WooCommerce/theme markup can add that class to a
   loop CTA, and the theme styles .button as a full-width red block. */
.tz-sp-row-section .tz-na-card .tz-na-buy-btn,
.tz-sp-row-section .tz-na-card .button,
.tz-sp-row-section ul.products li.product .button,
.tz-sp-row-section ul.products li.product .add_to_cart_button {
    display: none !important;
}

/* ── Centered card content, same as the homepage card ──
   The card body is a column flex container, so align-items is what centres
   its children horizontally; the rows below then centre their own contents. */
.tz-sp-row-section .tz-na-card .tz-na-body {
    align-items: center !important;
    text-align: center !important;
}

.tz-sp-row-section .tz-na-card .tz-na-name {
    width: 100% !important;
    text-align: center !important;
}

/* ── Price row ──
   Covers our own .tz-na-price and the WooCommerce .price / .amount wrappers,
   in case a card variant or plugin renders WooCommerce's own price markup
   instead. width:100% makes justify-content meaningful — without it these
   boxes shrink-wrap and centring is a no-op. */
.tz-sp-row-section .tz-na-card .tz-na-footer,
.tz-sp-row-section .tz-na-card .tz-na-price,
.tz-sp-row-section .tz-na-card .price,
.tz-sp-row-section ul.products li.product .price {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    gap: 4px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
}

/* Children — currency symbol, current price, and the del/ins pair WooCommerce
   emits for sale prices — stay inline so the whole thing reads as one centred
   block rather than stacking or drifting left. */
.tz-sp-row-section .tz-na-card .tz-na-price > *,
.tz-sp-row-section .tz-na-card .tz-na-old-price,
.tz-sp-row-section .tz-na-card .woocommerce-Price-amount,
.tz-sp-row-section .tz-na-card .woocommerce-Price-currencySymbol,
.tz-sp-row-section .tz-na-card .price del,
.tz-sp-row-section .tz-na-card .price ins,
.tz-sp-row-section ul.products li.product .price del,
.tz-sp-row-section ul.products li.product .price ins {
    display: inline-block !important;
    vertical-align: middle !important;
    text-align: center !important;
    float: none !important;
    margin: 0 !important;
    width: auto !important;
}

/* ins carries the sale price; strip the browser's default underline. */
.tz-sp-row-section .tz-na-card .price ins,
.tz-sp-row-section ul.products li.product .price ins {
    text-decoration: none !important;
    background: transparent !important;
}

/* =========================================================================
   Single product page — MOBILE CTA row (<=768px)
   Desktop is untouched: everything here lives inside the media query.

   Quantity, Add to Cart and Buy Now are siblings in one flex parent
   (.simple-cart / .woocommerce-variation-add-to-cart) — Buy Now is printed
   inside the form by tz_render_buy_now_button() on
   woocommerce_after_add_to_cart_button. So the layout is plain flex order +
   flex-basis, with no display: contents trick and nothing depending on the
   two buttons living in different containers:

       [ Quantity — 100%            ]   order 1
       [ Add to Cart | Buy Now      ]   order 2 / 3, 50% each
   ========================================================================= */
@media (max-width: 768px) {
    .tz-sp-cta-block {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* The shared row */
    .tz-sp-cta-block .simple-cart,
    .tz-sp-cta-block .woocommerce-variation-add-to-cart {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
    }

    /* 1. Quantity — full width, own row */
    .tz-sp-cta-block .quantity {
        order: 1 !important;
        flex: 1 1 100% !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        float: none !important;
    }

    /* 2. Add to Cart — left half */
    html body .tz-sp-info-col .tz-sp-cta-block form.cart .single_add_to_cart_button,
    html body .tz-sp-info-col .tz-sp-cta-block .single_add_to_cart_button {
        order: 2 !important;
        flex: 1 1 calc(50% - 5px) !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 12px 8px !important;
        font-size: 13px !important;
        text-align: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    /* 3. Buy Now — right half */
    .tz-sp-cta-block .tz-sp-buy-now {
        order: 3 !important;
        flex: 1 1 calc(50% - 5px) !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 12px 8px !important;
        font-size: 13px !important;
        text-align: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }
}

/* ── End mobile CTA row ── */

/* =========================================================================
   Buy Now alignment — consistent on every SIMPLE product.

   Why it differed between products: Samsung S26 Ultra Bundle is a VARIABLE
   product (colour options) and Galaxy Book6 Ultra is a SIMPLE product, and
   they print different add-to-cart markup:

     variable:  form.cart > .single_variation_wrap > .woocommerce-variation-
                add-to-cart > [ .quantity, button, a.tz-sp-buy-now ]
                -> all three are siblings in ONE flex row (rules above work).

     simple:    form.cart > .simple-cart > [ .quantity, button ]
                and a.tz-sp-buy-now ends up as a direct child of form.cart,
                OUTSIDE .simple-cart (DevTools breadcrumb on the Book6 page:
                form.cart > a.tz-sp-buy-now). Buy Now is then a sibling of the
                flex row instead of a member of it, so it drops onto its own
                line and the 50%/50% mobile split can never happen.

   Fix: for simple products make form.cart itself the flex row and dissolve
   .simple-cart with display: contents, so .quantity, the Add to Cart button
   and a.tz-sp-buy-now are all flex items of the same container, whichever
   element the markup puts Buy Now in. Variable products
   (form.variations_form) are excluded and keep their working layout.
   ========================================================================= */
html body .tz-sp-info-col .tz-sp-cta-block form.cart:not(.variations_form) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
}
html body .tz-sp-info-col .tz-sp-cta-block form.cart:not(.variations_form) > .simple-cart {
    display: contents !important;
}

@media (max-width: 768px) {
    html body .tz-sp-info-col .tz-sp-cta-block form.cart:not(.variations_form) {
        gap: 10px !important;
    }
}

/* ── End Single Product Revamp ── */

/* ── Gaming Hub cards: 5 columns on desktop, 3 on tablet, 2 on mobile ──
   skyphonez.css locks .archive-page-main-cards.gaming-hub-cards ul.products
   to a permanent 5-column grid with no media query, which beats the generic
   mobile/tablet rules at the same specificity by source order. These rules
   match that specificity and load after it (custom.css is enqueued after
   skyphonez.css), so they win at tablet and mobile widths.

   The product-grid column here is only ~66% of the container (col-md-8,
   sharing the row with the col-md-4 banner image), so 5 cards fit in a
   noticeably narrower space than New Arrivals' full-width 5/6-column grid —
   the .tz-na-* overrides below shrink image height, font sizes and padding
   proportionally, scoped to .gaming-hub-cards only so New Arrivals/Watches/
   Tablets/shop pages (which share the same .tz-na-card markup) are
   unaffected. */
.archive-page-main-cards.gaming-hub-cards {
    padding-right: 20px;
    padding-top: 20px;
}

/* Gaming Hub: strip the generic Bootstrap-style vertical spacing utility
   classes (.pt-6/.mb-4/.pb-10 in style.css, shared across the site) so the
   banner image and product grid align flush to the section's top and
   bottom edges. Left/right stays as-is (.container/.col-* gutters) for a
   little breathing room between the cards. Scoped to .grey-section only —
   the utility classes themselves are untouched for every other page that
   uses them. */
.grey-section.pb-10 {
    padding-bottom: 0 !important;
}
.grey-section .container.pt-6 {
    padding-top: 0 !important;
}
.grey-section .container.mb-4 {
    margin-bottom: 0 !important;
}
.archive-page-main-cards.gaming-hub-cards ul.products {
    margin: 0 !important;
}
@media (max-width: 991px) and (min-width: 601px) {
    .archive-page-main-cards.gaming-hub-cards ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
@media (max-width: 600px) {
    .archive-page-main-cards.gaming-hub-cards ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.archive-page-main-cards.gaming-hub-cards .tz-na-img {
    padding: 6px !important;
}
.archive-page-main-cards.gaming-hub-cards .tz-na-body {
    padding: 8px !important;
    gap: 6px !important;
}
.archive-page-main-cards.gaming-hub-cards .tz-na-name {
    font-size: 11px !important;
    line-height: 1.3 !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
}
.archive-page-main-cards.gaming-hub-cards .tz-na-price {
    font-size: 12px !important;
}
.archive-page-main-cards.gaming-hub-cards .tz-na-old-price {
    font-size: 10px !important;
}
.archive-page-main-cards.gaming-hub-cards .tz-na-buy-btn {
    font-size: 11px !important;
    padding: 5px 10px !important;
}
.archive-page-main-cards.gaming-hub-cards .tz-na-badge {
    font-size: 9px !important;
    padding: 2px 6px !important;
}
.archive-page-main-cards.gaming-hub-cards .tz-na-wishlist {
    width: 26px !important;
    height: 26px !important;
    font-size: 11px !important;
}

/* Gaming Hub dark-card theme — the section background is #1a1a1a (see
   .grey-section in style.css), so the product cards inside it need a dark
   surface + white text instead of the site-wide white .tz-na-card. */
html body .gaming-hub-cards .tz-na-card,
html body .gaming-hub-cards .tz-na-img-wrap,
html body .gaming-hub-cards .tz-na-img-wrap img,
html body .archive-page-main-cards.gaming-hub-cards .tz-na-body {
    background: #333 !important;
    border: none !important;
    box-shadow: none !important;
}
html body .gaming-hub-cards .tz-na-card .tz-na-name,
html body .gaming-hub-cards .tz-na-card .tz-na-name a,
html body .gaming-hub-cards .tz-na-card .tz-na-price,
html body .gaming-hub-cards .tz-na-card .tz-na-price *,
html body .gaming-hub-cards .tz-na-card .tz-na-price bdi,
html body .gaming-hub-cards .tz-na-card .tz-na-price .amount,
html body .gaming-hub-cards .tz-na-card .tz-na-price svg,
html body .gaming-hub-cards .tz-na-card .tz-na-price svg * {
    color: #fff !important;
    fill: #fff !important;
}
html body .gaming-hub-cards .tz-na-card .tz-na-old-price,
html body .gaming-hub-cards .tz-na-card .tz-na-old-price *,
html body .gaming-hub-cards .tz-na-card .tz-na-price del,
html body .gaming-hub-cards .tz-na-card .tz-na-price del *,
html body .gaming-hub-cards .tz-na-card .tz-na-old-price svg,
html body .gaming-hub-cards .tz-na-card .tz-na-old-price svg * {
    color: #aaa !important;
    fill: #aaa !important;
}

/* Gaming Hub banner column (col-md-4) + product column (col-md-8) — match
   heights so the banner image fills the row height beside the product grid. */
html body .grey-section .col-md-4.d-flex,
html body .grey-section .col-md-8 {
    height: 575px;
}
html body .grey-section .gh-banner-link,
html body .grey-section .gh-banner-link img {
    height: 100% !important;
    width: 100%;
    object-fit: cover;
    object-position: top center;
    border-radius: 10px;
}

/* ============================================================
   SINGLE BLOG POST — SOCIAL SHARE BUTTONS
   Appended below the post content via the_content (functions.php).
   Uses the theme accent (#EA191F) and pill styling so it blends in.
   Flex-wraps so it never breaks the responsive layout.
   ============================================================ */
.tz-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 28px 0 8px;
    padding-top: 20px;
    border-top: 1px solid #ebebeb;
}

.tz-share__label {
    font-size: 14px;
    font-weight: 600;
    color: #555;
    margin-right: 2px;
}

.tz-share__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 24px;
    border: 1.5px solid #e0e0e0;
    background: #fff !important;
    color: #333 !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
    font-family: inherit;
}

.tz-share__btn i {
    font-size: 15px;
    line-height: 1;
}

/* Hover: coloured background + white text/icon (the !important on the
   backgrounds is required to beat the global `button { background-color: unset
   !important }` rule in style.css, which otherwise wipes the background and
   leaves white text on a white surface). */
.tz-share__btn:hover,
.tz-share__btn:focus {
    color: #fff !important;
    border-color: transparent !important;
}

.tz-share__wa:hover,
.tz-share__wa:focus   { background: #25d366 !important; }
.tz-share__fb:hover,
.tz-share__fb:focus   { background: #1877f2 !important; }
.tz-share__tw:hover,
.tz-share__tw:focus   { background: #000 !important; }
.tz-share__copy:hover,
.tz-share__copy:focus { background: #EA191F !important; }

.tz-share__copy.is-copied,
.tz-share__copy.is-copied:hover,
.tz-share__copy.is-copied:focus {
    background: #22a84a !important;
    border-color: transparent !important;
    color: #fff !important;
}

@media (max-width: 480px) {
    .tz-share__btn span { display: none; }      /* icon-only on small screens */
    .tz-share__btn { padding: 9px 12px; }
    .tz-share__label { width: 100%; margin-bottom: 4px; }
}

/* ============================================================
   SUPPORT / HELP STRIP — above footer, all pages
   ============================================================ */
.tz-help-strip {
    background: #f4f6f8;
    border-top: none;
    border-bottom: 1px solid #ececf0;
    padding: 20px 0;
}

.tz-help-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

/* Footer CTA: single row — [WhatsApp / Email]  ......  [Subscribe form] */
.tz-footer-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px 48px;
    flex-wrap: wrap;
    padding-left: 20px;
    padding-right: 20px;
}
.tz-footer-cta .tz-cta-channels {
    flex: 1 1 auto;
}
.tz-footer-cta .tz-cta-form {
    flex: 0 1 480px;
    width: 100%;
    max-width: 480px;
}

.tz-help-intro {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.tz-help-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.3;
}

.tz-help-sub {
    font-size: 12.5px;
    color: #8a8f9c;
    font-weight: 400;
    line-height: 1.3;
}

.tz-help-channels {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

.tz-help-channel {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
    color: inherit;
}

.tz-help-channel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e3e5ea;
    color: #EA191F;
    flex-shrink: 0;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.tz-help-channel:hover .tz-help-channel-icon {
    background: #EA191F;
    border-color: #EA191F;
    color: #fff;
}

.tz-help-channel-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.25;
}

.tz-help-channel-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9aa0ac;
}

.tz-help-channel-value {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a2e;
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .tz-footer-cta { gap: 18px 28px; }
}
@media (max-width: 767px) {
    .tz-help-strip { padding: 18px 0; }
    .tz-help-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
    .tz-help-channels { gap: 22px; }
    /* Stack: channels on top, subscribe form full-width below */
    .tz-footer-cta {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
    .tz-footer-cta .tz-cta-form {
        flex-basis: auto;
        max-width: 100%;
    }
}
/* ── End Support Strip ── */

/* Footer phone numbers — clickable, inherit muted footer colour */
.tz-footer-phone a {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: color 0.18s;
}
.tz-footer-phone a:hover {
    color: #fff;
}

/* Footer brand: office address (above social icons) */
.tz-footer-address {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.55;
    margin: 0 0 18px;
    max-width: 320px;
}
.tz-footer-address-icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.7);
}

/* Footer bottom: accepted payment methods (individual logo images) */
.tz-footer-payments {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.tz-footer-pay-logo {
    height: 28px !important;
    width: auto !important;
    max-width: 100% !important;
    display: block !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

@media (max-width: 575px) {
    .tz-footer-pay-logo {
        height: 34px !important;
    }
}

/* =========================================================================
   Footer accepted-payment badges (Visa, Mastercard, Apple Pay, Google Pay,
   Tabby, COD). Rendered inside the existing .tz-footer-partners wrapper, so
   the position (bottom of the last footer column) and its flex /
   align-items:center layout are unchanged. Self-contained — no external
   image assets. Sized to ~28px tall to match the previous logo strip.
   ========================================================================= */
.tz-footer-partners.tz-pay-methods {
    gap: 8px;
}
.tz-pay-methods .tz-pay-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 28px;
    padding: 0 8px;
    background: #fff;
    border-radius: 5px;
    font-family: 'Lexend', Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #1a1a2e;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    white-space: nowrap;
    /* neutralise the inherited .tz-partner-img treatment context */
    opacity: 1;
    filter: none;
}
.tz-pay-methods .tz-pay-badge svg { display: block; }

/* visually-hidden brand name for the icon-only Mastercard badge (a11y) */
.tz-pay-methods .tz-pay-sr {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Brand-specific accents */
.tz-pay-methods .tz-pay--visa  { color: #1a1f71; font-style: italic; letter-spacing: .5px; }
.tz-pay-methods .tz-pay--mc    { padding: 0 6px; }
.tz-pay-methods .tz-pay--apple { background: #000; color: #fff; }
.tz-pay-methods .tz-pay--gpay  { color: #5f6368; }
.tz-pay-methods .tz-pay--gpay .tz-gpay-g { color: #4285F4; }
.tz-pay-methods .tz-pay--tabby { background: #3fe0c5; color: #0b1f3a; text-transform: lowercase; letter-spacing: .2px; }
.tz-pay-methods .tz-pay--cod   { color: #1a1a2e; }

/* Mobile: slightly smaller, still wraps neatly without breaking alignment */
@media (max-width: 600px) {
    .tz-footer-partners.tz-pay-methods { gap: 6px; }
    .tz-pay-methods .tz-pay-badge { height: 26px; font-size: 11px; padding: 0 7px; }
}

/* Login screen: "Don't have an account? Register here" link */
.tz-login-register-hint {
    margin-top: 16px;
    font-size: 13px;
    color: #666;
    text-align: center;
}
.tz-login-register-hint a.tz-switch-register {
    color: #EA191F;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.tz-login-register-hint a.tz-switch-register:hover {
    text-decoration: underline;
}



/* =========================================================================
   Technoor — My Account Clean Centered Switcher (Responsive Fixed)
   ========================================================================= */

/* 1. Card Container */
.woocommerce-account #customer_login {
	max-width: 450px;
	margin: 40px auto !important;
	padding: 32px !important;
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-sizing: border-box;
	display: block;
}

.woocommerce-account #customer_login .login_container,
.woocommerce-account #customer_login .register_container {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
	padding: 0 !important;
}

/* 2. Top "Login or Register" Inline Navigation */
.woocommerce-account .login-signup-ul {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 12px !important;
	width: 100% !important;
	list-style: none !important;
	margin: 0 0 10px 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

.woocommerce-account .login-signup-ul .nav-item {
	display: inline-block !important;
	margin: 0 !important;
	flex: none !important;
}

.woocommerce-account #customer_login form {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

.woocommerce-account #customer_login .woocommerce-form-row:first-of-type {
	margin-top: 0 !important;
}

/* "or" text styling */
.woocommerce-account .login-signup-ul .delimiter {
	display: inline-block !important;
	color: #a0a0a0 !important;
	font-size: 15px !important;
	font-weight: 400 !important;
}

.woocommerce-account .login-signup-ul .nav-link {
	display: inline-block !important;
	padding: 2px 6px !important;
	background: transparent !important;
	color: #2c2c2c !important;
	font-size: 18px !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	transition: color 0.2s ease !important;
}

.woocommerce-account .login-signup-ul .nav-link:hover {
	color: #EA191F !important;
}

/* ==========================================================================
   Single Blog Post — readability & mobile polish
   Scoped to .single-post CONTENT only (never header/footer/nav). Keeps the
   theme's existing fonts/typography and primary colour (#EA191F).
   ========================================================================== */

/* Reading column width is controlled by the 2-column grid below (.tz-single-grid),
   so no fixed max-width here — the article fills the left (70%) column. */

/* Readability */
.single-post .entry-content {
	line-height: 1.7;
}
.single-post .entry-content p {
	margin: 0 0 1.2em;
}

/* Heading rhythm (margins only on desktop — typography family/size untouched) */
.single-post .entry-title,
.single-post .entry-content h1,
.single-post .entry-content h2,
.single-post .entry-content h3 {
	line-height: 1.3;
	margin: 1.6em 0 0.6em;
}

/* Responsive images */
.single-post .entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

/* Lists — clean, consistent indentation */
.single-post .entry-content ul,
.single-post .entry-content ol {
	padding-left: 1.4em;
	margin: 0 0 1.2em;
}
.single-post .entry-content li {
	margin-bottom: 0.5em;
}

/* Blockquotes — simple accent border */
.single-post .entry-content blockquote {
	border-left: 4px solid #EA191F;
	padding: 8px 0 8px 16px;
	margin: 1.4em 0;
	background: rgba(54, 134, 247, 0.04);
}

/* Mobile: side padding so text never touches the edges + scaled headings */
@media (max-width: 768px) {
	.single-post .entry-header,
	.single-post .entry-content {
		padding-left: 16px;
		padding-right: 16px;
	}
	.single-post .entry-title { font-size: 1.6rem; }
	.single-post .entry-content h2 { font-size: 1.35rem; }
	.single-post .entry-content h3 { font-size: 1.15rem; }
}

/* ==========================================================================
   Single Blog Post — 2-column layout (70% / 30%) with sticky sidebar
   Scoped to .single-post only. Header/footer/nav untouched; theme fonts,
   type sizes and #EA191F kept. Reuses the theme product card for products.
   ========================================================================== */

/* Use the full content width for this layout (no theme sidebar column) */
.single-post .container { max-width: 1280px !important; }
.single-post .content-area,
.single-post .site-main,
.single-post main { width: 100% !important; max-width: 100% !important; }
.single-post #right-sidebar,
.single-post #left-sidebar { display: none !important; }

/* Strip narrow max-widths so the article body fills the full 70% column */
.single-post .inside-article,
.single-post .entry-content {
	max-width: 100% !important;
	width: auto !important;
}

.single-post .tz-single-grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
	gap: 32px;
	align-items: start;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
}

/* Left column */
.single-post .tz-single-main { min-width: 0; }
.single-post .tz-single-main .post-image img,
.single-post .tz-single-main .wp-post-image,
.single-post .tz-single-main .featured-image img {
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	border-radius: 12px;
	margin: 0 0 24px;
	display: block;
}

/* Right column — sticky sidebar */
.single-post .tz-single-sidebar {
	position: sticky;
	top: 100px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.single-post .tz-widget-title {
	margin: 0 0 14px;
	padding-bottom: 8px;
	border-bottom: 2px solid #EA191F;
}

/* Latest Posts cards */
.single-post .tz-lp-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	text-decoration: none;
}
.single-post .tz-lp-card:last-child { border-bottom: 0; }
.single-post .tz-lp-thumb img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}
.single-post .tz-lp-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.single-post .tz-lp-title { font-weight: 600; line-height: 1.3; color: inherit; }
.single-post .tz-lp-date { font-size: 12px; opacity: 0.65; }

/* Latest Products — 2-up grid reusing the theme's product card */
.single-post .tz-lprod-grid {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 14px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.single-post .tz-lprod-grid::before,
.single-post .tz-lprod-grid::after { content: none !important; }
.single-post .tz-lprod-grid li {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}

/* Mobile (< 992px): 1 column, natural order (image → content → posts → products) */
@media (max-width: 992px) {
	.single-post .tz-single-grid { grid-template-columns: 1fr; gap: 28px; }
	.single-post .tz-single-sidebar { position: static; top: auto; }
	.single-post .container { padding-left: 16px; padding-right: 16px; }
}

.woocommerce-account .login-signup-ul .nav-link.active {
	color: #EA191F !important;
	font-weight: 600 !important;
	background: transparent !important;
}

/* 3. Inputs & Password Eye Wrapper Fix */
.woocommerce-account #customer_login .woocommerce-Input-text--password,
.woocommerce-account #customer_login .password-input {
	position: relative !important;
	display: block !important;
	width: 100% !important;
}

.woocommerce-account #customer_login .input-text,
.woocommerce-account #customer_login input[type="text"],
.woocommerce-account #customer_login input[type="email"],
.woocommerce-account #customer_login input[type="password"] {
	height: 46px;
	border-radius: 8px;
	border: 1px solid #e0e0e0;
	padding: 0 40px 0 14px; /* Right padding reserved for eye icon */
	font-size: 14px;
	margin-top: 6px;
	width: 100%;
	box-sizing: border-box;
}

.woocommerce-account #customer_login .input-text:focus {
	border-color: #EA191F;
	outline: none;
	box-shadow: 0 0 0 3px rgba(54, 134, 247, 0.15);
}

/* Eye Icon Vertical Center Alignment */
.woocommerce-account #customer_login .show-password-input,
.woocommerce-account #customer_login .password-input i,
.woocommerce-account #customer_login .password-input .show-password {
	position: absolute !important;
	right: 12px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	cursor: pointer;
	z-index: 2;
	margin: 0 !important;
}

/* 4. Main Submit Buttons */
.woocommerce-account #customer_login .woocommerce-form-login__submit,
.woocommerce-account #customer_login .woocommerce-form-register__submit {
	background-color: #EA191F !important;
	color: #ffffff !important;
	border-radius: 8px;
	height: 48px;
	font-weight: 600;
	text-transform: uppercase;
	width: 100%;
	font-size: 15px;
	border: none;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.woocommerce-account #customer_login .woocommerce-form-login__submit:hover,
.woocommerce-account #customer_login .woocommerce-form-register__submit:hover {
	background-color: #2573e0 !important;
}

/* =========================================================================
   5. Mobile Specific Fixes (< 600px)
   ========================================================================= */
@media (max-width: 600px) {
	.woocommerce-account #customer_login {
		width: calc(100% - 32px);
		max-width: calc(100% - 32px);
		margin: 24px auto !important;
		padding: 20px !important;
	}

	/* Tight gap between Login & Register on Mobile */
	.woocommerce-account .login-signup-ul {
		gap: 6px !important; /* Reduced gap from 12px to 6px */
		justify-content: center !important;
	}

	.woocommerce-account .login-signup-ul .nav-link {
		font-size: 16px !important;
		padding: 2px 4px !important;
	}

	.woocommerce-account .login-signup-ul .delimiter {
		font-size: 13px !important;
	}

	/* Eye icon exact centering for mobile screens */
	.woocommerce-account #customer_login .show-password-input,
	.woocommerce-account #customer_login .password-input i,
	.woocommerce-account #customer_login .password-input .show-password {
		top: calc(50% + 3px) !important; /* Offsets input label margin on mobile */
	}
}


/* =========================================================================
   Technoor — Custom Slim Scrollbar (#EA191F)
   ========================================================================= */

/* Chrome, Safari, Edge, Opera */
::-webkit-scrollbar {
	width: 4px !important;  /* Width ko 8px se kam karke 4px kar diya hai */
	height: 4px !important;
}

::-webkit-scrollbar-track {
	background: transparent !important;
}

::-webkit-scrollbar-thumb {
	background-color: #EA191F !important;
	border-radius: 10px !important;
}

::-webkit-scrollbar-thumb:hover {
	background-color: #2573e0 !important;
}

/* Firefox */
* {
	scrollbar-width: thin !important;
	scrollbar-color: #EA191F transparent !important;
}



/* =========================================================================
   Technoor — Mobile Responsive Wishlist Page Fix
   ========================================================================= */

@media (max-width: 768px) {
	/* 1. Make Wishlist Table behave like clean vertical cards */
	.wishlist_table, 
	.wishlist_table tbody, 
	.wishlist_table tr, 
	.wishlist_table td {
		display: block !important;
		width: 100% !important;
		box-sizing: border-box !important;
		text-align: center !important;
	}

	/* Card Wrapper Styling */
	.wishlist_table tr {
		margin-bottom: 20px !important;
		background: #ffffff !important;
		border: 1px solid #e0e0e0 !important;
		border-radius: 12px !important;
		padding: 16px !important;
		position: relative !important;
		box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
	}

	.wishlist_table td {
		border: none !important;
		padding: 6px 0 !important;
		position: static !important;
	}

	/* Remove Top Table Header on Mobile */
	.wishlist_table thead {
		display: none !important;
	}

	/* 2. Remove Icon Fix (Top Right Corner) */
	.wishlist_table td.product-remove {
		position: absolute !important;
		top: 10px !important;
		right: 12px !important;
		width: auto !important;
		padding: 0 !important;
		z-index: 5 !important;
	}

	.wishlist_table td.product-remove a {
		font-size: 18px !important;
		color: #e53935 !important;
		line-height: 1 !important;
	}

	/* 3. Product Thumbnail */
	.wishlist_table td.product-thumbnail img {
		max-width: 100px !important;
		height: auto !important;
		margin: 0 auto 10px auto !important;
		display: block !important;
	}

	/* 4. Product Name / Title */
	.wishlist_table td.product-name a {
		font-size: 15px !important;
		font-weight: 600 !important;
		color: #1a1a1a !important;
		line-height: 1.4 !important;
		display: inline-block !important;
		margin-bottom: 4px !important;
	}

	/* Fix Quick View overlapping title/price */
	.wishlist_table td.product-name .quick-view,
	.wishlist_table .yith-wcqv-button {
		display: block !important;
		margin: 6px auto !important;
		position: static !important;
		clear: both !important;
	}

	/* 5. Product Price */
	.wishlist_table td.product-price,
	.wishlist_table td.product-price * {
		font-size: 16px !important;
		font-weight: 700 !important;
		color: #EA191F !important;
		margin: 4px 0 !important;
	}

	/* 6. Stock Status */
	.wishlist_table td.product-stock-status {
		font-size: 13px !important;
		margin-bottom: 8px !important;
	}

	/* 7. Action Button (Add to Cart / Select Options) */
	.wishlist_table td.product-add-to-cart a {
		display: inline-block !important;
		width: 100% !important;
		max-width: 220px !important;
		padding: 10px 16px !important;
		background-color: #EA191F !important;
		color: #ffffff !important;
		border-radius: 8px !important;
		font-weight: 600 !important;
		font-size: 14px !important;
		text-align: center !important;
		text-decoration: none !important;
	}
}

/* =========================================================================
   Single Blog Post — tighten article padding + full-width image/content
   Scoped to .single-post (never affects other pages/header/footer).
   ========================================================================= */

/* Reduce heavy side padding; small top gap below the menu bar */
.single-post .separate-containers .inside-article,
.single-post .inside-article,
.single-post .site-main .inside-article {
	padding: 15px 0 !important;
	margin-top: 15px;
}

/* Content fills the full left column (matches the featured image width) */
.single-post .inside-article,
.single-post .entry-content {
	max-width: 100% !important;
	width: 100% !important;
}

/* Featured image — full width, rounded */
.single-post .featured-image img,
.single-post .entry-header img,
.single-post .post-image img {
	width: 100% !important;
	height: auto !important;
	display: block !important;
	border-radius: 12px !important;
}

/* Mobile (< 768px): small side padding so text never touches the edge */
@media (max-width: 768px) {
	.single-post .inside-article,
	.single-post .entry-content {
		padding: 0 12px !important;
	}
}

/* =========================================================================
   Single Blog Post — image padding, widget title, font size, sticky sidebar
   Scoped to .single-post. Header/footer/typography family/#EA191F untouched.
   ========================================================================= */

/* Remove vertical padding on post images */
.single-post .type-post img {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Widget title — add top spacing */
.single-post .tz-widget-title {
	margin: 0 0 14px !important;
	padding-bottom: 8px !important;
	padding-top: 25px !important;
	border-bottom: 2px solid #EA191F !important;
}

/* Larger, more readable body text; tighter side spacing (desktop) */
.single-post .entry-content {
	font-size: 17px !important;
	line-height: 1.7 !important;
}
.single-post .inside-article,
.single-post .entry-content {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Sticky right sidebar */
.single-post .tz-single-sidebar {
	position: sticky !important;
	top: 20px !important;
}

/* Mobile: sidebar not sticky; restore small side padding so text isn't flush */
@media (max-width: 992px) {
	.single-post .tz-single-sidebar {
		position: static !important;
		top: auto !important;
	}
}
@media (max-width: 768px) {
	.single-post .inside-article,
	.single-post .entry-content {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
}/* ============================================================
   Shop by Brands — final version
   ============================================================ */

.sbb-section {
  padding: 24px 0;
  margin: 24px 0;
}

.sbb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.sbb-title {
  font-size: 20px;
  font-weight: 700;
  color: #111111;
  margin: 0;
}

.sbb-view-all {
  font-size: 14px;
  font-weight: 600;
  color: #1565d2;
  text-decoration: none;
}

/* Outer white bordered bar — height barhai */
.shop-by-brand {
  background: #ffffff;
  /* border: 1px solid #eaeaea; */
  border-radius: 12px;
  position: relative;
  overflow: visible;
}

.shop-by-brand .owl-stage-outer {
  overflow: hidden;
}

/* Spacing kam ki */
.sbb-card-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 0 12px;   /* pehle 18px thi, ab kam ki */
}

.sbb-card {
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sbb-name {
  display: none;
}

/* Logo size barhai */
.sbb-logo-wrap {
  height: 60px;   /* pehle 44px thi */
  display: flex;
  align-items: center;
  justify-content: center;
}

.sbb-logo {
  max-height: 60px;   /* pehle 44px thi */
  width: auto;
  height: auto;
  object-fit: contain;
}
/* Prev + next arrows — exact same design as Hurry Up Deals / Watches / Tablets.
   Positioned on the buttons themselves (not the .owl-nav wrapper) so left and
   right can be mirrored independently; -8px reproduces the previous next-only
   offset (nav right:12px + button right:-20px = -8px from .shop-by-brand). */
.sbb-section .owl-nav {
  z-index: 3 !important;
  display: flex !important;
}
.sbb-section .owl-nav.disabled {
  display: flex !important;
}
.sbb-section .owl-nav button.owl-prev,
.sbb-section .owl-nav button.owl-next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: #f2f2f2 !important;
  color: #333333 !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  font-size: 16px !important;
  line-height: 36px !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.sbb-section .owl-nav button.owl-prev {
  left: -8px !important;
}
.sbb-section .owl-nav button.owl-next {
  right: -8px !important;
}
.sbb-section .owl-nav button.owl-prev:hover,
.sbb-section .owl-nav button.owl-next:hover {
  background: #e2263f !important;
  color: #ffffff !important;
}

/* ── Mobile / responsive overrides ────────────────────────── */
@media (max-width: 768px) {
  /* Uniform brand cards + proportionally limited logos */
  .sbb-card-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    padding: 0 8px;
  }
  .sbb-logo-wrap {
    height: 100%;
  }
  .sbb-card-link img,
  .sbb-logo {
    max-height: 40px !important;
    max-width: 80% !important;
    width: auto !important;
    object-fit: contain !important;
  }

  /* Next/scroll button mobile par hide */
  .sbb-section .owl-nav,
  .sbb-section .owl-nav.disabled {
    display: none !important;
  }
}


/* =========================================================================
   Single Blog Post — dynamic post title (between featured image & content)
   Rendered via the_content (functions.php) as <h1 class="tz-post-title">.
   Lives inside .entry-content (left 70% column), so it's already bounded to
   that column and shares the content's left/right padding. Matches the theme
   heading hierarchy (Lexend, #222, weight 600) with equal top/bottom spacing.
   ========================================================================= */
.single-post .tz-post-title {
	display: block;
	font-family: inherit;      /* theme heading font (Lexend) */
	color: #222;               /* theme h1 colour */
	font-weight: 600;          /* theme h1 weight */
	line-height: 1.3;
	font-size: 30px;           /* desktop: within the 28–32px range */
	margin: 20px 0;            /* equal top/bottom spacing */
	padding: 0;
	max-width: 100%;           /* never overflow the left column */
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
}

/* Tablet */
@media (max-width: 768px) {
	.single-post .tz-post-title { font-size: 24px; margin: 16px 0; }
}

/* Mobile */
@media (max-width: 480px) {
	.single-post .tz-post-title { font-size: 21px; margin: 14px 0; }
}

/* Sorting dropdown — extra breathing room below it, above the product grid. */
.archive-page-main-cards .orderby {
	margin-bottom: 1rem !important;
}

/* Mobile: keep the sort select from stretching full-width next to the result count. */
@media (max-width: 768px) {
	.woocommerce .woocommerce-ordering select {
		max-width: 46% !important;
	}
}

/* Mobile filter drawer toggle — brand red background. */
@media (max-width: 768px) {
	.shop-page a.sidebar-toggle.filter-menu-toggle {
		background: #ea191f !important;
	}
}

/* =========================================================================
   Shop / Category / Tag title — relocated into the main product grid
   (archive-product.php). Sits at the top of .archive-page-main-cards, above
   the result count, left-aligned to the grid. Overrides the theme's oversized
   .page-title (4rem, uppercase) with a clean, balanced heading. Scoped to
   .archive-page-main-cards so no other .page-title elsewhere is affected.
   ========================================================================= */
.archive-page-main-cards .tz-shop-title {
	font-family: inherit;      /* theme heading font (Lexend) */
	font-weight: 600;          /* standard heading weight */
	color: #222;               /* theme heading colour */
	font-size: 26px;           /* down from 4rem → balanced 24–28px range */
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	margin: 0 0 15px;          /* top 0, balanced bottom spacing */
	padding: 0;
	width: 100%;
	max-width: 100%;
}

/* Tablet */
@media (max-width: 991px) {
	.archive-page-main-cards .tz-shop-title { font-size: 23px; margin-bottom: 12px; }
}

/* Mobile */
@media (max-width: 575px) {
	.archive-page-main-cards .tz-shop-title { font-size: 20px; margin-bottom: 10px; }
}

/* =========================================================================
   Shop / Category / Tag — numerical pagination visual upgrade
   Styles ONLY woocommerce_pagination() output inside the product grid
   (.archive-page-main-cards .woocommerce-pagination). PHP logic, URLs and
   page reloads are untouched — this is purely visual. Scoped so the blog
   pagination (.fp-pagination) and everything else are unaffected.
   ========================================================================= */
.archive-page-main-cards .woocommerce-pagination {
	margin-top: 35px;
	margin-bottom: 25px;
	text-align: center;      /* centered relative to the grid container */
	width: 100%;
	background: transparent !important;   /* no grey container background */
	border: none !important;              /* no outer container border */
}

/* Single horizontal row on ALL screens — no wrap, scroll if it overflows */
.archive-page-main-cards .woocommerce-pagination ul.page-numbers {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px;
	margin: 0 auto !important;
	padding: 0 !important;
	list-style: none;
	background: transparent !important;   /* kill theme grey (#e4eaec) fill */
	border: none !important;              /* kill theme 2px grey border shell */
	max-width: 100% !important;
	overflow-x: auto !important;          /* horizontal scroll instead of wrapping */
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;                /* hide scrollbar (Firefox) */
}
.archive-page-main-cards .woocommerce-pagination ul.page-numbers::-webkit-scrollbar {
	display: none;                        /* hide scrollbar (WebKit) */
}

.archive-page-main-cards .woocommerce-pagination ul.page-numbers li {
	flex: 0 0 auto !important;            /* keep each item on the single line */
	margin: 0;
	padding: 0;
	border: none !important;
	background: transparent !important;
	display: inline-flex;
}

/* Number / arrow boxes — consistent square, subtle border, transparent bg */
.archive-page-main-cards .woocommerce-pagination ul.page-numbers li a.page-numbers,
.archive-page-main-cards .woocommerce-pagination ul.page-numbers li span.page-numbers {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px;
	height: 40px;
	min-width: 40px;
	margin: 0 4px;
	padding: 0 6px;
	box-sizing: border-box;
	border: 1px solid #E0E0E0 !important;
	border-radius: 8px !important;
	background: transparent !important;   /* no grey fill */
	color: #222 !important;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none !important;
	transition: color .2s, border-color .2s;
}

/* Hover on inactive numbers/arrows — clean: no background fill, just a
   light text + border colour shift to brand blue. */
.archive-page-main-cards .woocommerce-pagination ul.page-numbers li a.page-numbers:hover,
.archive-page-main-cards .woocommerce-pagination ul.page-numbers li a.page-numbers:focus {
	background: transparent !important;
	color: #EA191F !important;
	border-color: #EA191F !important;
}

/* Active / current page — solid brand blue (design kept intact) */
.archive-page-main-cards .woocommerce-pagination ul.page-numbers li span.page-numbers.current,
.archive-page-main-cards .woocommerce-pagination ul.page-numbers li a.page-numbers.current {
	background-color: #EA191F !important;
	color: #ffffff !important;
	font-weight: 600 !important;
	border: none !important;
}

/* Mobile (< 576px): streamlined controls — show ONLY Prev, current page, Next.
   All other page numbers + the "…" dots are hidden, so the row fits centered
   with NO horizontal scroll. Uses :has() to keep the essential items visible.
   Desktop/tablet view above is completely unaffected. */
@media (max-width: 575px) {
	.archive-page-main-cards .woocommerce-pagination { margin-top: 26px; margin-bottom: 20px; }

	.archive-page-main-cards .woocommerce-pagination ul.page-numbers {
		gap: 6px;
		justify-content: center !important;   /* centered — only a few items now */
		overflow-x: visible !important;       /* no scrollbar needed */
		flex-wrap: nowrap !important;
	}

	/* Hide every item by default … */
	.archive-page-main-cards .woocommerce-pagination ul.page-numbers li {
		display: none !important;
	}

	/* … then reveal ONLY Previous arrow, current page, and Next arrow */
	.archive-page-main-cards .woocommerce-pagination ul.page-numbers li:has(a.prev),
	.archive-page-main-cards .woocommerce-pagination ul.page-numbers li:has(a.next),
	.archive-page-main-cards .woocommerce-pagination ul.page-numbers li:has(span.current),
	.archive-page-main-cards .woocommerce-pagination ul.page-numbers li:has(a.current) {
		display: inline-flex !important;
	}

	.archive-page-main-cards .woocommerce-pagination ul.page-numbers li a.page-numbers,
	.archive-page-main-cards .woocommerce-pagination ul.page-numbers li span.page-numbers {
		width: 34px;
		height: 34px;
		min-width: 34px;
		margin: 0 2px;
		font-size: 13px;
	}
}

/* Section containers (Hero, USP, Subscribe) — the whole section, including
   its background, is capped to the site's max content width and centered on
   ultra-wide screens; the inner content is capped to match. */
.hero-section-wrapper,
.usp-strip,
.tz-help-strip {
	max-width: 1420px !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box !important;
}
.hero-section-wrapper > div,
.hero-section-wrapper .owl-carousel,
.usp-strip > div,
.usp-strip .container,
.tz-help-strip > div,
.tz-help-strip .container {
	max-width: 1420px !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* =========================================================================
   Homepage MOBILE hero: remove the blank gap under the banner slider.
   Two causes on mobile: (1) .Mobile-slider is capped at max-height:256px,
   which can leave dead space around a natural-aspect banner, and (2) the
   mobile slides output a bare inline <img>, so the image sits on the text
   baseline and leaves whitespace beneath it. Fix both so the slider wraps
   the image tightly and the feature-icons bar sits right under it.
   Scoped to <=768px only — the desktop hero (.Deskstop-slider) is untouched.
   ========================================================================= */
@media (max-width: 768px) {
	.hero-section-wrapper {
		margin: 0 !important;
		padding: 0 !important;
		height: auto !important;
		min-height: unset !important;
	}

	/* Let the mobile slider + all Owl containers collapse to the exact image
	   height — clear any fixed/min height so no empty space is reserved. */
	.Mobile-slider,
	.Mobile-slider.owl-carousel,
	.Mobile-slider .owl-stage,
	.Mobile-slider .owl-item {
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
	}
	.Mobile-slider .owl-stage-outer {
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
	}
	.Mobile-slider {
		margin-bottom: 0 !important;
	}
	.Mobile-slider .owl-stage-outer,
	.Mobile-slider .owl-stage,
	.Mobile-slider .owl-item {
		line-height: 0;          /* kill inline-image baseline whitespace */
	}

	/* Block-level image = no baseline gap; natural aspect = tight wrap */
	/* Fixed, uniform slide box: every banner is cropped to the same 12:5
	   (2.4:1) ratio, so the slider height never changes between slides and
	   the USP strip below stays put. Adjust the ratio to taste. */
	.Mobile-slider img {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 12 / 5;
		object-fit: cover;
		max-height: none !important;
	}

	/* owl dots (if shown) shouldn't add a gap under the banner */
	.Mobile-slider .owl-dots { margin-top: 0 !important; }

	/* Feature-icons bar directly below the hero sits flush */
	.hero-section-wrapper + * { margin-top: 0 !important; }
}

/* USP strip — smaller icons on mobile. html body prefix beats the generic
   svg/img sizing rules that were keeping the icons oversized. */
@media (max-width: 767px) {
	/* Cards stretch to the same height; each card is a centred column whose
	   icon always starts at the same y (top), so icons line up across all
	   four cards no matter how many lines the title wraps to (2 vs 3). */
	html body .usp-strip .usp-strip-grid {
		align-items: stretch !important;
	}
	html body .usp-strip .usp-strip-item {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: flex-start !important;
		text-align: center !important;
		gap: 4px;
		padding: 6px 4px;
	}
	html body .usp-strip .usp-strip-icon-wrap {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 24px !important;
		height: 24px !important;
		margin: 0 auto !important;
		flex-shrink: 0;
	}
	html body .usp-strip .usp-strip-icon-wrap img,
	html body .usp-strip .usp-strip-icon-wrap svg,
	html body .usp-strip .usp-strip-icon-wrap i {
		width: 14px !important;
		height: 14px !important;
		max-width: 100%;
		font-size: 14px !important;
	}
	html body .usp-strip .usp-strip-copy {
		width: 100%;
		text-align: center !important;
	}
}

/* Hero slider prev/next arrows — copied 1:1 from the working Hurry Up Deals /
   Watches / Tablets carousels (.hud-owl, .tz-watch-owl, .tz-tablet-owl in
   skyphonez.css): same size, colors, offsets and hover state, so all four
   carousels' nav buttons are visually identical. Vertical centering is left
   to owl.carousel's own .owl-theme .owl-nav [class*=owl-] rule
   (position:absolute; top:50%; margin-top:-15px), same as those sections. */
.hero-section-wrapper .owl-nav {
	z-index: 3 !important;
}
.hero-section-wrapper .owl-nav button.owl-prev,
.hero-section-wrapper .owl-nav button.owl-next {
	background: #f2f2f2 !important;
	color: #333333 !important;
	border-radius: 50% !important;
	width: 36px !important;
	height: 36px !important;
	font-size: 16px !important;
	line-height: 36px !important;
	border: none !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
	font-family: inherit !important;
}
/* style.css's .intro-slider.owl-carousel .owl-nav button.owl-prev/.owl-next
   ::before rules (riode icon font) paint an extra glyph on top of this clean
   circular button — kill that pseudo-element here. */
.hero-section-wrapper .owl-nav button.owl-prev::before,
.hero-section-wrapper .owl-nav button.owl-next::before {
	content: none !important;
}
.hero-section-wrapper .owl-nav button.owl-prev {
	left: 10px !important;
}
.hero-section-wrapper .owl-nav button.owl-next {
	right: 10px !important;
}
.hero-section-wrapper .owl-nav button.owl-prev:hover,
.hero-section-wrapper .owl-nav button.owl-next:hover {
	background: #e2263f !important;
	color: #ffffff !important;
}

/* =========================================================================
   Product Card redesign — high-specificity force-override
   Beats skyphonez.css's .archive-page-main-cards .tz-na-card !important
   block (same specificity, loaded earlier) by adding html/body ancestors.
   ========================================================================= */
html body .tz-na-card {
	background-color: #FFFFFF !important;
	border: 1px solid #E5E5E5 !important;
	border-radius: 12px !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}
html body .tz-na-card:hover {
	box-shadow: 0 6px 24px rgba(0,0,0,0.10) !important;
}
html body .tz-na-card .tz-na-name {
	color: #111111 !important;
}
html body .tz-na-card .tz-na-price {
	color: #111111 !important;
}
html body .tz-na-card .tz-na-old-price {
	color: #888888 !important;
}
html body .tz-na-card .tz-na-badge {
	background: #EA191F !important;
	color: #ffffff !important;
}
html body .tz-na-card .tz-na-buy-btn {
	background: #EA191F !important;
	color: #ffffff !important;
}
html body .tz-na-card .tz-na-buy-btn:hover {
	background: #C4141A !important;
}

/* =========================================================================
   Site-wide product card redesign — compact centered layout, 6-col desktop
   grid. Applies to every .tz-na-card instance: Homepage New Arrivals grid
   and Watches/Tablets carousels, Shop page, category/tag archives, related
   products and Gaming Hub (all rendered via content-product.php).
   Wishlist icon, add-to-cart icon and the "View" button are removed from
   the markup itself (content-product.php, home_page_new_arrivals() AJAX
   handler, and the inline Watches/Tablets loops in front-page.php); the
   display:none rules below are a safety net only.
   ========================================================================= */
html body .tz-na-wishlist,
html body .tz-na-cart-icon,
html body .tz-na-buy-btn {
	display: none !important;
}

/* Card body: image → title (centered, 2-line clamp) → price (centered) */
html body .tz-na-card .tz-na-body {
	align-items: center !important;
	text-align: center !important;
}
html body .tz-na-card .tz-na-name {
	width: 100% !important;
	text-align: center !important;
	font-weight: 700 !important;
	-webkit-line-clamp: 2 !important;
	line-clamp: 2 !important;
}
html body .tz-na-card .tz-na-footer {
	justify-content: center !important;
}

/* Desktop: 6 columns instead of 5 (New Arrivals grid) / 4 (Shop & archive
   grids). Higher-specificity gaming-hub-cards 3-col rule in skyphonez.css
   is unaffected — its selector has more classes so it still wins there. */
@media (min-width: 1024px) {
	html body .tz-na-grid,
	html body .tz-na-skeleton-grid,
	html body .archive-page-main-cards ul.products {
		grid-template-columns: repeat(5, 1fr) !important;
		gap: 16px !important;
	}
}

/* =========================================================================
   Footer redesign — Newsletter/CTA strip + main footer body + bottom bar
   ========================================================================= */

/* ── Newsletter / CTA strip (top) ── */
html body .tz-help-strip {
	background: #EA191F !important;
	border-bottom: none !important;
}
html body .tz-help-title,
html body .tz-help-channel-value {
	color: #FFFFFF !important;
}
html body .tz-help-sub,
html body .tz-help-channel-label {
	color: rgba(255, 255, 255, 0.75) !important;
}
html body .tz-help-channel {
	color: #FFFFFF !important;
}
html body .tz-help-channel-icon {
	background: rgba(255, 255, 255, 0.15) !important;
	border-color: rgba(255, 255, 255, 0.3) !important;
	color: #FFFFFF !important;
}
html body .tz-help-channel:hover .tz-help-channel-icon {
	background: #FFFFFF !important;
	border-color: #FFFFFF !important;
	color: #EA191F !important;
}
html body .newsletter-input {
	background: #FFFFFF !important;
	border: 1px solid #FFFFFF !important;
	color: #16181d !important;
}
html body .newsletter-input::placeholder {
	color: #888888 !important;
}
html body .newsletter-btn {
	background: #FFFFFF !important;
	color: #EA191F !important;
}
html body .newsletter-btn:hover {
	background: #C4141A !important;
	color: #FFFFFF !important;
}

/* ── Main footer body ── */
html body .tz-footer {
	background: #FFFFFF !important;
	color: #555555 !important;
}
html body .tz-footer-desc,
html body .tz-footer-phone,
html body .tz-footer-address {
	color: #555555 !important;
}
html body .tz-footer-phone a {
	color: #555555 !important;
}
html body .tz-footer-phone a:hover {
	color: #EA191F !important;
}
html body .tz-footer-address-icon {
	color: #555555 !important;
}
html body .tz-footer-col-title {
	color: #111111 !important;
	font-weight: 700 !important;
	opacity: 1 !important;
}
html body .tz-footer-links a {
	color: #555555 !important;
}
html body .tz-footer-links a:hover {
	color: #EA191F !important;
}
html body .tz-social-btn {
	background: transparent !important;
	border: 1px solid #E5E5E5 !important;
	color: #555555 !important;
}
html body .tz-social-btn:hover {
	background: #EA191F !important;
	border-color: #EA191F !important;
	color: #FFFFFF !important;
}

/* ── Copyright & payment bar ── */
html body .tz-footer-bottom {
	background: #FAFAFA !important;
	border-top: 1px solid #EEEEEE !important;
}
html body .tz-footer-copy {
	color: #777777 !important;
	text-align: left !important;
}
html body .tz-footer-bottom-links a {
	color: #777777 !important;
}
html body .tz-footer-bottom-links a:hover {
	color: #EA191F !important;
}
html body .tz-footer-payments {
	justify-content: flex-end !important;
	margin-left: auto !important;
}

/* =========================================================================
   Shop By Category — centered rounded-square cards
   ========================================================================= */
html body .sbc-section {
	padding: 24px 0 !important;
}
html body .sbc-wrapper {
	background: #FFFFFF !important;
	border-radius: 0 !important;
	padding: 0 !important;
}
html body .sbc-header {
	justify-content: space-between !important;
	align-items: center !important;
	margin-bottom: 24px !important;
}
html body .sbc-title {
	color: #111111 !important;
	text-align: left !important;
	font-size: 26px !important;
	font-weight: 700 !important;
	margin: 0 !important;
}
html body .sbc-view-all {
	position: static !important;
	color: #222 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
}

html body .sbc-grid .sbc-item {
	flex: 0 0 auto !important;
	max-width: none !important;
	width: 130px !important;
	min-width: 130px !important;
}
html body .sbc-grid .sbc-item .sbc-card-link {
	width: 130px !important;
	height: 130px !important;
}
html body .sbc-grid .sbc-item .sbc-card {
	width: 130px !important;
	height: 130px !important;
	aspect-ratio: unset !important;
	background: #FFFFFF !important;
	border-radius: 12px !important;
	box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
	border: 1px solid #E5E5E5 !important;
	padding: 12px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
html body .sbc-grid .sbc-item .sbc-card:hover {
	transform: none !important;
	box-shadow: 0 4px 10px rgba(0,0,0,0.10) !important;
	border-color: #EA191F !important;
}
html body .sbc-grid .sbc-item .sbc-card:hover .sbc-card-img {
	transform: none !important;
}
html body .sbc-grid .sbc-item .sbc-card img {
	max-width: 100% !important;
	max-height: 100% !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
	transition: none !important;
}
html body .sbc-grid .sbc-item .sbc-card-img-placeholder {
	width: 60px !important;
	height: 60px !important;
	background: #F5F5F5 !important;
	border-radius: 8px !important;
}
html body .sbc-grid .sbc-item .sbc-card-name {
	color: #111111 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-align: center !important;
	margin-top: 8px !important;
	line-height: 1.3 !important;
}
html body .sbc-grid .sbc-item .sbc-card-link:hover .sbc-card-name {
	color: #EA191F !important;
}
@media (max-width: 575px) {
	html body .sbc-grid {
		gap: 16px !important;
	}
	html body .sbc-grid .sbc-item {
		width: 84px !important;
		min-width: 84px !important;
	}
	html body .sbc-grid .sbc-item .sbc-card-link,
	html body .sbc-grid .sbc-item .sbc-card {
		width: 84px !important;
		height: 84px !important;
	}
	html body .sbc-grid .sbc-item .sbc-card {
		padding: 12px !important;
	}
	html body .sbc-grid .sbc-item .sbc-card-img,
	html body .sbc-grid .sbc-item .sbc-card-img-placeholder {
		width: 48px !important;
		height: 48px !important;
	}
}

/* Shop By Category header — "View all" never wraps, stays vertically
   centred and flush right beside the heading (all screen sizes). */
html body .sbc-header {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px;
}
html body .sbc-header .sbc-title {
	flex: 1 1 auto;
	min-width: 0;
}
html body .sbc-header .sbc-view-all {
	flex: 0 0 auto !important;
	white-space: nowrap !important;
	margin-left: auto !important;
	align-self: center !important;
	line-height: 1.2 !important;
	text-align: right !important;
}
@media (max-width: 575px) {
	html body .sbc-header .sbc-title {
		font-size: 20px !important;
		line-height: 1.2 !important;
	}
}

/* Shop By Category — hide the horizontal scrollbar on mobile but keep
   swipe-scrolling. html body prefix + !important beat the global slim red
   scrollbar rules (`*` scrollbar-width and ::-webkit-scrollbar) above. */
@media (max-width: 767px) {
	html body .sbc-grid {
		overflow-x: auto !important;
		-ms-overflow-style: none !important;   /* IE / old Edge */
		scrollbar-width: none !important;      /* Firefox */
	}
	html body .sbc-grid::-webkit-scrollbar {
		display: none !important;              /* Chrome, Safari, Brave, Edge */
		width: 0 !important;
		height: 0 !important;
		background: transparent !important;
	}
}
/* =====================================================================
   Shop / Archive — Category Sidebar redesign
   Scope: the left sidebar column output by woocommerce/archive-product.php
   (.filter-menu-toggle-desktop, its Categories accordion, the Price Filter
   form, and the woocommerce_sidebar() widgets — Brand / Availability —
   printed inside .archive-price-filter). No grid / template markup here,
   styling only.
   ===================================================================== */

:root {
	--tz-accent: #e50914;
	--tz-accent-dark: #b8060f;
}

/* --- Sidebar column shell -------------------------------------------- */
.filter-menu-toggle-desktop {
	background: #fff;
	/* border: 1px solid #ececec;
	border-radius: 10px;
	padding: 20px; */
}

.filter-menu-toggle-desktop .archive-page-filter-headings {
	font-size: 15px;
	font-weight: 600;
	text-transform: none;
	margin: 0 0 12px;
	padding: 0 0 10px;
	border-bottom: 1px solid #f0f0f0;
	letter-spacing: 0;
}

/* --- Categories accordion --------------------------------------------- */
.archive-page-filter-main .accordion-item {
	border: none;
	border-bottom: 1px solid #f2f2f2;
}

.archive-page-filter-main .accordion-item:last-child {
	border-bottom: none;
}

.archive-page-filter-main .accordion-header {
	display: block;
}

.archive-page-filter-main .accordion-button {
	display: flex;
	align-items: center;
	width: 100%;
	background: none;
	border: none;
	padding: 11px 22px 11px 0;
	font-size: 14px;
	color: #333;
	position: relative;
}

.archive-page-filter-main .accordion-button::before {
	content: '\f0c9';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	font-size: 12px;
	width: 18px;
	color: #999;
}

.archive-page-filter-main .accordion-button:hover,
.archive-page-filter-main .accordion-button:focus {
	color: var(--tz-accent);
	text-decoration: none;
}

/* the current category's button is rendered as a real <button> (not .collapsed) */
.archive-page-filter-main .accordion-button:not(.collapsed) {
	color: var(--tz-accent);
	font-weight: 600;
}

.archive-page-filter-main .accordion-button:not(.collapsed)::before {
	color: var(--tz-accent);
}

/* expand/collapse chevron */
.archive-page-filter-main .accordion-button::after {
	content: '\f078';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	font-size: 10px;
	margin-left: auto;
	color: #aaa;
	transition: transform .2s ease;
}

.archive-page-filter-main .accordion-button.collapsed::after {
	transform: rotate(0deg);
}

.archive-page-filter-main .accordion-button:not(.collapsed)::after {
	transform: rotate(180deg);
	color: var(--tz-accent);
}

/* plain link buttons (non-active parent categories) don't collapse anything,
   so they never carry a caret */
.archive-page-filter-main a.accordion-button::after {
	content: '';
	display: none;
}

.archive-page-filter-main .accordion-body {
	padding: 4px 0 12px 26px;
}

.archive-page-filter-main .accordion-body ul.navbar-nav {
	list-style: none;
	margin: 0;
	padding: 0;
}

.archive-page-filter-main .accordion-body li.nav-item {
	padding: 6px 0;
}

.archive-page-filter-main .accordion-body li.nav-item > a {
	color: #666;
	font-size: 13px;
}

.archive-page-filter-main .accordion-body li.nav-item > a:hover,
.archive-page-filter-main .accordion-body li.nav-item > a.active {
	color: var(--tz-accent);
	text-decoration: none;
}

/* --- Price range slider ------------------------------------------------ */
.archive-price-filter .archive-page-filter-headings {
	font-size: 15px;
	font-weight: 600;
	text-transform: none;
}

.archive-price-filter .ui-widget-header {
	background: var(--tz-accent);
}

.archive-price-filter .ui-slider-horizontal {
	background: #eee;
	border: none;
	border-radius: 3px;
}

.archive-price-filter .ui-slider .ui-slider-handle {
	width: 16px;
	height: 16px;
	top: -5px;
	background: #fff;
	border: 2px solid var(--tz-accent);
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

.archive-price-filter .price-range-field {
	background-color: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 6px;
}

.archive-price-filter .filter-btn {
	background: var(--tz-accent);
	color: #fff;
	border: none;
}

.archive-price-filter .filter-btn:hover {
	background: var(--tz-accent-dark);
}

/* --- Brand filter / Availability checkboxes (woocommerce_sidebar widgets,
   printed inside .archive-price-filter — YITH WCAN / layered nav lists) ---- */
.archive-price-filter .widget-title,
.archive-price-filter .widget h2,
.archive-price-filter .widget h3 {
	font-size: 15px;
	font-weight: 600;
	text-transform: none;
}

.archive-price-filter .widget .wc-layered-nav-term.chosen > a::before,
.archive-price-filter .widget .with-checkbox li.chosen > a::before,
.archive-price-filter .widget .yith-wcan-list li.chosen > a::before {
	background-color: var(--tz-accent);
	border-color: var(--tz-accent);
}

.archive-price-filter .widget .yith-wcan-list li > a::before {
	border-color: #cfcfcf;
}

.archive-price-filter .widget .wc-layered-nav-term > a:hover,
.archive-price-filter .widget .with-checkbox li > a:hover,
.archive-price-filter .widget .yith-wcan-list li > a:hover {
	color: var(--tz-accent);
}

.archive-price-filter .widget input[type="checkbox"]:checked {
	accent-color: var(--tz-accent);
}

/* =====================================================================
   Shop / Archive — Category Sidebar: brand-red pass (blue → red)
   skyphonez.css renders the actual accordion/price/brand markup on this
   page (.filter-menu-toggle-desktop ...) with !important + #00ABC5 (blue)
   and literal "+" / "−" glyphs. This block targets those exact selectors
   with matching or higher specificity + !important so it wins regardless
   of stylesheet load order, and swaps every blue accent for --tz-accent.
   Style-only: no PHP/template markup is touched.
   ===================================================================== */

/* --- Chevron icons: real FontAwesome chevrons instead of "+" / "−" ---- */
.filter-menu-toggle-desktop .archive-page-filter-main a.accordion-button::after,
.filter-menu-toggle-desktop .archive-page-filter-main button.accordion-button::after {
	content: '\f078' !important;
	font-family: 'Font Awesome 5 Free' !important;
	font-weight: 900 !important;
	font-size: 11px !important;
	color: #aaa !important;
	transition: transform .2s ease, color .2s ease !important;
	transform: rotate(0deg) !important;
}

.filter-menu-toggle-desktop .archive-page-filter-main button.accordion-button::after {
	transform: rotate(180deg) !important;
	color: var(--tz-accent) !important;
}

/* --- Category icon, left of each main category label ----------------- */
.filter-menu-toggle-desktop .archive-page-filter-main .accordion-button::before {
	content: '\f07b' !important; /* fa-folder, generic fallback */
	font-family: 'Font Awesome 5 Free' !important;
	font-weight: 900 !important;
	font-size: 13px !important;
	color: #999 !important;
	width: 18px !important;
	flex-shrink: 0 !important;
	margin-right: 10px !important;
	text-align: center !important;
}

.filter-menu-toggle-desktop .archive-page-filter-main button.accordion-button::before {
	color: var(--tz-accent) !important;
}

/* Per-category icon, set via data-tz-icon (assets/js/custom.js maps the
   category name to a FontAwesome glyph on page load) */
.filter-menu-toggle-desktop .archive-page-filter-main .accordion-button[data-tz-icon]::before {
	content: attr(data-tz-icon) !important;
}

/* --- Active / hover: light red tint + bold red text, no more blue ---- */
.filter-menu-toggle-desktop .archive-page-filter-main a.accordion-button:hover {
	color: var(--tz-accent) !important;
	background: rgba(229, 9, 20, 0.06) !important;
}

.filter-menu-toggle-desktop .archive-page-filter-main button.accordion-button {
	color: var(--tz-accent) !important;
	background: rgba(229, 9, 20, 0.08) !important;
	font-weight: 600 !important;
}

.filter-menu-toggle-desktop .archive-page-filter-main .accordion-body .nav-item a:hover,
.filter-menu-toggle-desktop .archive-page-filter-main .accordion-body .nav-item a.active {
	color: var(--tz-accent) !important;
	background: rgba(229, 9, 20, 0.08) !important;
}

/* --- Price filter: button, slider track/handle, focus rings ---------- */
.filter-menu-toggle-desktop .filter-btn {
	background: var(--tz-accent) !important;
}

.filter-menu-toggle-desktop .filter-btn:hover {
	background: var(--tz-accent-dark) !important;
}

.filter-menu-toggle-desktop .ui-widget-header {
	background: var(--tz-accent) !important;
}

.filter-menu-toggle-desktop .price-filter-range .ui-slider-handle,
.filter-menu-toggle-desktop .ui-slider .ui-slider-handle {
	border-color: var(--tz-accent) !important;
}

.filter-menu-toggle-desktop .price-range-field:focus {
	border-color: var(--tz-accent) !important;
	box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.12) !important;
	outline: none !important;
}

/* --- Brand / attribute checkbox widgets (YITH WCAN), rendered inside
   .archive-price-filter via woocommerce_sidebar() -------------------- */
.filter-menu-toggle-desktop .archive-price-filter .yith-wcan-list li > a:hover,
.filter-menu-toggle-desktop .archive-price-filter .yith-wcan-list li.chosen > a {
	color: var(--tz-accent) !important;
}

.filter-menu-toggle-desktop .archive-price-filter .yith-wcan-list li.chosen > a::before {
	background-color: var(--tz-accent) !important;
	border-color: var(--tz-accent) !important;
}

.filter-menu-toggle-desktop .archive-price-filter .yith-wcan-list li > a .count {
	margin-left: auto !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	color: #999 !important;
	background: #f4f4f4 !important;
	border-radius: 10px !important;
	padding: 1px 7px !important;
}

.filter-menu-toggle-desktop .archive-price-filter .yith-wcan-list li.chosen > a .count {
	color: var(--tz-accent) !important;
	background: rgba(229, 9, 20, 0.1) !important;
}

.filter-menu-toggle-desktop .archive-price-filter input[type="checkbox"]:focus-visible,
.filter-menu-toggle-desktop .archive-price-filter input[type="text"]:focus,
.filter-menu-toggle-desktop .archive-price-filter input[type="search"]:focus {
	border-color: var(--tz-accent) !important;
	box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.12) !important;
	outline: none !important;
}

/* --- "Filter by Brand" block — server-rendered by tz_render_brand_filter()
   (functions.php) directly above "Filter by Price" in archive-product.php.
   Markup: .tz-brand-filter-widget > .tz-brand-search-wrap + ul.tz-brand-list
   > li.tz-brand-item > label > input.tz-brand-checkbox + name + count. ---- */
.filter-menu-toggle-desktop .tz-brand-filter-widget {
	margin-bottom: 12px !important;
}

.filter-menu-toggle-desktop .tz-brand-search-wrap {
	padding: 10px 14px 4px !important;
}

.filter-menu-toggle-desktop .tz-brand-search {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 7px 12px !important;
	font-size: 13px !important;
	border: 1px solid #e0e0e0 !important;
	border-radius: 6px !important;
	background: #f9f9f9 !important;
	color: #333 !important;
}

.filter-menu-toggle-desktop .tz-brand-search:focus {
	border-color: var(--tz-accent) !important;
	background: #fff !important;
	box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.12) !important;
	outline: none !important;
}

.filter-menu-toggle-desktop .tz-brand-list {
	list-style: none !important;
	margin: 8px 0 0 !important;
	padding: 0 !important;
	max-height: 220px !important;
	overflow-y: auto !important;
}

.filter-menu-toggle-desktop .tz-brand-item {
	padding: 0 14px !important;
	border: none !important;
}

.filter-menu-toggle-desktop .tz-brand-item label {
	display: flex !important;
	align-items: center !important;
	gap: 9px !important;
	padding: 7px 0 !important;
	margin: 0 !important;
	font-size: 14px !important;
	color: #444 !important;
	cursor: pointer !important;
	font-weight: 400 !important;
}

.filter-menu-toggle-desktop .tz-brand-item label:hover {
	color: var(--tz-accent) !important;
}

.filter-menu-toggle-desktop .tz-brand-checkbox {
	width: 16px !important;
	height: 16px !important;
	margin: 0 !important;
	flex-shrink: 0 !important;
	accent-color: var(--tz-accent) !important;
	cursor: pointer !important;
}

.filter-menu-toggle-desktop .tz-brand-name {
	flex: 1 !important;
}

.filter-menu-toggle-desktop .tz-brand-item input.tz-brand-checkbox:checked ~ .tz-brand-name {
	color: var(--tz-accent) !important;
	font-weight: 600 !important;
}

.filter-menu-toggle-desktop .tz-brand-item .count {
	font-size: 11px !important;
	font-weight: 600 !important;
	color: #999 !important;
	background: #f4f4f4 !important;
	border-radius: 10px !important;
	padding: 1px 7px !important;
	flex-shrink: 0 !important;
}

.filter-menu-toggle-desktop .tz-brand-item input.tz-brand-checkbox:checked ~ .count {
	color: var(--tz-accent) !important;
	background: rgba(229, 9, 20, 0.1) !important;
}

.filter-menu-toggle-desktop .tz-brand-item.tz-brand-hidden {
	display: none !important;
}

/* =====================================================================
   Shop grid — product title hover: brand red, not the browser/theme
   default link blue.

   The actual culprit: skyphonez.css's
   ".archive-page-main-cards .tz-na-name:hover { color: #00ABC5 !important; }"
   (skyphonez.css:2999) — the shop/category grid's real card title class is
   .tz-na-name (content-product.php), not .woocommerce-loop-product__title,
   and that rule's teal (#00ABC5) is what reads as "blue" on hover. Matching
   its exact selector with an "html body" prefix guarantees higher
   specificity regardless of stylesheet load order. The
   .woocommerce-loop-product__title rule below is kept too, in case any
   other loop template (outside content-product.php) renders that markup.
   ===================================================================== */
html body .archive-page-main-cards .tz-na-card .tz-na-name:hover,
html body .archive-page-main-cards .tz-na-name:hover,
html body .tz-na-card .tz-na-name:hover {
	color: #e50914 !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title:hover,
.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title {
	color: #e50914 !important;
}

/* =====================================================================
   Shop page — Trust Features banner
   Rendered by tz_render_shop_trust_features() (functions.php) on
   generate_before_footer, shop/category/tag pages only, so it sits full
   width directly above the site footer (below pagination). Reuses the same
   visual language as the single-product trust row (.tz-sp-feat-row) but is
   scoped under its own .tz-shop-trust-* classes so nothing there is touched.
   ===================================================================== */
.tz-shop-trust-banner {
	max-width: 1280px;
	margin: 32px auto;
	padding: 0 20px;
	box-sizing: border-box;
}

.tz-shop-trust-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 20px;
	box-sizing: border-box;
}

.tz-shop-trust-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 18px;
	border-right: 1px solid #e5e7eb;
	min-width: 0;
}

.tz-shop-trust-item:last-child {
	border-right: none;
}

.tz-shop-trust-item svg {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	color: #e50914;
	stroke: currentColor;
}

.tz-shop-trust-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.tz-shop-trust-text strong {
	font-size: 13px;
	font-weight: 700;
	color: #1a1a1a;
	line-height: 1.25;
}

.tz-shop-trust-text span {
	font-size: 11.5px;
	color: #1a1a1a;
	line-height: 1.4;
	margin-top: 2px;
}

@media (max-width: 767px) {
	.tz-shop-trust-row {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 18px;
		padding: 18px 14px;
	}

	.tz-shop-trust-item {
		padding: 0 10px;
		border-right: none;
	}

	.tz-shop-trust-item:nth-child(odd) {
		border-right: 1px solid #e5e7eb;
	}
}

/* =========================================================================
   Shop / Category / Tag — breadcrumbs, directly above .tz-shop-title
   (archive-product.php). Delimiter is already " > " via the
   woocommerce_breadcrumb_defaults filter in inc/single_product_page_func.php.
   ========================================================================= */
.archive-page-main-cards .tz-shop-breadcrumb {
	margin: 0 0 8px;
	width: 100%;
}

.archive-page-main-cards .tz-shop-breadcrumb .woocommerce-breadcrumb {
	font-size: 13px;
	color: #666666;
	line-height: 1.4;
	margin: 0;
	padding: 0;
}

.archive-page-main-cards .tz-shop-breadcrumb .woocommerce-breadcrumb a {
	color: #666666;
	text-decoration: none;
	transition: color .2s ease;
}

.archive-page-main-cards .tz-shop-breadcrumb .woocommerce-breadcrumb a:hover,
.archive-page-main-cards .tz-shop-breadcrumb .woocommerce-breadcrumb a:focus {
	color: #e50914;
}

/* ==========================================================================
   Cart page — white theme + full-width top cart / two-column bottom section
   Overrides generatepress_child/assets/css/cart.css. Loads before cart.css
   (cart.css declares 'technoor-custom' as a dependency), so selectors here
   are kept slightly more specific / !important where needed to still win.
   ========================================================================== */

/* Kill any beige/cream background on the wrapper and force the white theme.
   No literal #F8E6D2 / rgb(248,230,210) exists anywhere in this theme's CSS
   or JS (checked custom.css, cart.css, style.css, custom.js — cart.css's
   --tz-bg is already #f8f9fa, not beige). This is a belt-and-braces override
   in case a cached stylesheet or third-party plugin CSS ever injects a beige
   tint here, overriding the --tz-bg custom property directly so it can't
   leak through anywhere else that reads it. */
.tz-cart-page {
	--tz-bg: #ffffff !important;
	background-color: #ffffff !important;
	background: #ffffff !important;
}

body.woocommerce-cart .page-content.tz-cart-page {
	background-color: #ffffff !important;
}

body.woocommerce-cart,
body.woocommerce-cart .site-content,
body.woocommerce-cart .content-area {
	background-color: #f8f9fa !important;
}

/* Fix Cart Page Container Background — .container is a pure layout wrapper
   (max-width + centering) that sits between the #f8f9fa page background
   above and the white .tz-cart-page below; it must stay transparent so it
   never shows as a second, slightly different-toned panel behind the cards. */
body.woocommerce-cart .container,
body.woocommerce-cart .tz-cart-page,
body.woocommerce-cart .tz-cart-page .container,
.tz-cart-page .container {
	background-color: transparent !important;
	background: transparent !important;
}

/* The layout grid and sidebar wrapper are structural only — they must stay
   transparent so the white cards inside them read as sitting directly on
   the page background, not inside a second grey panel. */
body.woocommerce-cart .tz-cart-layout,
body.woocommerce-cart .tz-cart-sidebar,
.tz-cart-page .tz-cart-layout,
.tz-cart-page .tz-cart-sidebar,
.tz-cart-page .tz-cart-sidebar__inner {
	background-color: transparent !important;
	background: transparent !important;
}

body.woocommerce-cart .tz-cart-card,
.tz-cart-page .tz-cart-card,
.tz-cart-page .tz-cart-totals,
.tz-cart-page .tz-cart-totals.summary,
.tz-cart-page .tz-trust-strip {
	background-color: #ffffff !important;
	border-color: #e5e7eb !important;
}

/* Row 1: shopping cart card spans the full width of the content grid. */
.tz-cart-page .tz-cart-layout {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 24px;
}

.tz-cart-page .tz-cart-main,
.tz-cart-page .tz-cart-sidebar {
	width: 100%;
	max-width: 100%;
}

/* Row 2: cross-sells (left) + Order Summary (right), side by side on desktop. */
.tz-cart-page .tz-cart-sidebar__inner {
	position: static !important;
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: start;
}

@media (min-width: 992px) {
	.tz-cart-page .tz-cart-layout {
		grid-template-columns: 1fr !important;
	}

	/* Left: cross-sells ~2/3 width. Right: Order Summary ~1/3 width. */
	.tz-cart-page .tz-cart-sidebar__inner {
		display: grid !important;
		grid-template-columns: 2fr 1fr !important;
		gap: 24px !important;
		align-items: start !important;
	}

	.tz-cart-page .tz-cart-sidebar .cross-sells,
	.tz-cart-page .tz-cart-sidebar .tz-related-products {
		grid-column: 1 !important;
		min-width: 0 !important;
	}

	.tz-cart-page .cart_totals.tz-cart-totals,
	.tz-cart-page .cart_totals.tz-cart-totals.summary {
		grid-column: 2 !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}
}

.tz-cart-page .tz-cart-sidebar .cross-sells,
.tz-cart-page .tz-cart-sidebar .tz-related-products,
.tz-cart-page .tz-cart-totals,
.tz-cart-page .tz-cart-totals.summary {
	margin-top: 0 !important;
}

/* Align Order Summary card with the Related Product cards — the left column
   has a "Related Products" heading above its card grid that the right
   column (Order Summary) doesn't have, so the cards themselves start lower
   than the summary card unless the summary is pushed down to match. Kept
   align-items: start (already set above) since we want the CARD TOPS level,
   not the column tops. */
@media (min-width: 992px) {
	.tz-cart-page .cart_totals.tz-cart-totals,
	.tz-cart-page .cart_totals.tz-cart-totals.summary {
		margin-top: 42px !important; /* offsets the height of the "Related Products" heading */
	}
}

/* "Related Products" block — heading + 3-up card grid, left column of
   .tz-cart-sidebar__inner. Cards reuse the site's existing .tz-na-card
   styling verbatim (defined earlier in this file), so only the section
   heading and the grid wrapper need rules here. */
.tz-related-products__title {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 700;
	color: #111111;
}

.tz-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

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

@media (max-width: 479px) {
	.tz-related-grid {
		grid-template-columns: 1fr;
	}
}

/* Card sizing — the cross-sell/related cards sit next to the Order Summary
   box. Taller than the first pass so the cards read as well-proportioned
   product cards rather than cramped thumbnails, while still reading smaller
   than the full .tz-na-card used on the homepage/shop grids. */
.tz-related-grid .tz-na-card {
	border-radius: 10px !important;
	min-height: 280px !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
}

.tz-related-grid .tz-na-img-wrap {
	aspect-ratio: auto !important;
	height: 140px !important;
}

.tz-related-grid .tz-na-img {
	max-height: 140px !important;
	height: 140px !important;
	padding: 12px !important;
	object-fit: contain !important;
	margin-bottom: 10px !important;
}

.tz-related-grid .tz-na-body {
	padding: 16px !important;
	gap: 8px !important;
	flex: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
}

.tz-related-grid .tz-na-name {
	font-size: 12.5px !important;
	line-height: 1.35 !important;
	-webkit-line-clamp: 2 !important;
	line-clamp: 2 !important;
}

.tz-related-grid .tz-na-price {
	font-size: 13px !important;
	gap: 3px !important;
	flex-wrap: wrap !important;
}

.tz-related-grid .tz-na-old-price {
	font-size: 10px !important;
}

.tz-related-grid .tz-na-badge {
	font-size: 9px !important;
	padding: 2px 6px !important;
	top: 6px !important;
	left: 6px !important;
}

/* Primary CTA stays brand red regardless of load order. */
.tz-cart-page .wc-proceed-to-checkout .checkout-button,
.tz-cart-page .wc-proceed-to-checkout a.button {
	background-color: #e50914 !important;
}

.tz-cart-page .wc-proceed-to-checkout .checkout-button:hover,
.tz-cart-page .wc-proceed-to-checkout a.button:hover {
	background-color: #c40812 !important;
}

/* Footer trust strip stays a full-width 4-column white bar with red icons. */
.tz-cart-page .tz-trust-strip {
	width: 100%;
}

.tz-cart-page .tz-trust-item svg {
	color: #e50914 !important;
}

/* Remove GeneratePress's default inner padding on the cart and checkout
   article wrapper so the page content spans the full container width.
   Scoped to those two pages (body.woocommerce-cart / -checkout) rather than
   every .separate-containers .inside-article, which would also strip the
   padding from blog posts, shop pages and static pages. */
body.woocommerce-cart.separate-containers .inside-article,
body.woocommerce-checkout.separate-containers .inside-article,
.woocommerce-cart .separate-containers .inside-article,
.woocommerce-checkout .separate-containers .inside-article {
	padding: 0 !important;
}

/* Coupon card — capped at 640px and kept on the left edge of the cart column
   instead of stretching the full width. */
html body .tz-cart-page .tz-coupon-card {
	max-width: 640px !important;
	width: 100% !important;
	margin-right: auto !important;
	margin-left: 0 !important;
	box-sizing: border-box;
}

/* Coupon input — no forced background/border/shadow overrides from the global
   input rules; it just fills its flex row cleanly. The visible border and
   white fill come from cart.css's own .tz-coupon__input (not !important). */
html body .tz-cart-page .tz-coupon-card input[type="text"]#coupon_code {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	float: none;
	box-sizing: border-box;
	background-image: none;
	box-shadow: none;
}

/* Cart page container width — 1420px, centered (matches the site's other
   full-width sections). html/body prefix out-ranks the narrower max-width
   set in cart.css / the theme's .container rule. */
html body .tz-cart-page,
html body .tz-cart-page .container {
	max-width: 1420px !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box;
}

/* =========================================================================
   Mobile filter drawer (#mySidenav) — align the close button with the
   "Categories" heading. closebtn is a direct child of #mySidenav while the
   heading sits deeper inside .filter-menu-toggle-mobile (archive-product.php),
   so they can't share one flex row — closebtn is pinned absolute instead,
   positioned to land level with the heading text, and the heading gets right
   padding so its label never runs under the button.
   ========================================================================= */
@media (max-width: 768px) {
	.shop-page #mySidenav {
		position: relative !important;
	}

	.shop-page #mySidenav .closebtn {
		position: absolute !important;
		top: 15px !important;
		right: 15px !important;
		font-size: 28px !important;
		line-height: 1 !important;
		color: #1a1a1a !important;
		text-decoration: none !important;
		cursor: pointer !important;
		z-index: 10 !important;
		display: block !important;
	}

	.shop-page .archive-page-filter-headings {
		padding-right: 40px !important;
	}
}

/* =========================================================================
   Form fields — override GeneratePress's default "background-color:
   var(--base-2)" on inputs / textarea / select with a transparent fill.
   html body prefix beats GeneratePress's attribute selectors; component-
   specific rules with a class selector (e.g. the newsletter input, which
   sets its own white background) still win because their specificity is
   higher. Change `transparent` to `#ffffff` for a solid white fill.
   ========================================================================= */
html body input[type="text"],
html body input[type="email"],
html body input[type="url"],
html body input[type="password"],
html body input[type="search"],
html body input[type="tel"],
html body input[type="number"],
html body textarea,
html body select {
	background-color: transparent !important;
}

/* Footer newsletter input keeps its white fill — the global rule above has
   higher specificity than `html body .newsletter-input`, so restate it here. */
html body input.newsletter-input[type="email"] {
	background-color: #FFFFFF !important;
}

/* =========================================================================
   Global typography — site-wide font, applied to base text elements.
   ========================================================================= */
body, button, input, select, textarea {
	font-family: 'Lexend', sans-serif !important;
	font-weight: 400 !important;
	text-transform: none !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
}
/* Footer logo — same 140px size on every page. On WooCommerce pages
   (cart, checkout, shop...) `.woocommerce-page img { max-width: 100%;
   height: auto }` out-ranks skyphonez.css's `.tz-footer-logo` rule, so the
   logo stretched to the full column width (~339px). html body + class wins. */
html body .tz-footer-logo-link {
	display: inline-block;
	max-width: 140px;
}
html body img.tz-footer-logo,
html body.woocommerce-page img.tz-footer-logo,
html body .woocommerce img.tz-footer-logo {
	max-width: 140px !important;
	width: 140px !important;
	height: auto !important;
	display: block !important;
}

/* =========================================================================
   Cart page (desktop) — Order Summary sits beside the "Have a coupon?" card.

   The coupon card lives inside the cart <form> (in .tz-cart-main) while the
   Order Summary lives in the <aside>, so they are never siblings and a
   margin can't line them up reliably. Instead the wrappers are dissolved with
   display: contents, which makes the cart card, coupon card, Related Products
   and Order Summary direct grid items of .tz-cart-layout:

       [ Shopping cart card ............................. ]  row 1
       [ Coupon card        ] [ Order Summary ]               row 2
       [ Related Products   ] [  (continues)  ]               row 3
   ========================================================================= */
@media (min-width: 992px) {
	html body .tz-cart-page .tz-cart-layout {
		display: grid !important;
		grid-template-columns: 2fr 1fr !important;
		gap: 24px !important;
		align-items: start !important;
	}
	html body .tz-cart-page .tz-cart-main,
	html body .tz-cart-page .tz-cart-main > form.woocommerce-cart-form,
	html body .tz-cart-page .tz-cart-sidebar,
	html body .tz-cart-page .tz-cart-sidebar__inner {
		display: contents !important;
	}
	html body .tz-cart-page .woocommerce-cart-form__contents {
		grid-column: 1 / -1 !important;
		grid-row: 1 !important;
	}
	html body .tz-cart-page .tz-coupon-card {
		grid-column: 1 !important;
		grid-row: 2 !important;
		align-self: start !important;
		margin: 0 !important;
	}
	html body .tz-cart-page .tz-cart-sidebar .cross-sells,
	html body .tz-cart-page .tz-cart-sidebar .tz-related-products {
		grid-column: 1 !important;
		grid-row: 3 !important;
		min-width: 0 !important;
	}
	html body .tz-cart-page .cart_totals.tz-cart-totals,
	html body .tz-cart-page .cart_totals.tz-cart-totals.summary {
		grid-column: 2 !important;
		grid-row: 2 / span 2 !important;
		align-self: start !important;
		margin-top: 0 !important;
		width: 100% !important;
	}
}

/* Proceed to checkout — flat brand red: no shadow, and no hover change. */
html body .tz-cart-page .tz-cart-totals .wc-proceed-to-checkout .checkout-button,
html body .tz-cart-page .tz-cart-totals .wc-proceed-to-checkout a.button,
html body .tz-cart-page .wc-proceed-to-checkout .checkout-button,
html body .tz-cart-page .wc-proceed-to-checkout a.button {
	background-color: #EA191F !important;
	color: #ffffff !important;
	box-shadow: none !important;
}
html body .tz-cart-page .tz-cart-totals .wc-proceed-to-checkout .checkout-button:hover,
html body .tz-cart-page .tz-cart-totals .wc-proceed-to-checkout a.button:hover,
html body .tz-cart-page .tz-cart-totals .wc-proceed-to-checkout .checkout-button:focus,
html body .tz-cart-page .wc-proceed-to-checkout .checkout-button:hover,
html body .tz-cart-page .wc-proceed-to-checkout a.button:hover {
	background-color: #EA191F !important;
	color: #ffffff !important;
	box-shadow: none !important;
	transform: none !important;
}

/* =========================================================================
   Checkout page — container width, Place order button, input borders
   ========================================================================= */

/* Container: 1420px, centred, no side padding — edge-to-edge with the header
   content, same as the cart page. */
html body .tz-checkout-page,
html body.separate-containers .inside-article,
html body.woocommerce-checkout.separate-containers .inside-article {
	max-width: 1420px !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	box-sizing: border-box;
}

/* Place order — flat: no shadow, and no colour / lift change on hover. */
html body .tz-checkout-page #place_order,
html body .tz-checkout-page #payment .place-order button,
html body .tz-checkout-page #payment .place-order .button {
	box-shadow: none !important;
}
html body .tz-checkout-page #place_order:hover,
html body .tz-checkout-page #place_order:focus,
html body .tz-checkout-page #place_order:active,
html body .tz-checkout-page #payment .place-order button:hover,
html body .tz-checkout-page #payment .place-order button:active {
	background-color: #222222 !important;
	box-shadow: none !important;
	transform: none !important;
}

/* Form inputs — light grey border instead of the strong dark one. */
html body .tz-checkout-page .input-text,
html body .tz-checkout-page input[type="text"],
html body .tz-checkout-page input[type="email"],
html body .tz-checkout-page input[type="tel"],
html body .tz-checkout-page input[type="password"],
html body .tz-checkout-page textarea,
html body .tz-checkout-page select,
html body .tz-checkout-page .select2-container--default .select2-selection--single {
	border-color: #d1d5db !important;
}
html body .tz-checkout-page .input-text:hover,
html body .tz-checkout-page textarea:hover {
	border-color: #d1d5db !important;
}

/* Checkout — Billing details card and Order Summary card share the same top
   edge. The "Order Summary" heading now sits inside .tz-order-card, so the
   two cards start at the same y-position. */
html body .tz-checkout-page .tz-checkout-layout {
	align-items: start !important;
}
html body .tz-checkout-page .tz-order-heading-row {
	margin: 0 0 16px;
	padding: 0;
}

/* Checkout — Emirate (billing_state) label sits cleanly above its input at all
   times. Resets any floating-label transform / negative margin so the label
   no longer overlaps the field border in the unfocused state. */
html body .tz-checkout-page #billing_state_field {
	position: relative !important;
	margin-top: 16px !important;
}
html body .tz-checkout-page #billing_state_field label,
html body .tz-checkout-page label[for="billing_state"] {
	display: block !important;
	position: static !important;
	transform: none !important;
	margin: 0 0 6px !important;
	top: auto !important;
	left: auto !important;
	pointer-events: auto;
}

/* Checkout — inner container + grid expand to the full 1420px header width
   (the theme's .container capped them at 1240px). */
html body .tz-checkout-page .container,
html body .tz-checkout-page .tz-checkout-layout {
	max-width: 1420px !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box;
}

/* Checkout order summary — "Shipment" label stays on one line.
   The long shipping-option labels (e.g. "Express Shipping (2 Working Days)")
   were squeezing the first column down to 0px, so the heading broke into
   single letters. Give the th a floor width and let the options column wrap. */
html body .tz-order-card table.shop_table tr.woocommerce-shipping-totals th,
html body .tz-order-card tr.shipping th,
html body .tz-order-card .woocommerce-shipping-totals.shipping th {
	white-space: nowrap !important;
	width: auto !important;
	min-width: 90px !important;
	vertical-align: top !important;
	word-break: normal !important;
	overflow-wrap: normal !important;
	padding-right: 12px !important;
}
html body .tz-order-card .woocommerce-shipping-totals.shipping td {
	vertical-align: top !important;
	text-align: right;
	min-width: 0;
}
html body .tz-order-card .woocommerce-shipping-methods {
	margin: 0;
	padding: 0;
	list-style: none;
}
html body .tz-order-card .woocommerce-shipping-methods li {
	margin: 0 0 6px;
}
html body .tz-order-card .woocommerce-shipping-methods label {
	white-space: normal;
}

/* Checkout order summary — shipping options no longer clipped on the right.
   checkout.css makes each table row a flex row and gives the last cell
   `flex: 0 0 auto`, so the long shipping labels overflow the (overflow:hidden)
   card. Let the cell shrink/grow with the row and let labels wrap. */
html body .tz-order-card table.shop_table {
	table-layout: auto !important;
	width: 100% !important;
}
html body .tz-order-card table.shop_table tr.woocommerce-shipping-totals > td,
html body .tz-order-card table.shop_table tr.shipping > td,
html body .tz-order-card .woocommerce-shipping-totals td {
	/* flex: 1 1 0 !important; */
	width: 62% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	overflow: visible !important;
	text-align: right !important;
}
html body .tz-order-card ul#shipping_method {
	width: 100% !important;
	max-width: 100% !important;
	overflow: visible !important;
	margin: 0;
	padding: 0;
	list-style: none;
}
html body .tz-order-card ul#shipping_method li {
	text-align: right !important;
}
html body .tz-order-card .woocommerce-shipping-totals td label,
html body .tz-order-card ul#shipping_method li label {
	white-space: normal !important;
	text-align: right !important;
	display: inline;
}

/* =========================================================================
   Homepage promo banners — clean 3-column grid of clickable banner images.
   Markup: .tz-promo3-grid > a.tz-promo3-card > img.tz-promo3-img
   (managed in Appearance > Customize > Promo Cards; see inc/promo-cards.php)
   ========================================================================= */
.tz-promo3-section {
	padding: 0;
}
.tz-promo3-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 24px 0;
}
.tz-promo3-card {
	display: block;
	line-height: 0;
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none !important;
}
.tz-promo3-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 1;
	object-fit: cover;
	border-radius: 8px;
	transition: transform .25s ease;
}
.tz-promo3-card:hover .tz-promo3-img {
	transform: scale(1.03);
}
/* Placeholder shown when a slot has no banner uploaded */
.tz-promo3-card--placeholder {
	background: #f1f1f1;
}
.tz-promo3-card--placeholder .tz-promo3-img {
	background: #f1f1f1;
}
@media (max-width: 768px) {
	.tz-promo3-grid {
		grid-template-columns: 1fr;
	}
}