/* ==========================================================
   KOSHER4LESS FULL STOR.AI CSS FILE
   Version: Full Premium Product-First CSS V1.5 HEADER RESTORE

   This file is rebuilt from:
   1. Your original working Stor.ai CSS
   2. The stable product-first premium improvements
   3. The hero dead-space/search/cart fixes
   4. The white header/icon cleanup
   5. A new hard header restore to undo the broken floating Login issue

   Use this as ONE COMPLETE FILE.
   Replace your current CSS with this full file.
   Do not paste it under V1.3. Replace the whole CSS area.
   ========================================================== */


/* ==========================================================
   PART 1: ORIGINAL WORKING CSS
   ========================================================== */

/*ToolbarColor*/
body>header>.toolbar {
    background-color:#ffffff ;
}
/*images of tool bar*/
header .toolbar .retailer-data sp-dropdown .sp-dropdown-text img,
 header .toolbar .user-details sp-dropdown .sp-dropdown-text img ,
 header .toolbar .language sp-dropdown .sp-dropdown-text img, 
 header .toolbar .newsletter  img
 {
    filter: invert(1);
    -webkit-filter: invert(1);
}
/*images of tool bar on open state*/
 header .toolbar .retailer-data sp-dropdown.open .sp-dropdown-text img,
 header .toolbar .user-details sp-dropdown.open .sp-dropdown-text img ,
 header .toolbar .language sp-dropdown.open .sp-dropdown-text img
 {
    filter: invert(0);
    -webkit-filter: invert(0);
}
/*text color for drop down list of toolbar*/
body>header>.toolbar>.data>.user-details sp-dropdown>.sp-dropdown-options-wrapper>sp-option .option-content, body>header>.toolbar>.data>.language sp-dropdown>.sp-dropdown-options-wrapper>sp-option .option-content, body>header>.toolbar>.data>.retailer-data sp-dropdown>.sp-dropdown-options-wrapper>sp-option .option-content {
    border-top: 1px solid #FFFFFF;
    color: #ffffff;
}
/* color for drop down list of toolbar on hover state* usually the same as current category */
body>header>.toolbar>.data>.user-details sp-dropdown>.sp-dropdown-options-wrapper>sp-option:hover,
body>header>.toolbar>.data>.language sp-dropdown>.sp-dropdown-options-wrapper>sp-option:hover,
body>header>.toolbar>.data>.retailer-data sp-dropdown>.sp-dropdown-options-wrapper>sp-option:hover {
    background-color: #960F44 !important;
}
/*categories text color*/
body>header>.menu>.categories>.category>.category-content>.content>.name
{
	color: #ffffff;
}

/*categories images color - specials and my items*/
body>header>.menu>.categories>.category>.category-content>.content>.image>img.normal {
    display:none;
	background-color: #FFFFFF;
}

body>header>.menu>.categories>.category>.category-content>.content>.image>img.current {
    display: inline-block;
	color: #000000 !important;
}

/*text toolbar*/
sp-dropdown .sp-dropdown-text * {
    color: #000000 !important;
}
sp-dropdown.open .sp-dropdown-text * {
	color: #ffffff !important;
}

/*--------login text  - before login -------------*/
body>header>.toolbar>.data>.user-details>button.login {
	color: #000000 !important;
}


html div.sidenav>div>nav>header
{
	background-color: #c29a6e;
}

html div.sidenav>div {
	position: relative;
	height: 90%;
	width: 100%;
}

/*drop down menu on login/store detailes/and language*/
body>header>.toolbar>.data>.user-details sp-dropdown.open, body>header>.toolbar>.data>.language sp-dropdown.open, body>header>.toolbar>.data>.retailer-data sp-dropdown.open,
body>header>.toolbar>.data>.user-details sp-dropdown>.sp-dropdown-options-wrapper, body>header>.toolbar>.data>.language sp-dropdown>.sp-dropdown-options-wrapper, body>header>.toolbar>.data>.retailer-data sp-dropdown>.sp-dropdown-options-wrapper{
    background-color: #960F44 !important;
}
/*---------search button------------------*/


/*search button color*/
body>header>.toolbar>.data>.search-wrapper>.search>.input>button
{
	background-color: #960F44  !important;
}
/*search area color*/
body>header>.toolbar>.data>.search-wrapper>.search>.input>input
{
    background-color: #E8E8E8 !important;
}
/*--------categories-------------*/

/*categories lines seperator*/
body>header>.menu>.categories>.category {
    
	border-left: 1px solid #ffffff !important;
}
/*categories color*/
body>header>.menu>.categories>.category>.category-content
{
	    background: #960F44 !important;
}
/*categories current*/
body>header>.menu>.categories>.category.current>.category-content {
    background-color: #960F44  !important;
}

/*under line on over and selected - usually as current category*/
body>header>.menu>.categories>.category.open>.category-content
{
	box-shadow: inset 0px -5px #960F44  !important;
}


/*---------------------checkout-------------------*/
/*check out button*/
html div.sidenav>div>nav.cart>footer>.checkout>span
{
	background-color: #960F44 ;
}
/*small check out button*/
html div.sidenav>div>nav>header .right .button
{
	background-color: #960F44 ;
}
/*Check out button text color*/
html div.sidenav>div>nav.cart>footer>.checkout>span>span,
html div.sidenav>div>nav.cart>footer>.checkout>span
{
	color:   #ffffff !important;
}
/*secondary checkout button color*/
checkout-bottom-banner .total-summary .next-button button {
    background-color: #960F44 ;
    border-color: #ffffff;
    color: #ffffff;
}

html.home>body>footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #555555;
	color: #ffffff
}

checkout-bottom-banner .help-buttons .continue-shopping button {
    color: #ffffff;
    border: 2px solid #ffffff;
}

checkout-bottom-banner .total-summary .back-button button {
    color: #ffffff;
    border: 2px solid #ffffff;
}

checkout-bottom-banner .total-summary .est-total .title, checkout-bottom-banner .total-summary .est-total .total {
    color: #ffffff;
}

checkout-bottom-banner .total-summary .est-total .total .items-total {
    color: #ffffff;
}

checkout-bottom-banner .total-summary>.saved-price>div>span {
    color: #ffffff;
}

body>header>.toolbar>.data>.user-details sp-dropdown>.sp-dropdown-options-wrapper>.sp-option:hover, body>header>.toolbar>.data>.user-details sp-dropdown>.sp-dropdown-options-wrapper .sp-option.active, body>header>.toolbar>.data>.language sp-dropdown>.sp-dropdown-options-wrapper>.sp-option:hover, body>header>.toolbar>.data>.language sp-dropdown>.sp-dropdown-options-wrapper .sp-option.active, body>header>.toolbar>.data>.retailer-data sp-dropdown>.sp-dropdown-options-wrapper>.sp-option:hover, body>header>.toolbar>.data>.retailer-data sp-dropdown>.sp-dropdown-options-wrapper .sp-option.active {
    background-color: #EDE3D4;
}

html.cart-summary section.view div.fixed-banner .left .title {
    color: #960F44;
}

section.view sp-items .fixed-banner-wrapper .fixed-banner .banner-body>.main-row>.title, section.view sp-items .fixed-banner-wrapper .fixed-banner .banner-body>.main-row>.back-btn {
    color: #960F44;
}

body>header>.toolbar>.data>.search-wrapper>.search>.input>input {
    color: #000000;
}
	
body>header>.toolbar>.data>.search-wrapper>.search>.input>input[type=search].placeholder {
    color: #000000;
}	

sp-dropdown .sp-dropdown-text .arrow {
    filter: invert(0);
    -webkit-filter: invert(1);
}

sp-dropdown.open .sp-dropdown-text .arrow {
    filter: invert(0);
    -webkit-filter: invert(0);
}

html.home section.view .home-page-wrapper>.background-wrapper .background {
    height: 50%;
    position: relative;
    width: 80%;
}

html.home section.view .home-page-wrapper>.content>.component {
    padding: 1.875em 0 1.875em 0;
    background-color: #fffdfd;
}

section.view sp-items>.tools-wrapper .tools .tools-opener .text {
	color: #000000
}

/* Toolbar Store details */
body>header>.toolbar>.data>.retailer-data sp-dropdown>.sp-dropdown-options-wrapper>.sp-option:hover {
	color: #000000;
	background-color: #EDE3D4;
}

body>header>.toolbar>.data>.retailer-data sp-dropdown>.sp-dropdown-options-wrapper>.sp-option .option-content:hover .img-container {
	filter: invert(0);
    -webkit-filter: invert(1);
}

body>header>.toolbar>.data>.retailer-data sp-dropdown>.sp-dropdown-options-wrapper>.sp-option.active {
	background-color: #960F44
}

body>header>.toolbar>.data>.retailer-data sp-dropdown>.sp-dropdown-options-wrapper>.sp-option.active:hover {
	background-color: #EDE3D4
}

/* Toolbar Language details */
body>header>.toolbar>.data>.language sp-dropdown>.sp-dropdown-options-wrapper>.sp-option:hover {
	color: #000000;
	background-color: #EDE3D4;
}

body>header>.toolbar>.data>.language sp-dropdown>.sp-dropdown-options-wrapper>.sp-option.active {
	background-color: #960F44
}

body>header>.toolbar>.data>.language sp-dropdown>.sp-dropdown-options-wrapper>.sp-option.active:hover {
	background-color: #EDE3D4
}

/* Toolbar User details */
body>header>.toolbar>.data>.user-details sp-dropdown>.sp-dropdown-options-wrapper>.sp-option:hover {
	color: #000000;
	background-color: #EDE3D4;
}

body>header>.toolbar>.data>.user-details sp-dropdown>.sp-dropdown-options-wrapper>.sp-option.active {
	background-color: #960F44
}

body>header>.toolbar>.data>.user-details sp-dropdown>.sp-dropdown-options-wrapper>.sp-option.active:hover {
	background-color: #EDE3D4
}

/* Clear cart icon */
html div.sidenav>div>nav header.nav-header .left>.clean-cart-icon, html div.sidenav>div>nav>header .left>.clean-cart-icon {
	background-color: #8F8F90;
}


/* Center delete button in cart */
img.middle.remove-icon {
	padding-top: 0.35em
}

span.middle.delete-text {
	color: #000000;
	padding-top: 0.8em;
	margin-left: -0.6em;
}

/* Side filter down arrows */
div.sorter sp-dropdown .sp-dropdown-text .arrow {
	filter: invert(0);
    -webkit-filter: invert(0);
}

body>footer .inner-footer>img.logo{
    content:url("https://d226b0iufwcjmj.cloudfront.net/retailers/1500/resources/1752623648868-0.019743526404750966.png");
    max-height: 5em;
    padding: 0 40px 0 20px;
}

body>footer .inner-footer>.retailer-data{
    display:none;
}

body>footer .inner-footer{
    max-width: 1000px;
    padding: 2em 2.1em;
    align-items: center;
}

body>header>.toolbar>.data>.coupons.coupons>a, body>header>.toolbar>.data>.language.coupons>a, body>header>.toolbar>.data>.newsletter.coupons>a, body>header>.toolbar>.data>.retailer-data.coupons>a, body>header>.toolbar>.data>.user-details.coupons>a{
	color: black;
	background-color: tan;
	
}



body > header > .toolbar > .data > .retailer-data sp-dropdown > .sp-dropdown-text{
	
	color: black;
	background-color: tan;
	
}

body > header > .toolbar > .data > .user-details sp-dropdown > .sp-dropdown-text{
	
	color: black;
	background-color: tan;
	
}

body > header > .toolbar > .data > .coupons sp-dropdown > .sp-dropdown-text, body > header > .toolbar > .data > .language sp-dropdown > .sp-dropdown-text, body > header > .toolbar > .data > .newsletter sp-dropdown > .sp-dropdown-text, body > header > .toolbar > .data > .retailer-data sp-dropdown > .sp-dropdown-text, body > header > .toolbar > .data > .user-details sp-dropdown > .sp-dropdown-text{
	
	color: black;
	background-color: tan;
	
}
body>header>.toolbar>.data>.coupons>button.login, body>header>.toolbar>.data>.language>button.login, body>header>.toolbar>.data>.newsletter>button.login, body>header>.toolbar>.data>.retailer-data>button.login, body>header>.toolbar>.data>.user-details>button.login{
	
	color: black;
	background-color: tan;
	
}

