/*
 * Öasis block styles. Loaded on the front end and inside the block editor.
 * Each .is-style-oasis-* class matches a style registered in functions.php.
 */

:root {
	--oasis-blue: #0022DD;
	--oasis-blue-dark: #141BA7;
	--oasis-blob: #1030FF;
	--oasis-navy: #0A0F3D;
	--oasis-aqua: #5ED3E0;
	--oasis-tint: #F1F3FC;
	--oasis-tint-blob: #E0E4FA;
	--oasis-line: #E3E6F5;
	--oasis-muted: #4A5078;
	--oasis-soft: #D5D9F2;
	--oasis-faint: #9CA2CC;
	--oasis-placeholder: #6B7196;
	--oasis-radius: 24px;
	--oasis-font: "Outfit", system-ui, sans-serif;
}

/* ---------- Buttons: fully rounded pills ---------- */

.wp-block-button__link,
.wp-element-button {
	border-radius: 999px;
	font-family: var(--oasis-font);
	font-weight: 800;
	letter-spacing: 0.02em;
	padding: 0.95em 2em;
}

.wp-block-button.is-style-oasis-white .wp-block-button__link {
	background: #fff;
	color: var(--oasis-blue);
	border: 0;
}

.wp-block-button.is-style-oasis-ghost .wp-block-button__link {
	background: transparent;
	color: #fff;
	border: 2px solid #fff;
	font-weight: 700;
}

.wp-block-button.is-style-oasis-navy .wp-block-button__link {
	background: var(--oasis-navy);
	color: #fff;
	border: 0;
}

.wp-block-button.is-style-oasis-white .wp-block-button__link:hover { background: var(--oasis-tint); }
.wp-block-button.is-style-oasis-ghost .wp-block-button__link:hover { background: rgba(255, 255, 255, 0.12); }
.wp-block-button.is-style-oasis-navy .wp-block-button__link:hover { background: var(--oasis-blue-dark); }

/* ---------- Headings ---------- */

.is-style-oasis-display {
	font-size: clamp(52px, 7.2vw, 104px) !important;
	line-height: 0.92 !important;
	font-weight: 900 !important;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

.is-style-oasis-section {
	font-size: clamp(32px, 3.9vw, 56px) !important;
	line-height: 1 !important;
	font-weight: 900 !important;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

/* ---------- Paragraph helpers ---------- */

p.is-style-oasis-pill-label {
	width: fit-content;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--oasis-aqua);
	color: var(--oasis-navy);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.2;
}

p.is-style-oasis-eyebrow {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--oasis-aqua);
}

p.is-style-oasis-arrow-link {
	font-size: 17px;
	font-weight: 700;
}

p.is-style-oasis-arrow-link a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
}

p.is-style-oasis-arrow-link a::after {
	content: "";
	width: 1em;
	height: 1em;
	background: currentColor;
	-webkit-mask: url("../img/icons/arrow.svg") center / contain no-repeat;
	mask: url("../img/icons/arrow.svg") center / contain no-repeat;
}

/* Icon + text lines (trust strip, address line). */
p[class*="is-style-oasis-icon-"] {
	display: flex;
	align-items: center;
	gap: 14px;
	font-weight: 600;
}

p[class*="is-style-oasis-icon-"]::before {
	content: "";
	flex: 0 0 28px;
	height: 28px;
	background: var(--oasis-icon-color, var(--oasis-blue));
	-webkit-mask: var(--oasis-icon) center / contain no-repeat;
	mask: var(--oasis-icon) center / contain no-repeat;
}

.is-style-oasis-icon-truck,  .oasis-icon-truck  { --oasis-icon: url("../img/icons/truck.svg"); }
.is-style-oasis-icon-box,    .oasis-icon-box    { --oasis-icon: url("../img/icons/box.svg"); }
.is-style-oasis-icon-shield, .oasis-icon-shield { --oasis-icon: url("../img/icons/shield.svg"); }
.is-style-oasis-icon-lock,   .oasis-icon-lock   { --oasis-icon: url("../img/icons/lock.svg"); }
.is-style-oasis-icon-pin,    .oasis-icon-pin    { --oasis-icon: url("../img/icons/pin.svg"); }
.is-style-oasis-icon-id,     .oasis-icon-id     { --oasis-icon: url("../img/icons/id.svg"); }

