/*
Theme Name: Eira London
Theme URI: https://eiralondon.com
Author: Eira London
Author URI: https://eiralondon.com
Description: Custom WooCommerce theme for Eira London — research-grade peptides. Premium, calm, editorial, Alo-inspired. Ported from the Eira Shopify (Online Store 2.0) theme to WordPress + WooCommerce. Editable via the WordPress Customizer.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eira-london
Tags: ecommerce, woocommerce, custom-colors, custom-menu, custom-logo, featured-images, full-width-template, translation-ready
WC requires at least: 7.0
WC tested up to: 9.9
*/

/*
 * The full design system lives in assets/css/eira-theme.css (enqueued in functions.php).
 * This file holds the WordPress theme header above plus small accessibility helpers.
 */

/* Accessibility: visually-hidden text + skip link. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	background: rgb(21,21,21);
	color: rgb(247,243,236);
	padding: 12px 20px;
	font-family: 'Figtree', sans-serif;
	font-size: 0.8rem;
	text-decoration: none;
}
.skip-link:focus {
	left: 8px;
	top: 8px;
}

/* WordPress core alignment + caption helpers. */
.alignwide { max-width: 1100px; }
.alignfull { max-width: 100%; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.78rem; color: rgb(122,118,114); font-style: italic; margin-top: 8px; }
.sticky, .gallery-caption, .bypostauthor { display: block; }

/* Pagination (blog/journal + search). */
.pagination .nav-links, .woocommerce-pagination .page-numbers {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid rgb(231,229,225);
	color: rgb(21,21,21);
	text-decoration: none;
	font-family: 'Figtree', sans-serif;
	font-size: 0.78rem;
}
.pagination .page-numbers.current { background: rgb(21,21,21); color: rgb(247,243,236); border-color: rgb(21,21,21); }

/* Journal cards (homepage hub, blog index, search). */
.journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); }
.journal-card a { text-decoration: none; color: inherit; display: block; }
.journal-card-img-wrap, .journal-img-wrap { overflow: hidden; margin-bottom: 18px; aspect-ratio: 3 / 2; background: rgb(216,208,196); }
.journal-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.55s cubic-bezier(0.22,1,0.36,1); }
.journal-card a:hover .journal-img { transform: scale(1.04); }
@media (max-width: 900px) { .journal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .journal-grid { grid-template-columns: 1fr; } }

/* Article (single post). */
.article-wrap { max-width: 760px; margin: 0 auto; padding: clamp(48px,6vw,88px) clamp(24px,4vw,40px); }
.article-header { margin-bottom: clamp(32px,4vw,48px); }
.article-body { font-size: 1rem; line-height: 1.85; color: rgb(36,35,34); font-weight: 300; }
.pull-quote { font-family: 'Figtree', sans-serif; font-size: 1.4rem; font-style: italic; line-height: 1.5; color: rgb(21,21,21); }

/* Generic page hero. */
.page-hero-title { font-family: 'Figtree', sans-serif; font-size: clamp(2.5rem,6vw,6rem); font-weight: 300; letter-spacing: -0.04em; line-height: 0.98; color: rgb(21,21,21); max-width: 900px; }

/* Custom logo: always cap the height regardless of the uploaded image size. */
.header-logo { max-width: 220px; }
.header-logo img,
.header-logo .custom-logo,
.header-logo .custom-logo-link { display: block; height: 40px; width: auto; max-width: 200px; object-fit: contain; line-height: 0; }

/* ── Variable-product size / variation selector ── */
.single-product .variations { border: 0; width: auto; margin: 0 0 4px; }
.single-product .variations tbody { display: block; }
.single-product .variations tr { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0; }
.single-product .variations th,
.single-product .variations td { display: block; padding: 0; border: 0; }
.single-product .variations th.label label {
	margin: 0;
	font-family: 'Figtree', sans-serif;
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgb(90,87,83);
}
.single-product .variations select {
	font-family: 'Figtree', sans-serif;
	font-size: 0.95rem;
	font-weight: 300;
	color: rgb(21,21,21);
	background-color: rgb(247,243,236);
	border: 1px solid rgb(216,208,196);
	border-radius: 0;
	padding: 13px 46px 13px 16px;
	min-width: 220px;
	max-width: 100%;
	line-height: 1.2;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235a5753' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	transition: border-color 0.2s ease;
}
.single-product .variations select:hover { border-color: rgb(154,150,144); }
.single-product .variations select:focus { outline: none; border-color: rgb(21,21,21); }

