/*
 * F2N Wellness storefront design system.
 * Scoped to the active Classic storefront so admin, seller and dormant themes
 * keep their existing presentation.
 *
 * Palette direction: the brand's own cacao-and-terracotta scheme, modernised
 * rather than replaced. Hues stay where they were — terracotta actions, rich
 * cacao chrome — while the neutrals move from flat grey-white to a warm
 * bone/cream canvas so the warm brand colours read as deliberate instead of
 * incidental. All "modern wellness" cues here are structural: whitespace,
 * radii, soft shadows and typography, not a hue change.
 *
 * The --f2n-brown / --f2n-brown-dark names are referenced throughout this file
 * for every dark chrome surface, so retuning them here moves the whole
 * storefront at once instead of scattering colour edits across the sheet.
 */

body.f2n-storefront {
    --f2n-bg: #f8f5f0;
    --f2n-surface: #ffffff;
    --f2n-surface-soft: #f3ece2;
    --f2n-ink: #241a15;
    --f2n-muted: #6a5b52;
    --f2n-subtle: #93857b;
    --f2n-border: #e7ded1;
    --f2n-border-soft: #f0e8dd;
    --f2n-primary: #c1442a;
    --f2n-primary-dark: #9d3520;
    --f2n-brown: #4a2a1c;
    --f2n-brown-dark: #2b1710;
    --f2n-green: #3f6b52;
    --f2n-cream: #f7efe3;
    /* Card info panel. Sits deeper than the page cream on purpose: a tint
       lighter than --f2n-bg lands within a few levels of it and the card's
       lower half reads as a hole rather than a panel. */
    --f2n-card-body: #f3ece1;
    --f2n-focus: #c1442a;
    --f2n-radius-sm: 12px;
    --f2n-radius: 18px;
    --f2n-radius-lg: 26px;
    --f2n-shadow-sm: 0 2px 10px rgba(74, 42, 28, 0.045);
    --f2n-shadow-md: 0 18px 44px rgba(74, 42, 28, 0.1);
    --f2n-display: "Montserrat", "Manrope", "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --f2n-sans: "Manrope", "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--f2n-bg);
    color: var(--f2n-ink);
    font-family: var(--f2n-sans);
    font-size: 15.5px;
    line-height: 1.62;
    letter-spacing: -0.003em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* The layout's inline <style> sets a body font from the system_font_family
   setting. That rule is left untouched; this scoped override simply wins for
   the storefront, so the setting still governs every other surface. */
body.f2n-storefront .aiz-main-wrapper,
body.f2n-storefront .aiz-main-wrapper input,
body.f2n-storefront .aiz-main-wrapper select,
body.f2n-storefront .aiz-main-wrapper textarea,
body.f2n-storefront .aiz-main-wrapper button,
body.f2n-storefront .aiz-mobile-bottom-nav,
body.f2n-storefront .f2n-storefront-footer {
    font-family: var(--f2n-sans);
}

body.f2n-storefront .aiz-main-wrapper {
    background: var(--f2n-bg) !important;
    color: var(--f2n-ink);
    min-height: 100vh;
}

body.f2n-storefront .aiz-main-wrapper .container {
    max-width: 1220px;
}

body.f2n-storefront .aiz-main-wrapper h1,
body.f2n-storefront .aiz-main-wrapper h2,
body.f2n-storefront .aiz-main-wrapper h3,
body.f2n-storefront .aiz-main-wrapper h4,
body.f2n-storefront .aiz-main-wrapper h5,
body.f2n-storefront .aiz-main-wrapper h6 {
    color: var(--f2n-ink);
    letter-spacing: -0.025em;
}

body.f2n-storefront .aiz-main-wrapper a {
    text-underline-offset: 3px;
}

body.f2n-storefront .aiz-user-top-menu .user-top-menu-icon {
    flex: 0 0 16px;
    width: 16px;
    color: #b5b5bf;
    font-size: 18px;
    text-align: center;
}

body.f2n-storefront .aiz-main-wrapper .text-dark,
body.f2n-storefront .aiz-main-wrapper a.text-dark,
body.f2n-storefront .aiz-main-wrapper .text-reset {
    color: var(--f2n-ink) !important;
}

body.f2n-storefront .aiz-main-wrapper .text-secondary,
body.f2n-storefront .aiz-main-wrapper .text-gray,
body.f2n-storefront .aiz-main-wrapper .text-muted,
body.f2n-storefront .aiz-main-wrapper .product-name-color,
body.f2n-storefront .aiz-main-wrapper .opacity-50,
body.f2n-storefront .aiz-main-wrapper .opacity-60 {
    color: var(--f2n-muted) !important;
    opacity: 1 !important;
}

body.f2n-storefront .aiz-main-wrapper .text-primary,
body.f2n-storefront .aiz-main-wrapper .hov-text-primary:hover {
    color: var(--f2n-primary) !important;
}

body.f2n-storefront .aiz-main-wrapper .bg-primary,
body.f2n-storefront .aiz-main-wrapper .btn-primary {
    background-color: var(--f2n-primary) !important;
    border-color: var(--f2n-primary) !important;
    color: #fff !important;
}

body.f2n-storefront .aiz-main-wrapper .btn-primary:hover,
body.f2n-storefront .aiz-main-wrapper .btn-primary:focus {
    background-color: var(--f2n-primary-dark) !important;
    border-color: var(--f2n-primary-dark) !important;
    color: #fff !important;
}

body.f2n-storefront .aiz-main-wrapper .btn {
    min-height: 44px;
    border-radius: 10px !important;
    font-weight: 700;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

body.f2n-storefront .aiz-main-wrapper .btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 18px rgba(76, 38, 24, 0.14);
}

body.f2n-storefront .aiz-main-wrapper .btn:disabled,
body.f2n-storefront .aiz-main-wrapper .btn.disabled {
    background: #d8cec6 !important;
    border-color: #d8cec6 !important;
    color: #514840 !important;
    opacity: 1;
}

body.f2n-storefront .aiz-main-wrapper .form-control,
body.f2n-storefront .aiz-main-wrapper .bootstrap-select > .dropdown-toggle,
body.f2n-storefront .aiz-main-wrapper .input-group-text {
    border: 1px solid #cfc3b9 !important;
    border-radius: 10px !important;
    background-color: #fff;
    color: var(--f2n-ink);
    box-shadow: none;
}

/* Bootstrap Select's wrapper is structural; only its button should look like a field. */
body.f2n-storefront .aiz-main-wrapper .bootstrap-select.form-control {
    height: auto;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent;
    box-shadow: none;
}

body.f2n-storefront .aiz-main-wrapper textarea.form-control {
    min-height: 104px;
}

body.f2n-storefront .aiz-main-wrapper .form-control::placeholder,
body.f2n-storefront .aiz-main-wrapper input::placeholder,
body.f2n-storefront .aiz-main-wrapper textarea::placeholder {
    color: #75675e !important;
    opacity: 1 !important;
}

body.f2n-storefront .aiz-main-wrapper .form-control:focus,
body.f2n-storefront .aiz-main-wrapper .bootstrap-select.show > .dropdown-toggle {
    border-color: var(--f2n-focus) !important;
    box-shadow: 0 0 0 3px rgba(23, 105, 170, 0.16) !important;
    outline: 0;
}

body.f2n-storefront .aiz-main-wrapper label {
    color: #3b302a;
    font-weight: 600;
}

body.f2n-storefront .aiz-main-wrapper .card {
    border: 1px solid var(--f2n-border);
    border-radius: 16px !important;
    box-shadow: var(--f2n-shadow-sm);
    overflow: hidden;
}

body.f2n-storefront .aiz-main-wrapper .alert {
    border-radius: 12px !important;
}

body.f2n-storefront .aiz-main-wrapper .breadcrumb {
    color: var(--f2n-muted);
}

body.f2n-storefront .aiz-main-wrapper .breadcrumb a {
    color: #5f5149 !important;
}

/* Header */
body.f2n-storefront .aiz-main-wrapper .header-row-top {
    background: var(--f2n-brown-dark) !important;
}

body.f2n-storefront .aiz-main-wrapper .header-row-middle,
body.f2n-storefront .aiz-main-wrapper .header-row-middle .logo-bar-area {
    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 0 !important;
}

body.f2n-storefront .aiz-main-wrapper .header-row-middle {
    box-shadow: 0 5px 20px rgba(49, 29, 20, 0.08);
}

body.f2n-storefront .aiz-main-wrapper .header-row-middle .middle-text-color-visibility {
    color: #5f5149 !important;
    font-size: 13px !important;
    opacity: 1 !important;
}

body.f2n-storefront .aiz-main-wrapper .header-row-middle .logo-bar-area > .container > .d-flex {
    min-height: 82px;
}

body.f2n-storefront .aiz-main-wrapper #header-logo-preview {
    max-height: 46px !important;
    height: auto !important;
}

body.f2n-storefront .aiz-main-wrapper .front-header-search {
    background: transparent !important;
}

body.f2n-storefront .aiz-main-wrapper .front-header-search .search-input-box .form-control {
    height: 48px;
    border-radius: 999px !important;
    padding-left: 20px;
    padding-right: 48px;
    background: #fdfbf8;
}

body.f2n-storefront .aiz-main-wrapper .header-row-bottom {
    height: 54px !important;
    background: var(--f2n-brown) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}

body.f2n-storefront .aiz-main-wrapper .header-row-bottom .header_menu_links,
body.f2n-storefront .aiz-main-wrapper .header-row-bottom .bottom-text-color-visibility,
body.f2n-storefront .aiz-main-wrapper .header-row-bottom .text-reset {
    color: #fff7f0 !important;
}

body.f2n-storefront .aiz-main-wrapper .header-row-bottom .all-category,
body.f2n-storefront .aiz-main-wrapper .header-row-bottom [data-hover="dropdown"] {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

body.f2n-storefront .aiz-main-wrapper .header-row-bottom .all-category *,
body.f2n-storefront .aiz-main-wrapper .header-row-bottom [data-hover="dropdown"] * {
    color: #fff7f0 !important;
    opacity: 1 !important;
}

body.f2n-storefront .aiz-main-wrapper .typed-search-box,
body.f2n-storefront .aiz-main-wrapper .dropdown-menu {
    border: 1px solid var(--f2n-border);
    border-radius: 12px !important;
    box-shadow: var(--f2n-shadow-md) !important;
}

/* Bootstrap Select nests an options list with the same dropdown-menu class. */
body.f2n-storefront .aiz-main-wrapper .bootstrap-select .dropdown-menu.inner {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Homepage */
body.f2n-storefront.page-home .aiz-main-wrapper .home-banner-area {
    margin: 0 0 26px !important;
}

body.f2n-storefront.page-home .aiz-main-wrapper .home-banner-area .home-slider,
body.f2n-storefront.page-home .aiz-main-wrapper .home-banner-area .aiz-carousel,
body.f2n-storefront.page-home .aiz-main-wrapper .home-banner-area .carousel-box,
body.f2n-storefront.page-home .aiz-main-wrapper .home-banner-area .carousel-box > a > div {
    border-radius: 0;
    overflow: hidden;
}

body.f2n-storefront.page-home .aiz-main-wrapper .home-banner-area .carousel-box > a > div {
    height: 430px !important;
}

body.f2n-storefront.page-home .aiz-main-wrapper section,
body.f2n-storefront.page-home .aiz-main-wrapper #todays_deal,
body.f2n-storefront.page-home .aiz-main-wrapper #section_featured,
body.f2n-storefront.page-home .aiz-main-wrapper #section_best_selling,
body.f2n-storefront.page-home .aiz-main-wrapper #section_home_categories {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
}

body.f2n-storefront.page-home .aiz-main-wrapper #section_featured > section,
body.f2n-storefront.page-home .aiz-main-wrapper #section_best_selling > section,
body.f2n-storefront.page-home .aiz-main-wrapper #section_newest > section,
body.f2n-storefront.page-home .aiz-main-wrapper #section_home_categories section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Product rows need breathing room inside their own background panel. This is
   internal padding, not inter-section margin, so the transition stays clear. */
body.f2n-storefront.page-home .aiz-main-wrapper #section_featured,
body.f2n-storefront.page-home .aiz-main-wrapper #section_featured_preorder_products,
body.f2n-storefront.page-home .aiz-main-wrapper #section_best_selling,
body.f2n-storefront.page-home .aiz-main-wrapper #section_newest {
    padding-bottom: 28px !important;
}

body.f2n-storefront.page-home .aiz-main-wrapper #section_featured,
body.f2n-storefront.page-home .aiz-main-wrapper #section_home_categories {
    background: transparent !important;
}

