/* Manual overrides layered on top of the theme's style.min.css. Keep this
   file small and hand-written — never overwritten by a theme rebuild. */

/* Make the fixed mobile Profile tab visibly reflect an authenticated session. */
.rbt-toolbar--bottom .storefront-toolbar-profile-link--authenticated {
    position: relative;
}
.rbt-toolbar--bottom .storefront-toolbar-profile-link--authenticated::after {
    position: absolute;
    top: 5px;
    left: calc(50% + 7px);
    width: 9px;
    height: 9px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #218838;
    content: "";
}

/* Category cards (home-categories.php, category grids) use source images
   of wildly different aspect ratios (500x500, 1536x1024, 810x1080...).
   Force every card to the same box and crop instead of stretch. */
.rbt-cat-box .rbt-image-portion {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius, 6px);
}

.rbt-cat-box .rbt-image-portion img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Header category cards keep the parent and its children in one visual unit. */
.storefront-category-mega .rbt-megamenu-wrapper {
    max-height: min(76vh, 760px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.storefront-category-mega .home-plesentation-wrapper {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 205px;
    grid-auto-flow: row dense;
    gap: 18px;
    margin-left: 0;
    margin-right: 0;
}
.storefront-category-mega .home-plesentation-wrapper.storefront-mega-grid--leaf-only {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.storefront-category-mega .single-mega-item {
    display: flex;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0;
}
.storefront-category-mega .storefront-mega-item--with-children {
    grid-row: span 2;
}
.storefront-mega-card {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e9e9ed;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 22px rgba(22, 28, 45, .06);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.storefront-mega-card:hover,
.storefront-mega-card:focus-within {
    border-color: #d0d0d8;
    box-shadow: 0 9px 28px rgba(22, 28, 45, .1);
}
.storefront-mega-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 200px;
    flex: 0 0 200px;
    padding: 12px 16px;
    overflow: hidden;
    background: #fafafa;
}
.storefront-mega-item--compact .storefront-mega-card__media {
    height: 145px;
    flex-basis: 145px;
}
.storefront-mega-item--compact .storefront-mega-card__body {
    flex: 0 0 auto;
    padding: 10px 14px 12px;
}
.storefront-mega-item--compact .storefront-mega-card__title {
    font-size: 15px;
}
.storefront-category-mega .storefront-mega-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.storefront-mega-card__placeholder {
    font-size: 32px;
    color: #a0a0aa;
}
.storefront-mega-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 14px 16px 16px;
}
.storefront-mega-item--with-children .storefront-mega-card__body {
    padding: 0;
    background: #f8f7f7;
    background: color-mix(in srgb, var(--color-primary, #b45151) 5%, white);
}
.storefront-mega-item--with-children .storefront-mega-card__title {
    padding: 14px 16px 12px;
    background: #fff;
}
.storefront-mega-card__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
}
.storefront-mega-card__title a {
    color: #1e2028;
}
.storefront-mega-card__title a:hover,
.storefront-mega-card__title a:focus-visible,
.storefront-mega-card__all:hover,
.storefront-mega-card__all:focus-visible {
    color: var(--color-primary, #b45151);
}
.storefront-mega-card__all {
    display: inline-flex;
    align-self: flex-start;
    gap: 5px;
    margin-top: auto;
    padding-top: 12px;
    font-size: 12px;
    font-weight: 700;
    color: #555965;
}
.storefront-mega-item--with-children .storefront-mega-card__all {
    align-self: stretch;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding: 11px 16px 13px;
    border-top: 1px solid rgba(30, 32, 40, .08);
    color: var(--color-primary, #b45151);
}
.storefront-mega-item--with-children .storefront-mega-card__all:hover,
.storefront-mega-item--with-children .storefront-mega-card__all:focus-visible {
    background: rgba(255, 255, 255, .55);
}
@media (max-width: 1199px) {
    .storefront-category-mega .home-plesentation-wrapper,
    .storefront-category-mega .home-plesentation-wrapper.storefront-mega-grid--leaf-only {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 767px) {
    .storefront-category-mega .home-plesentation-wrapper,
    .storefront-category-mega .home-plesentation-wrapper.storefront-mega-grid--leaf-only {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 575px) {
    .storefront-category-mega .home-plesentation-wrapper,
    .storefront-category-mega .home-plesentation-wrapper.storefront-mega-grid--leaf-only {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
    }
    .storefront-category-mega .storefront-mega-item--with-children {
        grid-row: auto;
    }
    .storefront-mega-item--compact .storefront-mega-card__media {
        height: 165px;
        flex-basis: 165px;
    }
}

/* Contact page: keep feedback below the shared header and give the form
   breathing room so its decorative top edge does not touch the navigation. */
.contact-page-component {
    padding-top: 32px;
}

.storefront-contact-flashes {
    margin-bottom: 24px;
}

.storefront-contact-flashes .alert {
    margin-bottom: 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 14px 18px;
}

.storefront-contact-flashes .alert:last-child {
    margin-bottom: 0;
}

.storefront-contact-flashes .alert-success {
    border-color: #b7e5bb;
    background: #effaf0;
    color: #226b2a;
}

.storefront-contact-flashes .alert-danger {
    border-color: #f1b8b8;
    background: #fff2f2;
    color: #9b2525;
}

/* Keep mobile navigation and account links together inside the scrollable drawer. */
.popup-mobile-menu .inner-wrapper {
    justify-content: flex-start;
}

.popup-mobile-menu .mobile-menu-bottom {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.popup-mobile-menu .storefront-mobile-account-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.popup-mobile-menu .storefront-mobile-account-links li a {
    display: block;
    padding: 8px 6px;
    color: var(--color-heading);
}

.popup-mobile-menu .storefront-mobile-account-links li a:hover,
.popup-mobile-menu .storefront-mobile-account-links li a:focus-visible {
    color: var(--color-primary);
}

.popup-mobile-menu .storefront-mobile-utility-links {
    margin-top: 12px;
}

.popup-mobile-menu .storefront-mobile-category > summary {
    position: relative;
    display: block;
    padding: 8px 30px 8px 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    list-style: none;
}

.popup-mobile-menu .storefront-mobile-category > summary::-webkit-details-marker {
    display: none;
}

.popup-mobile-menu .storefront-mobile-category > summary::after {
    position: absolute;
    right: 6px;
    content: '+';
}

.popup-mobile-menu .storefront-mobile-category[open] > summary::after {
    content: '−';
}

.popup-mobile-menu .storefront-mobile-category__children {
    margin: 0 0 8px 12px;
    padding: 0 0 0 12px;
    border-left: 2px solid var(--color-border);
    list-style: none;
}

.popup-mobile-menu .mainmenu .storefront-mobile-category__children li {
    border: 0;
}

.popup-mobile-menu .mainmenu .storefront-mobile-category__children li a {
    padding: 7px 8px;
    font-size: 14px;
}

/* Keep the mobile drawer inside the viewport at browser zoom and on narrow
   phones. The theme's fixed 300px width plus padding can otherwise create a
   horizontally clipped drawer. */
@media (max-width: 1199px) {
    .popup-mobile-menu {
        width: 100%;
        max-width: 100vw;
        overflow: hidden;
    }

    .popup-mobile-menu .inner-wrapper {
        box-sizing: border-box;
        width: min(400px, calc(100vw - 16px));
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
        overflow-x: hidden;
        overscroll-behavior: contain;
    }

    .popup-mobile-menu.active .inner-wrapper {
        left: 0;
    }

    .popup-mobile-menu .rbt-inner-search-field {
        width: 100%;
        max-width: none;
    }

    .popup-mobile-menu .rbt-inner-search-field form {
        position: relative;
        display: block;
        width: 100%;
        min-width: 0;
    }

    .popup-mobile-menu .rbt-inner-search-field form input {
        box-sizing: border-box;
        display: block;
        width: 100%;
        min-width: 0;
        padding-right: 52px;
    }

    .popup-mobile-menu .rbt-inner-search-field form button {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        line-height: 1;
    }

    .popup-mobile-menu .mainmenu {
        padding: 8px 0;
    }

    .popup-mobile-menu .mainmenu li a {
        padding: 8px 6px;
        line-height: 1.4;
    }
}

/* Shop result search uses the template's integrated rounded search control,
   rather than a field followed by a detached square submit button. */
.storefront-shop-search {
    width: 100%;
}

.storefront-shop-search input[type="search"] {
    width: 100%;
}

/* Managed homepage slider. Graphics stay legible while the editable copy and
   action remain accessible against every uploaded image. */
.storefront-home-slider { padding: 32px 0 16px; }
.storefront-home-slide { position: relative; min-height: 460px; overflow: hidden; border-radius: 24px; background: var(--color-gray-900, #222); }
.storefront-home-slide > img { width: 100%; height: 460px; object-fit: cover; display: block; }
.storefront-home-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.28) 48%, rgba(0,0,0,.04) 100%); pointer-events: none; }
.storefront-home-slide__overlay { position: absolute; z-index: 1; top: 50%; left: clamp(24px, 7vw, 96px); max-width: min(470px, 72%); color: var(--color-white); transform: translateY(-50%); }
.storefront-home-slide__overlay p { margin-bottom: 24px; color: inherit; font-size: clamp(24px, 3vw, 46px); font-weight: var(--f-bold); line-height: 1.14; }
.storefront-home-slider-pagination { position: absolute; z-index: 2; right: 30px; bottom: 24px; left: auto; width: auto !important; }
.storefront-home-slider-pagination .swiper-pagination-bullet { background: var(--color-white); opacity: .55; }
.storefront-home-slider-pagination .swiper-pagination-bullet-active { width: 22px; border-radius: 999px; opacity: 1; }
@media (max-width: 767px) { .storefront-home-slider { padding: 16px 0 8px; } .storefront-home-slide, .storefront-home-slide > img { min-height: 360px; height: 360px; border-radius: 16px; } .storefront-home-slide::after { background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.22)); } .storefront-home-slide__overlay { left: 24px; max-width: calc(100% - 48px); } .storefront-home-slide__overlay p { font-size: 28px; } }

/* A sale price and its crossed-out original price can be wider than a card.
   Keep each amount intact and move the original price onto the next line
   when the pair does not fit. */
.rbt-product-card .pricing-part {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 2px;
}

.rbt-product-card .pricing-part .price-text {
    display: block;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.rbt-product-card .pricing-part .price-text.ml--4 {
    margin-left: 0;
}

/* Sale prices stay inside narrow cards, with the original price above the
   current price instead of competing for horizontal space. */
.rbt-product-card .pricing-part del.price-text {
    order: -1;
    font-size: .82em;
    color: var(--color-gray-400, #888);
}

.rbt-product-card .rbt-card-body-center-align .pricing-part {
    align-items: center;
}

.sfc-card-price {
    width: 100%;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.sfc-card-price > * {
    max-width: 100%;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.sfc-card-price .sfc-price-was {
    order: -1;
}

/* Keep these overrides more specific than the template's card-price rules,
   including its mobile/category-layout flex-wrap declarations. */
.rbt-product-card .rbt-card-body .pricing-part {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 2px;
}

.rbt-product-card .rbt-card-body .pricing-part > .price-text {
    display: block;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.rbt-product-card .rbt-card-body .pricing-part > del.price-text {
    order: -1;
    font-size: .82em;
    color: var(--color-gray-400, #888);
}

.sfc-card .sfc-card-body .sfc-card-price {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 2px;
}

.sfc-card .sfc-card-body .sfc-card-price > * {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.sfc-card .sfc-card-body .sfc-card-price > .sfc-price-was {
    order: -1;
    font-size: .82em;
}

/* Homepage categories render in complete groups of five. Additional groups
   get their own rhythm instead of being hidden in a carousel or clipped. */
.storefront-home-category-row--next {
    margin-top: 24px;
}

/* Product cards (home-products.php, home-product-grid.php, shop.php) —
   same source-image inconsistency, same fix. */
.rbt-product-card .rbt-card-img {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: block;
}

.rbt-product-card .rbt-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.rbt-product-card .rbt-card-img > a {
    display: block;
    width: 100%;
    height: 100%;
}

.rbt-product-card .rbt-card-img > a img {
    display: block;
}

.storefront-quick-view-inner { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; padding:32px; position:relative; }
.storefront-quick-view-close { position:absolute; right:16px; top:16px; z-index:2; }
.storefront-quick-view-main-image { aspect-ratio:1/1; border-radius:16px; overflow:hidden; background:#f5f5f5; }
.storefront-quick-view-main-image img { width:100%; height:100%; object-fit:cover; display:block; }
.storefront-quick-view-gallery { display:flex; gap:8px; margin-top:12px; overflow:auto; }
.storefront-quick-view-thumb { width:64px; height:64px; padding:3px; border:1px solid #e5e5e5; border-radius:8px; background:#fff; flex:0 0 auto; }
.storefront-quick-view-thumb.is-active { border-color:var(--color-primary,#a92364); }
.storefront-quick-view-thumb img { width:100%; height:100%; object-fit:cover; border-radius:5px; }
.storefront-quick-view-description { color:var(--color-gray-600,#555); margin-top:16px; }
.storefront-quick-view-price { font-size:22px; margin:20px 0; display:flex; gap:10px; align-items:center; }
.storefront-quick-view-price del { color:#888; font-size:16px; }
.storefront-quick-view-option { display:block; font-weight:600; margin-bottom:16px; }
.storefront-quick-view-option select { display:block; width:100%; margin-top:8px; padding:12px; border:1px solid #ddd; border-radius:8px; }
.storefront-quick-view-option .bootstrap-select { display:block; width:100% !important; margin-top:8px; }
.storefront-quick-view-option .bootstrap-select > .dropdown-toggle { min-height:42px; padding:9px 14px; border:1px solid #ddd; border-radius:8px; background:#fff; color:#333; font-size:14px; box-shadow:none; }
.storefront-quick-view-option .bootstrap-select > .dropdown-toggle:focus { outline:0; border-color:var(--color-primary,#a92364); box-shadow:0 0 0 3px rgba(169,35,100,.12); }
.storefront-quick-view-option .bootstrap-select .dropdown-menu { max-height:230px; min-width:100%; margin:0 !important; padding:0 !important; border:1px solid #e5e5e5; border-radius:8px; box-shadow:0 10px 24px rgba(0,0,0,.12); }
.storefront-quick-view-option .bootstrap-select .dropdown-menu.inner,
.storefront-quick-view-option .bootstrap-select .dropdown-menu.inner ul { max-height:230px !important; height:auto !important; margin:0 !important; padding:0 !important; overflow-y:auto; }
.storefront-quick-view-option .bootstrap-select .dropdown-menu.inner li { height:auto !important; min-height:0 !important; margin:0 !important; padding:0 !important; line-height:normal !important; }
.storefront-quick-view-option .bootstrap-select .dropdown-menu.inner li a,
.storefront-quick-view-option .bootstrap-select .dropdown-item { display:block; height:auto !important; min-height:0 !important; margin:0 !important; padding:8px 12px !important; font-size:14px; line-height:1.4 !important; white-space:nowrap; }
.storefront-quick-view-stock { font-weight:600; color:#188038; }
.storefront-quick-view-stock.is-unavailable { color:#c62828; }
.storefront-quick-view-info .rbt-info-wrapper { margin-bottom:16px; }
.storefront-quick-view-info .product-styles-grp { width:100%; }
.storefront-quick-view-info .product-styles-grp .title { margin-bottom:12px; }
.storefront-quick-view-info .storefront-quick-view-stock { margin:0; }
.storefront-quick-view-cart-row { display:flex; gap:12px; margin-top:16px; }
.storefront-quick-view-cart-row input { width:90px; border:1px solid #ddd; border-radius:8px; padding:12px; }
.storefront-product-media--single {
    width: 100% !important;
    min-height: 420px;
    display: block !important;
}
/* The theme hides radio inputs and expects separate sibling labels. Checkout
   uses clickable cards, so give their checked state a visible treatment. */
.storefront-fulfillment-choice {
    display: block;
    margin: 0;
    cursor: pointer;
}
.storefront-fulfillment-choice > span {
    display: flex;
    align-items: center;
    min-height: 64px;
    padding: 14px 18px;
    border: 2px solid #dfe3e8;
    border-radius: 8px;
    background: #fff;
    color: var(--color-heading, #171717);
    font-weight: 600;
    transition: border-color .2s ease, background-color .2s ease;
}
.storefront-fulfillment-choice input:checked + span {
    border-color: var(--color-primary, #a92364);
    background: color-mix(in srgb, var(--color-primary, #a92364) 8%, white);
}
.storefront-fulfillment-choice input:focus-visible + span {
    outline: 3px solid var(--color-primary, #a92364);
    outline-offset: 2px;
}
.storefront-delivery-rate {
    min-height: 64px;
    cursor: pointer;
    background: #fff;
}
.storefront-delivery-rate:has(input:checked) {
    border-color: var(--color-primary, #a92364) !important;
    background: color-mix(in srgb, var(--color-primary, #a92364) 6%, white);
}
.storefront-delivery-rate:has(input:focus-visible) {
    outline: 3px solid var(--color-primary, #a92364);
    outline-offset: 2px;
}
/* Product photos are rectangular assets, not the theme's decorative folder
   cutouts. Keep the entire item visible in both the main slide and thumbs. */
.storefront-product-media--gallery .product-single-slider-two-activation {
    width: 100%;
    background: #fff;
}
.storefront-product-media--gallery .product-single-slider-two-activation .rbt-product-single-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #fff;
}
.storefront-product-media--gallery .product-single-slider-two-activation .rbt-product-single-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.storefront-product-media--gallery .product-single-slider-two-activation .storefront-product-video {
    background: #111;
}
.storefront-product-media--gallery .storefront-product-video iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}
.storefront-product-video-thumb .rbt-thumb-img-sm {
    position: relative;
}
.storefront-product-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #d22;
    color: #fff;
    font-size: 15px;
    line-height: 1;
    box-shadow: 0 2px 12px #0005;
}
.storefront-product-media--gallery .product-single-slider-two-thumb-activation .swiper-slide button {
    display: block;
    width: 100%;
    padding: 3px;
    border: 2px solid transparent;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}
.storefront-product-media--gallery .product-single-slider-two-thumb-activation .swiper-slide-thumb-active button,
.storefront-product-media--gallery .product-single-slider-two-thumb-activation .swiper-slide button:focus-visible {
    border-color: var(--color-primary, #a92364);
}
.storefront-product-media--gallery .product-single-slider-two-thumb-activation .rbt-thumb-img-sm {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 5px;
    background: #fff;
}
.storefront-product-media--gallery .product-single-slider-two-thumb-activation .rbt-thumb-img-sm img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.storefront-product-single-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 1 !important;
    visibility: visible !important;
}
.storefront-product-single-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}
@media (max-width:767px) {
    .storefront-quick-view-inner { grid-template-columns:1fr; padding:24px 16px; }
    .storefront-quick-view-info .rbt-info-wrapper { margin-top:24px !important; margin-bottom:20px; }
    .storefront-quick-view-info .storefront-quick-view-stock { margin-top:0; }
    .storefront-quick-view-info .rbt-color-select-area .rbt-switcher-color-list.rbt-switcher-color-list-lg {
        gap:10px;
    }
    .storefront-quick-view-info .rbt-color-select-area .rbt-switcher-color-list.rbt-switcher-color-list-lg li .rbt-switcher--color {
        width:32px !important;
        height:32px !important;
        display:flex;
        align-items:center;
        justify-content:center;
    }
    .storefront-quick-view-info .rbt-color-select-area .rbt-switcher-color-list.rbt-switcher-color-list-lg li .rbt-switcher--color::after {
        width:28px !important;
        height:28px !important;
    }
    .storefront-quick-view-info .rbt-color-select-area .rbt-switcher-color-list.rbt-switcher-color-list-lg li .rbt-switcher--color .rbt-color-circle {
        width:24px !important;
        height:24px !important;
    }
}

/* Homepage category strip: categories are a static, selectable list. The
   original template's endless ticker duplicated every category and applied
   a five-second animation, which made it hard to scan and click. */
.storefront-category-row {
    background: var(--color-gray-light);
}

.storefront-category-row .rbt-category-list {
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px 44px;
    padding: 0 24px;
}

@media only screen and (max-width: 767px) {
    .storefront-category-row .rbt-category-list {
        justify-content: flex-start;
        gap: 14px 20px;
        padding: 0 16px;
    }
}

/* ==========================================================================
   Homepage "Best of <Category>" rows — includes/home-category-rows.php

   Every row used to be the same five-across grid, so the page read as one
   block repeated seven times. Variety now comes from LAYOUT, not colour:
   three archetypes rotate (spotlight / showcase / strip) on one white
   surface. Scale and rhythm do the work a background swap cannot.
   ========================================================================== */

.sfc-row {
    --sfc-gap: 20px;
    --sfc-radius: 16px;
    --sfc-line: var(--color-border, #f3f3f3);
    --sfc-muted: var(--color-body, #737373);
}

.sfc-row--next {
    margin-top: 88px;
}

/* Alternating rows get a distinct surface so the page doesn't read as one
   long unbroken white block once several categories are stacked. Negative
   margin cancels the container's own gutter so the tinted panel still
   lines up edge-to-edge with the container's boxed width, not narrower. */
.sfc-row--alt {
    background: var(--color-gray-light, #f7f7f7);
    border-radius: var(--sfc-radius);
    margin-right: calc(-1 * var(--bs-gutter-x, .75rem));
    margin-left: calc(-1 * var(--bs-gutter-x, .75rem));
    padding: clamp(16px, 2vw, 32px) var(--bs-gutter-x, .75rem);
}

/* -------------------------------------------------------------- row header */
.sfc-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 40px;
    padding-bottom: 20px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--sfc-line);
}

.sfc-head-text { min-width: 0; }

/* Numbered eyebrow gives each row a sense of place in a sequence. */
.sfc-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    color: var(--sfc-muted);
    font-size: 12px;
    font-weight: var(--f-semi-bold, 600);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.sfc-eyebrow-rule {
    width: 28px;
    height: 2px;
    background: var(--color-primary, #215ada);
    flex: 0 0 auto;
}

.sfc-title {
    margin: 0;
    font-size: clamp(24px, 2.4vw, 34px);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.sfc-title-strong { font-weight: var(--f-bold, 700); }

.sfc-desc {
    margin: 10px 0 0;
    max-width: 58ch;
    color: var(--sfc-muted);
    font-size: 14px;
    line-height: 1.65;
}

.sfc-head-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 0 0 auto;
}

.sfc-pill {
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: var(--f-semi-bold, 600);
    white-space: nowrap;
}

.sfc-pill--sale {
    background: var(--color-light-green, #e5fae5);
    color: #1b7f1c;
}

.sfc-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-size: 14px;
    font-weight: var(--f-semi-bold, 600);
    color: var(--color-heading, #000);
}

.sfc-link i { transition: transform 0.25s ease; }
.sfc-link:hover { color: var(--color-primary, #215ada); }
.sfc-link:hover i { transform: translateX(4px); }

.sfc-link-count {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--color-gray-100, #f3f3f3);
    color: var(--sfc-muted);
    font-size: 12px;
    font-weight: var(--f-medium, 500);
}

/* ------------------------------------------------------------------ grids */
.sfc-grid { display: grid; gap: var(--sfc-gap); }

/* 1. spotlight — one tall editorial tile + a product grid beside it. */
.sfc-grid--spotlight { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.95fr); }

/* 2. showcase — balanced 3x2 product grid + category panel on the right. */
.sfc-grid--showcase {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.sfc-grid--showcase .sfc-panel { order: 2; }
.sfc-grid--showcase .sfc-rest {
    order: 1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* 3. reverse — retained as a separate content pattern so the server can
      vary the section class without changing the visual banner direction. */
.sfc-grid--reverse { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.sfc-grid--reverse .sfc-panel { order: 2; }
.sfc-grid--reverse .sfc-rest {
    order: 1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Design B: a featured product banner on the left with a 3-by-2 product grid. */
.sfc-grid--panel-left {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
.sfc-grid--panel-left .sfc-panel { order: 1; }
.sfc-grid--panel-left .sfc-rest {
    order: 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Design D: a centered category panel with two product cards on the left
   and a two-by-two product grid on the right. */
.sfc-grid--category-middle {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, 2fr);
    align-items: stretch;
}

.sfc-middle-side {
    display: grid;
    gap: var(--sfc-gap);
    min-width: 0;
}

.sfc-middle-side--left {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.sfc-middle-side--right {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.sfc-middle-panel {
    min-height: 100%;
}

.sfc-rest {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sfc-gap);
}

/* 4. strip — compact six-across where the viewport permits it. */
.sfc-grid--strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* ------------------------------------------------------------------ cards */
.sfc-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--sfc-line);
    border-radius: var(--sfc-radius);
    background: #fff;
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.sfc-card:hover {
    border-color: transparent;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.1);
    transform: translateY(-3px);
}

.sfc-card-media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-gray-100, #f3f3f3);
}

/* The <img> sits inside an <a> wrapper. The theme gives that link
   `display:block` with no height, so `height:100%` on the image had nothing
   to resolve against — the image kept its natural aspect ratio and the
   media box's grey background showed through below it. The link has to
   fill the box before the image can. */
.sfc-card-media-link {
    display: block;
    width: 100%;
    height: 100%;
}

.sfc-card-media img,
.sfc-card-media .sfc-card-media-link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease;
}

.sfc-card:hover .sfc-card-media img { transform: scale(1.05); }

/* The theme's .rbt-quick-btn-grp is `position:static`, which beats
   .bottom-right--position's `absolute` (same specificity, later in the
   sheet). The button group therefore sat in normal flow INSIDE the media
   box and added its own height below the image — the second, larger grey
   band. Float it over the image where it belongs. */
.sfc-card-media .rbt-quick-btn-grp {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 3;
}

/* The hero tile is the anchor of a spotlight row: taller image, more copy. */
/* The hero stretches to the height of the 2x2 block beside it. The EXTRA
   height must go to the image, not the text: letting the body stretch left
   a large dead gap between the summary and the price, because three short
   lines cannot fill 600px and margin-top:auto sank the price to the floor. */
.sfc-card--hero { height: 100%; }

.sfc-card--hero .sfc-card-media {
    aspect-ratio: auto;   /* release the 4/3 cap so the image can grow */
    flex: 1 1 auto;
    min-height: 260px;
}

.sfc-card--hero .sfc-card-body {
    flex: 0 0 auto;       /* body takes only the height its content needs */
    padding: 22px 22px 24px;
    gap: 10px;
}

/* With the body no longer stretched there is no gap to push against, so the
   price sits directly under the copy instead of being forced to the bottom. */
.sfc-card--hero .sfc-card-price { margin-top: 4px; }

.sfc-card--hero .sfc-card-title { font-size: 20px; }

.sfc-card-body {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 16px 16px 18px;
    flex: 1 1 auto;
}

.sfc-card-brand {
    margin: 0;
    color: var(--sfc-muted);
    font-size: 11px;
    font-weight: var(--f-semi-bold, 600);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sfc-card-title {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    font-weight: var(--f-semi-bold, 600);
}

.sfc-card-title a { color: inherit; }
.sfc-card-title a:hover { color: var(--color-primary, #215ada); }

.sfc-card-blurb {
    margin: 0;
    color: var(--sfc-muted);
    font-size: 13px;
    line-height: 1.6;
}

.sfc-card-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 0;
    margin-top: auto; /* prices align across a row of uneven titles */
}

.sfc-price-now {
    font-size: 16px;
    font-weight: var(--f-bold, 700);
    color: var(--color-heading, #000);
}

.sfc-price-was {
    color: var(--color-gray-400, #888);
    font-size: 13px;
}

.sfc-price-save {
    color: #1b7f1c;
    font-size: 12px;
    font-weight: var(--f-semi-bold, 600);
}

.sfc-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    align-self: flex-start;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--color-heading, #000);
    color: #fff;
    font-size: 13px;
    font-weight: var(--f-semi-bold, 600);
}

.sfc-cta:hover { background: var(--color-primary, #215ada); color: #fff; }

/* ------------------------------------------------------------------ flags */
.sfc-flag {
    position: absolute;
    top: 12px;
    z-index: 2;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: var(--f-bold, 700);
    letter-spacing: 0.02em;
}

.sfc-flag--sale { left: 12px; background: #1b7f1c; color: #fff; }

.sfc-flag--low {
    right: 12px;
    background: rgba(255, 255, 255, 0.94);
    color: #b4310f;
}

/* ------------------------------------------------- showcase category panel */
.sfc-panel {
    position: relative;
    display: flex;
    min-height: 100%;
    border-radius: var(--sfc-radius);
    overflow: hidden;
    background: var(--color-heading, #111) var(--sfc-panel-img, none) center / cover no-repeat;
    isolation: isolate;
}

/* Scrim so the copy stays readable over any category photograph. */
.sfc-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.82) 100%);
}

.sfc-panel-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 10px;
    padding: 28px 26px;
    width: 100%;
    color: #fff;
}

.sfc-panel-kicker {
    margin: 0;
    font-size: 12px;
    font-weight: var(--f-semi-bold, 600);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.85;
}

.sfc-panel-title {
    margin: 0;
    color: #fff;
    font-size: clamp(22px, 2vw, 30px);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.sfc-panel-copy {
    margin: 0;
    max-width: 34ch;
    font-size: 13px;
    line-height: 1.65;
    opacity: 0.88;
}

.sfc-panel-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    color: #fff;
    font-size: 17px;
    font-weight: var(--f-bold, 700);
}

.sfc-panel-price del {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: var(--f-medium, 500);
}

.sfc-panel-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 11px 20px;
    border-radius: 999px;
    background: #fff;
    color: var(--color-heading, #000);
    font-size: 13px;
    font-weight: var(--f-semi-bold, 600);
}

.sfc-panel-cta i { transition: transform 0.25s ease; }
.sfc-panel-cta:hover { background: var(--color-primary, #215ada); color: #fff; }
.sfc-panel-cta:hover i { transform: translateX(4px); }

/* ------------------------------------------------------------ responsive */
@media only screen and (max-width: 1199px) {
    .sfc-grid--strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* Beyond three, a fourth strip card is narrower than its own price row. */
}

@media only screen and (max-width: 991px) {
    /* Stack long-banner layouts before their 3x2 product cells become too small. */
    .sfc-grid--spotlight,
    .sfc-grid--showcase,
    .sfc-grid--reverse,
    .sfc-grid--panel-left,
    .sfc-grid--category-middle { grid-template-columns: minmax(0, 1fr); }
    .sfc-grid--showcase .sfc-panel,
    .sfc-grid--showcase .sfc-rest,
    .sfc-grid--reverse .sfc-panel,
    .sfc-grid--reverse .sfc-rest,
    .sfc-grid--panel-left .sfc-panel,
    .sfc-grid--panel-left .sfc-rest,
    .sfc-grid--category-middle .sfc-middle-panel,
    .sfc-grid--category-middle .sfc-middle-side { order: initial; }
    .sfc-grid--category-middle .sfc-middle-panel { order: 1; }
    .sfc-grid--category-middle .sfc-middle-side { order: 2; }
    /* The theme enters its mobile header/layout at 991px. Keep the two
       product cards in each Design 4 side group on the same row at that
       breakpoint instead of inheriting the desktop left-side stack. */
    .sfc-grid--category-middle .sfc-middle-side--left,
    .sfc-grid--category-middle .sfc-middle-side--right {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
    }
    .sfc-grid--category-middle .sfc-card-body {
        padding: 12px 10px 12px;
        gap: 5px;
    }
    .sfc-grid--category-middle .sfc-card-title {
        font-size: 14px;
        line-height: 1.3;
    }
    .sfc-grid--category-middle .sfc-card-price {
        flex-wrap: wrap;
        gap: 4px;
        font-size: 14px;
    }
    .sfc-panel { min-height: 240px; }
    .sfc-row--next { margin-top: 64px; }
}

@media only screen and (max-width: 767px) {
    .sfc-row { --sfc-gap: 14px; }
    .sfc-grid--strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Top Selling is a Bootstrap row rather than the homepage swiper. Keep
       its product columns at two cards per row on mobile. */
    .sfc-top-selling-grid > [class*="col-"] {
        flex: 0 0 50%;
        width: 50%;
        max-width: 50%;
    }
    .sfc-top-selling-grid .rbt-card-body {
        padding: 12px 10px;
    }
    .sfc-top-selling-grid .rbt-card-title {
        font-size: 14px;
        line-height: 1.3;
    }
    .sfc-top-selling-grid .price-text {
        font-size: 14px;
    }
    /* Design 4 keeps its two-left / featured-middle / four-right rhythm on
       mobile. The product cards must stay compact and side by side; only the
       editorial panel occupies the full row. */
    .sfc-grid--category-middle .sfc-middle-side--left,
    .sfc-grid--category-middle .sfc-middle-side--right {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
    }
    .sfc-grid--category-middle .sfc-card-body {
        padding: 12px 10px 12px;
        gap: 5px;
    }
    .sfc-grid--category-middle .sfc-card-title {
        font-size: 14px;
        line-height: 1.3;
    }
    .sfc-grid--category-middle .sfc-card-price {
        flex-wrap: wrap;
        gap: 4px;
        font-size: 14px;
    }
    .sfc-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 20px;
    }
    .sfc-row--next { margin-top: 52px; }
    .sfc-card--hero .sfc-card-media { aspect-ratio: 3 / 2; }
}

@media only screen and (max-width: 479px) {
    .sfc-rest,
    .sfc-grid--strip { grid-template-columns: minmax(0, 1fr); }
    /* Every homepage product layout keeps two compact cards per mobile row.
       This includes the showcase and panel layouts, whose generic narrow
       rule would otherwise collapse the product grid to one card. */
    .sfc-grid--showcase .sfc-rest,
    .sfc-grid--reverse .sfc-rest,
    .sfc-grid--panel-left .sfc-rest {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* Do not let the generic narrow-screen rule turn Design 4 into a
       one-card-per-row catalogue. Two compact cards are the intended mobile
       presentation for this design. */
    .sfc-grid--category-middle .sfc-middle-side--left,
    .sfc-grid--category-middle .sfc-middle-side--right {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sfc-grid--category-middle .sfc-card-media {
        aspect-ratio: 1 / 1;
    }
    .sfc-grid--category-middle .sfc-card-actions-footer .rbt-btn {
        padding-left: 6px;
        padding-right: 6px;
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sfc-card,
    .sfc-card-media img,
    .sfc-link i,
    .sfc-panel-cta i { transition: none; }
    .sfc-card:hover { transform: none; }
    .sfc-card:hover .sfc-card-media img { transform: none; }
}

/* Product page stock states (includes/product-detail.php). An out-of-stock
   product used to render a live Add to cart button; the API rejected it with
   422, so the shopper only learned after clicking. */
.storefront-stock-note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--f-medium, 500);
}

.storefront-stock-note--out {
    padding: 12px 16px;
    border-radius: var(--radius-md, 8px);
    background: #fdecea;
    color: #a3231a;
}

.storefront-stock-note--low { color: #b4310f; }

/* The theme's .rbt-btn has no disabled treatment of its own. */
.rbt-btn[disabled],
.rbt-btn[aria-disabled="true"] {
    background: var(--color-gray-200, #e6e6e6) !important;
    border-color: var(--color-gray-200, #e6e6e6) !important;
    color: var(--color-gray-400, #888) !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* Track Your Order form (track-order.php). The theme styles .form-control but
   ships no rule for a label inside .form-group, so the label sat flush on the
   input. The submit button is .rbt-btn-md (40px) while inputs are 50px, so it
   also needed matching height to share the fields' baseline. */
.track-order-form .form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: var(--f-medium, 500);
    color: var(--color-heading, #000);
}

.track-order-form .form-control { height: 50px; }

/* Checkout uses the original template's compact field rhythm. The business
   form has more fields than the static demo, but it should not inherit the
   oversized Bootstrap large controls. */
.storefront-checkout-form .form-control-lg,
.storefront-checkout-form .form-control {
    min-height: 48px;
    height: 48px;
    padding: 10px 14px;
    font-size: 16px;
    border-radius: 4px;
}

.storefront-checkout-form .form-label {
    margin-bottom: 7px;
    font-size: 15px;
}

.storefront-checkout-coupon-row {
    align-items: stretch;
}

.storefront-checkout-coupon-row .form-control {
    min-width: 0;
}

.storefront-checkout-coupon-row .rbt-btn.rbt-btn-sm {
    flex: 0 0 auto;
    height: 50px;
    line-height: 50px;
    min-width: 96px;
    white-space: nowrap;
}

.storefront-checkout-variant {
    color: var(--color-gray-500);
    font-size: 13px;
    line-height: 1.35;
    margin: 2px 0;
}

/* Checkout payment selection: keep the section softly ash-toned while each
   method remains a compact, readable white card. */
.storefront-payment-section {
    background: #f4f4f4;
    border-radius: 6px;
}

.storefront-payment-methods {
    margin-top: 8px;
}

/* Bootstrap hides .btn-check with clip:rect(0,0,0,0) but leaves its box
   intact, so the native radio still painted next to our styled one — two
   circles per option. Collapse it properly. */
.storefront-payment-methods .btn-check {
    position: absolute;
    left: -10000px !important;
    top: auto !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap;
    border: 0;
    pointer-events: none;
    opacity: 0 !important;
    appearance: none;
    -webkit-appearance: none;
}

/* Keyboard users still need to see which option has focus. */
.storefront-payment-methods .btn-check:focus-visible + .storefront-payment-method {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.storefront-payment-method {
    min-height: 64px;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 12px;
    padding: 16px 18px !important;
    border: 1px solid #d7d7d7 !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: var(--color-gray-700) !important;
    font-size: 16px;
    font-weight: 600;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.storefront-payment-method:hover {
    border-color: var(--color-primary) !important;
    background: #fff !important;
}

.storefront-payment-methods .btn-check:checked + .storefront-payment-method {
    border-color: var(--color-primary) !important;
    background: #e8e8e8 !important;
    color: var(--color-gray-700) !important;
    box-shadow: 0 0 0 2px rgba(177, 31, 101, .12);
}

/* The only payment chooser lives on checkout-payment. Artwork is local and
   deliberately carries the visual weight, leaving the method name crisp. */
.storefront-payment-methods--cards {
    margin-top: 0;
}

.storefront-payment-method--card {
    min-height: 116px;
    position: relative;
    overflow: hidden;
    border-color: transparent !important;
    background-color: #071b2c !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(8, 23, 41, .18);
    gap: 20px;
}

.storefront-payment-method--card::before {
    display: block;
    position: relative !important;
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    border: 3px solid rgba(255, 255, 255, .9);
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(2, 14, 29, .35);
    content: '';
}

/* The base template adds a small decorative dot with ::after. Payment cards
   have their own single radio marker, so suppress the inherited decoration. */
.storefront-payment-method--card::after {
    display: none !important;
    content: none !important;
}

.storefront-payment-method--card .storefront-payment-label {
    flex: 1 1 auto;
    min-width: 1px;
    overflow-wrap: break-word;
    color: inherit;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.01em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

.storefront-payment-method--card:hover {
    border-color: transparent !important;
    background-color: #071b2c !important;
    color: #fff !important;
    box-shadow: 0 14px 30px rgba(8, 23, 41, .28);
    transform: translateY(-2px);
}

.storefront-payment-methods .btn-check:checked + .storefront-payment-method--card {
    border: 2px solid #fff !important;
    outline: 3px solid var(--color-primary);
    outline-offset: -6px;
    background-color: #071b2c !important;
    color: #fff !important;
    box-shadow: 0 14px 30px rgba(8, 23, 41, .28);
}

.storefront-payment-methods .btn-check:checked + .storefront-payment-method--card::before {
    border-color: #fff;
    background: #fff;
    box-shadow: inset 0 0 0 6px var(--color-primary), 0 0 0 2px rgba(2, 14, 29, .35);
}

.storefront-bank-transfer-panel {
    padding: 24px;
    border: 1px solid #f3dbb0;
    border-radius: 10px;
    background: #fdf6ea;
}

.storefront-bank-transfer-panel__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}

.storefront-bank-transfer-panel__head > i {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--color-warning);
    color: #fff;
    font-size: 17px;
}

.storefront-bank-transfer-panel__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 16px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #f3dbb0;
}

.storefront-bank-transfer-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.storefront-bank-transfer-field--account {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.storefront-bank-transfer-field__label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-gray-500, #8a8a8a);
}

.storefront-bank-transfer-field__value {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-gray-700);
    overflow-wrap: break-word;
}

.storefront-bank-transfer-field__value--mono {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 18px;
    letter-spacing: .03em;
}

.storefront-bank-transfer-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--color-primary);
    border-radius: 6px;
    background: #fff;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.storefront-bank-transfer-copy:hover {
    background: var(--color-primary);
    color: #fff;
}

.storefront-bank-transfer-panel__note {
    margin: 16px 0 0;
    font-size: 13px;
    line-height: 1.65;
    color: var(--color-gray-700);
}

@media (max-width: 575.98px) {
    .storefront-bank-transfer-panel__grid {
        grid-template-columns: 1fr;
    }
}

/* Keep catalogue filters in view while the product grid is being browsed.
   The sidebar banner was decorative template content and has been removed
   from the shop markup, so the filter panel can use the full sidebar height. */
.storefront-shop-filter-sidebar {
    position: sticky;
    top: 24px;
    align-self: flex-start;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    scrollbar-width: thin;
}

/* Keep stock status anchored to the product image. It must not move when a
   sale price adds a crossed-out regular price beside the current price. */
.storefront-stock-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.storefront-stock-badge--in { color: #20b526; }
.storefront-stock-badge--out { color: #d23b3b; }

/* Product-page purchase actions should read as deliberate controls, not fill
   every spare pixel — the theme's own .product-btn-grp .rbt-btn{flex-grow:1}
   stretched both buttons to their own full line, wrapping Buy Now onto a
   second row. Quantity stepper, Add to Cart, and Buy Now all stay on one
   row instead: the qty stepper keeps its own natural width, and the two
   buttons share whatever's left equally (flex:1, min-width:0 so their text
   can't force an overflow) — they shrink together rather than one of them
   spilling past the column's edge. */
.rbt-single-product-area .product-btn-grp {
    flex-wrap: nowrap;
}

.rbt-single-product-area .product-btn-grp .rbt-qty-area {
    flex: 0 0 auto;
}

.rbt-single-product-area .product-btn-grp .rbt-btn {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 575px) {
    .storefront-payment-method {
        min-height: 58px;
        justify-content: flex-start;
    }

    .storefront-payment-method--card {
        min-height: 96px;
        gap: 18px;
    }
}

/* A lone payment method reads as a banner if it spans the full column.
   Cap it so it still looks like one choice among possible others. */
.storefront-payment-methods.is-single .col {
    max-width: 420px;
}

/* The label is the whole hit area, so make that obvious. */
.storefront-payment-method {
    cursor: pointer;
}

.track-order-form .track-order-submit {
    height: 50px;
    line-height: 50px;
    padding: 0 24px;
}

/* ==========================================================================
   Homepage category carousel — includes/home-categories.php
   ========================================================================== */

.storefront-cat-carousel { position: relative; }

/* Brand directory */
.storefront-brand-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.storefront-brand-card {
    display: flex;
    min-width: 0;
    min-height: 174px;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    padding: 18px;
    border: 1px solid #ececec;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(18, 18, 18, 0.05);
    color: inherit;
    text-align: center;
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.storefront-brand-card:hover,
.storefront-brand-card:focus-visible {
    border-color: var(--color-primary, #b72069);
    box-shadow: 0 12px 28px rgba(18, 18, 18, 0.12);
    color: inherit;
    transform: translateY(-3px);
}

.storefront-brand-card__logo {
    display: grid;
    width: 100%;
    height: 100px;
    flex: 0 0 100px;
    place-items: center;
    overflow: hidden;
    border-radius: 7px;
    background: #f7f7f7;
}

.storefront-brand-card > .storefront-brand-card__logo > img {
    display: block;
    width: min(100%, 100px) !important;
    height: 100px !important;
    max-width: calc(100% - 24px) !important;
    max-height: calc(100% - 24px) !important;
    margin: auto;
    object-fit: contain !important;
    padding: 0;
}

.storefront-brand-card__fallback {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 50%;
    background: #ededed;
    color: #222;
    font-size: 24px;
    font-weight: 700;
}

.storefront-brand-card__name {
    overflow: hidden;
    color: #171717;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Keep the emailed product review form compact and comfortable on desktop and
   mobile without changing typography across the rest of the storefront. */
.storefront-review-request__card {
    padding: 28px !important;
}

.storefront-review-request__card > h1 {
    margin-bottom: 12px;
    font-size: clamp(24px, 2.4vw, 30px);
    line-height: 1.25;
}

.storefront-review-request__card > p,
.storefront-review-request__form,
.storefront-review-request__form .form-label,
.storefront-review-request__form .form-control,
.storefront-review-request__form small {
    font-size: 15px;
}

.storefront-review-request__form .form-label {
    margin-bottom: 6px;
    font-weight: 600;
}

.storefront-review-request__form .form-control {
    min-height: 46px;
    padding: 10px 14px;
}

.storefront-review-request__form textarea.form-control {
    min-height: 132px;
    line-height: 1.5;
}

.storefront-review-request__form input[type="file"].form-control {
    min-height: 44px;
    padding: 6px 10px;
}

.storefront-review-request__choice-row {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(180px, 1fr);
    gap: 16px;
}

.storefront-review-request__choice-row > .mb-3 {
    min-width: 0;
}

.storefront-review-request__submit {
    min-height: 50px;
    min-width: 180px;
    padding: 12px 28px;
    font-size: 16px;
}

@media (max-width: 575px) {
    .storefront-review-request__card { padding: 20px !important; }
    .storefront-review-request { padding-top: 28px !important; }
    .storefront-review-request__choice-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .storefront-review-request__submit { width: 100%; }
}

@media (max-width: 1199px) {
    .storefront-brand-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
    .storefront-brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

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

    .storefront-brand-card {
        min-height: 150px;
        padding: 14px;
    }

    .storefront-brand-card__logo {
        height: 82px;
        flex-basis: 82px;
    }

    .storefront-brand-card > .storefront-brand-card__logo > img {
        width: min(100%, 58px) !important;
        height: 58px !important;
    }
}

/* Swiper needs the slides to be equal height for the row to read as a band. */
.storefront-cat-carousel .swiper-slide { height: auto; }
.storefront-cat-carousel .rbt-cat-box-8 {
    height: 100%;
    min-height: 180px;
    padding: 20px;
}
.storefront-cat-carousel .rbt-cat-box-8.rbt-cat-box-8-var-three {
    min-height: 250px;
}

/* The theme's category images are bright 3D illustrations that stay light
   all the way down, unlike the photography .rbt-sectioin-overlay-black-reverse
   was tuned for — its gradient starts at 22% and left white text sitting on
   high-contrast artwork. Darken the whole card, more heavily at the base. */
.storefront-cat-carousel .has-rbt-sectioin-overlay.rbt-sectioin-overlay-black-reverse::after {
    opacity: 1;
    background: linear-gradient(180deg,
        rgba(3, 10, 20, 0.34) 0%,
        rgba(3, 10, 20, 0.44) 40%,
        rgba(3, 10, 20, 0.78) 72%,
        rgba(3, 10, 20, 0.95) 100%);
}

.storefront-cat-carousel .rbt-cat-box-8 .content .title a,
.storefront-cat-carousel .rbt-cat-box-8 .content .qty-text {
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

/* rbt-cat-box-8-var-three's own .title is capped at 75% width — fine on the
   wider standalone card it was designed for, but in this 5-up carousel the
   card itself is already narrow, so 75% of that left "Women"/"Phones"
   wrapping onto 2-3 letters a line. The theme's shared .rbt-cat-box-8
   .content is also `width: fit-content`, which shrinks to the narrowest
   box that still fits the text and forces the title to wrap inside it —
   setting the title to 100% alone does nothing while its parent is still
   fit-content-constrained, so override both. */
.storefront-cat-carousel .rbt-cat-box-8 .content,
.storefront-cat-carousel .rbt-cat-box-8-var-three .title {
    width: 100%;
}

/* ---------------------------------------------------------------- arrows */
/* Own class, not .rbt-swiper-arrow: the theme sets that to
   `display:none!important` at some widths and opacity:0 by default, so
   reusing it means fighting !important to show our own control. */
.storefront-cat-nav {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--color-heading, #000);
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.2);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.storefront-cat-nav:hover {
    background: var(--color-heading, #000);
    color: #fff;
}

.storefront-cat-nav--prev { left: -14px; }
.storefront-cat-nav--next { right: -14px; }

/* Swiper adds these when an end is reached or everything already fits. */
.storefront-cat-nav.swiper-button-disabled,
.storefront-cat-nav.swiper-button-lock {
    opacity: 0;
    pointer-events: none;
}

@media only screen and (max-width: 1399px) {
    .storefront-cat-nav--prev { left: 8px; }
    .storefront-cat-nav--next { right: 8px; }
}

@media only screen and (max-width: 767px) {
    /* Swipe is the affordance on touch. */
    .storefront-cat-nav { display: none; }
    .storefront-cat-carousel .rbt-cat-box-8 { min-height: 144px; padding: 16px; }
    .storefront-cat-carousel .rbt-cat-box-8.rbt-cat-box-8-var-three { min-height: 150px; }
}

/* Journal sidebar (blog.php). The theme sizes .rbt-recent-blog-single for a
   wider column; in this 4-of-12 sidebar the thumbnails rendered oversized
   and the whole block competed with the article cards beside it. */
.rbt-sidebar .rbt-recent-blog-single-thumb {
    flex: 0 0 72px;
    width: 72px;
}

.rbt-sidebar .rbt-recent-blog-single-thumb img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--radius-md, 8px);
}

.rbt-sidebar .rbt-recent-blog-title {
    font-size: 14px;
    line-height: 1.45;
}

/* The date/category meta above each recent title was inheriting body size. */
.rbt-sidebar .rbt-blog-post-meta .rbt-blog-details-meta-list {
    font-size: 12px;
}

.rbt-sidebar .rbt-sidebar-categories-list li a {
    padding-block: 7px;
    font-size: 14px;
}

/* Blog meta rows (blog.php). The theme styles only `li a` in
   .rbt-blog-details-meta-list, so a date rendered as <span> — correct, since
   a date is not a link — fell back to body size and sat larger than the
   category beside it. Match the anchor's own type styles. */
.rbt-blog-details-meta-list li span,
.rbt-blog-details-meta-list li p {
    color: var(--color-gray-400);
    font-family: var(--font-primary);
    font-size: var(--font-size-b4);
    line-height: var(--line-height-b4);
    font-weight: var(--f-medium);
    margin-bottom: 0;
}

/* Header search typewriter (.cd-headline.clip in the shared header).
   text-type.js sizes .cd-words-wrapper from its measured width at load and
   relies on `overflow:hidden` to clip the inactive words. In this header the
   headline is absolutely positioned behind the input (z-index:-1), so that
   measurement can come back wrong and every <b> paints at once — which reads
   as bold, overlapping text rather than one cycling phrase.
   Pin the stacking context so only the visible word is ever painted. */
.rbt-inner-search-label-animate-activation .cd-headline.clip .cd-words-wrapper {
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}

.rbt-inner-search-label-animate-activation .cd-headline.clip b {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    font-weight: 400;
    opacity: 0;
}

.rbt-inner-search-label-animate-activation .cd-headline.clip b.is-visible {
    position: relative;
    opacity: 1;
}

/* Home 2: Electronics. The structure mirrors the reference electronics
   homepage but remains entirely driven by the catalogue and the managed
   slider, so no template catalogue content leaks into the live storefront. */
.electronics-home { background: #fff; }
.electronics-home__hero { background: #f4f5f7; padding: 30px 0; }
.storefront-home-slider--electronics .wrapper { max-width: 1320px; margin: 0 auto; }
.storefront-home-slider--electronics .storefront-home-slide { min-height: 490px; border-radius: 24px; overflow: hidden; }
.storefront-home-slider--electronics .storefront-home-slide__overlay { align-items: flex-start; justify-content: center; padding: 58px; text-align: left; }
.storefront-home-slider--electronics .storefront-home-slide__overlay p { max-width: 460px; font-size: clamp(28px, 3vw, 52px); font-weight: 700; line-height: 1.05; }
.electronics-home__fallback-hero, .electronics-home__spotlight { display: grid; grid-template-columns: 1fr minmax(360px, 48%); align-items: center; overflow: hidden; border-radius: 24px; background: #151515; color: #fff; }
.electronics-home__fallback-hero > div, .electronics-home__spotlight > div { padding: clamp(28px, 5vw, 72px); }
.electronics-home__fallback-hero p, .electronics-home__spotlight > div > p:first-child { color: #8be16b; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.electronics-home__fallback-hero h2, .electronics-home__spotlight h2 { margin: 12px 0 18px; color: #fff; font-size: clamp(32px, 4vw, 58px); line-height: 1; }
.electronics-home__fallback-hero span { display: block; margin-bottom: 25px; color: #fff; font-size: 24px; font-weight: 700; }
.electronics-home__fallback-hero img, .electronics-home__spotlight img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
.electronics-home__section { padding: 82px 0; }
.electronics-home__heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.electronics-home__heading p { margin: 0 0 5px; color: #2b901f; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.electronics-home__heading h2 { margin: 0; font-size: clamp(28px, 3vw, 42px); }
.electronics-home__heading > a { flex: 0 0 auto; color: #191919; font-weight: 700; text-decoration: none; }
.electronics-home__heading > a:hover { color: #2b901f; }
.electronics-home__categories { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.electronics-home-category { position: relative; display: grid; min-height: 200px; align-content: end; overflow: hidden; padding: 20px; border-radius: 16px; background: #f4f5f7; color: #fff; text-decoration: none; isolation: isolate; }
.electronics-home-category::after { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.75)); content: ''; }
.electronics-home-category img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.electronics-home-category:hover img { transform: scale(1.05); }
.electronics-home-category span { font-size: 21px; font-weight: 700; }
.electronics-home-category small { margin-top: 2px; font-size: 13px; }
.electronics-home__products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.electronics-home-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid #e6e6e6; border-radius: 16px; background: #fff; }
.electronics-home-card__image { display: block; aspect-ratio: 1 / .86; overflow: hidden; background: #f5f5f5; }
.electronics-home-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.electronics-home-card:hover .electronics-home-card__image img { transform: scale(1.04); }
.electronics-home-card__body { display: flex; flex: 1; flex-direction: column; padding: 18px; }
.electronics-home-card__category { color: #2b901f; font-size: 13px; font-weight: 700; text-decoration: none; }
.electronics-home-card h3 { margin: 7px 0 12px; font-size: 19px; line-height: 1.2; }
.electronics-home-card h3 a { color: #171717; text-decoration: none; }
.electronics-home-card__price { display: flex; flex-wrap: wrap; gap: 7px; align-items: baseline; margin: auto 0 15px; }
.electronics-home-card__price strong { font-size: 19px; }
.electronics-home-card__price del { color: #888; font-size: 14px; }
.electronics-home-card .rbt-btn { justify-content: center; }
.electronics-home__spotlight { background: #287d21; }
.electronics-home__spotlight-copy { max-width: 480px; color: rgba(255,255,255,.84); font-size: 18px; line-height: 1.55; }
@media (max-width: 991px) { .electronics-home__categories, .electronics-home__products { grid-template-columns: repeat(2, minmax(0, 1fr)); } .electronics-home__section { padding: 56px 0; } }
@media (max-width: 575px) { .electronics-home__hero { padding: 12px 0; } .storefront-home-slider--electronics .storefront-home-slide { min-height: 330px; border-radius: 0; } .storefront-home-slider--electronics .storefront-home-slide__overlay { padding: 26px; } .storefront-home-slider--electronics .storefront-home-slide__overlay p { font-size: 28px; } .electronics-home__fallback-hero, .electronics-home__spotlight { grid-template-columns: 1fr; border-radius: 16px; } .electronics-home__fallback-hero img, .electronics-home__spotlight img { min-height: 220px; } .electronics-home__heading { align-items: flex-start; flex-direction: column; gap: 12px; } .electronics-home__categories { gap: 10px; } .electronics-home-category { min-height: 140px; padding: 14px; } .electronics-home-category span { font-size: 16px; } .electronics-home__products { gap: 10px; } .electronics-home-card__body { padding: 12px; } .electronics-home-card h3 { font-size: 16px; } .electronics-home-card__price strong { font-size: 16px; } .electronics-home-card .rbt-btn { min-height: 36px; padding-inline: 8px; font-size: 12px; } }

/* Design C ("strip") homepage rows — includes/home-category-rows.php.
   Was a six-column grid that a seventh product wrapped out of; now a
   single-row swiper. */
.sfc-strip { position: relative; }

.sfc-strip .swiper-slide { height: auto; }
.sfc-strip .sfc-card { height: 100%; }

.sfc-strip-nav {
    position: absolute;
    top: 42%;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--color-heading, #000);
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.2);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.sfc-strip-nav:hover { background: var(--color-heading, #000); color: #fff; }
.sfc-strip-nav--prev { left: -14px; }
.sfc-strip-nav--next { right: -14px; }

/* Swiper sets these when an end is reached or nothing overflows. */
.sfc-strip-nav.swiper-button-disabled,
.sfc-strip-nav.swiper-button-lock {
    opacity: 0;
    pointer-events: none;
}

@media only screen and (max-width: 1399px) {
    .sfc-strip-nav--prev { left: 6px; }
    .sfc-strip-nav--next { right: 6px; }
}

@media only screen and (max-width: 767px) {
    .sfc-strip-nav { display: none; }   /* swipe is the affordance on touch */
}

/* Shop sidebar colour swatches (shop.php). style.min.css only defines
   8 rbt-swatch-bg-* colours; this catalogue's real attribute values
   include a few more. Added here rather than editing the licensed
   template's stylesheet. */
.rbt-color-swatch-bg.rbt-swatch-bg-white { background: #fff; border: 1px solid #d7d7d7; }
.rbt-color-swatch-bg.rbt-swatch-bg-indigo { background: #4b0082; }
.rbt-color-swatch-bg.rbt-swatch-bg-pink { background: #ffc0cb; }
.rbt-color-swatch-bg.rbt-swatch-bg-purple { background: #6f2da8; }

/* Keep the shared sign-in popup readable when the identifier is a username
   or an email address. */
.storefront-auth-signin-fields {
    display: grid;
    gap: 20px;
}

/* Keep a clear visual break between the identifier and password on the full
   storefront sign-in page, matching the spacing used by the sign-in popup. */
.storefront-signin-password {
    margin-top: 24px !important;
}

/* rbt-product-card-style-3 (fashion homepage hero slider) assumes the
   template's transparent-cutout product renders, which are tall enough to
   fill the card behind the absolutely-positioned glass text overlay. Real
   catalog photos are plain rectangular shots, so at width:100% with no
   height they render short and leave the overlay floating far below the
   product. Pin the image as a proper full-bleed background instead. */
.rbt-product-card-style-3 .rbt-card-img {
    min-height: 320px;
}

.rbt-product-card-style-3 .rbt-card-img > a {
    position: absolute;
    inset: 0;
    display: block;
}

.rbt-product-card-style-3 .rbt-card-img > a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media only screen and (max-width: 767px) {
    .rbt-product-card-style-3 .rbt-card-img {
        min-height: 220px;
    }
}

/* Shop page tool bar (shop.php): the "Quick filter :" label and the
   scrollable pill list share one flex row with no min-width:0 on the
   list, so at mobile widths the pills blow out the row and get clipped
   hard at the viewport edge instead of scrolling cleanly. Let the list
   shrink to fit and fade its trailing edge so the cut-off reads as
   "swipe for more" rather than a broken layout. */
@media only screen and (max-width: 767px) {
    .rbt-shop-tool-content.rbt-shop-filter-tag-wrapper {
        flex-wrap: nowrap;
        min-width: 0;
    }

    .rbt-shop-tool-content.rbt-shop-filter-tag-wrapper .rbt-shop-tools-title {
        flex-shrink: 0;
    }

    .rbt-shop-filter-tag-list {
        min-width: 0;
        flex: 1 1 auto;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
        mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
        padding-right: 8px;
    }

    .rbt-shop-filter-tag-list a {
        flex-shrink: 0;
    }
}

/* Footer "Need help? Call now!" / "Email us" (includes/chrome.php). The
   theme's own rule here is
   .rbt-footer.rbt-footer-style-ten .footer-widget .ft-link .rbt-quick-contact-box ...
   — five classes deep, sizing the icon at var(--h2) (30px) and the
   phone/email link at var(--h4)/18px (two separate declarations, the
   plain selector's var(--h4) overridden by an identical-specificity literal
   18px rule later in the stylesheet) — meant for a standalone prominent
   contact CTA elsewhere in the template, but oversized here where it's just
   one line item among several in a footer column. A 2-class override lost
   to that specificity outright regardless of source order, so this must
   match the same depth to actually win. */
.rbt-footer .footer-widget .ft-link.storefront-footer-contacts .rbt-quick-contact-box .rbt-icon {
    font-size: 20px;
}

.rbt-footer .footer-widget .ft-link.storefront-footer-contacts .rbt-quick-contact-box .rbt-quick-contact-info a {
    font-size: 15px;
}

/* Give the brand mark more presence in the shared storefront footer without
   changing logo sizing in the header or account/admin areas. */
.rbt-footer.rbt-footer-style-ten .footer-widget > .logo img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 64px;
}

.storefront-about-benefits .rbt-counterup-single {
    flex: 1 1 210px;
    max-width: none;
}

.storefront-about-benefits .rbt-counterup-single i {
    color: var(--color-primary);
    font-size: 26px;
    margin-bottom: 16px;
}

.storefront-about-benefits .rbt-counterup-single h2 {
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.25;
    margin-bottom: 10px;
}

.storefront-about-benefits .rbt-counterup-single p {
    line-height: 1.5;
    margin-bottom: 0;
}

.storefront-contact-captcha-image {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 10px 0 14px;
}

.storefront-contact-captcha-image img {
    display: block;
    width: 240px;
    height: 76px;
    border: 1px solid #d9dde4;
    border-radius: 8px;
}

.storefront-contact-captcha-refresh {
    border: 0;
    background: transparent;
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
}

.storefront-contact-captcha input[name="captcha_answer"] {
    display: block;
    width: 240px;
    max-width: 100%;
    text-align: center;
    letter-spacing: 0.2em;
}
/* Shared, store-neutral content banners used by Blog and FAQ. */
.storefront-content-banner {
  position: relative;
  overflow: hidden;
  min-height: clamp(230px, 25vw, 390px);
  display: flex;
  align-items: center;
  background: #f6f5f2 var(--content-banner-image) center/cover no-repeat;
  isolation: isolate;
}
.storefront-content-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.74) 38%, rgba(255,255,255,.12) 78%, rgba(255,255,255,0) 100%);
}
.storefront-content-banner__inner {
  max-width: 620px;
  padding: clamp(48px, 7vw, 104px) 0;
}
.storefront-content-banner__eyebrow {
  margin: 0 0 12px;
  color: var(--color-primary, #b45151);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.storefront-content-banner h1 {
  margin: 0;
  color: #141414;
  font-size: clamp(34px, 4.6vw, 68px);
  line-height: 1.05;
}
.storefront-content-banner__inner > p:last-child {
  max-width: 500px;
  margin: 18px 0 0;
  color: #5f5f5f;
  font-size: clamp(16px, 1.6vw, 21px);
  line-height: 1.5;
}
@media (max-width: 767px) {
  .storefront-content-banner {
    min-height: 270px;
    background-position: 62% center;
  }
  .storefront-content-banner::after {
    background: linear-gradient(90deg, rgba(255,255,255,.94), rgba(255,255,255,.62));
  }
}

.storefront-currency-switcher {
  position: relative;
  font-size: 13px;
}
/* The header becomes position:fixed (.rbt-sticky, toggled by the template's
   own scroll JS) once the visitor scrolls, compacting the icon row -- the
   icon-row switcher is hidden in that state per the project owner's
   request, and only shown in the header's default (unscrolled) position.
   The topbar variant isn't targeted here: it lives above the icon row and
   is already hidden by the template's own scroll behaviour. */
.rbt-sticky .storefront-currency-switcher:not(.storefront-currency-switcher--topbar) {
  display: none !important;
}
.storefront-currency-switcher__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: 35px;
  padding: 0 4px !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  background: transparent;
  border: none;
}
.storefront-currency-switcher__toggle:disabled {
  opacity: .6;
  cursor: default;
}
.storefront-currency-switcher--topbar {
  display: inline-block;
}
.storefront-currency-switcher--topbar .storefront-currency-switcher__toggle {
  height: auto;
  padding: 0 !important;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  color: inherit;
}
.storefront-currency-switcher--topbar .storefront-currency-switcher__menu {
  right: auto;
  left: 0;
}
.storefront-currency-switcher__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 180px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 12px;
  box-shadow: 0 14px 32px rgba(20,20,20,.14);
  z-index: 60;
}
.storefront-currency-switcher__menu[hidden] {
  display: none;
}
.storefront-currency-switcher__menu li + li {
  margin-top: 2px;
}
.storefront-currency-switcher__menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #1a1a1a;
  text-align: left;
  cursor: pointer;
}
.storefront-currency-switcher__menu button:hover {
  background: #f6f1f1;
}
.storefront-currency-switcher__menu button.is-active {
  background: #fbeaea;
  color: #b45151;
  font-weight: 700;
}
.storefront-currency-switcher__code {
  font-weight: 700;
}
.storefront-currency-switcher__name {
  color: #7a7a7a;
  font-size: 12px;
}
.storefront-currency-switcher__menu button.is-active .storefront-currency-switcher__name {
  color: inherit;
}

/* Grouped-product inputs are disabled until an item is selected. The theme
   globally hides disabled inputs, which made the quantity field disappear. */
.grouped-product-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
  cursor: pointer;
}
.grouped-product-item.is-selected {
  border-color: #b45151;
  background: #fffafa;
  box-shadow: 0 0 0 2px rgba(180, 81, 81, .12);
}
.grouped-product-item > img {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
}
.grouped-product-select {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.grouped-product-select input[type="checkbox"] {
  appearance: none;
  position: static;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 0;
  opacity: 1;
  border: 2px solid #858585;
  border-radius: 5px;
  background: #fff;
  accent-color: #b45151;
  cursor: pointer;
}
.grouped-product-select input[type="checkbox"]:checked {
  border-color: #b45151;
  background-color: #b45151;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8 3 3 7-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
}
.grouped-product-select input[type="checkbox"]:focus-visible {
  outline: 3px solid rgba(180, 81, 81, .3);
  outline-offset: 2px;
}
.grouped-product-quantity {
  display: grid;
  justify-items: center;
  gap: 4px;
}
.grouped-product-quantity-label {
  color: #555;
  font-size: 13px;
  font-weight: 600;
}
.grouped-product-stepper {
  display: flex;
  align-items: stretch;
  height: 42px;
  overflow: hidden;
  border: 1px solid #d5d8dc;
  border-radius: 8px;
  background: #fff;
}
.grouped-product-stepper button {
  display: grid;
  width: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 0;
  background: #f7f7f7;
  color: #242a31;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.grouped-product-stepper button:disabled {
  color: #999;
  cursor: not-allowed;
}
.grouped-product-stepper input[data-grouped-quantity] {
  display: block;
  width: 52px;
  min-width: 52px;
  height: 40px;
  padding: 0 4px;
  border: 0;
  border-right: 1px solid #e5e7eb;
  border-left: 1px solid #e5e7eb;
  border-radius: 0;
  background: #fff;
  color: #242a31;
  box-shadow: none;
  text-align: center;
}
.grouped-product-stepper input[data-grouped-quantity][disabled] {
  display: block;
  background: #f7f7f7;
  color: #777;
  opacity: 1;
}
@media (max-width: 575.98px) {
  .grouped-product-item {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px;
  }
  .grouped-product-item > img {
    width: 56px;
    height: 56px;
  }
  .grouped-product-stepper button {
    width: 32px;
    flex-basis: 32px;
  }
  .grouped-product-stepper input[data-grouped-quantity] {
    width: 42px;
    min-width: 42px;
  }
}
.storefront-currency-switcher__status {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.storefront-mega-subcategories {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 8px;
    flex: 1;
    list-style: none;
    margin: 0;
    padding: 14px 16px;
}
.storefront-mega-subcategories li {
    min-width: 0;
    margin: 0;
}
.storefront-mega-subcategories a {
    display: flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid rgba(30, 32, 40, .08);
    border-radius: 8px;
    background: #fff;
    font-size: 12px;
    line-height: 1.35;
    color: #343843;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.storefront-mega-subcategories a:hover,
.storefront-mega-subcategories a:focus-visible {
    background: #fff;
    border-color: var(--color-primary, #b45151);
    color: var(--color-primary, #b45151);
}
@media (max-width: 575px) {
    .storefront-mega-subcategories {
        grid-template-columns: 1fr;
    }
}

/* A subcategory's <li> in the shop sidebar's Categories filter (shop.php,
   desktop and mobile-collapse variants). Indented visually via this class
   rather than true DOM nesting under the parent <li>: the template's own
   hover highlight (style.min.css: ul.rbt-sidebar-list-wrapper>li:hover:after)
   sizes its background box to 100% of the <li>'s own height via a direct-
   child selector, so nesting a second list inside the parent <li> made that
   box stretch to cover the parent and every child as one shaded region on
   hover. Keeping every category (parent and child alike) as a sibling <li>
   in the same flat list gives each its own independent hover highlight. */
.storefront-sidebar-subcategory {
  margin-left: 22px;
}
.storefront-sidebar-subcategory label,
.storefront-sidebar-subcategory a {
  font-size: 13px;
}

/* .rbt-product-card-style-2 (includes/home-products.php) has no border or
   shadow of its own -- elsewhere on the site it sits inside a tinted
   section background, which is enough visual separation between cards. The
   product page's "Related Items" strip sits directly on plain white with
   no such background, so each card floated with no edge between it and
   its neighbours or the page itself. Giving each card here its own
   border/shadow matches how every other product-card style on the site
   already reads as a distinct, clickable box. */
.storefront-related-items .rbt-product-card.rbt-product-card-style-2 {
  border: 1px solid var(--color-border, #f3f3f3);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
  background: #fff;
}

/* style.min.css's .rbt-counterup::after rule (the stat suffix, e.g. "+" in
   "500k +") sets `content: attr(data-text); position: absolute;` with NO
   top/left/right/bottom offsets at all -- an incomplete vendor rule. With
   no explicit offset, the browser falls back to the element's normal flow
   position, which only coincidentally sits beside the number for a single
   narrow character ("+", "%"); a wider suffix ("m+", "k +") doesn't fit on
   that line and wraps down onto the label text below it (About page counter
   stats, includes/about-page-content.php / about.php). Pinning it explicitly
   next to the number with nowrap fixes every suffix length consistently. */
.rbt-counterup-wrapper .rbt-counterup-single .rbt-counterup {
  display: inline-flex;
  align-items: baseline;
}
.rbt-counterup-wrapper .rbt-counterup-single .rbt-counterup::after {
  position: static;
  margin-left: 2px;
  white-space: nowrap;
}

/* Home 2 shows two hero slides side by side. Each banner's content can have
   a different number of title lines, but both cards should fill the same
   slide row. Keep the image and its curved mask at the banner's full height. */
.storefront-homepage--home-2 .rbt-hero-banner-activation-1 .swiper-wrapper {
  align-items: stretch;
}
.storefront-homepage--home-2 .rbt-hero-banner-activation-1 .swiper-slide {
  height: auto;
  display: flex;
}
.storefront-homepage--home-2 .rbt-hero-banner-activation-1 .swiper-slide > .rbt-product-banner,
.storefront-homepage--home-2 .rbt-hero-banner-activation-1 .rbt-banner-inner {
  display: flex;
  width: 100%;
}
.storefront-homepage--home-2 .rbt-hero-banner-activation-1 .rbt-banner-inner {
  align-items: stretch;
}
.storefront-homepage--home-2 .rbt-hero-banner-activation-1 .rbt-product-banner-content {
  display: flex;
  align-items: stretch;
}
.storefront-homepage--home-2 .rbt-hero-banner-activation-1 .rbt-content-section {
  display: flex;
  flex-direction: column;
}
.storefront-homepage--home-2 .rbt-hero-banner-activation-1 .rbt-banner-btn {
  margin-top: auto !important;
  padding-top: 24px;
}

/* Give the copyright its full line and show only the accepted card brands.
   The existing licensed card strip is used as a sprite, so no replacement
   artwork or inactive payment-brand links are needed. */
@media (min-width: 992px) {
  .copyright-area .rbt-link-hover {
    white-space: nowrap;
  }
}
.storefront-footer-card-brands {
  align-items: center;
  gap: 8px;
}
.storefront-footer-card-brand {
  display: block;
  height: 32px;
  background-image: url("../images/payment-brand/image-01.webp");
  background-repeat: no-repeat;
  background-size: 406px 32px;
}
.storefront-footer-card-brand--mastercard {
  width: 54px;
  background-position: -60px 0;
}
.storefront-footer-card-brand--visa {
  width: 52px;
  background-position: 0 0;
}

/* Keep the signed-in account menu readable in the full and sidebar headers. */
.storefront-header-account-dropdown {
  position: relative;
}
.storefront-header-account-dropdown .dropdown-menu {
  top: calc(100% + 6px) !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  min-width: 200px;
  padding: 6px;
  border: 1px solid var(--color-border, #e8e8e8);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .13);
  z-index: 1100;
}
.storefront-header-account-dropdown--compact .dropdown-menu {
  right: 0 !important;
  left: auto !important;
  transform: none !important;
}
.storefront-header-account-dropdown .dropdown-menu > li {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: normal !important;
}
.storefront-header-account-dropdown .dropdown-menu > li > .dropdown-item {
  display: block;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.35 !important;
  white-space: nowrap;
}

/* The shared Fabulous Collection lockup has a wider aspect ratio than the
   template demo logo. Give it enough height to read clearly in the header. */
.rbt-header .logo a img {
  max-height: 56px !important;
  max-width: 280px !important;
  object-fit: contain !important;
}

/* Homepage category sections have a deliberate mobile presentation that is
   independent of the selected desktop template: six products at most in a
   compact two-column grid. The desktop markup remains intact for larger
   screens, while the alternate mobile markup avoids squeezing editorial
   panels, promo tiles, and carousels into the narrow viewport. */
.sfc-row__mobile,
.electronics-mobile-category { display: none; }

@media (min-width: 768px) {
  .sfc-row--mobile-only { display: none; }
}

@media (max-width: 767px) {
  .sfc-row__desktop,
  .electronics-desktop-category { display: none !important; }

  .sfc-row__mobile,
  .electronics-mobile-category { display: block; }

  .sfc-row--mobile-only { display: block; }

  .sfc-row { padding-top: 0; }
  .sfc-row--next { margin-top: 32px; }

  .sfc-mobile-category__header,
  .electronics-mobile-category__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
  }

  .sfc-mobile-category__title,
  .electronics-mobile-category__header h2 {
    min-width: 0;
    margin: 0;
    font-size: clamp(18px, 5vw, 22px);
    font-weight: 700;
    line-height: 1.25;
  }

  .sfc-mobile-category__link,
  .electronics-mobile-category__header a {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    color: var(--color-primary, #215ada);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }

  .sfc-mobile-category__grid,
  .electronics-mobile-category__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 12px;
  }

  .sfc-mobile-category__item,
  .electronics-mobile-category__item { min-width: 0; }

  .sfc-mobile-category__item .sfc-card,
  .electronics-mobile-category__item .sfc-card {
    height: 100%;
    border-radius: 14px;
  }

  .sfc-mobile-category__item .sfc-card-body,
  .electronics-mobile-category__item .sfc-card-body {
    gap: 6px;
    padding: 11px 10px 12px;
  }

  .sfc-mobile-category__item .sfc-card-title,
  .electronics-mobile-category__item .sfc-card-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 14px;
    line-height: 1.3;
  }

  .sfc-mobile-category__item .sfc-card-price,
  .electronics-mobile-category__item .sfc-card-price {
    gap: 4px 7px;
    font-size: 14px;
  }

  .sfc-mobile-category__item .sfc-price-now,
  .electronics-mobile-category__item .sfc-price-now { font-size: 14px; }

  .sfc-mobile-category__item .sfc-card-actions-footer .rbt-btn,
  .electronics-mobile-category__item .sfc-card-actions-footer .rbt-btn {
    display: flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 5px;
    font-size: 12px;
    line-height: 1.2;
    white-space: normal;
  }

  .electronics-mobile-category {
    margin-top: 32px;
  }

  .electronics-mobile-category:first-child { margin-top: 0; }
}

/* The Brand filter can list 100+ entries for a large catalog; cap its height
   and let it scroll instead of pushing the rest of the sidebar/offcanvas
   filters far down the page. */
.rbt-categories-brand-list-check {
  max-height: 260px;
  overflow-y: auto;
  padding-right: 6px;
}