/* Hide WooCommerce's per-variation price, stock line, and the "Clear" link
   (the price is mirrored into the main price above instead). */
.single-product .reset_variations { display: none !important; }
.single-product .woocommerce-variation-price,
.single-product .woocommerce-variation-availability { display: none !important; }

/* Quantity + add-to-cart row under the selector */
.single-product .single_variation_wrap { margin-top: 28px; }
.single-product .woocommerce-variation-add-to-cart { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; margin: 0; }
.single-product .woocommerce-variation-add-to-cart .quantity { flex-shrink: 0; }
.single-product .woocommerce-variation-add-to-cart .qty {
	width: 68px;
	text-align: center;
	border: 1px solid rgb(216,208,196);
	background: rgb(247,243,236);
	border-radius: 0;
	padding: 14px 8px;
	font-family: 'Figtree', sans-serif;
	font-size: 0.95rem;
	color: rgb(21,21,21);
}
.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button { flex: 1; min-width: 200px; }

/* Keep header buttons legible on WooCommerce pages (defensive against
   broad .woocommerce link-colour rules). */
.site-header .btn-solid,
.site-header .btn-solid:hover,
.site-header .btn-solid:focus { color: rgb(247,243,236); }

/* ─────────────────────────────────────────────────────────
   Rich compound sections (product page)
   ───────────────────────────────────────────────────────── */
.eira-compound-wrap { max-width: 1100px; margin: clamp(56px,7vw,96px) auto 0; }
.eira-compound { padding: clamp(40px,5vw,64px) 0; border-top: 1px solid rgb(231,229,225); }
.eira-compound:first-child { border-top: 0; padding-top: 0; }
.eira-sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.eira-sec-title { font-family: 'Figtree', sans-serif; font-size: clamp(1.6rem,2.6vw,2.4rem); font-weight: 300; letter-spacing: -0.025em; line-height: 1.12; color: rgb(21,21,21); margin: 8px 0 clamp(28px,3vw,40px); }
.eira-sec-head .eira-sec-title { margin-bottom: 0; }

/* Certificate of Analysis */
.eira-coa-accred { font-family: 'Figtree', sans-serif; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(122,118,114); border: 1px solid rgb(200,214,217); padding: 8px 14px; align-self: flex-start; }
.eira-coa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: clamp(12px,1.5vw,20px); }
.eira-coa-card { position: relative; background: rgb(247,243,236); border: 1px solid rgb(231,229,225); padding: clamp(24px,2.5vw,32px); }
.eira-coa-card:first-child { border-color: rgb(200,214,217); }
.eira-coa-flag { position: absolute; top: 16px; right: 16px; font-family: 'Figtree', sans-serif; font-size: 0.54rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(90,87,83); background: rgb(200,214,217); padding: 3px 8px; }
.eira-coa-purity { font-family: 'Figtree', sans-serif; font-size: clamp(2.2rem,4vw,3rem); font-weight: 300; line-height: 1; color: rgb(120,138,116); letter-spacing: -0.02em; }
.eira-coa-purity span { font-size: 0.5em; }
.eira-coa-plabel { font-family: 'Figtree', sans-serif; font-size: 0.6rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(170,184,166); margin: 4px 0 20px; }
.eira-coa-rows { display: flex; flex-direction: column; border-top: 1px solid rgb(231,229,225); }
.eira-coa-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgb(231,229,225); font-size: 0.78rem; font-weight: 300; color: rgb(90,87,83); }
.eira-coa-row span:last-child { color: rgb(21,21,21); font-family: 'Figtree', sans-serif; font-size: 0.92rem; }
.eira-coa-link { display: inline-block; margin-top: 18px; font-family: 'Figtree', sans-serif; font-size: 0.64rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(21,21,21); border-bottom: 1px solid rgb(21,21,21); padding-bottom: 3px; text-decoration: none; }
.eira-coa-qc { margin-top: clamp(28px,3vw,40px); padding-top: clamp(24px,3vw,32px); border-top: 1px solid rgb(231,229,225); }
.eira-coa-qc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(24px,4vw,64px); }
.eira-coa-qc-row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgb(231,229,225); font-size: 0.8rem; font-weight: 300; color: rgb(90,87,83); }
.eira-coa-qc-row span:last-child { color: rgb(120,138,116); font-weight: 400; }