/* Header-row titles only. These previously matched every h3 in the section,
   which includes each product-card name, and the ID selectors outranked the
   card's own type rules. */
body.f2n-storefront.page-home .aiz-main-wrapper section > .container > .d-flex.justify-content-between > h3,
body.f2n-storefront.page-home .aiz-main-wrapper #section_featured .d-flex.justify-content-between > h3,
body.f2n-storefront.page-home .aiz-main-wrapper #section_best_selling .d-flex.justify-content-between > h3 {
    font-size: 25px !important;
    line-height: 1.25;
}

body.f2n-storefront.page-home .aiz-main-wrapper section h3::after,
body.f2n-storefront.page-home .aiz-main-wrapper .aiz-card-box h3::after,
body.f2n-storefront.page-home .aiz-main-wrapper #section_featured h3::after,
body.f2n-storefront.page-home .aiz-main-wrapper #section_best_selling h3::after {
    content: "";
    display: block;
    width: 42px;
    height: 3px;
    margin-top: 10px;
    border-radius: 999px;
    background: var(--f2n-primary);
}

body.f2n-storefront.page-home .aiz-main-wrapper .home-banner-1 .carousel-box,
body.f2n-storefront.page-home .aiz-main-wrapper .home-banner-1 img,
body.f2n-storefront.page-home .aiz-main-wrapper .mobile-category-slider,
body.f2n-storefront.page-home .aiz-main-wrapper .category-slide {
    border-radius: 16px;
}

body.f2n-storefront.page-home .aiz-main-wrapper .category-slide {
    background: var(--f2n-surface);
    border: 1px solid var(--f2n-border) !important;
    box-shadow: var(--f2n-shadow-sm);
}

/* Product cards */
body.f2n-storefront .aiz-main-wrapper .carousel-box:has(.aiz-card-box),
body.f2n-storefront .aiz-main-wrapper #products-row > .col {
    border: 0 !important;
    background: transparent;
    padding: 8px !important;
}

body.f2n-storefront .aiz-main-wrapper .carousel-box:has(.aiz-card-box) > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.f2n-storefront .aiz-main-wrapper .carousel-box:has(.aiz-card-box)::before,
body.f2n-storefront .aiz-main-wrapper .carousel-box:has(.aiz-card-box)::after {
    display: none !important;
    content: none !important;
}

body.f2n-storefront .aiz-main-wrapper .aiz-carousel .slick-track {
    display: flex !important;
    align-items: stretch;
    background: transparent !important;
}

body.f2n-storefront .aiz-main-wrapper .aiz-carousel .slick-list,
body.f2n-storefront .aiz-main-wrapper .aiz-carousel .slick-slide,
body.f2n-storefront .aiz-main-wrapper .aiz-carousel .slick-slide > div {
    background: transparent !important;
}

body.f2n-storefront .aiz-main-wrapper .aiz-carousel .slick-slide {
    height: auto !important;
}

body.f2n-storefront .aiz-main-wrapper .aiz-carousel .slick-slide > div,
body.f2n-storefront .aiz-main-wrapper .aiz-carousel .carousel-box:has(.aiz-card-box) {
    height: 100%;
}

body.f2n-storefront .aiz-main-wrapper .aiz-card-box,
body.f2n-storefront .aiz-main-wrapper .f2n-product-card {
    height: 100% !important;
    padding: 0 !important;
    border: 1px solid var(--f2n-border);
    border-radius: 14px;
    background: var(--f2n-surface) !important;
    box-shadow: none;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

body.f2n-storefront .aiz-main-wrapper .aiz-card-box:hover,
body.f2n-storefront .aiz-main-wrapper .f2n-product-card:hover {
    transform: none;
    border-color: #d2c4ba;
    box-shadow: 0 8px 24px rgba(62, 39, 28, 0.09);
}

body.f2n-storefront .aiz-main-wrapper .aiz-card-box > .position-relative:first-child,
body.f2n-storefront .aiz-main-wrapper .f2n-product-card > .position-relative:first-child {
    width: 100%;
    height: auto !important;
    aspect-ratio: 1 / 1;
    border: 0 !important;
    border-radius: 13px 13px 0 0;
    background: var(--f2n-surface) !important;
}

body.f2n-storefront .aiz-main-wrapper .aiz-card-box .product-main-image,
body.f2n-storefront .aiz-main-wrapper .aiz-card-box .product-hover-image {
    width: 100%;
    height: 100%;
    padding: 0 !important;
    object-fit: contain;
}

body.f2n-storefront .aiz-main-wrapper .aiz-card-box > .p-2,
body.f2n-storefront .aiz-main-wrapper .aiz-card-box > .p-md-3 {
    padding: 18px 16px 16px !important;
}

body.f2n-storefront .aiz-main-wrapper .aiz-card-box h3 {
    height: auto !important;
    min-height: 44px;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    text-align: left !important;
}

body.f2n-storefront .aiz-main-wrapper .aiz-card-box h3::after {
    display: none !important;
    content: none !important;
}

body.f2n-storefront.page-home .aiz-main-wrapper section .aiz-card-box h3,
body.f2n-storefront.page-home .aiz-main-wrapper section .aiz-card-box h3 a,
body.f2n-storefront .aiz-main-wrapper .f2n-product-listing .aiz-card-box h3,
body.f2n-storefront .aiz-main-wrapper .f2n-product-listing .aiz-card-box h3 a {
    min-height: 44px;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
}

body.f2n-storefront .aiz-main-wrapper .aiz-card-box .fs-14.d-flex {
    justify-content: flex-start !important;
    margin-top: 10px !important;
    font-size: 16px !important;
}

body.f2n-storefront .aiz-main-wrapper .aiz-card-box .cart-btn {
    height: 44px !important;
    min-height: 44px;
    padding: 0 14px !important;
    border-radius: 10px 10px 0 0;
    background: var(--f2n-primary) !important;
    opacity: 1;
}

body.f2n-storefront .aiz-main-wrapper .aiz-card-box .cart-btn .cart-btn-text,
body.f2n-storefront .aiz-main-wrapper .aiz-card-box .cart-btn:hover .cart-btn-text {
    margin: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    line-height: 1.2;
}

body.f2n-storefront .aiz-main-wrapper .aiz-card-box .cart-btn > span:not(.cart-btn-text) {
    display: none !important;
}

body.f2n-storefront .aiz-main-wrapper .aiz-card-box .aiz-p-hov-icon a {
    width: 38px;
    height: 38px;
    margin: 6px 6px 0 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 5px 14px rgba(45, 27, 19, 0.14);
}

/* Product listing */
body.f2n-storefront .aiz-main-wrapper .f2n-product-listing {
    padding: 34px 0 64px;
}

body.f2n-storefront .aiz-main-wrapper .f2n-product-listing .collapse-sidebar {
    padding: 8px 12px 18px;
    border: 1px solid var(--f2n-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--f2n-shadow-sm);
}

body.f2n-storefront .aiz-main-wrapper .f2n-product-listing .border-bottom-listing-sidebar {
    border-color: var(--f2n-border) !important;
}

body.f2n-storefront .aiz-main-wrapper .f2n-product-listing h1 {
    font-size: 30px !important;
    line-height: 1.25 !important;
}

body.f2n-storefront .aiz-main-wrapper .f2n-product-listing .btn-col-filter {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0 !important;
    border: 1px solid var(--f2n-border);
    border-radius: 9px;
    background: #fff;
}

body.f2n-storefront .aiz-main-wrapper .f2n-product-listing #select_option_svg {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    margin-right: 10px;
}

body.f2n-storefront .aiz-main-wrapper .f2n-product-listing .bootstrap-select.form-control {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.f2n-storefront .aiz-main-wrapper .f2n-product-listing .bootstrap-select > .dropdown-toggle {
    height: 44px;
    min-height: 44px;
    margin-top: 0 !important;
    padding: 0 14px !important;
    border: 1px solid #cfc3b9 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.f2n-storefront .aiz-main-wrapper .f2n-product-listing .bootstrap-select .filter-option,
body.f2n-storefront .aiz-main-wrapper .f2n-product-listing .bootstrap-select .filter-option-inner {
    display: flex;
    height: 100%;
    align-items: center;
}

body.f2n-storefront .aiz-main-wrapper .f2n-product-listing .bootstrap-select .filter-option-inner-inner {
    width: 100%;
    line-height: 1.2;
    text-align: left;
}

body.f2n-storefront .aiz-main-wrapper .f2n-product-listing .btn-col-filter.active,
body.f2n-storefront .aiz-main-wrapper .f2n-product-listing .btn-col-filter.active-cols,
body.f2n-storefront .aiz-main-wrapper .f2n-product-listing .btn-col-filter:hover {
    background: var(--f2n-brown);
    border-color: var(--f2n-brown);
}

body.f2n-storefront .aiz-main-wrapper .f2n-product-listing #products-row {
    border: 0 !important;
    margin-top: 14px;
}

/* Product details */
body.f2n-storefront .aiz-main-wrapper .product-details {
    padding-top: 18px;
    background: var(--f2n-bg);
}

body.f2n-storefront .aiz-main-wrapper .product-details > .container > .pt-30px {
    padding: 28px !important;
    border: 1px solid var(--f2n-border);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--f2n-shadow-sm);
}

body.f2n-storefront .aiz-main-wrapper .product-details .product-slider-wrapper .gallery-container,
body.f2n-storefront .aiz-main-wrapper .product-details .product-slider-wrapper .main-image-container,
body.f2n-storefront .aiz-main-wrapper .product-details .product-slider-wrapper .swiper-slide {
    border-radius: 14px !important;
    background: var(--f2n-surface-soft);
}

body.f2n-storefront .aiz-main-wrapper .product-details h1 {
    font-size: 30px !important;
    line-height: 1.2;
    margin-top: 8px;
}

body.f2n-storefront .aiz-main-wrapper .product-details .f2n-product-summary {
    padding-left: 30px;
}

body.f2n-storefront .aiz-main-wrapper .product-details .f2n-product-summary > h1 {
    margin-bottom: 14px !important;
    font-weight: 750 !important;
}

body.f2n-storefront .aiz-main-wrapper .product-details .f2n-price-label {
    margin: 28px 0 9px;
    color: var(--f2n-subtle) !important;
    letter-spacing: 0.08em;
}

body.f2n-storefront .aiz-main-wrapper .product-details .f2n-price-panel {
    padding: 22px !important;
    border: 1px solid #eaded3;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #fffaf6 0%, #fdf5ee 100%) !important;
}

body.f2n-storefront .aiz-main-wrapper .product-details .f2n-current-price {
    font-size: 28px !important;
    line-height: 1.15;
    font-weight: 800 !important;
    letter-spacing: -0.035em;
}

body.f2n-storefront .aiz-main-wrapper .product-details .f2n-member-values {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 17px;
    padding-top: 15px;
    border-top: 1px solid rgba(118, 79, 57, 0.13);
}

body.f2n-storefront .aiz-main-wrapper .product-details .f2n-member-values-label {
    margin-right: 3px;
    color: var(--f2n-muted);
    font-size: 13px;
    font-weight: 700;
}

body.f2n-storefront .aiz-main-wrapper .product-details .f2n-value-pill {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    gap: 4px;
    padding: 5px 11px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

body.f2n-storefront .aiz-main-wrapper .product-details .f2n-value-pill span {
    font-size: 11px;
    letter-spacing: 0.04em;
}

body.f2n-storefront .aiz-main-wrapper .product-details .f2n-value-pill-bv {
    border-color: #b9dfc7;
    background: #e9f7ee;
    color: #246c3e;
}

body.f2n-storefront .aiz-main-wrapper .product-details .f2n-value-pill-pv {
    border-color: #d9c6ed;
    background: #f3ecfb;
    color: #7041a1;
}

body.f2n-storefront .aiz-main-wrapper .product-details .f2n-purchase-panel {
    padding: 20px !important;
    border: 1px solid var(--f2n-border) !important;
    border-radius: 16px !important;
    background: #fff;
    box-shadow: 0 9px 26px rgba(62, 39, 28, 0.07);
}

body.f2n-storefront .aiz-main-wrapper .product-details .f2n-purchase-panel .aiz-plus-minus {
    min-height: 42px;
    border-color: #d8ccc2 !important;
    border-radius: 10px !important;
    background: var(--f2n-surface-soft);
}

body.f2n-storefront .aiz-main-wrapper .product-details .f2n-purchase-panel .input-number {
    background: transparent;
}

body.f2n-storefront .aiz-main-wrapper .product-details .f2n-purchase-actions button {
    min-height: 52px;
    border-radius: 11px !important;
    box-shadow: none;
}

body.f2n-storefront .aiz-main-wrapper .product-details .f2n-purchase-actions .buy-now {
    background: var(--f2n-brown) !important;
}

body.f2n-storefront .aiz-main-wrapper .product-details .f2n-purchase-actions .buy-now:hover {
    background: var(--f2n-brown-dark) !important;
}

body.f2n-storefront .aiz-main-wrapper .product-details .f2n-purchase-actions .add-to-cart {
    border: 1px solid #e5b9ae !important;
    background: #fff2ef !important;
    color: var(--f2n-primary) !important;
}

body.f2n-storefront .aiz-main-wrapper .product-details .f2n-purchase-actions .add-to-cart:hover {
    border-color: var(--f2n-primary) !important;
    background: var(--f2n-primary) !important;
    color: #fff !important;
}

body.f2n-storefront .aiz-main-wrapper .product-details .f2n-shipping-summary {
    padding: 12px 14px;
    border-radius: 10px;
    background: #f8f4f0;
}

body.f2n-storefront .aiz-main-wrapper .product-details .f2n-product-benefits {
    margin-top: 14px;
    padding: 14px 16px 16px !important;
    border: 1px solid var(--f2n-border);
    border-radius: 12px;
    background: #fff;
}

body.f2n-storefront .aiz-main-wrapper .product-details .f2n-product-benefits ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
}