/* FORCE toolbar beige/tan to white */
body>header>.toolbar>.data>.coupons.coupons>a,
body>header>.toolbar>.data>.language.coupons>a,
body>header>.toolbar>.data>.newsletter.coupons>a,
body>header>.toolbar>.data>.retailer-data.coupons>a,
body>header>.toolbar>.data>.user-details.coupons>a,
body > header > .toolbar > .data > .retailer-data sp-dropdown > .sp-dropdown-text,
body > header > .toolbar > .data > .user-details sp-dropdown > .sp-dropdown-text,
body > header > .toolbar > .data > .coupons sp-dropdown > .sp-dropdown-text,
body > header > .toolbar > .data > .language sp-dropdown > .sp-dropdown-text,
body > header > .toolbar > .data > .newsletter sp-dropdown > .sp-dropdown-text,
body > header > .toolbar > .data > .retailer-data sp-dropdown > .sp-dropdown-text,
body > header > .toolbar > .data > .user-details sp-dropdown > .sp-dropdown-text,
body>header>.toolbar>.data>.coupons>button.login,
body>header>.toolbar>.data>.language>button.login,
body>header>.toolbar>.data>.newsletter>button.login,
body>header>.toolbar>.data>.retailer-data>button.login,
body>header>.toolbar>.data>.user-details>button.login {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* FIX: Donate / About in header (turn image-links into readable text) */
body > header > .toolbar > .data > .links > a img {
  display: none !important;
}

body > header > .toolbar > .data > .links > a {
  padding: 0 10px !important;
  text-decoration: none !important;
}

body > header > .toolbar > .data > .links > a::after {
  content: attr(title);
  color: #960F44 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: .5px;
  text-transform: uppercase;
}

@media screen and (min-width: 769px) {
  body > header span.data a[href="/web-pages/386"],
  body > header span.data a[href="/web-pages/589"] {
    display: none !important;
  }
}





/* ==========================================================
   PART 2: PREMIUM PRODUCT-FIRST OVERRIDE V1
   ========================================================== */


/* ==========================================================
   KOSHER4LESS / STOR.AI PREMIUM PRODUCT-FIRST OVERRIDE V1
   Paste this at the VERY BOTTOM of your current CSS file.

   Goal:
   - Small tight hero like modern grocery/ecommerce sites
   - More product-first feel
   - Premium header/search/category/product styling
   - Visual changes only
   - Avoid breaking cart, checkout, dropdowns, quantity controls, login, search

   Important:
   - This file avoids changing cart structure.
   - This file avoids aggressive global display/position overrides.
   - If one section causes issues, delete that section only.
   ========================================================== */


/* ------------------------------
   0. Brand Tokens
   ------------------------------ */

:root {
    --k4l-brand: #960F44;
    --k4l-brand-dark: #711135;
    --k4l-cream: #FBF7EF;
    --k4l-soft: #F6EFE6;
    --k4l-card: #FFFFFF;
    --k4l-line: #EADFCC;
    --k4l-text: #15120F;
    --k4l-muted: #706861;
    --k4l-green: #178344;
    --k4l-gold: #C9A56D;
    --k4l-shadow: 0 10px 28px rgba(35, 24, 17, 0.08);
    --k4l-soft-shadow: 0 5px 16px rgba(35, 24, 17, 0.055);
}


/* ------------------------------
   1. Page Base
   Safe: color/background/font polish only
   ------------------------------ */

html,
body {
    background-color: var(--k4l-cream) !important;
    color: var(--k4l-text) !important;
}

body {
    font-family: Arial, Helvetica, sans-serif !important;
}


/* ------------------------------
   2. Sticky Premium Header
   Safe: visual shell only
   ------------------------------ */

body > header {
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom: 1px solid var(--k4l-line) !important;
    box-shadow: 0 7px 22px rgba(0, 0, 0, 0.045) !important;
}

body > header > .toolbar {
    background-color: #ffffff !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

body > header > .toolbar > .data {
    max-width: 1360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ------------------------------
   3. Header Dropdown/Login Pills
   Safe: makes existing account/store/language controls look premium
   ------------------------------ */

body > header > .toolbar > .data > .coupons.coupons > a,
body > header > .toolbar > .data > .language.coupons > a,
body > header > .toolbar > .data > .newsletter.coupons > a,
body > header > .toolbar > .data > .retailer-data.coupons > a,
body > header > .toolbar > .data > .user-details.coupons > a,
body > header > .toolbar > .data > .retailer-data sp-dropdown > .sp-dropdown-text,
body > header > .toolbar > .data > .user-details sp-dropdown > .sp-dropdown-text,
body > header > .toolbar > .data > .coupons sp-dropdown > .sp-dropdown-text,
body > header > .toolbar > .data > .language sp-dropdown > .sp-dropdown-text,
body > header > .toolbar > .data > .newsletter sp-dropdown > .sp-dropdown-text,
body > header > .toolbar > .data > .retailer-data sp-dropdown > .sp-dropdown-text,
body > header > .toolbar > .data > .user-details sp-dropdown > .sp-dropdown-text,
body > header > .toolbar > .data > .coupons > button.login,
body > header > .toolbar > .data > .language > button.login,
body > header > .toolbar > .data > .newsletter > button.login,
body > header > .toolbar > .data > .retailer-data > button.login,
body > header > .toolbar > .data > .user-details > button.login {
    background-color: #ffffff !important;
    color: var(--k4l-text) !important;
    border: 1px solid var(--k4l-line) !important;
    border-radius: 999px !important;
    box-shadow: var(--k4l-soft-shadow) !important;
    font-weight: 800 !important;
}


/* Keep open dropdown readable */
body > header > .toolbar > .data > .user-details sp-dropdown.open,
body > header > .toolbar > .data > .language sp-dropdown.open,
body > header > .toolbar > .data > .retailer-data sp-dropdown.open,
body > header > .toolbar > .data > .user-details sp-dropdown > .sp-dropdown-options-wrapper,
body > header > .toolbar > .data > .language sp-dropdown > .sp-dropdown-options-wrapper,
body > header > .toolbar > .data > .retailer-data sp-dropdown > .sp-dropdown-options-wrapper {
    background-color: #ffffff !important;
    color: var(--k4l-text) !important;
    border: 1px solid var(--k4l-line) !important;
    border-radius: 16px !important;
    box-shadow: var(--k4l-shadow) !important;
    overflow: hidden !important;
}

body > header > .toolbar > .data > .user-details sp-dropdown > .sp-dropdown-options-wrapper > .sp-option:hover,
body > header > .toolbar > .data > .language sp-dropdown > .sp-dropdown-options-wrapper > .sp-option:hover,
body > header > .toolbar > .data > .retailer-data sp-dropdown > .sp-dropdown-options-wrapper > .sp-option:hover,
body > header > .toolbar > .data > .user-details sp-dropdown > .sp-dropdown-options-wrapper .sp-option.active,
body > header > .toolbar > .data > .language sp-dropdown > .sp-dropdown-options-wrapper .sp-option.active,
body > header > .toolbar > .data > .retailer-data sp-dropdown > .sp-dropdown-options-wrapper .sp-option.active {
    background-color: var(--k4l-soft) !important;
    color: var(--k4l-text) !important;
}


/* ------------------------------
   4. Search Bar
   Safe: visual styling only
   ------------------------------ */

body > header > .toolbar > .data > .search-wrapper > .search > .input {
    background: #ffffff !important;
    border: 1px solid var(--k4l-line) !important;
    border-radius: 999px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--k4l-soft-shadow) !important;
    overflow: hidden !important;
}

body > header > .toolbar > .data > .search-wrapper > .search > .input > input {
    background-color: transparent !important;
    color: var(--k4l-text) !important;
    font-weight: 600 !important;
}

body > header > .toolbar > .data > .search-wrapper > .search > .input > input::placeholder {
    color: #9A9289 !important;
}

body > header > .toolbar > .data > .search-wrapper > .search > .input > button {
    background-color: var(--k4l-brand) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    font-weight: 900 !important;
    box-shadow: 0 8px 18px rgba(150, 15, 68, .20) !important;
}


/* ------------------------------
   5. Donate / About Header Links
   Safe: keeps your current text-link fix, but makes it cleaner
   ------------------------------ */

body > header > .toolbar > .data > .links > a {
    border-radius: 999px !important;
    background: #ffffff !important;
    border: 1px solid var(--k4l-line) !important;
    box-shadow: var(--k4l-soft-shadow) !important;
    margin-left: 5px !important;
}

body > header > .toolbar > .data > .links > a::after {
    color: var(--k4l-brand) !important;
    font-weight: 900 !important;
    font-size: 12px !important;
    letter-spacing: .4px !important;
}


/* ------------------------------
   6. Category Bar
   Safe: visual polish, no menu logic changes
   ------------------------------ */

body > header > .menu {
    background: var(--k4l-brand) !important;
}

body > header > .menu > .categories {
    max-width: 1360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body > header > .menu > .categories > .category {
    border-left: 1px solid rgba(255,255,255,.14) !important;
}

body > header > .menu > .categories > .category > .category-content {
    background: var(--k4l-brand) !important;
    color: #ffffff !important;
    transition: background-color .16s ease, box-shadow .16s ease !important;
}

body > header > .menu > .categories > .category > .category-content > .content > .name {
    color: #ffffff !important;
    font-weight: 900 !important;
    letter-spacing: .1px !important;
}

body > header > .menu > .categories > .category.current > .category-content,
body > header > .menu > .categories > .category.open > .category-content,
body > header > .menu > .categories > .category:hover > .category-content {
    background: rgba(255,255,255,.12) !important;
    box-shadow: inset 0 -3px var(--k4l-gold) !important;
}


/* ------------------------------
   7. Home Page Background + Component Spacing
   Safe: removes giant landing-page feel
   ------------------------------ */

html.home section.view,
html.home section.view .home-page-wrapper,
html.home section.view .home-page-wrapper > .content {
    background-color: var(--k4l-cream) !important;
}

html.home section.view .home-page-wrapper > .content > .component {
    background-color: transparent !important;
    padding-top: 1.05em !important;
    padding-bottom: 1.05em !important;
}


/* Small tight hero image/banner instead of giant header.
   This targets the existing Stor.ai home background area from your file. */
html.home section.view .home-page-wrapper > .background-wrapper {
    background-color: var(--k4l-cream) !important;
    padding: 14px 22px 0 !important;
}

html.home section.view .home-page-wrapper > .background-wrapper .background {
    width: 100% !important;
    max-width: 1360px !important;
    height: 130px !important;
    max-height: 130px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    box-shadow: var(--k4l-shadow) !important;
    background-position: center center !important;
    background-size: cover !important;
}


/* If Stor.ai uses an image tag inside the background, keep it cropped neatly */
html.home section.view .home-page-wrapper > .background-wrapper .background img {
    width: 100% !important;
    height: 130px !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 22px !important;
}


/* ------------------------------
   8. Product-First Homepage Sections
   Safe: makes existing content blocks feel more like carousels/cards
   ------------------------------ */

html.home section.view .home-page-wrapper > .content {
    max-width: 1360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
}

html.home section.view .home-page-wrapper > .content h1,
html.home section.view .home-page-wrapper > .content h2,
html.home section.view .home-page-wrapper > .content h3 {
    color: var(--k4l-text) !important;
    font-weight: 900 !important;
    letter-spacing: -0.5px !important;
}

html.home section.view .home-page-wrapper > .content a {
    color: var(--k4l-brand) !important;
}


/* ------------------------------
   9. Product Grid / Product Cards
   These selectors are intentionally broad but visual-only.
   If any product-card rule breaks the site, remove this section first.
   ------------------------------ */

section.view sp-items,
section.view sp-items .items,
section.view sp-items .items-wrapper {
    background-color: transparent !important;
}

section.view sp-items sp-item,
section.view sp-items .item,
section.view sp-items .product,
section.view sp-items .product-item,
section.view sp-items .catalog-item {
    background-color: #ffffff !important;
    border: 1px solid var(--k4l-line) !important;
    border-radius: 20px !important;
    box-shadow: var(--k4l-soft-shadow) !important;
    overflow: hidden !important;
    transition: box-shadow .16s ease, transform .16s ease !important;
}

section.view sp-items sp-item:hover,
section.view sp-items .item:hover,
section.view sp-items .product:hover,
section.view sp-items .product-item:hover,
section.view sp-items .catalog-item:hover {
    box-shadow: var(--k4l-shadow) !important;
    transform: translateY(-2px) !important;
}


/* Product image areas */
section.view sp-items sp-item img,
section.view sp-items .item img,
section.view sp-items .product img,
section.view sp-items .product-item img,
section.view sp-items .catalog-item img {
    border-radius: 14px !important;
}


/* Product names */
section.view sp-items .name,
section.view sp-items .title,
section.view sp-items .item-name,
section.view sp-items .product-name {
    color: var(--k4l-text) !important;
    font-weight: 900 !important;
    line-height: 1.22 !important;
}


/* Product price */
section.view sp-items .price,
section.view sp-items .item-price,
section.view sp-items .product-price {
    color: var(--k4l-text) !important;
    font-weight: 900 !important;
    letter-spacing: -0.3px !important;
}


/* Add buttons only. Does not touch quantity/plus/minus inputs. */
section.view sp-items button.add,
section.view sp-items .add button,
section.view sp-items .add-to-cart button,
section.view sp-items button.add-to-cart {
    background-color: var(--k4l-green) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    border: none !important;
    font-weight: 900 !important;
    box-shadow: 0 8px 18px rgba(23, 131, 68, .18) !important;
}


/* ------------------------------
   10. Product Listing Tools / Filters
   Safe: visual polish only
   ------------------------------ */

section.view sp-items > .tools-wrapper .tools,
section.view sp-items > .tools-wrapper .tools .tools-opener {
    background-color: #ffffff !important;
    border-color: var(--k4l-line) !important;
    border-radius: 16px !important;
    box-shadow: var(--k4l-soft-shadow) !important;
}

section.view sp-items > .tools-wrapper .tools .tools-opener .text {
    color: var(--k4l-text) !important;
    font-weight: 800 !important;
}

div.sorter sp-dropdown .sp-dropdown-text {
    background-color: #ffffff !important;
    border: 1px solid var(--k4l-line) !important;
    border-radius: 999px !important;
    color: var(--k4l-text) !important;
    box-shadow: var(--k4l-soft-shadow) !important;
}


/* ------------------------------
   11. Cart / Checkout Visual Polish Only
   Do not change cart structure or behavior.
   ------------------------------ */

html div.sidenav > div > nav > header,
html div.sidenav > div > nav header.nav-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--k4l-line) !important;
    color: var(--k4l-text) !important;
}

html div.sidenav > div > nav.cart > footer > .checkout > span,
html div.sidenav > div > nav > header .right .button,
checkout-bottom-banner .total-summary .next-button button {
    background-color: var(--k4l-brand) !important;
    color: #ffffff !important;
    border-color: var(--k4l-brand) !important;
    border-radius: 999px !important;
    font-weight: 900 !important;
    box-shadow: 0 10px 22px rgba(150, 15, 68, .20) !important;
}

html div.sidenav > div > nav.cart > footer > .checkout > span > span,
html div.sidenav > div > nav.cart > footer > .checkout > span {
    color: #ffffff !important;
}

html div.sidenav > div > nav header.nav-header .left > .clean-cart-icon,
html div.sidenav > div > nav > header .left > .clean-cart-icon {
    background-color: #f2eee8 !important;
    border-radius: 999px !important;
}

img.middle.remove-icon {
    padding-top: 0.35em !important;
}

span.middle.delete-text {
    color: var(--k4l-text) !important;
}


/* Checkout bottom banner */
checkout-bottom-banner {
    background-color: #15120F !important;
    color: #ffffff !important;
}

checkout-bottom-banner .help-buttons .continue-shopping button,
checkout-bottom-banner .total-summary .back-button button {
    color: #ffffff !important;
    border: 2px solid rgba(255,255,255,.75) !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
}

checkout-bottom-banner .total-summary .est-total .title,
checkout-bottom-banner .total-summary .est-total .total,
checkout-bottom-banner .total-summary .est-total .total .items-total,
checkout-bottom-banner .total-summary > .saved-price > div > span {
    color: #ffffff !important;
}


/* ------------------------------
   12. Footer
   ------------------------------ */

html.home > body > footer,
body > footer {
    background-color: #15120F !important;
    color: #ffffff !important;
}

body > footer .inner-footer {
    max-width: 1360px !important;
    padding: 2em 2.1em !important;
}

body > footer .inner-footer > img.logo {
    max-height: 4.25em !important;
}


/* ------------------------------
   13. Mobile Safety
   Keeps hero tight and prevents header from feeling giant.
   ------------------------------ */

@media screen and (max-width: 768px) {
    body > header > .toolbar {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    html.home section.view .home-page-wrapper > .background-wrapper {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    html.home section.view .home-page-wrapper > .background-wrapper .background,
    html.home section.view .home-page-wrapper > .background-wrapper .background img {
        height: 105px !important;
        max-height: 105px !important;
        border-radius: 18px !important;
    }

    html.home section.view .home-page-wrapper > .content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body > header > .menu > .categories > .category > .category-content > .content > .name {
        font-size: 12px !important;
    }
}


/* ------------------------------
   14. Emergency Undo Notes
   If something breaks:
   - If homepage image looks weird: delete Section 7.
   - If product cards look weird: delete Section 9.
   - If cart looks weird: delete Section 11.
   - Header/search/category sections are the safest.
   ------------------------------ */



/* ==========================================================
   PART 3: PREMIUM FIX PATCH V1.1
   ========================================================== */


/* ==========================================================
   KOSHER4LESS / STOR.AI PREMIUM FIX PATCH V1.1
   Paste this at the VERY BOTTOM, below the previous override.

   Fixes from screenshot:
   - Removes giant dead space under hero/banner
   - Makes search bar clearly look like a search bar again
   - Makes top header cleaner and less awkward
   - Makes cart preview/dropdown more premium
   - Keeps cart/search/dropdown functionality intact
   ========================================================== */


/* ------------------------------
   1. Fix the dead space below the hero
   The issue: the image was made small, but Stor.ai's parent wrapper
   was still holding tall landing-page space.
   ------------------------------ */

html.home section.view .home-page-wrapper > .background-wrapper {
    height: auto !important;
    min-height: 0 !important;
    max-height: 155px !important;
    padding: 12px 3.75vw 0 !important;
    margin: 0 auto 16px !important;
    overflow: visible !important;
    background: #FBF7EF !important;
}

html.home section.view .home-page-wrapper > .background-wrapper .background {
    display: block !important;
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
    width: 100% !important;
    max-width: 1360px !important;
    margin: 0 auto !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 22px rgba(35,24,17,.075) !important;
    background-size: cover !important;
    background-position: center center !important;
}

html.home section.view .home-page-wrapper > .background-wrapper .background img {
    height: 120px !important;
    max-height: 120px !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 18px !important;
}

/* Pull the first carousel closer to the banner */
html.home section.view .home-page-wrapper > .content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

html.home section.view .home-page-wrapper > .content > .component:first-child,
html.home section.view .home-page-wrapper > .content > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* If Stor.ai has an internal spacer after the banner, collapse it */
html.home section.view .home-page-wrapper > .background-wrapper + .content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* ------------------------------
   2. Header cleanup
   The issue: too many elements look like separate beige/white pills.
   Make header cleaner, flatter, and more marketplace-like.
   ------------------------------ */

body > header > .toolbar {
    min-height: 64px !important;
    padding: 8px 18px !important;
}

body > header > .toolbar > .data {
    gap: 10px !important;
    align-items: center !important;
}

/* Logo should not feel trapped in a pill */
body > header .logo,
body > footer .inner-footer > img.logo {
    box-shadow: none !important;
}

/* Make Donate/About simple text links, not heavy buttons */
body > header > .toolbar > .data > .links > a {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 8px !important;
}

body > header > .toolbar > .data > .links > a::after {
    color: #960F44 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .35px !important;
}


/* ------------------------------
   3. Search bar fix
   The issue: it no longer clearly looked like a search bar,
   and the suggestion/placeholder became unclear.
   ------------------------------ */

body > header > .toolbar > .data > .search-wrapper {
    max-width: 650px !important;
}

body > header > .toolbar > .data > .search-wrapper > .search > .input {
    height: 42px !important;
    background: #FFFFFF !important;
    border: 1px solid #E6DCCB !important;
    border-radius: 999px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 3px 10px rgba(35,24,17,.045) !important;
    position: relative !important;
}

/* Search icon cue without touching functionality */
body > header > .toolbar > .data > .search-wrapper > .search > .input::before {
    content: "Search";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #960F44;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .5px;
    text-transform: uppercase;
    pointer-events: none;
    opacity: .95;
}

body > header > .toolbar > .data > .search-wrapper > .search > .input > input {
    height: 42px !important;
    padding-left: 78px !important;
    padding-right: 16px !important;
    background: transparent !important;
    color: #15120F !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    text-align: left !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

body > header > .toolbar > .data > .search-wrapper > .search > .input > input::placeholder {
    color: #8E857C !important;
    opacity: 1 !important;
    font-weight: 600 !important;
    font-style: normal !important;
    text-transform: none !important;
}

/* Keep button visible but smaller and cleaner */
body > header > .toolbar > .data > .search-wrapper > .search > .input > button {
    height: 32px !important;
    min-width: 44px !important;
    margin-right: 5px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: #960F44 !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}


/* ------------------------------
   4. Header account/language/login controls
   The issue: controls were too large and pill-heavy.
   ------------------------------ */

body > header > .toolbar > .data > .retailer-data sp-dropdown > .sp-dropdown-text,
body > header > .toolbar > .data > .user-details sp-dropdown > .sp-dropdown-text,
body > header > .toolbar > .data > .language sp-dropdown > .sp-dropdown-text,
body > header > .toolbar > .data > .coupons > button.login,
body > header > .toolbar > .data > .language > button.login,
body > header > .toolbar > .data > .newsletter > button.login,
body > header > .toolbar > .data > .retailer-data > button.login,
body > header > .toolbar > .data > .user-details > button.login {
    min-height: 40px !important;
    border-radius: 18px !important;
    background: #FFFFFF !important;
    border: 1px solid #E6DCCB !important;
    color: #15120F !important;
    box-shadow: none !important;
    font-weight: 900 !important;
}

/* Open dropdown should be premium white, but not flat */
body > header > .toolbar > .data > .user-details sp-dropdown > .sp-dropdown-options-wrapper,
body > header > .toolbar > .data > .language sp-dropdown > .sp-dropdown-options-wrapper,
body > header > .toolbar > .data > .retailer-data sp-dropdown > .sp-dropdown-options-wrapper {
    border-radius: 18px !important;
    border: 1px solid #E6DCCB !important;
    background: #FFFFFF !important;
    box-shadow: 0 18px 45px rgba(35,24,17,.13) !important;
}


/* ------------------------------
   5. Category bar cleanup
   The issue: category area feels heavy and too tall.
   ------------------------------ */

body > header > .menu {
    background: #960F44 !important;
    min-height: 58px !important;
}

body > header > .menu > .categories > .category > .category-content {
    min-height: 58px !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}

body > header > .menu > .categories > .category > .category-content > .content > .name {
    font-size: 13px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
}


/* ------------------------------
   6. Cart preview/dropdown premium styling
   The issue: plain white box feels unfinished and sits awkwardly.
   This keeps it functional but makes it feel designed.
   ------------------------------ */

/* Common cart preview containers in Stor.ai header */
body > header .cart,
body > header .cart-preview,
body > header .cart-summary,
body > header .shopping-cart,
body > header .basket,
body > header .mini-cart {
    background: #15120F !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 18px !important;
    box-shadow: 0 16px 42px rgba(35,24,17,.22) !important;
    overflow: hidden !important;
}

/* If the header cart has internal white panels, soften them */
body > header .cart *,
body > header .cart-preview *,
body > header .cart-summary *,
body > header .shopping-cart *,
body > header .basket *,
body > header .mini-cart * {
    color: inherit;
}

/* Cart amount/checkout button */
body > header .cart button,
body > header .cart-preview button,
body > header .cart-summary button,
body > header .shopping-cart button,
body > header .basket button,
body > header .mini-cart button,
body > header button.checkout,
body > header .checkout {
    background: #C78DB0 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 999px !important;
    font-weight: 900 !important;
}

/* Specific visible checkout button from screenshot */
body > header [class*="checkout"],
body > header [class*="Checkout"] {
    border-radius: 999px !important;
    font-weight: 900 !important;
}

/* Empty cart text should be readable on dark cart */
body > header .cart .title,
body > header .cart .total,
body > header .cart .items,
body > header .cart-preview .title,
body > header .cart-preview .total,
body > header .cart-preview .items,
body > header .cart-summary .title,
body > header .cart-summary .total,
body > header .cart-summary .items {
    color: #FFFFFF !important;
}


/* ------------------------------
   7. Product carousel spacing
   The issue: first carousel starts too low.
   ------------------------------ */

html.home section.view .home-page-wrapper > .content > .component {
    padding-top: .65em !important;
    padding-bottom: .85em !important;
    margin-top: 0 !important;
}

/* Homepage carousel title row */
html.home section.view .home-page-wrapper > .content h2,
html.home section.view .home-page-wrapper > .content h3 {
    margin-top: 0 !important;
    color: #15120F !important;
    font-size: 26px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.6px !important;
    font-weight: 900 !important;
}

/* The current carousel title in screenshot is too far left but good.
   This makes it more premium without changing layout. */
html.home section.view .home-page-wrapper > .content a {
    color: #960F44 !important;
    font-weight: 900 !important;
}


/* ------------------------------
   8. Mobile fixes
   ------------------------------ */

@media screen and (max-width: 768px) {
    html.home section.view .home-page-wrapper > .background-wrapper {
        max-height: 125px !important;
        padding: 10px 12px 0 !important;
        margin-bottom: 12px !important;
    }

    html.home section.view .home-page-wrapper > .background-wrapper .background,
    html.home section.view .home-page-wrapper > .background-wrapper .background img {
        height: 100px !important;
        min-height: 100px !important;
        max-height: 100px !important;
        border-radius: 16px !important;
    }

    body > header > .toolbar > .data > .search-wrapper {
        max-width: none !important;
        width: 100% !important;
    }

    body > header > .toolbar > .data > .search-wrapper > .search > .input::before {
        content: "Search";
        left: 14px;
    }

    body > header > .toolbar > .data > .search-wrapper > .search > .input > input {
        padding-left: 72px !important;
    }
}


/* ------------------------------
   Emergency Undo:
   If cart dropdown becomes weird, delete Section 6.
   If dead space remains, the next target is a different Stor.ai spacer wrapper.
   ------------------------------ */



/* ==========================================================
   PART 4: HEADER WHITE / ICON FIX V1.2
   ========================================================== */


/* ==========================================================
   KOSHER4LESS HEADER WHITE FIX PATCH V1.2
   Paste at the VERY BOTTOM, below all previous CSS.

   Focus:
   - Remove yellow/tan header background
   - Remove ugly white icon boxes in category bar
   - Make coupons/My Items/Specials icons blend cleanly
   - Keep search bar clear and aesthetic
   - Do not touch cart logic or checkout behavior
   ========================================================== */


/* ------------------------------
   1. Force the entire top toolbar area white
   ------------------------------ */

body > header,
body > header > .toolbar,
body > header > .toolbar > .data,
body > header > .toolbar > .data > span,
body > header > .toolbar > .data > div {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Remove tan/gold bleed from any Stor.ai inner toolbar wrappers */
body > header .toolbar *,
body > header > .toolbar * {
    background-image: none;
}

/* But do not globally erase dropdown/popup styling */
body > header > .toolbar sp-dropdown,
body > header > .toolbar sp-dropdown *,
body > header > .toolbar button,
body > header > .toolbar a {
    background-image: none !important;
}


/* ------------------------------
   2. Logo area should sit on white, not yellow
   ------------------------------ */

body > header .toolbar .logo,
body > header .toolbar img.logo,
body > header > .toolbar img,
body > header > .toolbar .retailer-logo,
body > header > .toolbar .logo-wrapper {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}


/* ------------------------------
   3. Search bar premium white state
   ------------------------------ */

body > header > .toolbar > .data > .search-wrapper,
body > header > .toolbar > .data > .search-wrapper > .search {
    background-color: transparent !important;
}

body > header > .toolbar > .data > .search-wrapper > .search > .input {
    background-color: #ffffff !important;
    border: 1px solid #E6DCCB !important;
    border-radius: 999px !important;
    box-shadow: 0 3px 12px rgba(35,24,17,.055) !important;
}

body > header > .toolbar > .data > .search-wrapper > .search > .input::before {
    color: #960F44 !important;
    background: transparent !important;
}

body > header > .toolbar > .data > .search-wrapper > .search > .input > input {
    background-color: transparent !important;
    color: #15120F !important;
}

body > header > .toolbar > .data > .search-wrapper > .search > .input > button {
    background-color: #960F44 !important;
    background-image: none !important;
    color: #ffffff !important;
    border-radius: 999px !important;
}


/* ------------------------------
   4. Header links: Donate/About should be clean text links
   ------------------------------ */

body > header > .toolbar > .data > .links,
body > header > .toolbar > .data > .links > a {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body > header > .toolbar > .data > .links > a img {
    display: none !important;
}

body > header > .toolbar > .data > .links > a::after {
    color: #960F44 !important;
    background: transparent !important;
    font-weight: 900 !important;
}


/* ------------------------------
   5. Account / Language / Login pills
   Keep them white, but cleaner.
   ------------------------------ */

body > header > .toolbar > .data > .retailer-data,
body > header > .toolbar > .data > .user-details,
body > header > .toolbar > .data > .language,
body > header > .toolbar > .data > .coupons,
body > header > .toolbar > .data > .newsletter {
    background: transparent !important;
}

body > header > .toolbar > .data > .retailer-data sp-dropdown > .sp-dropdown-text,
body > header > .toolbar > .data > .user-details sp-dropdown > .sp-dropdown-text,
body > header > .toolbar > .data > .language sp-dropdown > .sp-dropdown-text,
body > header > .toolbar > .data > .coupons sp-dropdown > .sp-dropdown-text,
body > header > .toolbar > .data > .newsletter sp-dropdown > .sp-dropdown-text,
body > header > .toolbar > .data > .coupons > button.login,
body > header > .toolbar > .data > .language > button.login,
body > header > .toolbar > .data > .newsletter > button.login,
body > header > .toolbar > .data > .retailer-data > button.login,
body > header > .toolbar > .data > .user-details > button.login {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #15120F !important;
    border: 1px solid #E6DCCB !important;
    border-radius: 18px !important;
    box-shadow: none !important;
}

/* Header text and icons inside pills */
body > header > .toolbar > .data > .retailer-data sp-dropdown > .sp-dropdown-text *,
body > header > .toolbar > .data > .user-details sp-dropdown > .sp-dropdown-text *,
body > header > .toolbar > .data > .language sp-dropdown > .sp-dropdown-text *,
body > header > .toolbar > .data > .coupons sp-dropdown > .sp-dropdown-text *,
body > header > .toolbar > .data > .newsletter sp-dropdown > .sp-dropdown-text * {
    color: #15120F !important;
    background-color: transparent !important;
}


/* ------------------------------
   6. Category bar icon cleanup
   The issue: My Items/Specials icons got ugly white square backgrounds.
   This makes the icon area transparent and removes boxed look.
   ------------------------------ */

body > header > .menu,
body > header > .menu > .categories,
body > header > .menu > .categories > .category,
body > header > .menu > .categories > .category > .category-content {
    background-color: #960F44 !important;
    background-image: none !important;
}

body > header > .menu > .categories > .category.current > .category-content,
body > header > .menu > .categories > .category.open > .category-content,
body > header > .menu > .categories > .category:hover > .category-content {
    background-color: rgba(255,255,255,.10) !important;
}

/* Remove white icon boxes */
body > header > .menu > .categories > .category > .category-content > .content > .image,
body > header > .menu > .categories > .category > .category-content > .content > .image *,
body > header > .menu > .categories > .category > .category-content > .content > .image > img {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Make category icons white/clean */
body > header > .menu > .categories > .category > .category-content > .content > .image > img,
body > header > .menu > .categories > .category > .category-content > .content > .image > img.normal,
body > header > .menu > .categories > .category > .category-content > .content > .image > img.current {
    filter: brightness(0) invert(1) !important;
    -webkit-filter: brightness(0) invert(1) !important;
    opacity: .95 !important;
}

/* Stop old rule from hiding normal icon weirdly */
body > header > .menu > .categories > .category > .category-content > .content > .image > img.normal {
    display: inline-block !important;
}

body > header > .menu > .categories > .category > .category-content > .content > .image > img.current {
    display: none !important;
}

/* Category text */
body > header > .menu > .categories > .category > .category-content > .content > .name {
    color: #ffffff !important;
    background: transparent !important;
    font-weight: 900 !important;
}


/* ------------------------------
   7. Cart preview should stay burgundy, not affected by toolbar white
   ------------------------------ */

body > header .cart,
body > header .cart-preview,
body > header .cart-summary,
body > header .shopping-cart,
body > header .basket,
body > header .mini-cart {
    background-color: #960F44 !important;
    background-image: none !important;
    color: #ffffff !important;
    border-radius: 0 0 18px 18px !important;
    box-shadow: 0 14px 35px rgba(35,24,17,.18) !important;
}

body > header .cart *,
body > header .cart-preview *,
body > header .cart-summary *,
body > header .shopping-cart *,
body > header .basket *,
body > header .mini-cart * {
    background-color: transparent;
}

body > header .cart button,
body > header .cart-preview button,
body > header .cart-summary button,
body > header .shopping-cart button,
body > header .basket button,
body > header .mini-cart button {
    background-color: rgba(255,255,255,.18) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
}


/* ------------------------------
   8. Mobile
   ------------------------------ */

@media screen and (max-width: 768px) {
    body > header,
    body > header > .toolbar,
    body > header > .toolbar > .data {
        background-color: #ffffff !important;
    }

    body > header > .menu,
    body > header > .menu > .categories,
    body > header > .menu > .categories > .category,
    body > header > .menu > .categories > .category > .category-content {
        background-color: #960F44 !important;
    }
}




/* ==========================================================
   PART 5: HEADER RESTORE + CONTROLLED POLISH V1.5
   This intentionally avoids the bad V1.3 layout approach.

   Main goal:
   - Pull Login back into the top toolbar
   - Keep toolbar white
   - Keep header controls aligned without rebuilding Stor.ai layout
   - Remove weird vertical separator/white-box artifacts
   - Do not touch cart/search/checkout functionality
   ========================================================== */


/* ------------------------------
   1. Hard reset any bad positioning from previous header attempts
   ------------------------------ */

body > header > .toolbar > .data > .user-details,
body > header > .toolbar > .data > .user-details > button.login,
body > header > .toolbar > .data > .user-details sp-dropdown,
body > header > .toolbar > .data > .language,
body > header > .toolbar > .data > .language sp-dropdown,
body > header > .toolbar > .data > .retailer-data,
body > header > .toolbar > .data > .retailer-data sp-dropdown,
body > header > .toolbar > .data > .links,
body > header > .toolbar > .data > .links > a {
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    translate: none !important;
    float: none !important;
    clear: none !important;
}

/* Critical: do NOT let Login behave like an absolute bubble over the category bar */
body > header > .toolbar > .data > .user-details,
body > header > .toolbar > .data > .user-details > button.login {
    position: relative !important;
    z-index: 5 !important;
}


/* ------------------------------
   2. Toolbar foundation, no layout rebuild
   ------------------------------ */

body > header {
    background: #ffffff !important;
    background-image: none !important;
}

body > header > .toolbar {
    background: #ffffff !important;
    background-image: none !important;
    border-bottom: 1px solid #eadfcc !important;
    box-shadow: 0 4px 14px rgba(35,24,17,.045) !important;
    min-height: 68px !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}

body > header > .toolbar > .data,
body > header > .toolbar > .data > * {
    background-color: transparent !important;
    background-image: none !important;
}


/* ------------------------------
   3. Logo clean state
   ------------------------------ */

body > header > .toolbar img,
body > header > .toolbar img.logo,
body > header > .toolbar .logo img,
body > header > .toolbar .retailer-logo img {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body > header > .toolbar img.logo,
body > header > .toolbar .logo img,
body > header > .toolbar .retailer-logo img {
    max-height: 42px !important;
    width: auto !important;
    object-fit: contain !important;
}


/* ------------------------------
   4. Search bar, polished but stable
   ------------------------------ */

body > header > .toolbar > .data > .search-wrapper {
    background: transparent !important;
}

body > header > .toolbar > .data > .search-wrapper > .search,
body > header > .toolbar > .data > .search-wrapper > .search > .input {
    background: transparent !important;
}

body > header > .toolbar > .data > .search-wrapper > .search > .input {
    height: 44px !important;
    min-height: 44px !important;
    background-color: #ffffff !important;
    border: 1px solid #e4d8c7 !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 12px rgba(35,24,17,.05) !important;
    overflow: hidden !important;
    position: relative !important;
}

body > header > .toolbar > .data > .search-wrapper > .search > .input::before {
    content: "SEARCH" !important;
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #960F44 !important;
    background: transparent !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .5px !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

body > header > .toolbar > .data > .search-wrapper > .search > .input > input {
    height: 44px !important;
    background: transparent !important;
    color: #15120F !important;
    padding-left: 82px !important;
    padding-right: 54px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-align: left !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

body > header > .toolbar > .data > .search-wrapper > .search > .input > input::placeholder {
    color: #7d756d !important;
    opacity: 1 !important;
    font-weight: 650 !important;
    text-transform: none !important;
}

body > header > .toolbar > .data > .search-wrapper > .search > .input > button {
    background-color: #960F44 !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    min-width: 42px !important;
}


/* ------------------------------
   5. Header links, simple text only
   ------------------------------ */

body > header > .toolbar > .data > .links,
body > header > .toolbar > .data > .links > a {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

body > header > .toolbar > .data > .links > a img {
    display: none !important;
}

body > header > .toolbar > .data > .links > a {
    padding-left: 8px !important;
    padding-right: 8px !important;
    text-decoration: none !important;
}

body > header > .toolbar > .data > .links > a::after {
    color: #960F44 !important;
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .35px !important;
    text-transform: uppercase !important;
}


/* ------------------------------
   6. Remove stray vertical lines/separators in toolbar
   ------------------------------ */

body > header > .toolbar > .data > span:empty,
body > header > .toolbar > .data > div:empty {
    display: none !important;
}

body > header > .toolbar > .data > .separator,
body > header > .toolbar > .data > .divider {
    display: none !important;
}


/* ------------------------------
   7. Store / Language / Login visuals only
   ------------------------------ */

body > header > .toolbar > .data > .retailer-data,
body > header > .toolbar > .data > .language,
body > header > .toolbar > .data > .user-details,
body > header > .toolbar > .data > .coupons,
body > header > .toolbar > .data > .newsletter {
    background: transparent !important;
    background-image: none !important;
}

/* Main control surfaces */
body > header > .toolbar > .data > .retailer-data sp-dropdown > .sp-dropdown-text,
body > header > .toolbar > .data > .language sp-dropdown > .sp-dropdown-text,
body > header > .toolbar > .data > .user-details sp-dropdown > .sp-dropdown-text,
body > header > .toolbar > .data > .coupons sp-dropdown > .sp-dropdown-text,
body > header > .toolbar > .data > .newsletter sp-dropdown > .sp-dropdown-text,
body > header > .toolbar > .data > .coupons > button.login,
body > header > .toolbar > .data > .language > button.login,
body > header > .toolbar > .data > .newsletter > button.login,
body > header > .toolbar > .data > .retailer-data > button.login,
body > header > .toolbar > .data > .user-details > button.login {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #15120F !important;
    border: 1px solid #e4d8c7 !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

/* Login specifically, because this was the broken element */
body > header > .toolbar > .data > .user-details > button.login {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 0 18px !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

/* Text/icon readability */
body > header > .toolbar > .data > .retailer-data sp-dropdown > .sp-dropdown-text *,
body > header > .toolbar > .data > .language sp-dropdown > .sp-dropdown-text *,
body > header > .toolbar > .data > .user-details sp-dropdown > .sp-dropdown-text *,
body > header > .toolbar > .data > .coupons sp-dropdown > .sp-dropdown-text *,
body > header > .toolbar > .data > .newsletter sp-dropdown > .sp-dropdown-text *,
body > header > .toolbar > .data > .user-details > button.login {
    color: #15120F !important;
    background: transparent !important;
}

body > header > .toolbar > .data > .retailer-data sp-dropdown > .sp-dropdown-text img,
body > header > .toolbar > .data > .language sp-dropdown > .sp-dropdown-text img,
body > header > .toolbar > .data > .user-details sp-dropdown > .sp-dropdown-text img {
    background: transparent !important;
    filter: none !important;
    -webkit-filter: none !important;
    opacity: .9 !important;
}


/* ------------------------------
   8. Dropdown menus
   ------------------------------ */

body > header > .toolbar > .data > .user-details sp-dropdown.open,
body > header > .toolbar > .data > .language sp-dropdown.open,
body > header > .toolbar > .data > .retailer-data sp-dropdown.open,
body > header > .toolbar > .data > .user-details sp-dropdown > .sp-dropdown-options-wrapper,
body > header > .toolbar > .data > .language sp-dropdown > .sp-dropdown-options-wrapper,
body > header > .toolbar > .data > .retailer-data sp-dropdown > .sp-dropdown-options-wrapper {
    background-color: #ffffff !important;
    color: #15120F !important;
    border: 1px solid #e4d8c7 !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 38px rgba(35,24,17,.12) !important;
}

body > header > .toolbar > .data > .user-details sp-dropdown > .sp-dropdown-options-wrapper sp-option:hover,
body > header > .toolbar > .data > .language sp-dropdown > .sp-dropdown-options-wrapper sp-option:hover,
body > header > .toolbar > .data > .retailer-data sp-dropdown > .sp-dropdown-options-wrapper sp-option:hover {
    background-color: #f6efe6 !important;
    color: #15120F !important;
}


/* ------------------------------
   9. Category bar stable state
   ------------------------------ */

body > header > .menu,
body > header > .menu > .categories,
body > header > .menu > .categories > .category,
body > header > .menu > .categories > .category > .category-content {
    background-color: #960F44 !important;
    background-image: none !important;
}

body > header > .menu > .categories > .category > .category-content {
    min-height: 58px !important;
}

body > header > .menu > .categories > .category > .category-content > .content > .image,
body > header > .menu > .categories > .category > .category-content > .content > .image * {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

body > header > .menu > .categories > .category > .category-content > .content > .image > img,
body > header > .menu > .categories > .category > .category-content > .content > .image > img.normal,
body > header > .menu > .categories > .category > .category-content > .content > .image > img.current {
    background: transparent !important;
    filter: brightness(0) invert(1) !important;
    -webkit-filter: brightness(0) invert(1) !important;
    opacity: .95 !important;
}

body > header > .menu > .categories > .category > .category-content > .content > .name {
    color: #ffffff !important;
    background: transparent !important;
    font-weight: 900 !important;
}

body > header > .menu > .categories > .category.current > .category-content,
body > header > .menu > .categories > .category.open > .category-content,
body > header > .menu > .categories > .category:hover > .category-content {
    background-color: rgba(255,255,255,.10) !important;
    box-shadow: inset 0 -3px #C9A56D !important;
}


/* ------------------------------
   10. Cart preview stable polish
   ------------------------------ */

body > header .cart,
body > header .cart-preview,
body > header .cart-summary,
body > header .shopping-cart,
body > header .basket,
body > header .mini-cart {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #15120F !important;
    border: 1px solid #eadfcc !important;
    border-radius: 0 0 16px 16px !important;
    box-shadow: 0 12px 30px rgba(35,24,17,.10) !important;
}

body > header .cart button,
body > header .cart-preview button,
body > header .cart-summary button,
body > header .shopping-cart button,
body > header .basket button,
body > header .mini-cart button {
    background-color: #C78DB0 !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    font-weight: 900 !important;
}


/* ------------------------------
   11. Mobile safety
   ------------------------------ */

@media screen and (max-width: 768px) {
    body > header > .toolbar {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    body > header > .toolbar > .data > .user-details,
    body > header > .toolbar > .data > .user-details > button.login {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
    }

    body > header > .toolbar > .data > .search-wrapper > .search > .input {
        height: 42px !important;
        min-height: 42px !important;
    }

    body > header > .toolbar > .data > .search-wrapper > .search > .input > input {
        height: 42px !important;
        padding-left: 78px !important;
    }
}



/* ==========================================================
   END OF FULL CSS FILE
   ========================================================== */



/* ==========================================================
   PART 6: SEARCH BAR REAL ALIGNMENT FIX V1.7

   Screenshot issue:
   - Search bar is sitting too low compared to Store / Eng / Login buttons.
   - Previous -4px lift was not enough.
   - This does NOT change header layout or cart/category behavior.
   ========================================================== */

body > header > .toolbar > .data > .search-wrapper {
    transform: translateY(-13px) !important;
}

/* Keep search contents centered inside the lifted pill */
body > header > .toolbar > .data > .search-wrapper > .search > .input {
    display: flex !important;
    align-items: center !important;
}

/* Make the search icon button stay centered after the lift */
body > header > .toolbar > .data > .search-wrapper > .search > .input > button {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Do not lift search on mobile */
@media screen and (max-width: 768px) {
    body > header > .toolbar > .data > .search-wrapper {
        transform: none !important;
    }
}




/* ==========================================================
   PART 7: SITE BACKGROUND WHITE V1.8

   Goal:
   - Make the site/page background white
   - Keep product cards white
   - Keep header/search/cart/category behavior unchanged
   - Remove cream/tan background feeling
   ========================================================== */

:root {
    --k4l-cream: #ffffff !important;
    --k4l-soft: #f7f7f7 !important;
}

html,
body,
html.home section.view,
html.home section.view .home-page-wrapper,
html.home section.view .home-page-wrapper > .content,
html.home section.view .home-page-wrapper > .background-wrapper {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Keep homepage components clean on white */
html.home section.view .home-page-wrapper > .content > .component {
    background-color: #ffffff !important;
}

/* Keep product/carousel area white */
section.view,
section.view sp-items,
section.view sp-items .items,
section.view sp-items .items-wrapper {
    background-color: #ffffff !important;
}

/* Product cards should still have subtle separation on white */
section.view sp-items sp-item,
section.view sp-items .item,
section.view sp-items .product,
section.view sp-items .product-item,
section.view sp-items .catalog-item {
    background-color: #ffffff !important;
    border-color: #ececec !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.055) !important;
}

section.view sp-items sp-item:hover,
section.view sp-items .item:hover,
section.view sp-items .product:hover,
section.view sp-items .product-item:hover,
section.view sp-items .catalog-item:hover {
    box-shadow: 0 12px 28px rgba(0,0,0,.085) !important;
}

/* Footer can stay dark for contrast */
html.home > body > footer,
body > footer {
    background-color: #15120F !important;
}




/* ==========================================================
   PART 8: CATEGORY ICON TRANSPARENT BACKGROUND FIX V1.9

   Goal:
   - Remove white square/background behind My Lists and Specials icons
   - Keep icons visible on burgundy category bar
   - Do not affect toolbar, search, cart, checkout, or product cards
   ========================================================== */

/* Target the category icon container and every inner layer */
body > header > .menu > .categories > .category > .category-content > .content > .image,
body > header > .menu > .categories > .category > .category-content > .content > .image > *,
body > header > .menu > .categories > .category > .category-content > .content > .image img,
body > header > .menu > .categories > .category > .category-content > .content > .image img.normal,
body > header > .menu > .categories > .category > .category-content > .content > .image img.current {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

/* Some Stor.ai icons use image classes outside the direct img.normal/img.current pattern */
body > header > .menu img,
body > header > .menu .image,
body > header > .menu .img-container,
body > header > .menu .icon {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Make the visible icon white on burgundy */
body > header > .menu > .categories > .category > .category-content > .content > .image img,
body > header > .menu img {
    filter: brightness(0) invert(1) !important;
    -webkit-filter: brightness(0) invert(1) !important;
    opacity: .96 !important;
    mix-blend-mode: normal !important;
}

/* Prevent the old CSS from showing a white/current icon state */
body > header > .menu > .categories > .category > .category-content > .content > .image > img.normal {
    display: inline-block !important;
}

body > header > .menu > .categories > .category > .category-content > .content > .image > img.current {
    display: none !important;
}

/* Keep the burgundy category block clean */
body > header > .menu > .categories > .category,
body > header > .menu > .categories > .category > .category-content,
body > header > .menu > .categories > .category > .category-content > .content {
    background-color: #960F44 !important;
    background-image: none !important;
}

/* Hover/current state should not create a white icon tile */
body > header > .menu > .categories > .category.current > .category-content,
body > header > .menu > .categories > .category.open > .category-content,
body > header > .menu > .categories > .category:hover > .category-content {
    background-color: rgba(255,255,255,.10) !important;
}

body > header > .menu > .categories > .category.current > .category-content > .content > .image,
body > header > .menu > .categories > .category.open > .category-content > .content > .image,
body > header > .menu > .categories > .category:hover > .category-content > .content > .image {
    background: transparent !important;
    background-color: transparent !important;
}




/* ==========================================================
   PART 9: CATEGORY ICON IMAGE REPLACEMENT V2.0

   Why:
   - The white square is likely baked into the actual icon image.
   - CSS cannot make white pixels inside an image transparent.
   - So this hides the original image and replaces it with clean CSS text-icons.

   Scope:
   - Only category menu icons
   - Does not touch toolbar, search, cart, checkout, product cards, or carousel
   ========================================================== */

/* Hide original category icon images completely */
body > header > .menu > .categories > .category > .category-content > .content > .image img,
body > header > .menu > .categories > .category > .category-content > .content > .image img.normal,
body > header > .menu > .categories > .category > .category-content > .content > .image img.current {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Make the icon holder itself transparent */
body > header > .menu > .categories > .category > .category-content > .content > .image {
    width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    margin: 0 auto 4px !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Base replacement icon style */
body > header > .menu > .categories > .category > .category-content > .content > .image::before {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 22px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
}

/* First category: My Lists */
body > header > .menu > .categories > .category:nth-child(1) > .category-content > .content > .image::before {
    content: "✓" !important;
}

/* Second category: Specials */
body > header > .menu > .categories > .category:nth-child(2) > .category-content > .content > .image::before {
    content: "◇" !important;
    font-size: 24px !important;
}

/* If Shop By Category has an image, keep it clean too */
body > header > .menu > .categories > .category:nth-child(3) > .category-content > .content > .image::before {
    content: "" !important;
}

/* Keep text aligned nicely below icons */
body > header > .menu > .categories > .category > .category-content > .content {
    background: transparent !important;
}

body > header > .menu > .categories > .category > .category-content > .content > .name {
    background: transparent !important;
    color: #ffffff !important;
}




/* ==========================================================
   PART 10: SEARCH ICON BUTTON CENTERING V2.1

   Goal:
   - Center the burgundy search icon circle inside the search pill
   - Pull it away from the right edge
   - Keep the search bar alignment from the previous version
   - Do not touch header/cart/category/product layout
   ========================================================== */

/* Give the input room so text does not run under the icon */
body > header > .toolbar > .data > .search-wrapper > .search > .input > input {
    padding-right: 68px !important;
}

/* Center the search button inside the right side of the pill */
body > header > .toolbar > .data > .search-wrapper > .search > .input > button {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    border-radius: 999px !important;
    background-color: #960F44 !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

/* Center whatever icon/text Stor.ai places inside the button */
body > header > .toolbar > .data > .search-wrapper > .search > .input > button *,
body > header > .toolbar > .data > .search-wrapper > .search > .input > button img,
body > header > .toolbar > .data > .search-wrapper > .search > .input > button svg {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 20px !important;
    max-height: 20px !important;
    display: block !important;
}

/* If the icon is an image, make it white and centered */
body > header > .toolbar > .data > .search-wrapper > .search > .input > button img {
    filter: brightness(0) invert(1) !important;
    -webkit-filter: brightness(0) invert(1) !important;
}

/* Mobile keeps button slightly smaller */
@media screen and (max-width: 768px) {
    body > header > .toolbar > .data > .search-wrapper > .search > .input > button {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        right: 6px !important;
    }

    body > header > .toolbar > .data > .search-wrapper > .search > .input > input {
        padding-right: 58px !important;
    }
}




/* ==========================================================
   PART 11: LOWER CAROUSEL VISUAL LAYOUT FIX V2.5

   Built from stable V2.1.

   Fixes:
   - Keeps the "Exciting! New Items Available!" carousel stable
   - Prevents "Go To Specials" from being hidden behind arrows
   - Makes lower carousel sections like "Cheese" present like the top carousel:
     title top-left, products underneath
   - Uses a visual correction because Stor.ai appears to render these lower
     sections as a left-title column + product row.

   If this affects a non-carousel banner section, remove this PART 11 only.
   ========================================================== */


/* ------------------------------
   1. Restore top carousel link and arrows
   ------------------------------ */

html.home section.view .home-page-wrapper > .content > .component:first-child a {
    position: relative !important;
    z-index: 8 !important;
    margin-right: 120px !important;
    white-space: nowrap !important;
}

html.home section.view .home-page-wrapper > .content > .component:first-child .arrows,
html.home section.view .home-page-wrapper > .content > .component:first-child .navigation,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-arrows,
html.home section.view .home-page-wrapper > .content > .component:first-child .controls {
    z-index: 4 !important;
}


/* ------------------------------
   2. Lower carousel component setup
   Only affects components after the first homepage carousel.
   ------------------------------ */

html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items),
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper),
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items),
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item),
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) {
    position: relative !important;
    max-width: 1360px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 58px !important;
    overflow: visible !important;
}


/* ------------------------------
   3. Pin lower carousel titles to the top-left
   This targets the left-side title column visually.
   ------------------------------ */

html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items) h1,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items) h2,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items) h3,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper) h1,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper) h2,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper) h3,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items) h1,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items) h2,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items) h3,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item) h1,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item) h2,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item) h3,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) h1,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) h2,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) h3 {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 3 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #15120F !important;
    font-size: 28px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    letter-spacing: -0.65px !important;
    text-align: left !important;
}


/* ------------------------------
   4. Strong fallback: common title class names
   ------------------------------ */

html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items) .component-title,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items) .category-title,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items) .title,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper) .component-title,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper) .category-title,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper) .title,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items) .component-title,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items) .category-title,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items) .title {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 3 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}


