/*
 * The Hull Pie: styles that theme.json can't express.
 * Colours, type and spacing come from theme.json presets, so changes made in
 * Appearance > Editor > Styles flow through here too.
 */

/* Main content runs straight into the footer (no gap under full-width bands). */
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* ---------- Header ---------- */

.hullpie-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
}
.admin-bar .hullpie-site-header {
	top: var(--wp-admin--admin-bar--height, 0px);
}
@media (max-width: 600px) {
	.admin-bar .hullpie-site-header {
		top: 0;
	}
}
.hullpie-header {
	border-bottom: 1px solid var(--wp--preset--color--sand);
}
.hullpie-announcement p {
	margin: 0;
	letter-spacing: 0.01em;
}
.hullpie-announcement a {
	font-weight: 600;
}
.hullpie-logo img,
.wp-block-site-logo img {
	transition: transform 0.2s ease;
}
.hullpie-logo a:hover img,
.wp-block-site-logo a:hover img {
	transform: rotate(-6deg);
}
.hullpie-main-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
	padding-block: 0.4em;
}
.hullpie-main-nav .current-menu-item > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--brown);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}
.hullpie-header-actions .wc-block-mini-cart__badge {
	background: var(--wp--preset--color--brown);
	color: var(--wp--preset--color--white);
}
@media (max-width: 781px) {
	.hullpie-header-actions .hullpie-header-cta {
		display: none;
	}
}
@media (max-width: 599px) {
	/* Phones: logo left, account + basket, then the menu button far right. */
	.hullpie-header .hullpie-header-actions {
		margin-left: auto;
	}
	.hullpie-header .hullpie-main-nav {
		order: 3;
	}
}

/* Header dropdown (Shop). */
.hullpie-main-nav .wp-block-navigation__submenu-container {
	min-width: 15rem;
	padding: 0.4rem;
	border: 1px solid var(--wp--preset--color--sand) !important;
	border-radius: var(--wp--custom--radius--medium);
	box-shadow: 0 12px 32px rgba(33, 27, 20, 0.12);
}
.hullpie-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.55rem 0.8rem;
	border-radius: var(--wp--custom--radius--small);
}
.hullpie-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--sand);
}

/* ---------- Shared bits ---------- */

.hullpie-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 600;
	margin-bottom: 0;
}

/* Headings sitting on photos or dark bands stay light. */
.wp-block-cover:not(.is-light) :is(h1, h2, h3, h4),
.hullpie-cta :is(h1, h2, h3, h4),
.hullpie-footer :is(h1, h2, h3, h4) {
	color: var(--wp--preset--color--white);
}

.is-style-card {
	border-radius: var(--wp--custom--radius--medium);
	box-shadow: var(--wp--preset--shadow--card);
}

.is-style-rounded-soft img {
	border-radius: var(--wp--custom--radius--large);
}

ul.is-style-ticks {
	list-style: none;
	padding-left: 0;
}
ul.is-style-ticks li {
	position: relative;
	padding-left: 1.9em;
	margin-bottom: 0.5em;
}
ul.is-style-ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 1.15em;
	height: 1.15em;
	border-radius: 50%;
	background: var(--wp--preset--color--brown)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
		center / 75% no-repeat;
}

/* Buttons */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 2px solid currentColor;
	color: var(--wp--preset--color--brown-dark);
	background: transparent;
	padding: calc(0.85em - 2px) calc(1.6em - 2px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--brown-dark);
	border-color: var(--wp--preset--color--brown-dark);
	color: var(--wp--preset--color--white);
}
.wp-block-button.is-style-outline-light > .wp-block-button__link {
	border: 2px solid var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
	background: transparent;
	padding: calc(0.85em - 2px) calc(1.6em - 2px);
}
.wp-block-button.is-style-outline-light > .wp-block-button__link:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}
.hullpie-button-on-dark > .wp-block-button__link:hover {
	background: var(--wp--preset--color--cream) !important;
}

