/* =============================================================================
   SHOPIMAL — MARKETING PAGES
   Build Brief §7.1 and §7.7. Home, About, Contact, Delivery, FAQ.

   These pages are edited in Elementor, so the styling lives here rather than in
   Elementor's own controls. A client changing a headline cannot break it.
   ========================================================================== */

/* Elementor's container should not fight the token gutters. */
.sh-page .e-con-inner,
.sh-page .elementor-widget-container{ max-width:100%; }

/* -----------------------------------------------------------------------------
   1. HERO — §7.1 section 3. One static hero. Never a carousel.
   -------------------------------------------------------------------------- */

.sh-hero{
  background:var(--grad); color:#fff;
  min-height:400px; display:flex; align-items:center;
  padding:var(--sp-9) 0;
}
@media (min-width:1024px){ .sh-hero{ min-height:480px; } }

.sh-hero__inner{
  max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:1fr; gap:var(--sp-7); align-items:center;
  width:100%; text-align:center;
}
@media (min-width:1024px){
  .sh-hero__inner{ grid-template-columns:1fr 1fr; text-align:left; gap:var(--sp-8); }
}

.sh-hero h1{ color:#fff; margin:0 0 var(--sp-4); }
.sh-hero p{ font-size:17px; line-height:1.6; color:rgba(255,255,255,.93); margin:0 0 var(--sp-6); max-width:46ch; }
@media (max-width:1023px){ .sh-hero p{ margin-inline:auto; } }
.sh-hero__buttons{ display:flex; gap:var(--sp-3); flex-wrap:wrap; }
@media (max-width:1023px){ .sh-hero__buttons{ justify-content:center; } }

/* Product collage, desktop only. §7.1 says text only on mobile. */
.sh-hero__collage{ display:none; }
@media (min-width:1024px){
  .sh-hero{ padding-block:var(--sp-7); }
  .sh-hero__collage{
    display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4);
    max-width:376px; margin-left:auto;
  }
  .sh-hero__collage > *{
    aspect-ratio:1; border-radius:var(--radius-lg); overflow:hidden;
    background:rgba(255,255,255,.14);
    display:flex; align-items:center; justify-content:center;
  }
  .sh-hero__collage > *:nth-child(1){ transform:translateY(-16px); }
  .sh-hero__collage > *:nth-child(4){ transform:translateY(16px); }
  .sh-hero__collage img{ width:100%; height:100%; object-fit:cover; display:block; }
}

/* -----------------------------------------------------------------------------
   2. TRUST BAR — §7.1 section 4
   -------------------------------------------------------------------------- */

.sh-trust{
  max-width:var(--container); margin-inline:auto; padding:var(--sp-7) var(--gutter);
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5);
}
@media (min-width:768px){ .sh-trust{ grid-template-columns:repeat(4,1fr); } }
.sh-trust__item{ text-align:center; }
.sh-trust__item svg{ color:var(--blue-600); margin-bottom:var(--sp-2); }
.sh-trust__t{ font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--blue-900); }
.sh-trust__d{ font-size:13px; color:var(--slate-500); margin-top:3px; }

/* -----------------------------------------------------------------------------
   3. SECTION SHELL
   -------------------------------------------------------------------------- */

.sh-band{ padding-block:var(--section-y); }
.sh-band--tint{ background:var(--slate-50); }
.sh-band__inner{ max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.sh-band__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-4);
  margin-bottom:var(--sp-6); flex-wrap:wrap;
}
.sh-band__head h2{ margin:0; }
.sh-band__head a{ font-family:var(--font-display); font-weight:600; font-size:15px; text-decoration:none; white-space:nowrap; }

/* -----------------------------------------------------------------------------
   4. CATEGORY GRID — §7.1 section 5. Whole card is a link.
   -------------------------------------------------------------------------- */

.sh-cats{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); list-style:none; margin:0; padding:0; }
@media (min-width:768px){ .sh-cats{ grid-template-columns:repeat(3,1fr); gap:var(--sp-6); } }