/* ------------------------------
   5. Pull lower carousel product area left under the title
   This corrects the visible left gutter seen in the Cheese section.
   ------------------------------ */

html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items) sp-items,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper) .items-wrapper,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items) .items,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item) .product-list,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) .product-list {
    position: relative !important;
    left: -285px !important;
    width: calc(100% + 285px) !important;
    max-width: calc(100% + 285px) !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    overflow: visible !important;
}


/* ------------------------------
   6. If the product cards themselves are the only reliable target,
   pull the whole card row visually left.
   ------------------------------ */

html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item) .product-item:first-child,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) .catalog-item:first-child,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items) sp-items:first-child {
    margin-left: 0 !important;
}


/* ------------------------------
   7. Lower carousel arrows should stay to the right, above product row.
   ------------------------------ */

html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .arrows,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .navigation,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-arrows,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .controls {
    position: relative !important;
    z-index: 5 !important;
}


/* ------------------------------
   8. Mobile: do not pull rows left on small screens
   ------------------------------ */

@media screen and (max-width: 768px) {
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items),
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper),
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items),
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item),
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) {
        padding-top: 48px !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items) sp-items,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper) .items-wrapper,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items) .items,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item) .product-list,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) .product-list {
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items) h1,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items) h2,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items) h3,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper) h1,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper) h2,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper) h3,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items) h1,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items) h2,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items) h3 {
        font-size: 24px !important;
    }
}




