@import url("/themes/cakeshop/warm/css/app.css");

:root {
    --theme-body-bg: linear-gradient(180deg, #fff8f3 0%, #fff3e8 18%, #fff 42%, #fff5ed 72%, #fff8f3 100%);
    --theme-section-warm: linear-gradient(180deg, #fff6ef 0%, #ffe6cf 100%);
    --theme-section-light: linear-gradient(180deg, #fff 0%, #fff7f1 100%);
    --theme-section-mesh:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(241, 140, 22, 0.23) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(91, 29, 23, 0.1) 0%, transparent 50%),
        #fff;
    --theme-card-border: rgba(241, 140, 22, 0.45);
    --theme-card-shadow: 0 2px 10px rgba(91, 29, 23, 0.06), 0 8px 24px rgba(241, 140, 22, 0.12);
    --theme-card-shadow-hover: 0 20px 42px -12px rgba(91, 29, 23, 0.22), 0 10px 24px rgba(241, 140, 22, 0.24);
    --theme-card-border-hover: rgba(241, 140, 22, 0.75);
    --theme-btn-gradient: linear-gradient(135deg, #f18c16 0%, #e57e0c 60%, #c96400 100%);
    --theme-btn-shadow-hover: 0 14px 30px -8px rgba(91, 29, 23, 0.48);
    --theme-badge-bg: linear-gradient(135deg, #fff1df 0%, #ffd39f 100%);
    --theme-badge-color: #5b1d17;
    --theme-input-border: rgba(241, 140, 22, 0.55);
    --theme-focus-ring: rgba(241, 140, 22, 0.28);
    --theme-focus-border: #f18c16;
    --theme-accent: 241 140 22;
    --theme-accent-hex: #f18c16;
}

/* Small, modern polish while staying close to Warm layout/structure. */
header {
    border-bottom-color: rgba(241, 140, 22, 0.26);
    backdrop-filter: blur(10px);
}

.nav-link-active {
    box-shadow: inset 0 -2px 0 rgba(91, 29, 23, 0.52);
}

.card-modern {
    border-radius: 1.1rem;
}

.btn-primary-modern {
    letter-spacing: 0.01em;
}

footer {
    background: linear-gradient(180deg, #5b1d17 0%, #45140f 100%);
}

/* Force Tailwind warm utility colors to logo palette in this theme. */
.bg-amber-50 { background-color: #fff7ef !important; }
.bg-amber-100 { background-color: #ffe7cf !important; }
.bg-amber-200 { background-color: #ffd3a3 !important; }
.bg-amber-500, .hover\:bg-amber-500:hover { background-color: #f18c16 !important; }
.bg-amber-600, .hover\:bg-amber-600:hover { background-color: #de7a10 !important; }
.bg-orange-50 { background-color: #fff4ea !important; }
.bg-orange-100 { background-color: #ffe3cc !important; }
.bg-orange-200 { background-color: #ffc890 !important; }
.bg-orange-500, .hover\:bg-orange-500:hover { background-color: #de7a10 !important; }
.bg-orange-600, .hover\:bg-orange-600:hover { background-color: #c96500 !important; }

.text-amber-400, .hover\:text-amber-400:hover { color: #f3a542 !important; }
.text-amber-500, .hover\:text-amber-500:hover { color: #f18c16 !important; }
.text-amber-600, .hover\:text-amber-600:hover { color: #de7a10 !important; }
.text-amber-700, .hover\:text-amber-700:hover { color: #b95b00 !important; }
.text-amber-800 { color: #7a2b1f !important; }
.text-orange-600, .hover\:text-orange-600:hover { color: #de7a10 !important; }
.text-orange-700, .hover\:text-orange-700:hover { color: #c96500 !important; }
.text-orange-800 { color: #7a2b1f !important; }

.border-amber-100, .border-amber-100\/80 { border-color: #ffe7cf !important; }
.border-amber-200, .border-amber-200\/60 { border-color: #ffd3a3 !important; }
.border-amber-500, .hover\:border-amber-500:hover { border-color: #f18c16 !important; }
.focus\:border-amber-500:focus { border-color: #f18c16 !important; }

.from-amber-500 {
    --tw-gradient-from: #f18c16 var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(241, 140, 22, 0) var(--tw-gradient-to-position) !important;
}
.to-orange-500 {
    --tw-gradient-to: #de7a10 var(--tw-gradient-to-position) !important;
}
.hover\:from-amber-600:hover {
    --tw-gradient-from: #de7a10 var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(222, 122, 16, 0) var(--tw-gradient-to-position) !important;
}
.hover\:to-orange-600:hover {
    --tw-gradient-to: #c96500 var(--tw-gradient-to-position) !important;
}

.focus\:ring-amber-500:focus,
.focus-visible\:ring-amber-500:focus-visible {
    --tw-ring-color: #f18c16 !important;
}

/* Warm-neutral remap so pages don't feel default "warm" gray. */
.bg-stone-50, .bg-gray-50 { background-color: #fff9f4 !important; }
.bg-stone-100, .bg-gray-100 { background-color: #f8ede4 !important; }
.bg-stone-200, .bg-gray-200 { background-color: #efdfd2 !important; }
.bg-stone-900, .bg-gray-900 { background-color: #5b1d17 !important; }
.bg-stone-950 { background-color: #45140f !important; }

.text-stone-500, .text-gray-500 { color: #8c6b5b !important; }
.text-stone-600, .text-gray-600 { color: #735244 !important; }
.text-stone-700, .text-gray-700 { color: #5b3e33 !important; }
.text-stone-800, .text-gray-800 { color: #4a2e25 !important; }
.text-stone-900, .text-gray-900 { color: #3c2019 !important; }

.border-stone-100, .border-gray-100 { border-color: #f3e5d8 !important; }
.border-stone-200, .border-gray-200 { border-color: #e8d6c7 !important; }
.border-stone-300, .border-gray-300 { border-color: #d6c0ae !important; }

/* Replace non-brand highlight gradients used by badges/chips. */
.from-red-500 {
    --tw-gradient-from: #f18c16 var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(241, 140, 22, 0) var(--tw-gradient-to-position) !important;
}
.to-pink-500 { --tw-gradient-to: #de7a10 var(--tw-gradient-to-position) !important; }
.from-blue-500 {
    --tw-gradient-from: #7a2b1f var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(122, 43, 31, 0) var(--tw-gradient-to-position) !important;
}
.to-purple-500 { --tw-gradient-to: #5b1d17 var(--tw-gradient-to-position) !important; }

/* Default dark buttons/blocks should use logo brown. */
.bg-gray-800, .hover\:bg-gray-800:hover { background-color: #5b1d17 !important; }
.bg-neutral-700 { background-color: #5b1d17 !important; }
.hover\:bg-gray-700:hover,
.bg-gray-700,
.bg-neutral-600 {
    background-color: #6d2a20 !important;
}

/* Product gallery (PDP) */
.js-product-gallery.product-gallery-shell {
    position: relative;
    width: 100%;
    height: var(--product-gallery-size, 0px);
}
@media (max-width: 639px) {
    .js-product-gallery.product-gallery-shell {
        height: var(--product-gallery-size, 0px);
    }
}
.js-product-gallery .product-gallery-main {
    position: absolute;
    inset: 0;
    height: 100% !important;
}
/* Prevent stacked slides from stretching the page before Slick initializes */
.js-product-gallery:not(.is-gallery-ready) .product-gallery-main > .product-gallery-slide:not(:first-child) {
    display: none;
}
.js-product-gallery .slick-list,
.js-product-gallery .slick-track,
.js-product-gallery .slick-slide,
.js-product-gallery .slick-slide > div,
.js-product-gallery .product-gallery-slide {
    height: 100% !important;
}
.js-product-gallery .product-gallery-link,
.js-product-gallery.product-gallery-shell > .js-product-gallery-lightbox {
    display: block;
    width: 100%;
    height: 100%;
}
.js-product-gallery .product-gallery-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.js-product-gallery .slick-prev,
.js-product-gallery .slick-next {
    z-index: 2;
    width: 2.5rem;
    height: 2.5rem;
}
.js-product-gallery .slick-prev { left: 0.75rem; }
.js-product-gallery .slick-next { right: 0.75rem; }
.js-product-gallery .slick-prev:before,
.js-product-gallery .slick-next:before {
    font-size: 1.75rem;
    opacity: 0.85;
}
.product-gallery-thumb.is-active {
    border-color: #f18c16 !important;
    box-shadow: 0 0 0 1px rgba(241, 140, 22, 0.35);
}

/* Order confirm compact product gallery */
.order-product-gallery--compact {
    width: 100%;
    height: auto;
    max-height: none;
}
@media (min-width: 640px) {
    .order-product-gallery--compact {
        width: auto;
    }
}
.order-product-gallery--compact .order-product-gallery__main {
    flex-shrink: 0;
}
.order-product-gallery--compact .product-gallery-link {
    width: 100%;
    height: 100%;
}
.order-product-gallery--compact .order-product-gallery__thumbs {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 113, 108, 0.35) transparent;
}
.order-product-gallery--compact .order-product-gallery__thumbs::-webkit-scrollbar {
    height: 4px;
}
.order-product-gallery--compact .order-product-gallery__thumbs::-webkit-scrollbar-thumb {
    border-radius: 9999px;
    background: rgba(120, 113, 108, 0.35);
}
.order-product-gallery--compact .order-product-gallery__thumb {
    display: block;
    cursor: zoom-in;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.order-product-gallery--compact .order-product-gallery__thumb:hover {
    border-color: rgba(241, 140, 22, 0.55) !important;
}
.order-product-gallery--compact .order-product-gallery__thumb.is-active {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
}

/* Order confirm summary — stack on narrow screens */
.order-summary-item__header {
    position: relative;
}
.order-summary-item__header h4,
.order-summary-item__header p {
    position: static;
}

.product-card-body {
    padding-bottom: 1.25rem;
}
@media (min-width: 640px) {
    .product-card-body {
        padding-bottom: 1.5rem;
    }
}
.related-products-grid > * {
    min-width: 0;
    overflow: hidden;
}
.product-card-media {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    flex-shrink: 0;
    touch-action: pan-y pinch-zoom;
    isolation: isolate;
    contain: layout style paint;
}
.product-card-media.is-card-slider-ready {
    aspect-ratio: auto;
    height: var(--card-media-height, auto);
    padding-top: 0;
}
.product-card-media-cover,
.js-product-card-slider,
.product-card-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    overflow: hidden;
}
.product-card-media-cover {
    display: flex;
    align-items: center;
    justify-content: center;
}
.js-product-card-slider.slick-slider {
    max-width: 100%;
}
/* Prevent stacked slides from stretching the card before Slick initializes */
.product-card-slider:not(.slick-initialized) > .product-card-slide:not(:first-child) {
    display: none;
}
.product-card-slider:not(.slick-initialized) > .product-card-slide:first-child {
    height: 100%;
}
.js-product-card-slider .slick-list,
.js-product-card-slider .slick-slide,
.js-product-card-slider .slick-slide > div,
.js-product-card-slider .product-card-slide {
    height: 100%;
}
.js-product-card-slider .slick-list {
    width: 100% !important;
    max-width: 100%;
    overflow: hidden;
}
.js-product-card-slider .slick-track {
    height: 100%;
}
.product-card-media-img,
.js-product-card-slider img,
.product-card-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.product-card-dots {
    position: absolute;
    bottom: 0.625rem;
    left: 50%;
    z-index: 25;
    display: flex;
    max-width: calc(100% - 1.5rem);
    transform: translateX(-50%);
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    background: rgba(28, 25, 23, 0.35);
    pointer-events: auto;
}
.product-card-dot {
    width: 0.5rem;
    height: 0.5rem;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.product-card-dot.is-active {
    background: #f18c16;
    transform: scale(1.2);
}
.product-card-dot:focus-visible {
    outline: 2px solid #f18c16;
    outline-offset: 2px;
}
.product-gallery-shell--placeholder {
    position: relative;
}
.product-veg-indicator {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 35;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.veg-indicator {
    position: relative;
    display: block;
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    border: 2px solid #008000;
    background: #fff;
    border-radius: 1px;
}
.veg-indicator::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #008000;
    transform: translate(-50%, -50%);
}
@media (min-width: 640px) {
    .product-veg-indicator {
        top: 0.75rem;
        left: 0.75rem;
    }
    .product-card-dot {
        width: 0.5625rem;
        height: 0.5625rem;
    }
    .product-card-dots {
        bottom: 0.75rem;
        gap: 0.4375rem;
    }
}

/* Magnific Popup – product image lightbox */
.mfp-product-gallery.mfp-bg {
    background: rgba(17, 24, 39, 0.92);
    opacity: 1;
}
.mfp-product-gallery .mfp-close {
    color: #fff;
    opacity: 0.9;
}
.mfp-product-gallery .mfp-arrow {
    width: 3rem;
    height: 3rem;
    margin-top: -1.5rem;
    opacity: 0.95;
    border-radius: 9999px;
    background-color: rgba(0, 0, 0, 0.45);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.25rem;
}
.mfp-product-gallery .mfp-arrow:before,
.mfp-product-gallery .mfp-arrow:after {
    display: none;
}
.mfp-product-gallery .mfp-arrow-left {
    left: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 19l-7-7 7-7'/%3E%3C/svg%3E");
}
.mfp-product-gallery .mfp-arrow-right {
    right: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}
.mfp-product-gallery .mfp-arrow:active {
    margin-top: -1.5rem;
}
.mfp-product-gallery .mfp-counter {
    color: rgba(255, 255, 255, 0.85);
}
.mfp-product-gallery .mfp-figure:after {
    box-shadow: none;
}
.mfp-product-gallery .mfp-title {
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    padding-top: 0.75rem;
}
@media (max-width: 639px) {
    .mfp-product-gallery img.mfp-img {
        padding: 2rem 0;
        max-height: calc(100dvh - 4rem);
    }
    .mfp-product-gallery .mfp-arrow-left {
        left: 0.25rem;
    }
    .mfp-product-gallery .mfp-arrow-right {
        right: 0.25rem;
    }
}

/* Products page */
.products-hero {
    background: var(--theme-section-mesh);
}

.catalog-product-grid > article {
    height: 100%;
}

.catalog-filters-body {
    padding-bottom: 2rem;
}

@media (min-width: 640px) {
    .catalog-filters-body {
        padding-bottom: 2.25rem;
    }
}

@media (min-width: 1024px) {
    .catalog-filters-body {
        padding-bottom: 2.5rem;
    }
}

/* Ingredients page */
.ingredients-hero {
    background: var(--theme-section-mesh);
}

.ingredients-hero-card {
    border-color: var(--theme-card-border);
}

.ingredients-bento-card {
    min-height: 10rem;
}

@media (min-width: 768px) {
    .ingredients-bento {
        grid-auto-rows: minmax(9rem, auto);
    }
}

/* Home hero slider — 1690×790 aspect ratio, full-width background slides */
.home-slider-section {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    max-width: 100vw;
}

/* Fixed aspect-ratio box (790 ÷ 1690 ≈ 46.75%) — reliable height for Slick fade */
.home-slider-aspect {
    position: relative;
    width: 100%;
    padding-top: 46.745562130177514%;
}

.home-slider-section .home-slider {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.home-slider-section .home-slider .slick-list,
.home-slider-section .home-slider .slick-track,
.home-slider-section .home-slider .slick-slide,
.home-slider-section .home-slider .slick-slide > div {
    height: 100%;
}

.home-slider-section .home-slider .slick-slide {
    float: left;
}

.home-slider-slide {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #fff8f3;
}

.home-slider-slide__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.home-slider-slide__video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}

.home-slider-slide__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0.2));
}

.home-slider-slide__content {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.home-slider-slide__link {
    position: absolute;
    inset: 0;
    z-index: 20;
}

.home-slider-slide__title {
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.home-slider-section .js-home-slider .slick-dots {
    bottom: 2.75rem;
    z-index: 30;
}

.home-slider-section .js-home-slider .slick-dots li button:before {
    color: #fff;
    opacity: 0.55;
    font-size: 10px;
}

.home-slider-section .js-home-slider .slick-dots li.slick-active button:before {
    color: #f18c16;
    opacity: 1;
}

.home-slider-section .js-home-slider .slick-prev,
.home-slider-section .js-home-slider .slick-next {
    z-index: 30;
    width: 2.75rem;
    height: 2.75rem;
}

.home-slider-section .js-home-slider .slick-prev {
    left: 1.25rem;
}

.home-slider-section .js-home-slider .slick-next {
    right: 1.25rem;
}

.home-slider-section .js-home-slider .slick-prev:before,
.home-slider-section .js-home-slider .slick-next:before {
    color: #fff;
    font-size: 2rem;
    opacity: 0.9;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.home-slider-section .js-home-slider .slick-prev:hover:before,
.home-slider-section .js-home-slider .slick-next:hover:before {
    color: #f18c16;
    opacity: 1;
}

/* Storefront coupon promo pricing */
.price-promo-original {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.price-promo-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    background-color: #16a34a;
    padding: 0.125rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.25;
}

.price-promo-badge--card {
    font-size: 0.5625rem;
    padding: 0.125rem 0.375rem;
}