/* PULP on WordPress - adaptation layer only.
   The design lives in pulp-store-site.css, unchanged from the static source (css/pulp.css).
   This file only removes what the theme (Nexter) and Elementor add around Composer sections,
   so each section renders edge to edge exactly as it did in the static build. */

/* Nexter content container: no gutter, no max-width, no title area around Composer pages */
.site-content .nxt-container-block-editor:has(.elementor-widget-uichemy-composer),
.site-content .nxt-container:has(.elementor-widget-uichemy-composer) { padding-inline: 0 !important; max-width: none !important; width: 100%; }
.site-content .nxt-container-block-editor:has(.elementor-widget-uichemy-composer) > .nxt-row,
.site-content .nxt-container:has(.elementor-widget-uichemy-composer) > .nxt-row { margin: 0; }
.site-content .nxt-row:has(.elementor-widget-uichemy-composer) > [class*="nxt-col"] { padding: 0; flex: 0 0 100%; max-width: 100%; }
.site-content article:has(.elementor-widget-uichemy-composer) > .entry-content { margin: 0; }
.site-content .elementor:has(.elementor-widget-uichemy-composer) { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; width: 100%; }
.site-content article:has(.elementor-widget-uichemy-composer) .entry-header,
.site-content article:has(.elementor-widget-uichemy-composer) .nxt-breadcrumbs { display: none; }
#content.site-content:has(.elementor-widget-uichemy-composer) { padding: 0; margin: 0; }

/* Elementor containers that only hold a Composer section: no padding, no gap, full width */
.elementor .e-con:has(> .elementor-widget-uichemy-composer),
.elementor .e-con:has(> .e-con-inner > .elementor-widget-uichemy-composer) {
  --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
  --padding-block-start: 0px; --padding-block-end: 0px; --padding-inline-start: 0px; --padding-inline-end: 0px;
  --gap: 0px; --row-gap: 0px; --column-gap: 0px; --margin-top: 0px; --margin-bottom: 0px;
  --content-width: 100%; max-width: 100%; padding: 0; gap: 0;
}
.elementor .e-con:has(> .elementor-widget-uichemy-composer) > .e-con-inner { max-width: none; padding: 0; gap: 0; }
.elementor .elementor-widget-uichemy-composer { width: 100%; max-width: 100%; margin: 0; }
.elementor:has(> .e-con > .elementor-widget-uichemy-composer) { gap: 0; }
.wrapper-main { overflow: visible; }

/* The source header is sticky at the top of <body>. Here it sits inside the header template's
   wrapper, so the wrapper itself becomes the sticky element (same top, same stacking). */
.wrapper-main > .elementor:has(.uichemy-header-1),
body > .elementor:has(.uichemy-header-1),
.elementor-location-header:has(.uichemy-header-1) { position: sticky; top: 0; z-index: 60; }
.uichemy-header-1 .hdr { position: relative; top: auto; }

/* WordPress menu in the header: same look as the source's plain links */
.uichemy-header-1 .nav ul { display: contents; list-style: none; margin: 0; padding: 0; }
.uichemy-header-1 .nav li { display: contents; }
.uichemy-header-1 .nav .current-menu-item > a, .uichemy-header-1 .nav .current_page_item > a,
.uichemy-header-1 .nav .current-menu-ancestor > a, .uichemy-header-1 .nav .current_page_parent > a { border-color: currentColor; }
.uichemy-header-1 .mnav ul { display: contents; list-style: none; margin: 0; padding: 0; }
.uichemy-header-1 .mnav li { display: contents; }

/* Composer sections are siblings of the main column, not children of <main>: give <main>-level
   padding classes the source put on <main> to the section root instead (see each page's root). */

/* Elementor containers use a custom property called --display for their own layout (value "flex"),
   and it inherits into the sections. The source uses --display for its display font: restate it on
   every Composer widget so the content inside inherits the source value again. */
.elementor-widget-uichemy-composer { --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif; }

/* WordPress's standard visually-hidden text (the theme's skip link uses it); the theme stylesheet that
   normally carries this rule is not loaded on PULP pages. */
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.screen-reader-text:focus { clip: auto !important; clip-path: none; display: block; height: auto; left: 5px; top: 5px; width: auto; z-index: 100000; padding: 15px 23px 14px; background: var(--cream); color: var(--ink); }

/* Product page: the quantity stepper and "Add to cart" sit side by side, but .btn-lg came out
   ~67px tall against a ~42px stepper. Give both one height. */
.pdp-info .qty { height: 56px; }
.pdp-info .qty button { padding: 0 16px; }
.pdp-info [data-add] { height: 56px; padding-block: 0; line-height: 1; }

/* Phones and small tablets: the grid drops from 12 to 6 columns at 900px (pulp-store-site.css), but many sections place
   their columns inline for 12 (grid-column:9/13 and the like) - lines that no longer exist, which squeezed text into
   one-word columns (About, Ingredients, Stockists, Flavours) or widened the page (Basket, Checkout). Stack them. */
@media (max-width: 900px) {
  .grid > [style*="grid-column"] { grid-column: 1 / -1 !important; }
}