/* ---------- Images ---------- */

.wp-block-image.is-style-oasis-tilt img {
	transform: rotate(4deg);
}

/* ---------- Section groups ---------- */

.wp-block-group.is-style-oasis-hero {
	position: relative;
	overflow: hidden;
	background: var(--oasis-blue) url("../img/blobs/hero.svg") center / cover no-repeat;
	color: #fff;
}

.wp-block-group.is-style-oasis-blue {
	background: var(--oasis-blue);
	color: #fff;
}

.wp-block-group.is-style-oasis-navy {
	background: var(--oasis-navy);
	color: #fff;
	--oasis-icon-color: var(--oasis-aqua);
}

.is-style-oasis-hero :where(h1, h2, h3, h4, p, a:not(.wp-block-button__link)),
.is-style-oasis-blue :where(h1, h2, h3, h4, p, a:not(.wp-block-button__link)),
.is-style-oasis-navy :where(h1, h2, h3, h4, a:not(.wp-block-button__link)) {
	color: inherit;
}

.is-style-oasis-navy :where(p) {
	color: var(--oasis-soft);
}

.is-style-oasis-navy p.is-style-oasis-eyebrow { color: var(--oasis-aqua); }
.is-style-oasis-navy p[class*="is-style-oasis-icon-"] { color: #fff; }

.wp-block-group.is-style-oasis-promo {
	position: relative;
	overflow: hidden;
	border: 3px solid var(--oasis-blue);
	border-radius: 32px;
	background: #fff url("../img/blobs/promo.svg") left top / auto 100% no-repeat;
	color: var(--oasis-blue);
}

.is-style-oasis-promo :where(h1, h2, h3, h4, p) {
	color: var(--oasis-blue);
	font-weight: 900;
	line-height: 0.95;
}

.wp-block-group.is-style-oasis-card {
	background: var(--oasis-tint);
	border-radius: 18px;
	padding: 16px;
}

/* Photo placeholder box: [PHOTO] text centered on tint. */
.wp-block-group.is-style-oasis-photo {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	border-radius: 28px;
	background: var(--oasis-tint);
	color: var(--oasis-placeholder);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
}

.is-style-oasis-navy .wp-block-group.is-style-oasis-photo {
	background: var(--oasis-blue-dark);
	color: #AEB4E6;
}

/* ---------- Category tiles (colored square + blob) ---------- */

.wp-block-group[class*="is-style-oasis-tile-"] {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	max-height: 200px;
	border-radius: var(--oasis-radius);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
}

.wp-block-group[class*="is-style-oasis-tile-"]::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	max-width: 200px;
	background: var(--oasis-tile-blob);
	-webkit-mask: url("../img/blobs/tile.svg") center / contain no-repeat;
	mask: url("../img/blobs/tile.svg") center / contain no-repeat;
}

.wp-block-group[class*="is-style-oasis-tile-"] > * {
	position: relative;
	margin: 0;
}

/* Category icon in the middle of the tile. Masked, so it takes the tile's
   own text colour (white on blue/navy, navy on aqua, muted on tint). */
.wp-block-group[class*="oasis-cat-"]::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 54%;
	height: 54%;
	background: currentColor;
	-webkit-mask: var(--oasis-cat-icon) center / contain no-repeat;
	mask: var(--oasis-cat-icon) center / contain no-repeat;
}

.oasis-cat-vapes       { --oasis-cat-icon: url("../img/icons/cat-vapes.svg"); }
.oasis-cat-cigars      { --oasis-cat-icon: url("../img/icons/cat-cigars.svg"); }
.oasis-cat-papers      { --oasis-cat-icon: url("../img/icons/cat-papers.svg"); }
.oasis-cat-glass       { --oasis-cat-icon: url("../img/icons/cat-glass.svg"); }
.oasis-cat-hookah      { --oasis-cat-icon: url("../img/icons/cat-hookah.svg"); }
.oasis-cat-accessories { --oasis-cat-icon: url("../img/icons/cat-accessories.svg"); }
.oasis-cat-wraps       { --oasis-cat-icon: url("../img/icons/cat-wraps.svg"); }
.oasis-cat-tobacco     { --oasis-cat-icon: url("../img/icons/cat-tobacco.svg"); }
.oasis-cat-pouches     { --oasis-cat-icon: url("../img/icons/cat-pouches.svg"); }