/* Compound information */
.eira-ci-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,2vw,24px); }
.eira-ci-card { background: rgb(247,243,236); border: 1px solid rgb(231,229,225); padding: clamp(28px,3vw,40px); }
.eira-ci-card-label { font-family: 'Figtree', sans-serif; font-size: 0.6rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(170,184,166); margin-bottom: 10px; }
.eira-ci-card-title { font-family: 'Figtree', sans-serif; font-size: 1.3rem; font-weight: 300; letter-spacing: -0.01em; color: rgb(21,21,21); margin: 0 0 20px; }
.eira-ci-table { width: 100%; border-collapse: collapse; }
.eira-ci-table th, .eira-ci-table td { text-align: left; padding: 11px 0; border-bottom: 1px solid rgb(231,229,225); font-size: 0.82rem; font-weight: 300; vertical-align: top; }
.eira-ci-table th { color: rgb(122,118,114); font-weight: 500; width: 44%; }
.eira-ci-table td { color: rgb(21,21,21); font-family: 'Figtree', sans-serif; font-size: 0.95rem; }
.eira-ci-link { display: inline-block; margin-top: 20px; font-family: 'Figtree', sans-serif; font-size: 0.64rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(90,87,83); text-decoration: none; }
.eira-ci-link:hover { color: rgb(21,21,21); }
.eira-store-notes { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.eira-store-notes li { position: relative; padding-left: 20px; font-size: 0.82rem; font-weight: 300; color: rgb(90,87,83); line-height: 1.5; }
.eira-store-notes li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; background: rgb(170,184,166); border-radius: 50%; }
.eira-store { display: flex; flex-direction: column; gap: 12px; }
.eira-store-item { background: rgb(231,229,225); padding: 16px 20px; }
.eira-store-state { font-family: 'Figtree', sans-serif; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(122,118,114); margin-bottom: 4px; }
.eira-store-val { font-family: 'Figtree', sans-serif; font-size: 1.05rem; font-weight: 300; color: rgb(21,21,21); }
.eira-store-val strong { font-weight: 500; }

/* Research focus */
.eira-rf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(20px,2.5vw,40px); }
.eira-rf-card { border-top: 2px solid rgb(231,229,225); padding-top: 24px; transition: border-color 0.3s ease; }
.eira-rf-card:hover { border-top-color: rgb(170,184,166); }
.eira-rf-area { font-family: 'Figtree', sans-serif; font-size: clamp(1.2rem,1.8vw,1.5rem); font-weight: 300; letter-spacing: -0.01em; color: rgb(21,21,21); margin: 0 0 12px; line-height: 1.2; }
.eira-rf-desc { font-size: 0.84rem; line-height: 1.75; color: rgb(90,87,83); font-weight: 300; margin: 0; }
.eira-rf-note { margin-top: clamp(28px,3vw,40px); font-size: 0.72rem; line-height: 1.6; color: rgb(154,150,144); font-weight: 300; }

/* Sources & references */
.eira-ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: clamp(12px,1.5vw,20px); }
.eira-ref-card { background: rgb(247,243,236); border: 1px solid rgb(231,229,225); padding: 22px 22px 24px; display: flex; flex-direction: column; }
.eira-ref-journal { font-family: 'Figtree', sans-serif; font-size: 0.56rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(170,184,166); margin-bottom: 12px; line-height: 1.4; }
.eira-ref-title { font-family: 'Figtree', sans-serif; font-size: 1rem; font-weight: 300; line-height: 1.3; color: rgb(21,21,21); margin-bottom: 12px; flex: 1; }
.eira-ref-meta { font-size: 0.68rem; color: rgb(154,150,144); font-weight: 300; }
.eira-ref-link { margin-top: 14px; font-family: 'Figtree', sans-serif; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(21,21,21); text-decoration: none; }

/* Important research notice */
.eira-notice { background: rgb(247,243,236); border: 1px solid rgb(216,208,196); border-left: 2px solid rgb(170,184,166); padding: clamp(28px,3vw,40px); margin-top: clamp(40px,5vw,64px); }
.eira-notice .section-label { color: #103D2E; margin-bottom: 16px; }
.eira-notice p { font-size: 0.8rem; line-height: 1.7; color: rgb(90,87,83); font-weight: 300; margin: 0 0 12px; }
.eira-notice p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
	.eira-ci-grid { grid-template-columns: 1fr; }
	.eira-coa-qc-grid { grid-template-columns: 1fr; }
}

