/* Hand-authored tweaks that sit on top of the export.

Keep this separate from breakpoints.css, which is generated and gets rewritten
whenever page markup is re-imported.
*/

/* Comparison table ("Why Choose Wezal?") — desktop and tablet.

The table is three siblings: a header row, the frosted card holding the feature
rows, and a footer spacer. Only the card carries a background, so at these widths
"FEATURES" and "TYPICAL SUPPLEMENTS" sit directly on the photograph behind the
section while the rows below sit on glass. The phone layout has no such split —
its header is the card's first row, which is what makes it read better.

Give the glass to the wrapper that spans all three instead. Backgrounds can't just
be stacked here: backdrop-filter samples what is behind each element separately, so
a header panel and a body panel blur their own slice of the photo and leave a seam
where they meet. One panel, one blur, no seam.
*/
@media (min-width: 810px) {
  .framer-1n3pe1f {
    background-color: rgba(255, 255, 255, 0.29);
    -webkit-backdrop-filter: blur(32px);
    backdrop-filter: blur(32px);
    border-radius: 16px;
  }

  /* the body's own glass would double the tint over the wrapper's */
  .framer-go6kai {
    background-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
  }
}

/* Testimonials carousel — one band, not a ragged row.

Each card is `height: min-content` inside a pane that centres its slides, so a
two-line quote produced a visibly shorter, differently-aligned panel than a
four-line one. Pin the card to the pane height instead: the container already
carries `height: 100%`, so passing it through to the card itself makes every
panel the same size and the quotes stay centred within it. (Widths already come
from the pane — 1, 2 or 3 across by breakpoint.)
*/
.framer-slideshow [data-framer-name^="Testimonial Card"],
.framer-slideshow [data-framer-name^="Testimonial Card"] > * {
  height: 100%;
}

/* Product hero on phones.

The hero is pinned to 852px with overflow:hidden, but its own content needs about
1080px: the detail module (828px) holds a block whose content spills 179px past it.
The tail that falls outside - the shipping guarantee line and the whole "Benefits*" /
"Ingredients" accordion - is cut off, and the next section is drawn over the top. The
published template does the same; its accordion never opens, so nothing there
depended on those rows being visible or tappable. Ours does, so let the hero and the
boxes inside it take the height they need.
*/
@media (max-width: 809.98px) {
  .framer-1r9ugzb {
    height: auto !important;
    overflow: visible !important;
  }

  .framer-1d9xmah-container,
  .framer-1d9xmah-container > *,
  .framer-jgb2lu {
    height: auto !important;
  }
}

/* Nav on tablet (810-1439.98px).

The published template runs its phone nav - the 64px bar whose MENU label opens the
mobile sheet - all the way up to 1440px, and only swaps in the wide nav above that.
Framer emits one copy of a component per breakpoint, and the export captured only the
phone copy (wrapper hidden on tablet + desktop) and the desktop copy; the tablet copy
is simply missing, so between 810px and 1439.98px the site rendered with no nav at
all. Show the phone copy there instead, which is what the original does anyway.
*/
@media (min-width: 810px) and (max-width: 1439.98px) {
  .ssr-variant:has(nav[data-framer-name="Phone"]) {
    display: contents !important;
  }
}

/* Nav on product, collection and legal pages.

Those 28 pages nest the nav inside a chain of wrappers the export flattened with
`.frameship-contents{display:contents!important}` — and one of the flattened
wrappers is the very element Framer positions (`position:fixed;top:0;z-index:9`).
display:contents throws that box away, so below 1440px (where this copy of the nav
is the one on screen) the header dropped out of its fixed slot and into normal
flow, landing wherever the markup sits — 7,000px down a product page. No logo, no
MENU, no way back. Give that one wrapper its box again; the rest of the chain is
meant to be display:contents.
*/
.frameship-contents:has(> .ssr-variant > nav[data-framer-name="Phone"]) {
  display: block !important;
}

/* Brand Story Section — the left panel is now the Energy collection card.

That panel used to hold the "Our Philosophy" list on a cream card floating over its
own background photo. It's been replaced with the same Card_V2 markup the Collections
row uses for Energy, so the two read as one component and the panel is a single link
into /products/collection/energy.

Two things the card needs that its grid slot used to provide. Its 44px corners only
read if it doesn't bleed into the section edges, and on desktop this panel carries no
padding — the photo it used to hold was meant to run edge to edge — so give it the
same 24px inset the card has in the Collections row. (Tablet and phone already pad,
at 64px and 24px; those stand.) And below 1440px the panel is `height: min-content`,
so the card's `height: 100%` would collapse to just the label bar; give it the source
image's portrait ratio instead. On desktop the panel is a full-height flex column,
where `height: 100%` resolves normally.
*/
@media (min-width: 1440px) {
  [data-framer-name="Brand Principles Accordion"] {
    padding: 24px !important; /* the export's own <style> block is injected after this file */
  }
}

/* ...and the inset has to sit on the section's own surface, not its photograph.

The section is two 800px columns over a full-bleed beach photo: "About Wezal Content"
on the right is a solid cream panel inset 24px, and this one on the left used to hold
an image that covered its half edge to edge. Between them the photo was never actually
visible. Insetting the card uncovered a 24px frame of it, which reads as two stacked
photographs. Give this column the same cream the right one carries and the two halves
match again — the card floats on the section surface, the way it does in the
Collections row.
*/
[data-framer-name="Brand Principles Accordion"] {
  background-color: var(--token-d3525c20-f20a-4f9e-b6e5-06227345b2e6, rgb(241, 237, 233)) !important;
}

@media (max-width: 1439.98px) {
  [data-framer-name="Brand Principles Accordion"] > a[data-framer-name="Card_V2"] {
    height: auto !important;
    aspect-ratio: 4 / 5;
  }
}