/* =========================
   Base & Globals
   ========================= */
   * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    margin: 0 !important;
    padding: 0;
    scroll-behavior: smooth;
}
html {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
html::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background: transparent;
}
.scroll-container {
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
    -ms-overflow-style: none;
}
div, span, p {
    -webkit-font-smoothing: antialiased;
}
img {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-font-smoothing: antialiased;
}
:not(input):not(select):not(textarea):not(button):focus {
    outline: none;
}
img {
    user-select: none; 
    -webkit-user-drag: none;
}
iframe {
    z-index: 0 !important;
}

input#rememberme[type="checkbox"] {
    accent-color: #1A3B57;
}
input.notification-checkbox[type="checkbox"] {
    accent-color: #1A3B57;
}
input[type="checkbox"] {
    accent-color: #1B2B12;
}
input:-webkit-autofill {
    box-shadow: 0 0 0px 1000px #F9F9F9 inset;
    -webkit-text-fill-color: #000; /* Set desired text color */
    transition: background-color 5000s ease-in-out 0s;
}

input,
textarea,
select {
    transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}

/* Chrome, Safari */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-internal-autofill-selected {
    -webkit-box-shadow: 0 0 0px 1000px #F9F9F9 inset !important;
    box-shadow: 0 0 0px 1000px #F9F9F9 inset !important;
    -webkit-text-fill-color: #000 !important;
    transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}

/* Firefox */
input:-moz-autofill {
    box-shadow: 0 0 0px 1000px #F9F9F9 inset !important;
    -moz-text-fill-color: #000 !important;
}

/* =========================
   Scrollbars
   ========================= */
.overflow-x-scroll::-webkit-scrollbar,
.overflow-y-scroll::-webkit-scrollbar {
    display: none;
    width: 0px;
    height: 0px;
    background: transparent;
}

/* =========================
   Input Number
   ========================= */
/* Chrome, Safari, Edge, Opera */
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type='number'] {
    -moz-appearance: textfield;
}

/* =========================
   Prevents double-tapping on increment / decrement button from zooming in
   ========================= */
html {
    touch-action: manipulation; /* Hints at no double-tap */
}

button:focus {
    outline: none;
    box-shadow: none;
}

button,
a,
input,
label,
textarea {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.primary-button {
  overflow: hidden;
  transform: translateZ(0);

  --ripple-x: 50%;
  --ripple-y: 50%;
  --ripple-size: 1px;
}

.primary-button::before {
  content: "";
  position: absolute;
  transform: scale(0);
  left: calc(var(--ripple-x) - var(--ripple-size) / 2);
  top: calc(var(--ripple-y) - var(--ripple-size) / 2);
  z-index: 0;
  opacity: 0;

  width: var(--ripple-size);
  height: var(--ripple-size);

  border-radius: 999px;
  background: radial-gradient(circle at center, rgba(255,115,87,.45), rgba(255,115,87,.25) 35%, rgba(255,115,87,0) 65%);
  
  pointer-events: none;
  
  transition: transform 0.4s cubic-bezier(.2,.6,.2,1), opacity 0.6s ease;
}

.primary-button:hover::before {
  transform: scale(0.5);
  opacity: 1;
}

.primary-button > * {
  position: relative;
  z-index: 1;
}

.secondary-button {
  position: relative;
  overflow: hidden;
  isolation: isolate; /* keep pseudo-layer below text/icon */
}

.secondary-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #3C3C3C;

    opacity: 0.2;
    clip-path: circle(0% at 50% 50%);
    transition: clip-path 0.3s ease, opacity 0.3s ease;
    z-index: 0;

    pointer-events: none;
}

.secondary-button:hover::before {
    opacity: 1;
    clip-path: circle(150% at 50% 50%);
}

.secondary-button > * {
    position: relative;
    z-index: 1; /* keep text/icon above the overlay */
}

/* =========================
   Header
   ========================= */
/* header logo: initial state only */
.header-logo {
    opacity: 0;
    transform: translateY(-50%) rotate(0deg) scale(0.8);
}
/* starts on load when class is added */
.header-logo-animation {
    animation: logoSequence 1s ease-in-out forwards;
}