/* ---------- Home ---------- */

.hullpie-hero h1 {
	text-wrap: balance;
}
.hullpie-strip p {
	margin: 0;
}
.hullpie-strip figure {
	margin: 0;
}

.hullpie-review {
	border-radius: var(--wp--custom--radius--medium);
	box-shadow: var(--wp--preset--shadow--card);
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1rem;
}
.hullpie-review p {
	margin: 0;
}
.hullpie-review cite::before {
	content: "— ";
}

.hullpie-awards {
	align-items: center;
}
.hullpie-awards figure {
	margin: 0;
}
.hullpie-awards img {
	max-height: 120px;
	width: 100%;
	transition: transform 0.2s ease;
}
.hullpie-awards img:hover {
	transform: scale(1.05);
}

/* ---------- Product cards ---------- */

.hullpie-product-cards > li {
	display: flex;
}
.hullpie-product-card {
	width: 100%;
	height: 100%;
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--medium);
	box-shadow: var(--wp--preset--shadow--card);
	padding: 0.75rem 0.75rem 1.25rem;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hullpie-product-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 2px 4px rgb(33 27 20 / 0.08), 0 16px 32px rgb(33 27 20 / 0.12);
}
.hullpie-product-card > *:not(.wc-block-components-product-image) {
	padding-inline: 0.5rem;
}
.hullpie-product-card .wp-block-post-title {
	margin: 0;
	text-wrap: balance;
}
.hullpie-product-card .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}
.hullpie-product-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--brown-dark);
}
.hullpie-product-card .wc-block-components-product-summary,
.hullpie-product-card .wp-block-woocommerce-product-summary {
	color: var(--wp--preset--color--charcoal);
	margin: 0;
}
.hullpie-product-card__buy {
	margin-top: auto !important;
	padding-top: 0.5rem;
}
.hullpie-product-card__buy .wp-block-woocommerce-product-price {
	margin: 0;
}
.hullpie-product-card__buy .wp-block-button.wc-block-components-product-button {
	margin: 0;
	width: auto;
}
.hullpie-product-card__buy .wc-block-components-product-button .wc-block-components-product-button__button {
	white-space: nowrap;
	border-radius: var(--wp--custom--radius--pill);
	padding: 0.6em 1.2em;
	font-size: var(--wp--preset--font-size--small);
}

/* ---------- Dietary badges ---------- */

.hullpie-diet {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0;
}
.hullpie-diet .wp-block-post-terms__separator {
	display: none;
}
.hullpie-diet a {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.15em 0.7em 0.15em 0.5em;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.6;
}
.hullpie-diet a:hover {
	background: var(--wp--preset--color--sand);
}
.hullpie-diet a::before {
	content: "";
	width: 1.1em;
	height: 1.1em;
	background: center / contain no-repeat;
}
.hullpie-diet a.diet-classic::before { background-image: url("../images/diet/classic.png"); width: 1.4em; }
.hullpie-diet a.diet-gluten-free::before { background-image: url("../images/diet/gf.png"); }
.hullpie-diet a.diet-vegetarian::before { background-image: url("../images/diet/vegetarian.png"); }
.hullpie-diet a.diet-vegan::before { background-image: url("../images/diet/vegan.png"); }
.hullpie-diet a.diet-dairy-free::before { display: none; }

/* The [dietary-key] legend (used in the Our Range category intro). */
.hullpie-diet-key {
	margin: 0.75rem 0 0.25rem;
}

/* ---------- Single product ---------- */

