/* ==========================================================================
   Get My Sushi (Order Online) + online-ordering Coming Soon — loaded on those pages only.
   Layout from "Sushi Hiro Order Online Page - 1".
   ========================================================================== */

/* ---------- Outlets ---------- */
.order-outlets { background: #FFF7EC; padding: clamp(3.5rem, 7vw, 7rem) 0 clamp(4rem, 8vw, 8rem); }
.order-outlets__title { font-weight: 900; font-size: clamp(2rem, 4.4vw, 4.2rem); line-height: 1.08; letter-spacing: -.01em; text-align: center; }
.order-outlets__lead { max-width: 66ch; margin: 1rem auto 0; text-align: center; font-size: clamp(.95rem, 1.1vw, 1.05rem); line-height: 1.6; }

.outlet-grid {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.4rem, 2.8vw, 2.6rem) clamp(1rem, 2vw, 1.6rem);
	max-width: 1160px; margin: clamp(2.5rem, 4.5vw, 4rem) auto 0;
}
.outlet-card {
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--white); border-radius: clamp(24px, 3vw, 40px);
	scroll-margin-top: 7rem;
	transition: translate .3s var(--ease-pop), box-shadow .3s;
}
.outlet-card:hover { translate: 0 -6px; box-shadow: 0 18px 40px rgba(150, 90, 20, .14); }
.outlet-card:target { box-shadow: 0 0 0 4px var(--yellow); }
.outlet-card__photo { aspect-ratio: 1.57; overflow: hidden; background: #e9dccb; }
.outlet-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.outlet-card__body { display: flex; flex-direction: column; flex: 1; padding: clamp(1.3rem, 2.4vw, 2rem) clamp(1.2rem, 2.4vw, 2.1rem) clamp(1.4rem, 2.4vw, 2rem); }
.outlet-card__name { font-weight: 800; font-size: clamp(1.5rem, 2.1vw, 2rem); line-height: 1.1; }
.outlet-card__info { display: grid; gap: .8rem; margin-top: 1.1rem; font-size: .92rem; line-height: 1.45; }
.outlet-card__info li { display: grid; grid-template-columns: 1.35rem minmax(0, 1fr); align-items: start; gap: .7rem; }
.outlet-card__info svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.outlet-card__info a { text-decoration: none; }
.outlet-card__info a:hover { text-decoration: underline; text-underline-offset: 3px; }
.outlet-card__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: auto; padding-top: 1.5rem; }

/* ---------- Coming soon ---------- */
.soon { position: relative; padding: calc(var(--header-h) + clamp(2rem, 5vw, 4.5rem)) 0 clamp(4rem, 8vw, 7rem); }
.deco--s1 { left: 5%; top: 22%; rotate: -14deg; }
.deco--s2 { right: 6%; bottom: 14%; rotate: 10deg; }
.soon__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(1.5rem, 5vw, 5rem); max-width: 1080px; }
.soon__hiro { width: min(100%, 380px); margin-inline: auto; filter: drop-shadow(0 18px 20px rgba(120, 70, 10, .2)); }
.soon__kicker {
	display: inline-block; padding: .35em 1em; font-weight: 900; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase;
	background: var(--yellow-btn); border: 3px solid var(--ink); border-radius: 999px; box-shadow: 0 4px 0 var(--ink);
}
.soon__title { margin-top: 1rem; text-align: left; }
.soon__lead { max-width: 52ch; margin-top: 1rem; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.6; }
.soon__outlet { margin-top: 1.6rem; padding: 1.3rem 1.5rem; background: var(--white); border: 3px solid var(--ink); border-radius: 22px; box-shadow: 0 6px 0 var(--ink); }
.soon__outlet p { line-height: 1.55; }
.soon__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.1rem; }
.soon__back { display: inline-block; margin-top: 1.6rem; font-weight: 800; text-underline-offset: 4px; }

/* ---------- Tablet / mobile ---------- */
@media (max-width: 1023px) {
	.outlet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.outlet-grid { grid-template-columns: 1fr; max-width: 460px; }
	.soon__inner { grid-template-columns: 1fr; text-align: center; }
	.soon__hiro { width: 58vw; }
	.soon__title, .soon__lead { text-align: center; margin-inline: auto; }
	.soon__outlet { text-align: left; }
	.deco--s2 { display: none; }
}

/* Outlet names link to each outlet's own page (/outlets/<slug>/). */
.outlet-card__name a { color: inherit; text-decoration: none; }
.outlet-card__name a:hover { text-decoration: underline; text-underline-offset: 4px; }