/* ============================================
    ECOMMERCE BLOCK PATTERNS — BLOCK ADAPTERS
    Loaded with ecommerce-patterns.css.

    ecommerce-patterns.css is the design: the
    classic ecommerce.css rules re-scoped under
    .boho-ecommerce. It alone cannot style the
    patterns, because core blocks wrap their
    content in markup the classic HTML never had
    (.wp-block-group__inner-container, .wp-block-
    button__link, the <details> that replaces the
    classic .faq-item div pair).

    This file bridges that gap and nothing else:
    every rule here has to exist because a core
    block adds a wrapper the classic sheet never
    styled. The classic design itself stays in
    ecommerce-patterns.css.
   ============================================ */

/* --------------------------------------------
    1. FULL-BLEED BANDS
    A classic band is a bare <section> that spans
    the viewport. A pattern band is a core group
    with align="full", which in a classic (PHP
    template) theme only inherits core's global
    styles, so it stops at the content column.
    The escape is generated for every band scope
    by inc/full-bleed.php, on the front end and in
    the editor canvas alike.
   -------------------------------------------- */

/* --------------------------------------------
    2. CORE COLUMNS IN THE HERO
    .hero-inner is a plain 2-column grid in the
    classic markup. The hero pattern uses
    core/columns, so its wrapper gap and the
    margin core adds below a column row have to
    be neutralised or the hero gains a strip of
    space the classic page never had.
   -------------------------------------------- */
.boho-ecommerce .hero-inner {
  margin-bottom: 0;
}

.boho-ecommerce .hero-inner > .wp-block-column {
  margin-bottom: 0;
}

/* --------------------------------------------
    3. PARAGRAPH SPACING INSIDE THE WRAPPERS
    The classic sheet puts its margins on the
    element that holds the text. In the patterns
    that element is the wrapper group, because
    core/paragraph has no className support, while
    theme.json gives every core/paragraph a 1.5rem
    bottom margin. Left alone that margin would sit
    inside the wrapper and win over the design's
    own value once the two collapse together, so
    the inner paragraph is neutralised and the
    wrapper keeps the spacing the design asked for.
   -------------------------------------------- */
.boho-ecommerce .wp-block-group > p {
  margin-block: 0;
}

/* --------------------------------------------
    4. BUTTONS
    The classic hero calls <a class="btn-primary">.
    The pattern uses core/button, so .btn-primary
    lands on the .wp-block-button wrapper while the
    actual link is a child that core paints with
    its own dark background, radius and padding.
    The wrapper already carries the design from
    ecommerce-patterns.css, so the inner link is
    reduced to an invisible, inheriting box.
   -------------------------------------------- */
.boho-ecommerce .wp-block-button.btn-primary,
.boho-ecommerce .wp-block-button.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.boho-ecommerce .wp-block-button.btn-primary .wp-block-button__link,
.boho-ecommerce .wp-block-button.btn-secondary .wp-block-button__link {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  background: none;
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  padding: 0;
  text-decoration: none;
}

/* A core button is a block wrapper, so the
   design's hover lift has to be restated. */
.boho-ecommerce .wp-block-button.btn-primary:hover .wp-block-button__link {
  background: none;
}

.boho-ecommerce .wp-block-button.btn-secondary:hover .wp-block-button__link {
  background: none;
}

/* core/buttons wraps a full-width rule of its
   own; the design wants the buttons centred with
   a fixed gap. */
.boho-ecommerce .hero-actions,
.boho-ecommerce .cta-actions {
  gap: 12px;
}

@media (max-width: 900px) {
  .boho-ecommerce .wp-block-button.btn-primary,
  .boho-ecommerce .wp-block-button.btn-secondary {
    width: 100%;
    justify-content: center;
  }

  .boho-ecommerce .wp-block-button.btn-primary .wp-block-button__link,
  .boho-ecommerce .wp-block-button.btn-secondary .wp-block-button__link {
    width: 100%;
    justify-content: center;
  }
}

/* --------------------------------------------
    5. CSS-MASK ICONS AND HTML ATOMS
    The pattern icons are empty groups carrying
    .boho-icon--<slug>, because inline SVG is
    stripped by the editor's rich-text sanitizers.
    patterns.css only maps the slug to --boho-icon;
    without a mask the element paints nothing, so
    the mask is applied to the wrapper itself and
    the design's font-size is converted to a box
    (the classic markup sized an <svg> instead).

    The hero store mockup and the marquee take the
    other route: they are single core/html nodes,
    which live outside rich text and keep the
    classic inline SVGs, so no mask is needed
    there. The html wrapper the editor puts around
    such a node is a flex child the design never
    had, so the atoms that sit inside design flex
    rows (the trust divider) have to be let out of
    it, and the mockup is kept centred on its own.
   -------------------------------------------- */
