/* ==========================================================================   GLOBAL STYLES   ========================================================================== */html {    scroll-behavior: smooth;}body {    background: #FBF6EA;    color: #1A1611;    font-family: 'Inter', sans-serif;    line-height: 1.6;    -webkit-font-smoothing: antialiased;}h1,h2,h3,.display {    font-family: 'Fraunces', serif;    font-weight: 450;    letter-spacing: -0.01em;}a {    color: inherit;    text-decoration: none;}.wrap {    max-width: 1160px;    margin: 0 auto;    padding: 0 32px;}/* ==========================================================================   NAVIGATION & HEADER   ========================================================================== */header,#header,header#header {    position: sticky !important;    top: 0 !important;    z-index: 50 !important;    background: transparent !important;    border-bottom: 1px solid rgba(26, 22, 17, 0.12) !important;    box-shadow: 0 4px 20px -2px rgba(26, 22, 17, 0.04) !important;    min-height: unset !important;}header::before,#header::before,header#header::before {    content: '' !important;    position: absolute !important;    inset: 0 !important;    background: rgba(251, 246, 234, 0.88) !important;    -webkit-backdrop-filter: blur(10px) !important;    backdrop-filter: blur(10px) !important;    z-index: -1 !important;    pointer-events: none !important;}header + div.flex.flex-wrap,#header + div.flex.flex-wrap,div.flex.flex-wrap.mt-20 {    margin-top: 0 !important;}nav.wrap {    display: flex;    align-items: center;    justify-content: space-between;    height: 84px;}.brand {    display: flex;    align-items: center;    gap: 12px;}.brand img {    height: 46px;    width: 46px;    border-radius: 50%;}.brand-word {    font-family: 'Fraunces', serif;    font-size: 22px;    font-weight: 600;    letter-spacing: 0.02em;}.nav-links {    display: flex;    gap: 36px;    font-size: 14.5px;    font-weight: 500;}.nav-links a {    opacity: 0.75;    transition: opacity .2s;}.nav-links a:hover {    opacity: 1;}/* --- Buttons --- */.btn {    display: inline-flex;    align-items: center;    gap: 8px;    padding: 12px 24px;    border-radius: 100px;    font-size: 14.5px;    font-weight: 600;    border: 1px solid transparent;    cursor: pointer;    transition: transform .15s ease, box-shadow .15s ease;}.btn-primary {    background: #1A1611;    color: #FBF6EA;}.btn-primary:hover {    transform: translateY(-1px);    box-shadow: 0 8px 20px rgba(26, 22, 17, 0.25);}.btn-ghost {    border-color: #1A1611;    color: #1A1611;}.btn-ghost:hover {    background: #1A1611;    color: #FBF6EA;}/* ==========================================================================   HERO SECTION   ========================================================================== */.hero {    padding: 88px 0 100px;    position: relative;    overflow: hidden;}.hero .wrap {    display: grid;    grid-template-columns: 1fr 0.95fr;    gap: 56px;    align-items: center;}.eyebrow {    display: inline-flex;    align-items: center;    gap: 10px;    font-size: 12.5px;    font-weight: 600;    text-transform: uppercase;    letter-spacing: 0.14em;    color: #2C463F;    margin-bottom: 22px;}.eyebrow::before {    content: '';    width: 26px;    height: 1px;    background: #2C463F;}.hero h1 {    font-size: clamp(40px, 5.2vw, 66px);    line-height: 1.04;    margin-bottom: 24px;}.hero h1 em {    font-style: italic;    color: #D89A00;}.hero p.lead {    font-size: 18px;    max-width: 440px;    opacity: 0.78;    margin-bottom: 36px;}.hero-ctas {    display: flex;    gap: 16px;    align-items: center;    margin-bottom: 44px;}.hero-stats {    display: flex;    gap: 40px;}.hero-stats div strong {    display: block;    font-family: 'Fraunces', serif;    font-size: 26px;}.hero-stats div span {    font-size: 13px;    opacity: 0.65;}.hero-art {    position: relative;    aspect-ratio: 1/1;    border-radius: 50%;    background: radial-gradient(circle at 32% 28%, #FFD24D 0%, #F5B400 55%, #D89A00 100%);    display: flex;    align-items: center;    justify-content: center;    box-shadow: 0 40px 80px -20px rgba(216, 154, 0, 0.45);}.hero-art svg {    width: 62%;    height: 62%;}.hero-badge {    position: absolute;    bottom: 18px;    left: -18px;    background: #1A1611;    color: #FBF6EA;    padding: 16px 22px;    border-radius: 18px;    font-size: 13px;    display: flex;    align-items: center;    gap: 12px;    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);}.hero-badge strong {    font-family: 'Fraunces', serif;    font-size: 16px;    display: block;}/* ==========================================================================   JOURNEY SECTION (Signature Section)   ========================================================================== */.journey {    padding: 20px 0 100px;    position: relative;}.journey-head {    max-width: 560px;    margin: 0 auto 84px;    text-align: center;}.journey-head h2 {    font-size: clamp(30px, 3.6vw, 42px);    margin-bottom: 16px;}.journey-head p {    opacity: 0.72;    font-size: 16.5px;}.journey-trail {    position: relative;    display: grid;    grid-template-columns: repeat(3, 1fr);    gap: 0;}.journey-trail .path,.journey-trail img.path,.journey-trail svg.path {    position: absolute;    top: 38px;    left: 0;    width: 100%;    height: 60px;    z-index: 0;    pointer-events: none;}.stage {    position: relative;    z-index: 1;    text-align: center;    padding: 0 24px;}.stage .mark {    width: 76px;    height: 76px;    border-radius: 50%;    margin: 0 auto 26px;    display: flex;    align-items: center;    justify-content: center;    background: #FBF6EA;    border: 1.5px solid #1A1611;    font-family: 'Fraunces', serif;    font-size: 15px;    font-weight: 600;}.stage:nth-of-type(1) .mark {    background: #F4D9C6;    border-color: #F4D9C6;}.stage:nth-of-type(2) .mark {    background: #F5B400;    border-color: #F5B400;}.stage:nth-of-type(3) .mark {    background: #3E6259;    border-color: #3E6259;    color: #FBF6EA;}.stage h3 {    font-size: 22px;    margin-bottom: 10px;}.stage p {    font-size: 14.5px;    opacity: 0.7;    max-width: 230px;    margin: 0 auto;}/* ==========================================================================   SHOP BY CATEGORY SECTION   ========================================================================== */.shop-by-category {    background: #EFE7D6;    padding: 80px 0;}.shop-by-category .wrap {    max-width: 1280px !important;    width: 100% !important;    padding: 0 24px !important;}/* --- Category Grid: Responsive columns --- */.hazo-category-grid {    display: grid;    grid-template-columns: repeat(5, 1fr);    gap: 20px 16px;    margin-top: 40px;}/* --- Category Card --- */.cat-card {    display: flex;    flex-direction: column;    background: #FBF6EA;    border-radius: 20px;    border: 1px solid rgba(26, 22, 17, 0.06);    box-shadow: 0 2px 12px -2px rgba(26, 22, 17, 0.06);    overflow: hidden;    text-decoration: none;    color: #1A1611;    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);}.cat-card:hover {    transform: translateY(-6px);    box-shadow: 0 20px 40px -8px rgba(26, 22, 17, 0.14);}/* --- Category Card Image --- */.cat-card-img {    width: 100%;    aspect-ratio: 1 / 1;    overflow: hidden;    background: #F5B400;    display: flex;    align-items: center;    justify-content: center;}.cat-card-img img {    width: 100%;    height: 100%;    object-fit: contain;    object-position: center;    display: block;}/* --- Category Card Name --- */.cat-card-name {    display: block;    text-align: center;    padding: 14px 10px;    font-family: 'Fraunces', serif;    font-size: 15px;    font-weight: 600;    color: #1A1611;    line-height: 1.3;}/* ==========================================================================   PRODUCT GRID: Responsive Columns (for product listing pages)   ========================================================================== */.product-list-inner-wrapper .product-grid > .grid,.product-list-inner-wrapper .item-inner-wrapper > .product-grid > .grid,.product-list-wrapper .product-grid > .grid,.product-list-template .product-grid > .grid,.custom-product-list .grid,.related-products-list.product-row,.related-products-list,.grid.product-row {    display: grid !important;    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;    gap: 20px 16px !important;    width: 100% !important;}.section-head {    display: flex !important;    flex-direction: column !important;    align-items: center !important;    text-align: center !important;    max-width: 600px !important;    margin: 0 auto 48px !important;    gap: 14px !important;}.section-head h2 {    font-size: clamp(28px, 3.4vw, 42px) !important;    text-align: center !important;    margin: 0 !important;}.section-head p {    opacity: 0.72 !important;    max-width: 520px !important;    font-size: 16px !important;    text-align: center !important;    margin: 0 auto !important;    line-height: 1.5 !important;}/* Hide the 'item available for FlashOrder' text on all product cards */.card .available-quantity,.card .available-quantity-wrapper,.card .card-availability {    display: none !important;}/* ==========================================================================   PRODUCT CARD DESIGN — "Clean & Unified" with Borderless Images   ========================================================================== *//* --- Card Container --- */.card {    background: #FBF6EA !important;    border-radius: 20px !important;    border: 1px solid rgba(26, 22, 17, 0.06) !important;    box-shadow: 0 2px 12px -2px rgba(26, 22, 17, 0.06) !important;    overflow: hidden !important;    display: flex !important;    flex-direction: column !important;    height: 100% !important;    padding: 0 !important;    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;}.card:hover {    transform: translateY(-6px) !important;    box-shadow: 0 20px 40px -8px rgba(26, 22, 17, 0.14) !important;}/* --- Image Area: Borderless, Edge-to-Edge, Full Product Image Display --- */.card .card-img,.card > a:first-of-type,.card > a.relative,.card > a,.card > template + a,.card picture {    display: block !important;    width: 100% !important;    height: auto !important;    max-height: none !important;    aspect-ratio: 1 / 1 !important;    overflow: hidden !important;    margin: 0 !important;    padding: 0 !important;    border-radius: 0 !important;    position: relative !important;    line-height: 0 !important;    background: transparent !important;}/* Show the full 500x500 image — no cropping, fills container naturally */.card .card-img img,.card .card-img .thumb,.card .card-img picture img,.card img.thumb,.card > a img,.card > a > picture img,.card picture img,.card .thumb {    width: 100% !important;    height: 100% !important;    max-height: none !important;    max-width: 100% !important;    object-fit: contain !important;    object-position: center !important;    border-radius: 0 !important;    margin: 0 !important;    padding: 0 !important;    display: block !important;    background: transparent !important;}.card .card-img a,.card .card-img picture {    display: block !important;    width: 100% !important;    height: auto !important;    max-height: none !important;    aspect-ratio: 1 / 1 !important;    border-radius: 0 !important;}/* --- Info Section: Left-aligned, Clean Typography --- */.card .info {    padding: 20px 20px 24px !important;    display: flex !important;    flex-direction: column !important;    flex-grow: 1 !important;    text-align: left !important;    gap: 0 !important;}/* Category / Tag Pill */.card .card-tag {    display: inline-block !important;    align-self: flex-start !important;    font-size: 10px !important;    font-weight: 700 !important;    text-transform: uppercase !important;    letter-spacing: 0.1em !important;    padding: 4px 12px !important;    border-radius: 100px !important;    background: #EFE7D6 !important;    color: #1A1611 !important;    margin-bottom: 12px !important;    width: fit-content !important;}/* Product Title */.card h1,.card h3,.card .head h1,.card .head h3,.card .text-heading {    font-family: 'Fraunces', serif !important;    font-size: 16px !important;    font-weight: 600 !important;    color: #1A1611 !important;    margin: 0 0 6px 0 !important;    line-height: 1.35 !important;    text-align: left !important;}.card .name-product-link,.card .head {    display: block !important;    width: 100% !important;    text-align: left !important;}.card h1 span[itemprop="name"],.card h3 span[itemprop="name"] {    display: block !important;    text-align: left !important;}/* Product Description */.card .description,.card .card-desc {    font-size: 13px !important;    color: rgba(26, 22, 17, 0.55) !important;    line-height: 1.5 !important;    margin-bottom: 10px !important;    text-align: left !important;    display: -webkit-box !important;    -webkit-line-clamp: 2 !important;    line-clamp: 2 !important;    -webkit-box-orient: vertical !important;    overflow: hidden !important;}/* --- Price & Bottom Section --- */.card .card-bot {    margin-top: auto !important;    display: flex !important;    flex-direction: column !important;    align-items: flex-start !important;    width: 100% !important;    gap: 4px !important;    padding-top: 0 !important;}.card .card-bot a,.card .card-bot .card-price-link {    display: block !important;    text-align: left !important;    width: 100% !important;}/* Price Typography */.card .card-bot .price,.card .card-bot .selling-price,.card .card-bot [itemprop="price"],.card .card-bot .text-primary,.card .card-bot strong,.card .product-grid .price,.card .product-grid .selling-price,.card .product-grid [itemprop="price"],.card .product-grid strong {    font-family: 'Fraunces', serif !important;    font-size: 18px !important;    font-weight: 700 !important;    color: #1A1611 !important;    text-align: left !important;    margin: 0 !important;}/* Original / Crossed-out Price */.card .card-bot .line-through,.card .card-bot del,.card .product-grid .line-through,.card .product-grid del {    font-size: 13px !important;    color: rgba(26, 22, 17, 0.4) !important;    font-weight: 400 !important;}/* --- Add to Cart Button --- */.card .action-buttons,.card .card-bot > div:last-child {    width: 100% !important;    margin-top: 14px !important;}.card .add-to-cart-btn,.card .item-add-to-cart-snippet button:not(.detail-count-btn-wrapper *):not(#SelectOptionPopup *),.card [class*="add-to-cart"] button:not(.detail-count-btn-wrapper *):not(#SelectOptionPopup *),.card .action-buttons button:not(.detail-count-btn-wrapper *):not(#SelectOptionPopup *),.card button.add-to-cart:not(#SelectOptionPopup *) {    width: 100% !important;    display: flex !important;    align-items: center !important;    justify-content: center !important;    gap: 8px !important;    background: #1A1611 !important;    color: #FBF6EA !important;    border: none !important;    border-radius: 100px !important;    padding: 12px 18px !important;    font-size: 13px !important;    font-weight: 700 !important;    letter-spacing: 0.06em !important;    text-transform: uppercase !important;    cursor: pointer !important;    transition: background 0.2s ease, transform 0.15s ease !important;}.card button.add-to-cart span.button-label {    color: #FBF6EA !important;    padding: 0 !important;}.card .button-pre-icon {    background: transparent !important;    color: inherit !important;    width: auto !important;    margin-left: 6px !important;}.card .add-to-cart-btn:hover,.card .item-add-to-cart-snippet button:not(.detail-count-btn-wrapper *):not(#SelectOptionPopup *):hover,.card [class*="add-to-cart"] button:not(.detail-count-btn-wrapper *):not(#SelectOptionPopup *):hover,.card .action-buttons button:not(.detail-count-btn-wrapper *):not(#SelectOptionPopup *):hover,.card button.add-to-cart:not(#SelectOptionPopup *):hover {    background: #3E6259 !important;    transform: translateY(-1px) !important;}/* --- Card Quantity Counter (when item is added to cart) --- */.card [role="region"][aria-label="Add to Cart"],.card .add-to-cart {    width: 100% !important;    max-width: 100% !important;    height: auto !important;}.card [role="region"][aria-label="Add to Cart"] {    background: transparent !important;    border-radius: 100px !important;}.card .detail-count-btn-wrapper {    display: flex !important;    align-items: center !important;    justify-content: space-between !important;    width: 100% !important;    max-width: 100% !important;    height: 42px !important;    background: #1A1611 !important;    border-radius: 100px !important;    overflow: hidden !important;    box-shadow: 0 2px 8px rgba(26, 22, 17, 0.12) !important;    padding: 0 !important;    margin: 0 !important;    border: none !important;    box-sizing: border-box !important;}.card .detail-count-btn-wrapper button {    width: 44px !important;    min-width: 44px !important;    max-width: 48px !important;    height: 100% !important;    display: flex !important;    align-items: center !important;    justify-content: center !important;    background: transparent !important;    color: #FBF6EA !important;    border: none !important;    border-radius: 0 !important;    padding: 0 !important;    margin: 0 !important;    cursor: pointer !important;    font-size: 16px !important;    transition: background 0.2s ease !important;    transform: none !important;    flex-shrink: 0 !important;}.card .detail-count-btn-wrapper button:hover {    background: rgba(251, 246, 234, 0.15) !important;    color: #FBF6EA !important;    transform: none !important;}.card .detail-count-btn-wrapper button i {    font-size: 16px !important;    color: #FBF6EA !important;    display: flex !important;    align-items: center !important;    justify-content: center !important;    margin: 0 !important;    padding: 0 !important;    line-height: 1 !important;}.card .detail-count-btn-wrapper input {    flex: 1 1 auto !important;    width: auto !important;    min-width: 0 !important;    height: 100% !important;    background: transparent !important;    border: none !important;    outline: none !important;    text-align: center !important;    color: #FBF6EA !important;    font-family: 'Fraunces', serif !important;    font-size: 16px !important;    font-weight: 700 !important;    padding: 0 !important;    margin: 0 !important;    -webkit-appearance: none !important;    -moz-appearance: textfield !important;    appearance: textfield !important;}.card .detail-count-btn-wrapper input::-webkit-outer-spin-button,.card .detail-count-btn-wrapper input::-webkit-inner-spin-button {    -webkit-appearance: none !important;    margin: 0 !important;}/* ==========================================================================   SELECT OPTIONS POPUP (Configurable Products Modal)   ========================================================================== *//* Prevent broad card button styles from polluting the Select Option Popup */#SelectOptionPopup button {    text-transform: none !important;    letter-spacing: normal !important;    font-weight: 500 !important;    box-shadow: none !important;}/* Close Button (X icon) */#SelectOptionPopup .flex.justify-end {    margin-bottom: 4px !important;}#SelectOptionPopup .flex.justify-end button,#SelectOptionPopup button:has(.bi-x-lg) {    width: 26px !important;    height: 26px !important;    min-width: 26px !important;    max-width: 26px !important;    padding: 0 !important;    margin: 0 0 0 auto !important;    border-radius: 50% !important;    background: #F4EFE6 !important;    border: 1px solid rgba(26, 22, 17, 0.12) !important;    color: #1A1611 !important;    display: inline-flex !important;    align-items: center !important;    justify-content: center !important;    cursor: pointer !important;    transition: all 0.2s ease !important;    transform: none !important;}#SelectOptionPopup .flex.justify-end button:hover,#SelectOptionPopup button:has(.bi-x-lg):hover {    background: #1A1611 !important;    color: #FBF6EA !important;    border-color: #1A1611 !important;    transform: scale(1.05) !important;}#SelectOptionPopup .flex.justify-end button i,#SelectOptionPopup button:has(.bi-x-lg) i {    font-size: 13px !important;    line-height: 1 !important;    color: inherit !important;    display: flex !important;    align-items: center !important;    justify-content: center !important;}/* Variant Attribute Pills (e.g., Color, Size) */#SelectOptionPopup .flex-wrap {    gap: 6px !important;}#SelectOptionPopup .flex-wrap button {    width: auto !important;    max-width: 100% !important;    min-height: 28px !important;    height: auto !important;    padding: 4px 12px !important;    margin: 0 !important;    display: inline-flex !important;    align-items: center !important;    justify-content: center !important;    font-size: 11.5px !important;    font-weight: 500 !important;    line-height: 1.2 !important;    border-radius: 100px !important;    background: #FFFFFF !important;    color: #1A1611 !important;    border: 1.5px solid #D8D2C5 !important;    cursor: pointer !important;    transition: all 0.2s ease !important;    white-space: nowrap !important;    transform: none !important;}#SelectOptionPopup .flex-wrap button:hover:not(:disabled) {    border-color: #1A1611 !important;    background: #FAF7F0 !important;}/* Selected/Active Variant Pill */#SelectOptionPopup .flex-wrap button.border-black,#SelectOptionPopup .flex-wrap button[class*="border-black"],#SelectOptionPopup .flex-wrap button.font-medium.border-2 {    background: #1A1611 !important;    color: #FBF6EA !important;    border-color: #1A1611 !important;    font-weight: 700 !important;}/* Disabled Variant Pill */#SelectOptionPopup .flex-wrap button:disabled,#SelectOptionPopup .flex-wrap button.opacity-50 {    opacity: 0.45 !important;    cursor: not-allowed !important;    background: #F3EFE7 !important;    border-color: #E2DDD3 !important;    color: #8C827A !important;}/* Add to Cart button inside Select Option Popup */#SelectOptionPopup button.add-to-cart,#SelectOptionPopup .add-to-cart button:not(.detail-count-btn-wrapper *) {    width: 100% !important;    height: 36px !important;    min-height: 36px !important;    padding: 0 16px !important;    background: #1A1611 !important;    color: #FBF6EA !important;    border: none !important;    border-radius: 100px !important;    font-size: 11.5px !important;    font-weight: 700 !important;    letter-spacing: 0.05em !important;    text-transform: uppercase !important;    display: flex !important;    align-items: center !important;    justify-content: center !important;    cursor: pointer !important;    transition: background 0.2s ease, transform 0.15s ease !important;}#SelectOptionPopup button.add-to-cart:hover,#SelectOptionPopup .add-to-cart button:not(.detail-count-btn-wrapper *):hover {    background: #3E6259 !important;}/* Stepper Quantity Counter inside Select Option Popup */#SelectOptionPopup .add-to-cart:has(.detail-count-btn-wrapper),#SelectOptionPopup div:has(> .detail-count-btn-wrapper) {    width: 100% !important;    max-width: 100% !important;    box-sizing: border-box !important;}#SelectOptionPopup .detail-count-btn-wrapper {    display: flex !important;    align-items: center !important;    justify-content: space-between !important;    width: 100% !important;    max-width: 100% !important;    height: 36px !important;    background: #1A1611 !important;    border-radius: 100px !important;    overflow: hidden !important;    padding: 0 !important;    margin: 0 !important;    box-sizing: border-box !important;}#SelectOptionPopup .detail-count-btn-wrapper button {    width: 36px !important;    min-width: 36px !important;    max-width: 36px !important;    height: 100% !important;    display: flex !important;    align-items: center !important;    justify-content: center !important;    background: transparent !important;    color: #FBF6EA !important;    border: none !important;    border-radius: 0 !important;    padding: 0 !important;    margin: 0 !important;    cursor: pointer !important;    flex-shrink: 0 !important;    flex-grow: 0 !important;    font-size: 14px !important;    transition: background 0.2s ease !important;}#SelectOptionPopup .detail-count-btn-wrapper button:hover {    background: rgba(251, 246, 234, 0.15) !important;}#SelectOptionPopup .detail-count-btn-wrapper button i {    font-size: 14px !important;    color: #FBF6EA !important;    display: flex !important;    align-items: center !important;    justify-content: center !important;    margin: 0 !important;    padding: 0 !important;}#SelectOptionPopup .detail-count-btn-wrapper input {    flex: 1 1 auto !important;    width: 0 !important;    min-width: 0 !important;    height: 100% !important;    background: transparent !important;    border: none !important;    outline: none !important;    text-align: center !important;    color: #FBF6EA !important;    font-family: 'Fraunces', serif !important;    font-size: 15px !important;    font-weight: 700 !important;    padding: 0 !important;    margin: 0 !important;    -webkit-appearance: none !important;    -moz-appearance: textfield !important;    appearance: textfield !important;}/* --- Star Rating Alignment --- */.card .vue-star-rating,.card [class*="star-rating"] {    justify-content: flex-start !important;}/* --- Favorite / Wishlist Icon --- */.card .favorite-icon-snippet,.card [class*="favorite"] {    z-index: 10 !important;}/* --- Featured Badge --- */.card .bg-primary {    padding: 4px !important;    display: inline-flex !important;    width: auto !important;}/* --- Card Availability (already hidden, ensure no spacing) --- */.card .card-availability {    display: none !important;    margin: 0 !important;    padding: 0 !important;    min-height: 0 !important;}/* ==========================================================================   TRUST BAND   ========================================================================== */.trust {    background: #1A1611;    color: #FBF6EA;    padding: 64px 0;}.trust .wrap {    display: grid;    grid-template-columns: repeat(4, 1fr);    gap: 24px;    text-align: center;}.trust div strong {    display: block;    font-family: 'Fraunces', serif;    font-size: 34px;    color: #F5B400;    margin-bottom: 6px;    font-variant-numeric: tabular-nums;}.trust div span {    font-size: 13px;    opacity: 0.65;    letter-spacing: 0.02em;}/* ==========================================================================   TESTIMONIALS   ========================================================================== */.testimonials {    padding: 110px 0;}.t-grid {    display: flex;    overflow-x: auto;    scroll-behavior: smooth;    scroll-snap-type: x mandatory;    gap: 24px;    margin-top: 56px;    padding-bottom: 16px;    scrollbar-width: none;    -webkit-overflow-scrolling: touch;}.t-grid::-webkit-scrollbar {    display: none;}/* Slider Arrows */.t-arrow {    position: absolute;    top: 60%;    transform: translateY(-50%);    width: 44px;    height: 44px;    border-radius: 50%;    background: #1A1611;    color: #FBF6EA;    border: none;    display: flex;    align-items: center;    justify-content: center;    font-size: 20px;    cursor: pointer;    z-index: 10;    transition: background 0.2s, transform 0.2s;    box-shadow: 0 4px 12px rgba(26, 22, 17, 0.15);}.t-arrow i {    font-size: 16px;    line-height: 1;    color: inherit;}.t-arrow:hover {    background: #3e6259;    transform: translateY(-50%) scale(1.05);}.t-prev { left: -22px; }.t-next { right: -22px; }.t-card {    flex: 0 0 calc(33.333% - 16px);    scroll-snap-align: start;    background: #F4D9C6;    border-radius: 22px;    padding: 32px;}.t-card:nth-child(3n+2) {    background: #EFE7D6;}.t-card:nth-child(3n) {    background: #F5B400;    color: #1A1611;}.stars {    color: #D89A00;    display: flex;    align-items: center;    gap: 4px;    margin-bottom: 16px;}.stars i {    font-size: 14px;    color: inherit;}.t-card:nth-child(3n) .stars {    color: #1A1611;}.t-card p.quote {    font-size: 15.5px;    margin-bottom: 22px;    font-family: 'Fraunces', serif;    font-style: italic;    line-height: 1.5;}.t-who {    display: flex;    align-items: center;    gap: 12px;}.t-avatar {    width: 38px;    height: 38px;    border-radius: 50%;    background: #1A1611;    color: #FBF6EA;    display: flex;    align-items: center;    justify-content: center;    font-family: 'Fraunces', serif;    font-size: 14px;}.t-card:nth-child(3n) .t-avatar {    background: #FBF6EA;    color: #1A1611;}.t-who strong {    display: block;    font-size: 14px;}.t-who span {    font-size: 12px;    opacity: 0.65;}/* ==========================================================================   CTA / NEWSLETTER   ========================================================================== */.cta-band {    background: #3E6259;    color: #FBF6EA;    border-radius: 32px;    margin: 0 32px 100px;    padding: 72px 60px;    display: flex;    align-items: center;    justify-content: space-between;    gap: 40px;    max-width: 1096px;    margin-left: auto;    margin-right: auto;}.cta-band h2 {    font-size: clamp(26px, 3vw, 36px);    max-width: 420px;}.cta-band p {    opacity: 0.8;    font-size: 14.5px;    margin-top: 10px;    max-width: 400px;}.cta-band .btn-primary {    background: #F5B400;    color: #1A1611;}/* ==========================================================================   FEATURES BAR   ========================================================================== */.features-bar {    background: #3e6259;    color: #fff;    padding: 40px 0;}.features-bar .wrap {    display: flex;    flex-wrap: wrap;    justify-content: space-between;    gap: 24px;}.feature-item {    display: flex;    align-items: center;    gap: 16px;    flex: 1;    min-width: 220px;}.feature-item i {    font-size: 36px;    line-height: 1;    color: #FBF6EA;}.feature-text h4 {    margin: 0 0 4px 0;    font-size: 14.5px;    font-weight: 700;    text-transform: uppercase;    letter-spacing: 0.5px;    color: #fff;}.feature-text p {    margin: 0;    font-size: 13.5px;    color: rgba(255, 255, 255, 0.85);}/* ==========================================================================   MEGA MENU FIXES & REORDERING   ========================================================================== *//* Fix dropdown styling */#header .lg\:top-full {    background-color: white !important;    z-index: 9999 !important;    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);    border-radius: 0 0 12px 12px;}/* Spacing and Alignment for Top-level Items */#header horizontal-category-menu > ul,#header .header-category-wrapper > ul {    display: flex !important;    gap: 32px !important;    align-items: center;}/* Reorder Menu Items */#header horizontal-category-menu > ul > li:nth-child(1),#header .header-category-wrapper > ul > li:nth-child(1) {    order: 3 !important;}#header horizontal-category-menu > ul > li:nth-child(2),#header .header-category-wrapper > ul > li:nth-child(2) {    order: 2 !important;}#header horizontal-category-menu > ul > li:nth-child(3),#header .header-category-wrapper > ul > li:nth-child(3) {    order: 1 !important;}/* ==========================================================================   CATEGORY PAGE DESIGN   ========================================================================== *//* Page Title Typography */.product-list-inner-wrapper h1.title,.banner-title {    font-family: 'Fraunces', serif !important;    font-weight: 600 !important;    font-size: 2.25rem !important;    color: #1A1611 !important;    letter-spacing: -0.02em !important;    text-transform: capitalize;}.category-list-title {    display: none !important;}/* Sidebar Redesign */.cat-list-wrp,.category-list-wrapper {    background-color: #FBF6EA !important;    border-right: 1px solid rgba(26, 22, 17, 0.08);}.category-list-wrapper ul li.category a {    transition: all 0.2s ease;    color: #1A1611 !important;}.category-list-wrapper ul li.category a:hover {    background-color: rgba(62, 98, 89, 0.08) !important;    color: #3E6259 !important;}/* Active Category State */.category-list-wrapper ul li.category.active > a,.category-list-wrapper ul li.category > a.active,.category-list-wrapper ul li.category.active {    background-color: transparent !important;    color: #3E6259 !important;}/* ==========================================================================   FOOTER DESIGN   ========================================================================== */footer .wrap {    display: flex;    justify-content: space-between;    flex-wrap: wrap;    gap: 32px;}.foot-brand {    display: flex;    align-items: center;    gap: 10px;    margin-bottom: 10px;}.foot-brand img {    height: 32px;    width: 32px;    border-radius: 50%;}.foot-cols {    display: flex;    gap: 64px;    flex-wrap: wrap;}.foot-col h4 {    font-size: 12.5px;    text-transform: uppercase;    letter-spacing: 0.08em;    opacity: 0.55;    margin-bottom: 14px;}.foot-col a {    display: block;    font-size: 14px;    margin-bottom: 10px;    opacity: 0.75;}.foot-col a:hover {    opacity: 1;}.foot-bottom {    font-size: 12.5px;    opacity: 0.5;    margin-top: 48px;}.custom-footer-wrapper {    background-color: #FBF6EA !important;    color: #1A1611 !important;    border-top: 1px solid rgba(26, 22, 17, 0.12) !important;    padding-top: 56px !important;}.custom-footer-desc {    font-size: 14.5px !important;    opacity: 0.6 !important;    line-height: 1.6 !important;    max-width: 240px !important;}.custom-footer-title {    font-family: 'Fraunces', serif !important;}.custom-footer-list {    opacity: 0.75 !important;}.custom-footer-bottom {    border-color: rgba(26, 22, 17, 0.12) !important;    opacity: 0.6 !important;}/* Remove unwanted wrapper padding above the footer */.footer-block {    padding: 0 !important;    margin: 0 !important;}.w-full.bg-gray-50.lg\:ml-\[320px\].lg\:w-\[calc\(100\%-320px\)\] {    background: #efe7d6;}/* ==========================================================================   MEDIA QUERIES   ========================================================================== *//* Product Cards Grid: 4 cards per row for 1020px and above */@media (max-width: 1280px) {    .hazo-category-grid {        grid-template-columns: repeat(4, 1fr);        gap: 16px 14px;    }    .product-list-inner-wrapper .product-grid > .grid,    .product-list-inner-wrapper .item-inner-wrapper > .product-grid > .grid,    .product-list-wrapper .product-grid > .grid,    .product-list-template .product-grid > .grid,    .custom-product-list .grid,    .related-products-list.product-row,    .related-products-list,    .grid.product-row {        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;        gap: 16px 14px !important;    }    .card .add-to-cart-btn,    .card .item-add-to-cart-snippet button:not(.detail-count-btn-wrapper *):not(#SelectOptionPopup *),    .card [class*="add-to-cart"] button:not(.detail-count-btn-wrapper *):not(#SelectOptionPopup *),    .card .action-buttons button:not(.detail-count-btn-wrapper *):not(#SelectOptionPopup *),    .card button.add-to-cart:not(#SelectOptionPopup *) {        padding: 10px 12px !important;        font-size: 12px !important;        white-space: nowrap !important;    }}/* Between 720px and 1019.98px: 3 cards per row */@media (max-width: 1019.98px) {    .product-list-inner-wrapper .product-grid > .grid,    .product-list-inner-wrapper .item-inner-wrapper > .product-grid > .grid,    .product-list-wrapper .product-grid > .grid,    .product-list-template .product-grid > .grid,    .custom-product-list .grid,    .related-products-list.product-row,    .related-products-list,    .grid.product-row {        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;        gap: 16px 12px !important;        width: 100% !important;    }}@media (max-width: 1024px) {    .t-prev { left: 0; }    .t-next { right: 0; }}@media (max-width: 920px) {    .hero .wrap {        grid-template-columns: 1fr;    }    .hero-art {        max-width: 420px;        margin: 0 auto;    }    .trust .wrap {        grid-template-columns: repeat(2, 1fr);        gap: 36px;    }    .t-grid {        grid-template-columns: 1fr;    }    .cta-band {        flex-direction: column;        text-align: center;        padding: 52px 32px;    }    .features-bar .wrap {        display: grid;        grid-template-columns: 1fr 1fr;        gap: 32px;    }    .nav-links {        display: none;    }}@media (max-width: 768px) {    .product-list-inner-wrapper h1.title,    .banner-title {        font-size: 1.75rem !important;    }    /* Mobile Header Action Icons (Search, Login/User, Cart) */    .right-header {        display: flex !important;        align-items: center !important;    }    .right-header .search-wrapper {        margin-left: 14px !important;        display: flex !important;        align-items: center !important;    }    .right-header .login-button-wrapper,    .right-header #login-button,    .right-header .login-button,    .right-header [class*="UserIcon"] {        margin-left: 14px !important;        display: flex !important;        align-items: center !important;        justify-content: center !important;    }    .right-header .cart-icon-link {        margin-left: 14px !important;        display: flex !important;        align-items: center !important;        justify-content: center !important;    }    .right-header .search-wrapper > div:first-child,    .right-header #login-button,    .right-header .login-button,    .right-header .cart-icon-link > div:first-child {        width: 24px !important;        height: 24px !important;        min-width: 24px !important;        min-height: 24px !important;        display: flex !important;        align-items: center !important;        justify-content: center !important;        margin: 0 !important;        padding: 0 !important;    }    .right-header .search-wrapper i,    .right-header #login-button i,    .right-header .login-button i,    .right-header .cart-icon-link i,    .right-header i.bi-person,    .right-header i.bi-person-fill {        font-size: 22px !important;        line-height: 1 !important;        width: 22px !important;        height: 22px !important;        display: flex !important;        align-items: center !important;        justify-content: center !important;        margin: 0 !important;        padding: 0 !important;    }}@media (max-width: 720px) {    /* Container & Wrap Spacing */    .wrap,    .shop-by-category .wrap {        padding: 0 12px !important;    }    /* Category grid: 3 columns */    .hazo-category-grid {        grid-template-columns: repeat(3, 1fr) !important;        gap: 14px 10px !important;    }    /* Below 720px: 2 Product Cards per row */    .product-list-inner-wrapper .product-grid > .grid,    .product-list-inner-wrapper .item-inner-wrapper > .product-grid > .grid,    .product-list-wrapper .product-grid > .grid,    .product-list-template .product-grid > .grid,    .custom-product-list .grid,    .related-products-list.product-row,    .related-products-list,    .grid.product-row {        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;        gap: 12px 10px !important;        width: 100% !important;    }    /* Shop By Category Section Spacing */    .shop-by-category {        padding: 36px 0 !important;    }    .hazo-category-grid {        margin-top: 14px !important;    }    .cat-card {        border-radius: 16px !important;    }    .cat-card-name {        padding: 10px 8px !important;        font-size: 13px !important;    }    .section-head {        margin: 0 auto 16px !important;        gap: 6px !important;    }    .section-head h2 {        font-size: 22px !important;    }    .section-head p {        font-size: 13px !important;        line-height: 1.4 !important;    }    /* Product Cards Mobile Optimization */    .card {        border-radius: 16px !important;        box-shadow: 0 2px 10px -2px rgba(26, 22, 17, 0.06) !important;        overflow: hidden !important;        display: flex !important;        flex-direction: column !important;        background: #FBF6EA !important;        height: 100% !important;    }    .card .card-img,    .card > a:first-of-type,    .card > a.relative,    .card > a,    .card picture {        border-radius: 0 !important;        width: 100% !important;        height: auto !important;        aspect-ratio: 1 / 1 !important;        display: block !important;        overflow: hidden !important;    }    .card .card-img img,    .card .card-img .thumb,    .card .card-img picture img,    .card img.thumb,    .card > a img,    .card > a > picture img,    .card picture img,    .card .thumb {        width: 100% !important;        height: 100% !important;        object-fit: contain !important;        object-position: center !important;    }    .card .info {        padding: 10px 10px 12px !important;        display: flex !important;        flex-direction: column !important;        flex-grow: 1 !important;    }    .card .card-tag {        font-size: 8.5px !important;        padding: 2px 6px !important;        margin-bottom: 4px !important;        border-radius: 100px !important;        align-self: flex-start !important;    }    .card h1,    .card h3,    .card .head h1,    .card .head h3,    .card .text-heading,    .card .head .text-heading,    .card .name-product-link h1,    .card .name-product-link h3,    .card .name-product-link .text-heading {        font-family: 'Fraunces', serif !important;        font-size: 13px !important;        line-height: 1.3 !important;        margin: 0 0 4px 0 !important;        display: -webkit-box !important;        -webkit-line-clamp: 2 !important;        line-clamp: 2 !important;        -webkit-box-orient: vertical !important;        overflow: hidden !important;        min-height: 35px !important;        height: auto !important;        max-height: unset !important;        text-align: left !important;    }    .card .name-product-link,    .card .head {        min-height: unset !important;        height: auto !important;        text-align: left !important;        display: block !important;    }    .card .card-desc,    .card .description {        font-size: 11px !important;        line-height: 1.35 !important;        color: rgba(26, 22, 17, 0.55) !important;        margin-top: 0 !important;        margin-bottom: 6px !important;        display: -webkit-box !important;        -webkit-line-clamp: 2 !important;        line-clamp: 2 !important;        -webkit-box-orient: vertical !important;        overflow: hidden !important;        min-height: 28px !important;        height: auto !important;        max-height: unset !important;        text-align: left !important;    }    /* Hide FlashOrder and availability wrappers on mobile cards */    .card .available-quantity,    .card .available-quantity-wrapper,    .card .card-availability {        display: none !important;    }    .card .card-bot {        margin-top: auto !important;        gap: 4px !important;        width: 100% !important;        display: flex !important;        flex-direction: column !important;        align-items: flex-start !important;    }    .card .as-low-as {        display: block !important;        font-size: 9.5px !important;        font-family: 'Inter', sans-serif !important;        font-weight: 600 !important;        color: rgba(26, 22, 17, 0.5) !important;        text-transform: uppercase !important;        letter-spacing: 0.05em !important;        line-height: 1.2 !important;        margin-bottom: 2px !important;    }    .card .price-wrapper,    .card .price-details {        padding: 0 !important;        margin: 0 !important;        text-align: left !important;        width: 100% !important;        min-height: 36px !important;        display: flex !important;        flex-direction: column !important;        justify-content: flex-end !important;    }    .card .price,    .card .selling-price,    .card [itemprop="price"],    .card .card-bot strong,    .card .price-details span.price {        font-family: 'Fraunces', serif !important;        font-size: 14.5px !important;        font-weight: 700 !important;        color: #1A1611 !important;        padding: 0 !important;        text-align: left !important;    }    .card .price-details br {        display: none !important;    }    .card .action-buttons,    .card .add-to-cart-wrapper,    .card .card-bot > div:last-child,    .card .m-auto.action-buttons,    .card .m-auto.mb-5 {        margin-top: auto !important;        margin-bottom: 0 !important;        width: 100% !important;    }    .card [role="region"][aria-label="Add to Cart"],    .card .add-to-cart {        background: transparent !important;        border-radius: 100px !important;        max-width: 100% !important;        width: 100% !important;        height: auto !important;        margin-top: 0 !important;    }    .card .add-to-cart-btn,    .card .item-add-to-cart-snippet button:not(.detail-count-btn-wrapper *):not(#SelectOptionPopup *),    .card [class*="add-to-cart"] button:not(.detail-count-btn-wrapper *):not(#SelectOptionPopup *),    .card .action-buttons button:not(.detail-count-btn-wrapper *):not(#SelectOptionPopup *),    .card button.add-to-cart:not(#SelectOptionPopup *) {        padding: 8px 10px !important;        font-size: 10.5px !important;        letter-spacing: 0.03em !important;        border-radius: 100px !important;        background: #1A1611 !important;        color: #FBF6EA !important;        white-space: nowrap !important;        justify-content: center !important;        width: 100% !important;        border: none !important;        height: 34px !important;        display: flex !important;        align-items: center !important;    }    .card .detail-count-btn-wrapper {        height: 34px !important;    }    .card .detail-count-btn-wrapper button {        width: 34px !important;        min-width: 34px !important;        max-width: 36px !important;        height: 100% !important;        font-size: 14px !important;    }    .card .detail-count-btn-wrapper button i {        font-size: 14px !important;    }    .card .detail-count-btn-wrapper input {        font-size: 14px !important;    }    .card button.add-to-cart span.button-label {        color: #FBF6EA !important;        padding: 0 !important;        font-size: 10.5px !important;        text-transform: uppercase !important;        font-weight: 700 !important;        letter-spacing: 0.04em !important;        flex-grow: 0 !important;    }    .card .button-pre-icon {        background: transparent !important;        color: #FBF6EA !important;        width: auto !important;        margin-left: 4px !important;        font-size: 14px !important;    }    .card .featured-icon,    .card span.bg-primary {        padding: 3px !important;        border-radius: 4px !important;        top: 6px !important;        left: 6px !important;    }    .card .featured-icon {        font-size: 10px !important;    }    /* ==========================================================================       THE HAZO METHOD: Compact Vertical Timeline (Below 768px)       ========================================================================== */    .journey {        padding: 36px 0 24px !important;    }    .journey-head {        max-width: 480px !important;        margin: 0 auto 20px !important;        text-align: center !important;    }    .journey-head h2 {        font-size: 24px !important;        line-height: 1.25 !important;        margin: 0 0 6px 0 !important;    }    .journey-head p {        font-size: 13.5px !important;        line-height: 1.45 !important;        opacity: 0.75 !important;        padding: 0 8px !important;        margin: 0 !important;    }    .journey-trail {        display: flex !important;        flex-direction: column !important;        position: relative !important;        max-width: 420px !important;        margin: 0 auto !important;        padding: 0 16px !important;        gap: 0 !important;    }    .journey-trail .path,    .journey-trail svg.path,    .journey-trail img.path {        display: none !important;    }    .journey-trail::before {        display: none !important;    }    .stage {        display: grid !important;        grid-template-columns: 44px 1fr !important;        grid-template-rows: auto auto !important;        grid-template-areas:            "mark title"            "mark desc" !important;        column-gap: 16px !important;        row-gap: 3px !important;        align-items: start !important;        text-align: left !important;        position: relative !important;        z-index: 1 !important;        padding: 0 0 22px 0 !important;        margin: 0 !important;    }    .stage:last-child {        padding-bottom: 0 !important;    }    /* Thin vertical dotted/dashed line connecting the numbered circles */    .stage:not(:last-child)::before {        content: '' !important;        position: absolute !important;        top: 22px !important;        bottom: -22px !important;        left: 21px !important;        width: 2px !important;        background: repeating-linear-gradient(to bottom, #1A1611 0, #1A1611 4px, transparent 4px, transparent 8px) !important;        opacity: 0.25 !important;        z-index: 0 !important;        pointer-events: none !important;    }    .stage .mark {        grid-area: mark !important;        width: 44px !important;        height: 44px !important;        border-radius: 50% !important;        font-size: 14px !important;        font-weight: 700 !important;        font-family: 'Fraunces', serif !important;        margin: 0 !important;        display: flex !important;        align-items: center !important;        justify-content: center !important;        position: relative !important;        z-index: 2 !important;        box-shadow: 0 0 0 5px #FBF6EA !important;    }    /* Existing circle colors preserved exactly */    .stage:nth-of-type(1) .mark {        background: #F4D9C6 !important;        border: 1.5px solid #E8C1A8 !important;        color: #1A1611 !important;    }    .stage:nth-of-type(2) .mark {        background: #F5B400 !important;        border: 1.5px solid #D99E00 !important;        color: #1A1611 !important;    }    .stage:nth-of-type(3) .mark {        background: #3E6259 !important;        border: 1.5px solid #2F4D45 !important;        color: #FBF6EA !important;    }    .stage h3 {        grid-area: title !important;        font-size: 18px !important;        font-family: 'Fraunces', serif !important;        color: #1A1611 !important;        margin: 1px 0 0 0 !important;        text-align: left !important;        line-height: 1.25 !important;    }    .stage p {        grid-area: desc !important;        font-size: 13px !important;        line-height: 1.45 !important;        color: rgba(26, 22, 17, 0.75) !important;        text-align: left !important;        max-width: 100% !important;        margin: 0 !important;    }    /* Trust Band Spacing */    .trust {        padding: 28px 0 !important;    }    .trust .wrap {        gap: 16px 12px !important;    }    .trust div strong {        font-size: 24px !important;        margin-bottom: 2px !important;    }    .trust div span {        font-size: 11px !important;        line-height: 1.3 !important;    }    /* Testimonials: Exactly 1 Card At A Time on Mobile */    .testimonials {        padding: 40px 0 !important;    }    .testimonials .section-head {        margin-bottom: 16px !important;    }    .testimonials .section-head h2 {        font-size: 24px !important;        margin-bottom: 8px !important;    }    .testimonials .section-head p {        font-size: 13.5px !important;    }    .t-grid {        display: flex !important;        overflow-x: auto !important;        scroll-snap-type: x mandatory !important;        scroll-behavior: smooth !important;        -webkit-overflow-scrolling: touch !important;        gap: 16px !important;        margin-top: 14px !important;        padding-bottom: 12px !important;        scrollbar-width: none !important;    }    .t-grid::-webkit-scrollbar {        display: none !important;    }    .t-card {        flex: 0 0 100% !important;        max-width: 100% !important;        width: 100% !important;        scroll-snap-align: center !important;        box-sizing: border-box !important;        padding: 24px 20px !important;        border-radius: 20px !important;    }    .t-card p.quote {        font-size: 14px !important;        line-height: 1.5 !important;        margin-bottom: 16px !important;    }    .stars {        margin-bottom: 12px !important;        gap: 3px !important;    }    .stars i {        font-size: 13px !important;    }    .t-who {        gap: 10px !important;    }    .t-avatar {        width: 36px !important;        height: 36px !important;        font-size: 13px !important;    }    .t-who strong {        font-size: 13.5px !important;    }    .t-who span {        font-size: 11.5px !important;    }    /* Clean navigation arrows positioned neatly below the cards */    .testimonials > .wrap > div[style*="position: relative"] {        padding-bottom: 54px !important;    }    .t-arrow {        top: unset !important;        bottom: 4px !important;        transform: none !important;        width: 40px !important;        height: 40px !important;        font-size: 16px !important;        z-index: 10 !important;    }    .t-prev {        left: calc(50% - 46px) !important;        right: unset !important;    }    .t-next {        left: calc(50% + 6px) !important;        right: unset !important;    }    /* CTA Band Spacing */    .cta-band {        padding: 24px 16px !important;        margin: 0 12px 32px !important;        border-radius: 20px !important;        gap: 14px !important;    }    .cta-band h2 {        font-size: 19px !important;    }    .cta-band p {        font-size: 12.5px !important;        margin-top: 4px !important;    }    /* Features Bar: 2 items per row on mobile */    .features-bar {        padding: 24px 0 !important;    }    .features-bar .wrap {        display: grid !important;        grid-template-columns: repeat(2, 1fr) !important;        gap: 18px 12px !important;        padding: 0 16px !important;    }    .feature-item {        display: flex !important;        flex-direction: row !important;        align-items: center !important;        gap: 10px !important;        min-width: unset !important;    }    .feature-item i {        font-size: 22px !important;        color: #F5B400 !important;        flex-shrink: 0 !important;    }    .feature-text h4 {        font-size: 12px !important;        font-weight: 700 !important;        margin: 0 0 2px 0 !important;        color: #FBF6EA !important;        letter-spacing: 0.02em !important;        text-transform: uppercase !important;    }    .feature-text p {        font-size: 11px !important;        opacity: 0.8 !important;        margin: 0 !important;        color: #FBF6EA !important;        line-height: 1.25 !important;    }    /* Footer Spacing & Safe-Area Protection */    .custom-footer-wrapper,    footer#footer {        padding-top: 32px !important;        padding-bottom: 28px !important;        padding-bottom: max(28px, env(safe-area-inset-bottom)) !important;    }    .custom-footer-wrapper .grid {        gap: 20px !important;        padding-bottom: 20px !important;    }}/* ==========================================================================   Below 720px: 2 Product Cards per row / Below 580px: Mobile Category Grid   ========================================================================== */@media (max-width: 579.98px) {    .hazo-category-grid {        grid-template-columns: repeat(2, 1fr) !important;        gap: 12px 10px !important;    }    .cat-card-name {        padding: 8px 6px !important;        font-size: 12px !important;    }    .product-list-inner-wrapper .product-grid > .grid,    .product-list-inner-wrapper .item-inner-wrapper > .product-grid > .grid,    .product-list-wrapper .product-grid > .grid,    .product-list-template .product-grid > .grid,    .custom-product-list .grid,    .related-products-list.product-row,    .related-products-list,    .grid.product-row {        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;        gap: 12px 10px !important;        width: 100% !important;    }}@media (max-width: 380px) {    .right-header .search-wrapper,    .right-header .login-button-wrapper,    .right-header #login-button,    .right-header .login-button,    .right-header [class*="UserIcon"],    .right-header .cart-icon-link {        margin-left: 10px !important;    }    .hazo-category-grid {        gap: 8px !important;    }    .cat-card {        border-radius: 14px !important;    }    .cat-card-name {        padding: 6px 4px !important;        font-size: 11px !important;    }    .product-list-inner-wrapper .product-grid > .grid,    .product-list-inner-wrapper .item-inner-wrapper > .product-grid > .grid,    .product-list-wrapper .product-grid > .grid,    .product-list-template .product-grid > .grid,    .custom-product-list .grid,    .related-products-list.product-row,    .related-products-list,    .grid.product-row {        gap: 8px !important;    }    .card .info {        padding: 8px 6px 10px !important;    }    .card .add-to-cart-btn,    .card .item-add-to-cart-snippet button:not(.detail-count-btn-wrapper *):not(#SelectOptionPopup *),    .card [class*="add-to-cart"] button:not(.detail-count-btn-wrapper *):not(#SelectOptionPopup *),    .card .action-buttons button:not(.detail-count-btn-wrapper *):not(#SelectOptionPopup *),    .card button.add-to-cart:not(#SelectOptionPopup *) {        padding: 6px 6px !important;        font-size: 9.5px !important;    }    .card .detail-count-btn-wrapper {        height: 32px !important;    }    .card .detail-count-btn-wrapper button {        width: 28px !important;        min-width: 28px !important;    }}/* ==========================================================================   THE HAZO METHOD: Desktop Layout Preservation (768px and above)   ========================================================================== */@media (min-width: 768px) {    .journey-trail {        display: grid !important;        grid-template-columns: repeat(3, 1fr) !important;        gap: 0 !important;        position: relative !important;        max-width: none !important;        padding: 0 !important;    }    .journey-trail .path,    .journey-trail img.path,    .journey-trail svg.path {        display: block !important;    }    .journey-trail::before {        display: none !important;    }    .stage {        display: block !important;        text-align: center !important;        padding: 0 !important;    }    .stage .mark {        margin: 0 auto 36px auto !important;        width: 76px !important;        height: 76px !important;        font-size: 20px !important;        box-shadow: none !important;    }    .stage:not(:last-child)::before {        display: none !important;    }    .stage h3 {        text-align: center !important;        font-size: 24px !important;        margin-bottom: 12px !important;    }    .stage p {        text-align: center !important;        font-size: 15px !important;        margin: 0 auto !important;        max-width: 280px !important;    }}/* ==========================================================================   FLOATING ACTION BUTTONS: Fix WhatsApp & Shop Chat Overlap on Mobile   ========================================================================== */@media (max-width: 768px) {    .whatsapp-modern-btn,    a.whatsapp-modern-btn {        bottom: 92px !important;        bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;        right: 26px !important;        width: 52px !important;        height: 52px !important;        z-index: 1000 !important;    }    .whatsapp-modern-btn svg,    a.whatsapp-modern-btn svg {        width: 28px !important;        height: 28px !important;    }}/*checkout page style*/.content-wrapper.mx-auto.max-w-\[1920px\].px-4.md\:px-8.\32 xl\:px-16.mb-8.lg\:mb-16 {    background: #EFE7D6;}/*shopping cart page style*/.content-wrapper.mx-auto.max-w-\[1920px\].px-4.md\:px-8.\32 xl\:px-16.mb-8.lg\:mb-16 {    background-color: #EFE7D6;}/*product detail page style*/.product-view-wrapper.mx-auto.max-w-\[1920px\].px-4.md\:px-8.\32 xl\:px-16.lg\:min-h-screen.relative {    background-color: #EFE7D6;}/* ==========================================================================   TRUST BAND: Rotating Brand Milestones (Cinematic Zoom)   ========================================================================== */.trust-statements-container {    max-width: 1000px;    margin: 0 auto 36px auto;    text-align: center;    padding: 0 20px;    position: relative;}.trust-statements-badge {    display: inline-flex;    align-items: center;    gap: 8px;    background: rgba(245, 180, 0, 0.1);    border: 1px solid rgba(245, 180, 0, 0.28);    color: #ffffff;    padding: 6px 16px;    border-radius: 100px;    font-size: 11px;    font-weight: 700;    letter-spacing: 0.12em;    text-transform: uppercase;    margin-bottom: 18px;}.trust-statements-badge .pulse-dot {    width: 7px;    height: 7px;    background: #36ff00;    border-radius: 50%;    box-shadow: 0 0 8px #F5B400;    animation: trustDotPulse 2s infinite ease-in-out;}@keyframes trustDotPulse {    0%, 100% { opacity: 1; transform: scale(1); }    50% { opacity: 0.35; transform: scale(0.75); }}.trust-statements-rotator {    position: relative;    min-height: 64px;    display: flex;    align-items: center;    justify-content: center;    overflow: hidden;    perspective: 1200px;}.trust-statement-item {    position: absolute;    inset: 0;    display: flex;    align-items: center;    justify-content: center;    opacity: 0;    transform: scale(0.86);    filter: blur(8px);    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),                filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);    pointer-events: none;    will-change: transform, opacity, filter;}.trust-statement-item.active {    opacity: 1;    transform: scale(1);    filter: blur(0px);    pointer-events: auto;    animation: cinematicDrift 4s ease-out forwards;}@keyframes cinematicDrift {    0% {        transform: scale(0.96);    }    100% {        transform: scale(1.03);    }}.trust-statement-item.fade-out {    animation: none;    opacity: 0;    transform: scale(1.15);    filter: blur(8px);    transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),                transform 0.65s cubic-bezier(0.4, 0, 0.2, 1),                filter 0.65s cubic-bezier(0.4, 0, 0.2, 1);    pointer-events: none;}.trust-statement-text {    font-family: 'Fraunces', serif;    font-size: clamp(17px, 2.1vw, 24px);    font-weight: 600;    color: #f5b400;    letter-spacing: 0.04em;    line-height: 1.4;    margin: 0;    text-wrap: balance;}.trust-statement-text sup {    font-size: 0.58em;    vertical-align: super;    line-height: 0;    font-family: inherit;    font-weight: 700;    letter-spacing: 0.04em;    margin-left: 2px;    color: #F5B400;}.trust-statement-indicators {    display: flex;    align-items: center;    justify-content: center;    gap: 8px;    margin-top: 18px;}.trust-indicator-dot {    height: 4px;    width: 8px;    border-radius: 4px;    background: rgba(251, 246, 234, 0.2);    border: none;    cursor: pointer;    padding: 0;    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.35s ease;}.trust-indicator-dot:hover {    background: rgba(245, 180, 0, 0.6);}.trust-indicator-dot.active {    width: 28px;    background: #F5B400;}.trust-inner-divider {    width: 140px;    height: 1px;    background: linear-gradient(90deg, transparent, rgba(245, 180, 0, 0.4), transparent);    margin: 32px auto 0 auto;}@media (max-width: 720px) {    .trust-statements-container {        margin-bottom: 24px !important;        padding: 0 16px !important;    }    .trust-statements-badge {        font-size: 10px !important;        padding: 5px 12px !important;        margin-bottom: 14px !important;    }    .trust-statement-text {        font-size: 16px !important;        line-height: 1.35 !important;    }    .trust-inner-divider {        margin-top: 24px !important;        width: 100px !important;    }}/* ==========================================================================   REQUIREMENT 2: STEP-BY-STEP FOOTSTEPS LOADER & CARD SKELETON   Replaces default graph loader with animated moving footsteps walking indicator   ========================================================================== *//* 1. Base / Fullscreen Page Loader (.cj-loader & .global-page-loader) */.cj-loader,.global-page-loader {    position: fixed !important;    inset: 0 !important;    top: 0 !important;    left: 0 !important;    right: 0 !important;    bottom: 0 !important;    width: 100% !important;    height: 100% !important;    transform: none !important;    margin: 0 !important;    background: #FBF6EA !important;    display: flex !important;    flex-direction: column !important;    align-items: center !important;    justify-content: center !important;    z-index: 9999999 !important;    pointer-events: auto !important;}/* 2. Prevent Footer from showing first before page/product elements load *//* Lock screen and push footer far out of viewing area during loading */body:has(.cj-loader),body:has(.global-page-loader),body.page-product:not(.hazo-product-ready) {    overflow: hidden !important;    height: 100vh !important;}#app {    min-height: 150vh !important;}body.hazo-page-ready #app,body:not(:has(.cj-loader)):not(:has(.global-page-loader)) #app {    min-height: 100vh !important;}/* Hide footer by default during page load and push 150vh below screen */#footer,footer.custom-footer-wrapper {    opacity: 0 !important;    visibility: hidden !important;    pointer-events: none !important;    margin-top: 150vh !important;}/* While loading, explicitly force hide and push down */body:has(.cj-loader) #footer,body:has(.global-page-loader) #footer,body:not(.hazo-page-ready) #footer,body.page-product:not(.hazo-product-ready) #footer,body.page-product:has(.loading-animation) #footer,body.page-product:not(:has(.product-details .title:not(.loading-animation))) #footer,#footer.hazo-footer-hidden,footer.hazo-footer-hidden,.custom-footer-wrapper.hazo-footer-hidden {    opacity: 0 !important;    visibility: hidden !important;    pointer-events: none !important;    display: none !important;    margin-top: 150vh !important;}/* Reveal footer ONLY when no loader exists AND page content is ready */body:not(:has(.cj-loader)):not(:has(.global-page-loader)).hazo-page-ready #footer,body:not(:has(.cj-loader)):not(:has(.global-page-loader)):not(.page-product) #footer,body:not(:has(.cj-loader)):not(:has(.global-page-loader)).page-product:has(.product-details .title:not(.loading-animation)) #footer {    opacity: 1 !important;    visibility: visible !important;    pointer-events: auto !important;    display: block !important;    margin-top: 0 !important;    transition: opacity 0.4s ease-in-out;}/* Ensure product view container always occupies full viewport on all devices */.product-view-wrapper {    min-height: calc(100vh - 90px) !important;}/* Hide legacy graph bars, ball, and dots */.cj-loader__bar,.cj-loader__ball,#circleG {    display: none !important;}/* Moving Footsteps Loader Container */.hazo-footsteps-loader {    display: flex !important;    flex-direction: column !important;    align-items: center !important;    justify-content: center !important;    text-align: center !important;}.hazo-loader-brand {    width: 72px;    height: 72px;    border-radius: 50%;    background: #F5B400;    display: flex;    align-items: center;    justify-content: center;    font-family: 'Fraunces', serif;    font-size: 1.25rem;    font-weight: 700;    letter-spacing: 0.05em;    color: #1A1611;    margin-bottom: 24px;    box-shadow: 0 8px 24px rgba(245, 180, 0, 0.35);}.hazo-footsteps-track {    position: relative;    width: 90px;    height: 140px;    margin-bottom: 20px;}.hazo-footsteps-track.hazo-track-center {    margin-left: auto;    margin-right: auto;}.hazo-step {    position: absolute;    width: 28px;    height: 46px;    fill: #1A1611;    opacity: 0;    transform: scale(0.7) translateY(8px);    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.08));    animation: hazoWalkStep 2.4s infinite ease-in-out;}/* Step 1: Bottom Left */.hazo-step-1 {    left: 8px;    bottom: 0px;    animation-delay: 0s;}/* Step 2: Mid-Low Right */.hazo-step-2 {    right: 8px;    bottom: 34px;    animation-delay: 0.6s;}/* Step 3: Mid-High Left */.hazo-step-3 {    left: 8px;    bottom: 68px;    animation-delay: 1.2s;}/* Step 4: Top Right */.hazo-step-4 {    right: 8px;    bottom: 102px;    animation-delay: 1.8s;}@keyframes hazoWalkStep {    0% {        opacity: 0;        transform: scale(0.6) translateY(6px);        fill: #C4B9A9;    }    15% {        opacity: 1;        transform: scale(1.08) translateY(-2px);        fill: #F5B400;        filter: drop-shadow(0 6px 12px rgba(245, 180, 0, 0.5));    }    30% {        opacity: 0.95;        transform: scale(1) translateY(0);        fill: #1A1611;    }    70% {        opacity: 0.45;        transform: scale(0.95) translateY(0);        fill: #665E55;    }    100% {        opacity: 0;        transform: scale(0.9) translateY(0);        fill: #998E82;    }}.hazo-loader-caption {    font-family: 'Fraunces', serif !important;    font-size: 1.1rem !important;    font-weight: 600 !important;    color: #1A1611 !important;    letter-spacing: -0.01em !important;    margin-top: 4px !important;}.hazo-loader-subcaption {    font-family: 'Inter', sans-serif !important;    font-size: 0.76rem !important;    color: #8C8275 !important;    margin-top: 4px !important;    text-transform: uppercase !important;    letter-spacing: 0.1em !important;    font-weight: 600 !important;}/* 2. Individual Product Card Loading Skeletons & Footsteps Animation */.loading-animation {    background: #FAF7F2 !important;    position: relative !important;    overflow: hidden !important;}.loading-animation::after {    content: '' !important;    position: absolute !important;    top: 0 !important;    left: -100% !important;    width: 100% !important;    height: 100% !important;    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.65) 50%, transparent 100%) !important;    animation: hazoCardGleam 2.2s infinite ease-in-out !important;}@keyframes hazoCardGleam {    0% { transform: translateX(-100%); }    100% { transform: translateX(200%); }}/* Skeleton image container */.loadingCard.skeleton .skeleton-image,.product-grid .image.loading-animation,.item .image.loading-animation {    background-color: #FAF7F2 !important;    position: relative !important;    display: flex !important;    align-items: center !important;    justify-content: center !important;    overflow: hidden !important;}/* Card Footsteps Track (Vertical walking path inside each card) */.card-footsteps-track {    position: relative !important;    width: 68px !important;    height: 108px !important;    z-index: 2 !important;    display: block !important;    pointer-events: none !important;}.card-footstep,.card-step {    position: absolute !important;    width: 22px !important;    height: 36px !important;    fill: #1A1611 !important;    opacity: 0 !important;    transform: scale(0.7) translateY(6px) !important;    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.06)) !important;    animation: cardWalkStep 2.4s infinite ease-in-out !important;}/* 4 Steps Walking Forward: Left, Right, Left, Right */.card-step-1, .card-step:nth-child(1) {    left: 4px !important;    bottom: 0px !important;    animation-delay: 0s !important;}.card-step-2, .card-step:nth-child(2) {    right: 4px !important;    bottom: 26px !important;    animation-delay: 0.6s !important;}.card-step-3, .card-step:nth-child(3) {    left: 4px !important;    bottom: 52px !important;    animation-delay: 1.2s !important;}.card-step-4, .card-step:nth-child(4) {    right: 4px !important;    bottom: 78px !important;    animation-delay: 1.8s !important;}@keyframes cardWalkStep {    0% {        opacity: 0;        transform: scale(0.65) translateY(5px);        fill: #C4B9A9;    }    15% {        opacity: 1;        transform: scale(1.08) translateY(-2px);        fill: #F5B400;        filter: drop-shadow(0 4px 10px rgba(245, 180, 0, 0.45));    }    30% {        opacity: 0.95;        transform: scale(1) translateY(0);        fill: #1A1611;    }    70% {        opacity: 0.45;        transform: scale(0.95) translateY(0);        fill: #665E55;    }    100% {        opacity: 0;        transform: scale(0.9) translateY(0);        fill: #998E82;    }}/* Stagger animation across cards for organic natural look */.item:nth-child(4n+2) .card-step-1, .loadingCard:nth-child(4n+2) .card-step-1 { animation-delay: 0.3s !important; }.item:nth-child(4n+2) .card-step-2, .loadingCard:nth-child(4n+2) .card-step-2 { animation-delay: 0.9s !important; }.item:nth-child(4n+2) .card-step-3, .loadingCard:nth-child(4n+2) .card-step-3 { animation-delay: 1.5s !important; }.item:nth-child(4n+2) .card-step-4, .loadingCard:nth-child(4n+2) .card-step-4 { animation-delay: 2.1s !important; }.item:nth-child(4n+3) .card-step-1, .loadingCard:nth-child(4n+3) .card-step-1 { animation-delay: 0.6s !important; }.item:nth-child(4n+3) .card-step-2, .loadingCard:nth-child(4n+3) .card-step-2 { animation-delay: 1.2s !important; }.item:nth-child(4n+3) .card-step-3, .loadingCard:nth-child(4n+3) .card-step-3 { animation-delay: 1.8s !important; }.item:nth-child(4n+3) .card-step-4, .loadingCard:nth-child(4n+3) .card-step-4 { animation-delay: 2.4s !important; }.item:nth-child(4n+4) .card-step-1, .loadingCard:nth-child(4n+4) .card-step-1 { animation-delay: 0.9s !important; }.item:nth-child(4n+4) .card-step-2, .loadingCard:nth-child(4n+4) .card-step-2 { animation-delay: 1.5s !important; }.item:nth-child(4n+4) .card-step-3, .loadingCard:nth-child(4n+4) .card-step-3 { animation-delay: 2.1s !important; }.item:nth-child(4n+4) .card-step-4, .loadingCard:nth-child(4n+4) .card-step-4 { animation-delay: 2.7s !important; }/* Custom Block Skeleton Content Placers */.skeleton-pill {    display: block !important;    width: 65px !important;    height: 18px !important;    border-radius: 999px !important;    background: #EAE5DE !important;    margin-bottom: 12px !important;}.skeleton-title {    display: block !important;    width: 82% !important;    height: 20px !important;    border-radius: 4px !important;    background: #EAE5DE !important;    margin-bottom: 8px !important;}.skeleton-desc {    display: block !important;    width: 60% !important;    height: 14px !important;    border-radius: 4px !important;    background: #EAE5DE !important;    margin-bottom: 16px !important;}.skeleton-price {    display: block !important;    width: 45% !important;    height: 18px !important;    border-radius: 4px !important;    background: #EAE5DE !important;    margin-bottom: 14px !important;}.skeleton-btn {    display: block !important;    width: 100% !important;    height: 38px !important;    border-radius: 8px !important;    background: #EAE5DE !important;}/* Ensure smooth loading container across custom blocks and listings */.loading-item-wrapper {    width: 100% !important;    display: block !important;}/* ==========================================================================   3. Product Image Loading Protection (Part 2)   Keeps footsteps loader active inside real product card until high-res image finishes loading   ========================================================================== */.card .card-img {    position: relative !important;    background: #FAF7F2 !important;    display: flex !important;    align-items: center !important;    justify-content: center !important;}.card-img-footsteps-loader {    position: absolute !important;    top: 50% !important;    left: 50% !important;    transform: translate(-50%, -50%) !important;    z-index: 1 !important;    pointer-events: none !important;    opacity: 1 !important;    transition: opacity 0.4s ease-out, visibility 0.4s ease-out !important;}/* Once image has downloaded and loaded, cleanly fade out the footsteps */.card-img.img-loaded .card-img-footsteps-loader,.card.img-loaded .card-img-footsteps-loader {    opacity: 0 !important;    visibility: hidden !important;}/* Image initial opacity & smooth transition on reveal */.card .card-img img,.card .card-img picture img {    position: relative !important;    z-index: 2 !important;    opacity: 0;    transition: opacity 0.35s ease-in !important;}.card-img.img-loaded img,.card-img.img-loaded picture img,.card.img-loaded img,.card.img-loaded picture img {    opacity: 1 !important;}