.is-style-oasis-tile-blue { background: var(--oasis-blue); color: #fff; --oasis-tile-blob: var(--oasis-blob); }
.is-style-oasis-tile-tint { background: var(--oasis-tint); color: var(--oasis-muted); --oasis-tile-blob: var(--oasis-tint-blob); }
.is-style-oasis-tile-navy { background: var(--oasis-navy); color: #fff; --oasis-tile-blob: var(--oasis-blue-dark); }
.is-style-oasis-tile-aqua { background: var(--oasis-aqua); color: var(--oasis-navy); --oasis-tile-blob: #86E0E9; }

/* Category tile row scrolls sideways on phones (class set on the Columns block). */
@media (max-width: 689.98px) {
	.wp-block-group.is-style-oasis-hero {
		background-image: url("../img/blobs/hero-mobile.svg");
	}

	.wp-block-columns.oasis-scroll-row {
		flex-wrap: nowrap !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 12px;
		padding-bottom: 8px;
		-webkit-overflow-scrolling: touch;
	}

	.wp-block-columns.oasis-scroll-row > .wp-block-column {
		flex: 0 0 132px !important;
		scroll-snap-align: start;
	}

	.wp-block-columns.oasis-scroll-row .wp-block-group[class*="is-style-oasis-tile-"] {
		border-radius: 20px;
		font-size: 11px;
	}

	/* Keep the blob clear of the promo text (design-Mobile.html). */
	.wp-block-group.is-style-oasis-promo {
		background-size: 150px auto;
		background-position: left bottom;
		padding-left: 24px !important;
		padding-right: 24px !important;
	}

	/* Phones: the trust strip as a 2x2 grid (pickup and 21+ matter most here). */
	.wp-block-group.oasis-trust-strip {
		padding-top: 20px !important;
		padding-bottom: 20px !important;
	}

	.oasis-trust-strip .wp-block-columns {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 16px 14px;
	}

	/* An odd one out takes the full row. */
	.oasis-trust-strip .wp-block-column:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.oasis-trust-strip p[class*="is-style-oasis-icon-"] {
		gap: 10px;
		margin: 0;
		font-size: 14px;
		line-height: 1.3;
	}

	.oasis-trust-strip p[class*="is-style-oasis-icon-"]::before {
		flex-basis: 22px;
		height: 22px;
	}
}

/* ---------- Homepage helpers ---------- */

/* Category tile caption under each tile. */
p.oasis-tile-label {
	margin-top: 14px;
	font-size: 19px;
	font-weight: 700;
}

p.oasis-tile-label a {
	color: var(--oasis-navy);
	text-decoration: none;
}

p.oasis-tile-label a:hover {
	color: var(--oasis-blue);
}

/* Trust strip sits on a hairline, like the design. */
.wp-block-group.oasis-trust-strip {
	border-bottom: 1px solid var(--oasis-line);
}

/* Newsletter signup form ([svd_email_signup], plugin svd-email-signups) on the blue band. */
.svd-signup {
	scroll-margin-top: 120px;
	color: #fff;
}

/* Desktop: email and button side by side, the age box under them. Phones: one
   column in source order (email, age, button). */
.svd-signup-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 14px 10px;
	align-items: center;
}

.svd-signup-email {
	grid-column: 1;
	grid-row: 1;
}

.svd-signup-submit {
	grid-column: 2;
	grid-row: 1;
}

.svd-signup-age {
	grid-column: 1 / -1;
	grid-row: 2;
}

.svd-signup-form input[type="email"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 54px;
	padding: 0 22px;
	border: 2px solid rgba(255, 255, 255, 0.6);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-family: var(--oasis-font);
	font-size: 17px;
}

.svd-signup-form input[type="email"]::placeholder {
	color: rgba(255, 255, 255, 0.75);
}

.svd-signup-form input[type="email"]:focus {
	outline: 3px solid var(--oasis-aqua);
	outline-offset: 2px;
	border-color: #fff;
}

.svd-signup-form button {
	flex: 0 0 auto;
	height: 54px;
	padding: 0 26px;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: var(--oasis-blue);
	font-family: var(--oasis-font);
	font-weight: 800;
	cursor: pointer;
}

.svd-signup-form button:hover {
	background: var(--oasis-tint);
}

.svd-signup-age {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	cursor: pointer;
}

.svd-signup-age input {
	width: 20px;
	height: 20px;
	accent-color: var(--oasis-aqua);
}

/* Honeypot: off-screen, not display:none (some bots skip hidden fields). */
.svd-signup-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.svd-signup-msg {
	margin: 0 0 14px;
	padding: 14px 20px;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.14);
	font-size: 17px;
	font-weight: 600;
}

.svd-signup-msg:focus {
	outline: none;
}

.svd-signup-msg--ok {
	background: #fff;
	color: var(--oasis-blue);
}

@media (max-width: 689.98px) {
	.svd-signup-form {
		grid-template-columns: minmax(0, 1fr);
	}

	.svd-signup-email,
	.svd-signup-submit,
	.svd-signup-age {
		grid-column: 1;
		grid-row: auto;
	}
}

/* ---------- Map to the shop ([oasis_map], [oasis_visit_media]) ---------- */

.oasis-map,
.oasis-visit-photo {
	margin: 28px 0;
	border-radius: var(--oasis-radius);
	overflow: hidden;
	background: var(--oasis-tint);
}

.oasis-map {
	aspect-ratio: 16 / 9;
}

.oasis-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.oasis-visit-photo img {
	display: block;
	width: 100%;
	height: auto;
}

.is-style-oasis-navy .oasis-map,
.is-style-oasis-navy .oasis-visit-photo {
	margin: 0;
	background: var(--oasis-blue-dark);
}

/* Phone line under the address in "Come see us". */
.is-style-oasis-navy p.oasis-phone {
	margin-top: 4px;
	padding-left: 42px;
	font-size: 18px;
	font-weight: 700;
}

.is-style-oasis-navy p.oasis-phone a {
	color: #fff;
	text-decoration: none;
}

@media (max-width: 689.98px) {
	.is-style-oasis-navy p.oasis-phone {
		padding-left: 0;
	}

}

/* ---------- WooCommerce product blocks (Product Collection etc.) ---------- */

.wc-block-product-template .wc-block-components-product-image,
.wc-block-grid__product-image {
	border-radius: var(--oasis-radius);
	background: var(--oasis-tint);
	overflow: hidden;
	position: relative;
}

.wc-block-product-template .wc-block-components-product-image img {
	aspect-ratio: 1 / 1.1;
	object-fit: contain;
}

.wc-block-components-product-image:has(img[src*="woocommerce-placeholder"]) img,
.wc-block-grid__product-image:has(img[src*="woocommerce-placeholder"]) img {
	opacity: 0;
}

.wc-block-components-product-image:has(img[src*="woocommerce-placeholder"])::after,
.wc-block-grid__product-image:has(img[src*="woocommerce-placeholder"])::after {
	content: "[PHOTO]";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--oasis-placeholder);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	pointer-events: none;
}

