/* =====================================================================================================
   v3-c-gate.css — the ONE guest price/register gate (App\Catalog\CatalogGuestPriceGate).
   DG-PRODUCT-PACK-EXPERIENCE-RUNTIME-10 · accepted DG-CATALOG-PACK-PRODUCT-EXPERIENCE-ARCHITECTURE-09 §5.1.

   Replaces the three gate systems (`.d-pricegate` PDP/Quick View, `.d-cardgate` cards, `.gated` pack page),
   deleted in the same change as their markup. Berry = guest unlock/register on every surface; the lock
   tile is vertically centred on the whole title + copy block. Two sizes: full (PDP / Quick View footer)
   and compact (cards, one link). Single-class selectors only.
   ===================================================================================================== */

.c-gate {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  row-gap: 14px;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--d-c-berry-line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--d-c-berry-wash), #fff 88%);
  color: var(--ink);
  text-align: left;
}

.c-gate__ico {
  display: grid;
  place-items: center;
  align-self: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--berry);
  color: #fff;
}

.c-gate__ico .ico {
  width: 19px;
  height: 19px;
  margin-top: 6px;
}

.c-gate__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

/* DG-MOBILE-STOREFRONT-POLISH-20Q (Mark): link (.c-gate__cta) 13 → 14px. 20R (Mark): the title 14.5px on tablet/desktop,
   16px on phones (≤720px, rule below). */
.c-gate__title {
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--berry);
}

.c-gate__copy {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
}

.c-gate__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
}

.c-gate__register {
  min-height: 44px;
}

.c-gate__register .ico {
  width: 16px;
  height: 16px;
}

.c-gate__signin {
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  min-height: 40px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

/* CORRECTION-11A: one clickable sentence — the prefix stays black and plain, only "Sign in" is the blue link */
.c-gate__signin-prefix {
  color: var(--ink);
  text-decoration: none;
}

.c-gate__signin-action {
  color: var(--d-c-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.c-gate__signin:hover .c-gate__signin-action {
  text-decoration-thickness: 2px;
}

.c-gate__signin:focus-visible,
.c-gate--compact:focus-visible {
  outline: none;
  box-shadow: var(--d-c-focus);
}

/* compact: every catalogue card — one link, one focus stop */
.c-gate--compact {
  column-gap: 10px;
  row-gap: 0;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
}

.c-gate--compact .c-gate__ico {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

.c-gate--compact .c-gate__ico .ico {
  width: 15px;
  height: 15px;
}

.c-gate__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--berry);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.c-gate__cta .ico {
  width: 13px;
  height: 13px;
}

.c-gate--compact:hover {
  border-color: var(--berry);
}

@media (max-width: 560px) {
  .c-gate {
    column-gap: 12px;
    padding: 14px;
  }

  .c-gate--compact {
    padding: 9px 10px;
  }

  /* #main / the Quick View render at zoom .9 here: 48px CSS keeps the gate actions ≥43px on screen */
  .c-gate__register,
  .c-gate__signin {
    min-height: 48px;
  }
}

/* DG-MOBILE-STOREFRONT-POLISH-20 (Mark) — on phones the "Already a customer?" prefix is hidden on every page and
   modal; the "Sign in" link itself remains. Desktop keeps the prefix. */
@media (max-width: 720px) {
  .c-gate__signin-prefix {
    display: none;
  }
}

/* DG-MOBILE-STOREFRONT-POLISH-20R (Mark): phones read the gate title at 16px. */
@media (max-width: 720px) {
  .c-gate__title {
    font-size: 16px;
  }
}