.boho-ecommerce [class*="boho-icon--"] {
  display: inline-block;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: var(--boho-icon);
  mask-image: var(--boho-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* .problem-icon is font-size: 2rem around a 24px
   SVG in the classic markup. */
div.problem-icon[class*="boho-icon--"] {
  width: 24px;
  height: 24px;
  margin-bottom: 16px;
}

/* .solution-card-icon is font-size: 2rem around a
   24px SVG. */
div.solution-card-icon[class*="boho-icon--"] {
  width: 24px;
  height: 24px;
  margin-bottom: 16px;
}

/* The problem and solution card icons are
   block-level in the classic markup, so they sit on
   their own line above the card title. */
div.problem-icon[class*="boho-icon--"],
div.solution-card-icon[class*="boho-icon--"] {
  display: block;
}

/* The hero mockup lives in core/html, so it is one
   node that already matches the classic markup
   (including the browser-chrome dots and the badge
   SVGs). It adds one structural bridge: the badges
   are positioned against .store-mockup-wrap rather
   than .hero-visual, because the pattern's columns
   are wider than the classic page's half-width
   column that happened to match the mockup. The
   wrap is width:fit-content, so its box is exactly
   the mockup's and the badge offsets land where the
   design drew them. */
.boho-ecommerce .store-mockup-wrap {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

.boho-ecommerce .hero-trust > .wp-block-html {
  display: contents;
}

/* --------------------------------------------
    6. FAQ AS core/details
    The classic FAQ is a div.faq-item holding a
    div.faq-question and a div.faq-answer, toggled
    by a page <script> that adds .open. The pattern
    uses core/details instead, which is a real
    <details> element: accessible, keyboard
    operable and needs no script.

    Core's save output is a bare <details> with a
    class-free <summary> and the answer paragraph
    as a direct child, so the classic .faq-question /
    .faq-answer rules (which were left out of
    ecommerce-patterns.css) are restated here
    against the elements the block emits.
   -------------------------------------------- */
.boho-ecommerce .faq-content .wp-block-details {
  border-top: 1px solid var(--border);
  margin-bottom: 0;
  padding: 0;
}

.boho-ecommerce .faq-content .wp-block-details:last-of-type {
  border-bottom: 1px solid var(--border);
}

.boho-ecommerce .faq-content .wp-block-details > summary {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* The classic markup had no disclosure marker, so
   the default triangle is replaced by a plus that
   turns into a minus while the answer is open. */
.boho-ecommerce .faq-content .wp-block-details > summary::-webkit-details-marker {
  display: none;
}

.boho-ecommerce .faq-content .wp-block-details > summary::marker {
  content: "";
}

.boho-ecommerce .faq-content .wp-block-details > summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
  transition: transform var(--transition);
}

.boho-ecommerce .faq-content .wp-block-details[open] > summary::after {
  content: "\2212";
}

.boho-ecommerce .faq-content .wp-block-details > p {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 0;
  padding-bottom: 20px;
}

/* --------------------------------------------
    7. MARQUEE
    The classic page renders <marquee>, which the
    pattern reproduces through core/html for parity.
    Both the element and the classic sheet's
    .marquee rules are unscoped on the element
    itself, so the pattern band only has to make
    sure the strip is not clipped by the group's
    own padding.
   -------------------------------------------- */
.boho-ecommerce .marquee {
  margin: 0;
}

/* --------------------------------------------
    8. EDITOR CANVAS
    The width escape itself is generated by
    inc/full-bleed.php along with every other band
    scope, for the canvas as well as the front end.
    What is left here is the canvas chrome, which
    is the one thing that cannot be generated: it
    applies to this scope only, because a background
    reset this wide would erase the band backgrounds
    the other scopes draw for themselves.
   -------------------------------------------- */

/* The canvas adds a background and border to every
   top-level block; the band already carries its own
   background from the design. */
.editor-styles-wrapper .boho-ecommerce.alignfull {
  border: none;
  background: transparent;
}