/* Reserve picture space independently of captions and shopping controls. */
.site-wrapper .home-page .shopby-collection .image-wrapper {
    aspect-ratio: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
}

.site-wrapper .home-page .shopby-collection .image-wrapper img {
    flex: none;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: contain;
    transform: none;
    border-radius: 0;
}

.site-wrapper .home-page .shopby-collection .overlay {
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0.375rem 0.5rem 0.125rem;
    border-radius: 0;
}

.site-wrapper .home-page .shopby-collection .overlay span {
    font-size: 0.75rem;
    line-height: 1.35;
}

.site-wrapper .home-page .shopby-price-cart {
    padding-top: 0.25rem;
}

/* The fan still moves as a card; its picture and details occupy separate rows. */
.site-wrapper .home-page .card-effect-advanced {
    padding: 1rem 0.75rem;
}

.site-wrapper .home-page .card-effect-product-swiper {
    aspect-ratio: auto;
    height: auto;
}

.site-wrapper .home-page .card-effect-product-swiper > .swiper-wrapper {
    height: auto;
    align-items: stretch;
}

.site-wrapper .home-page .card-effect-product-swiper > .swiper-wrapper > .swiper-slide {
    display: flex;
    flex-direction: column;
    height: auto;
    background: var(--home-raised);
}

.site-wrapper .home-page .card-effect-product-swiper .image-frame {
    order: -1;
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 5 / 7;
    flex: none;
    border-radius: 0;
}

.site-wrapper .home-page .card-effect-product-swiper .image-frame > a {
    display: block;
    width: 100%;
    height: 100%;
}

.site-wrapper .home-page .card-effect-product-swiper .image-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.site-wrapper .home-page :is(.card-effect-title, .card-effect-price, .card-effect-actions) {
    position: static;
    inset: auto;
    max-width: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 0.25rem 0.5rem;
}

.site-wrapper .home-page .card-effect-title {
    padding-top: 0.375rem;
}

.site-wrapper .home-page .card-effect-title__text {
    font-size: 0.75rem;
}

.site-wrapper .home-page .card-effect-actions {
    margin-top: auto;
    padding-bottom: 0.5rem;
    justify-content: flex-start;
}

.site-wrapper .home-page .card-effect-action-btn {
    flex: 0 0 2rem;
}

/* Cube: title/price/actions float directly on the cube image — a compact
   vertical title along the left edge, a glassy price pill bottom-left, an
   action rail along the right edge — instead of a caption strip underneath.
   .cube-product-info is a flow sibling of .cube-swiper; taking it out of
   flow and overlaying it lets each child float over the image.
   .cube-slider-section can be much wider than the cube itself — it's a flex
   column that stretches to fill whatever the swiper hands it, which is
   most of the row when there are only 1-2 slides — so `inset: 0` here would
   size this to the whole section instead of the actual 320px cube box,
   scattering the title/actions off to the section's far edges. Giving it
   the exact same sizing as .cube-swiper (min(100%, 320px), square, centered)
   keeps it locked to the image regardless of how many slides are showing.
   CubeSlider.razor.css's own
   `.cube-product-info .cube-slide-title/-price/-actions { position: static }`
   rule has higher specificity than this file can reach with unscoped
   selectors, so `!important` is used deliberately here (and only here) to
   guarantee this wins regardless of that internal ordering. */
.site-wrapper .home-page .cube-slider-section {
    position: relative;
}

.site-wrapper .home-page .cube-product-info {
    position: absolute !important;
    inset: auto !important;
    top: 0 !important;
    left: 50% !important;
    /* Swiper's cube effect (.swiper-cube/.swiper-3d) puts a `transform` on
       .cube-swiper's own subtree, which creates its own stacking context.
       .cube-product-info had no z-index of its own, so despite its children
       carrying z-index:12, the whole overlay was painting BEHIND that 3D
       layer instead of above it — invisible title/price/actions even though
       every computed style on them looked correct. An explicit z-index
       here (not just on the children) is what actually wins the compare
       against that sibling stacking context. */
    z-index: 20 !important;
    transform: translateX(-50%) !important;
    width: min(100%, 320px) !important;
    aspect-ratio: 1 / 1 !important;
    background: none;
    border-radius: 0;
    padding: 0 !important;
    pointer-events: none;
    display: block !important;
}

/* .cube-swiper switches --cube-size to 100% below 768px (see
   CubeSlider.razor.css) — match it here so the overlay never drifts off
   the actual image at phone/tablet widths. */
@media (max-width: 767.98px) {
    .site-wrapper .home-page .cube-product-info {
        width: 100% !important;
    }
}

