/* ============================================================================
 * oga-storefront.css — Tourist Shop + Travel Choice (201000.2)
 * Marketplace-style patterns (department search, quad cards, product rails,
 * stars, deal + choice badges) built only from the OGAICE tokens.
 * ==========================================================================*/

/* ── Trust strip ─────────────────────────────────────────────────────── */
.oga-trust { background: var(--oga-cream); border-block: 1px solid var(--oga-border); }
.oga-trust__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--oga-space-md); margin: 0 auto; padding-block: 14px; list-style: none; }
.oga-trust__list li { display: flex; align-items: center; gap: 10px; font-size: var(--oga-text-sm); font-weight: 600; color: var(--oga-ink-2); }
.oga-trust__icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--oga-primary-50); color: var(--oga-primary); }

/* ── Department search ───────────────────────────────────────────────── */
.oga-search-form--dept { display: flex; align-items: stretch; max-width: 640px; border: 2px solid var(--oga-border-2); border-radius: var(--oga-radius-md); background: #fff; overflow: hidden; }
.oga-search-form--dept:focus-within { border-color: var(--oga-primary); box-shadow: var(--oga-focus); }
.oga-search-form__dept { flex: none; max-width: 130px; padding: 0 12px; border: 0; border-right: 1px solid var(--oga-border); background: var(--oga-bg-soft); color: var(--oga-ink-2); font: inherit; font-size: var(--oga-text-sm); font-weight: 600; }
.oga-search-form--dept .oga-search-form__input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; padding: 14px 14px; background: transparent; font: inherit; }
.oga-search-form--dept .oga-search-form__btn { flex: none; border-radius: 0; padding-inline: 20px; }

/* ── Buttons (small) ─────────────────────────────────────────────────── */
.oga-btn--sm { padding: 8px 14px; font-size: 14px; }

/* ── Quad cards ("shop by category") ─────────────────────────────────── */
.oga-quads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--oga-space-md); margin-bottom: var(--oga-space-lg); }
.oga-quad { display: flex; flex-direction: column; gap: 12px; padding: 18px; background: #fff; border: 1px solid var(--oga-border); border-radius: var(--oga-radius-md); color: var(--oga-ink); text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
.oga-quad:hover { transform: translateY(-3px); box-shadow: var(--oga-shadow-2); border-color: var(--oga-primary-100); text-decoration: none; }
.oga-quad__title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; font-weight: 700; }
.oga-quad__icon { color: var(--oga-primary); display: inline-grid; }
.oga-quad__mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.oga-quad__cell { display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--oga-radius); background: var(--oga-bg-soft); color: var(--oga-ink-muted); }
.oga-quad__cell img { width: 100%; height: 100%; object-fit: cover; }
.oga-quad__cta { margin-top: auto; font-size: var(--oga-text-sm); font-weight: 700; color: var(--oga-primary); }
.oga-quad:hover .oga-quad__cta { text-decoration: underline; }

