/* ============================================
    ECOMMERCE BLOCK PATTERNS
    Scoped copy of assets/css/ecommerce.css for
    the boho/ecommerce-* patterns.

    Generated from ecommerce.css, then hand-edited
    only where the classic markup has no block
    equivalent. Do not edit the design here: change
    ecommerce.css and re-scope it, so the classic
    /ecommerce/ page and the patterns stay in step.

    Every selector is scoped under .boho-ecommerce,
    the class the patterns put on their scope group.

    Three deliberate differences from the classic
    sheet, all because the block markup differs:

    - The band selectors (.hero, #problems,
      #solution, #benefits, .cta-section,
      .pricing-teaser, #faq) are written in ROOT
      form ("div.boho-ecommerce#problems"). A
      pattern carries the scope class and the anchor
      id on the SAME element, so the descendant form
      ".boho-ecommerce #problems" would never match
      it and the band would lose its padding and
      background.

    - The FAQ rules (.faq-item / .faq-question /
      .faq-answer) are gone. The pattern uses
      core/details instead of the classic div pair,
      so ecommerce-blocks.css restates the design
      against the block's own classes.

    - ecommerce.css kept a .container inside every
      band. The patterns use core's constrained
      layout, which emits .wp-block-group__inner-
      container instead, so there is no .container to
      scope and the bands rely on their own padding.
   ============================================ */