@keyframes logoSequence {
    0% {
        transform: translateY(-50%) rotate(0deg) scale(0.8);
        opacity: 0;
    }
    40% {
        transform: translateY(-50%) rotate(-60deg) scale(0.8);
        opacity: 0;
    }
    80% {
        transform: translateY(-50%) rotate(20deg) scale(1.2);
        opacity: 0.5;
    }
    100% {
        transform: translateY(-50%) rotate(0deg) scale(1);
        opacity: 1;
    }
}

/* keep logo as-is */
.header-logo {
    opacity: 0;
    transform: translateY(-50%) rotate(0deg) scale(0.8);
    animation: logoSequence 1s ease-in-out forwards;
}

@keyframes logoSequence {
    0% {
        transform: translateY(-50%) rotate(0deg) scale(0.8);
        opacity: 0;
    }
    40% {
        transform: translateY(-50%) rotate(-60deg) scale(0.8);
        opacity: 0;
    }
    80% {
        transform: translateY(-50%) rotate(20deg) scale(1.2);
        opacity: 0.5;
    }
    100% {
        transform: translateY(-50%) rotate(0deg) scale(1);
        opacity: 1;
    }
}

/* header-content: initial state only */
.header-content {
    transform: translateY(-24px);
}
/* starts on load when class is added */
.header-content-animation {
    animation: headerContentAnimation 0.5s ease-out forwards;
}

@keyframes headerContentAnimation {
    0% {
        transform: translateY(-24px);
    }
    100% {
        transform: translateY(0);
    }
}

/* enter-zip-code-banner: initial state only */
.enter-zip-code-banner {
    transform: translateY(-48px);
}
/* starts on load when class is added */
.enter-zip-code-banner-animation {
    animation: enterZipCodeBannerAnimation 0.5s ease-out forwards;
}

@keyframes enterZipCodeBannerAnimation {
    0% {
        transform: translateY(-48px);
    }
    100% {
        transform: translateY(0);
    }
}

/* header-category: initial state only */
.header-category {
    transform: translateY(-80px);
}
/* starts on load when class is added */
.header-category-animation {
    animation: headerCategoryAnimation 0.5s ease-out forwards;
}

@keyframes headerCategoryAnimation {
    0% {
        transform: translateY(-80px);
    }
    100% {
        transform: translateY(0);
    }
}

.header-reward {
    transform: translateY(-80px);
}
/* starts on load when class is added */
.header-reward-animation {
    animation: headerRewardAnimation 0.5s ease-out forwards;
}

@keyframes headerRewardAnimation {
    0% {
        transform: translateY(-80px);
    }
    100% {
        transform: translateY(0);
    }
}

.enter-zip-code-banner {
    max-height: 28px;

    transition: max-height 0.3s ease-in-out;
}
.enter-zip-code-banner.collapsed {
    max-height: 0px;
}

.category-navigation-button {
    opacity: 0;
    pointer-events: none;

    transition: opacity 0.3s ease-in-out;
}
.category-navigation-button.active {
    opacity: 1;
    pointer-events: auto;
}

.edge-overlay {
    opacity: 0;
    pointer-events: none;

    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);

    transition: opacity 0.3s ease-in-out;
}
.edge-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

#island {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.30) 75%, rgba(255, 255, 255, 0.45) 100%);
    column-gap: 6px;
    transition: column-gap 0.3s ease-in-out;
    contain: layout paint;
    transform: translateX(-50%) translateZ(0);
}
#island.search {
    column-gap: 0px;
}

/* Smooth: animate flex-basis, not max-width */
#island .search-container {
    flex: 1 1 62px;
    transition: flex-basis 0.3s ease-in-out;
    will-change: flex-basis;
    contain: layout paint;
}
#island.search .search-container {
    flex-basis: calc(85vw - 12px);
}

#island .search-box {
    opacity: 0;

    transition: opacity 0.3s ease-in-out;
    will-change: opacity;
}
#island.search .search-box {
    opacity: 1;
}

/* Category: caps at 800px when expanded, collapses via flex-basis */
#island .island-category {
    opacity: 1;
    flex: 1 1 800px;
    max-width: 800px;
    min-width: 0;
    transition: opacity 0.3s ease-in-out, flex-basis 0.3s ease-in-out;
    will-change: opacity, flex-basis;
    contain: layout paint;
}
#island.search .island-category {
    opacity: 0;
    flex-basis: 0px;
}

