/* Resolve shared controls above CMS palette overrides. Each selected theme
   supplies one set of action colours for the entire home page. */
:root:has(.home-page) {
    --home-action: var(--bhogi-primary);
    --home-on-action: var(--storefront-on-primary, var(--cmp-on-primary));
    --home-surface: var(--bhogi-surface);
    --home-raised: var(--bhogi-surface-raised);
    --home-text: var(--bhogi-text);
    --home-muted: var(--bhogi-text-secondary);
    --home-border: color-mix(in srgb, var(--bhogi-text) 18%, var(--bhogi-surface));
    --home-tint: color-mix(in srgb, var(--bhogi-primary) 5%, var(--bhogi-surface));
    --home-card-radius: 0.625rem;
    --home-radius: 0.375rem;
    --home-font: var(--font-family-sans);
    --home-heading-font: 'Playfair Display', Georgia, serif;
}

/* Shared homepage and footer controls. Header chrome owns its theme and touch sizes. */
.site-wrapper:has(.home-page) :is(
    .search-clear, .instasearch-clear, .nl-submit, .back-to-top),
.site-wrapper .home-page :is(
    [data-storefront-action]:not(.cube-slide-action-btn), .art-btn, .storefront-section-link,
    .hero-actions .btn, .animated-sliced-swiper .btn,
    .shop-now-button__action, .swiper-button-prev, .swiper-button-next) {
    box-sizing: border-box;
    min-inline-size: 2rem;
    min-block-size: 2rem;
    border: 1px solid var(--home-border);
    border-radius: var(--home-radius) !important;
    background: var(--home-surface) !important;
    color: var(--home-text) !important;
    box-shadow: none;
    font-family: var(--home-font);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    text-shadow: none;
    filter: none;
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.site-wrapper .home-page :is([data-storefront-action]:not(.cube-slide-action-btn), .art-btn) {
    padding: 0.375rem;
    height: auto;
    font-size: 0.75rem;
}

.site-wrapper .home-page > .page-body {
    padding-inline: clamp(0.75rem, 2vw, 2rem);
    padding-block: 1.25rem;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.site-wrapper .home-page .product-card .product-title {
    font-size: 0.875rem;
}

.site-wrapper .home-page .product-card :is(.product-description, .art-more-opts, .art-more-opt-link, .art-btn-label) {
    font-size: 0.75rem;
}

.site-wrapper .home-page .product-card .art-btn-cart {
    flex-basis: auto;
}

.site-wrapper .home-page .product-card .price-current {
    font-size: 1rem;
}

.site-wrapper .home-page :is(
    [data-storefront-action="primary"]:not(.cube-slide-action-btn), .art-btn-cart,
    .hero-actions .btn, .animated-sliced-swiper .btn, .shop-now-button__action),
.site-wrapper:has(.home-page) .nl-submit {
    background: var(--home-action) !important;
    border-color: var(--home-action) !important;
    color: var(--home-on-action) !important;
}

.site-wrapper .home-page :is(.art-btn-wishlist.active, .art-btn-compare.active) {
    background: var(--home-action) !important;
    border-color: var(--home-action) !important;
    color: var(--home-on-action) !important;
}

.site-wrapper .home-page :is(
    .hero-actions .btn, .animated-sliced-swiper .btn,
    .shop-now-button__action, .storefront-section-link) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
}

.site-wrapper .home-page :is(
    .card-effect-actions, .shopby-action-group) {
    gap: 0.375rem;
}

.site-wrapper .home-page .shopby-action-group {
    flex-wrap: wrap;
}

.site-wrapper .home-page [data-storefront-action]:not(.cube-slide-action-btn) svg {
    width: 1rem;
    height: 1rem;
    stroke-width: 2;
}

/* Keep control feedback steady; carousel positioning is left intact. */
.site-wrapper:has(.home-page) :is(
    .header-icon-btn, .header-el-hamburger, .header-el-search-toggle-btn,
    .nl-submit, .back-to-top):not(:disabled):hover,
.site-wrapper .home-page :is(
    [data-storefront-action]:not(.cube-slide-action-btn), .art-btn, .storefront-section-link,
    .hero-actions .btn, .animated-sliced-swiper .btn):not(:disabled):hover,
.site-wrapper .home-page .shop-now-button:hover .shop-now-button__action {
    border-color: var(--home-text);
    box-shadow: 0 0 0 1px var(--home-text);
    transform: none;
    filter: none;
}

.site-wrapper .home-page :is(
    [data-storefront-action="secondary"]:not(.cube-slide-action-btn), .art-btn-wishlist,
    .art-btn-compare, .art-btn-detail, .storefront-section-link):hover {
    background: var(--home-surface);
    color: var(--home-text);
}

.site-wrapper .home-page :is(
    [data-storefront-action="primary"]:not(.cube-slide-action-btn), .art-btn-cart,
    .hero-actions .btn, .animated-sliced-swiper .btn):hover,
.site-wrapper .home-page .shop-now-button:hover .shop-now-button__action,
.site-wrapper:has(.home-page) .nl-submit:hover {
    background: var(--home-action);
    color: var(--home-on-action);
}

.site-wrapper:has(.home-page) :is(a, button, input, select):focus-visible {
    outline: 2px solid var(--home-text);
    outline-offset: 3px;
    box-shadow: 0 0 0 2px var(--home-surface);
}

.site-wrapper .home-page :is([data-storefront-action]:not(.cube-slide-action-btn), .art-btn):disabled,
.site-wrapper:has(.home-page) .nl-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.site-wrapper:has(.home-page) :is(.search-box, .nl-input-wrap) {
    min-block-size: 2.5rem;
    border: 1px solid var(--home-border);
    border-radius: var(--home-radius) !important;
    background: var(--home-surface) !important;
    color: var(--home-text) !important;
    box-shadow: none;
}

.site-wrapper:has(.home-page) :is(.search-input, .nl-input) {
    min-block-size: 2rem;
    font: 400 1rem/1.5 var(--home-font);
    background: transparent;
    color: var(--home-text) !important;
}

.site-wrapper:has(.home-page) .header-icon-btn .icon-label {
    color: inherit;
}

.site-wrapper:has(.home-page) .col-heading--toggle {
    min-block-size: 2rem;
    font-family: var(--home-font);
    font-size: 0.875rem;
}

.site-wrapper .home-page :is(.swiper-button-prev, .swiper-button-next) {
    inline-size: 2rem;
    block-size: 2rem;
}

/* Match reading surfaces to the selected mode, including sections with saved
   light-theme overrides. Media containers retain their existing treatment. */
.site-wrapper .home-page {
    background: var(--home-surface);
    color: var(--home-text);
}

.site-wrapper .home-page :is(.featured-section, .bestsellers-section, .recently-viewed-section) {
    background: transparent;
}

.site-wrapper .home-page .product-card {
    background: var(--home-raised);
    border-color: var(--home-border);
}

.site-wrapper .home-page .product-card .art-more-opts {
    background: transparent;
}

.site-wrapper .home-page .product-card :is(.product-title, .price-current, .price-call) {
    color: var(--home-text);
}

.site-wrapper .home-page .product-card :is(
    .product-description, .product-brand, .art-more-opt-link, .art-more-opts,
    .art-compareprice-value, .price-savings, .delivery-time) {
    color: var(--home-muted);
}

.site-wrapper:has(.home-page) :is(.search-input, .nl-input)::placeholder {
    color: var(--home-muted);
    opacity: 1;
}

.site-wrapper:has(.home-page) :is(.search-box, .nl-input-wrap):focus-within {
    outline: 2px solid var(--home-text);
    outline-offset: 2px;
    box-shadow: none;
}

/* Section headings share one hierarchy regardless of the CMS component used. */
.site-wrapper .home-page :is(.image-showcase-title, .storefront-section-title) {
    display: block;
    width: 100%;
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--home-text) !important;
    font-family: var(--home-heading-font) !important;
    font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem) !important;
    font-weight: 600 !important;
    line-height: 1.3;
    letter-spacing: -0.02em !important;
    text-align: start !important;
    text-transform: none !important;
    text-shadow: none;
    -webkit-text-fill-color: currentColor;
}

