/* Storefront custom overrides (loaded globally after the compiled app CSS). */

/* Product cards: white background behind image + info. */
.product_card {
    background: white;
}

/* Side panel surface. */
.panel-side {
    background: white;
    padding: 10px;
    border-radius: 8px;
}

/* Cart/checkout: let the two columns size to their own content instead of
   stretching to equal height. */
.checkout-columns {
    /* In a grid, align-items only affects the block (vertical) axis, so this is
       safe at every width and doesn't squeeze column widths. */
    align-items: start;
}

/* The cart is a flexbox that switches to a column below 1060px; only relax the
   stretch while it's a horizontal row, otherwise the columns would shrink. */
@media (min-width: 1061px) {
    .cart-columns {
        align-items: flex-start;
    }
}

/* Checkout: gap above the Place Order button. Only on desktop — on mobile the
   summary is shown elsewhere, so the extra top space isn't needed there. */
.place-order-actions {
    margin-top: 30px;
}

@media (max-width: 767px) {
    .place-order-actions {
        margin-top: 0;
    }
}

/* Product card images: show the full image (no crop), fixed height, centered. */
.product_card img {
    object-fit: contain !important;
    width: auto;
    height: 260px;
    margin: 0 auto;
}

/* Remove top margin from the first container inside the main content area */
#main > .container {
    margin-top: 0 !important;
    padding-top: 25px;
}

/* Header bar: brand brown surface with white content. */
.site-header {
    background: #5b2a1e;
    color: #fff;
}

/* Dividers between the header bars have to read against the brown, not white. */
.site-header-bar {
    border-color: rgba(255, 255, 255, 0.15);
}

/* Category hover underline. */
.site-header-nav-item:hover {
    border-bottom-color: #fff;
}

/* Cart count: a dark chip would disappear on the brown, so invert it. */
.site-header .mini-cart-badge {
    background: #fff;
    color: #5b2a1e;
}

/* Popovers (dropdowns, drawers, mega menu) sit inside the header but keep their
   own white surface, so they have to opt out of the inherited white text. */
.site-header .bg-white {
    color: var(--av-text);
}

/* The search field also stays a light surface: keep its text, placeholder and
   inline icons dark instead of letting them inherit white. */
/* Borders are left alone here: the desktop field keeps its transparent border
   plus the gray hover/focus border, the mobile field keeps its light one. */
.site-header-search input {
    background-color: #fff;
    color: var(--av-text);
}

.site-header-search input::placeholder {
    color: var(--av-muted);
}

.site-header-search .icon-search,
.site-header-search .icon-camera {
    color: var(--av-muted);
}

/* Prevent horizontal scrolling.
   Use `clip` (not `hidden`): `overflow-x: hidden` forces overflow-y to compute
   to `auto`, turning html/body into a scroll container and breaking every
   `position: sticky` element on the site (e.g. the product gallery). `clip`
   clips the same overflow without creating a scroll container, so sticky works. */
html, body {
    overflow-x: clip;
    max-width: 100%;
}