/* ==========================================================================
   10-storefront-fixes.css
   Neutralises the parent theme's assumptions that conflict with this layout.
   Kept in its own layer so it is obvious what is "ours" vs "undoing Storefront".
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Width.
   Storefront wraps everything in .col-full (max-width ~1170px). This build is a
   full-bleed storefront: the hero, preheader and footer must reach the viewport
   edges, and the content container is wider. So .col-full becomes a pass-through
   and each section owns its own container.
   -------------------------------------------------------------------------- */
.col-full {
    max-width: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

/* Storefront adds its own header/footer padding we don't want. */
.site-header { padding: 0; margin: 0; border: 0; background: transparent; }
.site-footer { padding: 0; margin: 0; background: transparent; }
.site-content { padding: 0; }
.storefront-breadcrumb { padding: 0; margin: 0; background: transparent; }

/* Templates that don't go through our own .scs-container wrapper still need to
   be contained. Archives/search already get one from inc/woocommerce.php. */
.single-product .content-area,
.woocommerce-cart .content-area,
.woocommerce-checkout .content-area,
.woocommerce-account .content-area,
.page:not(.home) .content-area,
.single-post .content-area,
.blog .content-area,
.archive:not(.woocommerce) .content-area,
.error404 .content-area {
    max-width: var(--scs-container);
    margin-inline: auto;
    padding-inline: var(--scs-container-pad);
}

/* The homepage owns full-bleed sections, so it must NOT be contained here. */
.home .content-area { max-width: none; padding-inline: 0; }

/* Storefront reserves a sidebar column (width:73.9%; float:left) with selectors
   more specific than a bare .content-area, so this needs to win explicitly. */
.site-content .content-area,
.woocommerce-page .content-area,
.right-sidebar .content-area,
.left-sidebar .content-area {
    width: 100% !important;
    float: none !important;
    /* auto, not 0: containers capped by max-width must stay centred on wide screens
       (0 left every capped page body stuck to the left above its max-width). */
    margin-right: auto !important;
    margin-left: auto !important;
}
/* Product sections share this one capped wrapper. Restore its auto margins
   after the Storefront sidebar override above so the gallery, tabs, graphics
   and related-products rows keep the same centred boundaries. */
.single-product .site-content .content-area {
    box-sizing: border-box;
    width: min(100%, var(--scs-container)) !important;
    max-width: var(--scs-container);
    margin-inline: auto !important;
}
#secondary, .widget-area { display: none !important; }

/* --------------------------------------------------------------------------
   2. Product loop list markers.
   Storefront/normalize leave a marker on ul.products li, which shows as a dot
   above each card.
   -------------------------------------------------------------------------- */
/* Carousels render bare <li class="product"> outside a ul.products, so these
   selectors must not be scoped to ul.products. */
ul.products, li.product { list-style: none !important; }
li.product::marker { content: none; }
li.product::before { content: none !important; display: none !important; }

/* A WooCommerce notices wrapper is printed on every page. It renders as a blank
   band between the nav and the hero on the homepage. `:empty` does NOT match it
   because the wrapper contains whitespace text nodes, so match on "contains no
   actual notice" instead. */
.site-content > .col-full > .woocommerce:not(:has(.woocommerce-message)):not(:has(.woocommerce-info)):not(:has(.woocommerce-error)) {
    display: none !important;
}
.woocommerce-notices-wrapper:not(:has(*)) { display: none !important; }

/* Belt and braces: even if :has() is unavailable, the wrapper must contribute
   no vertical space of its own. Real notices carry their own margins. */
.site-content > .col-full > .woocommerce { margin: 0; padding: 0; }
.woocommerce-notices-wrapper { margin: 0; padding: 0; }

/* On the homepage the wrapper is always empty in practice (add-to-cart feedback
   surfaces in the mini-cart drawer), and it leaves a blank band above the hero.
   Hide it outright there rather than depending on :has() support. */
.home .site-content > .col-full > .woocommerce { display: none !important; }

/* --------------------------------------------------------------------------
   3. Ratings.
   We render our own compact star row (.scs-card__rating). Storefront's
   .star-rating uses an icon font that isn't loaded here, so its accessible
   text ("Rated 4.6 out of 5") renders as visible duplicate copy.
   -------------------------------------------------------------------------- */
li.product .star-rating,
li.product .woocommerce-product-rating {
    display: none;
}
/* Keep the rating on the single product page, but as plain text, not a broken
   icon font. */
.single-product .woocommerce-product-rating { font-size: var(--scs-fs-sm); color: var(--scs-ink-3); }

/* --------------------------------------------------------------------------
   4. Hero controls must not sit on top of the headline at narrow widths.
   -------------------------------------------------------------------------- */
.scs-hero__arrow--prev { left: var(--scs-3); }
.scs-hero__arrow--next { right: var(--scs-3); }
@media (min-width: 1280px) {
    /* Only once there is room outside the text column. */
    .scs-hero__arrow--prev { left: var(--scs-6); }
    .scs-hero__arrow--next { right: var(--scs-6); }
}
/* Reserve room so the copy never runs under the arrows. */
@media (min-width: 900px) {
    .scs-hero__inner { max-width: 34rem; padding-left: 56px; }
}
@media (max-width: 899px) {
    /* On small screens the arrows are hidden; dots handle navigation. */
    .scs-hero__inner { padding-left: 0; }
}

/* --------------------------------------------------------------------------
   5. Storefront button resets that fight our button system.
   -------------------------------------------------------------------------- */
button.button, input.button, a.button, .woocommerce a.button, .woocommerce button.button {
    border-radius: var(--scs-radius);
    text-shadow: none;
    box-shadow: none;
    font-weight: var(--scs-fw-bold);
}
.woocommerce a.button:hover, .woocommerce button.button:hover { box-shadow: none; }

/* Storefront's sticky "add to cart" bar duplicates our purchase panel. */
.storefront-sticky-add-to-cart { display: none; }

/* --------------------------------------------------------------------------
   6. Handheld footer bar (Storefront mobile dock) conflicts with our drawer.
   -------------------------------------------------------------------------- */
.storefront-handheld-footer-bar { display: none !important; }