/* PrintKit theme: the shop's look (stage 11 plan, section 2), on top of theme.json. Colours are the palette's:
   accent-1 navy, accent-2 teal, accent-3 dark navy, accent-4 muted, accent-5 light background, accent-6 lines. */

/* Header */
.pk-header { position: relative; z-index: 1000; /* above anything on the page: WooCommerce's gallery magnifier is 99 (Carl, 21 October); below the admin bar (99999) */ background: var(--wp--preset--color--base); box-shadow: 0 1px 0 var(--wp--preset--color--accent-6); }
.pk-header__row { gap: 1rem; }
.pk-header__logo img { display: block; height: auto; }
/* The logo's big lettering is at its top, so centred it looks high (Carl, 21 October): a little lower, with more room above */
.pk-header__top { padding-top: 1.15rem !important; padding-bottom: 1rem !important; }
.pk-header__logo { position: relative; top: 5px; }
.pk-header__icons { gap: 1.1rem; }
.pk-header__icons .wc-block-customer-account__account-icon, .pk-header__icons .wc-block-mini-cart__icon { width: 26px; height: 26px; }
.pk-header__icons a, .pk-header__icons button { color: var(--wp--preset--color--accent-1); font-weight: 700; }
.pk-header__menu { font-size: 1rem; }
.pk-header__menu > .pk-menu, .pk-header__menu .pk-menu { max-width: var(--wp--style--global--wide-size) !important; }

/* Notice bar sits above everything */
.pk-notice:not(p) { position: relative; z-index: 1001; } /* the site-wide banner (PrintKit Orders), not a message in a page */

/* Page widths and spacing */
.woocommerce .wp-block-woocommerce-store-notices, .wp-block-woocommerce-breadcrumbs { font-size: 0.875rem; color: var(--wp--preset--color--accent-4); }
main.wp-block-group { padding-top: var(--wp--preset--spacing--40) !important; }

