/* Shooglis delivery: the town checker. Works on both themes: Quiet Shelf tokens when the rebuild
   defines them, the same brand values as fallbacks on the current Flatsome theme.
   Logical properties only (RTL first, LTR on /en/). */
.shg-dw {
	--dw-ink: var(--ink, #381b20);
	--dw-ground: var(--ground, #fff6ee);
	--dw-tile: var(--tile, #eedecf);
	--dw-line: var(--ink-14, rgba(56, 27, 32, .14));
	--dw-muted: var(--ink-70, rgba(56, 27, 32, .72));
	--dw-sky: var(--accent, #c6dae6);
	--dw-r: var(--r-tile, 10px);
	--dw-open: #2c6a3d;
	--dw-closing: #a8480c;
	--dw-closing-bg: #fbe7d6;
	--dw-off: #8a766b;
	--dw-warn: var(--night-bordeaux, #4c1e20);
	margin-block: 16px;
	color: var(--dw-ink);
	font-size: 15px;
	line-height: 1.45;
	text-align: start;
}
.shg-dw * { box-sizing: border-box; }
.shg-dw p { margin: 0; }
.shg-dw__ic { inline-size: 22px; block-size: 22px; flex: none; }
.shg-dw__chev { inline-size: 18px; block-size: 18px; flex: none; margin-inline-start: auto; transition: transform .2s ease; }

/* The line that opens the search (a native <details>, so it works before the script runs) */
.shg-dw__find > summary { list-style: none; }
.shg-dw__find > summary::-webkit-details-marker { display: none; }
.shg-dw .shg-dw__line {
	display: flex; align-items: center; gap: 10px;
	min-block-size: 48px; padding: 10px 14px;
	border: 1px solid var(--dw-line); border-radius: var(--dw-r);
	background: var(--dw-ground); color: var(--dw-ink);
	font-weight: 600; cursor: pointer; user-select: none;
	-webkit-tap-highlight-color: transparent;
}
.shg-dw .shg-dw__line:hover { border-color: var(--dw-muted); }
.shg-dw__find[open] > .shg-dw__line { border-end-start-radius: 0; border-end-end-radius: 0; }
.shg-dw__find[open] .shg-dw__chev { transform: rotate(180deg); }
.shg-dw__panel {
	padding: 14px; border: 1px solid var(--dw-line); border-block-start: 0;
	border-end-start-radius: var(--dw-r); border-end-end-radius: var(--dw-r);
	background: var(--dw-ground);
}
.shg-dw .shg-dw__q { display: block; margin: 0 0 8px; font-weight: 600; font-size: 15px; color: var(--dw-ink); }

/* Combobox */
.shg-dw__combo { position: relative; }
.shg-dw .shg-dw__in {
	display: block; inline-size: 100%; block-size: 48px; margin: 0; padding: 0 14px;
	border: 1px solid var(--dw-muted); border-radius: 8px; box-shadow: none;
	background: #fff; color: var(--dw-ink); font: inherit; font-size: 16px; /* 16px: no zoom on iPhone */
}
.shg-dw .shg-dw__in::placeholder { color: var(--dw-muted); opacity: 1; }
.shg-dw__list {
	position: absolute; inset-inline: 0; inset-block-start: calc(100% + 4px); z-index: 60;
	max-block-size: min(288px, 50vh); overflow-y: auto; margin: 0; padding: 4px; list-style: none;
	background: #fff; border: 1px solid var(--dw-line); border-radius: 8px;
	box-shadow: 0 8px 24px rgba(56, 27, 32, .14);
}
.shg-dw__list[hidden] { display: none; }
.shg-dw__opt, .shg-dw__none {
	display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
	margin: 0; padding: 10px 12px; border-radius: 6px; min-block-size: 44px; cursor: pointer;
}
.shg-dw__none { color: var(--dw-muted); cursor: default; }
.shg-dw__opt small { color: var(--dw-muted); font-size: 13px; }
.shg-dw__opt:hover { background: var(--dw-tile); }
.shg-dw__opt[aria-selected="true"] { background: var(--dw-sky); outline: 2px solid var(--dw-ink); outline-offset: -2px; }

/* Quick buttons */
.shg-dw__quick { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 12px; }
.shg-dw .shg-dw__chip {
	display: inline-flex; align-items: center; margin: 0; padding: 6px 14px; min-block-size: 40px; min-inline-size: 0;
	border: 1px solid var(--dw-line); border-radius: 999px; background: #fff; color: var(--dw-ink);
	font: inherit; font-size: 14px; font-weight: 400; line-height: 1.2; letter-spacing: normal; text-transform: none;
	box-shadow: none; cursor: pointer;
}
.shg-dw .shg-dw__chip:hover { border-color: var(--dw-ink); background: var(--dw-tile); }

/* The answer */
.shg-dw__res { margin-block-end: 8px; }
.shg-dw__res[hidden] { display: none; }
.shg-dw__checking { color: var(--dw-muted); padding: 12px 14px; }
.shg-dw__card {
	padding: 12px 14px; border-radius: var(--dw-r); background: var(--dw-tile);
	border: 1px solid var(--dw-line);
}
.shg-dw__title { display: flex; align-items: baseline; gap: 8px; font-weight: 700; font-size: 16px; }
.shg-dw__dot { flex: none; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--dw-off); transform: translateY(-1px); }
.shg-dw__detail { margin-block-start: 2px !important; padding-inline-start: 18px; }
.shg-dw__left { font-variant-numeric: tabular-nums; white-space: nowrap; }
.shg-dw__card.is-open { border-color: rgba(44, 106, 61, .35); }
.shg-dw__card.is-open .shg-dw__dot { background: var(--dw-open); animation: shg-dw-pulse 2s ease-in-out infinite; }
.shg-dw__card.is-closing { background: var(--dw-closing-bg); border-color: rgba(168, 72, 12, .35); }
.shg-dw__card.is-closing .shg-dw__dot { background: var(--dw-closing); animation: shg-dw-pulse 1s ease-in-out infinite; }
.shg-dw__card.is-closing .shg-dw__title, .shg-dw__card.is-closing .shg-dw__left { color: var(--dw-closing); }
.shg-dw__card.is-warn { border-color: rgba(76, 30, 32, .35); }
.shg-dw__card.is-warn .shg-dw__dot { background: var(--dw-warn); }
.shg-dw .shg-dw__wa, .shg-dw .shg-dw__lnk {
	display: inline-block; margin: 6px 0 0; margin-inline-start: 18px; padding: 0; border: 0; background: none;
	color: var(--dw-ink); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
	text-transform: none; letter-spacing: normal; min-block-size: 0; cursor: pointer;
}
@keyframes shg-dw-pulse { 50% { opacity: .35; } }

/* With an answer, the search line becomes a quiet "change town" link */
.shg-dw.has-res .shg-dw__find:not([open]) > .shg-dw__line {
	min-block-size: 40px; padding: 6px 2px; border-color: transparent; background: none; font-weight: 400;
}
.shg-dw.has-res .shg-dw__find:not([open]) > .shg-dw__line .shg-dw__ic { display: none; }
.shg-dw__muted { color: var(--dw-muted); }
.shg-dw__line .shg-dw__lnk { margin: 0; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.shg-dw__pickup { margin-block-start: 8px !important; color: var(--dw-muted); font-size: 13px; }
.shg-dw__hint { display: flex; align-items: center; gap: 8px; color: var(--dw-muted); font-size: 14px; }
.shg-dw__hint[hidden] { display: none; }
.shg-dw__sr {
	position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}

/* Compact: cart drawer and the top of checkout */
.shg-dw--compact { margin-block: 8px 12px; font-size: 14px; }
.shg-dw--compact .shg-dw__line { min-block-size: 44px; padding: 8px 12px; font-size: 14px; }
.shg-dw--compact .shg-dw__card { padding: 10px 12px; }
.shg-dw--compact .shg-dw__title { font-size: 14px; }
.shg-dw--compact .shg-dw__panel { padding: 12px; }

.shg-dw :focus-visible { outline: 2px solid var(--dw-ink); outline-offset: 2px; }
.shg-dw .shg-dw__in:focus-visible { outline-offset: 0; border-color: var(--dw-ink); }

@media (prefers-reduced-motion: reduce) {
	.shg-dw__dot { animation: none !important; }
	.shg-dw__chev { transition: none; }
}

/* Top of checkout: moved above the form by widget.js, so it brings its own gutter */
.shg-dw--checkout { max-inline-size: 1200px; margin-inline: auto; padding-inline: 16px; }
