/* Reserve a consistent image box so lazy product images don't shift the grid as they load (CLS).
	   object-fit:contain keeps the whole product visible (letterboxed, not cropped). Lives in the theme
	   so every storefront surface (homepage, listing, PDP) gets it from the cached stylesheet. */
	.prodImgTag{ aspect-ratio: 1 / 1; object-fit: contain; }
	.premHomeShell{
		background:
			radial-gradient(circle at top left, rgba(124,58,237,.08), transparent 24%),
			radial-gradient(circle at top right, rgba(236,72,153,.08), transparent 26%),
		min-height:100vh;
	}

	.premPageContainer{
		max-width:1440px;
		margin:0 auto;
		padding:0 20px;
	}

	.premHomeSection{
		padding:34px 0;
	}

	.premSectionHead{
		display:flex;
		align-items:flex-end;
		justify-content:space-between;
		gap:18px;
		flex-wrap:wrap;
		margin-bottom:20px;
	}

	.premSectionEyebrow{
		font-size:12px;
		font-weight:900;
		letter-spacing:.1em;
		text-transform:uppercase;
		color:#7b8190;
		margin-bottom:8px;
	}

	.premSectionTitle{
		font-size:38px;
		line-height:1;
		font-weight:900;
		letter-spacing:-.04em;
		margin:0;
	}

	.premSectionSub{
		font-size:15px;
		line-height:1.65;
		max-width:720px;
		margin-top:10px;
	}

	.premSectionLink{
		display:inline-flex;
		align-items:center;
		gap:8px;
		padding:12px 18px;
		border-radius:999px;
		text-decoration:none !important;
		font-size:14px;
		font-weight:800;
		background:#fff;
		box-shadow:0 10px 24px rgba(0,0,0,.05);
	}

	/* Hero Slider */

/* Hero Slider */
.premHeroSliderWrap{
    padding:20px 0 30px;
}
.premHeroSliderOuter{
    position:relative;
    overflow:hidden;
    border-radius:34px;
    box-shadow:0 26px 70px rgba(15,23,42,.18), inset 0 0 0 1px rgba(255,255,255,.06);
    background:#0b0f1a;
}
.premHeroSliderTrack{
    display:flex;
    width:100%;
    transition:transform .55s ease;
    will-change:transform;
}
.premHeroSlide{
    flex:0 0 100%;
    width:100%;
    max-width:100%;
    position:relative;
    min-height:620px;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    filter:saturate(1.08) contrast(1.04);
}
.premHeroSlideOverlay{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(120% 85% at 78% 32%, rgba(0,0,0,0) 58%, rgba(0,0,0,.14) 100%),
        linear-gradient(0deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 26%);
}
.premHeroSlideContent{
    position:relative;
    z-index:2;
    min-height:620px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    padding:54px;
    max-width:760px;
}
.premHeroEyebrow{
    display:inline-flex;
    align-items:center;
    padding:9px 16px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#fff;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.14);
    backdrop-filter:blur(8px);
    margin-bottom:18px;
}
.premHeroTitle{
    font-size:62px;
    line-height:.94;
    font-weight:900;
    letter-spacing:-.05em;
    color:#fff;
    margin:0 0 18px;
    text-shadow:0 2px 18px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.55);
}
.premHeroDesc{
    font-size:18px;
    line-height:1.7;
    color:rgba(255,255,255,.94);
    max-width:620px;
    margin-bottom:28px;
    text-shadow:0 1px 10px rgba(0,0,0,.55);
}
.premHeroBtn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:16px 26px;
    border-radius:999px;
    color:#fff !important;
    text-decoration:none !important;
    font-size:15px;
    font-weight:800;
    box-shadow:0 16px 30px rgba(0,0,0,.18);
}
.premHeroDots{
    position:absolute;
    left:0;
    right:0;
    bottom:18px;
    z-index:3;
    display:flex;
    justify-content:center;
    gap:10px;
}
.premHeroDot{
    width:12px;
    height:12px;
    border-radius:50%;
    border:0;
    background:rgba(255,255,255,.55);
    cursor:pointer;
    transition:all .2s ease;
    box-shadow:0 1px 5px rgba(0,0,0,.4);
}
.premHeroDot.is-active{
    background:#fff;
    box-shadow:0 0 0 4px rgba(255,255,255,.16);
}
.premHeroArrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:3;
    width:48px;
    height:48px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.3);
    background:rgba(17,24,39,.36);
    color:#fff;
    backdrop-filter:blur(8px);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 20px rgba(0,0,0,.3);
    transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.premHeroArrow:hover{
    background:rgba(17,24,39,.55);
    transform:translateY(-50%) scale(1.06);
    box-shadow:0 10px 26px rgba(0,0,0,.38);
}
.premHeroArrow.left{ left:18px; }
.premHeroArrow.right{ right:18px; }

@media (max-width: 900px){
    .premHeroSlide,
    .premHeroSlideContent{
        min-height:520px;
    }
    .premHeroSlideContent{
        padding:36px 22px;
    }
    .premHeroTitle{
        font-size:42px;
    }
}
@media (max-width: 640px){
    .premHeroTitle{
        font-size:34px;
    }
    .premHeroDesc{
        font-size:15px;
    }
}


