/* ============================================================================
   shopify.css — the dedicated Shopify section on the homepage.

   A dark band, so it reads as a distinct offer rather than another content
   block, sitting between the featured work and the testimonials: you see the
   work, learn this is a specialism, then get the social proof.

   The accent is Shopify's own green, used sparingly (rule, bullets, the small
   platform mark) against the Blizznex blue CTA — enough to signal the platform
   without the section looking like Shopify's own marketing.
   ========================================================================= */

.shopify-sec{
  --sh-green:#95BF47;
  --sh-green-deep:#5E8E3E;
  --sh-ink:#f4f5f7;
  --sh-muted:rgba(244,245,247,.62);
  --sh-line:rgba(244,245,247,.14);

  position:relative;isolation:isolate;overflow:hidden;
  background:#0b0f0c;
  color:var(--sh-ink);
  border-radius:var(--radius,20px);
  margin:6vh var(--pad-x,40px);
  padding:clamp(44px,6vw,86px) clamp(24px,4vw,68px);
}
/* soft green wash so the block has depth rather than reading as a flat panel */
.shopify-sec::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(60% 80% at 82% 18%,rgba(149,191,71,.22),transparent 62%),
    radial-gradient(50% 70% at 8% 92%,rgba(94,142,62,.18),transparent 60%);
}

.shopify-grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,4vw,72px);align-items:start;
}

/* ---- left column -------------------------------------------------------- */
/* Real credential, not a decorative label — Blizznex is an enrolled Shopify
   Partner, so the badge is built to echo the mark/wordmark lockup from
   Shopify's own Partner dashboard (bag icon on a dark chip, bold "Shopify" +
   light-italic "Partners") rather than a generic pill, with a separate
   verified tag alongside it so the claim reads as backed, not asserted. */
.shopify-badge{
  position:relative;
  display:inline-flex;align-items:center;gap:12px;
  padding:8px 20px 8px 8px;border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--sh-line);
  margin-bottom:1.6em;
}
.shopify-badge-mark{
  flex:none;width:32px;height:32px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#0b0f0c;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.shopify-badge-mark svg{width:17px;height:17px;color:var(--sh-green)}
.shopify-badge-word{
  display:inline-flex;align-items:baseline;gap:5px;
  font-size:clamp(15px,1.3vw,17px);line-height:1;letter-spacing:-.01em;color:#fff;
}
.shopify-badge-word b{font-weight:700}
.shopify-badge-word em{font-style:italic;font-weight:400;color:var(--sh-muted)}
.shopify-badge-divider{width:1px;height:16px;background:var(--sh-line);flex:none}
.shopify-badge-tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:clamp(11px,.95vw,12.5px);font-weight:600;letter-spacing:.03em;
  color:var(--sh-green);white-space:nowrap;
}
.shopify-badge-tag svg{width:12px;height:12px;flex:none}
.shopify-title{
  font-size:clamp(30px,4.2vw,60px);font-weight:500;line-height:1.04;
  letter-spacing:-.02em;margin:0 0 .5em;color:#fff;
}
.shopify-title em{font-style:normal;color:var(--sh-green)}
.shopify-lead{
  font-size:clamp(15px,1.2vw,19px);line-height:1.65;color:var(--sh-muted);
  max-width:52ch;margin:0 0 2em;
}

/* Short, scannable claims rather than a paragraph each — a two-up grid of
   checkmark chips reads in a glance instead of asking for four separate
   reads, which is the point given how text-heavy this section used to be. */
.shopify-points{
  list-style:none;margin:0 0 2.4em;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;
}
.shopify-point{display:flex;gap:10px;align-items:center}
.shopify-point-mark{
  flex:none;width:20px;height:20px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(149,191,71,.16);color:var(--sh-green);
}
.shopify-point-mark svg{width:11px;height:11px}
.shopify-point b{font-weight:600;color:#fff;font-size:clamp(13.5px,1vw,15px);line-height:1.3}

.shopify-cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.shopify-cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:.95em 1.8em;border-radius:50px;
  background:var(--blue);color:#fff;font-weight:600;font-size:.95rem;
  transition:transform .28s var(--bez-soft),box-shadow .28s var(--bez-soft);
}
.shopify-cta:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,89,227,.35)}
.shopify-cta svg{width:15px;height:15px}
.shopify-cta-alt{
  display:inline-flex;align-items:center;gap:8px;
  padding:.95em 1.6em;border-radius:50px;
  border:1px solid var(--sh-line);color:var(--sh-ink);font-weight:600;font-size:.95rem;
  transition:border-color .28s var(--bez-soft),background .28s var(--bez-soft);
}
.shopify-cta-alt:hover{border-color:var(--sh-green);background:rgba(149,191,71,.08)}

/* ---- right column: proof ------------------------------------------------ */
/* centred against the taller left column — pinned to the top it left a large
   dead corner bottom-right, which read as unfinished rather than airy */
.shopify-proof{
  position:relative;overflow:hidden;
  align-self:center;
  border:1px solid var(--sh-line);border-radius:16px;
  background:rgba(255,255,255,.03);
  padding:clamp(20px,2vw,28px);
}
/* a thin two-tone accent along the top edge — Shopify green fading into the
   Blizznex blue, the same pairing the section uses elsewhere, so the proof
   panel reads as this section's centrepiece rather than a plain list */
.shopify-proof::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--sh-green),var(--blue));
}
.shopify-proof-label{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sh-muted);margin-bottom:18px;
}
.shopify-store{
  display:flex;align-items:center;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--sh-line);
  transition:transform .28s var(--bez-soft);
}
.shopify-store:last-of-type{border-bottom:none}
.shopify-store:hover{transform:translateX(4px)}
.shopify-store-mark{
  flex:none;width:44px;height:44px;border-radius:11px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:600;letter-spacing:-.02em;color:#fff;
}
.shopify-store-body{min-width:0;flex:1}
.shopify-store-name{display:block;font-size:15px;font-weight:600;color:#fff;line-height:1.3}
.shopify-store-meta{display:block;font-size:12.5px;color:var(--sh-muted);margin-top:2px}
.shopify-store-arrow{
  flex:none;width:26px;height:26px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--sh-muted);background:rgba(255,255,255,.06);
  transition:background .25s var(--bez),color .25s var(--bez);
}
.shopify-store:hover .shopify-store-arrow{background:var(--sh-green);color:#0b0f0c}
.shopify-store-arrow svg{width:13px;height:13px}

.shopify-note{
  margin-top:20px;padding-top:18px;border-top:1px solid var(--sh-line);
  font-size:13px;line-height:1.6;color:var(--sh-muted);
}

/* ============================================================== RESPONSIVE = */
@media (max-width:900px){
  .shopify-grid{grid-template-columns:minmax(0,1fr);gap:32px}
}
@media (max-width:640px){
  .shopify-sec{margin:5vh var(--pad-x,16px);padding:34px 20px;border-radius:16px}
  .shopify-cta,.shopify-cta-alt{width:100%;justify-content:center}
  .shopify-badge{flex-wrap:wrap;padding:8px 16px 8px 8px}
  .shopify-badge-divider{display:none}
  .shopify-points{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .shopify-cta,.shopify-cta-alt,.shopify-store,.shopify-store-arrow{transition:none}
  .shopify-cta:hover,.shopify-store:hover{transform:none}
}