/* ==========================================================
   PART 12: LOWER CAROUSEL TITLE GAP TIGHTEN V2.6

   Goal:
   - Keep the Cheese title above the carousel
   - Bring the title closer to the cheese product cards
   - Do not affect header, search, cart, category bar, or top carousel
   ========================================================== */

/* Reduce the space reserved above lower carousel product rows */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items),
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper),
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items),
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item),
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) {
    padding-top: 38px !important;
}

/* Keep the lower carousel title clean and close */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items) h1,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items) h2,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items) h3,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper) h1,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper) h2,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper) h3,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items) h1,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items) h2,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items) h3,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item) h1,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item) h2,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item) h3,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) h1,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) h2,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) h3 {
    top: 0 !important;
}

/* Mobile keeps a comfortable but tighter gap */
@media screen and (max-width: 768px) {
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items),
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper),
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items),
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item),
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) {
        padding-top: 36px !important;
    }
}




/* ==========================================================
   PART 13: LOWER CAROUSEL TITLE MUCH CLOSER V2.7

   Goal:
   - Keep the Cheese title above the carousel
   - Bring the product cards much closer to the title
   - Keep top carousel, header, search, cart, and category bar unchanged
   ========================================================== */

/* Reduce reserved spacing above lower carousel sections */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items),
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper),
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items),
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item),
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) {
    padding-top: 20px !important;
}

/* Pull the actual product row upward so it sits close under the title */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items) sp-items,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper) .items-wrapper,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items) .items,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item) .product-list,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) .product-list {
    transform: translateY(-55px) !important;
}

/* Pull carousel arrow controls up with the product row so they stay aligned */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .arrows,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .navigation,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-arrows,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .controls {
    transform: translateY(-55px) !important;
}

/* Prevent too much extra space after the pulled-up carousel */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items),
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper),
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items),
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item),
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) {
    margin-bottom: -35px !important;
}

/* Mobile should not use the aggressive desktop pull-up */
@media screen and (max-width: 768px) {
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items),
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper),
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items),
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item),
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) {
        padding-top: 34px !important;
        margin-bottom: 0 !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items) sp-items,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper) .items-wrapper,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items) .items,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item) .product-list,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) .product-list,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .arrows,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .navigation,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-arrows,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .controls {
        transform: none !important;
    }
}


/* ==========================================================
   PART 14: HERO ONLY TRUE RIGHT-SIDE CROP ON CART OPEN V3.5

   Built directly on uploaded V2.7.

   Confirmed cart open trigger:
   - div.sidenav nav.cart header[aria-expanded="true"]

   Goal:
   - Only hero/banner reacts when cart opens
   - Product carousels do NOT move or resize
   - Hero image stays full-size and locked to the LEFT
   - The RIGHT side gets clipped under the cart
   - This avoids showing half of both ads in a split banner
   ========================================================== */


/* Smooth hero movement only */
html.home section.view .home-page-wrapper > .background-wrapper .background,
html.home section.view .home-page-wrapper > .background-wrapper .background > .img-wrapper,
html.home section.view .home-page-wrapper > .background-wrapper .background img {
    transition: width .22s ease, max-width .22s ease, margin .22s ease, background-position .22s ease, object-position .22s ease !important;
}


/* When cart opens, the hero container becomes the visible left-side window */
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .background-wrapper .background {
    width: calc(100vw - 26em - 7.5vw) !important;
    max-width: 1360px !important;
    min-width: 0 !important;
    margin-left: 3.75vw !important;
    margin-right: auto !important;
    transform: none !important;
    overflow: hidden !important;

    /* Critical: do NOT scale the background down. Keep full banner size and crop right side. */
    background-size: 1360px 120px !important;
    background-position: left center !important;
    background-repeat: no-repeat !important;
}


/* If Stor.ai uses an image wrapper, make the wrapper full original banner width */
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .background-wrapper .background > .img-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: 1360px !important;
    max-width: none !important;
    height: 100% !important;
    overflow: hidden !important;
    transform: none !important;
}


/* If Stor.ai uses an actual img, keep it full original banner width and anchored left */
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .background-wrapper .background > .img-wrapper img,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .background-wrapper .background img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 1360px !important;
    max-width: none !important;
    min-width: 1360px !important;
    height: 120px !important;
    max-height: 120px !important;
    object-fit: cover !important;
    object-position: left center !important;
    transform: none !important;
}


/* Product carousels and content below should not react at all */
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content {
    width: auto !important;
    max-width: 1360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
}


/* Medium screens: still crop right, but use the current viewport width as the full banner width */
@media screen and (max-width: 1360px) and (min-width: 701px) {
    html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .background-wrapper .background {
        background-size: calc(100vw - 7.5vw) 120px !important;
    }

    html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .background-wrapper .background > .img-wrapper,
    html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .background-wrapper .background > .img-wrapper img,
    html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .background-wrapper .background img {
        width: calc(100vw - 7.5vw) !important;
        min-width: calc(100vw - 7.5vw) !important;
        max-width: none !important;
    }
}


/* Small mobile screens: do not crop for cart */
@media screen and (max-width: 700px) {
    html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .background-wrapper .background {
        width: 100% !important;
        max-width: 1360px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        background-size: cover !important;
        background-position: center center !important;
    }

    html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .background-wrapper .background > .img-wrapper,
    html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .background-wrapper .background > .img-wrapper img,
    html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .background-wrapper .background img {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        object-position: center center !important;
    }
}


/* ==========================================================
   PART 15: INSTACART-STYLE CAROUSEL DENSITY V3.7

   Built directly on your reverted V3.5 file.

   Reference goal:
   - More compact product cards
   - Less vertical space per carousel
   - Two carousel sections visible in one page view
   - Title and arrows in the same clean header row
   - Keep premium look, but more product-first like Instacart
   - Do NOT touch header, search, cart, hero crop, or category bar
   ========================================================== */


/* ------------------------------
   1. Homepage carousel section spacing
   More compact like Instacart.
   ------------------------------ */

html.home section.view .home-page-wrapper > .content > .component {
    padding-top: 0.65em !important;
    padding-bottom: 0.65em !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
}

/* Lower carousel sections get a real title/header row */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items),
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper),
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items),
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item),
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) {
    position: relative !important;
    margin-top: 26px !important;
    padding-top: 46px !important;
    padding-bottom: 4px !important;
    overflow: visible !important;
}


/* ------------------------------
   2. Carousel title: top-left, same row as arrows
   ------------------------------ */

html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items) h1,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items) h2,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items) h3,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper) h1,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper) h2,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper) h3,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items) h1,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items) h2,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items) h3,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item) h1,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item) h2,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item) h3,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) h1,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) h2,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) h3 {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 30 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: calc(100% - 150px) !important;
    color: #15120F !important;
    font-size: 25px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    letter-spacing: -0.55px !important;
    text-align: left !important;
}


/* ------------------------------
   3. Carousel arrows: right side, same row as title
   Do not touch top carousel.
   ------------------------------ */

html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper {
    position: absolute !important;
    top: -8px !important;
    right: 0 !important;
    z-index: 35 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    transform: none !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    pointer-events: auto !important;
}

html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper > *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button {
    position: relative !important;
    z-index: 36 !important;
    pointer-events: auto !important;
}

/* Preserve the first carousel */
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    margin-bottom: 0 !important;
}


/* ------------------------------
   4. Compact product cards on homepage carousels
   Smaller, cleaner, more like Instacart density.
   ------------------------------ */

html.home section.view .home-page-wrapper > .content > .component sp-items sp-item,
html.home section.view .home-page-wrapper > .content > .component sp-items .item,
html.home section.view .home-page-wrapper > .content > .component sp-items .product,
html.home section.view .home-page-wrapper > .content > .component sp-items .product-item,
html.home section.view .home-page-wrapper > .content > .component sp-items .catalog-item,
html.home section.view .home-page-wrapper > .content > .component .product-item,
html.home section.view .home-page-wrapper > .content > .component .catalog-item {
    min-height: 300px !important;
    max-height: 330px !important;
    border-radius: 14px !important;
    box-shadow: 0 3px 10px rgba(0,0,0,.045) !important;
    border: 1px solid #eeeeee !important;
    overflow: hidden !important;
}

/* Less dramatic hover so it feels more marketplace/product-first */
html.home section.view .home-page-wrapper > .content > .component sp-items sp-item:hover,
html.home section.view .home-page-wrapper > .content > .component sp-items .item:hover,
html.home section.view .home-page-wrapper > .content > .component sp-items .product:hover,
html.home section.view .home-page-wrapper > .content > .component sp-items .product-item:hover,
html.home section.view .home-page-wrapper > .content > .component sp-items .catalog-item:hover,
html.home section.view .home-page-wrapper > .content > .component .product-item:hover,
html.home section.view .home-page-wrapper > .content > .component .catalog-item:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 7px 18px rgba(0,0,0,.07) !important;
}


/* ------------------------------
   5. Compact product images
   ------------------------------ */

html.home section.view .home-page-wrapper > .content > .component sp-items img,
html.home section.view .home-page-wrapper > .content > .component .product-item img,
html.home section.view .home-page-wrapper > .content > .component .catalog-item img {
    max-height: 150px !important;
    object-fit: contain !important;
    margin-top: 6px !important;
    margin-bottom: 4px !important;
}


/* ------------------------------
   6. Compact product text and prices
   ------------------------------ */

html.home section.view .home-page-wrapper > .content > .component sp-items .name,
html.home section.view .home-page-wrapper > .content > .component sp-items .title,
html.home section.view .home-page-wrapper > .content > .component sp-items .item-name,
html.home section.view .home-page-wrapper > .content > .component sp-items .product-name,
html.home section.view .home-page-wrapper > .content > .component .product-name {
    font-size: 14px !important;
    line-height: 1.18 !important;
    font-weight: 750 !important;
    color: #333333 !important;
}

html.home section.view .home-page-wrapper > .content > .component sp-items .price,
html.home section.view .home-page-wrapper > .content > .component sp-items .item-price,
html.home section.view .home-page-wrapper > .content > .component sp-items .product-price {
    font-size: 13px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    color: #222222 !important;
}


/* ------------------------------
   7. Pull product row closer to header row
   ------------------------------ */

html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items) sp-items,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper) .items-wrapper,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items) .items,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item) .product-list,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) .product-list {
    transform: translateY(-16px) !important;
}


/* ------------------------------
   8. Mobile safety
   ------------------------------ */

@media screen and (max-width: 768px) {
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items),
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper),
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items),
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item),
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) {
        margin-top: 22px !important;
        padding-top: 44px !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
        margin-left: auto !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items) sp-items,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper) .items-wrapper,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items) .items,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item) .product-list,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) .product-list {
        transform: none !important;
    }
}


/* ==========================================================
   PART 16: GENTLE HIGH-DENSITY HOMEPAGE CAROUSELS V3.8

   Built on the current Instacart Density version.

   Goal:
   - Keep the current working design
   - Make homepage carousels more compact
   - Help 2 carousel sections fit in one desktop view
   - Do not touch header, search, cart, hero crop, or checkout
   ========================================================== */


/* ------------------------------
   1. Tighten hero to first carousel
   ------------------------------ */

html.home section.view .home-page-wrapper > .background-wrapper {
    margin-bottom: 8px !important;
    padding-top: 10px !important;
}

html.home section.view .home-page-wrapper > .content {
    padding-top: 0 !important;
}

html.home section.view .home-page-wrapper > .content > .component:first-child {
    padding-top: 0 !important;
    margin-top: 0 !important;
}


/* ------------------------------
   2. Compact carousel section rhythm
   ------------------------------ */

html.home section.view .home-page-wrapper > .content > .component {
    padding-top: 0.35em !important;
    padding-bottom: 0.35em !important;
    margin-bottom: 4px !important;
}

/* Lower carousel sections: smaller header row, less gap, but still breathable */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items),
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper),
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items),
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item),
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) {
    margin-top: 14px !important;
    padding-top: 38px !important;
    padding-bottom: 0 !important;
}


/* ------------------------------
   3. Title row: cleaner and more compact
   ------------------------------ */

html.home section.view .home-page-wrapper > .content > .component h1,
html.home section.view .home-page-wrapper > .content > .component h2,
html.home section.view .home-page-wrapper > .content > .component h3 {
    font-size: 23px !important;
    line-height: 1.05 !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    letter-spacing: -0.45px !important;
}

/* Lower titles pinned row */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items) h1,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items) h2,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items) h3,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper) h1,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper) h2,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper) h3,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items) h1,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items) h2,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items) h3,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item) h1,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item) h2,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item) h3,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) h1,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) h2,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) h3 {
    top: 2px !important;
    font-size: 23px !important;
}


/* ------------------------------
   4. Arrow row compact placement
   ------------------------------ */

html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper {
    top: -12px !important;
    right: 0 !important;
    gap: 10px !important;
    z-index: 45 !important;
}

/* Slightly smaller arrow buttons where possible */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .prev,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .next {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
}


/* ------------------------------
   5. Product card density
   Multiple selector paths because Stor.ai uses nested components.
   ------------------------------ */

html.home section.view .home-page-wrapper > .content sp-items sp-item,
html.home section.view .home-page-wrapper > .content sp-items .item,
html.home section.view .home-page-wrapper > .content sp-items .product,
html.home section.view .home-page-wrapper > .content sp-items .product-item,
html.home section.view .home-page-wrapper > .content sp-items .catalog-item,
html.home section.view .home-page-wrapper > .content .content-wrapper .item,
html.home section.view .home-page-wrapper > .content .content-wrapper .product,
html.home section.view .home-page-wrapper > .content .content-wrapper .product-item,
html.home section.view .home-page-wrapper > .content .content-wrapper .catalog-item,
html.home section.view .home-page-wrapper > .content .carousel-content .item,
html.home section.view .home-page-wrapper > .content .carousel-content .product,
html.home section.view .home-page-wrapper > .content .carousel-content .product-item,
html.home section.view .home-page-wrapper > .content .carousel-content .catalog-item {
    min-height: 250px !important;
    max-height: 285px !important;
    border-radius: 12px !important;
    box-shadow: 0 3px 9px rgba(0,0,0,.045) !important;
}

/* Reduce inner whitespace when Stor.ai exposes wrappers */
html.home section.view .home-page-wrapper > .content .content-wrapper,
html.home section.view .home-page-wrapper > .content .carousel-content,
html.home section.view .home-page-wrapper > .content .items-wrapper,
html.home section.view .home-page-wrapper > .content .items {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* ------------------------------
   6. Product image density
   ------------------------------ */

html.home section.view .home-page-wrapper > .content sp-items img,
html.home section.view .home-page-wrapper > .content .content-wrapper img,
html.home section.view .home-page-wrapper > .content .carousel-content img,
html.home section.view .home-page-wrapper > .content .product-item img,
html.home section.view .home-page-wrapper > .content .catalog-item img {
    max-height: 125px !important;
    object-fit: contain !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}


/* ------------------------------
   7. Product text density
   ------------------------------ */

html.home section.view .home-page-wrapper > .content sp-items .brand,
html.home section.view .home-page-wrapper > .content sp-items .description,
html.home section.view .home-page-wrapper > .content sp-items .unit,
html.home section.view .home-page-wrapper > .content .content-wrapper .brand,
html.home section.view .home-page-wrapper > .content .content-wrapper .description,
html.home section.view .home-page-wrapper > .content .content-wrapper .unit {
    font-size: 11px !important;
    line-height: 1.15 !important;
}

html.home section.view .home-page-wrapper > .content sp-items .name,
html.home section.view .home-page-wrapper > .content sp-items .title,
html.home section.view .home-page-wrapper > .content sp-items .item-name,
html.home section.view .home-page-wrapper > .content sp-items .product-name,
html.home section.view .home-page-wrapper > .content .content-wrapper .name,
html.home section.view .home-page-wrapper > .content .content-wrapper .title,
html.home section.view .home-page-wrapper > .content .content-wrapper .item-name,
html.home section.view .home-page-wrapper > .content .content-wrapper .product-name {
    font-size: 13px !important;
    line-height: 1.16 !important;
    font-weight: 750 !important;
}

html.home section.view .home-page-wrapper > .content sp-items .price,
html.home section.view .home-page-wrapper > .content sp-items .item-price,
html.home section.view .home-page-wrapper > .content sp-items .product-price,
html.home section.view .home-page-wrapper > .content .content-wrapper .price,
html.home section.view .home-page-wrapper > .content .content-wrapper .item-price,
html.home section.view .home-page-wrapper > .content .content-wrapper .product-price {
    font-size: 13px !important;
    line-height: 1.1 !important;
    margin-top: 6px !important;
}


/* ------------------------------
   8. Pull lower product row closer to title row
   ------------------------------ */

html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items) sp-items,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper) .items-wrapper,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items) .items,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item) .product-list,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) .product-list,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content {
    transform: translateY(-20px) !important;
}


/* ------------------------------
   9. Desktop-only slight carousel height compression
   This helps expose the next section without making cards ugly.
   ------------------------------ */

@media screen and (min-width: 1025px) {
    html.home section.view .home-page-wrapper > .content > .component {
        max-height: 370px !important;
        overflow: visible !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:first-child {
        max-height: 390px !important;
    }
}


/* ------------------------------
   10. Mobile safety
   ------------------------------ */

@media screen and (max-width: 768px) {
    html.home section.view .home-page-wrapper > .content > .component,
    html.home section.view .home-page-wrapper > .content > .component:first-child {
        max-height: none !important;
    }

    html.home section.view .home-page-wrapper > .content sp-items img,
    html.home section.view .home-page-wrapper > .content .content-wrapper img,
    html.home section.view .home-page-wrapper > .content .carousel-content img {
        max-height: 145px !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items) sp-items,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper) .items-wrapper,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items) .items,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item) .product-list,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) .product-list,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content {
        transform: none !important;
    }
}


/* ==========================================================
   PART 17: LOWER CAROUSEL TITLE + ARROWS SAME ROW V3.9

   Built on current V3.8 Gentle High Density.

   Goal:
   - Keep the amazing dense layout from V3.8
   - Fix Cheese title placement
   - Put lower carousel arrows on the same horizontal row as the title
   - Keep arrows above the product cards with breathing space
   - Do not change hero, cart, header, search, or product density
   ========================================================== */


/* Lower carousel section: create a clean header row above cards */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items),
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper),
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items),
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item),
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) {
    position: relative !important;
    padding-top: 48px !important;
    margin-top: 16px !important;
    overflow: visible !important;
}


/* Title: same row as arrows, top-left, not inside product card area */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items) h1,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items) h2,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items) h3,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper) h1,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper) h2,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper) h3,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items) h1,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items) h2,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items) h3,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item) h1,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item) h2,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item) h3,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) h1,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) h2,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) h3 {
    position: absolute !important;
    top: 8px !important;
    left: 0 !important;
    z-index: 60 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: calc(100% - 150px) !important;
    color: #15120F !important;
    font-size: 24px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    letter-spacing: -0.5px !important;
    text-align: left !important;
}


/* Exact real arrow wrapper: same row as title, top-right */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper {
    position: absolute !important;
    top: -2px !important;
    right: 0 !important;
    z-index: 65 !important;
    transform: none !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    pointer-events: auto !important;
}


/* Keep buttons clickable and visibly above cards */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper > *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .prev,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .next {
    position: relative !important;
    z-index: 66 !important;
    pointer-events: auto !important;
}


/* Keep lower carousel product row close but below the header row */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items) sp-items,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper) .items-wrapper,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items) .items,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item) .product-list,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) .product-list,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content {
    transform: translateY(-18px) !important;
}


/* Do not alter the first/top carousel header controls */
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    margin-bottom: 0 !important;
}


/* Mobile safety */
@media screen and (max-width: 768px) {
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items),
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper),
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items),
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item),
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) {
        padding-top: 44px !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        margin-left: auto !important;
        transform: none !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(sp-items) sp-items,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items-wrapper) .items-wrapper,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.items) .items,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.product-item) .product-list,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.catalog-item) .product-list,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content {
        transform: none !important;
    }
}