/* end hero slider */

	/* Ecom Value Cards */
	.premValueGrid{
		display:grid;
		grid-template-columns:repeat(4, minmax(0,1fr));
		gap:16px;
	}
	.premValueCard{
		border-radius:24px;
		padding:24px 20px;
		text-align:center;
	}
	.premValueIcon{
		width:66px;
		height:66px;
		margin:0 auto 16px;
		border-radius:22px;
		display:flex;
		align-items:center;
		justify-content:center;
		font-size:24px;
		color:#000;
	}
	.premValueTitle{
		font-size:20px;
		font-weight:900;
		letter-spacing:-.03em;
		margin-bottom:8px;
	}
	.premValueText{
		font-size:14px;
		line-height:1.6;
	}

	/* Slider Rails */
	.premRailOuter{
		position:relative;
	}
	.premRailShell{
		width:82%;
		margin:0 auto;
		position:relative;
	}
	.premRailViewport{
		overflow:hidden;
	}
	.premRailTrack{
		display:flex;
		gap:22px;
		will-change:transform;
		transition:transform .35s ease;
		align-items:stretch;
	}
	.premRailItem{
		flex:0 0 calc((100% - 66px) / 4);
		min-width:calc((100% - 66px) / 4);
	}
	.premRailItem .box0{
		height:100%;
		border-radius:22px !important;
		box-shadow:0 16px 34px rgba(15,23,42,.07);
		border:1px solid rgba(0,0,0,.08);
		overflow:hidden;
		background:#fff;
	}
	.premRailArrow{
		position:absolute;
		top:50%;
		transform:translateY(-50%);
		width:48px;
		height:48px;
		border-radius:50%;
		background:#fff;
		cursor:pointer;
		display:flex;
		align-items:center;
		justify-content:center;
		box-shadow:0 12px 24px rgba(0,0,0,.08);
		z-index:2;
	}
	.premRailArrow.left{ left:calc(9% - 18px); }
	.premRailArrow.right{ right:calc(9% - 18px); }

	/* Collection slider */
	.premCollectionItem{
		flex:0 0 calc((100% - 44px) / 3);
		min-width:calc((100% - 44px) / 3);
	}
	.premCollectionCard{
		position:relative;
		display:block;
		min-height:360px;
		border-radius:28px;
		overflow:hidden;
		text-decoration:none !important;
		color:#fff !important;
		background:#dfe3ea;
		box-shadow:0 16px 40px rgba(15,23,42,.08);
	}
	.premCollectionCard img{
		position:absolute;
		inset:0;
		width:100%;
		height:100%;
		object-fit:cover;
		display:block;
	}
	.premCollectionOverlay{
		position:absolute;
		inset:0;
		background:linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.62) 100%);
	}
	.premCollectionContent{
		position:absolute;
		left:0;
		right:0;
		bottom:0;
		z-index:2;
		padding:24px;
	}
	.premCollectionEyebrow{
		font-size:11px;
		font-weight:900;
		letter-spacing:.08em;
		text-transform:uppercase;
		opacity:.86;
		margin-bottom:8px;
	}
	.premCollectionTitle{
		font-size:30px;
		line-height:1;
		font-weight:900;
		letter-spacing:-.04em;
		margin-bottom:10px;
	}
	.premCollectionMeta{
		font-size:14px;
		font-weight:700;
		opacity:.95;
	}

	/* Reviews */
	.premReviewsWrap{
		display:grid;
		grid-template-columns:360px minmax(0,1fr);
		gap:20px;
		align-items:stretch;
	}
	.premReviewsIntro,
	.premReviewsPanel{
		background:#fff;
		border-radius:28px;
		padding:28px;
	}
	.premReviewScore{
		font-size:60px;
		line-height:1;
		font-weight:900;
		letter-spacing:-.06em;
		margin-bottom:10px;
	}
	.premStars{
		display:flex;
		align-items:center;
		gap:6px;
		font-size:18px;
		color:#f59e0b;
		margin-bottom:14px;
	}
	.premReviewSmall{
		font-size:14px;
		line-height:1.6;
	}
	.premReviewGrid{
		display:grid;
		grid-template-columns:repeat(3, minmax(0,1fr));
		gap:16px;
	}
	.premReviewCard{
		background:linear-gradient(180deg,#ffffff 0%, #fafafa 100%);
		border:1px solid rgba(0,0,0,.07);
		border-radius:22px;
		padding:22px;
		height:100%;
	}
	.premReviewQuote{
		font-size:15px;
		line-height:1.75;
		color:#374151;
		margin-bottom:18px;
	}
	.premReviewAuthor{
		font-size:14px;
		font-weight:900;
		color:#111;
	}
	.premReviewRole{
		font-size:12px;
		font-weight:700;
		color:#8b9098;
		margin-top:4px;
	}

	@media (max-width: 1280px){
		.premRailItem{
			flex:0 0 calc((100% - 44px) / 3);
			min-width:calc((100% - 44px) / 3);
		}
	}
	@media (max-width: 1100px){
		.premValueGrid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
		.premReviewsWrap{ grid-template-columns:1fr; }
		.premReviewGrid{ grid-template-columns:1fr 1fr; }
		.premCollectionItem{
			flex:0 0 calc((100% - 22px) / 2);
			min-width:calc((100% - 22px) / 2);
		}
	}
	@media (max-width: 900px){
		.premHeroSlide,
		.premHeroSlideContent{
			min-height:520px;
		}
		.premHeroSlideContent{
			padding:36px 22px;
		}
		.premHeroTitle{
			font-size:42px;
		}
		.premRailShell{
			width:100%;
		}
		.premRailArrow.left{ left:-6px; }
		.premRailArrow.right{ right:-6px; }
		.premRailItem{
			flex:0 0 calc((100% - 22px) / 2);
			min-width:calc((100% - 22px) / 2);
		}
	}
	@media (max-width: 640px){
		.premPageContainer{
			padding:0 14px;
		}
		.premSectionTitle{
			font-size:30px;
		}
		.premHeroTitle{
			font-size:34px;
		}
		.premHeroDesc{
			font-size:15px;
		}
		.premValueGrid,
		.premReviewGrid{
			grid-template-columns:1fr;
		}
		.premCollectionItem,
		.premRailItem{
			flex:0 0 100%;
			min-width:100%;
		}
	}

/* Strong collection rail fix */
.premSliderBlock[data-slider-type="collections"] .premRailViewport{
	width:100%;
	overflow:hidden;
}

.premSliderBlock[data-slider-type="collections"] .premRailTrack{
	display:flex !important;
	align-items:stretch;
	gap:22px;
	width:100%;
}

.premSliderBlock[data-slider-type="collections"] .premCollectionItem{
	display:block !important;
	visibility:visible !important;
	opacity:1 !important;
	flex:0 0 calc((100% - 44px) / 3);
	min-width:calc((100% - 44px) / 3);
	max-width:calc((100% - 44px) / 3);
}

.premSliderBlock[data-slider-type="collections"] .premCollectionCard{
	display:block !important;
	width:100%;
	min-height:360px;
	visibility:visible !important;
	opacity:1 !important;
}

@media (max-width:1100px){
	.premSliderBlock[data-slider-type="collections"] .premCollectionItem{
		flex:0 0 calc((100% - 22px) / 2);
		min-width:calc((100% - 22px) / 2);
		max-width:calc((100% - 22px) / 2);
	}
}

@media (max-width:640px){
	.premSliderBlock[data-slider-type="collections"] .premCollectionItem{
		flex:0 0 100%;
		min-width:100%;
		max-width:100%;
	}
}



  body::before{
    content:"";
    position: fixed;
    inset: 0;
    background: #eee;
    z-index: -1;
    pointer-events: none;
  }

  html, body{
    height:100%;
    background: transparent !important;
  }

  .pusher,
  .pushable > .pusher{
    background: transparent !important;
  }

	.premHomeShell{
		background:#f7f7f7;
	}

	.premPageContainer,
	.premUtilityInner,
	.premHeaderInner,
	.premNavInner{
		/*max-width:1440px;*/
		margin:0 auto;
		padding:0 18px;
	}

	.premUtilityBar{
		background:#1f1f1f;
		color:#fff;
		font-size:13px;
		height:38px;
	}

	.premUtilityInner{
		min-height:38px;
		display:flex;
		align-items:center;
		justify-content:space-between;
		gap:16px;
	}

	.premUtilityLeft,
	.premUtilityRight{
		display:flex;
		align-items:center;
		gap:18px;
		flex-wrap:wrap;
		flex:1 1 0;
		min-width:0;
	}
	.premUtilityLeft{ justify-content:flex-start; }
	.premUtilityRight{ justify-content:flex-end; }
	.premUtilityCenter{
		flex:0 1 auto;
		display:flex;
		align-items:center;
		justify-content:center;
		min-width:0;
		text-align:center;
	}
	.premUtilityPromo{
		font-weight:600;
		letter-spacing:.02em;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
		max-width:100%;
	}
	.premUtilityPhone{ white-space:nowrap; font-weight:600; }
	.premUtilityPhone .premUtilityIcon{ margin-right:6px; }
	.premUtilitySupport{ display:inline-flex; align-items:center; gap:6px; padding:5px 13px; border:1px solid rgba(255,255,255,.3); border-radius:999px; font-weight:700; line-height:1; white-space:nowrap; transition:background .15s ease, border-color .15s ease; }
	.premUtilitySupport:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.5); color:#fff !important; text-decoration:none; }
	.premUtilitySupport .premUtilityIcon{ margin-right:0; }
	@media (max-width:760px){ .premUtilityCenter{ display:none; } }

	.premUtilityBar a{
		color:#fff;
		text-decoration:none;
		opacity:.92;
	}

	.premUtilityBar a:hover{
		opacity:1;
		text-decoration:none;
		color:#38C3FA;
	}

	.premHeader{
		background:#fff;
		border-bottom:1px solid rgba(0,0,0,.08);
	}

	.premHeaderInner{
		min-height:84px;
		display:flex;
		align-items:center;
		gap:18px;
	}

	.premLogoWrap{
		flex:0 0 auto;
		max-width: 200px;
	}
	/* Wordmark fallback when no logo image is set — color inherits from .premHeader *. */
	.premLogoText{
		display:inline-block; font-weight:800; font-size:clamp(16px,4.4vw,22px);
		letter-spacing:-.01em; line-height:1.1; white-space:nowrap;
	}

	.premLogoBox{
		width:252px;
		height:76px;
		border-radius:8px;
		color:#fff;
		font-weight:900;
		letter-spacing:.08em;
		display:flex;
		align-items:center;
		justify-content:center;
		text-decoration:none;
	}

	.premSearchWrap{
		flex:1 1 auto;
		min-width:220px;
	}

	.premSearchForm{
		margin:0;
	}

	.premSearchInputWrap{
		display:flex;
		align-items:center;
		background:#fff;
		border:2px solid #d9d9d9;
		border-radius:999px;
		overflow:hidden;
	}

	.premSearchInput{
		width:100%;
		border:none !important;
		outline:none !important;
		padding:15px 18px;
		font-size:16px;
		background:transparent;
	}

	.premSearchBtn{
		border:none;
		color:#fff;
		width:58px;
		height:52px;
		cursor:pointer;
		font-size:18px;
	}

	.premHeaderActions{
		flex:0 0 auto;
		display:flex;
		align-items:center;
		gap:10px;
	}

	.premHeaderAction{
		min-width:90px;
		height:52px;
		padding:0 14px;
		border-radius:12px;
		text-decoration:none;
		color:#222;
		background:#f6f6f6;
		display:flex;
		align-items:center;
		justify-content:center;
		gap:8px;
		font-weight:800;
	}

	.premCartAction{
		background:#000;
		color:#fff;
		cursor: pointer !important;
	}

	.premNavBar{
		background:#fff;
		border-bottom:1px solid rgba(0,0,0,.08);
		position:relative;
		z-index:30;
	}

	.premNavInner{
		min-height:56px;
		display:flex;
		align-items:center;
		gap:20px;
	}

	.premShopAll{
		position:relative;
		flex:0 0 auto;
	}



	.premShopAllCaret{
		font-size:12px;
		opacity:.9;
	}

	.premTopCats{
		display:flex;
		align-items:center;
		gap:18px;
		flex-wrap:wrap;
		min-width:0;
	}

	.premTopCatLink{
		text-decoration:none;
		color:#222;
		font-weight:800;
		white-space:nowrap;
	}

	.premTopCatLink:hover{
	}

	.premMegaMenu{
		display:none;
		position:absolute;
		top:calc(100% + 10px);
		left:0;
		min-width:320px;
		background:#fff;
		border:1px solid rgba(0,0,0,.1);
		border-radius:16px;
		box-shadow:0 18px 50px rgba(0,0,0,.14);
		padding:10px 0;
	}

	.premShopAll.is-open .premMegaMenu{
		display:block;
	}

	.premMegaColumn{
		min-width:320px;
	}

	.premMegaItem{
		position:relative;
	}

	.premMegaLink{
		display:flex;
		align-items:center;
		justify-content:space-between;
		gap:16px;
		padding:12px 18px;
		text-decoration:none;
		color:#222;
		font-weight:800;
		background:#fff;
		white-space:nowrap;
	}

	.premMegaItem:hover > .premMegaLink{
		background:#f6f8fb;
	}

	.premMegaSubWrap{
		display:none;
		position:absolute;
		top:-10px;
		left:100%;
		padding-left:8px;
	}

	.premMegaItem.hasChildren:hover > .premMegaSubWrap{
		display:block;
	}

	.premMegaSubWrap .premMegaColumn{
		background:#fff;
		border:1px solid rgba(0,0,0,.1);
		border-radius:16px;
		box-shadow:0 18px 50px rgba(0,0,0,.14);
		padding:10px 0;
		/* Long brand/vendor flyouts ran off the bottom of the window with no way to scroll
		   (the panel is anchored near the top). Cap to the viewport and scroll internally. */
		max-height: calc(100vh - 90px);
		overflow-y: auto;
		overflow-x: hidden;
	}

	.premMegaArrow{
		font-size:12px;
		opacity:.7;
	}

	.premHeroPlaceholder{
		padding:28px 0 48px;
	}

	.premPlaceholderCard{
		background:#fff;
		border-radius:18px;
		border:1px solid rgba(0,0,0,.08);
		min-height:160px;
		padding:24px;
	}

	.premHeroCard{
		min-height:240px;
		margin-bottom:20px;
	}

	.premPlaceholderGrid{
		display:grid;
		grid-template-columns:repeat(3, 1fr);
		gap:20px;
	}

	.premPlaceholderTitle{
		font-size:22px;
		font-weight:900;
		margin-bottom:8px;
	}

	.premPlaceholderText{
		opacity:.72;
		line-height:1.55;
		max-width:720px;
	}

	@media (max-width: 980px){
		.premHeaderInner{
			flex-wrap:wrap;
			padding-top:14px;
			padding-bottom:14px;
		}

		.premLogoWrap{
			order:1;
		}

		.premHeaderActions{
			order:2;
			margin-left:auto;
		}

		.premSearchWrap{
			order:3;
			width:100%;
			flex:1 1 100%;
		}

		.premTopCats{
			display:none;
		}

		.premPlaceholderGrid{
			grid-template-columns:1fr;
		}
	}

	@media (max-width: 640px){
		.premUtilityInner{
			padding-top:8px;
			padding-bottom:8px;
			align-items:flex-start;
			flex-direction:column;
		}

		.premHeaderAction{
			min-width:auto;
			padding:0 12px;
			font-size:14px;
		}

		.premLogoBox{
			width:78px;
			height:48px;
			font-size:12px;
		}

		.premSearchInput{
			padding:13px 14px;
			font-size:15px;
		}

		.premSearchBtn{
			width:52px;
			height:48px;
		}

		.premMegaMenu,
		.premMegaColumn{
			min-width:280px;
		}
	}

	.addToCartEcom {
		border-radius:25px !important;
	}

	.vpProductsGrid {}

	.vpProductsGrid .ui.buttons .button:first-child {
		border-top-left-radius:25px !important;
		border-bottom-left-radius:25px !important;
	}
	.vpProductsGrid .ui.buttons .button:last-child {
		border-top-right-radius:25px !important;
		border-bottom-right-radius:25px !important;
	}
	.product_thumb {
		padding:5px !important;
	}
	.product_thumb, .product_thumb a img {
		border-radius: 25px !important;
	}
	.vpCard .ui.corner.label.js-order-menu {
		background-color: #38C3FA !important;
		border:0px !important;
		z-index: inherit !important;
		border-radius: 25px !important;
		top:25px !important;
		right:20px !important;
		cursor:pointer !important;
		border:3px solid black;
	}
	.vpCard .ui.corner.label:hover {
		background-color: #fff !important;
		color:#000 !important;
		border:3px solid yellow;
	}

	.ecomContinueShoppingModalButton, .ecomProceedToCheckoutModalButton {border-radius: 25px !important;}

	.ecomProductOptionsModalButton {margin-top:15px !important;}

	.tpSearch {
		width:100% !important;
		margin-left:none !important;
		position:inherit !important;
		max-width:none !important;
		transform: none !important;
	}