/* Product gallery: keep the main image a fixed square so tall vial photos
   don't stretch the column long. */
.product-carousel { height: auto; aspect-ratio: 1 / 1; }

/* Compact product cards (homepage Core Collection, search results): force a
   true square. The ratio MUST live on the wrapper <div> — an <img>'s width/
   height attributes set a definite CSS height that overrides `aspect-ratio`
   placed on the image itself, which is why these stayed portrait. */
.product-card-img-wrap { aspect-ratio: 1 / 1; position: relative; overflow: hidden; }
.product-card-img-wrap .product-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
}

/* Homepage: bolder, larger hero headline. */
.template-index .hero-video-heading { font-size: clamp(2.8rem, 6.4vw, 7rem); }

/* ─────────────────────────────────────────────────────────
   Product page — warmer, more colourful compound sections.
   On-brand accents: ice-blue = science/quality, sage = research,
   stone = warm neutral. Soft tints only (keeps the quiet-luxury feel).
   ───────────────────────────────────────────────────────── */
.eira-compound-wrap { display: flex; flex-direction: column; gap: clamp(16px,2vw,24px); }
.eira-compound { border-top: 0 !important; padding: clamp(32px,4vw,52px) clamp(24px,4vw,44px); border-radius: 20px; }
.eira-compound:first-child { padding-top: clamp(32px,4vw,52px); }

/* Alternating colour bands for visual rhythm */
.eira-coa     { background: #DFF6EA; }                 /* mint — Certificate of Analysis */
.eira-ci      { background: #E9E9FB; }                 /* peri — Compound Information    */
.eira-rf      { background: #FDEBD7; }                 /* peach — Research Focus         */
.eira-ref     { background: rgb(247,243,236); border: 1px solid rgb(231,229,225); }
.eira-notice  { background: #F7F3EC; border: 1px solid rgb(216,208,196); border-left: 3px solid #103D2E; margin-top: 0; }

/* COA cards: ice accent bar + confident purity colour, "latest" lifted */
.eira-coa-card { border-top: 3px solid #103D2E; background: rgb(247,243,236); border-radius: 12px; }
.eira-coa-card:first-child { background: #fbf9f5; }
.eira-coa-purity { color: #103D2E; }
.eira-coa-flag { background: #103D2E; color: #C6F24E; }
.eira-coa-accred { background: rgb(200,214,217); border-color: rgb(200,214,217); color: rgb(36,35,34); }
.eira-coa-qc-row span:last-child { color: #103D2E; }

/* Compound info: colour-coded card accents + storage states */
.eira-ci-card { background: rgb(247,243,236); }
.eira-ci-grid > .eira-ci-card:nth-child(1) { border-top: 3px solid #B7B6F2; }   /* profile = peri */
.eira-ci-grid > .eira-ci-card:nth-child(2) { border-top: 3px solid #103D2E; }   /* storage = forest */
.eira-store-item:nth-child(1) { background: #EDEDFB; border-left: 3px solid #B7B6F2; }  /* lyophilised (cold) = peri */
.eira-store-item:nth-child(2) { background: #E6F6EE; border-left: 3px solid #103D2E; }  /* reconstituted = forest */

/* Research focus: sage-accented cards lifted off the band */
.eira-rf-card { border-top: 2px solid #103D2E; background: rgba(255,255,255,0.55); border-radius: 0 0 12px 12px; padding: 24px 22px 22px; }
.eira-rf-card:hover { border-top-color: #C6F24E; }

/* References: stone accent → sage on hover */
.eira-ref-card { border-top: 3px solid rgb(216,208,196); }
.eira-ref-card:hover { border-top-color: #C6F24E; }

/* Buy-area badges: soft tints instead of plain outlines */
.single-product .badge { background: rgb(231,229,225); border-color: rgb(231,229,225); color: rgb(90,87,83); }
.single-product .badge--ice { background: rgb(200,214,217); border-color: rgb(200,214,217); color: rgb(36,35,34); }
.single-product .research-badge { background: rgba(200,214,217,0.45); border-color: rgb(200,214,217); color: rgb(36,35,34); }
.single-product .cat-tag { background: rgba(170,184,166,0.22); color: rgb(74,90,70); }