/* ==========================================================
   PART 18: CHEESE-ONLY TITLE + ARROWS FIX V3.9.1

   Built directly on the CSS file you reverted to.

   IMPORTANT:
   - This targets ONLY the Cheese carousel:
     .component-item-as-tile[aria-label="Cheese"]
   - It does NOT touch the top carousel
   - It does NOT touch all lower carousels globally
   - It reduces the dead space above Cheese
   - It puts the Cheese title and arrows on the same row above the cards
   ========================================================== */


/* 1. Pull ONLY the Cheese section upward to reduce dead space after the carousel above */
html.home section.view .home-page-wrapper > .content > .component:has(.component-item-as-tile[aria-label="Cheese"]) {
    margin-top: -86px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
}


/* 2. Give Cheese its own compact header row above the cards */
html.home section.view .home-page-wrapper > .content .component-item-as-tile[aria-label="Cheese"] {
    position: relative !important;
    padding-top: 44px !important;
    margin-top: 0 !important;
    overflow: visible !important;
}


/* 3. Place the Cheese header row above the product cards */
html.home section.view .home-page-wrapper > .content .component-item-as-tile[aria-label="Cheese"] > .header-wrapper,
html.home section.view .home-page-wrapper > .content .component-item-as-tile[aria-label="Cheese"] .header-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 90 !important;
    overflow: visible !important;
    background: transparent !important;
}


/* 4. Cheese title: top-left, same line as arrows */
html.home section.view .home-page-wrapper > .content .component-item-as-tile[aria-label="Cheese"] .header-wrapper h1,
html.home section.view .home-page-wrapper > .content .component-item-as-tile[aria-label="Cheese"] .header-wrapper h2,
html.home section.view .home-page-wrapper > .content .component-item-as-tile[aria-label="Cheese"] .header-wrapper h3,
html.home section.view .home-page-wrapper > .content .component-item-as-tile[aria-label="Cheese"] .header-wrapper .title,
html.home section.view .home-page-wrapper > .content .component-item-as-tile[aria-label="Cheese"] .header-wrapper .component-title,
html.home section.view .home-page-wrapper > .content .component-item-as-tile[aria-label="Cheese"] .header-wrapper .category-title {
    position: absolute !important;
    top: 6px !important;
    left: 0 !important;
    z-index: 92 !important;
    display: block !important;
    width: auto !important;
    max-width: calc(100% - 160px) !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #15120F !important;
    font-size: 24px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    letter-spacing: -0.5px !important;
    text-align: left !important;
    white-space: nowrap !important;
}


/* 5. Fallback if Stor.ai renders the title outside the header-wrapper */
html.home section.view .home-page-wrapper > .content .component-item-as-tile[aria-label="Cheese"] > h1,
html.home section.view .home-page-wrapper > .content .component-item-as-tile[aria-label="Cheese"] > h2,
html.home section.view .home-page-wrapper > .content .component-item-as-tile[aria-label="Cheese"] > h3 {
    position: absolute !important;
    top: 6px !important;
    left: 0 !important;
    z-index: 92 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: calc(100% - 160px) !important;
    color: #15120F !important;
    font-size: 24px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    letter-spacing: -0.5px !important;
    white-space: nowrap !important;
}


/* 6. Cheese arrows: top-right, same row as title */
html.home section.view .home-page-wrapper > .content .component-item-as-tile[aria-label="Cheese"] .header-wrapper .carousel-btns-wrapper,
html.home section.view .home-page-wrapper > .content .component-item-as-tile[aria-label="Cheese"] .carousel-btns-wrapper {
    position: absolute !important;
    top: -5px !important;
    right: 0 !important;
    z-index: 94 !important;
    transform: none !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    pointer-events: auto !important;
}


/* 7. Keep Cheese arrow buttons clickable and visible */
html.home section.view .home-page-wrapper > .content .component-item-as-tile[aria-label="Cheese"] .carousel-btns-wrapper > *,
html.home section.view .home-page-wrapper > .content .component-item-as-tile[aria-label="Cheese"] .carousel-btns-wrapper button,
html.home section.view .home-page-wrapper > .content .component-item-as-tile[aria-label="Cheese"] .carousel-btns-wrapper .prev,
html.home section.view .home-page-wrapper > .content .component-item-as-tile[aria-label="Cheese"] .carousel-btns-wrapper .next {
    position: relative !important;
    z-index: 95 !important;
    pointer-events: auto !important;
}


/* 8. Product row sits below the Cheese header row, not behind it */
html.home section.view .home-page-wrapper > .content .component-item-as-tile[aria-label="Cheese"] > .content-wrapper,
html.home section.view .home-page-wrapper > .content .component-item-as-tile[aria-label="Cheese"] > .content-wrapper.carousel-content,
html.home section.view .home-page-wrapper > .content .component-item-as-tile[aria-label="Cheese"] .content-wrapper.carousel-content {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    transform: translateY(0) !important;
}


/* 9. Undo any broad lower-carousel transforms ONLY for Cheese */
html.home section.view .home-page-wrapper > .content .component-item-as-tile[aria-label="Cheese"] sp-items,
html.home section.view .home-page-wrapper > .content .component-item-as-tile[aria-label="Cheese"] .items-wrapper,
html.home section.view .home-page-wrapper > .content .component-item-as-tile[aria-label="Cheese"] .items,
html.home section.view .home-page-wrapper > .content .component-item-as-tile[aria-label="Cheese"] .product-list {
    transform: translateY(0) !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* 10. Desktop: keep enough gap so Cheese does not crash into the carousel above */
@media screen and (min-width: 1025px) {
    html.home section.view .home-page-wrapper > .content > .component:has(.component-item-as-tile[aria-label="Cheese"]) {
        margin-top: -74px !important;
    }
}


/* 11. Mobile safety */
@media screen and (max-width: 768px) {
    html.home section.view .home-page-wrapper > .content > .component:has(.component-item-as-tile[aria-label="Cheese"]) {
        margin-top: 0 !important;
    }

    html.home section.view .home-page-wrapper > .content .component-item-as-tile[aria-label="Cheese"] {
        padding-top: 0 !important;
    }

    html.home section.view .home-page-wrapper > .content .component-item-as-tile[aria-label="Cheese"] > .header-wrapper,
    html.home section.view .home-page-wrapper > .content .component-item-as-tile[aria-label="Cheese"] .header-wrapper,
    html.home section.view .home-page-wrapper > .content .component-item-as-tile[aria-label="Cheese"] .carousel-btns-wrapper {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        height: auto !important;
        transform: none !important;
    }
}


/* ==========================================================
   PART 19: REAL TITLE-AS-ITEM CHEESE ROW FIX V3.9.2

   Built on the current uploaded CSS.

   What Inspect showed:
   - Cheese title is inside:
     .content-wrapper.carousel-content > .title-as-item > h2

   Why previous fix missed:
   - It targeted generic h1/h2/h3 and aria-label wrappers,
     but the actual visual title wrapper is .title-as-item.

   Goal:
   - Do NOT touch the top carousel
   - Fix lower carousel title row
   - Put Cheese title and carousel arrows on the same row
   - Reduce dead space between the carousel above and Cheese
   - Keep product cards below the title row
   ========================================================== */


/* 1. Lower carousel components only: reduce dead space above them */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.content-wrapper.carousel-content > .title-as-item) {
    position: relative !important;
    margin-top: -72px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
}


/* 2. The real carousel content wrapper gets a compact header zone */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) {
    position: relative !important;
    padding-top: 46px !important;
    margin-top: 0 !important;
    overflow: visible !important;
}


/* 3. Real title wrapper: place it above cards */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item {
    position: absolute !important;
    top: 6px !important;
    left: 0 !important;
    z-index: 100 !important;
    width: auto !important;
    max-width: calc(100% - 165px) !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    pointer-events: none !important;
}


/* 4. Actual Cheese h2 styling */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item > h1,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item > h2,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item > h3 {
    position: static !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #15120F !important;
    font-size: 24px !important;
    line-height: 32px !important;
    font-weight: 900 !important;
    letter-spacing: -0.5px !important;
    white-space: nowrap !important;
    text-align: left !important;
}


/* 5. Arrows: same row as title, right side, above cards */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) .carousel-btns-wrapper {
    position: absolute !important;
    top: -2px !important;
    right: 0 !important;
    z-index: 105 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    pointer-events: auto !important;
}


/* 6. Buttons stay clickable */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) .carousel-btns-wrapper > *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) .carousel-btns-wrapper button,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) .carousel-btns-wrapper .prev,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) .carousel-btns-wrapper .next {
    position: relative !important;
    z-index: 106 !important;
    pointer-events: auto !important;
}


/* 7. Keep product carousel below header row, not swallowed */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) > sp-carousel,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) > sp-items,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) .normal-products-carousel,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) .items-wrapper,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) .items {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    transform: translateY(0) !important;
}


/* 8. Protect the top carousel completely */
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > .title-as-item,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .carousel-btns-wrapper {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin-top: 0 !important;
}


/* 9. Desktop fine-tune: leave a small but clean gap */
@media screen and (min-width: 1025px) {
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.content-wrapper.carousel-content > .title-as-item) {
        margin-top: -62px !important;
    }
}


/* 10. Mobile safety */
@media screen and (max-width: 768px) {
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.content-wrapper.carousel-content > .title-as-item) {
        margin-top: 0 !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) {
        padding-top: 0 !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) .carousel-btns-wrapper {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }
}


/* ==========================================================
   PART 20: CHEESE ROW WIDTH + ARROW ALIGNMENT FIX V3.9.3

   Built on V3.9.2.

   Fixes:
   - Cheese carousel product row was shifted left, causing empty space on right
   - Cheese arrows were not aligned with each other
   - Keeps top carousel untouched
   - Keeps dense spacing and Cheese title placement
   ========================================================== */


/* 1. Keep the Cheese carousel full-width and centered inside the page content */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child):has(.content-wrapper.carousel-content > .title-as-item) {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: visible !important;
}


/* 2. Cheese content wrapper should use the full available row width */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}


/* 3. Reset the actual carousel/product track so cards do not start off-screen */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) > sp-carousel,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) > sp-items,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) .normal-products-carousel,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) .items-wrapper,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) .items,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) .product-list {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}


/* 4. If a row/track inside the carousel was translated too far left, neutralize only the visual offset */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) [class*="track"],
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) [class*="wrapper"],
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) [class*="carousel"] {
    box-sizing: border-box !important;
}


/* 5. Cheese title remains top-left */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item {
    left: 0 !important;
    top: 4px !important;
    height: 34px !important;
    z-index: 110 !important;
}


/* 6. Align Cheese arrows perfectly with each other on one baseline */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) .carousel-btns-wrapper {
    position: absolute !important;
    top: -6px !important;
    right: 0 !important;
    height: 56px !important;
    min-height: 56px !important;
    z-index: 115 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    line-height: 1 !important;
}


/* 7. Force both arrow buttons to identical size and vertical alignment */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) .carousel-btns-wrapper > *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) .carousel-btns-wrapper button,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) .carousel-btns-wrapper .prev,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) .carousel-btns-wrapper .next {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    z-index: 116 !important;
    pointer-events: auto !important;
}


/* 8. Keep the product cards below the header row with no right-side dead zone */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) .component-item,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) .product-item,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) .catalog-item {
    box-sizing: border-box !important;
}


/* 9. Protect the top carousel from this patch */
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > .title-as-item,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .carousel-btns-wrapper {
    width: auto !important;
    max-width: none !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}


/* ==========================================================
   PART 21: HERO GAP + TOP CAROUSEL ARROW POLISH V3.9.4

   Built on V3.9.3.

   Fixes:
   - Reduces dead space between hero image and "Exciting New Items" carousel
   - Makes top carousel swipe arrows smaller, aligned, and more premium
   - Changes arrow icon color away from blue to Kosher 4 Less burgundy
   - Keeps Cheese carousel improvements untouched
   ========================================================== */


/* 1. Kill extra dead space under the hero/banner */
html.home section.view .home-page-wrapper > .background-wrapper {
    margin-bottom: 2px !important;
    padding-bottom: 0 !important;
    max-height: 126px !important;
}

html.home section.view .home-page-wrapper > .background-wrapper + .content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

html.home section.view .home-page-wrapper > .content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 2. Bring first carousel closer to hero, gently */
html.home section.view .home-page-wrapper > .content > .component:first-child {
    margin-top: -10px !important;
    padding-top: 0 !important;
}

/* First carousel title row tighter */
html.home section.view .home-page-wrapper > .content > .component:first-child h1,
html.home section.view .home-page-wrapper > .content > .component:first-child h2,
html.home section.view .home-page-wrapper > .content > .component:first-child h3 {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
}


/* 3. Top carousel arrow wrapper alignment */
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-4px) !important;
    z-index: 60 !important;
}


/* 4. Top carousel arrows: smaller and same exact size */
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper > *,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper button,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .prev,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .next {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    box-shadow: 0 5px 14px rgba(35,24,17,.055) !important;
    background-color: #F5F1EC !important;
    border: 1px solid rgba(150,15,68,.08) !important;
    color: #960F44 !important;
    pointer-events: auto !important;
}


/* 5. Force arrow icon color to burgundy, not blue */
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper svg,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper svg *,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper i,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper span,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .arrow,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper [class*="arrow"],
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper [class*="icon"] {
    color: #960F44 !important;
    fill: #960F44 !important;
    stroke: #960F44 !important;
}


/* 6. Disabled arrow should be soft gold/gray, not blue */
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper button[disabled],
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .disabled,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper [aria-disabled="true"] {
    background-color: #F3EBDD !important;
    color: #C9A56D !important;
    opacity: .75 !important;
}

html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper button[disabled] svg,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .disabled svg,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper [aria-disabled="true"] svg,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper button[disabled] svg *,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .disabled svg *,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper [aria-disabled="true"] svg * {
    color: #C9A56D !important;
    fill: #C9A56D !important;
    stroke: #C9A56D !important;
}


/* 7. Hover state subtle and premium */
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper button:hover,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .prev:hover,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .next:hover {
    background-color: #F9F3EA !important;
    border-color: rgba(150,15,68,.18) !important;
    box-shadow: 0 7px 18px rgba(35,24,17,.08) !important;
}


/* 8. Mobile safety */
@media screen and (max-width: 768px) {
    html.home section.view .home-page-wrapper > .content > .component:first-child {
        margin-top: 0 !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper {
        transform: none !important;
    }
}


/* ==========================================================
   PART 22: TOP CAROUSEL HEADER POSITION FINAL V3.9.5

   Built on V3.9.4.

   Fixes:
   - Top carousel arrows were too high and sitting on the hero
   - Top carousel title was too close to the hero
   - Top carousel title needs to sit closer to its product cards
   - Arrows should be smaller, aligned, and burgundy/gold
   - Cheese/Dairy carousel fixes stay untouched
   ========================================================== */


/* 1. Give the first carousel a clean header row below the hero */
html.home section.view .home-page-wrapper > .content > .component:first-child {
    position: relative !important;
    margin-top: 4px !important;
    padding-top: 34px !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
}


/* 2. First carousel title sits below hero, closer to cards */
html.home section.view .home-page-wrapper > .content > .component:first-child h1,
html.home section.view .home-page-wrapper > .content > .component:first-child h2,
html.home section.view .home-page-wrapper > .content > .component:first-child h3,
html.home section.view .home-page-wrapper > .content > .component:first-child .title-as-item h1,
html.home section.view .home-page-wrapper > .content > .component:first-child .title-as-item h2,
html.home section.view .home-page-wrapper > .content > .component:first-child .title-as-item h3 {
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    position: relative !important;
    top: auto !important;
    z-index: 50 !important;
    line-height: 1.05 !important;
}


/* 3. If first carousel uses title-as-item, make it part of the compact header row */
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > .title-as-item {
    position: absolute !important;
    top: 2px !important;
    left: 0 !important;
    z-index: 55 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: calc(100% - 135px) !important;
    height: 30px !important;
    min-height: 30px !important;
    overflow: visible !important;
    background: transparent !important;
}


/* 4. First carousel content wrapper leaves room for the header row */
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content {
    position: relative !important;
    padding-top: 30px !important;
    margin-top: 0 !important;
    overflow: visible !important;
}


/* 5. Top carousel arrows: place below hero on the title row, not on the hero */
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    z-index: 60 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    line-height: 1 !important;
    pointer-events: auto !important;
}


/* 6. Smaller, aligned top carousel arrow buttons */
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper > *,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper button,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .prev,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .next {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    vertical-align: middle !important;
    background-color: #F6EFE6 !important;
    border: 1px solid rgba(150,15,68,.10) !important;
    color: #960F44 !important;
    box-shadow: 0 3px 10px rgba(35,24,17,.045) !important;
    pointer-events: auto !important;
}


/* 7. Force top arrow icons to burgundy */
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper svg,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper svg *,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper i,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper span,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .arrow,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper [class*="arrow"],
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper [class*="icon"] {
    color: #960F44 !important;
    fill: #960F44 !important;
    stroke: #960F44 !important;
}


/* 8. Disabled arrow uses soft gold */
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper button[disabled],
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .disabled,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper [aria-disabled="true"] {
    background-color: #F3EBDD !important;
    color: #C9A56D !important;
    opacity: .72 !important;
}

html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper button[disabled] svg,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .disabled svg,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper [aria-disabled="true"] svg,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper button[disabled] svg *,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .disabled svg *,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper [aria-disabled="true"] svg * {
    color: #C9A56D !important;
    fill: #C9A56D !important;
    stroke: #C9A56D !important;
}


/* 9. Pull first carousel product cards closer to its title row */
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > sp-carousel,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > sp-items,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .normal-products-carousel,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .items-wrapper,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .items,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .product-list {
    margin-top: -6px !important;
    transform: none !important;
}