.walmartCartWrap {
    width: 100% !important;
    padding:20px;
    background-color: #f7f7f7 !important;
}

.walmartAddBtn {
    border-radius: 999px !important;
    font-weight: 700 !important;
}

.walmartQtyState {
    border-radius: 999px !important;
    overflow: hidden;
}

.walmartQtyState .button {
    border-radius: 0 !important;
}

.walmartQtyState .qtynumber {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.walmartQtyState input.qty {
    font-weight: 700 !important;
    font-size: 16px !important;
}




.walmartCartWrap {
    width: 100%;
    position: relative;
}

.walmartCartWrap.loading {
    opacity: .7;
    pointer-events: none;
}

.walmartAddBtn {
    border-radius: 999px !important;
    font-weight: 700 !important;
}

.walmartQtyState {
    border-radius: 999px !important;
    overflow: hidden;
    align-items: stretch !important;
}

.walmartQtyState .button {
    border-radius: 0 !important;
}

.walmartQtyState .qtynumber {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.walmartQtyState input.qty {
    font-weight: 700 !important;
    font-size: 16px !important;
}

#cart_badge_container[style*="display: none"] {
    display: none !important;
}


.premTitle {
	text-align: center !important;
	font-size:22px;
	font-weight:900;
	margin-bottom:8px;
}


  .vpShell{
    background:#f7f7f7;
  }

  .vpPageContainer,
  .vpUtilityInner,
  .vpHeaderInner,
  .vpNavInner{
  	    	max-width:1440px;
        margin:0 auto;
    padding:0 18px;
  }

  .vpUtilityBar{
    background:#1f1f1f;
    color:#fff;
    font-size:13px;
  }

  .vpUtilityInner{
    min-height:38px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }

  .vpUtilityLeft,
  .vpUtilityRight{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
  }

  .vpUtilityBar a{
    color:#fff;
    text-decoration:none;
    opacity:.92;
  }

  .vpUtilityBar a:hover{
    opacity:1;
    text-decoration:underline;
  }

  .vpHeader{
    background:#fff;
    border-bottom:1px solid rgba(0,0,0,.08);
  }

  .vpHeaderInner{
    min-height:84px;
    display:flex;
    align-items:center;
    gap:18px;
  }

  .vpLogoWrap{ flex:0 0 auto; }

  .vpLogoBox{
    width:92px;
    height:56px;
    border-radius:8px;
    background:#ff6600;
    color:#fff;
    font-weight:900;
    letter-spacing:.08em;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
  }

  .vpSearchWrap{
    flex:1 1 auto;
    min-width:220px;
  }

  .vpSearchForm{ margin:0; }

  .vpSearchInputWrap{
    display:flex;
    align-items:center;
    background:#fff;
    border:2px solid #d9d9d9;
    border-radius:999px;
    overflow:hidden;
  }

  .vpSearchInput{
    width:100%;
    border:none !important;
    outline:none !important;
    padding:15px 18px;
    font-size:16px;
    background:transparent;
  }

  .vpSearchBtn{
    border:none;
    background:#ff6600;
    color:#fff;
    width:58px;
    height:52px;
    cursor:pointer;
    font-size:18px;
  }

  .vpHeaderActions{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:10px;
  }

  .vpHeaderAction{
    min-width:90px;
    height:52px;
    padding:0 14px;
    border-radius:12px;
    text-decoration:none;
    color:#222;
    background:#f6f6f6;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-weight:800;
  }

  .vpCartAction{
    background:#fff3eb;
    color:#c65000;
    border:1px solid rgba(198,80,0,.14);
  }

  .vpNavBar{
    background:#fff;
    border-bottom:1px solid rgba(0,0,0,.08);
    position:relative;
    z-index:30;
  }

  .vpNavInner{
    min-height:56px;
    display:flex;
    align-items:center;
    gap:20px;
  }

  .vpShopAll{
    position:relative;
    flex:0 0 auto;
  }

  .vpShopAllBtn{
    height:42px;
    padding:0 16px;
    border:none;
    border-radius:999px;
    background:#004990;
    color:#fff;
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:900;
    cursor:pointer;
  }

  .vpShopAllCaret{
    font-size:12px;
    opacity:.9;
  }

  .vpTopCats{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
    min-width:0;
  }

  .vpTopCatLink{
    text-decoration:none;
    color:#222;
    font-weight:800;
    white-space:nowrap;
  }

  .vpTopCatLink:hover{
    color:#004990;
  }

  .vpMegaMenu{
    display:none;
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    min-width:320px;
    background:#fff;
    border:1px solid rgba(0,0,0,.1);
    border-radius:16px;
    box-shadow:0 18px 50px rgba(0,0,0,.14);
    padding:10px 0;
  }

  .vpShopAll.is-open .vpMegaMenu{ display:block; }

  .vpMegaColumn{ min-width:320px; }

  .vpMegaItem{ position:relative; }

  .vpMegaLink{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:12px 18px;
    text-decoration:none;
    color:#222;
    font-weight:800;
    background:#fff;
    white-space:nowrap;
  }

  .vpMegaItem:hover > .vpMegaLink{
    background:#f6f8fb;
    color:#004990;
  }

  .vpMegaSubWrap{
    display:none;
    position:absolute;
    top:-10px;
    left:100%;
    padding-left:8px;
  }

  .vpMegaItem.hasChildren:hover > .vpMegaSubWrap{ display:block; }

  .vpMegaSubWrap .vpMegaColumn{
    background:#fff;
    border:1px solid rgba(0,0,0,.1);
    border-radius:16px;
    box-shadow:0 18px 50px rgba(0,0,0,.14);
    padding:10px 0;
  }

  .vpMegaArrow{
    font-size:12px;
    opacity:.7;
  }

  .vpBrowseWrap{
    padding:8px 0 48px;
  }

  .vpBrowseLayout{
    display:flex;
    gap:28px;
    align-items:flex-start;
  }

  .vpSidebar{
    width:280px;
    flex:0 0 280px;
    position:sticky;
    top:18px;
  }

  .vpSidebarCard{
    background:#fff;
    border-radius:18px;
    padding:16px;
    box-shadow:0 18px 40px rgba(0,0,0,.08);
    border:1px solid rgba(0,0,0,.06);
  }

  .vpProductsMain{
    flex:1 1 auto;
    min-width:0;
  }

  .vpProductsGrid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:18px;
  }

  .vpSideTree{ margin-top:8px; }

  .vpSideNode.depth1 .vpCatLink{ padding-left:18px; }
  .vpSideNode.depth2 .vpCatLink{ padding-left:30px; }
  .vpSideNode.depth3 .vpCatLink{ padding-left:42px; }
  .vpSideNode.depth4 .vpCatLink{ padding-left:54px; }
  .vpSideNode.depth5 .vpCatLink{ padding-left:66px; }

  .vpSubTree{ margin-top:4px; }

  .vpCatLink{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 10px;
    border-radius:14px;
    text-decoration:none !important;
    color:#111827 !important;
    font-weight:700;
    transition:transform .14s ease, background .14s ease, box-shadow .14s ease, opacity .14s ease;
    margin-bottom:4px;
  }

  .vpCatLink:hover{
    transform:translateY(-1px);
    background:rgba(0,0,0,.04);
  }

  .vpCatLink.is-active{
    background:linear-gradient(135deg, #0ea5e9, #7c3aed);
    color:#fff !important;
  }

  .vpCatCount{
    font-size:12px;
    font-weight:900;
    padding:4px 10px;
    border-radius:999px;
    background:rgba(0,0,0,.06);
    opacity:.9;
    white-space:nowrap;
  }

  .vpCatLink.is-active .vpCatCount{
    background:rgba(255,255,255,.22);
    color:#fff;
  }

  .vpItem{ min-width:260px; }

  .vpCard{
    display:block;
    background:#fff;
    border-radius:18px;
    padding:14px;
    text-decoration:none !important;
    color:#111827;
    box-shadow:0 18px 40px rgba(0,0,0,.08);
    border:1px solid rgba(0,0,0,.06);
    height:100%;
  }

  .vpImg{
    position:relative;
  }

  .vpImg img{
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:14px;
    display:block;
  }

  .vpBadge{
    position:absolute;
    top:10px;
    left:10px;
    z-index:2;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(17,24,39,.86);
    color:#fff;
    font-size:12px;
    font-weight:900;
  }

  .vpMeta{ padding-top:12px; }

  .vpTitle{
    font-weight:900;
    font-size:16px;
    line-height:1.35;
    margin-bottom:8px;
  }

  .vpPriceRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }

  .vpDept{
    font-size:13px;
    color:#6b7280;
  }

  .vpPrice{
    font-weight:900;
    font-size:18px;
    color:#111827;
  }

  .jsOwnerGuide {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 18px 18px;
    background: linear-gradient(135deg, #7c3aed, #22c55e, #0ea5e9);
    color: #fff;
    box-shadow: 0 20px 50px rgba(0,0,0,.18);
    animation: jsOwnerIn .7s ease-out both;
  }
  .jsOwnerGuide::before,
  .jsOwnerGuide::after{
    content:"";
    position:absolute;
    border-radius:999px;
    background: rgba(255,255,255,.14);
    filter: blur(.2px);
    animation: jsOwnerFloat 7.5s ease-in-out infinite;
    pointer-events:none;
  }
  .jsOwnerGuide::before{ width:180px; height:180px; top:-70px; right:-60px; }
  .jsOwnerGuide::after{ width:120px; height:120px; bottom:-55px; left:-45px; animation-delay:2.6s; }
  .jsOwnerRow{ display:flex; align-items:center; gap:14px; }
  .jsOwnerIcon{
    width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center;
    background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); flex: 0 0 auto; backdrop-filter: blur(6px);
  }
  .jsOwnerTitle{ font-weight:800; letter-spacing:-.2px; font-size:16px; margin:0; line-height:1.2; }
  .jsOwnerSub{ margin:3px 0 0 0; font-size:13px; opacity:.95; line-height:1.35; }
  .jsOwnerActions{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
  .jsOwnerBtn{
    display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:10px 14px; font-weight:700; font-size:13px;
    text-decoration:none !important; transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; user-select:none;
  }
  .jsOwnerBtn.primary{ background: #fff; color:#111827 !important; box-shadow: 0 10px 22px rgba(0,0,0,.18); }
  .jsOwnerBtn.ghost{
    background: rgba(255,255,255,.16); color:#fff !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); backdrop-filter: blur(6px);
  }
  .jsOwnerBtn:hover{ transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0,0,0,.22); }
  .jsOwnerHint{ margin-top:10px; font-size:12px; opacity:.9; }
  @keyframes jsOwnerFloat{ 0%{ transform: translateY(0); } 50%{ transform: translateY(16px); } 100%{ transform: translateY(0); } }
  @keyframes jsOwnerIn{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform: translateY(0); } }

  @media(max-width: 1200px){
    .vpBrowseLayout{
      flex-direction:column;
    }
    .vpSidebar{
      width:100%;
      flex:1 1 auto;
      position:relative;
      top:auto;
    }
  }

  @media (max-width: 980px){
    .vpHeaderInner{
      flex-wrap:wrap;
      padding-top:14px;
      padding-bottom:14px;
    }

    .vpLogoWrap{ order:1; }
    .vpHeaderActions{ order:2; margin-left:auto; }
    .vpSearchWrap{ order:3; width:100%; flex:1 1 100%; }
    .vpTopCats{ display:none; }
  }

  @media (max-width: 640px){
    .vpUtilityInner{
      padding-top:8px;
      padding-bottom:8px;
      align-items:flex-start;
      flex-direction:column;
    }

    .vpHeaderAction{
      min-width:auto;
      padding:0 12px;
      font-size:14px;
    }

    .vpLogoBox{
      width:78px;
      height:48px;
      font-size:12px;
    }

    .vpSearchInput{
      padding:13px 14px;
      font-size:15px;
    }

    .vpSearchBtn{
      width:52px;
      height:48px;
    }

    .vpMegaMenu,
    .vpMegaColumn{
      min-width:280px;
    }

    .vpProductsGrid{
      grid-template-columns:1fr 1fr;
      gap:12px;
    }

    .vpCard{
      padding:10px;
      border-radius:14px;
    }

    .vpImg img{
      height:160px;
      border-radius:10px;
    }

    .vpTitle{
      font-size:14px;
    }

    .vpPrice{
      font-size:16px;
    }
  }

  @media (max-width: 420px){
    .vpProductsGrid{
      grid-template-columns:1fr;
    }
  }

  .premUtilityIcon {
  	padding-right:5px;
  }


  body::before{
    content:"";
    position: fixed;
    inset: 0;
    background: #eee;
    z-index: -1;
    pointer-events: none;
  }

  html, body{
    height:100%;
    background: transparent !important;
  }


  .pusher,
  .pushable > .pusher{
    background: transparent !important;
  }

	.premHomeShell{
		background:#f7f7f7;
	}

	.premPageContainer,
	.premUtilityInner,
	.premHeaderInner,
	.premNavInner{
					max-width:1440px; 
				margin:0 auto;
		padding:0 18px;
	}
	.jellySellyMenuLinkOutput, .ui.sidebar.menu .item.jellySellyMenuLinkOutput {
		background-color:#222 !important;
		border-radius: 20px !important;
		max-width:98% !important;
		text-decoration: none !important;
		font-size:14px !important;
		margin-bottom:5px !important;
	}

	.jellySellyMenuLinkOutput:hover, .ui.sidebar.menu .item.jellySellyMenuLinkOutput:hover {
		background-color: #2581a5 !important;
	}
	.premUtilityBar{
		background:#1f1f1f;
		color:#fff;
		font-size:13px;
		height:40px;
	}

	.premUtilityInner{
		min-height:38px;
		display:flex;
		align-items:center;
		justify-content:space-between;
		gap:16px;
	}

	.premUtilityLeft,
	.premUtilityRight{
		display:flex;
		align-items:center;
		gap:18px;
		flex-wrap:wrap;
		flex:1 1 0;
		min-width:0;
	}
	.premUtilityLeft{ justify-content:flex-start; }
	.premUtilityRight{ justify-content:flex-end; }
	.premUtilityCenter{
		flex:0 1 auto;
		display:flex;
		align-items:center;
		justify-content:center;
		min-width:0;
		text-align:center;
	}
	.premUtilityPromo{
		font-weight:600;
		letter-spacing:.02em;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
		max-width:100%;
	}
	.premUtilityPhone{ white-space:nowrap; font-weight:600; }
	.premUtilityPhone .premUtilityIcon{ margin-right:6px; }
	.premUtilitySupport{ display:inline-flex; align-items:center; gap:6px; padding:5px 13px; border:1px solid rgba(255,255,255,.3); border-radius:999px; font-weight:700; line-height:1; white-space:nowrap; transition:background .15s ease, border-color .15s ease; }
	.premUtilitySupport:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.5); color:#fff !important; text-decoration:none; }
	.premUtilitySupport .premUtilityIcon{ margin-right:0; }
	@media (max-width:760px){ .premUtilityCenter{ display:none; } }

	.premUtilityBar a{
		color:#fff;
		text-decoration:none;
		opacity:.92;
	}

	.premUtilityBar a:hover{
		opacity:1;
		text-decoration:underline;
	}

	.premHeader{
		background:#fff;
		border-bottom:1px solid rgba(0,0,0,.08);
	}

	.premHeaderInner{
		min-height:84px;
		display:flex;
		align-items:center;
		gap:18px;
	}

	.premLogoWrap{
		flex:0 0 auto;
		max-width:220px;
		max-height:66px;
		display:flex;
		align-items:center;
	}

	/* Homepage/storefront logo: constrain ANY uploaded logo so tall, wide, or
	   oddly-proportioned images always fit the header band cleanly without
	   stretching it. Aspect ratio is preserved; the logo scales to fit. */
	.premLogoWrap a{
		display:inline-flex;
		align-items:center;
		max-width:100%;
		max-height:66px;
		line-height:0;
	}
	.premLogoWrap img,
	.premLogoWrap .ui.image{
		max-width:100% !important;
		max-height:66px !important;
		width:auto !important;
		height:auto !important;
		object-fit:contain !important;
		display:block !important;
		margin:0 !important;
	}

	.premLogoBox{
		width:252px;
		height:76px;
		border-radius:8px;
		color:#fff;
		font-weight:900;
		letter-spacing:.08em;
		display:flex;
		align-items:center;
		justify-content:center;
		text-decoration:none;
	}

	.premSearchWrap{
		flex:1 1 auto;
		min-width:220px;
	}

	.premSearchForm{
		margin:0;
	}

	.premSearchInputWrap{
		display:flex;
		align-items:center;
		background:#fff;
		border:2px solid #d9d9d9;
		border-radius:999px;
		overflow:hidden;
	}

	.premSearchInput{
		width:100%;
		border:none !important;
		outline:none !important;
		padding:15px 18px;
		font-size:16px;
		background:transparent;
	}

	.premSearchBtn{
		border:none;
		color:#fff;
		width:58px;
		height:52px;
		cursor:pointer;
		font-size:18px;
	}

	.premHeaderActions{
		flex:0 0 auto;
		display:flex;
		align-items:center;
		gap:10px;
	}

	.premHeaderAction{
		min-width:90px;
		height:52px;
		padding:0 14px;
		border-radius:12px;
		text-decoration:none;
		color:#222;
		background:#f6f6f6;
		display:flex;
		align-items:center;
		justify-content:center;
		gap:8px;
		font-weight:800;
	}

	.premCartAction{
		background:#000;
		color:#fff;
		cursor: pointer !important;
	}
	#auth-top-menu {
		box-shadow: none !important;
	}

	.premNavBar{
		background:#fff;
		border-bottom:2px solid #666;
		position:relative;
		z-index:30;
	}

	.premNavInner{
		min-height:56px;
		display:flex;
		align-items:center;
		gap:20px;
	}

	.premShopAll{
		position:relative;
		flex:0 0 auto;
	}

	.premShopAllBtn{
		height:42px;
		padding:0 16px;
		border:none;
		border-radius:999px;
		color:#fff;
		display:flex;
		align-items:center;
		gap:10px;
		font-weight:900;
		cursor:pointer;
		background-color: #333 !important;
	}

	.premShopAllCaret{
		font-size:12px;
		opacity:.9;
	}

	.premTopCats{
		display:flex;
		align-items:center;
		gap:18px;
		flex-wrap:wrap;
		min-width:0;
	}

	.premTopCatLink{
		text-decoration:none;
		color:#222;
		font-weight:800;
		white-space:nowrap;
		font-family:'Roboto Condensed', sans-serif !important;
	}

	.premTopCatLink:hover{
	}

	.premMegaMenu{
		display:none;
		position:absolute;
		top:calc(100% + 10px);
		left:0;
		min-width:220px;
		background:#fff;
		border:1px solid rgba(0,0,0,.1);
		border-radius:16px;
		box-shadow:0 18px 50px rgba(0,0,0,.14);
		padding:10px 0;
	}

	.premShopAll.is-open .premMegaMenu{
		display:block;
	}

	.premMegaColumn{
		min-width:200px;
	}

	.premMegaItem{
		position:relative;
	}

	.premMegaLink{
		display:flex;
		align-items:center;
		justify-content:space-between;
		gap:16px;
		padding:12px 18px;
		text-decoration:none;
		color:#222;
		font-weight:800;
		background:#fff;
		white-space:nowrap;
		font-family:'Roboto Condensed', sans-serif !important;
	}

	.premMegaItem:hover > .premMegaLink{
		background:#f6f8fb;
	}

	.premMegaSubWrap{
		display:none;
		position:absolute;
		top:-10px;
		left:100%;
		padding-left:8px;
	}

	.premMegaItem.hasChildren:hover > .premMegaSubWrap{
		display:block;
	}

	.premMegaSubWrap .premMegaColumn{
		background:#fff;
		border:1px solid rgba(0,0,0,.1);
		border-radius:16px;
		box-shadow:0 18px 50px rgba(0,0,0,.14);
		padding:10px 0;
		/* Long brand/vendor flyouts ran off the bottom of the window with no way to scroll
		   (the panel is anchored near the top). Cap to the viewport and scroll internally. */
		max-height: calc(100vh - 90px);
		overflow-y: auto;
		overflow-x: hidden;
	}

	.premMegaArrow{
		font-size:12px;
		opacity:.7;
	}

	.premHeroPlaceholder{
		padding:28px 0 48px;
	}

	.premPlaceholderCard{
		background:#fff;
		border-radius:18px;
		border:1px solid rgba(0,0,0,.08);
		min-height:160px;
		padding:24px;
	}

	.premHeroCard{
		min-height:240px;
		margin-bottom:20px;
	}

	.premPlaceholderGrid{
		display:grid;
		grid-template-columns:repeat(3, 1fr);
		gap:20px;
	}

	.premPlaceholderTitle{
		font-size:22px;
		font-weight:900;
		margin-bottom:8px;
	}

	.premPlaceholderText{
		opacity:.72;
		line-height:1.55;
		max-width:720px;
	}

	@media (max-width: 980px){
		.premHeaderInner{
			flex-wrap:wrap;
			padding-top:14px;
			padding-bottom:14px;
		}

		.premLogoWrap{
			order:1;
		}

		.premHeaderActions{
			order:2;
			margin-left:auto;
		}

		.premSearchWrap{
			order:3;
			width:100%;
			flex:1 1 100%;
		}

		.premTopCats{
			display:none;
		}

		.premPlaceholderGrid{
			grid-template-columns:1fr;
		}
	}

	@media (max-width: 640px){
		.premUtilityInner{
			padding-top:8px;
			padding-bottom:8px;
			align-items:flex-start;
			flex-direction:column;
		}

		.premHeaderAction{
			min-width:auto;
			padding:0 12px;
			font-size:14px;
		}

		.premLogoBox{
			width:78px;
			height:48px;
			font-size:12px;
		}

		.premSearchInput{
			padding:13px 14px;
			font-size:15px;
		}

		.premSearchBtn{
			width:52px;
			height:48px;
		}

		.premMegaMenu,
		.premMegaColumn{
			min-width:280px;
		}
	}

	.addToCartEcom {
		border-radius:25px !important;
	}
	.roundEcomButton {
		border-radius:25px !important;
	}
	.vpProductsGrid {}

	.vpProductsGrid .ui.buttons .button:first-child {
		border-top-left-radius:25px !important;
		border-bottom-left-radius:25px !important;
	}
	.vpProductsGrid .ui.buttons .button:last-child {
		border-top-right-radius:25px !important;
		border-bottom-right-radius:25px !important;
	}
	.product_thumb {
		padding:5px !important;
	}
	.product_thumb, .product_thumb a img {
		border-radius: 25px !important;
	}

	.ecomContinueShoppingModalButton, .ecomProceedToCheckoutModalButton {border-radius: 25px !important;}

	.ecomProductOptionsModalButton {margin-top:15px !important;}

	.tpSearch {
		width:100% !important;
		margin-left:none !important;
		position:inherit !important;
		max-width:none !important;
		transform: none !important;
	}