.wc-block-product-template .wp-block-post-title,
.wc-block-product-template .wp-block-post-title a {
	font-size: 19px !important;
	font-weight: 700;
	color: var(--oasis-navy);
	text-decoration: none;
	text-align: left !important;
}

.wc-block-product-template .wc-block-components-product-price {
	font-size: 18px !important;
	font-weight: 600;
	color: var(--oasis-navy);
	text-align: left !important;
}

.wc-block-product-template .wp-block-button.wc-block-components-product-button {
	width: 100%;
	align-items: stretch !important;
}

.wc-block-product-template .wc-block-components-product-button .wp-block-button__link {
	width: 100%;
	min-height: 48px;
	border: 2px solid var(--oasis-blue);
	background: #fff;
	color: var(--oasis-blue);
	font-size: 15px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.wc-block-product-template .wc-block-components-product-button .wp-block-button__link:hover {
	background: var(--oasis-blue);
	color: #fff;
}

.wc-block-components-product-sale-badge {
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--oasis-blue) !important;
	color: #fff !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	letter-spacing: 0.06em;
	padding: 6px 12px !important;
	text-transform: uppercase;
}

/* Hero artwork overlaps the copy at top right, as in design-Main.html. */
.wp-block-group.is-style-oasis-hero {
	position: relative;
}

