/* ============================================================
   Shortcode blocks — [shipping], [payments], [shipping-summary]
   (src/Shortcodes/, SHORTCODES.md). Loaded by the block itself,
   only on pages that contain one.

   The blocks live inside editor content of BOTH templates — v1
   (.article-content, .detail-description-text: Bootstrap-era rules
   for ul/li/p, line-height 2) and v2 (.gb-content: `> * + *` rhythm,
   list bullets, table styles). Hence:
     - every rule is scoped under .gbsc with two classes, which beats
       `.article-content li` / `.gb-content ul` (one class + tag);
     - no <p> and no <table> in the markup, so neither template's
       paragraph or table styling leaks in;
     - own colour tokens (v2 palette, checked for WCAG AA on white),
       font inherited from the page.
   ============================================================ */

.gbsc {
  --gbsc-ink: #1d242d;
  --gbsc-ink-2: #47586e;       /* 7.2 : 1 on white */
  --gbsc-line: #e3e1d8;
  --gbsc-soft: #f8f7f2;
  --gbsc-green: #1e7218;       /* 6.3 : 1 on white, 5.6 : 1 on --gbsc-green-bg */
  --gbsc-green-bg: #e9f4e9;
  --gbsc-navy: #092857;
  --gbsc-navy-bg: #e8ecf1;
  --gbsc-radius: 14px;
  color: var(--gbsc-ink);
  line-height: 1.45;
  text-align: left;
}
.gbsc, .gbsc *, .gbsc *::before, .gbsc *::after { box-sizing: border-box; }
.gbsc [hidden] { display: none !important; }
.gbsc .gbsc-ico { display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -.125em; }

/* ── Lists: carriers, payments ── */
.gbsc.gbsc-ship, .gbsc.gbsc-pay { margin: 1.25rem 0 1.75rem; }
.gbsc .gbsc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid var(--gbsc-line);
  border-radius: var(--gbsc-radius);
  overflow: hidden;
}
.gbsc .gbsc-item {
  list-style: none;
  margin: 0;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "logo name  price"
    "logo desc  price"
    "logo chips price";
  column-gap: 18px;
  align-items: start;
}
.gbsc .gbsc-item + .gbsc-item { border-top: 1px solid var(--gbsc-line); }
.gbsc .gbsc-item__logo {
  grid-area: logo;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
}
.gbsc .gbsc-item__logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  object-fit: contain;
}
.gbsc .gbsc-item__name { grid-area: name; font-weight: 600; font-size: 1.0625em; }
.gbsc .gbsc-item__desc { grid-area: desc; margin-top: 2px; color: var(--gbsc-ink-2); font-size: .9375em; }
.gbsc .gbsc-item__desc p, .gbsc .gbsc-item__desc div { margin: 0; line-height: inherit; }
.gbsc .gbsc-item__price {
  grid-area: price;
  align-self: center;
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
}
.gbsc .gbsc-item__note { display: block; margin-top: 2px; font-weight: 400; font-size: .8125em; }
.gbsc .gbsc-free { color: var(--gbsc-green); }

.gbsc .gbsc-chips { grid-area: chips; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gbsc .gbsc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--gbsc-navy-bg);
  color: var(--gbsc-navy);
  font-size: .8125em;
  line-height: 1.35;
}

/* "Only to X" chips: once the switcher picks a country every visible row serves it. */
.gbsc[data-gbsc-cc] .gbsc-chip--where { display: none; }

.gbsc .gbsc-empty {
  margin-top: 10px;
  padding: 14px 18px;
  border: 1px dashed var(--gbsc-line);
  border-radius: var(--gbsc-radius);
  color: var(--gbsc-ink-2);
}

/* ── Country switcher (markets delivering to several countries) ── */
.gbsc .gbsc-country { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.gbsc .gbsc-country__label { font-weight: 600; }
.gbsc .gbsc-country__group { display: flex; flex-wrap: wrap; gap: 8px; }
.gbsc .gbsc-country__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 6px 16px;
  border: 1px solid var(--gbsc-line);
  border-radius: 999px;
  background: #fff;
  color: var(--gbsc-ink);
  font: inherit;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.gbsc .gbsc-country__btn:hover { border-color: var(--gbsc-navy); }
.gbsc .gbsc-country__btn[aria-pressed="true"] { background: var(--gbsc-navy); border-color: var(--gbsc-navy); color: #fff; }
.gbsc .gbsc-country__btn img { display: block; width: 20px; height: 14px; margin: 0; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.gbsc .gbsc-country__select {
  min-height: 44px;
  max-width: 100%;
  padding: 6px 12px;
  border: 1px solid var(--gbsc-line);
  border-radius: 10px;
  background-color: #fff;
  color: var(--gbsc-ink);
  font: inherit;
}
/* v1 kills every focus ring with `*:focus{outline:none!important}` (dist/css/last.css);
   a keyboard user must still see where they are, hence !important here. */
.gbsc .gbsc-country__btn:focus-visible,
.gbsc .gbsc-country__select:focus-visible,
.gbsc a:focus-visible { outline: 2px solid var(--gbsc-navy) !important; outline-offset: 2px; }

/* ── Summary tiles ──
   The wrapper is a size container, so the tile count per row follows the
   width of the CONTENT column, not of the window: v1 articles are 850 px
   wide, v2 wider, a product description narrower still. */
.gbsc.gbsc-sum { margin: 1.25rem 0 1.75rem; container-type: inline-size; }
.gbsc .gbsc-sum__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@container (min-width: 900px) {
  .gbsc .gbsc-sum__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container (max-width: 379.98px) {
  .gbsc .gbsc-sum__grid { grid-template-columns: 1fr; gap: 8px; }
  .gbsc .gbsc-sum__tile { padding: 12px; align-items: center; }
  .gbsc .gbsc-sum__ico { width: 34px; height: 34px; }
  .gbsc .gbsc-sum__ico .gbsc-ico { width: 19px; height: 19px; }
}
.gbsc .gbsc-sum__tile {
  list-style: none;
  margin: 0;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--gbsc-soft);
  border: 1px solid var(--gbsc-line);
  border-radius: var(--gbsc-radius);
}
.gbsc .gbsc-sum__ico {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gbsc-green-bg);
  color: var(--gbsc-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gbsc .gbsc-sum__ico .gbsc-ico { width: 22px; height: 22px; }
.gbsc .gbsc-sum__text { min-width: 0; }
.gbsc .gbsc-sum__title { display: block; font-weight: 600; line-height: 1.3; }
.gbsc .gbsc-sum__sub { display: block; margin-top: 4px; color: var(--gbsc-ink-2); font-size: .875em; line-height: 1.4; }
.gbsc .gbsc-sum__sub a { color: var(--gbsc-navy); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 575.98px) {
  .gbsc .gbsc-item {
    padding: 14px 14px;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-rows: auto;
    grid-template-areas:
      "logo name  price"
      ".    desc  desc"
      ".    chips chips";
    column-gap: 12px;
  }
  .gbsc .gbsc-item__logo { align-self: start; height: 28px; }
  .gbsc .gbsc-item__price { align-self: start; }
}