.walmartCartWrap {
    width: 100% !important;
    padding:20px;
    background-color: #f7f7f7 !important;
}

.walmartAddBtn {
    border-radius: 999px !important;
    font-weight: 700 !important;
}

.walmartQtyState {
    border-radius: 999px !important;
    overflow: hidden;
}

.walmartQtyState .button {
    border-radius: 0 !important;
}

.walmartQtyState .qtynumber {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.walmartQtyState input.qty {
    font-weight: 700 !important;
    font-size: 16px !important;
}




.walmartCartWrap {
    width: 100%;
    position: relative;
}

.walmartCartWrap.loading {
    opacity: .7;
    pointer-events: none;
}

.walmartAddBtn {
    border-radius: 999px !important;
    font-weight: 700 !important;
}

.walmartQtyState {
    border-radius: 999px !important;
    overflow: hidden;
    align-items: stretch !important;
}

.walmartQtyState .button {
    border-radius: 0 !important;
}

.walmartQtyState .qtynumber {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.walmartQtyState input.qty {
    font-weight: 700 !important;
    font-size: 16px !important;
}

#cart_badge_container[style*="display: none"] {
    display: none !important;
}

.ecomWrapTopLink {
	color:#fff !important;
}
.ecomWrapTopLink:hover {
	text-decoration: none !important;
	color:#7ddbff !important;
}

.ecomSegment {
	border-radius: 25px !important;
}
.ecomSegmentMaxWidth {
	max-width:1440px;
	margin-left:auto !important;
	margin-right: auto !important;
}
  .vpShell{
    background:#f7f7f7;
  }

  .vpPageContainer,
  .vpUtilityInner,
  .vpHeaderInner,
  .vpNavInner{
  	    	max-width:1440px;
        margin:0 auto;
    padding:0 18px;
  }

  .vpUtilityBar{
    background:#1f1f1f;
    color:#fff;
    font-size:13px;
  }

  .vpUtilityInner{
    min-height:38px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }

  .vpUtilityLeft,
  .vpUtilityRight{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
  }

  .vpUtilityBar a{
    color:#fff;
    text-decoration:none;
    opacity:.92;
  }

  .vpUtilityBar a:hover{
    opacity:1;
    text-decoration:underline;
  }

  .vpHeader{
    background:#fff;
    border-bottom:1px solid rgba(0,0,0,.08);
  }

  .vpHeaderInner{
    min-height:84px;
    display:flex;
    align-items:center;
    gap:18px;
  }

  .vpLogoWrap{ flex:0 0 auto; }

  .vpLogoBox{
    width:92px;
    height:56px;
    border-radius:8px;
    background:#ff6600;
    color:#fff;
    font-weight:900;
    letter-spacing:.08em;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
  }

  .vpSearchWrap{
    flex:1 1 auto;
    min-width:220px;
  }

  .vpSearchForm{ margin:0; }

  .vpSearchInputWrap{
    display:flex;
    align-items:center;
    background:#fff;
    border:2px solid #d9d9d9;
    border-radius:999px;
    overflow:hidden;
  }

  .vpSearchInput{
    width:100%;
    border:none !important;
    outline:none !important;
    padding:15px 18px;
    font-size:16px;
    background:transparent;
  }

  .vpSearchBtn{
    border:none;
    background:#ff6600;
    color:#fff;
    width:58px;
    height:52px;
    cursor:pointer;
    font-size:18px;
  }

  .vpHeaderActions{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:10px;
  }

  .vpHeaderAction{
    min-width:90px;
    height:52px;
    padding:0 14px;
    border-radius:12px;
    text-decoration:none;
    color:#222;
    background:#f6f6f6;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-weight:800;
  }

  .vpCartAction{
    background:#fff3eb;
    color:#c65000;
    border:1px solid rgba(198,80,0,.14);
  }

  .vpNavBar{
    background:#fff;
    border-bottom:1px solid rgba(0,0,0,.08);
    position:relative;
    z-index:30;
  }

  .vpNavInner{
    min-height:56px;
    display:flex;
    align-items:center;
    gap:20px;
  }

  .vpShopAll{
    position:relative;
    flex:0 0 auto;
  }

  .vpShopAllBtn{
    height:42px;
    padding:0 16px;
    border:none;
    border-radius:999px;
    background:#004990;
    color:#fff;
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:900;
    cursor:pointer;
  }

  .vpShopAllCaret{
    font-size:12px;
    opacity:.9;
  }

  .vpTopCats{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
    min-width:0;
  }

  .vpTopCatLink{
    text-decoration:none;
    color:#222;
    font-weight:800;
    white-space:nowrap;
  }

  .vpTopCatLink:hover{
    color:#004990;
  }

  .vpMegaMenu{
    display:none;
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    min-width:320px;
    background:#fff;
    border:1px solid rgba(0,0,0,.1);
    border-radius:16px;
    box-shadow:0 18px 50px rgba(0,0,0,.14);
    padding:10px 0;
  }

  .vpShopAll.is-open .vpMegaMenu{ display:block; }

  .vpMegaColumn{ min-width:320px; }

  .vpMegaItem{ position:relative; }

  .vpMegaLink{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:12px 18px;
    text-decoration:none;
    color:#222;
    font-weight:800;
    background:#fff;
    white-space:nowrap;
  }

  .vpMegaItem:hover > .vpMegaLink{
    background:#f6f8fb;
    color:#004990;
  }

  .vpMegaSubWrap{
    display:none;
    position:absolute;
    top:-10px;
    left:100%;
    padding-left:8px;
  }

  .vpMegaItem.hasChildren:hover > .vpMegaSubWrap{ display:block; }

  .vpMegaSubWrap .vpMegaColumn{
    background:#fff;
    border:1px solid rgba(0,0,0,.1);
    border-radius:16px;
    box-shadow:0 18px 50px rgba(0,0,0,.14);
    padding:10px 0;
  }

  .vpMegaArrow{
    font-size:12px;
    opacity:.7;
  }

  .vpBrowseWrap{
    padding:8px 0 48px;
  }

  .vpBrowseLayout{
    display:flex;
    gap:28px;
    align-items:flex-start;
  }

  .vpSidebar{
    width:280px;
    flex:0 0 280px;
    position:sticky;
    top:18px;
  }

  .vpSidebarCard{
    background:#fff;
    border-radius:18px;
    padding:16px;
    box-shadow:0 18px 40px rgba(0,0,0,.08);
    border:1px solid rgba(0,0,0,.06);
  }

  .vpProductsMain{
    flex:1 1 auto;
    min-width:0;
  }

  .vpProductsGrid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:18px;
  }

  .vpSideTree{ margin-top:8px; }

  .vpSideNode.depth1 .vpCatLink{ padding-left:18px; }
  .vpSideNode.depth2 .vpCatLink{ padding-left:30px; }
  .vpSideNode.depth3 .vpCatLink{ padding-left:42px; }
  .vpSideNode.depth4 .vpCatLink{ padding-left:54px; }
  .vpSideNode.depth5 .vpCatLink{ padding-left:66px; }

  .vpSubTree{ margin-top:4px; }

  .vpCatLink{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 10px;
    border-radius:14px;
    text-decoration:none !important;
    color:#111827 !important;
    font-weight:700;
    transition:transform .14s ease, background .14s ease, box-shadow .14s ease, opacity .14s ease;
    margin-bottom:4px;
  }

  .vpCatLink:hover{
    transform:translateY(-1px);
    background:rgba(0,0,0,.04);
  }

  .vpCatLink.is-active{
    background:linear-gradient(135deg, #0ea5e9, #7c3aed);
    color:#fff !important;
  }

  .vpCatCount{
    font-size:12px;
    font-weight:900;
    padding:4px 10px;
    border-radius:999px;
    background:rgba(0,0,0,.06);
    opacity:.9;
    white-space:nowrap;
  }

  .vpCatLink.is-active .vpCatCount{
    background:rgba(255,255,255,.22);
    color:#fff;
  }

  .vpItem{ min-width:260px; }

  .vpCard{
    display:block;
    background:#fff;
    border-radius:18px;
    padding:14px;
    text-decoration:none !important;
    color:#111827;
    box-shadow:0 18px 40px rgba(0,0,0,.08);
    border:1px solid rgba(0,0,0,.06);
    height:100%;
  }

  .vpImg{
    position:relative;
  }

  .vpImg img{
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:14px;
    display:block;
  }

  .vpBadge{
    position:absolute;
    top:10px;
    left:10px;
    z-index:2;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(17,24,39,.86);
    color:#fff;
    font-size:12px;
    font-weight:900;
  }

  .vpMeta{ padding-top:12px; }

  .vpTitle{
    font-weight:900;
    font-size:16px;
    line-height:1.35;
    margin-bottom:8px;
  }

  .vpPriceRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }

  .vpDept{
    font-size:13px;
    color:#6b7280;
  }

  .vpPrice{
    font-weight:900;
    font-size:18px;
    color:#111827;
  }

  .jsOwnerGuide {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 18px 18px;
    background: linear-gradient(135deg, #7c3aed, #22c55e, #0ea5e9);
    color: #fff;
    box-shadow: 0 20px 50px rgba(0,0,0,.18);
    animation: jsOwnerIn .7s ease-out both;
  }
  .jsOwnerGuide::before,
  .jsOwnerGuide::after{
    content:"";
    position:absolute;
    border-radius:999px;
    background: rgba(255,255,255,.14);
    filter: blur(.2px);
    animation: jsOwnerFloat 7.5s ease-in-out infinite;
    pointer-events:none;
  }
  .jsOwnerGuide::before{ width:180px; height:180px; top:-70px; right:-60px; }
  .jsOwnerGuide::after{ width:120px; height:120px; bottom:-55px; left:-45px; animation-delay:2.6s; }
  .jsOwnerRow{ display:flex; align-items:center; gap:14px; }
  .jsOwnerIcon{
    width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center;
    background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); flex: 0 0 auto; backdrop-filter: blur(6px);
  }
  .jsOwnerTitle{ font-weight:800; letter-spacing:-.2px; font-size:16px; margin:0; line-height:1.2; }
  .jsOwnerSub{ margin:3px 0 0 0; font-size:13px; opacity:.95; line-height:1.35; }
  .jsOwnerActions{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
  .jsOwnerBtn{
    display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:10px 14px; font-weight:700; font-size:13px;
    text-decoration:none !important; transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; user-select:none;
  }
  .jsOwnerBtn.primary{ background: #fff; color:#111827 !important; box-shadow: 0 10px 22px rgba(0,0,0,.18); }
  .jsOwnerBtn.ghost{
    background: rgba(255,255,255,.16); color:#fff !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); backdrop-filter: blur(6px);
  }
  .jsOwnerBtn:hover{ transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0,0,0,.22); }
  .jsOwnerHint{ margin-top:10px; font-size:12px; opacity:.9; }
  @keyframes jsOwnerFloat{ 0%{ transform: translateY(0); } 50%{ transform: translateY(16px); } 100%{ transform: translateY(0); } }
  @keyframes jsOwnerIn{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform: translateY(0); } }

  @media(max-width: 1200px){
    .vpBrowseLayout{
      flex-direction:column;
    }
    .vpSidebar{
      width:100%;
      flex:1 1 auto;
      position:relative;
      top:auto;
    }
  }

  @media (max-width: 980px){
    .vpHeaderInner{
      flex-wrap:wrap;
      padding-top:14px;
      padding-bottom:14px;
    }

    .vpLogoWrap{ order:1; }
    .vpHeaderActions{ order:2; margin-left:auto; }
    .vpSearchWrap{ order:3; width:100%; flex:1 1 100%; }
    .vpTopCats{ display:none; }
  }

  @media (max-width: 640px){
    .vpUtilityInner{
      padding-top:8px;
      padding-bottom:8px;
      align-items:flex-start;
      flex-direction:column;
    }

    .vpHeaderAction{
      min-width:auto;
      padding:0 12px;
      font-size:14px;
    }

    .vpLogoBox{
      width:78px;
      height:48px;
      font-size:12px;
    }

    .vpSearchInput{
      padding:13px 14px;
      font-size:15px;
    }

    .vpSearchBtn{
      width:52px;
      height:48px;
    }

    .vpMegaMenu,
    .vpMegaColumn{
      min-width:280px;
    }

    .vpProductsGrid{
      grid-template-columns:1fr 1fr;
      gap:12px;
    }

    .vpCard{
      padding:10px;
      border-radius:14px;
    }

    .vpImg img{
      height:160px;
      border-radius:10px;
    }

    .vpTitle{
      font-size:14px;
    }

    .vpPrice{
      font-size:16px;
    }
  }

  @media (max-width: 420px){
    .vpProductsGrid{
      grid-template-columns:1fr;
    }
  }

  
  .premShopAllBtn{ transition:transform .16s ease, box-shadow .16s ease !important; }
  .premShopAllBtn:hover {
  	background-color: var(--ecm-brand) !important; /* no color shift — animate instead */
  	transform: translateY(-2px);
  	box-shadow: 0 9px 20px rgba(8,20,16,.24);
  }
  .premShopAllBtn:hover .premShopAllCaret{ transform: translateY(2px); }
  .premShopAllCaret{ transition: transform .16s ease; }
  .premTopCatLink:hover, .premMegaLink:hover{
  	color: var(--ecm-brand) !important;
  }


