/* ============================================================================
   LS FABRICATION — LAYOUT
   Header, store page header, sidebar, footer, breadcrumbs.
   ========================================================================= */

/* The site header is built in the Divi Theme Builder. This only guarantees it
   stacks above builder content — Divi's own z-index on .et_builder_inner_content
   otherwise lets sticky sections slide over the nav. */
header#main-header,
.et-l--header {
    position: relative;
    z-index: 999;
}

/* ============================================================================
   STORE PAGE HEADER
   The title + breadcrumb block printed by lsfab_page_title().
   ========================================================================= */

#ecommerce-custom-header {
    padding: var(--ls-space-7) 0 var(--ls-space-5);
}
#ecommerce-custom-header .page-title {
    margin: 0 0 var(--ls-space-3);
    font-size: var(--ls-h1);
    line-height: var(--ls-leading-tight);
}

.woocommerce .woocommerce-breadcrumb {
    margin: 0;
    padding: 0;
    font-family: var(--ls-font-body);
    font-size: var(--ls-small);
    color: var(--ls-text-soft);
}
.woocommerce .woocommerce-breadcrumb a { color: var(--ls-text-soft); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--ls-red); }

/* ============================================================================
   SHOP LAYOUT
   ========================================================================= */

.woocommerce #main-content .container { padding-top: 0; }

#sidebar { padding-top: 0; }

.woocommerce .term-img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 var(--ls-space-5);
    border-radius: var(--ls-radius-lg);
}

.woocommerce .woocommerce-result-count {
    margin: 0;
    font-size: var(--ls-small);
    color: var(--ls-text-soft);
}
.woocommerce .woocommerce-ordering { margin: 0 0 var(--ls-space-5); }
/* The blanket field rule in components.css does not reach this select on the
   archive pages, and Divi's generated CSS sets `.orderby { color:#666
   !important }` from a Divi Ecommerce-era theme option. So the sort control
   rendered as dim grey text on the dark field with no chevron.

   Two things are needed to win: the `.et-db #et-boc .et-l` prefix, because
   components.css claims selects at that weight and would otherwise keep
   `background-image: none` and its own padding; and `!important` on colour,
   which is the only way past Divi's important declaration. */
.woocommerce .woocommerce-ordering select.orderby,
.et-db #et-boc .et-l .woocommerce .woocommerce-ordering select.orderby {
    width: auto;
    min-width: 220px;
    min-height: var(--ls-control-h-sm);
    padding: 0 40px 0 var(--ls-control-pad-x);
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--ls-surface-2);
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.45) 50%),
        linear-gradient(135deg, rgba(255,255,255,0.45) 50%, transparent 50%);
    background-position:
        calc(100% - 19px) calc(50% + 2px),
        calc(100% - 13px) calc(50% + 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    border: 1px solid var(--ls-hairline-input);
    border-radius: var(--ls-radius-md);
    color: var(--ls-text) !important;
    font-family: var(--ls-font-body);
    font-size: var(--ls-body);
    cursor: pointer;
}
.woocommerce .woocommerce-ordering select.orderby option,
.et-db #et-boc .et-l .woocommerce .woocommerce-ordering select.orderby option { color: var(--ls-text); background-color: var(--ls-surface-2); }

/* ============================================================================
   FOOTER
   Built in the Theme Builder; this keeps its type consistent with the rest.
   ========================================================================= */

.et-l--footer h1, .et-l--footer h2, .et-l--footer h3,
.et-l--footer h4, .et-l--footer h5, .et-l--footer h6 {
    font-family: var(--ls-font-display);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.et-l--footer a { color: var(--ls-text-muted); }
.et-l--footer a:hover { color: var(--ls-red); }

/* ============================================================================
   PAGE CANVAS
   Divi's style-static.min.css paints #main-content white and only clears it
   for builder-built pages, via `.page.et_pb_pagebuilder_layout #main-content`.
   Any page Divi did NOT build -- search results, 404, blog archives, account
   sub-pages, plain WooCommerce pages -- therefore falls back to white on a
   black site. The cart/checkout/account pages only escape it because they
   happen to be builder-built and carry that class.

   Painted here with !important on the two ID selectors so the canvas never
   depends on a Divi page setting or on Divi's per-template cached inline CSS,
   which has already been observed missing on some page types (see the footer
   background regression, Aug 31 2026).

   .et_pb_post is deliberately NOT !important: Divi's own
   `.et_pb_blog_grid .et_pb_post` rule is more specific and must keep winning,
   because the Additional CSS intentionally paints blog-GRID cards white.
   ========================================================================= */

#main-content,
#left-area {
    background-color: transparent !important;
}

.et_pb_post {
    background-color: transparent;
}


/* ============================================================================
   SECTIONS AND ROWS — one rhythm for the builder pages.
   Divi's defaults are `.et_pb_section { padding: 4% 0 }` and
   `.et_pb_row { padding: 2% 0 }` — percentages of the viewport, so the gaps
   change with the window. :where() keeps this at Divi's own specificity, so
   any section that still carries its own padding in the builder keeps it;
   everything else lands on the three section sizes from style.css. Rows carry
   no padding of their own; the section does. Rows inside one section are
   separated by --ls-space-7.
   ========================================================================= */
:where(.et-db #et-boc .et-l) .et_pb_section {
    padding-top: var(--ls-section-md);
    padding-bottom: var(--ls-section-md);
}
:where(.et-db #et-boc .et-l) .et_pb_row {
    padding-top: 0;
    padding-bottom: var(--ls-space-7);
}
:where(.et-db #et-boc .et-l) .et_pb_row:last-child {
    padding-bottom: 0;
}