.sh-cat{
  background:var(--slate-0); border:1px solid var(--slate-200); border-radius:var(--radius-lg);
  overflow:hidden; transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sh-cat:hover{ box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.sh-cat a{ display:block; text-decoration:none; color:inherit; }
.sh-cat__img{
  aspect-ratio:1; background:var(--slate-50);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
@media (max-width:767px){ .sh-cat__img{ aspect-ratio:4/3; } }
.sh-cat__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.sh-cat__img .sh-img-placeholder{ width:100%; height:100%; }
.sh-cat__body{ padding:var(--sp-4); }
.sh-cat__name{ font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--blue-900); }
@media (max-width:767px){ .sh-cat__name{ font-size:15px; } }
.sh-cat__count{ font-size:13px; color:var(--slate-500); margin-top:3px; font-variant-numeric:tabular-nums; }

/* -----------------------------------------------------------------------------
   5. PROMO BAND — §7.1 section 7. Blue-only: pink would imply an offer.
   -------------------------------------------------------------------------- */

.sh-promo{
  background:var(--grad-blue); color:#fff;
  min-height:200px; display:flex; align-items:center; text-align:center;
  padding:var(--sp-8) 0;
}
.sh-promo__inner{ max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); width:100%; }
.sh-promo h2{ color:#fff; margin:0 0 var(--sp-3); }
.sh-promo p{ color:rgba(255,255,255,.9); font-size:16px; margin:0 0 var(--sp-5); }

/* -----------------------------------------------------------------------------
   6. WHY SHOPIMAL — §7.1 section 9
   -------------------------------------------------------------------------- */

.sh-why{ display:grid; grid-template-columns:1fr; gap:var(--sp-6); }
@media (min-width:768px){ .sh-why{ grid-template-columns:repeat(3,1fr); gap:var(--sp-7); } }
.sh-why h3{ font-size:18px; margin:0 0 var(--sp-2); }
.sh-why p{ font-size:15px; color:var(--slate-600); margin:0; line-height:1.65; }

/* -----------------------------------------------------------------------------
   7. NEWSLETTER — §7.1 section 10
   -------------------------------------------------------------------------- */

.sh-news{ background:var(--blue-900); color:#fff; padding-block:var(--sp-9); }
.sh-news__inner{
  max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter);
  display:grid; gap:var(--sp-5); align-items:center;
}
@media (min-width:1024px){ .sh-news__inner{ grid-template-columns:1fr 1fr; gap:var(--sp-8); } }
.sh-news h3{ color:#fff; margin:0 0 var(--sp-2); }
.sh-news p{ color:var(--blue-200); font-size:14px; margin:0; }
.sh-news__form{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.sh-news__form input[type="email"]{ flex:1 1 220px; border-color:transparent; }
.sh-news__small{ font-size:12.5px; color:var(--blue-300); margin-top:var(--sp-3); }

/* -----------------------------------------------------------------------------
   8. INNER PAGE SHELL — About, Contact, Delivery, FAQ, legal
   -------------------------------------------------------------------------- */

.sh-pagehero{
  background:var(--grad-blue); color:#fff; padding-block:var(--sp-9);
}
.sh-pagehero__inner{ max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.sh-pagehero h1{ color:#fff; margin:0 0 var(--sp-3); }
.sh-pagehero p{ color:rgba(255,255,255,.9); font-size:17px; margin:0; max-width:56ch; }

.sh-prose{ max-width:70ch; }
.sh-prose h2{ font-size:22px; margin:var(--sp-8) 0 var(--sp-3); }
.sh-prose h3{ font-size:18px; margin:var(--sp-6) 0 var(--sp-2); }
.sh-prose p,.sh-prose li{ font-size:16px; line-height:1.7; color:var(--slate-700); }
.sh-prose ul,.sh-prose ol{ padding-left:1.25em; margin-bottom:var(--sp-4); }
.sh-prose li{ margin-bottom:6px; }
.sh-prose table{ width:100%; border-collapse:collapse; margin:var(--sp-5) 0; font-size:15px; }
.sh-prose th,.sh-prose td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--slate-100); }
.sh-prose thead th{
  background:var(--blue-900); color:#fff;
  font-family:var(--font-display); font-weight:600; font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase;
}
.sh-prose tbody tr:nth-child(even){ background:var(--slate-25); }
.sh-prose td:last-child{ font-variant-numeric:tabular-nums; }

/* A placeholder the client has to replace. Deliberately impossible to miss. */
.sh-placeholder{
  border:2px dashed var(--warning);
  background:var(--warning-bg); color:var(--warning-fg);
  border-radius:var(--radius); padding:var(--sp-5); margin-block:var(--sp-5);
}
.sh-placeholder strong{ font-family:var(--font-display); display:block; margin-bottom:6px; }
.sh-placeholder p{ margin:0; font-size:14.5px; color:inherit; }

/* Contact */
.sh-contact{ display:grid; grid-template-columns:1fr; gap:var(--sp-7); align-items:start; }
@media (min-width:1024px){ .sh-contact{ grid-template-columns:1.2fr 1fr; gap:var(--sp-8); } }
.sh-contact__card{ background:var(--slate-50); border-radius:var(--radius); padding:var(--sp-6); }
.sh-contact__row{ padding-block:var(--sp-4); border-top:1px solid var(--slate-200); }
.sh-contact__row:first-child{ border-top:0; padding-top:0; }
.sh-contact__label{
  font-family:var(--font-display); font-weight:700; font-size:11.5px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--slate-500); margin-bottom:4px;
}
.sh-contact__value{ font-size:15.5px; color:var(--blue-900); }

/* FAQ groups */
.sh-faqgroup + .sh-faqgroup{ margin-top:var(--sp-8); }
.sh-faqgroup > h2{ font-size:20px; margin:0 0 var(--sp-4); }

/* -----------------------------------------------------------------------------
   9. ELEMENTOR CONTAINERS CARRYING OUR LAYOUT CLASSES

   Elementor's container sets display from its own custom property. Where a
   container carries one of the layout classes below, that class wins - the
   grid is the point of the class.
   -------------------------------------------------------------------------- */

.e-con.sh-band,.e-con.sh-band__inner,.e-con.sh-promo__inner,
.e-con.sh-hero,.e-con.sh-news{ display:block; }
.e-con.sh-why,.e-con.sh-trust,.e-con.sh-cats,
.e-con.sh-hero__inner,.e-con.sh-news__inner,.e-con.sh-contact{ display:grid; }
.e-con.sh-band__head{ display:flex; }
/* Full-bleed bands own their gutters through their own inner wrapper. */
.e-con.sh-hero,
.e-con.sh-band,
.e-con.sh-promo,
.e-con.sh-news,
.e-con.sh-pagehero,
.e-con.sh-trustwrap{
  --content-width:100%; max-width:100%; width:100%;
  padding-inline:0; padding-block:0; margin-inline:0;
}
.e-con.sh-band{ padding-block:var(--section-y); }
.e-con.sh-pagehero{ padding-block:var(--sp-9); }
.e-con.sh-hero{ padding-block:var(--sp-9); }
@media (min-width:1024px){ .e-con.sh-hero{ padding-block:var(--sp-7); } }
.e-con.sh-promo{ padding-block:var(--sp-8); }
.e-con.sh-news{ padding-block:var(--sp-9); }
.e-con > .elementor-widget{ width:100%; }
/* Inner wrappers keep the container width and the gutter. */
.e-con.sh-band__inner,
.e-con.sh-hero__inner,
.e-con.sh-promo__inner,
.e-con.sh-news__inner,
.e-con.sh-pagehero__inner{
  --content-width:var(--container); max-width:var(--container);
  margin-inline:auto; padding-inline:var(--gutter); padding-block:0; width:100%;
}

/* -----------------------------------------------------------------------------
   10. FULL-BLEED ON ELEMENTOR PAGES

   Astra still applies its own content padding on ordinary pages, which left
   the gradient page heroes inset by the container gutter instead of running
   edge to edge. The bands own their gutters.
   -------------------------------------------------------------------------- */

.elementor-page #primary,
.elementor-page #content > .ast-container,
.elementor-page .site-content > .ast-container{
  max-width:100%; width:100%;
  padding-left:0; padding-right:0; margin-left:0; margin-right:0;
}
.elementor-page .site-main,
.elementor-page .entry-content{ padding:0; margin:0; }
.elementor-page .ast-container{ display:block; }
/* Breadcrumbs keep their own gutter above the hero. */
.elementor-page .sh-breadcrumbs{ padding-bottom:var(--sp-4); }