.premEmptyShopMessage{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	min-height:44px;
	padding:10px 16px;
	border-radius:10px;
	font-size:14px;
	font-weight:600;
	color:#000 !important;
	background:rgba(255,255,255,0.08);
	text-align:center;
}

.premTopCatsEmptyState{
	display:flex;
	align-items:center;
	justify-content:center;
}


/* =========================================================
   Cleaner ecommerce product card proportions
   ========================================================= */

.vpProductsGrid,
.premRailTrack{
    align-items: stretch;
}

.vpProductsGrid > *,
.premRailTrack > *,
.premRailItem{
    display:flex;
}

.vpProductsGrid .box0,
.premRailItem .box0{
    width:100%;
    height:100%;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden;
    border-radius:22px !important;
    background:#fff;
}

/* Uniform card heights: make each rail item a flex container + stretch the
   track so every .box0 fills its slot to the tallest card's height. The footer
   (Add tray) then bottom-pins via .product_details{flex:1}, so buttons line up. */
.premRailTrack{ align-items:stretch !important; }
.premRailItem{ display:flex !important; }
/* Clamp the description so one long blurb can't blow up the whole row. Uses
   line-clamp for a clean ellipsis, with max-height as a hard cap for
   descriptions that contain markup (where line-clamp alone won't truncate). */