.site-wrapper .home-page .cube-product-info .cube-slide-title {
    position: absolute !important;
    inset: auto !important;
    top: 50% !important;
    left: 10px !important;
    width: 30px !important;
    height: calc(100% - 96px) !important;
    max-height: calc(100% - 96px) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl !important;
    text-orientation: mixed;
    transform: translateY(-50%) rotate(180deg) !important;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), 0 0 6px rgba(0, 0, 0, 0.55) !important;
    pointer-events: auto;
}

.site-wrapper .home-page .cube-product-info .cube-slide-price {
    position: absolute !important;
    inset: auto !important;
    top: auto !important;
    bottom: 10px !important;
    left: 48px !important;
    width: auto !important;
    max-width: calc(100% - 60px) !important;
    height: auto !important;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 10px !important;
    border-radius: 999px;
    background: color-mix(in srgb, #000 55%, transparent) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid color-mix(in srgb, var(--bhogi-gold) 45%, transparent);
    color: #fff;
    font-size: 0.8125rem;
    pointer-events: auto;
}

.site-wrapper .home-page .cube-product-info .cube-slide-price__offer {
    color: #fff !important;
    font-weight: 800;
}

.site-wrapper .home-page .cube-product-info .cube-slide-price__base {
    color: color-mix(in srgb, #fff 70%, transparent) !important;
    font-weight: 500;
}

.site-wrapper .home-page .cube-product-info .cube-slide-actions {
    position: absolute !important;
    inset: auto !important;
    top: 50% !important;
    right: 10px !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px;
    transform: translateY(-50%) !important;
    pointer-events: auto;
}

/* .cube-slide-action-btn's own gradient reads --cube-slider-accent, a custom
   property only defined inside .cube-swiper — .cube-product-info is that
   element's sibling, so the variable is unset there and the gradient
   silently falls back to `none`. Supplying the same value (and fallback
   chain) directly here fixes it without touching the component. */
.site-wrapper .home-page .cube-product-info .cube-slide-action-btn {
    width: 30px !important;
    height: 30px !important;
    border: 1px solid color-mix(in srgb, var(--cmp-cube-slider-accent, var(--bhogi-gold)) 65%, transparent) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg,
        var(--cmp-cube-slider-accent, var(--bhogi-gold)) 0%,
        color-mix(in srgb, var(--cmp-cube-slider-accent, var(--bhogi-gold)) 65%, black 35%) 100%) !important;
    color: var(--cmp-action-glyph-color, #1a1a1a) !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), 0 2px 5px rgba(0, 0, 0, 0.18);
}

.site-wrapper .home-page .cube-product-info .cube-slide-action-icon {
    width: 15px;
    height: 15px;
}

/* Category captions follow the complete image instead of sitting over it. */
.site-wrapper .home-page .collection-info {
    position: static;
    padding: 0.375rem 0.5rem;
    background: var(--home-raised);
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
}

.site-wrapper .home-page .collection-name {
    color: var(--home-text);
    font: 600 0.8125rem/1.35 var(--home-font);
    text-shadow: none;
    margin: 0;
}

.site-wrapper .home-page .collection-role {
    color: var(--home-muted);
    font: 400 0.75rem/1.35 var(--home-font);
    text-shadow: none;
}

.site-wrapper .home-page .collection-role:empty {
    display: none;
}

.site-wrapper .home-page .shopby-grid9x9 .grid-cell {
    aspect-ratio: auto;
}

.site-wrapper .home-page .shopby-grid9x9 .image-frame {
    flex: none;
    aspect-ratio: 1;
    width: 100%;
}

.site-wrapper .home-page .shopby-grid9x9 .overlay {
    min-height: 0;
    padding: 0.25rem;
    border: 0;
    background: var(--home-raised);
    color: var(--home-text);
    font: 600 0.6875rem/1.3 var(--home-font);
    text-shadow: none;
}

.site-wrapper .home-page .shopby-single .image-wrapper {
    aspect-ratio: auto;
}

.site-wrapper .home-page .shopby-single .image-frame {
    position: relative;
    inset: auto;
    display: block;
    aspect-ratio: 4 / 5;
}

.site-wrapper .home-page .shopby-single .image-frame::after {
    content: none;
}

.site-wrapper .home-page .shopby-single .image-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.site-wrapper .home-page .shopby-single :is(.shop-now-button, .single-price-cart) {
    position: static;
    inset: auto;
    min-height: 0;
    padding: 0.375rem 0.5rem;
    align-items: center;
    background: var(--home-raised);
    color: var(--home-text);
    border-radius: 0;
}

.site-wrapper .home-page .shop-now-button__title {
    font: 600 0.8125rem/1.35 var(--home-font);
    text-shadow: none;
}

.site-wrapper .home-page .royal-frame-theme .royal-frame-name {
    width: min(100%, 300px);
    margin-top: 0.375rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    color: var(--home-text);
    background: var(--home-raised);
}

.site-wrapper .home-page .royal-frame-info {
    padding: 0.375rem;
}