.wp-block-group.is-style-oasis-hero .oasis-hero-art {
	position: absolute;
	top: 22px;
	right: 6%;
	width: 400px;
	max-width: 32vw;
	margin: 0;
	pointer-events: none;
	z-index: 0;
}

.wp-block-group.is-style-oasis-hero .oasis-hero-art img {
	width: 100%;
	height: auto;
}

/* Keep the copy above the artwork and at the design's measure. WordPress's
   constrained layout centres inner blocks, which would push the copy under
   the artwork, so pin it to the left. */
.wp-block-group.is-style-oasis-hero .oasis-hero-copy {
	position: relative;
	z-index: 1;
	max-width: 760px;
}

/* Only pin left where the artwork sits beside the copy; on phones the
   container's own side gutter must stay. */
@media (min-width: 690px) {
	.wp-block-group.is-style-oasis-hero .oasis-hero-copy {
		margin-left: 0 !important;
		margin-right: auto !important;
	}
}

.wp-block-group.is-style-oasis-hero .oasis-hero-lede {
	max-width: 600px;
}

@media (max-width: 689.98px) {
	.wp-block-group.is-style-oasis-hero .oasis-hero-art {
		top: 12px;
		right: 16px;
		width: 170px;
		max-width: 45vw;
	}

	/* Clear the artwork so the headline never runs under it. */
	.wp-block-group.is-style-oasis-hero .oasis-hero-copy {
		padding-top: 150px;
	}
}

/* Opening hours line under the address in the "Come see us" section. */
p.oasis-hours {
	margin-top: 4px;
	padding-left: 42px;
	font-size: 16px;
	color: var(--oasis-soft);
}

@media (max-width: 689.98px) {
	p.oasis-hours {
		padding-left: 0;
	}
}

/* ---------- Content pages (Shipping, Terms, Age Policy, FAQ, Track Order) ----
 * Built from the markdown in pages/ by pages/build-pages.php. The page prints
 * its own hero band, so Blocksy's page-title hero is disabled on these pages.
 * ------------------------------------------------------------------------- */

/* Title and lede share one left edge with the body below: the body's 760px
   measure (.oasis-doc). Each used to have its own narrower centred box (15ch,
   62ch), so the title sat to the right of the lede. Beats WordPress's own
   constrained-layout rule for a group's children (.wp-block-group.is-layout-
   constrained > :where(...), specificity 0,2,0), which otherwise stretches
   these to Blocksy's full content width. */