.site-wrapper .home-page :is(.image-showcase-title, .storefront-section-title)::before,
.site-wrapper .home-page :is(.image-showcase-title, .storefront-section-title)::after {
    content: none;
}

.site-wrapper .home-page .storefront-section-title {
    margin-block-end: 0.5rem;
}

.site-wrapper .home-page :is(.image-showcase-subtitle, .storefront-section-subtitle) {
    color: var(--home-muted) !important;
    font: 400 0.875rem/1.5 var(--home-font) !important;
    text-align: start !important;
}

.site-wrapper .home-page .swiper-pagination-bullet {
    background: var(--home-text);
    opacity: 0.35;
}

.site-wrapper .home-page .swiper-pagination-bullet-active {
    background: var(--home-action);
    opacity: 1;
}

/* Long preset names must fit inside the theme drawer. */
body:has(.home-page) .theme-panel .theme-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body:has(.home-page) .theme-panel .theme-option {
    min-inline-size: 0;
    border-radius: var(--home-radius);
}

body:has(.home-page) .theme-panel .theme-name {
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 0.75rem;
    line-height: 1.4;
}

/* Homepage components share the selected palette; media and carousel effects
   keep their existing geometry. Each component's own .razor.css still ships a
   hardcoded multi-layer shadow + a gold accent bar (rgba(255,215,0,...)) on
   this same .background-box wrapper — fine for a gold jewellery theme, wrong
   on any of the other 34. This rule wins on specificity (four ancestor
   classes beat the component's own scoped `.background-box[b-xxx]`), so it's
   the single place to keep that shell theme-derived across every CMS block. */