/* ============================================
      HERO
  ============================================ */
  div.boho-ecommerce.hero{
    padding: 80px 24px 60px;
  }
  .boho-ecommerce .hero-inner{
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
  }
  .boho-ecommerce .hero-text{
    text-align: right;
  }
  .boho-ecommerce .hero-badge{
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-light);
    padding: 6px 16px;
    border-radius: var(--radius-xl);
    margin-bottom: 24px;
  }
  .boho-ecommerce .hero-headline{
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 800;
    line-height: 1.35;
    color: var(--text-primary);
    margin-bottom: 20px;
    letter-spacing: -0.02em;
  }
  .boho-ecommerce .accent{
    color: var(--accent);
  }
  .boho-ecommerce .hero-subtitle{
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--text-secondary);
    margin-bottom: 36px;
    max-width: 500px;
  }
  .boho-ecommerce .hero-actions{
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 32px;
  }
  .boho-ecommerce .btn-primary{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 14px 28px;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  }
  .boho-ecommerce .btn-primary:hover{
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(16,185,129,0.3);
  }
  .boho-ecommerce .btn-full{ width: 100%; justify-content: center; }
  .boho-ecommerce .btn-arrow{ font-size: 1rem; }
  .boho-ecommerce .btn-secondary{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 14px 28px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
  }
  .boho-ecommerce .btn-secondary:hover{
    border-color: var(--text-secondary);
    background: var(--paper-alt);
  }
  .boho-ecommerce .hero-trust{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-size: 0.78rem;
    color: var(--text-muted);
  }
  .boho-ecommerce .trust-dot{
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
    margin-left: 6px;
    animation: pulse-dot 2s ease-in-out infinite;
  }
  @keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }
  .boho-ecommerce .trust-divider{
    width: 1px;
    height: 16px;
    background: var(--border);
  }

  /* ============================================
      STORE MOCKUP
  ============================================ */
  .boho-ecommerce .hero-visual{
    position: relative;
    display: flex;
    justify-content: center;
  }
  .boho-ecommerce .store-mockup{
    width: 100%;
    max-width: 520px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--paper);
    box-shadow: var(--shadow-xl);
  }
  .boho-ecommerce .store-mockup .mockup-header{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--paper-alt);
    border-bottom: 1px solid var(--border);
  }
  .boho-ecommerce .store-mockup .mockup-dots{
    display: flex;
    gap: 6px;
  }
  .boho-ecommerce .store-mockup .dot{
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }
  .boho-ecommerce .store-mockup .dot-red { background: #ef4444; }
  .boho-ecommerce .store-mockup .dot-yellow { background: #f59e0b; }
  .boho-ecommerce .store-mockup .dot-green { background: #22c55e; }
  .boho-ecommerce .store-mockup .mockup-url{
    flex: 1;
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.7rem;
    color: var(--text-muted);
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px 12px;
    margin: 0 40px;
  }
  .boho-ecommerce .store-mockup .mockup-body{
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .boho-ecommerce .product-grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
  }
  .boho-ecommerce .product-card{
    background: var(--paper-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px;
    text-align: center;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  }
  .boho-ecommerce .product-card:hover{
    border-color: var(--accent);
    box-shadow: 0 2px 12px rgba(16,185,129,0.15);
    transform: translateY(-2px);
  }
  .boho-ecommerce .product-img{
    width: 100%;
    height: 60px;
    background: var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
  }
  .boho-ecommerce .product-name{
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
  }
  .boho-ecommerce .product-price{
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--accent);
    margin-bottom: 8px;
  }
  .boho-ecommerce .product-btn{
    font-family: var(--font-body);
    font-size: 0.55rem;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    border-radius: var(--radius-sm);
    padding: 5px 8px;
    cursor: pointer;
    transition: background var(--transition);
  }
  .boho-ecommerce .product-btn:hover{
    background: var(--accent-hover);
  }
  .boho-ecommerce .mockup-footer{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
  }
  .boho-ecommerce .mockup-footer .mini-stat{
    padding: 10px;
    background: var(--paper-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-align: center;
  }
  .boho-ecommerce .mockup-footer .mini-stat-num{
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 3px;
  }
  .boho-ecommerce .mockup-footer .mini-stat-label{
    font-size: 0.5rem;
    color: var(--text-muted);
    line-height: 1.2;
  }

  /* Floating Badges */
  .boho-ecommerce .floating-badge{
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    animation: float 4s ease-in-out infinite;
  }
  .boho-ecommerce .fb-icon{
    font-size: 1.1rem;
  }
  .boho-ecommerce .badge-cart{
    top: 15%;
    left: -12px;
    animation-delay: 0s;
  }
  .boho-ecommerce .badge-ship{
    top: 55%;
    right: -12px;
    animation-delay: 1.5s;
  }
  .boho-ecommerce .badge-analytics{
    bottom: 8%;
    left: 10%;
    animation-delay: 3s;
  }
  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }

  /* ============================================
      MARQUEE
  ============================================ */
  .boho-ecommerce .marquee{
    display: block;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 18px 0;
    overflow: hidden;
    white-space: nowrap;
    background: var(--paper-alt);
  }
  .boho-ecommerce .marquee span{
    margin: 0 32px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.05em;
  }
  .boho-ecommerce .marquee span::before{
    content: '·';
    color: var(--accent);
    padding-left: 32px;
  }
  .boho-ecommerce .marquee span:first-child::before{
    display: none;
  }

  /* ============================================
      SECTION HEADERS
  ============================================ */
  .boho-ecommerce .section-header{
    text-align: center;
    margin-bottom: 48px;
  }
  .boho-ecommerce .section-tag{
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-light);
    padding: 5px 14px;
    border-radius: var(--radius-xl);
    margin-bottom: 14px;
  }
  .boho-ecommerce .tag-light{
    background: rgba(16,185,129,0.15);
    color: var(--accent);
  }
  .boho-ecommerce .section-title{
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 8px;
    letter-spacing: -0.02em;
  }
  .boho-ecommerce .section-desc{
    font-size: 0.9rem;
    color: var(--text-muted);
  }

  /* ============================================
      PROBLEM SECTION
  ============================================ */
  div.boho-ecommerce#problems{
    padding: 80px 24px;
  }
  .boho-ecommerce .problem-content{
    max-width: 1100px;
    margin: 0 auto;
  }
  .boho-ecommerce .problem-intro{
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-secondary);
    margin-bottom: 40px;
    text-align: center;
  }
  .boho-ecommerce .problem-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .boho-ecommerce .problem-card{
    padding: 28px 24px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  }
  .boho-ecommerce .problem-card:hover{
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
  .boho-ecommerce .problem-icon{
    font-size: 2rem;
    margin-bottom: 16px;
  }
  .boho-ecommerce .problem-title{
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
  }
  .boho-ecommerce .problem-desc{
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.65;
  }

  /* ============================================
      SOLUTION SECTION
  ============================================ */
  div.boho-ecommerce#solution{
    padding: 80px 24px;
    background: var(--paper-alt);
  }
  .boho-ecommerce .solution-content{
    max-width: 1000px;
    margin: 0 auto;
  }
  .boho-ecommerce .solution-intro{
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 40px;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  .boho-ecommerce .solution-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
  }
  .boho-ecommerce .solution-card{
    padding: 28px 24px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  }
  .boho-ecommerce .solution-card:hover{
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
  .boho-ecommerce .solution-card-icon{
    font-size: 2rem;
    margin-bottom: 16px;
  }
  .boho-ecommerce .solution-card-title{
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
  }
  .boho-ecommerce .solution-card-desc{
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.65;
  }

  /* ============================================
      BENEFITS / OUTCOMES
  ============================================ */
  div.boho-ecommerce#benefits{
    padding: 80px 24px;
  }
  .boho-ecommerce .outcomes-grid{
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
  }
  .boho-ecommerce .outcome-card{
    padding: 32px 24px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  }
  .boho-ecommerce .outcome-card:hover{
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
  .boho-ecommerce .outcome-icon{
    font-size: 1.4rem;
    font-family: var(--font-heading);
    font-weight: 900;
    color: var(--accent);
    margin-bottom: 16px;
    opacity: 0.7;
  }
  .boho-ecommerce .outcome-title{
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
  }
  .boho-ecommerce .outcome-desc{
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.7;
  }

  /* ============================================
      CTA SECTION
  ============================================ */
  div.boho-ecommerce.cta-section{
    padding: 80px 24px;
    background: var(--paper-alt);
  }
  .boho-ecommerce .cta-content{
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
  }
  .boho-ecommerce .cta-text{
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.75;
    margin-bottom: 28px;
  }
  .boho-ecommerce .cta-actions{
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  /* ============================================
       PRICING TEASER
  ============================================ */
  div.boho-ecommerce.pricing-teaser{
    padding: 80px 24px;
    background: var(--paper-alt);
    text-align: center;
  }
  .boho-ecommerce.pricing-teaser .section-desc{
    text-align: center;
    margin-inline: auto;
  }
  .boho-ecommerce .pricing-teaser-content{
    max-width: 600px;
    margin: 0 auto;
  }
  .boho-ecommerce .pricing-range-label{
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
  }
  .boho-ecommerce .pricing-range-value{
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--accent);
    margin-bottom: 8px;
  }
  .boho-ecommerce .pricing-range-note{
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 24px;
  }

  /* ============================================
       FAQ SECTION
       The classic .faq-item / .faq-question /
       .faq-answer rules are intentionally absent:
       the pattern renders core/details, so
       ecommerce-blocks.css restates the design
       against the <summary> and answer <p> that
       core's save output emits.
  ============================================ */

  /* ============================================
      CONTACT SECTION
      Carried over from ecommerce.css so the scope
      is complete on its own. boho/contact-form
      renders the same shared template part, and
      contact-section.css also styles the block
      instance; this scope simply keeps the
      ecommerce page's own numbers in the file
      that serves it.
  ============================================ */
  .boho-ecommerce .contact-section{
    background: var(--ink);
    padding: 80px 24px;
  }
  .boho-ecommerce .contact-inner{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
  }
  .boho-ecommerce .contact-headline{
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 3vw, 2rem);
    font-weight: 800;
    color: #fff;
    margin-bottom: 16px;
    line-height: 1.35;
  }
  .boho-ecommerce .accent-light{ color: var(--accent); }
  .boho-ecommerce .contact-body{
    font-size: 0.88rem;
    color: rgba(255,255,255,0.45);
    line-height: 1.7;
    margin-bottom: 28px;
  }
  .boho-ecommerce .contact-links{
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .boho-ecommerce .contact-link{
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.55);
    padding: 12px 16px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-md);
    transition: border-color var(--transition), color var(--transition);
  }
  .boho-ecommerce .contact-link:hover{
    color: var(--accent);
    border-color: rgba(16,185,129,0.3);
  }
  .boho-ecommerce .contact-link-icon{
    width: 36px;
    height: 36px;
    background: rgba(16,185,129,0.1);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
  }

  /* Form */
  .boho-ecommerce .contact-form{
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .boho-ecommerce .form-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .boho-ecommerce .form-group{ display: flex; flex-direction: column; gap: 6px; }
  .boho-ecommerce .form-label{
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
  }
  .boho-ecommerce .form-input{
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.85rem;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color var(--transition), background var(--transition);
  }
  .boho-ecommerce .form-input::placeholder{ color: rgba(255,255,255,0.25); }
  .boho-ecommerce .form-input:focus{
    border-color: var(--accent);
    background: rgba(16,185,129,0.06);
  }
  .boho-ecommerce textarea.form-input{ resize: vertical; min-height: 100px; }
  .boho-ecommerce .form-select{
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='rgba(255,255,255,0.4)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 14px center;
    padding-left: 36px;
  }
  .boho-ecommerce .form-select option{
    background: var(--ink);
    color: #fff;
  }

  /* ============================================
      HORIZONTAL OVERFLOW
      The band escape is generated for every band
      scope by inc/full-bleed.php, on the front end
      as well as in the editor canvas. It sizes the
      band with 100vw, which includes the scrollbar,
      so the page needs its overflow kept in check
      where an Ecommerce pattern is what is being
      rendered. global.css already sets
      body { overflow-x: hidden }; this restates it
      for this scope so a pattern-built page still
      holds if that global default is ever relaxed.
  ============================================ */
  body.boho-ecommerce-page {
    overflow-x: hidden;
  }

  /* ============================================
      RESPONSIVE
  ============================================ */
  @media (max-width: 900px) {
    .boho-ecommerce .hero-inner { grid-template-columns: 1fr; text-align: center; }
    .boho-ecommerce .hero-text { text-align: center; }
    .boho-ecommerce .hero-subtitle { max-width: 600px; margin-left: auto; margin-right: auto; }
    .boho-ecommerce .hero-actions { justify-content: center; }
    .boho-ecommerce .hero-trust { justify-content: center; }
    .boho-ecommerce .problem-grid { grid-template-columns: 1fr 1fr; }
    .boho-ecommerce .contact-inner { grid-template-columns: 1fr; gap: 32px; }
    .boho-ecommerce .form-row { grid-template-columns: 1fr; }
    .boho-ecommerce .cta-actions { flex-direction: column; }
    .boho-ecommerce .btn-primary, .boho-ecommerce .btn-secondary { width: 100%; justify-content: center; }
    .boho-ecommerce .floating-badge { display: none; }
  }

  @media (max-width: 600px) {
    div.boho-ecommerce.hero{ padding: 60px 20px 40px; }
    .boho-ecommerce .problem-grid { grid-template-columns: 1fr; }
    .boho-ecommerce .solution-grid { grid-template-columns: 1fr; }
    .boho-ecommerce .outcomes-grid { grid-template-columns: 1fr; }
    .boho-ecommerce .mockup-url { display: none; }
    .boho-ecommerce .product-grid { grid-template-columns: 1fr 1fr; }
  }