body.f2n-storefront .aiz-main-wrapper .product-details .f2n-product-benefits li {
    margin: 0 !important;
}

body.f2n-storefront .aiz-main-wrapper .product-details .right-side-cws button {
    min-height: 36px;
    padding: 7px 10px !important;
    border: 1px solid var(--f2n-border) !important;
    border-radius: 9px;
    color: var(--f2n-muted) !important;
}

body.f2n-storefront .aiz-main-wrapper .product-details .right-side-cws button:hover {
    background: var(--f2n-surface-soft) !important;
    color: var(--f2n-ink) !important;
}

body.f2n-storefront .aiz-main-wrapper .product-details .product-price,
body.f2n-storefront .aiz-main-wrapper .product-details [class*="product-price"] {
    color: var(--f2n-primary) !important;
}

body.f2n-storefront .aiz-main-wrapper .product-details .bg-dark {
    background: var(--f2n-brown) !important;
}

body.f2n-storefront .aiz-main-wrapper .product-details .bg-dark .text-orange {
    color: #fff7f0 !important;
}

body.f2n-storefront .aiz-main-wrapper .product-details-nav-tab .nav-tab-header {
    background: transparent !important;
}

body.f2n-storefront .aiz-main-wrapper .product-details-nav-tab .nav-link {
    color: var(--f2n-muted) !important;
}

body.f2n-storefront .aiz-main-wrapper .product-details-nav-tab .nav-link.active,
body.f2n-storefront .aiz-main-wrapper .product-details-nav-tab .nav-link:hover {
    color: var(--f2n-ink) !important;
}

body.f2n-storefront .aiz-main-wrapper .product-details-nav-tab section > .bg-white,
body.f2n-storefront .aiz-main-wrapper .product-details-nav-tab #description > div {
    border-color: var(--f2n-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--f2n-shadow-sm);
}

/* Cart and checkout */
body.f2n-storefront .aiz-main-wrapper .f2n-cart,
body.f2n-storefront .aiz-main-wrapper .f2n-checkout {
    margin: 0 !important;
    padding: 42px 0 76px;
    background: var(--f2n-bg) !important;
}

body.f2n-storefront .aiz-main-wrapper .f2n-cart .bg-white,
body.f2n-storefront .aiz-main-wrapper .f2n-checkout .bg-white {
    background: var(--f2n-surface) !important;
}

body.f2n-storefront .aiz-main-wrapper .f2n-cart .col-lg-8 > .bg-white {
    border: 1px solid var(--f2n-border);
    border-radius: 16px;
    box-shadow: var(--f2n-shadow-sm);
}

body.f2n-storefront .aiz-main-wrapper .f2n-cart .list-group-item {
    padding: 20px 0 !important;
    border-color: var(--f2n-border);
}

body.f2n-storefront .aiz-main-wrapper .f2n-cart .size-64px {
    width: 76px !important;
    height: 76px !important;
    padding: 5px;
    border: 1px solid var(--f2n-border);
    border-radius: 10px;
    background: var(--f2n-surface-soft);
}

body.f2n-storefront .aiz-main-wrapper .f2n-checkout #accordioncCheckoutInfo > .card {
    margin-bottom: 22px !important;
    overflow: visible !important;
}

body.f2n-storefront .aiz-main-wrapper .f2n-checkout .card-header {
    min-height: 68px;
    padding: 20px 24px !important;
    border-bottom: 1px solid var(--f2n-border) !important;
    border-radius: 16px 16px 0 0;
    background: var(--f2n-surface-soft);
}

body.f2n-storefront .aiz-main-wrapper .f2n-checkout .card-header .fs-19 {
    font-size: 18px !important;
    color: var(--f2n-ink);
}

body.f2n-storefront .aiz-main-wrapper .f2n-checkout .card-body {
    padding: 26px !important;
}

body.f2n-storefront .aiz-main-wrapper .f2n-checkout #shipping_info .row > [class*="col-md-2"] {
    flex: 0 0 100%;
    max-width: 100%;
    margin-top: 0 !important;
}

body.f2n-storefront .aiz-main-wrapper .f2n-checkout #shipping_info .row > [class*="col-md-10"] {
    flex: 0 0 100%;
    max-width: 100%;
}

body.f2n-storefront .aiz-main-wrapper .f2n-checkout #shipping_info label {
    margin-bottom: 7px;
}

body.f2n-storefront .aiz-main-wrapper #cart_summary .card {
    position: relative;
    border: 1px solid var(--f2n-border);
    border-radius: 16px !important;
    box-shadow: var(--f2n-shadow-md);
}

body.f2n-storefront .aiz-main-wrapper #cart_summary .card-header {
    padding: 24px 24px 10px !important;
    background: #fff;
}

body.f2n-storefront .aiz-main-wrapper #cart_summary .card-header h3 {
    font-size: 21px !important;
}

body.f2n-storefront .aiz-main-wrapper #cart_summary .card-body {
    padding: 16px 24px 24px !important;
}

body.f2n-storefront .aiz-main-wrapper #cart_summary .bg-primary {
    border-radius: 10px;
    background: var(--f2n-brown) !important;
}

body.f2n-storefront .aiz-main-wrapper #cart_summary .cart-total th,
body.f2n-storefront .aiz-main-wrapper #cart_summary .cart-total td {
    padding-top: 18px !important;
    border-top: 1px solid var(--f2n-border) !important;
    font-size: 18px !important;
}

body.f2n-storefront .aiz-main-wrapper .aiz-megabox .aiz-megabox-elem {
    min-height: 82px;
    border: 1px solid var(--f2n-border) !important;
    border-radius: 12px !important;
    background: #fff;
}

body.f2n-storefront .aiz-main-wrapper .aiz-megabox > input:checked ~ .aiz-megabox-elem {
    border: 2px solid var(--f2n-primary) !important;
    background: #fff8f5;
    box-shadow: 0 0 0 3px rgba(198, 63, 44, 0.1);
}

body.f2n-storefront .aiz-main-wrapper #submitOrderBtn,
body.f2n-storefront .aiz-main-wrapper #walletBtn {
    min-width: 190px;
    min-height: 52px;
    padding: 0 24px !important;
    font-size: 15px !important;
}

/* Modals */
body.f2n-storefront .modal-content {
    border: 1px solid var(--f2n-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 80px rgba(36, 22, 16, 0.26);
    overflow: hidden;
}

body.f2n-storefront .modal-header {
    padding: 22px 24px;
    border-bottom: 1px solid var(--f2n-border);
    background: var(--f2n-surface-soft);
}

body.f2n-storefront .modal-title {
    color: var(--f2n-ink) !important;
    font-family: var(--f2n-display);
    font-size: 22px;
    font-weight: 750;
    letter-spacing: -.015em;
}

body.f2n-storefront .modal-body {
    padding: 24px;
}

body.f2n-storefront #guest-registration-modal .modal-dialog,
body.f2n-storefront #checkout-login-modal .modal-dialog,
body.f2n-storefront #login_modal .modal-dialog {
    max-width: 520px;
}

body.f2n-storefront #guest-registration-modal .form-control,
body.f2n-storefront #checkout-login-modal .form-control,
body.f2n-storefront #login_modal .form-control {
    min-height: 50px;
    border: 1px solid #cfc3b9 !important;
    border-radius: 10px !important;
    color: var(--f2n-ink);
}

body.f2n-storefront .modal .close {
    width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #eee6df;
    color: #3a2d27;
    opacity: 1;
}

/* Footer and mobile navigation */
body.f2n-storefront .aiz-main-wrapper .footer-widget {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    background: var(--f2n-brown-dark) !important;
    color: #f7eee7 !important;
}