.wp-block-group.oasis-doc-hero.is-layout-constrained > :where(h1, p) {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

/* Short, poster-like lines without a narrow box. */
.oasis-doc-hero .is-style-oasis-section {
	text-wrap: balance;
}

.wp-block-group.oasis-doc-hero p.oasis-doc-lede {
	margin-top: 18px;
	font-size: 20px;
	line-height: 1.5;
}

/* Readable measure. Tables are allowed to run wider than the prose. */
.wp-block-group.oasis-doc {
	--oasis-doc-measure: 760px;
	padding-top: 56px;
	padding-bottom: 72px;
	color: var(--oasis-navy);
}

/* Prose sits at a readable measure; tables are allowed the full container,
   because two columns of state rules need the room. Same specificity note as
   the lede above. */
.wp-block-group.oasis-doc.is-layout-constrained > :where(p, ul, ol, h2, h3, h4, hr, .wp-block-group, .wp-block-buttons, .oasis-map) {
	max-width: var(--oasis-doc-measure);
	margin-left: auto;
	margin-right: auto;
}

.wp-block-group.oasis-doc.is-layout-constrained > figure.wp-block-table {
	max-width: none;
}

.oasis-doc p,
.oasis-doc li {
	font-size: 17px;
	line-height: 1.7;
	color: var(--oasis-muted);
}

.oasis-doc strong {
	color: var(--oasis-navy);
	font-weight: 700;
}

.oasis-doc a {
	color: var(--oasis-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.oasis-doc a:hover {
	color: var(--oasis-navy);
}

/* ---------- Content headings ----------
 * Deliberately not is-style-oasis-section: these pages have 15+ headings and
 * poster-sized type would make them unreadable. Same family and weight, one
 * step down. */

.oasis-doc h2 {
	margin-top: 56px;
	margin-bottom: 16px;
	font-size: clamp(24px, 2.6vw, 30px);
	line-height: 1.15;
	font-weight: 900;
	letter-spacing: -0.01em;
	color: var(--oasis-navy);
}

.oasis-doc h3 {
	margin-top: 36px;
	margin-bottom: 10px;
	font-size: 20px;
	line-height: 1.3;
	font-weight: 800;
	color: var(--oasis-navy);
}

.oasis-doc h4 {
	margin-top: 28px;
	margin-bottom: 8px;
	font-size: 17px;
	font-weight: 800;
	color: var(--oasis-navy);
}

/* An h3 immediately after an h2 shouldn't double the gap. */
.oasis-doc h2 + h3 {
	margin-top: 24px;
}

/* ---------- Lists ---------- */

.oasis-doc ul,
.oasis-doc ol {
	padding-left: 0;
	list-style: none;
}

.oasis-doc li {
	position: relative;
	margin-bottom: 10px;
	padding-left: 26px;
}

.oasis-doc ul > li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.62em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--oasis-blue);
}

.oasis-doc ol {
	counter-reset: oasis-ol;
}

.oasis-doc ol > li {
	counter-increment: oasis-ol;
}

.oasis-doc ol > li::before {
	content: counter(oasis-ol) ".";
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 800;
	color: var(--oasis-blue);
}

/* Nested list: tighter, hollow marker. */
.oasis-doc li > ul {
	margin-top: 10px;
}

.oasis-doc li > ul > li::before {
	background: transparent;
	border: 2px solid var(--oasis-soft);
}

/* ---------- Rules ---------- */

.oasis-doc hr.wp-block-separator {
	margin: 48px auto;
	border: 0;
	border-top: 1px solid var(--oasis-line);
	opacity: 1;
}

/* ---------- Tables ---------- */

.oasis-doc figure.wp-block-table {
	margin: 28px auto;
}

.oasis-doc .wp-block-table table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--oasis-line);
	border-radius: 18px;
	overflow: hidden;
	font-size: 16px;
}

.oasis-doc .wp-block-table th {
	background: var(--oasis-navy);
	color: #fff;
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: left;
	padding: 14px 18px;
	border: 0;
}

.oasis-doc .wp-block-table td {
	padding: 14px 18px;
	border: 0;
	border-top: 1px solid var(--oasis-line);
	color: var(--oasis-muted);
	line-height: 1.55;
	vertical-align: top;
}

.oasis-doc .wp-block-table tbody tr:nth-child(even) td {
	background: var(--oasis-tint);
}

/* First column of a two-column table is the label. */
.oasis-doc .oasis-table-pairs td:first-child {
	width: 32%;
	color: var(--oasis-navy);
	font-weight: 700;
}

/* Phones: a two-column table becomes one card per row, label above value.
   Squeezing two columns into 360px is what makes these tables unreadable. */
@media (max-width: 689.98px) {
	.oasis-doc .oasis-table-pairs table {
		border: 0;
		border-radius: 0;
	}

	.oasis-doc .oasis-table-pairs thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.oasis-doc .oasis-table-pairs tr {
		display: block;
		margin-bottom: 12px;
		border: 1px solid var(--oasis-line);
		border-radius: 16px;
		overflow: hidden;
	}

	.oasis-doc .oasis-table-pairs td {
		display: block;
		width: auto;
		border-top: 0;
		padding: 12px 16px;
	}

	.oasis-doc .oasis-table-pairs td:first-child {
		width: auto;
		background: var(--oasis-tint) !important;
		font-size: 15px;
		font-weight: 800;
	}

	.oasis-doc .oasis-table-pairs tbody tr:nth-child(even) td {
		background: transparent;
	}

	.oasis-doc .oasis-table-pairs td:last-child {
		padding-top: 10px;
	}
}