.hullpie-product-summary .wp-block-post-title {
	margin-top: 0;
}
.hullpie-product-summary .wc-block-add-to-cart-form .quantity .qty {
	min-height: 3rem;
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: var(--wp--custom--radius--small);
	font: inherit;
}
.hullpie-product-summary .single_add_to_cart_button {
	border-radius: var(--wp--custom--radius--pill) !important;
	background: var(--wp--preset--color--brown) !important;
	color: var(--wp--preset--color--white) !important;
	font-weight: 600 !important;
	padding: 0.85em 1.8em !important;
}
.hullpie-product-summary .single_add_to_cart_button:hover {
	background: var(--wp--preset--color--brown-dark) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.hullpie-product-details .wc-tabs li {
	border-radius: var(--wp--custom--radius--small) var(--wp--custom--radius--small) 0 0;
}
.woocommerce-product-gallery__image img,
.wp-block-woocommerce-product-image-gallery .flex-control-thumbs img {
	border-radius: var(--wp--custom--radius--medium);
}

/* Product Extras (PEWC) fields used by Build Your Own Box. */
.pewc-product-extra-groups-wrap input[type="number"],
.pewc-product-extra-groups-wrap input[type="text"],
.pewc-product-extra-groups-wrap select {
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: var(--wp--custom--radius--small);
	padding: 0.5em 0.75em;
	font: inherit;
}

/* Product Delivery Date Pro: the inline date picker on product pages. */
.prdd-delivery-form {
	margin: 0.5rem 0 1rem;
	padding: 1rem 1.1rem;
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--white);
}
.prdd-delivery-form label {
	font-weight: 600;
	display: block;
	margin-bottom: 0.4rem;
}
.prdd-delivery-form .prdd_label_separator {
	display: none;
}
.prdd-delivery-form input[type="text"] {
	width: 100%;
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: var(--wp--custom--radius--small);
	padding: 0.6em 0.9em;
	font: inherit;
	background: var(--wp--preset--color--white);
}
.prdd-delivery-form .ui-datepicker {
	width: 100%;
	border: 0;
	background: transparent;
	font: inherit;
	padding: 0;
	margin-top: 0.5rem;
}
.prdd-delivery-form .ui-datepicker .ui-datepicker-header {
	background: var(--wp--preset--color--cream);
	border: 0;
	border-radius: var(--wp--custom--radius--small);
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}
.prdd-delivery-form .ui-datepicker .ui-datepicker-prev,
.prdd-delivery-form .ui-datepicker .ui-datepicker-next {
	border: 0;
	background: transparent;
	cursor: pointer;
}
.prdd-delivery-form .ui-datepicker th {
	font-size: 0.8rem;
	color: var(--wp--preset--color--charcoal);
	background: transparent;
}
.prdd-delivery-form .ui-datepicker td {
	padding: 2px;
}
.prdd-delivery-form .ui-datepicker td a,
.prdd-delivery-form .ui-datepicker td span {
	display: block;
	text-align: center;
	padding: 0.45em 0;
	border: 0;
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);
	font-weight: 500;
}
.prdd-delivery-form .ui-datepicker td span {
	background: transparent;
	color: var(--wp--preset--color--charcoal);
	opacity: 0.35;
}
.prdd-delivery-form .ui-datepicker td a:hover {
	background: var(--wp--preset--color--sand);
}
.prdd-delivery-form .ui-datepicker td .ui-state-active,
.prdd-delivery-form .ui-datepicker td a.ui-state-active {
	background: var(--wp--preset--color--brown);
	color: var(--wp--preset--color--white);
}

/* PW Gift Cards: redeem form on cart and checkout. */
#pwgc-redeem-gift-card-form {
	margin: 1rem 0;
}
#pwgc-redeem-gift-card-container {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}
#pwgc-redeem-gift-card-form label {
	flex-basis: 100%;
	font-weight: 600;
}
#pwgc-redeem-gift-card-number {
	flex: 1 1 12rem;
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: var(--wp--custom--radius--small);
	padding: 0.6em 0.9em;
	font: inherit;
	background: var(--wp--preset--color--white);
}
#pwgc-redeem-gift-card-form .button,
#pwgc-redeem-gift-card-form button,
#pwgc-redeem-gift-card-form input[type="submit"] {
	background: var(--wp--preset--color--brown);
	color: var(--wp--preset--color--white);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	padding: 0.7em 1.4em;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* Share links under product meta and blog posts. */