body.f2n-storefront.page-home .aiz-main-wrapper section.footer-widget {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.f2n-storefront .aiz-main-wrapper footer {
    margin: 0 !important;
    background: var(--f2n-brown-dark) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

body.f2n-storefront .aiz-main-wrapper footer > .container,
body.f2n-storefront .aiz-main-wrapper footer > .layout-container {
    background: transparent !important;
}

body.f2n-storefront .aiz-main-wrapper .footer-widget h4,
body.f2n-storefront .aiz-main-wrapper .footer-widget .aiz-accordion {
    color: #fff8f2 !important;
    opacity: 1 !important;
    letter-spacing: 0.04em;
}

body.f2n-storefront .aiz-main-wrapper footer .footer-widget h4,
body.f2n-storefront .aiz-main-wrapper footer .footer-widget h4.opacity-50,
body.f2n-storefront .aiz-main-wrapper footer .footer-widget .fw-700 {
    color: #fff8f2 !important;
    opacity: 1 !important;
}

body.f2n-storefront .aiz-main-wrapper .footer-widget p,
body.f2n-storefront .aiz-main-wrapper .footer-widget li,
body.f2n-storefront .aiz-main-wrapper .footer-widget a,
body.f2n-storefront .aiz-main-wrapper .footer-widget .text-reset,
body.f2n-storefront .aiz-main-wrapper .footer-widget .text-light {
    color: #d9c9bd !important;
    opacity: 1 !important;
}

body.f2n-storefront .aiz-main-wrapper footer .footer-widget p,
body.f2n-storefront .aiz-main-wrapper footer .footer-widget li,
body.f2n-storefront .aiz-main-wrapper footer .footer-widget a {
    color: #d9c9bd !important;
}

body.f2n-storefront .aiz-main-wrapper .footer-widget a:hover {
    color: #fff !important;
}

body.f2n-storefront .aiz-main-wrapper .aiz-mobile-bottom-nav {
    width: min(430px, calc(100% - 20px));
    bottom: 10px;
    border: 1px solid var(--f2n-border) !important;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 12px 35px rgba(45, 27, 19, 0.18);
    backdrop-filter: blur(12px);
    overflow: hidden;
}

body.f2n-storefront .aiz-main-wrapper .aiz-mobile-bottom-nav a {
    min-height: 62px;
    padding-top: 10px !important;
    padding-bottom: 8px !important;
    color: #5e5149 !important;
}

body.f2n-storefront .aiz-main-wrapper .aiz-mobile-bottom-nav .fs-10 {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #51453e !important;
}

body.f2n-storefront .aiz-main-wrapper .aiz-mobile-bottom-nav .text-primary {
    color: var(--f2n-primary) !important;
}

body.f2n-storefront .aiz-cookie-alert > div {
    border: 1px solid var(--f2n-border);
    border-radius: 16px !important;
    background: #fff !important;
    color: var(--f2n-ink) !important;
}

body.f2n-storefront .aiz-cookie-alert [class*="text-"] {
    color: var(--f2n-ink) !important;
}

body.f2n-storefront .aiz-cookie-alert .btn {
    border-radius: 10px !important;
}

/* These legacy fixed controls cover product and checkout content. Their links
   remain available through the primary navigation and storefront sections. */
body.f2n-storefront .floating-buttons-section {
    display: none !important;
}

body.f2n-storefront .floating-buttons-section:hover,
body.f2n-storefront .floating-buttons-section:focus-within {
    opacity: 1;
}

body.f2n-storefront .floating-buttons-section .aiz-floating-button {
    margin-bottom: 8px;
}

body.f2n-storefront .floating-buttons-section .circle {
    width: 44px !important;
    height: 44px !important;
    border: 2px solid rgba(255, 255, 255, 0.85);
    background: var(--f2n-primary) !important;
    box-shadow: 0 7px 18px rgba(58, 30, 21, 0.18);
}

body.f2n-storefront .floating-buttons-section .text {
    min-height: 44px;
    border-radius: 0 10px 10px 0;
    background: var(--f2n-brown) !important;
    color: #fff !important;
}

body.f2n-storefront .aiz-cookie-alert {
    max-width: 360px;
}

body.f2n-storefront .aiz-cookie-alert > div {
    padding: 18px !important;
    box-shadow: 0 14px 34px rgba(45, 27, 19, 0.16);
}

/* Authenticated customer portal */
body.f2n-storefront .f2n-user-portal {
    width: 100%;
    padding: 0;
}

body.f2n-storefront .f2n-user-portal-shell {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
}

body.f2n-storefront .f2n-user-portal .f2n-user-sidebar-column {
    position: sticky !important;
    top: 0;
    flex: 0 0 315px;
    width: 315px;
    min-width: 0;
    max-width: 315px;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    background: transparent;
    border-right: 1px solid #ebe3de;
    overflow: hidden;
    transition: flex-basis .2s ease, width .2s ease, max-width .2s ease, opacity .15s ease;
}

body.f2n-storefront .f2n-user-portal .aiz-user-sidenav-wrap {
    width: 100%;
    max-width: none;
    height: 100%;
    overflow: hidden;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

body.f2n-storefront .f2n-user-portal .aiz-user-sidenav {
    width: 100%;
    height: 100%;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

body.f2n-storefront .aiz-user-sidenav-wrap .aiz-user-sidenav .aiz-side-nav-link {
    min-height: 36px;
    margin-bottom: 0;
    padding: 7px 14px;
    line-height: 1.25;
}

body.f2n-storefront .aiz-user-sidenav-wrap .aiz-user-sidenav .level-2 .aiz-side-nav-link {
    min-height: 32px;
    padding: 5px 14px 5px 46px;
}

body.f2n-storefront .aiz-user-sidenav-wrap .aiz-user-sidenav .level-2 .aiz-side-nav-link::after {
    left: 32px;
}

[dir="rtl"] body.f2n-storefront .aiz-user-sidenav-wrap .aiz-user-sidenav .level-2 .aiz-side-nav-link {
    padding: 5px 46px 5px 14px;
}

[dir="rtl"] body.f2n-storefront .aiz-user-sidenav-wrap .aiz-user-sidenav .level-2 .aiz-side-nav-link::after {
    right: 32px;
    left: auto;
}

body.f2n-storefront .aiz-user-sidenav .level-2 .portal-submenu-icon-link::after {
    display: none;
}

body.f2n-storefront .aiz-user-sidenav .portal-submenu-icon {
    position: absolute;
    left: 27px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    font-size: 16px;
    text-align: center;
    color: inherit;
}

[dir="rtl"] body.f2n-storefront .aiz-user-sidenav .portal-submenu-icon {
    left: auto;
    right: 27px;
}

body.f2n-storefront .f2n-user-portal .aiz-user-panel {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin-left: 0;
    padding: 24px clamp(20px, 2.5vw, 48px) 48px;
    transition: margin .2s ease;
}

/* Page sections sit directly on the portal canvas; nested cards remain available
   for summaries, metrics, and other intentional grouped content. */
body.f2n-storefront .f2n-user-portal .aiz-user-panel > .card {
    background: transparent;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.f2n-storefront .f2n-user-portal .aiz-user-panel > .card > .card-header,
body.f2n-storefront .f2n-user-portal .aiz-user-panel > .card > .card-body {
    padding-right: 0;
    padding-left: 0;
    background: transparent;
}

/* Consistent, compact portal page chrome and data controls. */
body.f2n-storefront .f2n-user-portal .aiz-titlebar {
    margin-bottom: 20px !important;
}

body.f2n-storefront .f2n-user-portal .aiz-titlebar h1 {
    font-size: clamp(21px, 2vw, 27px) !important;
    line-height: 1.2;
    letter-spacing: -.02em;
}

body.f2n-storefront .f2n-user-portal .aiz-titlebar p {
    max-width: 760px;
    font-size: 14px;
    line-height: 1.55;
}

body.f2n-storefront .f2n-user-portal .f2n-portal-data-card > .card-header,
body.f2n-storefront .f2n-user-portal .f2n-portal-section-card > .card-header {
    gap: 10px;
    padding-top: 0;
    padding-bottom: 14px;
}

body.f2n-storefront .f2n-user-portal .f2n-portal-count-badge {
    padding: 7px 10px;
    border: 1px solid #f0c9bd;
    border-radius: 999px;
    background: #fbe4dc !important;
    color: #963527 !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

body.f2n-storefront .f2n-user-portal .f2n-portal-table-shell,
body.f2n-storefront .f2n-user-portal .f2n-portal-section-card > .table-responsive {
    overflow: hidden;
    border: 1px solid #e9e1dc;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(53, 35, 26, .045);
}

body.f2n-storefront .f2n-user-portal .f2n-portal-table-shell > .table-responsive {
    overflow-x: auto;
}

body.f2n-storefront .f2n-user-portal table.footable > thead > tr:not(.footable-filtering) > th {
    padding: 11px 14px !important;
    border-top: 0;
    border-bottom: 1px solid #e9e1dc;
    background: #faf8f6;
    color: #655851;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
}

body.f2n-storefront .f2n-user-portal table.footable > tbody > tr > td {
    padding: 12px 14px !important;
    border-top-color: #eee8e4;
    vertical-align: middle;
    line-height: 1.4;
}

body.f2n-storefront .f2n-user-portal table.footable > tbody > tr:hover > td {
    background: #fcfaf9;
}

body.f2n-storefront .f2n-user-portal table.footable > tbody > tr.footable-empty > td {
    padding: 36px 18px !important;
    color: #887b74;
    font-size: 14px;
}

body.f2n-storefront .f2n-user-portal table.footable > thead > tr.footable-filtering > th {
    padding: 12px 14px !important;
    border: 0;
    border-bottom: 1px solid #e9e1dc;
    background: #fff;
}

body.f2n-storefront .f2n-user-portal .footable-filtering .form-inline {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

body.f2n-storefront .f2n-user-portal .footable-filtering .form-group {
    width: min(100%, 430px);
    margin: 0;
}

body.f2n-storefront .f2n-user-portal .footable-filtering .input-group {
    display: flex;
    flex-wrap: nowrap;
    width: 100% !important;
}

body.f2n-storefront .f2n-user-portal .footable-filtering .form-control {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    height: 42px;
    min-height: 42px;
    padding: 8px 12px !important;
    border-color: #d9cec7 !important;
    border-radius: 10px 0 0 10px !important;
    font-size: 14px;
    box-shadow: none !important;
}

body.f2n-storefront .f2n-user-portal .footable-filtering .input-group-btn,
body.f2n-storefront .f2n-user-portal .footable-filtering .input-group-append {
    display: flex;
    flex: 0 0 auto;
    margin-left: -1px;
}

body.f2n-storefront .f2n-user-portal .footable-filtering .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
}

body.f2n-storefront .f2n-user-portal .footable-filtering .btn:last-child {
    border-radius: 0 10px 10px 0 !important;
}

body.f2n-storefront .f2n-user-portal .fooicon {
    top: 0;
    font-family: "Line Awesome Free" !important;
    font-weight: 900;
}

body.f2n-storefront .f2n-user-portal .fooicon-search::before { content: "\f002"; }
body.f2n-storefront .f2n-user-portal .fooicon-remove::before { content: "\f00d"; }
body.f2n-storefront .f2n-user-portal .fooicon-plus::before { content: "\f067"; }
body.f2n-storefront .f2n-user-portal .fooicon-minus::before { content: "\f068"; }
body.f2n-storefront .f2n-user-portal .fooicon-sort::before { content: "\f0dc"; }
body.f2n-storefront .f2n-user-portal .fooicon-sort-asc::before { content: "\f0de"; }
body.f2n-storefront .f2n-user-portal .fooicon-sort-desc::before { content: "\f0dd"; }

body.f2n-storefront .f2n-user-portal table.footable > tfoot > tr.footable-paging > td {
    padding: 10px 14px 14px !important;
    border-top: 1px solid #e9e1dc;
}

/* Sponsor-link controls retain a single joined shape without oversized actions. */
body.f2n-storefront .f2n-user-portal .affiliate-link-field {
    min-width: 0;
    height: 42px;
    min-height: 42px;
    padding: 8px 12px !important;
    font-size: 13px;
}

body.f2n-storefront .f2n-user-portal .affiliate-link-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0 !important;
    transform: none !important;
}

body.f2n-storefront .f2n-user-portal .affiliate-joined-link {
    display: flex;
    flex-wrap: nowrap;
    max-width: 900px;
}

body.f2n-storefront .f2n-user-portal .affiliate-joined-link > .affiliate-link-field {
    flex: 1 1 auto;
    width: 1%;
    border-radius: 10px 0 0 10px !important;
}

body.f2n-storefront .f2n-user-portal .affiliate-joined-link .input-group-append {
    display: flex;
    flex: 0 0 auto;
    margin-left: -1px;
}

body.f2n-storefront .f2n-user-portal .affiliate-joined-link .affiliate-link-action {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
    min-height: 42px;
    border-radius: 0 !important;
}

body.f2n-storefront .f2n-user-portal .affiliate-joined-link .affiliate-link-action:last-child {
    border-radius: 0 10px 10px 0 !important;
}

body.f2n-storefront .f2n-user-portal .affiliate-product-filter .form-control,
body.f2n-storefront .f2n-user-portal .affiliate-product-filter .bootstrap-select > .dropdown-toggle,
body.f2n-storefront .f2n-user-portal .affiliate-product-filter .affiliate-filter-search {
    min-height: 42px;
    font-size: 14px;
}

body.f2n-storefront .f2n-user-portal .affiliate-product-filter .bootstrap-select.form-control {
    min-height: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent;
}

body.f2n-storefront .f2n-user-portal .affiliate-product-filter .bootstrap-select .filter-option-inner-inner,
body.f2n-storefront .f2n-user-portal .affiliate-product-filter .bootstrap-select > .dropdown-toggle,
body.f2n-storefront .f2n-user-portal .affiliate-product-filter .bootstrap-select .dropdown-item {
    font-size: 14px;
    font-weight: 400 !important;
}

body.f2n-storefront .f2n-user-portal .affiliate-products-table {
    table-layout: fixed;
}

body.f2n-storefront .f2n-user-portal .affiliate-products-table th:first-child,
body.f2n-storefront .f2n-user-portal .affiliate-products-table td:first-child {
    width: 33.333%;
}

body.f2n-storefront .f2n-user-portal .affiliate-products-table th:nth-child(2),
body.f2n-storefront .f2n-user-portal .affiliate-products-table td:nth-child(2) {
    width: 66.667%;
}

body.f2n-storefront .f2n-user-portal .affiliate-product-name {
    font-weight: 400 !important;
}

body.f2n-storefront .f2n-user-portal .affiliate-product-link-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

body.f2n-storefront .f2n-user-portal .affiliate-product-url {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 13px;
    font-weight: 400;
}

body.f2n-storefront .f2n-user-portal .affiliate-product-copy,
body.f2n-storefront .f2n-user-portal .affiliate-product-open {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
    min-height: 36px;
    border-radius: 8px !important;
}

body.f2n-storefront .f2n-user-portal-controls {
    display: flex;
    align-items: center;
    min-height: 32px;
    margin-bottom: 6px;
}

body.f2n-storefront .f2n-user-sidebar-toggle {
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid #e4d8d1;
    border-radius: 10px;
    background: #fff;
    color: #473b35;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(55, 38, 29, .05);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

body.f2n-storefront .f2n-user-sidebar-toggle:hover,
body.f2n-storefront .f2n-user-sidebar-toggle:focus-visible {
    border-color: var(--f2n-primary);
    color: var(--f2n-primary);
    outline: none;
}

body.f2n-storefront .f2n-user-sidebar-toggle i {
    font-size: 18px;
}

body.f2n-storefront .f2n-user-sidebar-toggle[data-portal-sidebar-toggle] {
    justify-content: center;
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border-color: transparent;
    border-radius: 7px;
    background: transparent;
    box-shadow: none;
}

body.f2n-storefront .f2n-user-sidebar-toggle[data-portal-sidebar-toggle]:hover,
body.f2n-storefront .f2n-user-sidebar-toggle[data-portal-sidebar-toggle]:focus-visible {
    border-color: #e4d8d1;
    background: #fff;
}

@media (min-width: 1200px) {
    body.f2n-storefront .f2n-user-portal-shell.is-sidebar-collapsed .f2n-user-sidebar-column {
        flex-basis: 0;
        width: 0;
        max-width: 0;
        opacity: 0;
        pointer-events: none;
    }

    body.f2n-storefront .f2n-user-portal-shell.is-sidebar-collapsed .aiz-user-panel {
        margin-left: 0;
    }

    [dir="rtl"] body.f2n-storefront .f2n-user-portal-shell.is-sidebar-collapsed .aiz-user-panel {
        margin-right: 0;
    }
}

body.f2n-storefront .f2n-user-portal .aiz-user-panel[aria-busy="true"] {
    pointer-events: none;
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

body.f2n-storefront .f2n-user-portal .f2n-profile-form .input-group-text {
    background: #f6eee8;
    color: var(--f2n-primary);
    cursor: pointer;
    white-space: nowrap;
}

body.f2n-storefront .f2n-user-portal .f2n-profile-photo-control {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

body.f2n-storefront .f2n-user-portal .f2n-profile-photo-current {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border: 1px solid var(--f2n-border);
    border-radius: 50%;
    object-fit: cover;
}

body.f2n-storefront .f2n-user-portal .f2n-profile-avatar-options {
    display: grid;
    grid-template-columns: repeat(6, 58px);
    gap: 10px;
}

body.f2n-storefront .f2n-user-portal .f2n-profile-avatar-group + .f2n-profile-avatar-group {
    margin-top: 14px;
}

body.f2n-storefront .f2n-user-portal .f2n-profile-avatar-group-label {
    margin-bottom: 7px;
    color: #75675e;
    font-size: 12px;
    font-weight: 600;
}

body.f2n-storefront .f2n-user-portal .f2n-profile-avatar-option label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: 0;
    padding: 3px;
    border: 1px solid var(--f2n-border);
    border-radius: 10px;
    background: #fff;
    font-weight: 400;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

body.f2n-storefront .f2n-user-portal .f2n-profile-avatar-option label:hover {
    border-color: var(--f2n-primary);
}

body.f2n-storefront .f2n-user-portal .f2n-profile-avatar-option input:focus + label,
body.f2n-storefront .f2n-user-portal .f2n-profile-avatar-option input:checked + label {
    border-color: var(--f2n-primary);
    background: #fff7f2;
    box-shadow: 0 0 0 3px rgba(243, 71, 0, .12);
}

body.f2n-storefront .f2n-user-portal .f2n-profile-avatar-option img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

body.f2n-storefront .f2n-user-portal .f2n-profile-photo-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    color: #75675e;
    font-size: 12px;
}

body.f2n-storefront .f2n-user-portal .f2n-profile-photo-divider::before,
body.f2n-storefront .f2n-user-portal .f2n-profile-photo-divider::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--f2n-border);
}

body.f2n-storefront .f2n-user-portal .f2n-profile-photo-input {
    padding: 4px 6px !important;
    cursor: pointer;
}

@media (max-width: 575.98px) {
    body.f2n-storefront .f2n-user-portal .f2n-profile-photo-control {
        display: block;
    }

    body.f2n-storefront .f2n-user-portal .f2n-profile-photo-current {
        margin-bottom: 12px;
    }

    body.f2n-storefront .f2n-user-portal .f2n-profile-avatar-options {
        grid-template-columns: repeat(4, 58px);
    }
}

[dir="rtl"] body.f2n-storefront .f2n-user-portal .aiz-user-panel {
    margin-right: 0;
    margin-left: 0;
}

@media (max-width: 1199.98px) {
    body.f2n-storefront .f2n-user-portal {
        padding: 0;
    }

    body.f2n-storefront .f2n-user-portal-shell {
        display: block !important;
    }

    body.f2n-storefront .f2n-user-portal .f2n-user-sidebar-column {
        display: none;
    }

    body.f2n-storefront .f2n-user-portal .aiz-user-panel {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
        padding: 28px 20px 48px;
    }
}

/* Responsive */
@media (max-width: 1199.98px) {
    body.f2n-storefront .aiz-main-wrapper .header-row-middle .logo-bar-area > .container > .d-flex {
        min-height: 70px;
    }

    body.f2n-storefront .aiz-main-wrapper .f2n-product-listing .collapse-sidebar {
        border-radius: 0;
    }
}

@media (max-width: 767.98px) {
    body.f2n-storefront {
        font-size: 14px;
        padding-bottom: 78px;
    }

    body.f2n-storefront .aiz-main-wrapper .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    body.f2n-storefront .f2n-user-portal {
        padding: 0;
    }

    body.f2n-storefront .f2n-user-portal .aiz-user-panel {
        padding: 20px 16px 40px;
    }

    body.f2n-storefront .f2n-user-portal .f2n-portal-data-card > .card-header {
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    body.f2n-storefront .f2n-user-portal .f2n-portal-table-shell,
    body.f2n-storefront .f2n-user-portal .f2n-portal-section-card > .table-responsive {
        overflow-x: auto;
        border-radius: 12px;
    }

    body.f2n-storefront .f2n-user-portal .affiliate-products-table {
        min-width: 600px;
    }

    body.f2n-storefront .aiz-main-wrapper #header-logo-preview {
        max-height: 36px !important;
    }

    body.f2n-storefront.page-home .aiz-main-wrapper .home-banner-area {
        margin: 0 0 20px !important;
    }

    body.f2n-storefront.page-home .aiz-main-wrapper .home-banner-area .carousel-box > a > div {
        height: 220px !important;
        border-radius: 0;
    }

    body.f2n-storefront.page-home .aiz-main-wrapper section,
    body.f2n-storefront.page-home .aiz-main-wrapper #todays_deal,
    body.f2n-storefront.page-home .aiz-main-wrapper #section_featured,
    body.f2n-storefront.page-home .aiz-main-wrapper #section_best_selling,
    body.f2n-storefront.page-home .aiz-main-wrapper #section_home_categories {
        margin-top: 12px !important;
        margin-bottom: 12px !important;
    }

    body.f2n-storefront.page-home .aiz-main-wrapper #section_featured,
    body.f2n-storefront.page-home .aiz-main-wrapper #section_featured_preorder_products,
    body.f2n-storefront.page-home .aiz-main-wrapper #section_best_selling,
    body.f2n-storefront.page-home .aiz-main-wrapper #section_newest {
        padding-bottom: 20px !important;
    }

    body.f2n-storefront.page-home .aiz-main-wrapper section h3,
    body.f2n-storefront.page-home .aiz-main-wrapper #section_featured h3,
    body.f2n-storefront.page-home .aiz-main-wrapper #section_best_selling h3 {
        font-size: 21px !important;
    }

    body.f2n-storefront .aiz-main-wrapper .aiz-card-box,
    body.f2n-storefront .aiz-main-wrapper .f2n-product-card {
        padding: 8px !important;
        border-radius: 12px;
    }

    body.f2n-storefront .aiz-main-wrapper .aiz-card-box > .position-relative:first-child,
    body.f2n-storefront .aiz-main-wrapper .f2n-product-card > .position-relative:first-child {
        height: auto !important;
        aspect-ratio: 1 / 1;
    }

    body.f2n-storefront .aiz-main-wrapper .aiz-card-box h3 {
        min-height: 42px;
        font-size: 13px !important;
    }

    body.f2n-storefront .aiz-main-wrapper .f2n-product-listing {
        padding: 20px 0 42px;
    }

    body.f2n-storefront .aiz-main-wrapper .f2n-product-listing h1 {
        font-size: 24px !important;
    }

    body.f2n-storefront .aiz-main-wrapper .product-details > .container > .pt-30px {
        padding: 18px !important;
        border-radius: 14px;
    }

    body.f2n-storefront .aiz-main-wrapper .product-details h1 {
        font-size: 24px !important;
    }

    body.f2n-storefront .aiz-main-wrapper .product-details .f2n-product-summary {
        padding-left: 15px;
        padding-top: 10px;
    }

    body.f2n-storefront .aiz-main-wrapper .product-details .f2n-current-price {
        font-size: 24px !important;
    }

    body.f2n-storefront .aiz-main-wrapper .product-details .f2n-price-panel,
    body.f2n-storefront .aiz-main-wrapper .product-details .f2n-purchase-panel {
        padding: 16px !important;
    }

    body.f2n-storefront .aiz-main-wrapper .f2n-cart,
    body.f2n-storefront .aiz-main-wrapper .f2n-checkout {
        padding: 24px 0 54px;
    }

    body.f2n-storefront .aiz-main-wrapper .f2n-checkout .card-header,
    body.f2n-storefront .aiz-main-wrapper .f2n-checkout .card-body {
        padding: 18px !important;
    }

    body.f2n-storefront .aiz-main-wrapper #submitOrderBtn,
    body.f2n-storefront .aiz-main-wrapper #walletBtn {
        width: 100%;
        min-width: 0;
    }

    body.f2n-storefront .modal-dialog {
        margin: 12px;
    }

    body.f2n-storefront .modal-header,
    body.f2n-storefront .modal-body {
        padding: 18px;
    }

    body.f2n-storefront .modal-title {
        font-size: 20px;
    }

    body.f2n-storefront .aiz-custom-alert {
        left: 12px !important;
        right: 12px !important;
        bottom: 82px !important;
        width: auto !important;
    }

    body.f2n-storefront .floating-buttons-section {
        display: none !important;
    }

    body.f2n-storefront .aiz-cookie-alert {
        left: 12px !important;
        right: 12px !important;
        bottom: 86px !important;
        width: auto !important;
        max-width: none;
    }
}

@media (max-width: 479.98px) {
    body.f2n-storefront .f2n-user-portal .footable-filtering .form-group {
        width: 100%;
    }

    body.f2n-storefront .f2n-user-portal .affiliate-joined-link {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    body.f2n-storefront .f2n-user-portal .affiliate-joined-link > .affiliate-link-field {
        width: 100%;
        border-radius: 10px !important;
    }

    body.f2n-storefront .f2n-user-portal .affiliate-joined-link .input-group-append {
        justify-content: flex-end;
        margin-left: 0;
    }

    body.f2n-storefront .f2n-user-portal .affiliate-joined-link .affiliate-link-action:first-child {
        border-radius: 9px 0 0 9px !important;
    }

    body.f2n-storefront .f2n-user-portal .affiliate-joined-link .affiliate-link-action:last-child {
        border-radius: 0 9px 9px 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.f2n-storefront .aiz-main-wrapper *,
    body.f2n-storefront .aiz-main-wrapper *::before,
    body.f2n-storefront .aiz-main-wrapper *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* ==========================================================================
   Modern wellness refresh
   --------------------------------------------------------------------------
   Presentation-only layer. It restyles the Classic storefront's existing
   markup — no template hooks, form fields, JS handlers or routes are touched.
   Kept as a trailing layer so it reliably wins specificity ties against the
   base rules above without those rules needing to be rewritten.
   ========================================================================== */

/* --- Typography ---------------------------------------------------------- */

/* Montserrat gives storefront titles a stronger, modern brand presence while
   Manrope remains the calmer, highly readable face for body copy and UI. */
body.f2n-storefront .aiz-main-wrapper h1,
body.f2n-storefront .aiz-main-wrapper h2,
body.f2n-storefront .aiz-main-wrapper .f2n-display {
    font-family: var(--f2n-display);
    font-weight: 650;
    letter-spacing: -0.018em;
    line-height: 1.14;
}

/* Body copy: slightly wider measure control and a calmer grey than the
   theme's default near-black, which reads heavy against a cream canvas. */
body.f2n-storefront .aiz-main-wrapper p {
    color: var(--f2n-muted);
}

body.f2n-storefront .aiz-main-wrapper .fw-700 {
    font-weight: 650 !important;
}

/* Section titles across the storefront. The theme marks every section heading
   as h3, so the display face is applied at that level rather than to h1/h2. */
/* Scoped to the header row's own child h3. The theme also marks every product
   name as an h3 inside these same sections, so a bare `#section_x h3` selector
   pulls the display serif down onto 15px card titles. */
body.f2n-storefront.page-home .aiz-main-wrapper .d-flex.justify-content-between > h3,
body.f2n-storefront.page-home .aiz-main-wrapper #section_featured .d-flex.justify-content-between > h3,
body.f2n-storefront.page-home .aiz-main-wrapper #section_best_selling .d-flex.justify-content-between > h3,
body.f2n-storefront.page-home .aiz-main-wrapper #section_newest .d-flex.justify-content-between > h3,
body.f2n-storefront.page-home .aiz-main-wrapper #section_home_categories .d-flex.justify-content-between > h3,
body.f2n-storefront.page-home .aiz-main-wrapper #todays_deal .d-flex.justify-content-between > h3,
body.f2n-storefront .aiz-main-wrapper #section_last_viewed_products .d-flex.justify-content-between > h3 {
    font-family: var(--f2n-display) !important;
    font-size: clamp(25px, 2.9vw, 33px) !important;
    font-weight: 650 !important;
    letter-spacing: -0.022em !important;
    line-height: 1.1 !important;
    color: var(--f2n-ink) !important;
}

/* The base sheet draws a short terracotta dash under every section title.
   Retired in favour of the eyebrow + hairline rule treatment below. */
body.f2n-storefront.page-home .aiz-main-wrapper section h3::after,
body.f2n-storefront.page-home .aiz-main-wrapper .aiz-card-box h3::after,
body.f2n-storefront.page-home .aiz-main-wrapper #section_featured h3::after,
body.f2n-storefront.page-home .aiz-main-wrapper #section_best_selling h3::after {
    display: none !important;
    content: none !important;
}

/* --- Buttons and controls ------------------------------------------------ */

body.f2n-storefront .aiz-main-wrapper .btn {
    min-height: 46px;
    padding: 11px 24px;
    border-radius: 999px !important;
    font-weight: 600;
    letter-spacing: 0.005em;
    box-shadow: none;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

body.f2n-storefront .aiz-main-wrapper .btn:not(:disabled):hover {
    transform: none;
    box-shadow: 0 8px 20px rgba(193, 68, 42, 0.2);
}

body.f2n-storefront .aiz-main-wrapper .btn-sm {
    min-height: 38px;
    padding: 8px 18px;
}

/* Quiet secondary action that reads as a companion to the terracotta CTA. */
body.f2n-storefront .aiz-main-wrapper .btn-outline-primary {
    border: 1px solid var(--f2n-primary) !important;
    background: transparent !important;
    color: var(--f2n-primary) !important;
}

body.f2n-storefront .aiz-main-wrapper .btn-outline-primary:hover {
    background: var(--f2n-primary) !important;
    color: #fff !important;
}

body.f2n-storefront .aiz-main-wrapper .form-control,
body.f2n-storefront .aiz-main-wrapper .bootstrap-select > .dropdown-toggle,
body.f2n-storefront .aiz-main-wrapper .input-group-text {
    border: 1px solid var(--f2n-border) !important;
    border-radius: var(--f2n-radius-sm) !important;
    background-color: #fff;
}

body.f2n-storefront .aiz-main-wrapper .form-control:focus,
body.f2n-storefront .aiz-main-wrapper .bootstrap-select.show > .dropdown-toggle {
    border-color: var(--f2n-primary) !important;
    box-shadow: 0 0 0 3px rgba(193, 68, 42, 0.15) !important;
}

body.f2n-storefront .aiz-main-wrapper .card {
    border: 1px solid var(--f2n-border-soft);
    border-radius: var(--f2n-radius) !important;
    box-shadow: var(--f2n-shadow-sm);
}

/* --- Header -------------------------------------------------------------- */

body.f2n-storefront .aiz-main-wrapper .header-row-top {
    background: var(--f2n-brown-dark) !important;
}

body.f2n-storefront .aiz-main-wrapper .header-row-middle {
    background: rgba(247, 245, 239, 0.92) !important;
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    box-shadow: none;
    border-bottom: 1px solid var(--f2n-border) !important;
}

body.f2n-storefront .aiz-main-wrapper .header-row-middle .logo-bar-area {
    background: transparent !important;
}

body.f2n-storefront .aiz-main-wrapper .header-row-middle .logo-bar-area > .container > .d-flex {
    min-height: 92px;
}

body.f2n-storefront .aiz-main-wrapper #header-logo-preview {
    max-height: 50px !important;
}

/* Search reads as the header's one soft, tactile surface. */
body.f2n-storefront .aiz-main-wrapper .front-header-search .search-input-box .form-control {
    height: 52px;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    padding-left: 24px;
    padding-right: 54px;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--f2n-border), 0 1px 3px rgba(74, 42, 28, 0.04);
}

body.f2n-storefront .aiz-main-wrapper .front-header-search .search-input-box .form-control:focus {
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--f2n-primary), 0 0 0 3px rgba(193, 68, 42, 0.13);
}