/* Product cards (shop, categories, search, related): 4 across on a computer, 3 on a tablet, 2 on a phone */
.wc-block-product-template { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 1.5rem !important; }
.wc-block-product-template > li { width: auto !important; max-width: none !important; margin: 0 !important; }
@media (max-width: 1100px) { .wc-block-product-template { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
.wc-block-product-template > li, .wc-block-product { border: 1px solid var(--wp--preset--color--accent-6); border-radius: 12px; padding: 0 0 1.1rem; background: #fff; overflow: hidden; transition: box-shadow 0.15s, transform 0.15s; text-align: center; }
.wc-block-product-template > li:hover { box-shadow: 0 10px 28px rgba(16, 32, 48, 0.12); transform: translateY(-2px); }
.wc-block-product-template .wc-block-components-product-image, .wc-block-product-template .wp-block-woocommerce-product-image { margin: 0 0 0.9rem !important; }
.wc-block-product-template .wc-block-components-product-image img { border-radius: 0 !important; aspect-ratio: 1; object-fit: cover; }
.wc-block-product-template .wp-block-post-title { margin: 0 0.9rem 0.3rem !important; font-size: 1.05rem !important; font-weight: 800; line-height: 1.3; }
.wc-block-product-template .wp-block-post-title a { color: var(--wp--preset--color--accent-1); text-decoration: none; }
.wc-block-product-template .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; } /* the whole card is the link */
.wc-block-product-template > li { position: relative; display: flex; flex-direction: column; }
/* The button sits at the bottom of every card, so a row's buttons line up when a name or price takes two lines (Carl, 23 October) */
.wc-block-product-template > li > .wp-block-button, .wc-block-product-template > li > .wc-block-components-product-button, .wc-block-product-template > li > .wp-block-woocommerce-product-button { margin-top: auto !important; }
.wc-block-product-template .wc-block-components-product-price, .wc-block-product-template .wp-block-woocommerce-product-price { margin: 0 0.9rem 0.8rem !important; color: var(--wp--preset--color--accent-4); font-size: 0.9rem !important; font-weight: 600; }
.wc-block-product-template .wp-block-button, .wc-block-product-template .wc-block-components-product-button { position: relative; z-index: 1; }
.wc-block-product-template .wp-block-button__link, .wc-block-product-template .wc-block-components-product-button__button { padding: 0.55rem 1.2rem !important; border-radius: 6px !important; font-size: 0.9rem !important; }
@media (max-width: 600px) {
	.wc-block-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.8rem !important; }
	.wc-block-product-template .wp-block-post-title { font-size: 0.95rem !important; }
	.wc-block-product-template .wp-block-button__link, .wc-block-product-template .wc-block-components-product-button__button { padding: 0.5rem 0.8rem !important; font-size: 0.82rem !important; }
}

/* Category pages: the description reads as an introduction */
.wp-block-term-description { max-width: 52rem; color: var(--wp--preset--color--accent-4); font-size: 1.05rem; }

/* Product page */
.single-product .wp-block-post-title { margin-bottom: 0.2rem; }
.single-product .wc-block-components-product-price, .single-product .wp-block-woocommerce-product-price { color: var(--wp--preset--color--accent-1); }
.single-product .wp-block-woocommerce-product-image-gallery img { border-radius: 12px; }
.single-product .wp-block-post-excerpt { color: var(--wp--preset--color--accent-4); }
.pk-form select, .pk-form input[type="text"], .pk-form input[type="number"], .pk-form textarea { min-height: 2.75rem; padding: 0.45rem 0.75rem; border: 1.5px solid var(--wp--preset--color--accent-6); border-radius: 8px; background: #fff; font: inherit; }
.pk-form select:focus, .pk-form input:focus, .pk-form textarea:focus { outline: none; border-color: var(--wp--preset--color--accent-2); box-shadow: 0 0 0 3px var(--wp--preset--color--accent-7); }
.pk-form legend, .pk-form label { color: var(--wp--preset--color--accent-1); }
.pk-form .single_add_to_cart_button, .pk-form button[type="submit"] { width: 100%; min-height: 3.1rem; font-size: 1.05rem; }
.pk-countdown { border-color: var(--wp--preset--color--accent-6) !important; border-radius: 12px !important; background: var(--wp--preset--color--accent-5); }
.pk-countdown__num { background: var(--wp--preset--color--accent-1) !important; }

/* Tabs under the product: Description, Size guide, Templates */
.wc-tabs, .woocommerce-tabs ul.tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0 0 1.25rem !important; padding: 0 !important; border-bottom: 2px solid var(--wp--preset--color--accent-6); list-style: none; }
.wc-tabs li, .woocommerce-tabs ul.tabs li { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
.wc-tabs li a, .woocommerce-tabs ul.tabs li a { display: block; padding: 0.7rem 1.1rem !important; margin-bottom: -2px; border-bottom: 3px solid transparent; color: var(--wp--preset--color--accent-4) !important; font-weight: 700; text-decoration: none; }
.wc-tabs li.active a, .woocommerce-tabs ul.tabs li.active a { border-bottom-color: var(--wp--preset--color--accent-2); color: var(--wp--preset--color--accent-1) !important; }
.woocommerce-Tabs-panel { max-width: 52rem; }
.woocommerce-Tabs-panel table, .pk-tab-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.95rem; }
.woocommerce-Tabs-panel td, .woocommerce-Tabs-panel th, .pk-tab-content td, .pk-tab-content th { padding: 0.55rem 0.75rem; border: 1px solid var(--wp--preset--color--accent-6); text-align: left; }
.woocommerce-Tabs-panel tr:first-child td, .pk-tab-content tr:first-child td { background: var(--wp--preset--color--accent-5); font-weight: 700; color: var(--wp--preset--color--accent-1); }
.pk-downloads { display: grid; gap: 0.6rem; margin: 0.5rem 0 0; padding: 0; list-style: none; }
.pk-downloads a { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700; }
.pk-downloads a::before { content: ""; width: 1.3rem; height: 1.3rem; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v11m0 0 4-4m-4 4-4-4M4 17v3h16v-3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v11m0 0 4-4m-4 4-4-4M4 17v3h16v-3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.pk-download__type { color: var(--wp--preset--color--accent-4); font-size: 0.85rem; }

/* Footer */
.pk-footer h2 { margin-bottom: 0.6rem; font-size: 1rem !important; letter-spacing: 0.02em; }
.pk-footer, .pk-footer p { font-size: 0.95rem; }
.pk-footer__links { margin: 0; padding: 0; list-style: none; }
.pk-footer__links li { margin: 0 0 0.4rem; }
.pk-footer a { text-decoration: none; opacity: 0.9; }
.pk-footer a:hover { opacity: 1; text-decoration: underline; }
.pk-footer__bottom { opacity: 0.8; }
.pk-business__logo { margin: 0 0 1rem; }

/* Phones: logo smaller, icons tidy */
@media (max-width: 781px) {
	.pk-header__row { flex-wrap: wrap !important; }
	.pk-header__logo img { width: 140px !important; }
	.pk-header__icons .wc-block-customer-account__account-label, .pk-header__icons .wc-block-mini-cart__amount { display: none; }
}

/* Home page (templates/page-home.html; its blocks from server/39-home.html) */
main.pk-home { padding-top: 0 !important; }
.pk-home .wp-block-post-content > * + * { margin-block-start: 0; }
.pk-home-hero h1 { margin: 0 0 0.75rem; line-height: 1.15; }
.pk-home-hero p { margin: 0 auto 1.5rem; max-width: 40rem; opacity: 0.95; }
.pk-home-hero .pk-search { max-width: 36rem; margin: 0 auto 1.5rem; }
.pk-home-hero .pk-search__input { height: 3.2rem; border-color: transparent; background: #fff; font-size: 1.05rem; }
.pk-home-hero .pk-search__list { text-align: left; }
.pk-home-hero__buttons .wp-block-button__link { padding: 0.8rem 1.6rem; border-radius: 8px; font-weight: 800; }
.pk-home-hero__buttons .is-style-outline .wp-block-button__link { border: 2px solid #fff; background: transparent; }
.pk-home-points .wp-block-columns { gap: 1.5rem; margin: 0; }
.pk-home-point { position: relative; padding-left: 3.4rem; }
.pk-home-point h3 { margin: 0 0 0.2rem; color: var(--wp--preset--color--accent-1); }
.pk-home-point p { margin: 0; color: var(--wp--preset--color--accent-4); font-size: 0.95rem; }
.pk-home-point::before { content: ""; position: absolute; left: 0; top: 0.1rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--wp--preset--color--accent-2) var(--pk-icon) center / 1.35rem no-repeat; }
.pk-home-point--delivery { --pk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h11v10H2zM13 9h4l3 3v4h-7'/%3E%3Ccircle cx='6' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E"); }
.pk-home-point--local { --pk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.5-7-12a7 7 0 0 1 14 0c0 5.5-7 12-7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E"); }
.pk-home-point--secure { --pk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
.pk-home-point--help { --pk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E"); }
.pk-home-section, .pk-reviews { margin-top: var(--wp--preset--spacing--60) !important; }
.pk-home-section > h2, .pk-reviews > h2 { margin: 0 0 1.5rem; color: var(--wp--preset--color--accent-1); }
.pk-home-categories { gap: 1.5rem; }
.pk-home-card { border: 1px solid var(--wp--preset--color--accent-6); border-radius: 12px; overflow: hidden; background: #fff; transition: box-shadow 0.15s, transform 0.15s; }
.pk-home-card:hover { box-shadow: 0 10px 28px rgba(16, 32, 48, 0.12); transform: translateY(-2px); }
.pk-home-card .wp-block-image { margin: 0; }
.pk-home-card .wp-block-image img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pk-home-card h3 { margin: 1rem 1.1rem 0.3rem; font-size: 1.2rem; }
.pk-home-card h3 a { color: var(--wp--preset--color--accent-1); text-decoration: none; }
.pk-home-card p { margin: 0 1.1rem 1.2rem; color: var(--wp--preset--color--accent-4); font-size: 0.95rem; }
.pk-reviews__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.pk-review { padding: 1.4rem; border: 1px solid var(--wp--preset--color--accent-6); border-radius: 12px; background: var(--wp--preset--color--accent-5); }
.pk-review__stars { margin: 0 0 0.5rem; color: #f2a516; font-size: 1.2rem; letter-spacing: 0.1em; }
.pk-review__stars span { color: var(--wp--preset--color--accent-6); }
.pk-review__text { margin: 0 0 0.8rem; padding: 0; border: 0; font-style: normal; }
.pk-review__text p { margin: 0; }
.pk-review__by { margin: 0; color: var(--wp--preset--color--accent-4); font-size: 0.9rem; font-weight: 700; }
.pk-review__verified { font-weight: 600; }
.pk-home-quote__inner { border-radius: 12px; overflow: hidden; }
.pk-home-quote__inner .wp-block-media-text__content { padding: var(--wp--preset--spacing--50); }
.pk-home-quote__inner h2 { margin-top: 0; color: var(--wp--preset--color--accent-1); }
.pk-home-quote__inner .wp-block-media-text__media img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 781px) {
	.pk-home-hero { min-height: 0 !important; }
	.pk-home-points .wp-block-columns { gap: 1rem; }
	.pk-home-categories { gap: 1rem; }
}

/* "Made to your size" next to the price, on cards and the product page (Carl, 23 October) */
.pk-custom-size { display: inline-block; margin: 0.25rem 0 0; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--wp--preset--color--accent-2); color: #fff; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; }
.wc-block-product-template .pk-custom-size { display: table; margin: 0.35rem auto 0; }

/* "My quote (2)": the promotional quote basket, beside the shop's basket while it has something in it (23 October) */
.pk-quote-link { display: inline-flex; align-items: center; padding: 0.3rem 0.75rem; border: 2px solid var(--wp--preset--color--accent-2); border-radius: 999px; color: var(--wp--preset--color--accent-1); font-size: 0.9rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.pk-quote-link:hover { background: var(--wp--preset--color--accent-2); color: #fff; }

/* Questions that open to show their answers (Questions and answers: Carl, 27 October) */
.wp-block-details { border: 1px solid var(--wp--preset--color--accent-6); border-radius: 10px; background: #fff; margin: 0 0 0.6rem; padding: 0; }
.wp-block-details > summary { list-style: none; cursor: pointer; padding: 0.9rem 3rem 0.9rem 1.1rem; position: relative; font-weight: 700; color: var(--wp--preset--color--accent-1); }
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary::after { content: "+"; position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); font-size: 1.4rem; line-height: 1; color: var(--wp--preset--color--accent-2); }
.wp-block-details[open] > summary::after { content: "\2212"; }
.wp-block-details > summary:hover { color: var(--wp--preset--color--accent-2); }
.wp-block-details > summary:focus-visible { outline: 2px solid var(--wp--preset--color--accent-2); outline-offset: 2px; border-radius: 10px; }
.wp-block-details[open] > summary { border-bottom: 1px solid var(--wp--preset--color--accent-6); }
.wp-block-details > :not(summary) { margin-left: 1.1rem; margin-right: 1.1rem; }
.wp-block-details > :nth-child(2) { margin-top: 0.9rem; }
.wp-block-details > :last-child { margin-bottom: 1.1rem; }
.wp-block-details .wp-block-image img { border-radius: 8px; height: auto; max-width: 100%; }
.wp-block-details .wp-element-caption { text-align: center; font-size: 0.85rem; color: var(--wp--preset--color--accent-4); margin-top: 0.4rem; }