/* 10. Mobile safety */
@media screen and (max-width: 768px) {
    html.home section.view .home-page-wrapper > .content > .component:first-child {
        margin-top: 0 !important;
        padding-top: 22px !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
        margin-left: auto !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content {
        padding-top: 0 !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > .title-as-item {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        height: auto !important;
    }
}


/* ==========================================================
   PART 23: TOP CAROUSEL TIGHT TO HERO V3.9.6

   Built on V3.9.5.

   Goal:
   - Bring "Exciting New Items" carousel much closer to hero
   - Keep a purposeful title/arrow row under the hero
   - Pull product cards closer to title
   - Make top carousel arrows smaller, aligned, and not sitting on hero
   - Do not affect Cheese/Dairy carousel fixes
   ========================================================== */


/* 1. Reduce hero bottom spacing */
html.home section.view .home-page-wrapper > .background-wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    max-height: 122px !important;
}

html.home section.view .home-page-wrapper > .background-wrapper .background,
html.home section.view .home-page-wrapper > .background-wrapper .background img {
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
}


/* 2. First carousel should start right under hero, with a compact header row */
html.home section.view .home-page-wrapper > .content > .component:first-child {
    position: relative !important;
    margin-top: -4px !important;
    padding-top: 22px !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
}


/* 3. First carousel content wrapper gets just enough room for title + arrows */
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content {
    position: relative !important;
    padding-top: 26px !important;
    margin-top: 0 !important;
    overflow: visible !important;
}


/* 4. Title row: below hero, close to cards */
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > .title-as-item {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 70 !important;
    height: 28px !important;
    min-height: 28px !important;
    max-width: calc(100% - 130px) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > .title-as-item h1,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > .title-as-item h2,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > .title-as-item h3,
html.home section.view .home-page-wrapper > .content > .component:first-child h1,
html.home section.view .home-page-wrapper > .content > .component:first-child h2,
html.home section.view .home-page-wrapper > .content > .component:first-child h3 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 23px !important;
    line-height: 28px !important;
    font-weight: 900 !important;
    letter-spacing: -0.5px !important;
    color: #15120F !important;
}


/* 5. Top carousel arrows: same row as title, smaller, under hero */
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .carousel-btns-wrapper,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper {
    position: absolute !important;
    top: -6px !important;
    right: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    z-index: 75 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    line-height: 1 !important;
    pointer-events: auto !important;
}


/* 6. Smaller aligned buttons */
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper > *,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper button,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .prev,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .next {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    background-color: #F6EFE6 !important;
    border: 1px solid rgba(150,15,68,.12) !important;
    color: #960F44 !important;
    box-shadow: 0 3px 9px rgba(35,24,17,.045) !important;
    pointer-events: auto !important;
}


/* 7. Keep arrow icon color burgundy/gold, not blue */
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper svg,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper svg *,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper i,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper span,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .arrow,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper [class*="arrow"],
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper [class*="icon"] {
    color: #960F44 !important;
    fill: #960F44 !important;
    stroke: #960F44 !important;
}

html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper button[disabled],
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .disabled,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper [aria-disabled="true"] {
    background-color: #F3EBDD !important;
    color: #C9A56D !important;
    opacity: .72 !important;
}

html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper button[disabled] svg,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .disabled svg,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper [aria-disabled="true"] svg,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper button[disabled] svg *,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .disabled svg *,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper [aria-disabled="true"] svg * {
    color: #C9A56D !important;
    fill: #C9A56D !important;
    stroke: #C9A56D !important;
}


/* 8. Pull first carousel cards closer to title row */
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > sp-carousel,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > sp-items,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .normal-products-carousel,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .items-wrapper,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .items,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .product-list {
    margin-top: -10px !important;
    padding-top: 0 !important;
    transform: none !important;
}


/* 9. Keep cards visible and untouched structurally */
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content {
    z-index: 1 !important;
}


/* 10. Mobile safety */
@media screen and (max-width: 768px) {
    html.home section.view .home-page-wrapper > .background-wrapper .background,
    html.home section.view .home-page-wrapper > .background-wrapper .background img {
        height: 100px !important;
        min-height: 100px !important;
        max-height: 100px !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:first-child {
        margin-top: 0 !important;
        padding-top: 18px !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content {
        padding-top: 0 !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > .title-as-item,
    html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        transform: none !important;
    }
}


/* ==========================================================
   PART 24: SAFE RECOVERY - TOP ARROWS NEAR CAROUSEL V3.9.10

   Built from V3.9.6, the last structurally good version.

   What this avoids:
   - No cart z-index overrides
   - No cart drawer styling
   - No sidenav styling
   - No broad layout changes

   What this fixes:
   - Top carousel arrows move DOWN away from the hero image
   - Arrows sit closer to the actual product carousel
   - Arrows stay smaller, aligned, and burgundy/gold
   - Cart should behave natively again
   ========================================================== */


/* 1. Keep top carousel close to hero, but stable */
html.home section.view .home-page-wrapper > .content > .component:first-child {
    position: relative !important;
    margin-top: -4px !important;
    padding-top: 22px !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
}


/* 2. Keep the first carousel title row clean */
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content {
    position: relative !important;
    padding-top: 28px !important;
    margin-top: 0 !important;
    overflow: visible !important;
    z-index: 1 !important;
}

html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > .title-as-item {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 6 !important;
    height: 28px !important;
    min-height: 28px !important;
    max-width: calc(100% - 130px) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > .title-as-item h1,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > .title-as-item h2,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > .title-as-item h3,
html.home section.view .home-page-wrapper > .content > .component:first-child h1,
html.home section.view .home-page-wrapper > .content > .component:first-child h2,
html.home section.view .home-page-wrapper > .content > .component:first-child h3 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 23px !important;
    line-height: 28px !important;
    font-weight: 900 !important;
    letter-spacing: -0.5px !important;
    color: #15120F !important;
}


/* 3. Move top carousel arrows DOWN near the cards, not on the hero */
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .carousel-btns-wrapper,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper {
    position: absolute !important;
    top: 44px !important;
    right: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    z-index: 4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    line-height: 1 !important;
    pointer-events: auto !important;
}


/* 4. Smaller, aligned arrows */
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper > *,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper button,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .prev,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .next {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    vertical-align: middle !important;
    background-color: rgba(246,239,230,.94) !important;
    border: 1px solid rgba(150,15,68,.12) !important;
    color: #960F44 !important;
    box-shadow: 0 3px 8px rgba(35,24,17,.04) !important;
    pointer-events: auto !important;
}


/* 5. Keep arrow icons burgundy/gold, not blue */
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper svg,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper svg *,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper i,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper span,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .arrow,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper [class*="arrow"],
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper [class*="icon"] {
    color: #960F44 !important;
    fill: #960F44 !important;
    stroke: #960F44 !important;
}

html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper button[disabled],
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .disabled,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper [aria-disabled="true"] {
    background-color: rgba(243,235,221,.9) !important;
    color: #C9A56D !important;
    opacity: .72 !important;
}

html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper button[disabled] svg,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .disabled svg,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper [aria-disabled="true"] svg,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper button[disabled] svg *,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .disabled svg *,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper [aria-disabled="true"] svg * {
    color: #C9A56D !important;
    fill: #C9A56D !important;
    stroke: #C9A56D !important;
}


/* 6. Product cards stay close under the title row */
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > sp-carousel,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > sp-items,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .normal-products-carousel,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .items-wrapper,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .items,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .product-list {
    margin-top: -6px !important;
    padding-top: 0 !important;
    transform: none !important;
}


/* 7. No cart styling here. Let Stor.ai handle cart layers and loading natively. */


/* 8. Mobile safety */
@media screen and (max-width: 768px) {
    html.home section.view .home-page-wrapper > .content > .component:first-child {
        margin-top: 0 !important;
        padding-top: 18px !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content {
        padding-top: 0 !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > .title-as-item,
    html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        transform: none !important;
    }
}


/* ==========================================================
   PART 25: TOP CAROUSEL TITLE + ARROWS SAME ROW V3.9.11

   Built on V3.9.10 Safe Recovery.

   Goal:
   - Put top carousel arrows on the SAME LINE as "Exciting New Items Available"
   - Pull the product carousel/cards up closer to that title row
   - Keep title row under the hero, not on the hero
   - Do NOT touch cart layers or cart styling
   - Keep Cheese/Dairy carousel fixes untouched
   ========================================================== */


/* 1. First carousel: compact section right under hero */
html.home section.view .home-page-wrapper > .content > .component:first-child {
    position: relative !important;
    margin-top: -6px !important;
    padding-top: 18px !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
}


/* 2. First carousel content wrapper: compact title row, then cards immediately */
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content {
    position: relative !important;
    padding-top: 30px !important;
    margin-top: 0 !important;
    overflow: visible !important;
    z-index: 1 !important;
}


/* 3. Title: absolute top-left row */
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > .title-as-item {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 12 !important;
    height: 30px !important;
    min-height: 30px !important;
    max-width: calc(100% - 130px) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    pointer-events: none !important;
}

html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > .title-as-item h1,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > .title-as-item h2,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > .title-as-item h3,
html.home section.view .home-page-wrapper > .content > .component:first-child h1,
html.home section.view .home-page-wrapper > .content > .component:first-child h2,
html.home section.view .home-page-wrapper > .content > .component:first-child h3 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 23px !important;
    line-height: 30px !important;
    font-weight: 900 !important;
    letter-spacing: -0.5px !important;
    color: #15120F !important;
}


/* 4. Arrows: same exact row as title, right side */
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .carousel-btns-wrapper,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper {
    position: absolute !important;
    top: -2px !important;
    right: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    z-index: 13 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    line-height: 1 !important;
    pointer-events: auto !important;
}


/* 5. Small, aligned, premium arrows */
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper > *,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper button,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .prev,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .next {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    vertical-align: middle !important;
    background-color: rgba(246,239,230,.94) !important;
    border: 1px solid rgba(150,15,68,.12) !important;
    color: #960F44 !important;
    box-shadow: 0 3px 8px rgba(35,24,17,.04) !important;
    pointer-events: auto !important;
}


/* 6. Keep arrow icons burgundy/gold */
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper svg,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper svg *,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper i,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper span,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .arrow,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper [class*="arrow"],
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper [class*="icon"] {
    color: #960F44 !important;
    fill: #960F44 !important;
    stroke: #960F44 !important;
}

html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper button[disabled],
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .disabled,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper [aria-disabled="true"] {
    background-color: rgba(243,235,221,.9) !important;
    color: #C9A56D !important;
    opacity: .72 !important;
}

html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper button[disabled] svg,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .disabled svg,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper [aria-disabled="true"] svg,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper button[disabled] svg *,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .disabled svg *,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper [aria-disabled="true"] svg * {
    color: #C9A56D !important;
    fill: #C9A56D !important;
    stroke: #C9A56D !important;
}


/* 7. Kill dead space: pull product cards up close to title row */
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > sp-carousel,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > sp-items,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .normal-products-carousel,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .items-wrapper,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .items,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .product-list {
    margin-top: -16px !important;
    padding-top: 0 !important;
    transform: none !important;
}


/* 8. Keep cards under controls but close */
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .component-item,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .product-item,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .catalog-item {
    z-index: 1 !important;
}


/* 9. Absolutely no cart styling here. */


/* 10. Mobile safety */
@media screen and (max-width: 768px) {
    html.home section.view .home-page-wrapper > .content > .component:first-child {
        margin-top: 0 !important;
        padding-top: 18px !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content {
        padding-top: 0 !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > .title-as-item,
    html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        transform: none !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > sp-carousel,
    html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > sp-items,
    html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .normal-products-carousel,
    html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .items-wrapper,
    html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .items,
    html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .product-list {
        margin-top: 0 !important;
    }
}


/* ==========================================================
   PART 26: TOP CAROUSEL FINAL TITLE-LINE ALIGNMENT V3.9.12

   Built on V3.9.11.

   Goal:
   - Keep current good spacing overall
   - Move top carousel arrows OFF the hero image
   - Put arrows on the same visual line as "Exciting New Items Available"
   - Pull product cards closer to the title to kill dead space
   - Do NOT touch cart styling/layers
   - Do NOT touch Dairy/Cheese fixes
   ========================================================== */


/* First carousel section stays tight but stable */
html.home section.view .home-page-wrapper > .content > .component:first-child {
    position: relative !important;
    margin-top: -6px !important;
    padding-top: 18px !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
}


/* Content wrapper keeps one compact header row */
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content {
    position: relative !important;
    padding-top: 24px !important;
    margin-top: 0 !important;
    overflow: visible !important;
    z-index: 1 !important;
}


/* Title line */
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > .title-as-item {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 12 !important;
    height: 30px !important;
    min-height: 30px !important;
    max-width: calc(100% - 130px) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    pointer-events: none !important;
}

html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > .title-as-item h1,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > .title-as-item h2,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > .title-as-item h3,
html.home section.view .home-page-wrapper > .content > .component:first-child h1,
html.home section.view .home-page-wrapper > .content > .component:first-child h2,
html.home section.view .home-page-wrapper > .content > .component:first-child h3 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 23px !important;
    line-height: 30px !important;
    font-weight: 900 !important;
    letter-spacing: -0.5px !important;
    color: #15120F !important;
}


/* Critical fix: arrows lower, on title row, not hero */
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .carousel-btns-wrapper,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper {
    position: absolute !important;
    top: 7px !important;
    right: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    z-index: 13 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    line-height: 1 !important;
    pointer-events: auto !important;
}


/* Smaller aligned buttons */
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper > *,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper button,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .prev,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .next {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    vertical-align: middle !important;
    background-color: rgba(246,239,230,.94) !important;
    border: 1px solid rgba(150,15,68,.12) !important;
    color: #960F44 !important;
    box-shadow: 0 3px 8px rgba(35,24,17,.04) !important;
    pointer-events: auto !important;
}


/* Keep icon color burgundy/gold */
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper svg,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper svg *,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper i,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper span,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .arrow,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper [class*="arrow"],
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper [class*="icon"] {
    color: #960F44 !important;
    fill: #960F44 !important;
    stroke: #960F44 !important;
}

html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper button[disabled],
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .disabled,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper [aria-disabled="true"] {
    background-color: rgba(243,235,221,.9) !important;
    color: #C9A56D !important;
    opacity: .72 !important;
}

html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper button[disabled] svg,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .disabled svg,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper [aria-disabled="true"] svg,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper button[disabled] svg *,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper .disabled svg *,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper [aria-disabled="true"] svg * {
    color: #C9A56D !important;
    fill: #C9A56D !important;
    stroke: #C9A56D !important;
}


/* Kill dead space: pull product cards closer to title */
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > sp-carousel,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > sp-items,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .normal-products-carousel,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .items-wrapper,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .items,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .product-list {
    margin-top: -28px !important;
    padding-top: 0 !important;
    transform: none !important;
}


/* No cart styling in this patch. */


/* Mobile safety */
@media screen and (max-width: 768px) {
    html.home section.view .home-page-wrapper > .content > .component:first-child {
        margin-top: 0 !important;
        padding-top: 18px !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content {
        padding-top: 0 !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > .title-as-item,
    html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        transform: none !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > sp-carousel,
    html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > sp-items,
    html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .normal-products-carousel,
    html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .items-wrapper,
    html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .items,
    html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .product-list {
        margin-top: 0 !important;
    }
}


/* ==========================================================
   PART 27: CAROUSEL ARROWS BELOW CART V3.9.13

   Built on V3.9.12.

   Goal:
   - Keep current layout exactly as-is
   - Keep arrows on the correct visual row
   - Make ALL carousel arrows sit below the cart dropdown/drawer
   - Do NOT touch cart styling, cart z-index, sidenav, or loading layers
   ========================================================== */


/* 1. Keep all carousel controls on a lower page layer */
html.home section.view .home-page-wrapper > .content .carousel-btns-wrapper,
html.home section.view .home-page-wrapper > .content .carousel-btns-wrapper *,
html.home section.view .home-page-wrapper > .content .arrows,
html.home section.view .home-page-wrapper > .content .arrows *,
html.home section.view .home-page-wrapper > .content .controls,
html.home section.view .home-page-wrapper > .content .controls *,
html.home section.view .home-page-wrapper > .content .navigation,
html.home section.view .home-page-wrapper > .content .navigation * {
    z-index: 3 !important;
}


/* 2. First carousel arrows can stay visible, but never above overlays */
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper,
html.home section.view .home-page-wrapper > .content > .component:first-child .carousel-btns-wrapper *,
html.home section.view .home-page-wrapper > .content > .component:first-child .arrows,
html.home section.view .home-page-wrapper > .content > .component:first-child .arrows * {
    z-index: 3 !important;
}


/* 3. Lower carousel arrows also stay below overlays */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .arrows,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .arrows * {
    z-index: 3 !important;
}


/* 4. When cart is expanded, arrows become visually passive underneath it.
   This does not modify the cart. It only prevents arrow clicks from stealing focus. */
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .carousel-btns-wrapper,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .arrows,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .controls,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .navigation {
    z-index: 1 !important;
    pointer-events: none !important;
}


/* 5. Do not change cart/sidenav layers here. Let Stor.ai handle cart natively. */


/* ==========================================================
   PART 28: TIGHT LOWER CAROUSEL SPACING + MATCHED ARROWS V3.9.14

   Built on V3.9.13 stable.

   Goal:
   - Kill dead space between homepage carousel sections
   - Leave only enough room for each carousel title row
   - Match all lower carousel arrows to first carousel style:
     smaller, burgundy/gold, aligned, softer background
   - Keep cart-safe arrow layering from V3.9.13
   - Do NOT touch cart styling or cart z-index
   ========================================================== */


/* 1. Tighten every lower carousel section gap */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) {
    margin-top: -34px !important;
    padding-top: 34px !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
    position: relative !important;
}


/* 2. If the carousel uses the normal title-as-item pattern, keep a compact title row */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) {
    position: relative !important;
    padding-top: 30px !important;
    margin-top: 0 !important;
    overflow: visible !important;
}


/* 3. Lower carousel title placement */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 12 !important;
    height: 30px !important;
    min-height: 30px !important;
    max-width: calc(100% - 130px) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    pointer-events: none !important;
}

html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item h1,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item h2,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item h3 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 23px !important;
    line-height: 30px !important;
    font-weight: 900 !important;
    letter-spacing: -0.5px !important;
    color: #15120F !important;
    white-space: nowrap !important;
}


/* 4. Pull lower product carousels closer under their title row */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) > sp-carousel,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) > sp-items,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) .normal-products-carousel,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) .items-wrapper,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) .items,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) .product-list {
    margin-top: -22px !important;
    padding-top: 0 !important;
    transform: none !important;
}


/* 5. Lower carousel arrows: same line as title, matching top carousel */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .carousel-btns-wrapper,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    line-height: 1 !important;
    pointer-events: auto !important;
}


/* 6. Lower arrow buttons: match first carousel size and premium color */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper > *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .prev,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .next {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    vertical-align: middle !important;
    background-color: rgba(246,239,230,.94) !important;
    border: 1px solid rgba(150,15,68,.12) !important;
    color: #960F44 !important;
    box-shadow: 0 3px 8px rgba(35,24,17,.04) !important;
    pointer-events: auto !important;
    z-index: 3 !important;
}


/* 7. Lower arrow icons: burgundy/gold, never blue */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper svg,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper svg *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper i,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper span,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .arrow,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [class*="arrow"],
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [class*="icon"] {
    color: #960F44 !important;
    fill: #960F44 !important;
    stroke: #960F44 !important;
}


/* 8. Disabled lower arrows: soft gold */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button[disabled],
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .disabled,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [aria-disabled="true"] {
    background-color: rgba(243,235,221,.9) !important;
    color: #C9A56D !important;
    opacity: .72 !important;
}

html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button[disabled] svg,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .disabled svg,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [aria-disabled="true"] svg,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button[disabled] svg *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .disabled svg *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [aria-disabled="true"] svg * {
    color: #C9A56D !important;
    fill: #C9A56D !important;
    stroke: #C9A56D !important;
}


/* 9. Keep first carousel unchanged except inherit the existing stable cart-safe layer rules */
html.home section.view .home-page-wrapper > .content > .component:first-child {
    margin-top: -6px !important;
}


/* 10. When cart is open, arrows stay below the cart and non-clickable */
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .carousel-btns-wrapper {
    z-index: 1 !important;
    pointer-events: none !important;
}


/* 11. Mobile safety */
@media screen and (max-width: 768px) {
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) {
        margin-top: 0 !important;
        padding-top: 18px !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content {
        padding-top: 0 !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        transform: none !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) > sp-carousel,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) > sp-items,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) .normal-products-carousel,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) .items-wrapper,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) .items,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content:has(> .title-as-item) .product-list {
        margin-top: 0 !important;
    }
}


/* ==========================================================
   PART 29: LOWER CAROUSEL TRUE HEADER ROW + DEAD SPACE FIX V3.9.15

   Built on V3.9.14 stable.

   Goal:
   - Keep V3.9.14 arrow colors/sizing
   - Put every lower carousel title and arrows on the same row
   - Kill dead space between carousel sections
   - Leave only a small title row gap
   - Keep arrows below cart layer from V3.9.13/14
   - Do NOT touch cart styling or cart z-index
   ========================================================== */


/* 1. Tighten lower carousel sections without crushing the title row */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) {
    position: relative !important;
    margin-top: -52px !important;
    padding-top: 26px !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
}


/* 2. Real carousel content wrapper: title/arrow row + products directly underneath */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content {
    position: relative !important;
    padding-top: 28px !important;
    margin-top: 0 !important;
    overflow: visible !important;
    z-index: 1 !important;
}


/* 3. Title row: top-left, fixed row height */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 8 !important;
    height: 28px !important;
    min-height: 28px !important;
    max-width: calc(100% - 130px) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    pointer-events: none !important;
}

html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item h1,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item h2,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item h3 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 23px !important;
    line-height: 28px !important;
    font-weight: 900 !important;
    letter-spacing: -0.5px !important;
    color: #15120F !important;
    white-space: nowrap !important;
}


/* 4. Arrows: same exact row as the lower carousel title */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .carousel-btns-wrapper,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper {
    position: absolute !important;
    top: -3px !important;
    right: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    line-height: 1 !important;
    pointer-events: auto !important;
}


/* 5. Lower arrow buttons: same size/color as first carousel */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper > *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .prev,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .next {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    vertical-align: middle !important;
    background-color: rgba(246,239,230,.94) !important;
    border: 1px solid rgba(150,15,68,.12) !important;
    color: #960F44 !important;
    box-shadow: 0 3px 8px rgba(35,24,17,.04) !important;
    pointer-events: auto !important;
    z-index: 3 !important;
}


/* 6. Burgundy active arrows, soft gold disabled arrows */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper svg,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper svg *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper i,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper span,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .arrow,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [class*="arrow"],
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [class*="icon"] {
    color: #960F44 !important;
    fill: #960F44 !important;
    stroke: #960F44 !important;
}

html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button[disabled],
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .disabled,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [aria-disabled="true"] {
    background-color: rgba(243,235,221,.9) !important;
    color: #C9A56D !important;
    opacity: .72 !important;
}

html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button[disabled] svg,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .disabled svg,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [aria-disabled="true"] svg,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button[disabled] svg *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .disabled svg *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [aria-disabled="true"] svg * {
    color: #C9A56D !important;
    fill: #C9A56D !important;
    stroke: #C9A56D !important;
}


/* 7. Pull each lower product row up so it starts right under its title row */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > sp-carousel,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > sp-items,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .normal-products-carousel,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .items-wrapper,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .items,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .product-list {
    margin-top: -30px !important;
    padding-top: 0 !important;
    transform: none !important;
}


/* 8. Keep first carousel untouched from V3.9.13/14 stable */
html.home section.view .home-page-wrapper > .content > .component:first-child {
    margin-top: -6px !important;
}


/* 9. Cart open safety: arrows below cart, no cart styling */
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .carousel-btns-wrapper,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .arrows,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .controls,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .navigation {
    z-index: 1 !important;
    pointer-events: none !important;
}


/* 10. Mobile safety */
@media screen and (max-width: 768px) {
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) {
        margin-top: 0 !important;
        padding-top: 18px !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content {
        padding-top: 0 !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        transform: none !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > sp-carousel,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > sp-items,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .normal-products-carousel,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .items-wrapper,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .items,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .product-list {
        margin-top: 0 !important;
    }
}


/* ==========================================================
   PART 30: LOWER CAROUSEL TITLE ABOVE CARDS FIX V3.9.16

   Built on V3.9.15.

   Fixes:
   - Dairy/title row was still sitting on top of the product cards
   - Lower carousel arrows should stay on same row as title
   - Dead space between carousels should be reduced
   - Product cards should start directly below title row
   - Cart-safe arrow layering remains
   - No cart styling or cart z-index changes
   ========================================================== */


/* 1. Pull lower carousel sections upward to remove dead space between carousels */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) {
    position: relative !important;
    margin-top: -66px !important;
    padding-top: 34px !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
}


/* 2. Create real title/header space inside every lower carousel */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content {
    position: relative !important;
    padding-top: 50px !important;
    margin-top: 0 !important;
    overflow: visible !important;
    z-index: 1 !important;
}


/* 3. Lower carousel title: above the product cards, not inside the card row */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item {
    position: absolute !important;
    top: 8px !important;
    left: 0 !important;
    z-index: 8 !important;
    height: 32px !important;
    min-height: 32px !important;
    max-width: calc(100% - 130px) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    pointer-events: none !important;
}

html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item h1,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item h2,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item h3 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 23px !important;
    line-height: 32px !important;
    font-weight: 900 !important;
    letter-spacing: -0.5px !important;
    color: #15120F !important;
    white-space: nowrap !important;
}


/* 4. Lower carousel arrows: same row as title, not on product cards */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .carousel-btns-wrapper,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper {
    position: absolute !important;
    top: 6px !important;
    right: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    line-height: 1 !important;
    pointer-events: auto !important;
}


/* 5. Lower arrows match first carousel size and burgundy/gold styling */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper > *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .prev,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .next {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    vertical-align: middle !important;
    background-color: rgba(246,239,230,.94) !important;
    border: 1px solid rgba(150,15,68,.12) !important;
    color: #960F44 !important;
    box-shadow: 0 3px 8px rgba(35,24,17,.04) !important;
    pointer-events: auto !important;
    z-index: 3 !important;
}


