/* ══════════════════════════════════════════════════════════════════════
   Shipping Guidelines — front-end styles
   Accent is injected at runtime as --sg-accent / --sg-accent-dk / --sg-accent-lt
   (set in the admin settings). Falls back to teal if not provided.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --sg-accent:#0f766e; --sg-accent-dk:#0b574f; --sg-accent-lt:#e6f5f3;
  --sg-ink:#0f172a; --sg-body:#334155; --sg-muted:#64748b;
  --sg-line:#e2e8f0; --sg-surface:#ffffff; --sg-bg:#f8fafc;
  --sg-danger:#dc2626; --sg-danger-bg:#fef2f2; --sg-danger-line:#fecaca;
  --sg-warn:#b45309; --sg-warn-bg:#fffbeb; --sg-warn-line:#fde68a;
  --sg-radius:14px; --sg-radius-sm:10px;
  --sg-shadow:0 1px 3px rgba(15,23,42,.06),0 8px 28px rgba(15,23,42,.05);
  --sg-font:'Manrope',system-ui,-apple-system,"Segoe UI",sans-serif;
}
.sg-page *{ box-sizing:border-box; }
.sg-page{ font-family:var(--sg-font); color:var(--sg-body); background:var(--sg-bg); line-height:1.65; }
.sg-wrap{ max-width:1120px; margin:0 auto; padding:0 22px; }
.sg-page h1,.sg-page h2{ color:var(--sg-ink); line-height:1.2; letter-spacing:-.01em; }
.sg-page a{ color:var(--sg-accent); text-decoration:none; }
.sg-page a:hover{ text-decoration:underline; }

/* ── Hero ────────────────────────────────────────────────────────────── */
.sg-hero{
  background:linear-gradient(135deg,var(--sg-accent),var(--sg-accent-dk));
  color:#fff; padding:54px 0 48px;
}
.sg-hero .sg-wrap{ max-width:1120px; }
.sg-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.85); margin:0 0 12px;
}
.sg-hero h1{ color:#fff; font-size:clamp(28px,5vw,42px); font-weight:800; margin:0 0 14px; }
.sg-hero-sub{ color:rgba(255,255,255,.9); font-size:clamp(15px,2.2vw,18px); max-width:760px; margin:0; }
.sg-flag{ font-size:1.1em; }

.sg-hero-region{ padding:40px 0 34px; }
.sg-breadcrumb{ font-size:13px; color:rgba(255,255,255,.8); margin-bottom:14px; display:flex; gap:8px; align-items:center; }
.sg-breadcrumb a{ color:#fff; opacity:.92; }
.sg-breadcrumb span[aria-hidden]{ opacity:.55; }
.sg-transit{
  margin:16px 0 0; display:inline-flex; gap:10px; align-items:center; flex-wrap:wrap;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25);
  padding:9px 14px; border-radius:999px; font-size:13.5px; color:#fff;
}
.sg-transit-label{ font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:11px; opacity:.85; }

/* ── Hub: region cards ───────────────────────────────────────────────── */
.sg-region-grid-wrap{ padding:42px 22px 8px; }
.sg-region-grid{
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));
}
.sg-region-card{
  display:flex; flex-direction:column; gap:12px;
  background:var(--sg-surface); border:1px solid var(--sg-line);
  border-radius:var(--sg-radius); padding:24px; box-shadow:var(--sg-shadow);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  color:var(--sg-body);
}
.sg-region-card:hover{
  transform:translateY(-3px); border-color:var(--sg-accent);
  box-shadow:0 6px 20px rgba(15,23,42,.10),0 18px 50px rgba(15,23,42,.08);
  text-decoration:none;
}
.sg-region-card-top{ display:flex; align-items:center; gap:12px; }
.sg-region-card-top .sg-flag{ font-size:30px; line-height:1; }
.sg-region-card h2{ font-size:20px; font-weight:800; margin:0; }
.sg-region-blurb{ font-size:14px; color:var(--sg-muted); margin:0; flex:1; }
.sg-region-meta{ display:flex; gap:8px; flex-wrap:wrap; }
.sg-chip{
  display:inline-block; font-size:11.5px; font-weight:700; color:var(--sg-accent-dk);
  background:var(--sg-accent-lt); border-radius:999px; padding:4px 11px;
}
.sg-region-go{ font-weight:800; color:var(--sg-accent); font-size:14px; }