/* A table with more than two columns keeps its shape and scrolls instead. */
@media (max-width: 689.98px) {
	.oasis-doc figure.wp-block-table:not(.oasis-table-pairs) {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* ---------- Callouts ---------- */

.oasis-doc .oasis-callout {
	margin: 28px auto;
	padding: 22px 26px;
	border-radius: 18px;
	background: var(--oasis-tint);
}

.oasis-doc .oasis-callout > :first-child { margin-top: 0; }
.oasis-doc .oasis-callout > :last-child { margin-bottom: 0; }

/* Prop 65 and anything else that is a legal warning, not brand copy: boxed
   and bordered so it reads as a notice at a glance. */
.oasis-doc .oasis-callout-warning {
	background: #fff;
	border: 2px solid var(--oasis-navy);
	border-left-width: 8px;
}

.oasis-doc .oasis-callout-warning p {
	color: var(--oasis-navy);
	font-size: 16px;
}

.oasis-doc .oasis-callout-warning strong {
	letter-spacing: 0.06em;
}

/* Shop address / contact block at the foot of a page. */
.oasis-doc .oasis-callout-card p {
	color: var(--oasis-muted);
}

.oasis-doc .oasis-callout-card strong {
	display: inline-block;
	margin-bottom: 2px;
	font-size: 19px;
	font-weight: 900;
	color: var(--oasis-navy);
}

/* Buttons in a content page (::: buttons): .oasis-doc a would otherwise
   colour and underline the label. */
.oasis-doc .wp-block-buttons {
	margin-top: 24px;
	margin-bottom: 24px;
	gap: 12px;
}

.oasis-doc a.wp-block-button__link,
.oasis-doc a.wp-block-button__link:hover {
	color: #fff;
	text-decoration: none;
}

/* ---------- Wide shortcode section (```shortcode wide) ----------
 * Product grids on content pages (Deals). Outside .oasis-doc, so the cards
 * keep the shop grid's own styles. */

.wp-block-group.oasis-doc-wide {
	padding-top: 56px;
	padding-bottom: 72px;
	color: var(--oasis-navy);
}

.oasis-deals-empty {
	max-width: 760px;
	margin: 0 auto;
	padding: 28px 30px;
	border-radius: 18px;
	background: var(--oasis-tint);
	color: var(--oasis-muted);
	font-size: 17px;
	line-height: 1.7;
}

.oasis-deals-empty p {
	margin-top: 0;
}

.oasis-deals-empty strong {
	color: var(--oasis-navy);
}

.oasis-deals-empty .wp-block-buttons {
	gap: 12px;
}

p.oasis-deals-instore {
	margin-top: 32px;
	text-align: center;
	font-size: 17px;
	color: var(--oasis-muted);
}

/* ---------- Small print and unfilled copy ---------- */

.oasis-doc p.oasis-doc-meta {
	font-size: 15px;
	color: var(--oasis-faint);
}

/* [LIKE THIS] — copy Harris hasn't supplied yet. Marked so it can't ship
   unnoticed; the rule goes away on its own when the brackets do. */
.oasis-doc mark.oasis-todo,
.oasis-doc-hero mark.oasis-todo {
	background: #FFF3BF;
	color: #6B4E00;
	font-weight: 700;
	/* Padding by shadow, not by box: real padding would push a following
	   period or comma away from the bracket and read as a stray space. */
	padding: 0;
	border-radius: 3px;
	box-shadow: 0 0 0 3px #FFF3BF;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* ---------- WooCommerce order tracking form (/track-order/) ---------- */

.wp-block-group.oasis-doc .track_order {
	max-width: var(--oasis-doc-measure);
	margin: 8px auto 0;
	padding: 28px;
	border: 1px solid var(--oasis-line);
	border-radius: var(--oasis-radius);
	background: var(--oasis-tint);
}

.oasis-doc .track_order > p:first-of-type {
	margin-top: 0;
}

.oasis-doc .track_order label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--oasis-navy);
}

.oasis-doc .track_order .input-text {
	width: 100%;
	background: #fff;
}

.oasis-doc .track_order .form-row {
	margin-bottom: 18px;
}

@media (min-width: 690px) {
	.oasis-doc .track_order .form-row-first,
	.oasis-doc .track_order .form-row-last {
		float: left;
		width: 48%;
	}

	.oasis-doc .track_order .form-row-last {
		float: right;
	}

	.oasis-doc .track_order .clear {
		clear: both;
	}
}

.oasis-doc .track_order button[type="submit"] {
	width: 100%;
}

@media (min-width: 690px) {
	.oasis-doc .track_order button[type="submit"] {
		width: auto;
		min-width: 220px;
	}
}

/* ---------- Buying guides (/guides/<slug>/) ----------
 * Posts built from guides/*.md by guides/build-guides.php, with the same hero
 * band and .oasis-doc prose as the content pages (themes/oasis/inc/guides.php).
 * ------------------------------------------------------------------------- */

.wp-block-group.oasis-doc-hero p.oasis-guide-byline {
	margin-top: 20px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.85;
}

/* Three or more columns: a card per row on phones, each value under its
   column name (data-label, written by the builder). Two-column tables use
   oasis-table-pairs above. */
@media (max-width: 689.98px) {
	.oasis-doc figure.wp-block-table.oasis-table-cards {
		overflow-x: visible;
	}

	.oasis-doc .oasis-table-cards table {
		border: 0;
		border-radius: 0;
	}

	.oasis-doc .oasis-table-cards thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.oasis-doc .oasis-table-cards tr {
		display: block;
		margin-bottom: 12px;
		border: 1px solid var(--oasis-line);
		border-radius: 16px;
		overflow: hidden;
	}

	.oasis-doc .oasis-table-cards td {
		display: block;
		border-top: 0;
		padding: 10px 16px;
		background: transparent !important;
	}

	.oasis-doc .oasis-table-cards td:first-child {
		padding: 12px 16px;
		background: var(--oasis-tint) !important;
		color: var(--oasis-navy);
		font-size: 17px;
	}

	.oasis-doc .oasis-table-cards td[data-label]::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 2px;
		font-size: 12px;
		font-weight: 800;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--oasis-faint);
	}
}

