/*
Theme Name: Gifts with a Story
Theme URI: https://giftswithastory.co.uk
Author: Gifts with a Story
Description: Block theme for the Gifts with a Story shop. Denim & coral palette, Lora / Figtree / Caveat.
Version: 1.1.0
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gifts-with-a-story
*/

:root {
	--gwas-line: var(--wp--preset--color--line);
	--gwas-shadow: 0 18px 40px -20px rgba(31, 52, 70, .4);
}

body { -webkit-font-smoothing: antialiased; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }
:focus-visible { outline: 3px solid var(--wp--preset--color--coral); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { text-wrap: balance; }

.gwas-eyebrow {
	font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
	color: var(--wp--preset--color--button); margin: 0;
}
.gwas-how .gwas-eyebrow { color: var(--wp--preset--color--peach); }

/* Outline buttons */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent; color: var(--wp--preset--color--button); border-color: var(--wp--preset--color--button);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--button); color: #fff; }

/* ---------- Top bar ---------- */
.gwas-topbar { font-size: 13px; }
.gwas-topbar p { margin: 0; }
.gwas-topbar__info { display: flex; align-items: center; gap: 12px; }
.gwas-sep { display: inline-block; width: 1px; height: 14px; background: rgba(255, 255, 255, .35); }
.gwas-topbar__motto { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; font-weight: 600; color: var(--wp--preset--color--peach); }
.gwas-topbar__motto i { font-style: normal; color: rgba(255, 255, 255, .5); margin-inline: 10px; }

/* ---------- Header ---------- */
.gwas-header { border-bottom: 1px solid var(--gwas-line); position: relative; z-index: 20; }
.gwas-header__row { gap: 14px 28px; flex-wrap: wrap !important; }
.gwas-logo { display: block; flex: none; text-decoration: none; color: var(--wp--preset--color--ink); }
.gwas-logo:hover { color: var(--wp--preset--color--ink); }
.gwas-logo b {
	display: block; font-family: var(--wp--preset--font-family--serif); font-weight: 500;
	font-size: clamp(20px, 2.2vw, 26px); letter-spacing: .14em; line-height: 1;
}
.gwas-logo small { display: block; margin-top: 7px; font-size: 10px; letter-spacing: .32em; color: var(--wp--preset--color--muted); font-weight: 600; }

/* Menu sits on its own row under the logo */
nav.gwas-nav { order: 3; flex: 1 0 100%; min-width: 0; border-top: 1px solid var(--gwas-line); padding-top: 6px; margin-bottom: -10px; }
.gwas-nav .wp-block-navigation__container { justify-content: center; width: 100%; gap: 4px 30px; }
@media (max-width: 599px) { nav.gwas-nav { order: 0; flex: 0 0 auto; border-top: 0; padding-top: 0; margin-bottom: 0; } }
.gwas-nav a { text-decoration: none; }
.gwas-nav .wp-block-navigation-item__content { padding-block: 8px; border-bottom: 2px solid transparent; color: var(--wp--preset--color--ink); }
.gwas-nav .current-menu-item > .wp-block-navigation-item__content,
.gwas-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--denim); border-color: var(--wp--preset--color--coral); }
.gwas-nav .wp-block-navigation__submenu-container {
	border: 1px solid var(--gwas-line) !important; border-radius: 10px; box-shadow: var(--gwas-shadow);
	padding: 10px !important; min-width: 230px !important; background: #fff;
}
.gwas-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { border: 0; padding: 7px 10px; border-radius: 6px; font-size: 14px; }
.gwas-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--soft); }

.gwas-tools { flex: none; }
.gwas-search .wp-block-search__inside-wrapper {
	border: 1px solid var(--gwas-line) !important; background: var(--wp--preset--color--paper);
	border-radius: 999px; padding: 2px 4px 2px 14px; width: 210px;
}
.gwas-search .wp-block-search__input { border: 0; background: transparent; font-size: 14px; padding: 6px 0; }
.gwas-search .wp-block-search__button {
	background: transparent; color: var(--wp--preset--color--ink); border: 0; padding: 6px; margin: 0;
}
.gwas-tools .wc-block-mini-cart__button,
.gwas-tools .wc-block-customer-account a { color: var(--wp--preset--color--ink); }