.site-wrapper .home-page .component-container :is(
    .background-box, .cube-slider-container-section, .card-effect-container-section) {
    background: var(--home-tint);
    color: var(--home-text);
    border: 1px solid var(--home-border);
    border-radius: var(--home-card-radius);
    box-shadow: var(--bhogi-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
}

.site-wrapper .home-page .component-container .background-box::before {
    background: linear-gradient(90deg, transparent, var(--home-action), transparent);
    height: 2px;
    width: 3rem;
    box-shadow: none;
}

/* One card language for the "shop the look" components that don't already
   define their own hover-lift (ShopbyCollection/CardEffect/CubeSlider/
   RoyalFrameProV2/CollectionSlider): a soft rest shadow, a confident lift on
   hover/focus, all colour still theme-derived. Components with their own
   bespoke hover choreography (CategorySlider, TeamSwiper, CarouselShowcase,
   Gallery, BrandShowcase, ShopbyGrid9x9) are left alone here so this doesn't
   layer a second, conflicting transform on top of theirs. */
.site-wrapper .home-page :is(
    .shopby-item, .shopby-single,
    .card-effect-product-swiper .swiper-slide,
    .cube-swiper .swiper-slide,
    .royal-frame-theme .swiper-slide,
    .collection-slider .collection-card) {
    box-shadow: var(--bhogi-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
    transition: box-shadow 220ms var(--bhogi-ease-out, ease-out), transform 220ms var(--bhogi-ease-out, ease-out);
}

.site-wrapper .home-page :is(
    .shopby-item, .shopby-single,
    .card-effect-product-swiper .swiper-slide,
    .cube-swiper .swiper-slide,
    .royal-frame-theme .swiper-slide,
    .collection-slider .collection-card):hover {
    box-shadow: var(--bhogi-shadow-lg, 0 18px 40px rgba(0, 0, 0, 0.16));
    transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
    .site-wrapper .home-page :is(
        .shopby-item, .shopby-single,
        .card-effect-product-swiper .swiper-slide,
        .cube-swiper .swiper-slide,
        .royal-frame-theme .swiper-slide,
        .collection-slider .collection-card) {
        transition: none;
    }

    .site-wrapper .home-page :is(
        .shopby-item, .shopby-single,
        .card-effect-product-swiper .swiper-slide,
        .cube-swiper .swiper-slide,
        .royal-frame-theme .swiper-slide,
        .collection-slider .collection-card):hover {
        transform: none;
    }
}

.site-wrapper .home-page :is(.image-showcase-title, .image-showcase-subtitle) {
    max-width: none;
    margin-inline: 0;
}

.site-wrapper .home-page .image-showcase-subtitle {
    padding-inline: 0;
}

.site-wrapper .home-page :is(.storefront-section-kicker, .hero-eyebrow) {
    background: var(--home-tint);
    color: var(--home-text);
    border-color: var(--home-border);
}

.site-wrapper .home-page :is(.product-card, .shopby-item) {
    border: 1px solid var(--home-border);
    border-radius: var(--home-card-radius);
    background: var(--home-raised);
    box-shadow: none;
}

.site-wrapper .home-page .product-card:hover {
    border-color: var(--home-action);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--home-text) 8%, transparent);
}

.site-wrapper .home-page .product-card .badge-offer {
    background: var(--home-action);
    color: var(--home-on-action);
    border-radius: var(--home-radius);
}