/* ── DDP service note ────────────────────────────────────────────────── */
.sg-ddp-note{
  background:var(--sg-warn-bg); border:1px solid var(--sg-warn-line);
  border-left:4px solid var(--sg-warn); border-radius:var(--sg-radius-sm);
  padding:14px 18px; font-size:13.5px; color:#92400e; margin:34px 0;
}
.sg-ddp-note strong{ color:#78350f; }

/* ── Region body: TOC + sections ─────────────────────────────────────── */
.sg-region-body{
  display:grid; grid-template-columns:230px 1fr; gap:36px;
  padding:38px 22px 20px; align-items:start;
}
.sg-toc{
  position:sticky; top:24px; align-self:start;
  background:var(--sg-surface); border:1px solid var(--sg-line);
  border-radius:var(--sg-radius-sm); padding:18px 18px 14px;
}
.sg-toc-title{
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.1em;
  color:var(--sg-muted); margin:0 0 10px;
}
.sg-toc ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.sg-toc a{ font-size:13.5px; color:var(--sg-body); font-weight:600; }
.sg-toc a:hover{ color:var(--sg-accent); }

.sg-sections{ min-width:0; display:flex; flex-direction:column; gap:20px; }
.sg-section{
  background:var(--sg-surface); border:1px solid var(--sg-line);
  border-radius:var(--sg-radius); padding:24px 26px; box-shadow:var(--sg-shadow);
  scroll-margin-top:18px;
}
.sg-section-title{
  display:flex; align-items:center; gap:11px;
  font-size:19px; font-weight:800; margin:0 0 16px;
}
.sg-section-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:9px; font-size:18px;
  background:var(--sg-accent-lt); flex:0 0 auto;
}
.sg-section-prohibited .sg-section-icon{ background:var(--sg-danger-bg); }
.sg-section-restricted .sg-section-icon{ background:var(--sg-warn-bg); }

/* Bullet lists (size limits, notes) */
.sg-bullet-list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px; }
.sg-bullet-list li{
  position:relative; padding-left:22px; font-size:14.5px; color:var(--sg-body);
}
.sg-bullet-list li::before{
  content:''; position:absolute; left:4px; top:9px; width:7px; height:7px;
  border-radius:50%; background:var(--sg-accent);
}

/* Tag lists (prohibited / restricted) */
.sg-tag-list{ margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:9px; }
.sg-tag{
  display:inline-flex; align-items:flex-start; gap:8px;
  font-size:13.5px; font-weight:600; padding:8px 13px; border-radius:9px;
  max-width:100%;
}
.sg-tag-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%; font-size:11px; font-weight:800;
  color:#fff; flex:0 0 auto; margin-top:1px;
}
.sg-section-prohibited .sg-tag{ background:var(--sg-danger-bg); color:#991b1b; border:1px solid var(--sg-danger-line); }
.sg-section-prohibited .sg-tag-mark{ background:var(--sg-danger); }
.sg-section-restricted .sg-tag{ background:var(--sg-warn-bg); color:#92400e; border:1px solid var(--sg-warn-line); }
.sg-section-restricted .sg-tag-mark{ background:var(--sg-warn); }

/* ── Contact CTA ─────────────────────────────────────────────────────── */
.sg-contact-cta{
  background:linear-gradient(135deg,var(--sg-accent),var(--sg-accent-dk));
  color:#fff; border-radius:var(--sg-radius); padding:26px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.sg-contact-cta p{ margin:0; color:rgba(255,255,255,.95); font-size:15px; max-width:620px; }
.sg-btn{
  display:inline-block; background:#fff; color:var(--sg-accent-dk);
  font-weight:800; font-size:14.5px; padding:12px 22px; border-radius:10px; white-space:nowrap;
}
.sg-btn:hover{ text-decoration:none; opacity:.92; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width:880px){
  .sg-region-body{ grid-template-columns:1fr; gap:18px; }
  .sg-toc{ position:static; }
  .sg-toc ul{ flex-direction:row; flex-wrap:wrap; gap:8px 16px; }
}
@media (max-width:560px){
  .sg-hero{ padding:40px 0 34px; }
  .sg-section{ padding:20px 18px; }
  .sg-contact-cta{ flex-direction:column; align-items:flex-start; }
}