/* ── Rail ────────────────────────────────────────────────────────────── */
.oga-rail { position: relative; }
.oga-rail__track { display: flex; gap: var(--oga-space-md); margin: 0; padding: 4px 2px 14px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; overscroll-behavior-x: contain; }
.oga-rail__track:focus-visible { outline: 0; box-shadow: var(--oga-focus); border-radius: var(--oga-radius); }
.oga-rail__item { flex: 0 0 clamp(200px, 22%, 260px); scroll-snap-align: start; display: flex; }
.oga-storefront--travel .oga-rail__item { flex-basis: clamp(240px, 28%, 320px); }
.oga-rail__btn { position: absolute; top: 38%; z-index: 2; display: grid; place-items: center; width: 40px; height: 72px; border: 1px solid var(--oga-border-2); border-radius: var(--oga-radius); background: #fff; color: var(--oga-ink); font-size: 26px; line-height: 1; cursor: pointer; box-shadow: var(--oga-shadow-2); }
.oga-rail__btn[hidden] { display: none; }
.oga-rail__btn:hover { background: var(--oga-primary-50); }
.oga-rail__btn:focus-visible { outline: 0; box-shadow: var(--oga-focus); }
.oga-rail__btn--prev { left: -8px; }
.oga-rail__btn--next { right: -8px; }

/* ── Product / tour card ─────────────────────────────────────────────── */
.oga-pcard { display: flex; flex-direction: column; width: 100%; background: #fff; border: 1px solid var(--oga-border); border-radius: var(--oga-radius-md); overflow: hidden; transition: box-shadow .2s, border-color .2s; }
.oga-pcard:hover, .oga-pcard:focus-within { box-shadow: var(--oga-shadow-2); border-color: var(--oga-primary-100); }
.oga-pcard__media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--oga-bg-soft); }
.oga-pcard--tour .oga-pcard__media { aspect-ratio: 3 / 2; }
.oga-pcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oga-pcard__fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--oga-primary); }
.oga-pcard__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 6px; padding: 14px 16px 16px; }
.oga-pcard__title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.35; }
.oga-pcard__title a { color: var(--oga-ink); text-decoration: none; }
.oga-pcard__title a:hover { color: var(--oga-primary); text-decoration: underline; }
.oga-pcard__meta { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--oga-text-sm); color: var(--oga-ink-muted); }
.oga-pcard__meta .oga-icon { color: var(--oga-primary); }
.oga-pcard__price { margin: 0; margin-top: auto; padding-top: 4px; font-size: 18px; font-weight: 800; color: var(--oga-ink); }
.oga-pcard__price del { margin-right: 4px; font-size: 14px; font-weight: 500; color: var(--oga-ink-muted); }
.oga-pcard__price ins { text-decoration: none; }
.oga-pcard__price--ask { font-size: 14px; font-weight: 600; color: var(--oga-ink-muted); }
.oga-pcard__from { font-size: 12px; font-weight: 600; color: var(--oga-ink-muted); text-transform: uppercase; letter-spacing: .06em; }
.oga-pcard .oga-btn--block { margin-top: 6px; }

/* Deal badge (red, top-left) and Travel Choice badge (navy, top-left). */
.oga-pcard__deal { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 3px 9px; border-radius: var(--oga-radius); background: var(--oga-accent); color: #fff; font-size: 12px; font-weight: 800; }
.oga-choice { position: absolute; top: 10px; left: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; border-radius: var(--oga-radius-pill); background: var(--oga-primary); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; box-shadow: var(--oga-shadow-1); }
.oga-choice .oga-icon { color: #fff; }

/* ── Stars (CSS-only fill, no images) ────────────────────────────────── */
.oga-stars { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--oga-ink-muted); }
.oga-stars__bar { position: relative; display: inline-block; width: 5em; height: 1em; font-size: 15px; line-height: 1; color: var(--oga-border-2); }
.oga-stars__bar::before, .oga-stars__fill::before { content: "★★★★★"; letter-spacing: 0; }
.oga-stars__fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: #f2a516; white-space: nowrap; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
	.oga-quads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.oga-trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.oga-rail__item { flex-basis: 72%; }
	.oga-storefront--travel .oga-rail__item { flex-basis: 82%; }
	.oga-rail__btn { display: none; } /* swipe on touch */
	.oga-search-form__dept { max-width: 96px; padding-inline: 8px; }
	.oga-trust__list { grid-template-columns: 1fr; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
	.oga-quad, .oga-pcard { transition: none; }
	.oga-quad:hover { transform: none; }
	.oga-rail__track { scroll-behavior: auto; }
}

/* ── Destinations rail ("Things to do wherever you're going") ────────── */
.oga-storefront--dest .oga-rail__item { flex-basis: clamp(150px, 16%, 212px); }
.oga-dest { display: flex; flex-direction: column; gap: 8px; width: 100%; color: var(--oga-ink); text-decoration: none; }
.oga-dest__media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--oga-radius-md); background: linear-gradient(160deg, var(--oga-primary-100), var(--oga-accent-50)); }
.oga-dest__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.oga-dest__fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--oga-primary); }
.oga-dest:hover, .oga-dest:focus-visible { text-decoration: none; }
.oga-dest:hover .oga-dest__media img { transform: scale(1.05); }
.oga-dest:focus-visible .oga-dest__media { box-shadow: var(--oga-focus); }
.oga-dest__name { font-size: 17px; font-weight: 700; line-height: 1.25; }
.oga-dest__count { margin-top: -6px; font-size: var(--oga-text-sm); color: var(--oga-ink-muted); }
@media (prefers-reduced-motion: reduce) { .oga-dest__media img { transition: none; } }