.site-wrapper .home-page .product-card .art-btn-group {
    padding-block-start: 0.75rem;
    border-top: 1px solid var(--home-border);
}

/* Clear title and price surfaces replace the unrelated dark capsules.
   Cube keeps its native floating-on-image title/price/actions (see
   home-media.css) so it's excluded from this flattened chip treatment. */
.site-wrapper .home-page :is(
    .card-effect-title, .card-effect-price,
    .royal-frame-name, .royal-frame-price-cart,
    .single-price-cart, .shopby-collection .overlay, .shopby-price-cart) {
    background: var(--home-raised);
    color: var(--home-text);
    border: 1px solid var(--home-border);
    border-radius: var(--home-radius);
    box-shadow: none;
    text-shadow: none;
    font-family: var(--home-font);
}

.site-wrapper .home-page :is(
    .card-effect-title__text, .royal-frame-name,
    .single-price-cart__title, .shopby-collection .overlay span) {
    color: var(--home-text);
    font-family: var(--home-font);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    text-shadow: none;
}

.site-wrapper .home-page .cube-slider-title {
    color: var(--home-text);
    font-family: var(--home-heading-font);
    font-size: 1.25rem;
}

.site-wrapper .home-page :is(
    .card-effect-price__offer, .card-effect-price__base--main,
    .royal-frame-price__offer, .royal-frame-price__base--main,
    .shopby-price__offer, .shopby-price__base--main,
    .single-price__offer, .single-price__base--main) {
    color: var(--home-text);
    font: 700 0.875rem/1.4 var(--home-font);
    font-variant-numeric: tabular-nums;
    opacity: 1;
}

.site-wrapper .home-page :is(
    .card-effect-price__base,
    .royal-frame-price__base, .shopby-price__base, .single-price__base):not([class$="--main"]) {
    color: var(--home-muted);
    font: 400 0.75rem/1.4 var(--home-font);
    opacity: 1;
}

.site-wrapper .home-page :is(.card-effect-price,
    .shopby-price, .royal-frame-price, .single-price) {
    flex-wrap: wrap;
    row-gap: 0.125rem;
}

.site-wrapper .home-page .royal-frame-info {
    padding: 0.75rem;
    gap: 0.375rem;
    background: var(--home-raised);
    border: 1px solid var(--home-border);
    border-radius: var(--home-card-radius);
}

.site-wrapper .home-page :is(.royal-frame-name, .royal-frame-price-cart) {
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
}

.site-wrapper .home-page .royal-frame-price-cart {
    flex-wrap: wrap;
    gap: 0.375rem;
}

.site-wrapper .home-page .royal-frame-price {
    flex-basis: 100%;
    justify-content: center;
}

/* Collection cards own their full action row, even on a 320px screen. */
.site-wrapper .home-page .shopby-collection .slide-grid {
    gap: 0.625rem;
    border: 0;
    border-radius: 0;
}

.site-wrapper .home-page .shopby-collection .image-wrapper {
    border-color: transparent;
    box-shadow: none;
}

.site-wrapper .home-page .shopby-collection .overlay {
    width: calc(100% - 8px);
    padding: 0.5rem;
    margin-top: 0.25rem;
    justify-content: flex-start;
    border: 0;
    border-radius: 0.375rem;
    min-height: 3.5rem;
}

.site-wrapper .home-page .shopby-price-cart {
    width: 100%;
    margin: auto 0 0;
    padding: 0.5rem 0.25rem;
    gap: 0.375rem;
    border: 0;
    border-radius: 0;
}

.site-wrapper .home-page .shopby-price {
    flex: 1 0 6rem;
    padding-inline: 0.25rem;
    justify-content: flex-start;
}

.site-wrapper .home-page .shopby-action-group {
    display: grid;
    grid-template-columns: repeat(3, 1.75rem);
    width: auto;
    gap: 0.25rem;
    flex-shrink: 1;
}

.site-wrapper .home-page .shopby-cart-btn {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0.2rem;
}

.site-wrapper .home-page .shopby-action-group:has(> :nth-child(4)) {
    grid-template-columns: repeat(2, 1.75rem);
}

.site-wrapper .home-page .swiper-pagination-bullet {
    background: var(--home-text) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    opacity: 0.3;
}

.site-wrapper .home-page .swiper-pagination-bullet-active {
    background: var(--home-action) !important;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .site-wrapper:has(.home-page) :is(a, button, input) {
        transition: none;
    }
}