.hullpie-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1rem;
	font-size: var(--wp--preset--font-size--small);
}
.hullpie-share__label {
	font-weight: 600;
	color: var(--wp--preset--color--charcoal);
}
.hullpie-share__link {
	display: inline-block;
	padding: 0.3em 0.9em;
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-weight: 500;
}
.hullpie-share__link:hover {
	background: var(--wp--preset--color--cream);
}

/* ---------- Forms & WooCommerce general ---------- */

/* Catalogue toolbar: result count and sorting dropdown. */
.woocommerce-result-count {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--charcoal);
}
.woocommerce-ordering select.orderby,
.wc-block-catalog-sorting select {
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: var(--wp--custom--radius--pill);
	padding: 0.55em 2.4em 0.55em 1em;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--charcoal);
	background: var(--wp--preset--color--white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%238f672e' stroke-width='1.8' stroke-linecap='round'/></svg>") no-repeat right 0.9em center;
	cursor: pointer;
}
.woocommerce-ordering select.orderby:focus-visible,
.wc-block-catalog-sorting select:focus-visible {
	outline: 2px solid var(--wp--preset--color--brown);
	outline-offset: 2px;
}

.woocommerce-store-notice,
p.demo_store {
	background: var(--wp--preset--color--brown);
}
.wc-block-components-notice-banner.is-info {
	border-color: var(--wp--preset--color--sky);
}
.wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7 textarea,
.wpcf7 select {
	width: 100%;
	box-sizing: border-box;
	max-width: 100%;
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: var(--wp--custom--radius--small);
	padding: 0.7em 0.9em;
	font: inherit;
	background: var(--wp--preset--color--white);
}
.wpcf7 input[type="submit"] {
	background: var(--wp--preset--color--brown);
	color: var(--wp--preset--color--white);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	padding: 0.85em 1.8em;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.wpcf7 input[type="submit"]:hover {
	background: var(--wp--preset--color--brown-dark);
}

/* ---------- Blog cards ---------- */

.hullpie-post-card .wp-block-post-title a {
	text-decoration: none;
}
.hullpie-post-card .wp-block-post-title,
.hullpie-post-card .wp-block-post-date {
	margin: 0;
}

/* ---------- Footer ---------- */

.hullpie-footer .hullpie-footer-heading {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-bottom: 0.75rem;
}
.hullpie-links {
	list-style: none;
	padding-left: 0;
	margin: 0;
}
.hullpie-links li {
	margin-bottom: 0.4em;
}
.hullpie-footer a {
	text-decoration: none;
}
.hullpie-footer a:hover {
	text-decoration: underline;
}
.hullpie-legal {
	opacity: 0.85;
}

/* ---------- Page layout helpers ---------- */

/* Site map page: plain link lists out of query blocks. */
.hullpie-sitemap h2 {
	margin-top: 1.5rem;
	font-size: var(--wp--preset--font-size--large);
}
.hullpie-sitemap-list .wp-block-post-title,
.hullpie-sitemap-list .wp-block-post {
	margin: 0 0 0.35rem;
	font-family: inherit;
	font-weight: 500;
	font-size: 1rem;
	text-transform: none;
	letter-spacing: 0;
}
.hullpie-sitemap-list .wp-block-post-title a {
	text-decoration: none;
}
.hullpie-sitemap-list .wp-block-post-title a:hover {
	text-decoration: underline;
}
.hullpie-sitemap-list.wp-block-woocommerce-product-collection .wc-block-product-template {
	display: block;
}


.hullpie-page-head .wp-block-post-title,
.hullpie-page-head .wp-block-query-title {
	margin: 0;
}
/* Page content: full-width sections butt up against each other and the page
   header/footer; ordinary text gets breathing room top and bottom. */
.hullpie-page-content > .alignfull {
	margin-block: 0 !important;
}
.hullpie-page-content > :first-child:not(.alignfull) {
	margin-block-start: var(--wp--preset--spacing--50) !important;
}
.hullpie-page-content > :last-child:not(.alignfull) {
	margin-block-end: var(--wp--preset--spacing--60) !important;
}
.hullpie-page-content > .alignfull + :not(.alignfull) {
	margin-block-start: var(--wp--preset--spacing--50) !important;
}
.hullpie-page-content > :not(.alignfull) + .alignfull {
	margin-block-start: var(--wp--preset--spacing--50) !important;
}

/* Tables: allergens, wholesale prices. */
.wp-block-table.hullpie-allergens,
.wp-block-table.hullpie-price-list {
	overflow-x: auto;
}
.wp-block-table.hullpie-allergens table,
.wp-block-table.hullpie-price-list table {
	border-collapse: collapse;
	width: 100%;
	background: var(--wp--preset--color--white);
}
.wp-block-table.hullpie-allergens :is(th, td),
.wp-block-table.hullpie-price-list :is(th, td) {
	border: 1px solid var(--wp--preset--color--sand);
	padding: 0.5em 0.75em;
}
.wp-block-table.hullpie-allergens thead th,
.wp-block-table.hullpie-price-list thead th {
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	vertical-align: bottom;
}
.wp-block-table.hullpie-allergens td:not(:first-child) {
	text-align: center;
	color: var(--wp--preset--color--brown-dark);
	font-weight: 700;
}
.wp-block-table.hullpie-allergens td:first-child {
	min-width: 12rem;
}
.wp-block-table.hullpie-allergens tbody tr:nth-child(even),
.wp-block-table.hullpie-price-list tbody tr:nth-child(even) {
	background: var(--wp--preset--color--base);
}
@media (max-width: 599px) {
	/* Phones: the allergen grid is wider than the screen, so it scrolls sideways.
	   Keep the pie name in view and say so. */
	.wp-block-table.hullpie-allergens::before {
		content: "Swipe sideways to see every allergen \2192";
		display: block;
		font-size: var(--wp--preset--font-size--x-small, 0.8rem);
		color: var(--wp--preset--color--brown-dark);
		margin-block-end: 0.5em;
	}
	.wp-block-table.hullpie-allergens :is(th, td) {
		padding: 0.45em 0.55em;
	}
	.wp-block-table.hullpie-allergens td:first-child,
	.wp-block-table.hullpie-allergens th:first-child {
		position: sticky;
		left: 0;
		z-index: 1;
		min-width: 9rem;
		max-width: 10rem;
		background: var(--wp--preset--color--white);
		box-shadow: 1px 0 0 var(--wp--preset--color--sand);
	}
	.wp-block-table.hullpie-allergens thead th:first-child {
		background: var(--wp--preset--color--cream);
	}
	.wp-block-table.hullpie-allergens tbody tr:nth-child(even) td:first-child {
		background: var(--wp--preset--color--base);
	}
}

.hullpie-gallery figure {
	margin: 0;
}
.hullpie-gallery img {
	border-radius: var(--wp--custom--radius--small);
}
.hullpie-stat {
	font-family: var(--wp--preset--font-family--display);
	line-height: 1;
	margin-bottom: 0;
}

/* Accordions (FAQs). */
.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--large);
}
.wp-block-details[open] summary {
	margin-bottom: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}
}

/* Two-up product grid on phones: stack price over a full-width button and
   drop the summary so cards stay a sensible height. */
@media (max-width: 599px) {
	.hullpie-product-card__buy {
		flex-wrap: wrap !important;
		gap: 0.5rem;
	}
	.hullpie-product-card__buy .wp-block-button.wc-block-components-product-button,
	.hullpie-product-card__buy .wc-block-components-product-button .wc-block-components-product-button__button {
		width: 100%;
	}
	.hullpie-product-card .wp-block-woocommerce-product-summary,
	.hullpie-product-card .wc-block-components-product-summary {
		display: none;
	}
	.hullpie-product-card .wp-block-post-title {
		font-size: 1rem !important;
	}
}