/* ---------- Hero ---------- */
.gwas-hero { background: linear-gradient(95deg, #FBF6F0 0%, #F5EDE3 42%, #E9D6C2 100%); overflow: hidden; }
.gwas-hand { font-size: clamp(34px, 5vw, 58px); line-height: 1; color: var(--wp--preset--color--denim); margin: 0; }
.gwas-hero__title { letter-spacing: -.02em; }
.gwas-hero .has-medium-font-size { max-width: 44ch; }
.gwas-hero__img { margin: 0; border-radius: 4px; overflow: hidden; }
.gwas-hero__img img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.gwas-perks {
	list-style: none; margin: 32px 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 0;
}
.gwas-perks li { display: flex; align-items: center; gap: 12px; padding-inline: 20px; border-left: 1px solid var(--gwas-line); min-width: 0; }
.gwas-perks li:first-child { border-left: 0; padding-left: 0; }
.gwas-perks svg { width: 28px; height: 28px; flex: none; fill: none; stroke: var(--wp--preset--color--denim); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.gwas-perks p { margin: 0; }
.gwas-perks b { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; }
.gwas-perks span { display: block; font-size: 13px; color: var(--wp--preset--color--muted); line-height: 1.25; }

/* ---------- Category tiles ---------- */
.gwas-cats { border-bottom: 1px solid var(--gwas-line); }
.gwas-cats__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 20px 12px; }
.gwas-cat { text-align: center; text-decoration: none; color: var(--wp--preset--color--ink); min-width: 0; }
.gwas-cat:hover { color: var(--wp--preset--color--ink); }
.gwas-cat__disc {
	display: block; aspect-ratio: 1; max-width: 120px; margin-inline: auto; border-radius: 50%; overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(31, 52, 70, .08); transition: transform .2s;
}
.gwas-cat:hover .gwas-cat__disc { transform: translateY(-4px); }
.gwas-cat__disc svg { display: block; width: 100%; height: 100%; }
.gwas-cat b { display: block; margin-top: 12px; font-size: 15px; font-weight: 500; }
.gwas-cat__more { font-size: 13px; color: var(--wp--preset--color--muted); }

/* ---------- Featured products ---------- */
.gwas-headrow { margin-bottom: 28px; }
.gwas-headrow p { margin: 0; }

/* WooCommerce product grids (shortcode + classic loops) */
.woocommerce ul.products { display: grid; grid-template-columns: repeat(var(--gwas-cols, 4), minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; }
.woocommerce ul.products.columns-5 { --gwas-cols: 5; }
.woocommerce ul.products.columns-3 { --gwas-cols: 3; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product {
	width: auto !important; margin: 0 !important; float: none !important;
	background: #fff; border: 1px solid var(--gwas-line); padding: 0 0 14px; display: flex; flex-direction: column;
}
.woocommerce ul.products li.product a img { margin: 0 0 12px; aspect-ratio: 1; object-fit: cover; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--sans); font-size: 15px !important; font-weight: 500; line-height: 1.35; padding: 0 12px !important; color: var(--wp--preset--color--ink);
}
.woocommerce ul.products li.product .price { color: var(--wp--preset--color--ink) !important; font-weight: 600; padding: 0 12px; margin-top: auto; }
.woocommerce ul.products li.product .button { margin: 10px 12px 0; align-self: flex-start; }

/* Block-based product grids (shop / category templates) */
.wc-block-product-template .wc-block-product,
.wp-block-woocommerce-product-template > li { background: #fff; border: 1px solid var(--gwas-line); padding-bottom: 14px; }
.wc-block-components-product-image img { aspect-ratio: 1; object-fit: cover; }

/* WooCommerce buttons follow the theme button */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.wc-block-components-button:not(.is-link), .wp-block-woocommerce-product-button .wp-block-button__link {
	background: var(--wp--preset--color--button) !important; color: #fff !important; border-radius: 3px !important;
	font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.wc-block-components-button:not(.is-link):hover { background: #9E3E2A !important; }
.woocommerce span.onsale, .wc-block-components-product-sale-badge { background: var(--wp--preset--color--coral); color: #fff; border: 0; }

/* ---------- Shop by price ---------- */
.gwas-bands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.gwas-band {
	display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--gwas-line);
	padding: 18px 20px; text-decoration: none; color: var(--wp--preset--color--muted); font-size: 14px; transition: border-color .15s;
}
.gwas-band:hover { border-color: var(--wp--preset--color--denim); color: var(--wp--preset--color--muted); }
.gwas-band__num { font-family: var(--wp--preset--font-family--serif); font-size: clamp(34px, 4vw, 46px); line-height: 1; color: var(--wp--preset--color--denim); flex: none; }
.gwas-band__num small {
	display: block; margin-bottom: 4px; font-family: var(--wp--preset--font-family--sans); font-size: 11px;
	letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--button); font-weight: 700;
}

/* ---------- How it works ---------- */
.gwas-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: s; }
.gwas-steps li { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); padding: 18px; min-width: 0; }
.gwas-steps li::before {
	counter-increment: s; content: counter(s); display: block; margin-bottom: 10px;
	font-family: var(--wp--preset--font-family--serif); font-size: 30px; line-height: 1; color: var(--wp--preset--color--peach);
}
.gwas-steps b { display: block; font-family: var(--wp--preset--font-family--serif); font-weight: 500; font-size: 18px; }
.gwas-steps span { display: block; margin-top: 4px; color: var(--wp--preset--color--mist); font-size: 14px; }

/* ---------- Footer ---------- */
.gwas-footer { font-size: 14px; border-top: 1px solid rgba(255, 255, 255, .14); }
.gwas-footer h4 { font-size: 17px; margin-bottom: 10px; }
.gwas-links { list-style: none; padding: 0; margin: 0; }
.gwas-links li { padding-block: 3px; }
.gwas-links a { text-decoration: none; }
.gwas-fine { border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 16px; margin-top: 32px; font-size: 12px; color: #A9BBC9; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
	.gwas-search .wp-block-search__inside-wrapper { width: 160px; }
	.woocommerce ul.products.columns-5 { --gwas-cols: 3; }
}
@media (max-width: 980px) {
	.gwas-topbar__motto { display: none; }
	.gwas-nav .wp-block-navigation__container { gap: 4px 18px; }
	.gwas-search { display: none; }
	.gwas-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gwas-perks li, .gwas-perks li:first-child { border-left: 0; padding-inline: 0; }
	.gwas-cats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.gwas-bands, .gwas-steps { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.gwas-cats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.gwas-perks { grid-template-columns: 1fr; }
	.woocommerce ul.products, .woocommerce ul.products.columns-5, .woocommerce ul.products.columns-3 { --gwas-cols: 2; }
	.gwas-logo b { letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}

/* Phone header: logo, account, basket and menu button on one row */
@media (max-width: 599px) {
	.gwas-header__row { flex-wrap: nowrap !important; gap: 8px; }
	.gwas-logo { flex: 1 1 auto; min-width: 0; }
	.gwas-logo b { font-size: 16px; letter-spacing: .06em; }
	.gwas-logo small { font-size: 8px; letter-spacing: .18em; margin-top: 5px; }
	.gwas-tools { order: 1; gap: 2px !important; }
	nav.gwas-nav { order: 2; }
}

/* Personalisation field on the product page */
.gwas-personalise { margin: 0 0 20px; display: flex; flex-direction: column; gap: 6px; width: 100%; }
.gwas-personalise label { font-weight: 600; font-size: 15px; }
.gwas-personalise abbr { color: var(--wp--preset--color--button); text-decoration: none; }
.gwas-personalise input {
	font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--gwas-line); border-radius: 3px;
	background: #fff; color: var(--wp--preset--color--ink); max-width: 420px;
}
.gwas-personalise input:focus { border-color: var(--wp--preset--color--denim); outline: 2px solid var(--wp--preset--color--denim); outline-offset: 0; }
.gwas-personalise small { color: var(--wp--preset--color--muted); font-size: 13px; }
form.cart:has(.gwas-personalise) { flex-wrap: wrap; }