/* 6. Lower arrow icons: burgundy active, gold disabled */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper svg,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper svg *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper i,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper span,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .arrow,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [class*="arrow"],
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [class*="icon"] {
    color: #960F44 !important;
    fill: #960F44 !important;
    stroke: #960F44 !important;
}

html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button[disabled],
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .disabled,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [aria-disabled="true"] {
    background-color: rgba(243,235,221,.9) !important;
    color: #C9A56D !important;
    opacity: .72 !important;
}

html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button[disabled] svg,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .disabled svg,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [aria-disabled="true"] svg,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button[disabled] svg *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .disabled svg *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [aria-disabled="true"] svg * {
    color: #C9A56D !important;
    fill: #C9A56D !important;
    stroke: #C9A56D !important;
}


/* 7. Product rows now sit below the title row, close but not overlapping */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > sp-carousel,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > sp-items,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .normal-products-carousel,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .items-wrapper,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .items,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .product-list {
    margin-top: -12px !important;
    padding-top: 0 !important;
    transform: none !important;
}


/* 8. Keep first carousel untouched from stable V3.9.13/14/15 */
html.home section.view .home-page-wrapper > .content > .component:first-child {
    margin-top: -6px !important;
}


/* 9. Cart open safety: arrows below cart, no cart styling */
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .carousel-btns-wrapper,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .arrows,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .controls,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .navigation {
    z-index: 1 !important;
    pointer-events: none !important;
}


/* 10. Mobile safety */
@media screen and (max-width: 768px) {
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) {
        margin-top: 0 !important;
        padding-top: 18px !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content {
        padding-top: 0 !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        transform: none !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > sp-carousel,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > sp-items,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .normal-products-carousel,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .items-wrapper,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .items,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .product-list {
        margin-top: 0 !important;
    }
}


/* ==========================================================
   PART 31: FORCE LOWER TITLE-AS-ITEM INTO REAL HEADER ROW V3.9.17

   Built on V3.9.16.

   Why this is needed:
   - Stor.ai renders lower carousel titles like "Dairy" as .title-as-item
   - That title is acting like a carousel item, so it sits on/inside the product row
   - This patch forces .title-as-item to become a full-width header row above products

   Goals:
   - Dairy/title above carousel cards
   - Arrows on same row as title
   - Product cards start under the title row
   - Kill extra dead space between carousels
   - Keep cart-safe arrow layering
   - Do NOT touch cart styling or cart z-index
   ========================================================== */


/* 1. Lower carousel section spacing: tight, but with room for real header row */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) {
    position: relative !important;
    margin-top: -56px !important;
    padding-top: 22px !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
}


/* 2. The lower carousel wrapper becomes a block layout instead of letting title behave like a card */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content {
    position: relative !important;
    display: block !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    overflow: visible !important;
    z-index: 1 !important;
}


/* 3. FORCE .title-as-item to be a real full-width row above the carousel */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item {
    position: relative !important;
    display: block !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    z-index: 8 !important;
    background: transparent !important;
    overflow: visible !important;
    pointer-events: none !important;
    order: -10 !important;
}


/* 4. Title text */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item h1,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item h2,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item h3 {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 23px !important;
    line-height: 34px !important;
    font-weight: 900 !important;
    letter-spacing: -0.5px !important;
    color: #15120F !important;
    white-space: nowrap !important;
    text-align: left !important;
}


/* 5. Lower carousel arrows: same row as title, right side */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .carousel-btns-wrapper,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    line-height: 1 !important;
    pointer-events: auto !important;
}


/* 6. Lower arrows: match first carousel exactly */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper > *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .prev,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .next {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    vertical-align: middle !important;
    background-color: rgba(246,239,230,.94) !important;
    border: 1px solid rgba(150,15,68,.12) !important;
    color: #960F44 !important;
    box-shadow: 0 3px 8px rgba(35,24,17,.04) !important;
    pointer-events: auto !important;
    z-index: 3 !important;
}


/* 7. Lower arrow icon colors */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper svg,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper svg *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper i,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper span,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .arrow,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [class*="arrow"],
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [class*="icon"] {
    color: #960F44 !important;
    fill: #960F44 !important;
    stroke: #960F44 !important;
}

html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button[disabled],
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .disabled,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [aria-disabled="true"] {
    background-color: rgba(243,235,221,.9) !important;
    color: #C9A56D !important;
    opacity: .72 !important;
}

html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button[disabled] svg,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .disabled svg,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [aria-disabled="true"] svg,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button[disabled] svg *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .disabled svg *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [aria-disabled="true"] svg * {
    color: #C9A56D !important;
    fill: #C9A56D !important;
    stroke: #C9A56D !important;
}


/* 8. Product rows start directly after title row */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > sp-carousel,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > sp-items,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .normal-products-carousel,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .items-wrapper,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .items,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .product-list {
    position: relative !important;
    display: block !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    transform: none !important;
    z-index: 1 !important;
}


/* 9. If carousel library uses flex/grid children, prevent title from consuming product-card width */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item + * {
    clear: both !important;
}


/* 10. Keep first/top carousel untouched */
html.home section.view .home-page-wrapper > .content > .component:first-child {
    margin-top: -6px !important;
}


/* 11. Cart open safety: arrows below cart, no cart styling */
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .carousel-btns-wrapper,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .arrows,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .controls,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .navigation {
    z-index: 1 !important;
    pointer-events: none !important;
}


/* 12. Mobile safety */
@media screen and (max-width: 768px) {
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) {
        margin-top: 0 !important;
        padding-top: 18px !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        transform: none !important;
    }
}


/* ==========================================================
   PART 32: LOWER CAROUSEL TIGHT STACK FINAL V3.9.18

   Built on V3.9.17.

   Current state:
   - Title is finally forced above the lower carousel
   - But the whole lower section still starts too low

   Fix:
   - Pull every lower carousel section upward
   - Keep title above cards
   - Keep arrows on title row
   - Leave only small breathing room between title and cards
   - Do NOT touch top carousel or cart
   ========================================================== */


/* 1. Move lower carousel blocks upward to kill dead space between carousels */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) {
    position: relative !important;
    margin-top: -112px !important;
    padding-top: 18px !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
}


/* 2. Lower carousel wrapper stays clean block layout */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content {
    position: relative !important;
    display: block !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    overflow: visible !important;
    z-index: 1 !important;
}


/* 3. Title row: above cards with minimal height */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item {
    position: relative !important;
    display: block !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 0 2px 0 !important;
    padding: 0 !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    z-index: 8 !important;
    background: transparent !important;
    overflow: visible !important;
    pointer-events: none !important;
    order: -10 !important;
}

html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item h1,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item h2,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item h3 {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 23px !important;
    line-height: 30px !important;
    font-weight: 900 !important;
    letter-spacing: -0.5px !important;
    color: #15120F !important;
    white-space: nowrap !important;
    text-align: left !important;
}


/* 4. Arrows: same row as title, not floating in card area */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .carousel-btns-wrapper,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper {
    position: absolute !important;
    top: -2px !important;
    right: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    line-height: 1 !important;
    pointer-events: auto !important;
}


/* 5. Lower arrows remain matched to top carousel */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper > *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .prev,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .next {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    vertical-align: middle !important;
    background-color: rgba(246,239,230,.94) !important;
    border: 1px solid rgba(150,15,68,.12) !important;
    color: #960F44 !important;
    box-shadow: 0 3px 8px rgba(35,24,17,.04) !important;
    pointer-events: auto !important;
    z-index: 3 !important;
}


/* 6. Lower arrow icon colors */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper svg,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper svg *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper i,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper span,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .arrow,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [class*="arrow"],
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [class*="icon"] {
    color: #960F44 !important;
    fill: #960F44 !important;
    stroke: #960F44 !important;
}

html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button[disabled],
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .disabled,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [aria-disabled="true"] {
    background-color: rgba(243,235,221,.9) !important;
    color: #C9A56D !important;
    opacity: .72 !important;
}

html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button[disabled] svg,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .disabled svg,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [aria-disabled="true"] svg,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button[disabled] svg *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .disabled svg *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [aria-disabled="true"] svg * {
    color: #C9A56D !important;
    fill: #C9A56D !important;
    stroke: #C9A56D !important;
}


/* 7. Product row starts immediately under title row */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > sp-carousel,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > sp-items,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .normal-products-carousel,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .items-wrapper,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .items,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .product-list {
    position: relative !important;
    display: block !important;
    margin-top: -2px !important;
    padding-top: 0 !important;
    transform: none !important;
    z-index: 1 !important;
}


/* 8. Keep first carousel untouched */
html.home section.view .home-page-wrapper > .content > .component:first-child {
    margin-top: -6px !important;
}


/* 9. Cart open safety: arrows below cart, no cart styling */
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .carousel-btns-wrapper,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .arrows,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .controls,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .navigation {
    z-index: 1 !important;
    pointer-events: none !important;
}


/* 10. Mobile safety */
@media screen and (max-width: 768px) {
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) {
        margin-top: 0 !important;
        padding-top: 18px !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        transform: none !important;
    }
}


/* ==========================================================
   PART 33: LOWER CAROUSEL ALIGN + GAP KILL V3.9.19

   Built on V3.9.18.

   Fixes from screenshot:
   - Dairy title is now above cards, but too low
   - Dairy title is slightly off from the first carousel title alignment
   - Lower arrows are floating above Dairy instead of on the same row
   - Too much dead space remains between first carousel and lower carousel

   Do NOT touch:
   - Cart layers
   - Header
   - Search
   - Hero
   - Top carousel styling
   ========================================================== */


/* 1. Pull every lower carousel section much closer to the carousel above */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) {
    position: relative !important;
    margin-top: -178px !important;
    padding-top: 10px !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
}


/* 2. Keep the lower carousel wrapper stable */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content {
    position: relative !important;
    display: block !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    overflow: visible !important;
    z-index: 1 !important;
}


/* 3. Lower carousel title row: aligned with first carousel title and just above cards */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item {
    position: relative !important;
    display: block !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 0 3px 12px !important;
    padding: 0 !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    z-index: 8 !important;
    background: transparent !important;
    overflow: visible !important;
    pointer-events: none !important;
    order: -10 !important;
}

html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item h1,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item h2,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item h3 {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 23px !important;
    line-height: 30px !important;
    font-weight: 900 !important;
    letter-spacing: -0.5px !important;
    color: #15120F !important;
    white-space: nowrap !important;
    text-align: left !important;
}


/* 4. Lower carousel arrows: move DOWN onto the title row */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .carousel-btns-wrapper,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper {
    position: absolute !important;
    top: 8px !important;
    right: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    line-height: 1 !important;
    pointer-events: auto !important;
}


/* 5. If the arrow wrapper is being positioned relative to the component instead of carousel content, force it lower */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) > .carousel-btns-wrapper,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) > .header-wrapper .carousel-btns-wrapper {
    top: 18px !important;
}


/* 6. Lower arrow buttons stay matched to the first carousel */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper > *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .prev,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .next {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    vertical-align: middle !important;
    background-color: rgba(246,239,230,.94) !important;
    border: 1px solid rgba(150,15,68,.12) !important;
    color: #960F44 !important;
    box-shadow: 0 3px 8px rgba(35,24,17,.04) !important;
    pointer-events: auto !important;
    z-index: 3 !important;
}


/* 7. Lower arrow icon colors */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper svg,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper svg *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper i,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper span,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .arrow,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [class*="arrow"],
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [class*="icon"] {
    color: #960F44 !important;
    fill: #960F44 !important;
    stroke: #960F44 !important;
}

html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button[disabled],
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .disabled,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [aria-disabled="true"] {
    background-color: rgba(243,235,221,.9) !important;
    color: #C9A56D !important;
    opacity: .72 !important;
}

html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button[disabled] svg,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .disabled svg,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [aria-disabled="true"] svg,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button[disabled] svg *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .disabled svg *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [aria-disabled="true"] svg * {
    color: #C9A56D !important;
    fill: #C9A56D !important;
    stroke: #C9A56D !important;
}


/* 8. Product row starts immediately under the title row */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > sp-carousel,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > sp-items,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .normal-products-carousel,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .items-wrapper,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .items,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .product-list {
    position: relative !important;
    display: block !important;
    margin-top: -4px !important;
    padding-top: 0 !important;
    transform: none !important;
    z-index: 1 !important;
}


/* 9. Keep first/top carousel untouched */
html.home section.view .home-page-wrapper > .content > .component:first-child {
    margin-top: -6px !important;
}


/* 10. Cart open safety: arrows below cart, no cart styling */
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .carousel-btns-wrapper,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .arrows,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .controls,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .navigation {
    z-index: 1 !important;
    pointer-events: none !important;
}


/* 11. Mobile safety */
@media screen and (max-width: 768px) {
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) {
        margin-top: 0 !important;
        padding-top: 18px !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        transform: none !important;
    }
}


/* ==========================================================
   PART 34: LOWER CAROUSEL GAP BALANCE V3.9.20

   Built on V3.9.19.

   Screenshot issue:
   - Dairy title is correctly above its carousel
   - But there is still too much blank space between New Items carousel and Dairy title
   - Dairy title has almost no breathing room from its own carousel

   Fix:
   - Move lower carousel section upward
   - Keep Dairy/title row above the cards
   - Add a small clean title-to-card gap
   - Keep arrows aligned with the title row
   - Do NOT touch cart/header/hero/top carousel
   ========================================================== */


/* 1. Pull lower carousel sections up harder to remove the dead zone */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) {
    position: relative !important;
    margin-top: -228px !important;
    padding-top: 8px !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
}


/* 2. Lower carousel wrapper remains stable block layout */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content {
    position: relative !important;
    display: block !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    overflow: visible !important;
    z-index: 1 !important;
}


/* 3. Title row aligned with the top carousel title, with small breathing room below */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item {
    position: relative !important;
    display: block !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 0 8px 12px !important;
    padding: 0 !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    z-index: 8 !important;
    background: transparent !important;
    overflow: visible !important;
    pointer-events: none !important;
    order: -10 !important;
}

html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item h1,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item h2,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item h3 {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 23px !important;
    line-height: 30px !important;
    font-weight: 900 !important;
    letter-spacing: -0.5px !important;
    color: #15120F !important;
    white-space: nowrap !important;
    text-align: left !important;
}


/* 4. Arrows on the same title row, right side */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .carousel-btns-wrapper,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper {
    position: absolute !important;
    top: -2px !important;
    right: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    line-height: 1 !important;
    pointer-events: auto !important;
}


/* 5. Keep lower arrows matching the first carousel */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper > *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .prev,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .next {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    vertical-align: middle !important;
    background-color: rgba(246,239,230,.94) !important;
    border: 1px solid rgba(150,15,68,.12) !important;
    color: #960F44 !important;
    box-shadow: 0 3px 8px rgba(35,24,17,.04) !important;
    pointer-events: auto !important;
    z-index: 3 !important;
}


/* 6. Keep lower arrow icon colors */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper svg,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper svg *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper i,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper span,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .arrow,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [class*="arrow"],
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [class*="icon"] {
    color: #960F44 !important;
    fill: #960F44 !important;
    stroke: #960F44 !important;
}

html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button[disabled],
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .disabled,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [aria-disabled="true"] {
    background-color: rgba(243,235,221,.9) !important;
    color: #C9A56D !important;
    opacity: .72 !important;
}


/* 7. Product row sits under title with small, clean gap */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > sp-carousel,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > sp-items,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .normal-products-carousel,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .items-wrapper,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .items,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .product-list {
    position: relative !important;
    display: block !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    transform: none !important;
    z-index: 1 !important;
}


/* 8. Keep top carousel untouched */
html.home section.view .home-page-wrapper > .content > .component:first-child {
    margin-top: -6px !important;
}


/* 9. Cart open safety: arrows below cart, no cart styling */
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .carousel-btns-wrapper,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .arrows,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .controls,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .navigation {
    z-index: 1 !important;
    pointer-events: none !important;
}


/* 10. Mobile safety */
@media screen and (max-width: 768px) {
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) {
        margin-top: 0 !important;
        padding-top: 18px !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        transform: none !important;
    }
}


/* ==========================================================
   PART 35: LOWER CAROUSEL HARD PULL UP V3.9.21

   Built on V3.9.20.

   Screenshot issue:
   - Dairy title is above its carousel now
   - But the whole Dairy section still starts too low
   - Dead space between New Items carousel and Dairy title is too large

   Fix:
   - Pull the entire lower carousel section up much harder
   - Keep title above its own product cards
   - Keep arrows on the Dairy/title row
   - Keep small breathing room between Dairy title and Dairy cards
   - No cart/header/hero/top-carousel changes
   ========================================================== */


/* 1. Main fix: pull lower carousel sections up to remove the dead space */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) {
    position: relative !important;
    margin-top: -318px !important;
    padding-top: 8px !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
}


/* 2. Keep lower carousel wrapper stable */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content {
    position: relative !important;
    display: block !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    overflow: visible !important;
    z-index: 1 !important;
}


/* 3. Lower title row: aligned and above cards */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item {
    position: relative !important;
    display: block !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 0 6px 12px !important;
    padding: 0 !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    z-index: 8 !important;
    background: transparent !important;
    overflow: visible !important;
    pointer-events: none !important;
    order: -10 !important;
}

html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item h1,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item h2,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item h3 {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 23px !important;
    line-height: 30px !important;
    font-weight: 900 !important;
    letter-spacing: -0.5px !important;
    color: #15120F !important;
    white-space: nowrap !important;
    text-align: left !important;
}


/* 4. Arrows stay on the same row as the lower title */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .carousel-btns-wrapper,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper {
    position: absolute !important;
    top: -2px !important;
    right: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    line-height: 1 !important;
    pointer-events: auto !important;
}


/* 5. Lower arrows keep matching the first carousel */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper > *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .prev,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .next {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    vertical-align: middle !important;
    background-color: rgba(246,239,230,.94) !important;
    border: 1px solid rgba(150,15,68,.12) !important;
    color: #960F44 !important;
    box-shadow: 0 3px 8px rgba(35,24,17,.04) !important;
    pointer-events: auto !important;
    z-index: 3 !important;
}


/* 6. Lower arrow colors stay burgundy/gold */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper svg,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper svg *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper i,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper span,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .arrow,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [class*="arrow"],
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [class*="icon"] {
    color: #960F44 !important;
    fill: #960F44 !important;
    stroke: #960F44 !important;
}

html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button[disabled],
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .disabled,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [aria-disabled="true"] {
    background-color: rgba(243,235,221,.9) !important;
    color: #C9A56D !important;
    opacity: .72 !important;
}


/* 7. Product row stays directly under title, no overlap */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > sp-carousel,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > sp-items,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .normal-products-carousel,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .items-wrapper,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .items,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .product-list {
    position: relative !important;
    display: block !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    transform: none !important;
    z-index: 1 !important;
}


/* 8. Preserve top carousel exactly */
html.home section.view .home-page-wrapper > .content > .component:first-child {
    margin-top: -6px !important;
}


/* 9. Cart open safety remains only on arrows, not cart */
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .carousel-btns-wrapper,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .arrows,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .controls,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .navigation {
    z-index: 1 !important;
    pointer-events: none !important;
}


/* 10. Mobile safety */
@media screen and (max-width: 768px) {
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) {
        margin-top: 0 !important;
        padding-top: 18px !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        transform: none !important;
    }
}


/* ==========================================================
   PART 36: REAL GAP FIX BY COLLAPSING FIRST CAROUSEL BOX V3.9.22

   Built on V3.9.21.

   What the screenshot/devtools showed:
   - The first carousel component is reserving a tall invisible box under the cards
   - That reserved component height is what creates the dead space before Dairy
   - Pulling Dairy alone will not work if the first component still occupies the space

   Fix:
   - Collapse the first carousel component's flow height
   - Keep first carousel contents visible
   - Move lower carousel back into normal tight flow
   - Keep Dairy title above its cards
   - Keep lower arrows matched and below cart
   - No cart/header/hero changes
   ========================================================== */


/* 1. The real fix: shorten the first carousel component's reserved page height */
html.home section.view .home-page-wrapper > .content > .component:first-child {
    position: relative !important;
    height: 350px !important;
    min-height: 350px !important;
    max-height: 350px !important;
    margin-top: -6px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
}


/* 2. Do not let first carousel internals add bottom space */
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > sp-carousel,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content > sp-items,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .normal-products-carousel,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .items-wrapper,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .items,
html.home section.view .home-page-wrapper > .content > .component:first-child .content-wrapper.carousel-content .product-list {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
}


/* 3. Lower carousel starts directly after the shortened first carousel */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) {
    position: relative !important;
    margin-top: -18px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transform: none !important;
    overflow: visible !important;
}


/* 4. Lower carousel wrapper remains block layout */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content {
    position: relative !important;
    display: block !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    overflow: visible !important;
    z-index: 1 !important;
}


/* 5. Dairy/lower title above cards, aligned with New Items title */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item {
    position: relative !important;
    display: block !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 0 8px 12px !important;
    padding: 0 !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    z-index: 8 !important;
    background: transparent !important;
    overflow: visible !important;
    pointer-events: none !important;
    order: -10 !important;
}

html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item h1,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item h2,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item h3 {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 23px !important;
    line-height: 30px !important;
    font-weight: 900 !important;
    letter-spacing: -0.5px !important;
    color: #15120F !important;
    white-space: nowrap !important;
    text-align: left !important;
}


/* 6. Lower arrows sit on the Dairy/title row */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .carousel-btns-wrapper,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper {
    position: absolute !important;
    top: -2px !important;
    right: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    line-height: 1 !important;
    pointer-events: auto !important;
}


/* 7. Lower arrows match first carousel style */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper > *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .prev,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .next {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    vertical-align: middle !important;
    background-color: rgba(246,239,230,.94) !important;
    border: 1px solid rgba(150,15,68,.12) !important;
    color: #960F44 !important;
    box-shadow: 0 3px 8px rgba(35,24,17,.04) !important;
    pointer-events: auto !important;
    z-index: 3 !important;
}


/* 8. Lower arrow colors */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper svg,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper svg *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper i,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper span,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .arrow,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [class*="arrow"],
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [class*="icon"] {
    color: #960F44 !important;
    fill: #960F44 !important;
    stroke: #960F44 !important;
}