.vpProductsGrid .box0 .description,
.premRailItem .box0 .description{
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:3 !important;
    overflow:hidden !important;
    max-height:4.4em !important;
    line-height:1.45 !important;
}
/* belt-and-suspenders: pin the Add tray to the bottom edge of the card */
.vpProductsGrid .box0 .walmartCartWrap,
.premRailItem .box0 .walmartCartWrap{ margin-top:auto !important; }

/* image area */
.product_thumb{
    position:relative;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100%;
    aspect-ratio: 1 / 1;
    min-height: 180px;
    max-height: 180px;
    overflow:hidden !important;
    padding:12px !important;
    background:#f7f7f7;
    border-bottom:1px solid rgba(0,0,0,.05);
    border-radius:22px 22px 0 0 !important;
}

.product_thumb a,
.product_thumb picture,
.product_thumb span{
    display:flex !important;
    width:100%;
    height:100%;
    align-items:center;
    justify-content:center;
}

.product_thumb img,
.product_thumb a img{
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    display:block;
    border-radius:14px !important;
}

/* content */
.product_details{
    flex:1 1 auto;
    display:flex !important;
    flex-direction:column !important;
    padding:12px 14px 10px !important;
    gap:4px;
    min-height:auto !important;
}

/* brand */
.prodBrandDiv{
    margin:0 0 2px 0 !important;
    min-height:0 !important;
    line-height:1.15 !important;
    font-size:.85rem !important;
    font-weight:700 !important;
    color:#666 !important;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* title */
.meta{
    min-height:0 !important;
    margin-bottom:2px !important;
}

.meta a{
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    line-height:1.2 !important;
    font-size:1rem !important;
    font-weight:800 !important;
    color:#111 !important;
    text-decoration:none !important;
    min-height:2.4em;
    max-height:2.4em;
}

/* optional secondary text / description */
.variation_description{
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    line-height:1.3 !important;
    font-size:.82rem !important;
    color:#666 !important;
    min-height:0 !important;
    max-height:2.6em;
    margin-top:2px !important;
}

/* hide empty descriptions from reserving space */
.variation_description:empty{
    display:none !important;
}

/* price area */
.prodPriceDiv{
    margin-top:8px !important;
    padding-top:0 !important;
    font-weight:900 !important;
    font-size:1.05rem !important;
    color:#111 !important;
}

/* any extra small meta text under price */
.product_details .header,
.product_details .sub.header,
.product_details small,
.product_details .skuText,
.product_details .modelText{
    line-height:1.2 !important;
    margin-top:2px !important;
}

/* cart/button area */
.walmartCartWrap,
.ui.three.bottom.attached.mini.buttons{
    margin-top:12px !important;
}

/* make card bottom tighter */
.walmartCartWrap{
    padding:12px 14px 14px !important;
    background:#fff !important;
}

/* mobile */
@media (max-width: 768px){
    .product_thumb{
        min-height:160px;
        max-height:160px;
        padding:10px !important;
    }

    .product_details{
        padding:10px 12px 8px !important;
        gap:3px;
    }

    .meta a{
        font-size:.95rem !important;
    }

    .description{
        -webkit-line-clamp:2 !important;
        max-height:2.6em;
    }
}

.product_thumb .ui.orange.label {
	width:50px !important;
	height:20px !important;
}


.product_details .ui.corner.label {
		background-color: #000 !important;
		border:0px !important;
		color:#000;
		cursor:pointer !important;
}
.product_details .ui.corner.label i {
	color:#fff !important;
}

.product_details .ui.corner.label:hover i, .ecomProductOptionsModalButton:hover  {
	color:#38c3fa !important;
}

/* Product status toggle (the little corner eye) on search/shop cards.
   Green = live, Red = hidden. The toggle lives in different containers depending
   on the renderer (.product_thumb in the SearchEngine ProductRenderer, .product_details
   on shop cards), so scope by its own .product_status-toggle class rather than a
   container. The colored triangle is the Semantic :after pseudo-element -- that's the
   layer to recolor; the generic black background rule above never touched it. */
.product_status-toggle.ui.green.left.corner.label:after { border-color:#1faa59 !important; }
.product_status-toggle.ui.red.left.corner.label:after   { border-color:#e0533d !important; }
.product_status-toggle.ui.green.left.corner.label:hover:after { border-color:#178f4a !important; }
.product_status-toggle.ui.red.left.corner.label:hover:after   { border-color:#c63f2b !important; }
.product_status-toggle.ui.corner.label i {
	color:#fff !important;
	text-shadow:0 1px 1.5px rgba(0,0,0,.30);
}
/* Center the eye within the green corner. Use 50%/translate so it sits dead-center
   of the label box regardless of its exact size. */
.product_status-toggle.ui.left.corner.label .icon {
	position:absolute !important;
	top:50% !important;
	left:50% !important;
	transform:translate(-50%, -50%) !important;
	margin:0 !important;
	font-size:1.1em !important;
	line-height:1 !important;
}
.product_status-toggle.ui.corner.label:hover i {
	color:#fff !important;
}


.premMegaQuickLinks{
	padding:14px;
	border-bottom:1px solid rgba(0,0,0,.08);
	display:grid;
	grid-template-columns:1fr;
	gap:8px;
	background:#f8fafc;
}

.premMegaQuickLink{
	display:flex;
	align-items:center;
	gap:10px;
	padding:12px 14px;
	border-radius:14px;
	background:#fff;
	color:#111827 !important;
	text-decoration:none !important;
	font-weight:900;
	box-shadow:0 6px 16px rgba(0,0,0,.05);
	border:1px solid rgba(0,0,0,.06);
}

.premMegaQuickLink:hover{
	background:#111827;
	color:#fff !important;
}

.premMegaQuickLink i{
	width:18px;
	text-align:center;
	opacity:.85;
}





/* Mobile mega menu: tap parent once to open children, tap again to navigate */
@media (max-width:980px), (hover:none), (pointer:coarse) {
    .premMegaMenu {
        max-width:calc(100vw - 24px) !important;
        max-height:70vh !important;
        overflow:auto !important;
    }

    .premMegaSubWrap {
        position:static !important;
        display:none !important;
        padding-left:0 !important;
        margin:0 10px 8px 18px !important;
    }

    .premMegaItem.hasChildren.mobile-open > .premMegaSubWrap {
        display:block !important;
    }

    .premMegaItem.hasChildren.mobile-open > .premMegaLink {
        /* subtle translucent darken instead of a hardcoded light fill, so the expanded-row
           highlight reads on ANY dropdown color (white-on-white when the menu text is light). */
        background:rgba(0,0,0,.16) !important;
    }

    .premMegaItem.hasChildren.mobile-open > .premMegaLink .premMegaArrow {
        transform:rotate(90deg);
    }

    .premMegaSubWrap .premMegaColumn {
        min-width:0 !important;
        width:100% !important;
        box-shadow:none !important;
        border-radius:12px !important;
        border:0px solid rgba(0,0,0,.08) !important;
    }
}

/* Keep search / sign in / cart on one line always */
.premHeaderInner{
    flex-wrap:nowrap !important;
}

.premHeaderActions{
    flex:0 0 auto !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:8px !important;
    min-width:0 !important;
}

.premHeaderAction{
    white-space:nowrap !important;
    flex:0 0 auto !important;
}

.tpSearch{
    flex:1 1 auto !important;
    min-width:0 !important;
}

/* Mobile header tightening */
@media (max-width: 900px){

    .premHeaderInner{
        gap:10px !important;
        min-height:72px !important;
    }

    .premLogoWrap{
        max-width:110px !important;
        flex:0 0 110px !important;
    }

    .premLogoWrap img{
        max-width:100% !important;
        height:auto !important;
    }

    .tpSearch .ui.input input{
        padding-left:12px !important;
        padding-right:12px !important;
        font-size:14px !important;
    }

    .premHeaderActions{
        gap:6px !important;
    }

    .premHeaderAction{
        min-width:auto !important;
        padding:0 10px !important;
        height:44px !important;
        border-radius:12px !important;
        font-size:13px !important;
    }

    .premHeaderAction span{
        display:none !important;
    }

    .premHeaderAction i{
        margin:0 !important;
        font-size:16px !important;
    }

    .premCartAction{
        padding-right:14px !important;
    }

    #cart_badge_container{
        position:absolute;
        top:-4px;
        right:-2px;
    }

    .premCartAction{
        position:relative;
    }
}

/* Ultra narrow phones */
@media (max-width: 420px){

    .premHeaderInner{
        gap:6px !important;
        padding-left:10px !important;
        padding-right:10px !important;
    }

    .premLogoWrap{
        max-width:84px !important;
        flex:0 0 84px !important;
    }

    .premHeaderAction{
        padding:0 8px !important;
        height:40px !important;
    }

    .tpSearch .ui.button{
        width:42px !important;
    }
}






.premTopBrandDropdown{
    position:relative;
    display:inline-flex;
    align-items:center;
}

.premTopBrandBtn{
    border:0;
    cursor:pointer;
}

.premTopBrandMenu{
    display:none;
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    min-width:220px;
    max-height:420px;
    overflow:auto;
    background:#fff;
    border:1px solid rgba(0,0,0,.12);
    border-radius:14px;
    box-shadow:0 14px 34px rgba(0,0,0,.16);
    z-index:9999;
    padding:8px;
}

.premTopBrandDropdown.is-open .premTopBrandMenu{
    display:block;
}

.premTopBrandItem{
    display:flex;
    justify-content:space-between;
    gap:14px;
    padding:10px 12px;
    border-radius:10px;
    color:#222;
    text-decoration:none;
    font-weight:700;
    white-space:nowrap;
}

.premTopBrandItem:hover{
    background:#f4f5f7;
}

.premTopBrandItem small{
    opacity:.65;
    font-weight:800;
}


.premPostItem {
    min-width: 310px;
    max-width: 310px;
}

.premPostCard {
    display: block;
    min-height: 360px;
    border-radius: 26px;
    overflow: hidden;
    position: relative;
    background: #111827;
    box-shadow: 0 16px 40px rgba(15,23,42,.12);
    color: #fff;
    text-decoration: none;
}

.premPostCard:hover {
    color: #fff;
    transform: translateY(-2px);
}

.premPostBg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform .25s ease;
}

.premPostCard:hover .premPostBg {
    transform: scale(1.04);
}

.premPostOverlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.82));
}