/* Category bar becomes the grounding forest band under the logo row. */
body.f2n-storefront .aiz-main-wrapper .header-row-bottom {
    height: 56px !important;
    background: var(--f2n-brown) !important;
    box-shadow: none;
}

body.f2n-storefront .aiz-main-wrapper .header-row-bottom .all-category,
body.f2n-storefront .aiz-main-wrapper .header-row-bottom [data-hover="dropdown"] {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding-left: 4px;
    padding-right: 4px;
}

body.f2n-storefront .aiz-main-wrapper .header-row-bottom .header_menu_links,
body.f2n-storefront .aiz-main-wrapper .header-row-bottom .bottom-text-color-visibility,
body.f2n-storefront .aiz-main-wrapper .header-row-bottom .text-reset {
    color: #fdf6ef !important;
    letter-spacing: 0.01em;
}

/* --- Homepage: hero and rhythm ------------------------------------------ */

body.f2n-storefront.page-home .aiz-main-wrapper .home-banner-area {
    margin: 0 0 44px !important;
}

/* The hero is full-bleed in this theme (no .container wrapper), so it stays
   square-cornered and shadowless - rounding a run-to-edge band reads as a
   mistake next to the boxed content below it. The theme's own responsive
   height classes are left to govern the crop. */
body.f2n-storefront.page-home .aiz-main-wrapper .home-banner-area,
body.f2n-storefront.page-home .aiz-main-wrapper .home-banner-area .home-slider,
body.f2n-storefront.page-home .aiz-main-wrapper .home-banner-area .aiz-carousel,
body.f2n-storefront.page-home .aiz-main-wrapper .home-banner-area .carousel-box,
body.f2n-storefront.page-home .aiz-main-wrapper .home-banner-area .carousel-box > a > div {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Wider, calmer vertical rhythm between merchandising blocks. */
body.f2n-storefront.page-home .aiz-main-wrapper section,
body.f2n-storefront.page-home .aiz-main-wrapper #todays_deal,
body.f2n-storefront.page-home .aiz-main-wrapper #section_featured,
body.f2n-storefront.page-home .aiz-main-wrapper #section_best_selling,
body.f2n-storefront.page-home .aiz-main-wrapper #section_newest,
body.f2n-storefront.page-home .aiz-main-wrapper #section_home_categories {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

body.f2n-storefront.page-home .aiz-main-wrapper #section_featured > section,
body.f2n-storefront.page-home .aiz-main-wrapper #section_best_selling > section,
body.f2n-storefront.page-home .aiz-main-wrapper #section_newest > section,
body.f2n-storefront.page-home .aiz-main-wrapper #section_home_categories section,
body.f2n-storefront.page-home .aiz-main-wrapper #todays_deal > section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Alternating cream band gives the long single-column page some cadence. */
/* Alternating band. It flips to white rather than the soft cream it used to
   use, because that cream is now the card's own info-panel tint and the two
   touching would flatten the card. */
body.f2n-storefront.page-home .aiz-main-wrapper #section_best_selling {
    background: var(--f2n-surface) !important;
    padding-top: 52px !important;
    padding-bottom: 52px !important;
}