/* Edge overlay + indicators unchanged, just GPU-friendly */
.island-edge-overlay {
    opacity: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 0) 100%);
    transition: opacity 0.3s ease-in-out;
    will-change: opacity;
    transform: rotate(180deg) translateZ(0);
}

#island .island-edge-overlay-container {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    will-change: opacity;
}

#island .island-category-scroll-indicator {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    will-change: opacity;
}

#island.search .island-edge-overlay-container {
    opacity: 0;
}

#island.search .island-category-scroll-indicator {
    opacity: 0;
}

/* =========================
   Modals
   ========================= */
.modal {
    opacity: 0;
    transform: translateX(-50%) translateY(-50%) scale(80%);
    transform-origin: center;

    pointer-events: none;

    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.modal.active {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) scale(100%);

    pointer-events: auto;
}

/* =========================
   Cart Quantity
   ========================= */
.product-card {
    --button-diameter: 40px;
    --input-width: 400px;
}

.search-result-item {
    --button-diameter: 28px;
    --input-width: 400px;
}

.cart-quantity .decrement-quantity {
    margin-right: 0px;
    flex-basis: 0px;
    opacity: 0;

    transition: flex-basis 0.3s ease-in-out, margin-right 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.cart-quantity.added .decrement-quantity {
    margin-right: 6px;
    flex-basis: var(--button-diameter);
    opacity: 1;
}

.cart-quantity .cart-quantity-input {
    margin-right: 0px;
    flex-basis: 0px;
    opacity: 0;

    transition: flex-basis 0.3s ease-in-out, margin-right 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.cart-quantity.added .cart-quantity-input {
    margin-right: 6px;
    flex-basis: calc(100% - var(--button-diameter) - var(--button-diameter) - 6px - 6px);
    opacity: 1;
}

.cart-quantity .increment-quantity {
    flex-basis: var(--input-width);
    max-width: var(--input-width);

    /* Animate the container, not just the label */
    transition: flex-basis 0.35s ease-in-out, max-width 0.35s ease-in-out;

    overflow: hidden;
}
.cart-quantity.added .increment-quantity {
    flex-basis: var(--button-diameter);
    max-width: var(--button-diameter);
}

.cart-quantity .increment-quantity > .add-to-cart-label {
    margin-left: 8px;
    min-width: 0px;
    flex-basis: 77px;
    opacity: 1;

    overflow: hidden;

    transition: flex-basis 0.35s ease-in-out, margin-left 0.35s ease-in-out, opacity 0.35s ease-in-out;
}
.cart-quantity.added .increment-quantity > .add-to-cart-label {
    margin-left: 0px;
    flex-basis: 0px;
    opacity: 0;
}

/* =========================
   Hero
   ========================= */
.product-carousel-slider {
    transition: transform 0.3s ease-in-out;
}

.carousel-main-image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transform-origin: center;
    transform: scale(1.2);
}

.carousel-main-image-animation {
    animation: carouselMainImageAnimation 0.6s ease-out forwards;
}

@keyframes carouselMainImageAnimation {
    0% {
        transform: scale(1.1); /* start zoomed out */
    }
    100% {
        transform: scale(1); /* zoom to full */
    }
}

.carousel-step {
    background-color: #FFFFFF;

    transition: background-color 0.3s ease-in-out;
}
.carousel-step.active {
    background-color: #ED3F1D;
}

.category-container button img {
    rotate: 0deg;

    transition: rotate 0.3s ease-in-out;
}

.category-container:hover button img {
    rotate: 180deg;
}

/* =========================
   Footer
   ========================= */
.footer-contact-button {
    background-color: white;

    transition: background-color 0.3s ease-in-out;
}
.footer-contact-button > img {
    filter: saturate(100%) brightness(100%);

    transition: filter 0.3s ease-in-out;
}
.footer-contact-button > span {
    color: #ED3F1D;

    transition: color 0.15s ease-in-out;
}

.footer-contact-button:hover {
    background-color: #ED3F1D;
}
.footer-contact-button:hover > img {
    filter: saturate(0%) brightness(1000%);
}
.footer-contact-button:hover > span {
    color: white;
}