.premPostContent {
    position: absolute;
    inset: auto 0 0 0;
    padding: 24px;
    z-index: 2;
}

.premPostEyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 10px;
    opacity: .9;
}

.premPostTitle {
    font-size: 22px;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -.03em;
    margin-bottom: 9px;
}

.premPostExcerpt {
    color: rgba(255,255,255,.82);
    font-size: 14px;
    line-height: 1.45;
}

.premPostRead {
    margin-top: 16px;
    font-weight: 800;
    font-size: 13px;
}

@media (max-width: 640px) {
    .premPostItem {
        min-width: 86vw;
        max-width: 86vw;
    }
}

/* Homepage New Posts */
.premSliderBlock[data-slider-type="posts"] .premRailViewport {
    width: 100%;
    overflow: hidden;
}

.premSliderBlock[data-slider-type="posts"] .premRailTrack {
    display: flex !important;
    align-items: stretch;
    gap: 22px;
    width: 100%;
}

.premPostItem {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 calc((100% - 44px) / 3);
    min-width: calc((100% - 44px) / 3);
    max-width: calc((100% - 44px) / 3);
}

.premPostCard {
    display: block !important;
    position: relative;
    width: 100%;
    min-height: 360px;
    border-radius: 28px;
    overflow: hidden;
    text-decoration: none !important;
    color: #fff !important;
    background: #111827;
    box-shadow: 0 16px 40px rgba(15,23,42,.12);
}

.premPostBg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.premPostOverlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.78) 100%);
}

.premPostContent {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 24px;
}

.premPostEyebrow {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .9;
    margin-bottom: 8px;
}

.premPostTitle {
    font-size: 28px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -.04em;
    margin-bottom: 10px;
}

.premPostExcerpt {
    font-size: 14px;
    line-height: 1.55;
    opacity: .9;
}

.premPostRead {
    margin-top: 14px;
    font-size: 14px;
    font-weight: 800;
}

@media (max-width: 1100px) {
    .premPostItem {
        flex: 0 0 calc((100% - 22px) / 2);
        min-width: calc((100% - 22px) / 2);
        max-width: calc((100% - 22px) / 2);
    }
}

@media (max-width: 640px) {
    .premPostItem {
        flex: 0 0 100%;
        min-width: 100%;
        max-width: 100%;
    }
}
/* Prevent homepage rail arrows from covering product/card content */
.premSliderBlock[data-slider-type="products"],
.premSliderBlock[data-slider-type="topsellers"],
.premSliderBlock[data-slider-type="posts"]{
    padding-left:58px;
    padding-right:58px;
}

.premSliderBlock[data-slider-type="products"] .premRailShell,
.premSliderBlock[data-slider-type="topsellers"] .premRailShell,
.premSliderBlock[data-slider-type="posts"] .premRailShell{
    width:100% !important;
}

.premSliderBlock[data-slider-type="products"] .premRailArrow.left,
.premSliderBlock[data-slider-type="topsellers"] .premRailArrow.left,
.premSliderBlock[data-slider-type="posts"] .premRailArrow.left{
    left:0 !important;
}

.premSliderBlock[data-slider-type="products"] .premRailArrow.right,
.premSliderBlock[data-slider-type="topsellers"] .premRailArrow.right,
.premSliderBlock[data-slider-type="posts"] .premRailArrow.right{
    right:0 !important;
}

/* Mobile: move arrows out of the card/content area entirely */
@media (max-width:640px){

    .premSliderBlock[data-slider-type="products"],
    .premSliderBlock[data-slider-type="topsellers"],
    .premSliderBlock[data-slider-type="posts"]{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:12px;
        padding-left:0 !important;
        padding-right:0 !important;
    }

    .premSliderBlock[data-slider-type="products"] .premRailShell,
    .premSliderBlock[data-slider-type="topsellers"] .premRailShell,
    .premSliderBlock[data-slider-type="posts"] .premRailShell{
        grid-column:1 / -1;
        grid-row:2;
        width:100% !important;
    }

    .premSliderBlock[data-slider-type="products"] .premRailArrow,
    .premSliderBlock[data-slider-type="topsellers"] .premRailArrow,
    .premSliderBlock[data-slider-type="posts"] .premRailArrow{
        position:relative !important;
        top:auto !important;
        left:auto !important;
        right:auto !important;
        transform:none !important;
        grid-row:1;
        width:44px !important;
        height:44px !important;
        margin-bottom:2px;
        z-index:1;
    }

    .premSliderBlock[data-slider-type="products"] .premRailArrow.left,
    .premSliderBlock[data-slider-type="topsellers"] .premRailArrow.left,
    .premSliderBlock[data-slider-type="posts"] .premRailArrow.left{
        grid-column:1;
        justify-self:start;
    }

    .premSliderBlock[data-slider-type="products"] .premRailArrow.right,
    .premSliderBlock[data-slider-type="topsellers"] .premRailArrow.right,
    .premSliderBlock[data-slider-type="posts"] .premRailArrow.right{
        grid-column:2;
        justify-self:end;
    }
}





















/* face lift for existing GUI stuff */