/* --- Section headers ---------------------------------------------------- */

/* Title and its trailing controls stack into a labelled band with a hairline
   rule, replacing the cramped baseline-aligned row. */
body.f2n-storefront.page-home .aiz-main-wrapper section > .container > .d-flex.justify-content-between,
body.f2n-storefront .aiz-main-wrapper #section_last_viewed_products .container > .d-flex.justify-content-between {
    align-items: flex-end !important;
    margin-bottom: 26px !important;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--f2n-border);
}

/* Carousel arrows as quiet circular controls. */
body.f2n-storefront .aiz-main-wrapper .slide-arrow {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid var(--f2n-border);
    background: var(--f2n-surface);
    color: var(--f2n-ink) !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* A tinted outline rather than a solid dark fill - at 40px a filled cacao
   circle reads as a blob sitting in the gutter beside the section title. */
body.f2n-storefront .aiz-main-wrapper .slide-arrow:hover {
    background: rgba(193, 68, 42, 0.08);
    border-color: var(--f2n-primary);
    color: var(--f2n-primary) !important;
}

body.f2n-storefront .aiz-main-wrapper .slide-arrow.link-disable {
    opacity: 0.4;
}

body.f2n-storefront .aiz-main-wrapper .slide-arrow i {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

/* "View all" style links become small pill actions. */
body.f2n-storefront.page-home .aiz-main-wrapper section > .container > .d-flex.justify-content-between a:not(.slide-arrow) {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    border: 1px solid var(--f2n-border);
    border-radius: 999px;
    background: var(--f2n-surface);
    color: var(--f2n-ink) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    text-transform: none;
    opacity: 1 !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

body.f2n-storefront.page-home .aiz-main-wrapper section > .container > .d-flex.justify-content-between a:not(.slide-arrow):hover {
    background: var(--f2n-brown);
    border-color: var(--f2n-brown);
    color: #fff !important;
}

/* --- Product cards ------------------------------------------------------ */

/* The Classic theme hangs 1px borders off every carousel cell to fake a grid.
   Those are cleared so cards float on the canvas as discrete objects. */
body.f2n-storefront .aiz-main-wrapper .carousel-box:has(.aiz-card-box),
body.f2n-storefront .aiz-main-wrapper #products-row > .col {
    border: 0 !important;
    background: transparent;
    padding: 10px !important;
}

body.f2n-storefront .aiz-main-wrapper .aiz-card-box,
body.f2n-storefront .aiz-main-wrapper .f2n-product-card {
    display: flex;
    flex-direction: column;
    /* The theme's py-3 leaves the card with its own inset, which pulls the
       image well and the name divider away from the card edges. */
    padding: 0 !important;
    border: 1px solid var(--f2n-border-soft);
    border-radius: var(--f2n-radius) !important;
    background: var(--f2n-surface) !important;
    box-shadow: var(--f2n-shadow-sm);
    overflow: hidden;
    transition: box-shadow 0.28s ease, transform 0.28s ease, border-color 0.28s ease;
}

body.f2n-storefront .aiz-main-wrapper .aiz-card-box:hover,
body.f2n-storefront .aiz-main-wrapper .f2n-product-card:hover {
    transform: translateY(-3px);
    border-color: var(--f2n-border);
    box-shadow: 0 20px 40px rgba(74, 42, 28, 0.11);
}

/* White image well. Most product shots are supplied on their own white
   background, so a tinted well showed as a visible rectangle inside the card;
   matching the card surface lets the photography read as the whole panel. The
   card's border and shadow do the separating against the cream page. */
body.f2n-storefront .aiz-main-wrapper .aiz-card-box > .position-relative:first-child,
body.f2n-storefront .aiz-main-wrapper .f2n-product-card > .position-relative:first-child {
    width: 100%;
    height: auto !important;
    aspect-ratio: 1 / 1;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--f2n-surface) !important;
    overflow: hidden;
}

/* Tight inset - the shots are already matted with their own margin, so a
   large pad here just shrinks the product twice over. */
body.f2n-storefront .aiz-main-wrapper .aiz-card-box .product-main-image,
body.f2n-storefront .aiz-main-wrapper .aiz-card-box .product-hover-image {
    width: 100%;
    height: 100%;
    padding: 4% !important;
    object-fit: contain;
    transition: transform 0.5s ease;
}

body.f2n-storefront .aiz-main-wrapper .aiz-card-box:hover .product-main-image,
body.f2n-storefront .aiz-main-wrapper .aiz-card-box:hover .product-hover-image {
    transform: scale(1.05);
}

/* Hairline between the image well and the product name. The rule sits tight
   to both - the well ends flush against it and the name picks up straight
   after, so it reads as a divider rather than a gap. */
body.f2n-storefront .aiz-main-wrapper .aiz-card-box > .p-2,
body.f2n-storefront .aiz-main-wrapper .aiz-card-box > .p-md-3 {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 13px 16px 16px !important;
    background: var(--f2n-card-body);
    border-top: 1px solid var(--f2n-border-soft);
}

body.f2n-storefront.page-home .aiz-main-wrapper section .aiz-card-box h3,
body.f2n-storefront.page-home .aiz-main-wrapper section .aiz-card-box h3 a,
body.f2n-storefront .aiz-main-wrapper .aiz-card-box h3,
body.f2n-storefront .aiz-main-wrapper .f2n-product-listing .aiz-card-box h3,
body.f2n-storefront .aiz-main-wrapper .f2n-product-listing .aiz-card-box h3 a {
    min-height: 0;
    margin-bottom: 0 !important;
    font-family: inherit !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: -0.005em !important;
    text-align: left !important;
    color: var(--f2n-ink) !important;
}

/* Price sits in ink; only a live discount earns the terracotta accent. */
body.f2n-storefront .aiz-main-wrapper .aiz-card-box .fs-14.d-flex {
    align-items: baseline;
    justify-content: flex-start !important;
    gap: 8px;
    margin-top: auto !important;
    padding-top: 12px;
    font-size: 17px !important;
}

/* Prices stay in the sans. A grid this dense is scanned by number, and a
   serif price costs legibility for styling that the heading already carries. */
body.f2n-storefront .aiz-main-wrapper .aiz-card-box .fs-14.d-flex .text-primary {
    font-family: var(--f2n-sans);
    font-size: 17.5px !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.015em;
    color: var(--f2n-ink) !important;
}

body.f2n-storefront .aiz-main-wrapper .aiz-card-box .disc-amount ~ div .text-primary {
    color: var(--f2n-primary) !important;
}

body.f2n-storefront .aiz-main-wrapper .aiz-card-box .disc-amount del {
    font-size: 13px !important;
    /* --f2n-subtle only reaches 3.04:1 against the info panel; muted clears AA. */
    color: var(--f2n-muted) !important;
}

body.f2n-storefront .aiz-main-wrapper .aiz-card-box .f2n-card-price-row {
    align-items: center;
    flex-wrap: nowrap;
    position: relative;
    min-height: 48px;
    padding-inline-end: 44px;
}

body.f2n-storefront .aiz-main-wrapper .f2n-card-price-row > .f2n-cart-badge {
    position: absolute;
    inset-inline-end: 0;
    top: 50%;
    transform: translateY(calc(-50% + 6px));
}

.f2n-cart-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    margin-inline-start: auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    /* Was a pink/red pair (#fce5e5 / #b63737) that sat outside the palette. */
    background: #fbe9e3;
    color: #c1442a;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.f2n-cart-badge:hover {
    background: #f5d6cc;
}