html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button[disabled],
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .disabled,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [aria-disabled="true"] {
    background-color: rgba(243,235,221,.9) !important;
    color: #C9A56D !important;
    opacity: .72 !important;
}


/* 9. Lower product row directly under title */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > sp-carousel,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > sp-items,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .normal-products-carousel,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .items-wrapper,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .items,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .product-list {
    position: relative !important;
    display: block !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    transform: none !important;
    z-index: 1 !important;
}


/* 10. Cart open safety stays only on arrows, not cart */
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .carousel-btns-wrapper,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .arrows,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .controls,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .navigation {
    z-index: 1 !important;
    pointer-events: none !important;
}


/* 11. Mobile safety */
@media screen and (max-width: 768px) {
    html.home section.view .home-page-wrapper > .content > .component:first-child {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) {
        margin-top: 0 !important;
        padding-top: 18px !important;
        transform: none !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        transform: none !important;
    }
}


/* ==========================================================
   PART 37: LOWER GAP MICRO TUNE V3.9.23

   Built on V3.9.22.

   Screenshot issue:
   - Dairy is structurally correct
   - Still too much dead space above Dairy
   - Dairy title is too close to its own product cards

   Fix:
   - Collapse first carousel reserved height more
   - Pull lower carousel up slightly
   - Add a cleaner title-to-card gap under Dairy
   - Keep arrows on the Dairy title row
   - No cart/header/hero changes
   ========================================================== */


/* 1. Reduce the first carousel's reserved flow height more */
html.home section.view .home-page-wrapper > .content > .component:first-child {
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
}


/* 2. Bring lower carousel sections up closer to the first carousel */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) {
    position: relative !important;
    margin-top: -42px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transform: none !important;
    overflow: visible !important;
}


/* 3. Keep lower carousel wrapper normal */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content {
    position: relative !important;
    display: block !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    overflow: visible !important;
    z-index: 1 !important;
}


/* 4. Dairy/lower title: slightly higher, but with real breathing room under it */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item {
    position: relative !important;
    display: block !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 0 16px 12px !important;
    padding: 0 !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    z-index: 8 !important;
    background: transparent !important;
    overflow: visible !important;
    pointer-events: none !important;
    order: -10 !important;
}

html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item h1,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item h2,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item h3 {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 23px !important;
    line-height: 30px !important;
    font-weight: 900 !important;
    letter-spacing: -0.5px !important;
    color: #15120F !important;
    white-space: nowrap !important;
    text-align: left !important;
}


/* 5. Lower arrows stay on title row */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .carousel-btns-wrapper,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper {
    position: absolute !important;
    top: -2px !important;
    right: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    line-height: 1 !important;
    pointer-events: auto !important;
}


/* 6. Keep lower arrows matching first carousel style */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper > *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .prev,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .next {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    vertical-align: middle !important;
    background-color: rgba(246,239,230,.94) !important;
    border: 1px solid rgba(150,15,68,.12) !important;
    color: #960F44 !important;
    box-shadow: 0 3px 8px rgba(35,24,17,.04) !important;
    pointer-events: auto !important;
    z-index: 3 !important;
}


/* 7. Product row stays directly under the title gap */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > sp-carousel,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > sp-items,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .normal-products-carousel,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .items-wrapper,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .items,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .product-list {
    position: relative !important;
    display: block !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    transform: none !important;
    z-index: 1 !important;
}


/* 8. Cart open safety remains arrow-only */
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .carousel-btns-wrapper,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .arrows,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .controls,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .navigation {
    z-index: 1 !important;
    pointer-events: none !important;
}


/* 9. Mobile safety */
@media screen and (max-width: 768px) {
    html.home section.view .home-page-wrapper > .content > .component:first-child {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) {
        margin-top: 0 !important;
        padding-top: 18px !important;
        transform: none !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        transform: none !important;
    }
}


/* ==========================================================
   PART 38: LOWER CAROUSEL BREATHING ROOM FINAL V3.9.24

   Built on V3.9.23.

   Goal:
   - Keep the successful tight stack from V3.9.23
   - Add a tiny bit more space for the Dairy title/arrows
   - Keep Dairy close to New Items, but not cramped
   - Keep title above its own carousel
   - No cart/header/hero/top-carousel redesign
   ========================================================== */


/* 1. Keep first carousel collapsed close to the successful V3.9.23 layout */
html.home section.view .home-page-wrapper > .content > .component:first-child {
    height: 305px !important;
    min-height: 305px !important;
    max-height: 305px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
}


/* 2. Keep lower carousel close, with a tiny bit more breathing room */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) {
    position: relative !important;
    margin-top: -34px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transform: none !important;
    overflow: visible !important;
}


/* 3. Lower carousel wrapper stays normal */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content {
    position: relative !important;
    display: block !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    overflow: visible !important;
    z-index: 1 !important;
}


/* 4. Lower title row: clean space above the cards */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item {
    position: relative !important;
    display: block !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 0 20px 12px !important;
    padding: 0 !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    z-index: 8 !important;
    background: transparent !important;
    overflow: visible !important;
    pointer-events: none !important;
    order: -10 !important;
}

html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item h1,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item h2,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item h3 {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 23px !important;
    line-height: 30px !important;
    font-weight: 900 !important;
    letter-spacing: -0.5px !important;
    color: #15120F !important;
    white-space: nowrap !important;
    text-align: left !important;
}


/* 5. Lower arrows stay on the title row with same premium styling */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .carousel-btns-wrapper,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper {
    position: absolute !important;
    top: -2px !important;
    right: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    line-height: 1 !important;
    pointer-events: auto !important;
}


/* 6. Keep lower arrows matching first carousel */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper > *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .prev,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .next {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    vertical-align: middle !important;
    background-color: rgba(246,239,230,.94) !important;
    border: 1px solid rgba(150,15,68,.12) !important;
    color: #960F44 !important;
    box-shadow: 0 3px 8px rgba(35,24,17,.04) !important;
    pointer-events: auto !important;
    z-index: 3 !important;
}


/* 7. Lower arrow colors */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper svg,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper svg *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper i,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper span,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .arrow,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [class*="arrow"],
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [class*="icon"] {
    color: #960F44 !important;
    fill: #960F44 !important;
    stroke: #960F44 !important;
}

html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button[disabled],
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .disabled,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper [aria-disabled="true"] {
    background-color: rgba(243,235,221,.9) !important;
    color: #C9A56D !important;
    opacity: .72 !important;
}


/* 8. Product row remains directly under title spacing */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > sp-carousel,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > sp-items,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .normal-products-carousel,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .items-wrapper,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .items,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .product-list {
    position: relative !important;
    display: block !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    transform: none !important;
    z-index: 1 !important;
}


/* 9. Cart open safety remains arrow-only */
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .carousel-btns-wrapper,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .arrows,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .controls,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .navigation {
    z-index: 1 !important;
    pointer-events: none !important;
}


/* 10. Mobile safety */
@media screen and (max-width: 768px) {
    html.home section.view .home-page-wrapper > .content > .component:first-child {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) {
        margin-top: 0 !important;
        padding-top: 18px !important;
        transform: none !important;
    }

    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content > .title-as-item,
    html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        transform: none !important;
    }
}


/* ==========================================================
   PART 39: LOWER ARROWS BETWEEN CAROUSELS V3.9.25

   Built on V3.9.24.

   Goal:
   - Keep the successful V3.9.24 spacing exactly
   - Only move lower carousel arrows down into the gap
   - Do not let Dairy arrows sit on the New Items carousel
   - Keep arrows above Dairy cards and below cart layer
   ========================================================== */


/* Lower carousel arrows: move slightly lower into the clean gap between carousel rows */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .carousel-btns-wrapper,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper {
    top: 18px !important;
    right: 0 !important;
    z-index: 3 !important;
}


/* Keep individual lower arrow buttons locked to the row, no drifting upward */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper > *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .prev,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .next {
    top: 0 !important;
    transform: none !important;
}


/* Cart open safety remains unchanged */
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .carousel-btns-wrapper,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .arrows,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .controls,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .navigation {
    z-index: 1 !important;
    pointer-events: none !important;
}


/* ==========================================================
   PART 40: LOWER ARROWS DOWN TO TITLE ROW V3.9.26

   Built on V3.9.25.

   Goal:
   - Keep V3.9.24/V3.9.25 spacing exactly
   - Do NOT move Dairy title
   - Do NOT move carousels
   - Only move lower carousel arrows down so they sit between rows,
     aligned with the Dairy title, not on the New Items carousel
   ========================================================== */


/* Lower carousel arrows were too high. Push them down onto the lower title row. */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .content-wrapper.carousel-content .carousel-btns-wrapper,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) > .header-wrapper .carousel-btns-wrapper {
    top: 52px !important;
    right: 0 !important;
    z-index: 3 !important;
}


/* Keep the buttons themselves locked in place */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper > *,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper button,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .prev,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-btns-wrapper .next {
    top: 0 !important;
    transform: none !important;
}


/* Keep arrows below cart when cart is open */
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .carousel-btns-wrapper,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .arrows,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .controls,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .navigation {
    z-index: 1 !important;
    pointer-events: none !important;
}


/* ==========================================================
   PART 41 SAFE: AFTER-DAIRY LEFT ALIGNMENT TUNE V3.9.26V

   Built from stable V3.9.26.

   Goal:
   - Keep New Items untouched
   - Keep Dairy untouched
   - Fix rows AFTER Dairy only
   - Bring those product lanes back left from the overcorrected U version
   - Make rows like Chicken/Frozen Food start under their title, like Dairy
   ========================================================== */


/* 1. Remove failed first-card shifts from earlier attempts */
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) sp-product:first-of-type,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .carousel-component-product-item:first-of-type,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) .product-item:first-of-type,
html.home section.view .home-page-wrapper > .content > .component:not(:first-child) [class*="product-item"]:first-of-type {
    margin-left: 0 !important;
}


/* 2. Only affect carousel sections AFTER Dairy */
html.home section.view .home-page-wrapper > .content > .component:nth-child(n+3) {
    overflow: visible !important;
}


/* 3. Tune after-Dairy product lanes back toward the title alignment */
html.home section.view .home-page-wrapper > .content > .component:nth-child(n+3) sp-carousel,
html.home section.view .home-page-wrapper > .content > .component:nth-child(n+3) .sp-carousel,
html.home section.view .home-page-wrapper > .content > .component:nth-child(n+3) .normal-products-carousel,
html.home section.view .home-page-wrapper > .content > .component:nth-child(n+3) .items-wrapper,
html.home section.view .home-page-wrapper > .content > .component:nth-child(n+3) .items,
html.home section.view .home-page-wrapper > .content > .component:nth-child(n+3) .scroller,
html.home section.view .home-page-wrapper > .content > .component:nth-child(n+3) .scroll-wrapper {
    margin-left: 78px !important;
    width: calc(100% - 78px) !important;
    max-width: calc(100% - 78px) !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}


/* 4. Tune internal moving track to the same alignment */
html.home section.view .home-page-wrapper > .content > .component:nth-child(n+3) .transform-wrapper,
html.home section.view .home-page-wrapper > .content > .component:nth-child(n+3) div[class*="transform-wrapper"] {
    margin-left: 78px !important;
    padding-left: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}


/* 5. Keep cards full size and visible */
html.home section.view .home-page-wrapper > .content > .component:nth-child(n+3) sp-product,
html.home section.view .home-page-wrapper > .content > .component:nth-child(n+3) .carousel-component-product-item,
html.home section.view .home-page-wrapper > .content > .component:nth-child(n+3) .product-item,
html.home section.view .home-page-wrapper > .content > .component:nth-child(n+3) [class*="product-item"] {
    flex-shrink: 0 !important;
    overflow: visible !important;
}


/* 6. Keep titles aligned to the normal left edge */
html.home section.view .home-page-wrapper > .content > .component:nth-child(n+3) .content-wrapper.carousel-content > .title-as-item {
    margin-left: 12px !important;
}


/* 7. Keep arrows in the stable position and below cart */
html.home section.view .home-page-wrapper > .content > .component:nth-child(n+3) .carousel-btns-wrapper {
    right: 0 !important;
    z-index: 3 !important;
    overflow: visible !important;
}

html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .carousel-btns-wrapper,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .arrows,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .controls,
html.home:has(div.sidenav nav.cart header[aria-expanded="true"]) section.view .home-page-wrapper > .content .navigation {
    z-index: 1 !important;
    pointer-events: none !important;
}


/* 8. Mobile safety */
@media screen and (max-width: 768px) {
    html.home section.view .home-page-wrapper > .content > .component:nth-child(n+3) sp-carousel,
    html.home section.view .home-page-wrapper > .content > .component:nth-child(n+3) .sp-carousel,
    html.home section.view .home-page-wrapper > .content > .component:nth-child(n+3) .normal-products-carousel,
    html.home section.view .home-page-wrapper > .content > .component:nth-child(n+3) .items-wrapper,
    html.home section.view .home-page-wrapper > .content > .component:nth-child(n+3) .items,
    html.home section.view .home-page-wrapper > .content > .component:nth-child(n+3) .scroller,
    html.home section.view .home-page-wrapper > .content > .component:nth-child(n+3) .scroll-wrapper,
    html.home section.view .home-page-wrapper > .content > .component:nth-child(n+3) .transform-wrapper,
    html.home section.view .home-page-wrapper > .content > .component:nth-child(n+3) div[class*="transform-wrapper"] {
        margin-left: 0 !important;
        width: auto !important;
        max-width: none !important;
    }
}


/* ==========================================================
   PART 42 SAFE: CART DROPDOWN LUXURY BRAND STYLE V3.9.26X

   Built from golden V3.9.26V.

   Scope:
   - Cart dropdown / side cart only
   - Does NOT touch carousel layout
   - Does NOT touch hero/header/search/product cards
   ========================================================== */


/* Main cart dropdown panel: clean luxury white, not yellow */
html div.sidenav nav.cart,
html div.sidenav nav.cart.has-next-delivery,
html div.sidenav nav.cart.has-no-next-delivery,
html div.sidenav > div > nav.cart {
    background: #FFFCF8 !important;
    border: 1px solid rgba(214, 190, 165, .72) !important;
    box-shadow: 0 18px 42px rgba(35, 24, 17, .16) !important;
    color: #17110D !important;
}


/* Cart top summary/header: warm white with premium separation */
html div.sidenav nav.cart > header,
html div.sidenav nav.cart header.clickable,
html div.sidenav nav.cart header[aria-expanded] {
    background: #FFFCF8 !important;
    border: 1px solid rgba(214, 190, 165, .72) !important;
    box-shadow: 0 8px 22px rgba(35, 24, 17, .08) !important;
    color: #17110D !important;
}


/* Delivery bar: keep brand burgundy and make it look intentional */
html div.sidenav nav.cart .next-delivery,
html div.sidenav nav.cart .next-delivery-wrapper,
html div.sidenav nav.cart header + div {
    background: #960F44 !important;
    color: #FFFFFF !important;
    border-top: 1px solid rgba(255, 255, 255, .14) !important;
    border-bottom: 1px solid rgba(80, 8, 35, .22) !important;
}


/* Cart dropdown body */
html div.sidenav nav.cart .content,
html div.sidenav nav.cart .cart-content,
html div.sidenav nav.cart .cart-items,
html div.sidenav nav.cart .orders,
html div.sidenav nav.cart .body {
    background: #FFFCF8 !important;
    color: #17110D !important;
}


/* Cart item rows: luxury white card rows */
html div.sidenav nav.cart .cart-item,
html div.sidenav nav.cart .item,
html div.sidenav nav.cart [class*="cart-item"],
html div.sidenav nav.cart [class*="order-item"] {
    background: #FFFFFF !important;
    border-bottom: 1px solid rgba(214, 190, 165, .55) !important;
    color: #17110D !important;
}


/* Cart section dividers like delivery fee / shop by category */
html div.sidenav nav.cart [class*="delivery"],
html div.sidenav nav.cart [class*="category"],
html div.sidenav nav.cart [class*="previous"],
html div.sidenav nav.cart [class*="save"] {
    border-color: rgba(214, 190, 165, .55) !important;
}


/* Checkout button: keep strong brand color */
html div.sidenav nav.cart button,
html div.sidenav nav.cart .checkout,
html div.sidenav nav.cart [class*="checkout"] {
    background: #960F44 !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(150, 15, 68, .9) !important;
    box-shadow: 0 10px 22px rgba(150, 15, 68, .22) !important;
}


/* Quantity controls / remove buttons: brand matching */
html div.sidenav nav.cart [class*="quantity"],
html div.sidenav nav.cart [class*="amount"],
html div.sidenav nav.cart [class*="remove"] {
    border-color: rgba(150, 15, 68, .16) !important;
}


/* Text contrast cleanup */
html div.sidenav nav.cart,
html div.sidenav nav.cart * {
    text-shadow: none !important;
}


/* Muted text should stay readable */
html div.sidenav nav.cart small,
html div.sidenav nav.cart .muted,
html div.sidenav nav.cart [class*="sub"],
html div.sidenav nav.cart [class*="note"] {
    color: #6B5A4C !important;
}


/* ==========================================================
   PART 43 SAFE: CART HEADER BURGUNDY PREMIUM BAR V3.9.26Y

   Built from V3.9.26X.

   Scope:
   - Cart dropdown header/top collapsed bar only
   - Makes cart icon visible
   - Rounded premium bar
   - Keeps cart body luxury white
   - Does NOT touch carousel/header/hero/product layout
   ========================================================== */


/* Main cart panel stays luxury white */
html div.sidenav nav.cart,
html div.sidenav nav.cart.has-next-delivery,
html div.sidenav nav.cart.has-no-next-delivery,
html div.sidenav > div > nav.cart {
    background: #FFFCF8 !important;
    border: 1px solid rgba(214, 190, 165, .72) !important;
    box-shadow: 0 18px 42px rgba(35, 24, 17, .16) !important;
    color: #17110D !important;
}


/* Cart collapsed/header bar: burgundy, separated, rounded */
html div.sidenav nav.cart > header,
html div.sidenav nav.cart header.clickable,
html div.sidenav nav.cart header[aria-expanded],
html div.sidenav nav.cart header.clickable.secondary-font {
    background: #960F44 !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 24px rgba(80, 8, 35, .24) !important;
    overflow: hidden !important;
}


/* Make all text/icons inside cart header white and readable */
html div.sidenav nav.cart > header *,
html div.sidenav nav.cart header.clickable *,
html div.sidenav nav.cart header[aria-expanded] *,
html div.sidenav nav.cart header.clickable.secondary-font * {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
    text-shadow: none !important;
}


/* Cart icon specifically */
html div.sidenav nav.cart header img.cart-icon,
html div.sidenav nav.cart header .cart-icon,
html div.sidenav nav.cart header [class*="cart-icon"],
html div.sidenav nav.cart header svg,
html div.sidenav nav.cart header svg * {
    opacity: 1 !important;
    filter: brightness(0) invert(1) !important;
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
}


/* Checkout pill inside header should still stand out but not disappear */
html div.sidenav nav.cart > header button,
html div.sidenav nav.cart header.clickable button,
html div.sidenav nav.cart header[aria-expanded] button,
html div.sidenav nav.cart header .checkout,
html div.sidenav nav.cart header [class*="checkout"] {
    background: rgba(255, 255, 255, .20) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, .28) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}


/* Header delete/trash icon should stay clear */
html div.sidenav nav.cart header [class*="trash"],
html div.sidenav nav.cart header [class*="delete"],
html div.sidenav nav.cart header [class*="remove"] {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
    opacity: .9 !important;
}


/* Delivery bar remains burgundy, but flatter so header still feels separate */
html div.sidenav nav.cart .next-delivery,
html div.sidenav nav.cart .next-delivery-wrapper,
html div.sidenav nav.cart header + div {
    background: #960F44 !important;
    color: #FFFFFF !important;
    border-top: 1px solid rgba(255, 255, 255, .10) !important;
    border-bottom: 1px solid rgba(80, 8, 35, .20) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}


/* If the next delivery row is directly touching header, keep a tiny visual separation */
html div.sidenav nav.cart > header + .next-delivery,
html div.sidenav nav.cart > header + .next-delivery-wrapper,
html div.sidenav nav.cart > header + div {
    margin-top: 3px !important;
}


/* ==========================================================
   PART 44 SAFE: CART WHITE CIRCLE FIX ONLY V3.9.26Z2

   Built from good V3.9.26Y.

   IMPORTANT:
   - This REMOVES the bad global overflow/clip fix from V3.9.26Z
   - Does NOT touch carousel overflow
   - Does NOT touch page scroll
   - Does NOT touch carousel sizing/spacing
   - Only removes the accidental white circle in cart header
   ========================================================== */


/* Remove accidental white circle/pill inside burgundy cart header */
html div.sidenav nav.cart > header button,
html div.sidenav nav.cart header.clickable button,
html div.sidenav nav.cart header[aria-expanded] button,
html div.sidenav nav.cart header.clickable.secondary-font button,
html div.sidenav nav.cart > header .button,
html div.sidenav nav.cart header.clickable .button,
html div.sidenav nav.cart header[aria-expanded] .button,
html div.sidenav nav.cart header [class*="button"],
html div.sidenav nav.cart header [class*="btn"] {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}


/* Keep header icons/text white and visible on burgundy */
html div.sidenav nav.cart > header *,
html div.sidenav nav.cart header.clickable *,
html div.sidenav nav.cart header[aria-expanded] *,
html div.sidenav nav.cart header.clickable.secondary-font * {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
    text-shadow: none !important;
}


/* Cart icon specifically */
html div.sidenav nav.cart header img.cart-icon,
html div.sidenav nav.cart header .cart-icon,
html div.sidenav nav.cart header [class*="cart-icon"],
html div.sidenav nav.cart header svg,
html div.sidenav nav.cart header svg * {
    opacity: 1 !important;
    filter: brightness(0) invert(1) !important;
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
}


/* Keep checkout text clean in the burgundy header */
html div.sidenav nav.cart header .checkout,
html div.sidenav nav.cart header [class*="checkout"] {
    background: transparent !important;
    background-color: transparent !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    font-weight: 900 !important;
}