/* Related guides: after the guide, cards in a row on wide screens. */
.wp-block-group.oasis-doc.oasis-related-guides {
	padding-top: 0;
}

.oasis-related-guides h2 {
	margin-top: 0;
}

.wp-block-group.oasis-doc.is-layout-constrained > ul.oasis-related-guide-list {
	display: grid;
	gap: 16px;
	max-width: var(--oasis-doc-measure);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

@media (min-width: 690px) {
	.wp-block-group.oasis-doc.is-layout-constrained > ul.oasis-related-guide-list {
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	}
}

.oasis-doc li.oasis-related-guide {
	margin: 0;
	padding-left: 0;
}

.oasis-doc ul > li.oasis-related-guide::before {
	content: none;
}

.oasis-doc .oasis-related-guide a {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	padding: 22px 24px;
	border: 1px solid var(--oasis-line);
	border-radius: 18px;
	background: var(--oasis-tint);
	color: var(--oasis-navy);
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.oasis-doc .oasis-related-guide a:hover,
.oasis-doc .oasis-related-guide a:focus-visible {
	border-color: var(--oasis-blue);
	background: #fff;
	color: var(--oasis-navy);
}

.oasis-related-guide-title {
	font-size: 19px;
	font-weight: 800;
	line-height: 1.3;
}

.oasis-related-guide-text {
	font-size: 15px;
	line-height: 1.55;
	color: var(--oasis-muted);
}

.oasis-related-guide-more {
	margin-top: auto;
	font-size: 14px;
	font-weight: 800;
	color: var(--oasis-blue);
}

/* "Read the guide" on a shelf or category page, above the grid. */
p.oasis-guide-link {
	margin: 0 0 20px;
}

p.oasis-guide-link a {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	padding: 10px 18px;
	border: 1px solid var(--oasis-soft);
	border-radius: 999px;
	background: var(--oasis-tint);
	color: var(--oasis-navy);
	font-weight: 700;
	line-height: 1.35;
	text-decoration: none;
}

p.oasis-guide-link a:hover,
p.oasis-guide-link a:focus-visible {
	border-color: var(--oasis-blue);
	color: var(--oasis-blue);
}

/* Phones: the title wraps, so a rounded card rather than a pill. */
@media (max-width: 689.98px) {
	p.oasis-guide-link a {
		border-radius: 16px;
	}
}

.oasis-guide-link-kicker {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oasis-blue);
}