.f2n-cart-badge:focus-visible {
    outline: 2px solid #c1442a;
    outline-offset: 3px;
}

@media (pointer: coarse) {
    .f2n-cart-badge {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
    }
}

/* Add to cart: a pill that lifts in from the bottom of the image on hover,
   and stays permanently visible on touch widths further down this sheet. */
body.f2n-storefront .aiz-main-wrapper .aiz-card-box .cart-btn {
    left: 50% !important;
    right: auto !important;
    bottom: 14px !important;
    width: auto !important;
    min-width: 148px;
    height: 42px !important;
    min-height: 42px;
    padding: 0 22px !important;
    border-radius: 999px !important;
    background: var(--f2n-primary) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(74, 42, 28, 0.2);
    opacity: 0;
    transform: translate(-50%, 12px);
    transition: opacity 0.26s ease, transform 0.26s ease, background-color 0.2s ease;
}

body.f2n-storefront .aiz-main-wrapper .aiz-card-box:hover .cart-btn {
    opacity: 1;
    transform: translate(-50%, 0);
}

body.f2n-storefront .aiz-main-wrapper .aiz-card-box .cart-btn:hover {
    background: var(--f2n-primary-dark) !important;
}

body.f2n-storefront .aiz-main-wrapper .aiz-card-box .cart-btn .cart-btn-text {
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* Wishlist / compare rail. */
body.f2n-storefront .aiz-main-wrapper .aiz-card-box .aiz-p-hov-icon a {
    width: 38px;
    height: 38px;
    margin: 10px 10px 0 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 4px 12px rgba(74, 42, 28, 0.12);
    opacity: 0;
    transform: translateX(6px);
    transition: opacity 0.24s ease, transform 0.24s ease, background-color 0.2s ease;
}

body.f2n-storefront .aiz-main-wrapper .aiz-card-box:hover .aiz-p-hov-icon a {
    opacity: 1;
    transform: translateX(0);
}

body.f2n-storefront .aiz-main-wrapper .aiz-card-box .aiz-p-hov-icon a:hover {
    background: var(--f2n-brown);
}

body.f2n-storefront .aiz-main-wrapper .aiz-card-box .aiz-p-hov-icon a:hover svg path {
    fill: #fff;
}

/* Badges: pill-shaped, sized to their own text rather than a fixed 35px. */
body.f2n-storefront .aiz-main-wrapper .aiz-card-box .absolute-top-left {
    width: auto !important;
    margin: 12px 0 0 12px !important;
    padding: 5px 11px !important;
    border-radius: 999px !important;
    background: var(--f2n-primary) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    line-height: 1.3 !important;
    box-shadow: 0 3px 10px rgba(74, 42, 28, 0.14);
}

/* --- Featured category tiles -------------------------------------------- */

/* The active theme renders categories as tall image tiles with a name over a
   bottom scrim, wrapped in the same bordered carousel cell as the product
   rows. The borders are cleared and each tile becomes a rounded card. */
body.f2n-storefront.page-home .aiz-main-wrapper .carousel-box:has(.home-category-name) {
    border: 0 !important;
    padding: 10px !important;
    background: transparent !important;
}

body.f2n-storefront.page-home .aiz-main-wrapper .carousel-box:has(.home-category-name) > div {
    border-radius: var(--f2n-radius);
    overflow: hidden;
    box-shadow: var(--f2n-shadow-sm);
    transition: box-shadow 0.28s ease, transform 0.28s ease;
}

body.f2n-storefront.page-home .aiz-main-wrapper .carousel-box:has(.home-category-name) > div:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(74, 42, 28, 0.14);
}

/* A taller, softer scrim so the category name and its children stay readable
   without the hard 50% cut-off the theme ships. */
body.f2n-storefront.page-home .aiz-main-wrapper .carousel-box:has(.home-category-name) .absolute-bottom-left {
    height: 72% !important;
    background: linear-gradient(
        to top,
        rgba(30, 14, 8, 0.88) 0%,
        rgba(30, 14, 8, 0.55) 42%,
        rgba(30, 14, 8, 0) 100%
    ) !important;
}

body.f2n-storefront.page-home .aiz-main-wrapper .home-category-name {
    font-family: var(--f2n-display);
    font-size: 20px !important;
    font-weight: 650 !important;
    letter-spacing: -0.015em;
}

body.f2n-storefront.page-home .aiz-main-wrapper .carousel-box:has(.home-category-name) .fs-13 {
    font-size: 12.5px !important;
}

/* Promo banner strips pick up the same soft-card language as everything else. */
body.f2n-storefront.page-home .aiz-main-wrapper .carousel-box:has(> a > img),
body.f2n-storefront.page-home .aiz-main-wrapper .carousel-box:has(> a > img) img {
    border-radius: var(--f2n-radius) !important;
    overflow: hidden;
}

/* --- Policy strip and footer -------------------------------------------- */

body.f2n-storefront .aiz-main-wrapper .policy-file a {
    border: 0 !important;
    border-radius: var(--f2n-radius) !important;
    background: transparent;
    transition: background-color 0.24s ease;
}

body.f2n-storefront .aiz-main-wrapper .policy-file a:hover {
    background: rgba(255, 255, 255, 0.06);
}

body.f2n-storefront .aiz-main-wrapper .policy-file h4 {
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
}

body.f2n-storefront .aiz-main-wrapper .f2n-storefront-footer {
    background: var(--f2n-brown-dark) !important;
}

body.f2n-storefront .aiz-main-wrapper .f2n-storefront-footer h4 {
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.55 !important;
}

body.f2n-storefront .aiz-main-wrapper .f2n-storefront-footer a {
    transition: opacity 0.2s ease;
}

body.f2n-storefront .aiz-main-wrapper .f2n-storefront-footer a:hover {
    opacity: 0.7;
}

/* --- Touch and responsive ----------------------------------------------- */

/* Hover-reveal is a pointer affordance only. On touch there is no hover state,
   so the cart pill and the icon rail are pinned visible instead. */
@media (hover: none), (pointer: coarse) {
    body.f2n-storefront .aiz-main-wrapper .aiz-card-box .cart-btn {
        opacity: 1;
        transform: translate(-50%, 0);
    }

    body.f2n-storefront .aiz-main-wrapper .aiz-card-box .aiz-p-hov-icon a {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 767px) {
    body.f2n-storefront {
        font-size: 14.5px;
    }

    body.f2n-storefront.page-home .aiz-main-wrapper .home-banner-area {
        margin-bottom: 28px !important;
    }

    body.f2n-storefront.page-home .aiz-main-wrapper section,
    body.f2n-storefront.page-home .aiz-main-wrapper #section_featured,
    body.f2n-storefront.page-home .aiz-main-wrapper #section_newest,
    body.f2n-storefront.page-home .aiz-main-wrapper #todays_deal,
    body.f2n-storefront.page-home .aiz-main-wrapper #section_home_categories {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    body.f2n-storefront.page-home .aiz-main-wrapper #section_best_selling {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }

    body.f2n-storefront.page-home .aiz-main-wrapper section > .container > .d-flex.justify-content-between {
        margin-bottom: 18px !important;
        padding-bottom: 12px;
    }

    body.f2n-storefront.page-home .aiz-main-wrapper .d-flex.justify-content-between > h3 {
        font-size: 23px !important;
    }

    body.f2n-storefront .aiz-main-wrapper .carousel-box:has(.aiz-card-box),
    body.f2n-storefront .aiz-main-wrapper #products-row > .col {
        padding: 6px !important;
    }

    body.f2n-storefront .aiz-main-wrapper .aiz-card-box > .p-2,
    body.f2n-storefront .aiz-main-wrapper .aiz-card-box > .p-md-3 {
        padding: 11px 13px 13px !important;
    }

    body.f2n-storefront .aiz-main-wrapper .aiz-card-box .fs-14.d-flex .text-primary {
        font-size: 17px !important;
    }

    body.f2n-storefront .aiz-main-wrapper .slide-arrow {
        width: 36px;
        height: 36px;
    }
}

/* On touch widths the wishlist/compare rail is permanently visible (there is
   no hover to reveal it), so it is scaled down to stop it crowding the
   product shot on a two-up mobile grid. */
@media (max-width: 575px) {
    body.f2n-storefront .aiz-main-wrapper .aiz-card-box .aiz-p-hov-icon a {
        width: 30px;
        height: 30px;
        margin: 7px 7px 0 0;
        background: rgba(255, 255, 255, 0.86);
        box-shadow: 0 2px 7px rgba(74, 42, 28, 0.1);
    }

    body.f2n-storefront .aiz-main-wrapper .aiz-card-box .aiz-p-hov-icon a svg {
        width: 13px;
        height: 13px;
    }

    body.f2n-storefront .aiz-main-wrapper .aiz-card-box .absolute-top-left {
        margin: 8px 0 0 8px !important;
        padding: 4px 9px !important;
        font-size: 10px !important;
    }
}

/* The logo is a wide wordmark, so its rendered width is driven by max-height.
   Raising that for desktop overflowed the mobile header row (the logo cell is
   flex: 0 0 auto and will not shrink), so the image is capped on both axes and
   stepped down below the lg breakpoint. */
body.f2n-storefront .aiz-main-wrapper #header-logo-preview {
    max-height: 50px !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
}

body.f2n-storefront .aiz-main-wrapper .logo-bar-area .col-auto:has(#header-logo-preview) {
    min-width: 0;
    flex-shrink: 1;
}

@media (max-width: 991px) {
    body.f2n-storefront .aiz-main-wrapper #header-logo-preview {
        max-height: 40px !important;
    }
}

@media (max-width: 575px) {
    body.f2n-storefront .aiz-main-wrapper #header-logo-preview {
        max-height: 34px !important;
    }
}

/* The copyright bar carries a container-width rule inline in the markup, while
   the theme also puts a full-bleed border-top on the <footer> element itself.
   Two rules 17px apart read as a mistake, so only the content-aligned one is
   kept. */
body.f2n-storefront .aiz-main-wrapper .f2n-storefront-footer footer {
    border-top: 0 !important;
}


/* --- Sticky product smart bar -------------------------------------------- */

/* The bar's add-to-cart and close icon take their blue from the theme
   stylesheet rather than a utility class, so neither the .btn-primary nor the
   .bg-* overrides above reach them. */
body.f2n-storefront .aiz-main-wrapper .smart-bar {
    background: var(--f2n-surface) !important;
    border-top: 1px solid var(--f2n-border);
    box-shadow: 0 -8px 28px rgba(74, 42, 28, 0.08);
}

body.f2n-storefront .aiz-main-wrapper .smart-bar .add-to-cart {
    background: var(--f2n-primary) !important;
    border-color: var(--f2n-primary) !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-weight: 600 !important;
}