/* left menu */
.pushable #auth-left-menu, .pushable .item.dashboardLink {
	background-color: #111 !important;
}
.pushable .item.dashboardLink:hover {
	color:#7ddbff !important;
}
/* sub menu header links */
.pushable #auth-left-menu a.item,
.pushable #auth-left-menu .ui.accordion.text .item a, 
.pushable #auth-left-menu .ui.accordion.text .item a {
	color:#fff !important;
	text-decoration: none !important;
  font-family: "Funnel Display", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
.pushable #auth-left-menu a.item:hover,
.pushable #auth-left-menu .ui.accordion.text .item a:hover, 
.pushable #auth-left-menu .ui.accordion.text .item a:hover
.pushable #auth-left-menu a.item.crmLinkEnable:hover {
	color: #7ddbff !important;
}

/* top menu */
#auth-top-menu {
	background-color: #111 !important;
}
#auth-top-menu .item.ui.fluid.search {
	background-color: #111 !important;
}





















/* =========================================================
   ECOM HOMEPAGE CUSTOM COLOR OVERRIDES
   ========================================================= */














/* =========================================================
   MENU DROPDOWN COLOR OVERRIDES
   ========================================================= */




/* =========================================================
   SEARCH BAR COLOR OVERRIDES
   ========================================================= */

	#search_div input.prompt.omni_search,
	#search_div .prompt,
	#search_div input[type="text"]{
	    background:#ffffff !important;
	    color:#1f2937 !important;
	    -webkit-text-fill-color:#1f2937 !important;
	}
	#search_div input.prompt.omni_search::placeholder,
	#search_div .prompt::placeholder{
	    color:#1f2937 !important;
	    -webkit-text-fill-color:#1f2937 !important;
	    opacity:.55 !important;
	}



/* =========================================================
   MOBILE HEADER — SIGN IN REACHABILITY (portrait phones)
   ---------------------------------------------------------
   The header was forced onto ONE non-wrapping row (logo + search + phone +
   Sign In + cart). On a narrow phone the search can't shrink far enough, so the
   row overflowed the viewport and pushed the Sign In / cart icons off the right
   edge — reachable only by rotating to landscape (reported by CW 0097 Richmond).
   Fix: drop the search to its own second row so the logo + action icons always
   fit on screen, and give every action a full 44px (Apple HIG) tap target that
   nothing can overlap. Last block in the sheet, so it wins the cascade. */
@media (max-width: 640px){
    /* Two rows: [logo ........ actions] then [search full width]. */
    .premHeaderInner{
        flex-wrap:wrap !important;
        row-gap:8px !important;
        align-items:center !important;
    }
    .premLogoWrap{ order:1 !important; }
    .premHeaderActions{
        order:2 !important;
        margin-left:auto !important;
        flex-wrap:nowrap !important;
        gap:8px !important;
    }
    .tpSearch{
        order:3 !important;
        flex:1 1 100% !important;
        width:100% !important;
        min-width:0 !important;
    }

    /* Unambiguous, non-overlapping tap targets — the Sign In especially. */
    .premHeaderAction{
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        min-width:44px !important;
        min-height:44px !important;
        height:44px !important;
        padding:0 12px !important;
        position:relative !important;
        z-index:2 !important;
        -webkit-tap-highlight-color:rgba(0,0,0,.08);
        touch-action:manipulation;
    }
    /* Make the account/Sign In read as a real button so it's obviously tappable. */
    .premHeaderSignin{
        border:1px solid rgba(0,0,0,.14) !important;
        border-radius:12px !important;
    }
    .premHeaderAction i{ pointer-events:none; }
}

/* =========================================================
   MOBILE-FIRST STOREFRONT PASS (≤767px) — added 2026-07-30
   Kills document-level horizontal overflow, compacts the sticky
   header stack (~180px → ~110px), de-full-bleeds the 100vw hero,
   and makes the listing/detail readable on a phone. These are the
   last blocks in the sheet so they win the cascade over the desktop
   rules above. Targets the REAL selectors from the render map.
   ========================================================= */

/* ---- 1. Foundation: no sideways scroll, no clipped flex/grid children ---- */
@media (max-width: 767px){
    html, body{ max-width:100% !important; overflow-x:clip !important; }
    /* long product names / SKUs must be allowed to shrink inside flex+grid tracks */
    .premHomeShell, .premPageContainer, .vpProductsMain, .vpBrowseLayout,
    .premHeaderInner, .premHeaderActions, .premHeroSlideContent,
    .vpProductsGrid, .box0, .box0 > *, .vpDetailGrid, .vpSummaryCard, .vpTitle{
        min-width:0 !important;
    }
    .premHomeShell, .premPageContainer{ max-width:100% !important; }
    img, picture, video, svg, iframe{ max-width:100%; }
    /* iOS zooms the whole page when a <16px input is focused — pin storefront inputs */
    .premHomeShell input, .premHomeShell select, .premHomeShell textarea,
    .tpSearch input, .vpProductsMain input, .vpProductsMain select{ font-size:16px; }
}

/* ---- 2. Compact the sticky header stack (reclaims ~70px of viewport) ---- */
@media (max-width: 767px){
    /* promo strip + "Need Help Placing Your Order?" line — not worth 38px on a phone */
    .premUtilityBar{ display:none !important; }
    /* scrolling brand marquee subheader — pure decoration on mobile */
    .premSubheader, .premSubheaderInner{ display:none !important; }
    .premHeaderInner{
        min-height:56px !important;
        padding-top:8px !important; padding-bottom:8px !important;
    }
    .premLogoWrap{ max-width:128px !important; }
    .premLogoWrap img{ max-height:40px !important; width:auto !important; }
}

/* ---- 3. Hero: stop the 100vw full-bleed from creating a scrollbar ---- */
@media (max-width: 767px){
    .premHeroSliderWrap, .premHeroFinderDivider{
        width:100% !important; margin-left:0 !important; margin-right:0 !important;
    }
    .premHeroSlideContent{
        max-width:100% !important; flex-wrap:wrap !important;
        padding-left:16px !important; padding-right:16px !important;
    }
}

/* ---- 4. Product listing: 2-up grid, clamped title, drop the repeated blurb ---- */
@media (min-width: 360px) and (max-width: 767px){
    .vpProductsGrid{
        grid-template-columns:repeat(2, minmax(0,1fr)) !important;
        gap:12px !important;
    }
}
@media (max-width: 767px){
    /* the full product description reprints on every browse card — noise on mobile */
    .vpProductsGrid .box0 .description.domoArigato{ display:none !important; }
    .vpProductsGrid .box0 .meta.domoArigato{
        display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical;
        overflow:hidden !important; overflow-wrap:break-word; word-break:normal;
        line-height:1.35 !important;
    }
    .vpProductsGrid .box0{ min-width:0 !important; }
}

/* ---- 5. Product detail: single column, smaller media, tight facts grid ---- */
@media (max-width: 767px){
    .vpDetailGrid{ grid-template-columns:1fr !important; gap:14px !important; }
    /* Cap the IMAGE only — NOT .vpImageCard, which also holds the add-to-cart tray.
       Capping the card clipped it and the overflowing tray painted over the title. */
    .vpImageCard .vpProductMainImage, .vpImageCard > img{
        max-height:min(52dvh, 360px) !important; width:auto !important; max-width:100% !important;
        margin-left:auto; margin-right:auto; aspect-ratio:1/1; object-fit:contain !important;
    }
    .vpMetaGrid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:8px !important; }
}

/* ---- 6. Benefit/trust perks: 2×2 grid instead of a tall single-column stack ---- */
@media (min-width: 360px) and (max-width: 767px){
    .premHomeShell .premTrustBar{
        grid-template-columns:repeat(2, minmax(0,1fr)) !important;
        gap:10px !important;
    }
}

/* ---- 7. Unified commerce CTA color (kills the gold-homepage / blue-Add mismatch) ---- */
:root{ --ec-action: #008060; --ec-action-ink: #ffffff; }
.walmartAddBtn.ui.button,
button.cartbutton.ui.button,
a.cartbutton.ui.button,
#view_product_detail_add_to_cart.ui.button,
#vpApplyPriceFilter.ui.button{
    background: #0E6EB8 !important;
    color: var(--ec-action-ink) !important;
    border-color: var(--ec-action) !important;
}
.walmartAddBtn.ui.button:hover,
button.cartbutton.ui.button:hover,
a.cartbutton.ui.button:hover,
#view_product_detail_add_to_cart.ui.button:hover{
    filter: brightness(0.95);
}

/* ---- 8. Unified product card + readable card text (review #10 / #9) ---- */
/* The card had a white fill but no border, so on the page its edges vanished and
   the bottom-pinned Add read as a floating bar. A hairline border makes each
   product one contained unit — image, text and Add clearly belong together. */
.vpProductsGrid .box0,
.premRailItem .box0{
    border:1px solid #e5e7eb !important;
    box-shadow:0 1px 2px rgba(16,24,40,.05);
}
/* Both reviews (#5): standard collection cards don't need the full description —
   it shrinks everything else and makes the grid noisy. Drop it at all widths. */
.vpProductsGrid .box0 .description.domoArigato{ display:none !important; }
@media (max-width:767px){
    .vpProductsGrid .box0 .meta.domoArigato,
    .vpProductsGrid .box0 .meta.domoArigato a{ font-size:13px !important; line-height:1.3 !important; }
    .vpProductsGrid .box0 .prodPriceDiv{ font-size:16px !important; font-weight:800 !important; }
    .vpProductsGrid .box0 .walmartAddBtn.ui.button,
    .vpProductsGrid .box0 .cartbutton.ui.button{ min-height:44px !important; font-size:14px !important; }
}

/* ---- 9. Accessibility: honor reduced-motion for the whole storefront ---- */
@media (prefers-reduced-motion: reduce){
    .premHomeShell *, .vpProductsMain *, .vpDetailShell *,
    .premHeaderStack *, #vpFiltersSidebar *, .vpRelatedRail *{
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
        scroll-behavior:auto !important;
    }
}

/* ---- 10. Desktop header balance: give the logo real presence; keep the search from
   swallowing the branding. The logo was width-throttled by a 200px wrap while the search
   grew unbounded, so the wordmark read tiny next to a giant field. ---- */
@media (min-width:901px){
    .premHeaderInner .premLogoWrap{ flex:0 0 auto !important; max-width:340px !important; }
    .premHeaderInner .premLogoWrap img,
    .premHeaderInner .premLogoWrap .ui.image{ height:56px !important; width:auto !important; max-height:none !important; max-width:340px !important; }
    .premHeaderInner .premLogoText{ font-size:30px !important; }
    .premHeaderInner .tpSearch{ flex:1 1 auto !important; max-width:600px !important; }
    .premHeaderInner .premHeaderActions{ margin-left:auto !important; }
}