body.f2n-storefront .aiz-main-wrapper .smart-bar .add-to-cart:hover,
body.f2n-storefront .aiz-main-wrapper .smart-bar .add-to-cart:focus {
    background: var(--f2n-primary-dark) !important;
    border-color: var(--f2n-primary-dark) !important;
    color: #fff !important;
}

body.f2n-storefront .aiz-main-wrapper .smart-bar .la-close,
body.f2n-storefront .aiz-main-wrapper .smart-bar .la-times {
    color: var(--f2n-subtle) !important;
    transition: color 0.2s ease;
}

body.f2n-storefront .aiz-main-wrapper .smart-bar .la-close:hover,
body.f2n-storefront .aiz-main-wrapper .smart-bar .la-times:hover {
    color: var(--f2n-ink) !important;
}

body.f2n-storefront .aiz-main-wrapper .smart-bar .fs-16,
body.f2n-storefront .aiz-main-wrapper .smart-bar .fw-700 {
    color: var(--f2n-ink) !important;
}


/* --- Mobile card icon rail ---------------------------------------------- */

/* The theme floats this row at bottom:-10px so it deliberately hangs over the
   edge of the image. With a tinted info panel and a divider beneath, three
   white circles straddling that line read as breaks in the card, so the rail
   is pulled fully inside the image well and given one pill surface. */
body.f2n-storefront .aiz-main-wrapper .aiz-card-box .aiz-p-hov-icon-mobile {
    bottom: 10px !important;
}

body.f2n-storefront .aiz-main-wrapper .aiz-card-box .aiz-p-hov-icon-mobile > div {
    align-items: center;
    padding: 4px 6px !important;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--f2n-border-soft);
    box-shadow: 0 4px 14px rgba(74, 42, 28, 0.12) !important;
}

body.f2n-storefront .aiz-main-wrapper .aiz-card-box .aiz-p-hov-icon-mobile a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    /* the markup carries mb-2 on the first two, which skewed the row */
    margin: 0 !important;
    border-radius: 999px;
    background: transparent !important;
    box-shadow: none !important;
}

body.f2n-storefront .aiz-main-wrapper .aiz-card-box .aiz-p-hov-icon-mobile a svg {
    width: 17px;
    height: 17px;
}

/* The glyphs ship with a hard-coded fill="#919199", which is too light to
   read on the pill. CSS fill overrides the presentation attribute. */
body.f2n-storefront .aiz-main-wrapper .aiz-card-box .aiz-p-hov-icon-mobile a svg path,
body.f2n-storefront .aiz-main-wrapper .aiz-card-box .aiz-p-hov-icon-mobile a svg g path {
    fill: var(--f2n-muted);
}

body.f2n-storefront .aiz-main-wrapper .aiz-card-box .aiz-p-hov-icon-mobile a:active svg path {
    fill: var(--f2n-primary);
}

/* --- "View more" slide control ------------------------------------------ */

/* This one is a link, not one of the .slide-arrow controls, and it ships with
   .bg-dark + .text-white. Since .bg-dark is remapped to the cacao token it
   rendered as a heavy filled blob beside the section title. Matched to the
   carousel arrows: quiet circle, tinted on hover. */
/* Two rules outrank a plain .view-more-slide-btn selector here:
   `.product-details .bg-dark` in the base layer above (four classes), and
   `width: 32px !important` from custom-style.css. The .bg-dark compound and
   the !important sizing below are what it takes to win both. */
body.f2n-storefront .aiz-main-wrapper .view-more-slide-btn,
body.f2n-storefront .aiz-main-wrapper .view-more-slide-btn.bg-dark {
    width: 40px !important;
    height: 40px !important;
    justify-content: center;
    border-radius: 999px !important;
    background: var(--f2n-surface) !important;
    border: 1px solid var(--f2n-border) !important;
    color: var(--f2n-ink) !important;
    box-shadow: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

body.f2n-storefront .aiz-main-wrapper .view-more-slide-btn:hover,
body.f2n-storefront .aiz-main-wrapper .view-more-slide-btn:focus,
body.f2n-storefront .aiz-main-wrapper .view-more-slide-btn.bg-dark:hover,
body.f2n-storefront .aiz-main-wrapper .view-more-slide-btn.bg-dark:focus {
    background: rgba(193, 68, 42, 0.08) !important;
    border-color: var(--f2n-primary) !important;
    color: var(--f2n-primary) !important;
}

body.f2n-storefront .aiz-main-wrapper .view-more-slide-btn.text-white,
body.f2n-storefront .aiz-main-wrapper .view-more-slide-btn i,
body.f2n-storefront .aiz-main-wrapper .view-more-slide-btn svg {
    color: inherit !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

body.f2n-storefront .aiz-main-wrapper .view-more-slide-btn svg path {
    fill: currentColor;
}

/* --- Icon-only buttons and the quantity stepper ------------------------- */

/* The .btn / .btn-sm padding above is sized for text buttons. Applied to a
   38px icon circle it leaves ~2px of content box and pushes the glyph off
   centre (the quantity stepper's + and - are the visible case). Icon buttons
   get zero padding and are centred by flex instead. Needs the .btn.btn-icon
   compound to outrank the .btn-sm rule. */
body.f2n-storefront .aiz-main-wrapper .btn.btn-icon,
body.f2n-storefront .aiz-main-wrapper .aiz-plus-minus .btn,
body.f2n-storefront .aiz-main-wrapper .btn.btn-icon.btn-sm {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    min-height: 0 !important;
    line-height: 1 !important;
    text-align: center;
}

/* Keep the glyph itself from carrying its own vertical offset. */
body.f2n-storefront .aiz-main-wrapper .btn.btn-icon > i,
body.f2n-storefront .aiz-main-wrapper .btn.btn-icon > svg,
body.f2n-storefront .aiz-main-wrapper .aiz-plus-minus .btn > i,
body.f2n-storefront .aiz-main-wrapper .aiz-plus-minus .btn > svg {
    display: block;
    margin: 0;
    line-height: 1 !important;
}

body.f2n-storefront .aiz-main-wrapper .aiz-plus-minus {
    gap: 4px;
}

body.f2n-storefront .aiz-main-wrapper .aiz-plus-minus .input-number {
    height: auto !important;
    padding: 0 !important;
    background: transparent;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* Explicit stepper sizing. Zeroing min-height above let these collapse to
   34px, which is under the comfortable touch target, so the size is stated
   here rather than inherited, and raised on coarse pointers. */
body.f2n-storefront .aiz-main-wrapper .aiz-plus-minus .btn {
    flex: 0 0 auto;
    width: 36px !important;
    height: 36px !important;
    border: 1px solid var(--f2n-border) !important;
    background: var(--f2n-surface) !important;
    color: var(--f2n-ink) !important;
}

body.f2n-storefront .aiz-main-wrapper .aiz-plus-minus .btn:hover {
    background: rgba(193, 68, 42, 0.08) !important;
    border-color: var(--f2n-primary) !important;
    color: var(--f2n-primary) !important;
}

@media (pointer: coarse) {
    body.f2n-storefront .aiz-main-wrapper .aiz-plus-minus .btn {
        width: 44px !important;
        height: 44px !important;
    }
}

/* --- Header cart dropdown ------------------------------------------------ */

/* The item list is capped at 360px and scrolls, but the dropdown as a whole
   has no bound: heading + 360 list + subtotal + buttons is ~543px, and it
   opens roughly 148px down the page. On a short laptop viewport that pushes
   the View cart button below the fold, where the page cannot scroll to reach
   it because the menu is absolutely positioned.
   Bounding the menu to the viewport and making it a flex column lets the item
   list shrink and scroll while the subtotal and buttons stay pinned. The
   list's own 360px stays as the ceiling on tall screens; flex-shrink handles
   short ones. */
body.f2n-storefront .aiz-main-wrapper #cart_items .f2n-cart-dropdown.show,
body.f2n-storefront .aiz-main-wrapper #cart_items.show .f2n-cart-dropdown {
    display: flex;
    flex-direction: column;
    /* The menu opens ~148px down the page, under the sticky header rows, so
       that offset plus a small gap has to come out of the budget - not just a
       round number, or the bottom still lands past the fold. */
    max-height: calc(100vh - 168px);
}

body.f2n-storefront .aiz-main-wrapper #cart_items .f2n-cart-dropdown > *:not(.f2n-cart-products) {
    flex: 0 0 auto;
}

body.f2n-storefront .aiz-main-wrapper #cart_items .f2n-cart-dropdown .f2n-cart-products {
    flex: 1 1 auto;
    min-height: 64px;
    overflow-y: auto;
    /* keep a flick inside the list from scrolling the page behind it */
    overscroll-behavior: contain;
}

/* --- Cart line items ----------------------------------------------------- */

/* The cart's stepper markup is ordered [plus, input, minus] and the theme
   stacks it (flex-xl-column) so it renders as a tall + / qty / - column that
   inflates every row. Reversing the row puts it back to - qty + without
   touching the markup.
   Scoped to the cart page on purpose: the product-details stepper is a
   separate control ordered [minus, input, plus] and is already correct, so a
   global reversal would break it. */
body.f2n-storefront.page-cart .aiz-main-wrapper .aiz-plus-minus {
    flex-direction: row-reverse !important;
    align-items: center;
    gap: 0;
    width: max-content;
    padding: 2px;
    border: 1px solid var(--f2n-border);
    border-radius: 999px;
    background: var(--f2n-surface);
}

/* One outlined pill instead of three separate circles, so the control reads
   as a single object sized to the row. */
body.f2n-storefront.page-cart .aiz-main-wrapper .aiz-plus-minus .btn {
    width: 30px !important;
    height: 30px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--f2n-muted) !important;
}

body.f2n-storefront.page-cart .aiz-main-wrapper .aiz-plus-minus .btn:hover {
    background: rgba(193, 68, 42, 0.09) !important;
    color: var(--f2n-primary) !important;
}

body.f2n-storefront.page-cart .aiz-main-wrapper .aiz-plus-minus .btn:disabled,
body.f2n-storefront.page-cart .aiz-main-wrapper .aiz-plus-minus .btn.disabled {
    background: transparent !important;
    color: var(--f2n-subtle) !important;
    opacity: 0.55;
}

body.f2n-storefront.page-cart .aiz-main-wrapper .aiz-plus-minus .input-number {
    width: 34px !important;
    min-width: 34px;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: center;
    font-size: 14px !important;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Tighter rows. The theme gives each line 20px top and bottom; with the
   stepper no longer a vertical stack the row no longer needs that much. */
body.f2n-storefront.page-cart .aiz-main-wrapper .list-group-item {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/* With the thumbnail down to 56px the three-line Price / amount / Tax stack is
   what sets the row height, so its internal gap comes in too. */
body.f2n-storefront.page-cart .aiz-main-wrapper .list-group-item .fw-700.fs-14.mb-2 {
    margin-bottom: 2px !important;
}

/* The cart thumbnail is .size-64px (76px rendered with its padding) and is
   what sets the row's floor, so tightening the row means sizing it here. */
body.f2n-storefront.page-cart .aiz-main-wrapper .list-group-item .size-64px {
    width: 56px !important;
    height: 56px !important;
    padding: 2px !important;
}

/* Touch: the pill grows rather than the row, so rows stay tight on mobile
   while the targets stay comfortable. */
@media (pointer: coarse) {
    body.f2n-storefront.page-cart .aiz-main-wrapper .aiz-plus-minus .btn {
        width: 36px !important;
        height: 36px !important;
    }

    body.f2n-storefront.page-cart .aiz-main-wrapper .aiz-plus-minus .input-number {
        width: 38px !important;
        min-width: 38px;
    }
}

@media (max-width: 767px) {
    body.f2n-storefront.page-cart .aiz-main-wrapper .list-group-item {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* The row wraps into two lines on mobile and the theme's my-3 on the price
       column contributes 32px of pure margin between them. Trimmed here only;
       desktop rows are a single line and keep the theme's spacing. */
    body.f2n-storefront.page-cart .aiz-main-wrapper .list-group-item > .row > [class*="col"] {
        margin-top: 4px !important;
        margin-bottom: 4px !important;
    }

    body.f2n-storefront.page-cart .aiz-main-wrapper .list-group-item .aiz-checkbox {
        margin-bottom: 0 !important;
    }

    /* Smaller thumbnail and a tighter price stack: those two are what set the
       floor on the wrapped mobile row. */
    body.f2n-storefront.page-cart .aiz-main-wrapper .list-group-item .size-64px {
        width: 48px !important;
        height: 48px !important;
    }

    body.f2n-storefront.page-cart .aiz-main-wrapper .list-group-item .fw-700.fs-14.mb-2 {
        margin-bottom: 2px !important;
    }
}