/*
Theme Name:      PCT Mart
Theme URI:       https://pctmart.com/
Description:     Minimal Shoptimizer child theme for PCT Mart. Layout, templates and components are the parent theme's; this child only sets brand colour and type, and carries the Google Sheet product sync.
Author:          PCT Mart
Template:        shoptimizer
Version:         2.3.3
Requires PHP:    7.3
License:         GNU General Public License v2 or later
License URI:     http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:     pctmart
*/

/* ==========================================================================
   PCT Mart child theme

   Deliberately small. Shoptimizer owns the layout, the templates and the
   component styling — this file only does what the Customizer can't express
   cleanly, and nothing else.

   Shoptimizer has no CSS custom properties of its own: its colours come from
   the Customizer (Kirki) and are written into dynamic.css as literal values.
   So set the accent colour, logo and typography in
   Appearance → Customize first, and only add a rule here when the Customizer
   genuinely can't reach it. Every rule below is an exception of that kind.

   This stylesheet is enqueued by the parent as 'shoptimizer-child-style',
   after the parent and WooCommerce styles, versioned by the Version header
   above — so bump that version when you edit this file.
   ========================================================================== */

/* Colour scheme tokens.

   Every brand colour in the child theme's stylesheets reads from these, so a
   scheme is one block here. The active scheme is picked in Appearance →
   Customize → PCTMart colours (inc/color-scheme.php), which adds its body
   class and sets the parent's header and menu colours to match. Teal is the
   default and needs no class. */
:root {
	--pct-brand:             #1eccb0;
	--pct-brand-deep:        #1e7b74;
	--pct-brand-ink:         #08332c;
	--pct-brand-mid:         #56b199;
	--pct-brand-mid-deep:    #3f9a82;
	--pct-brand-tint:        #eef6f3;
	--pct-brand-tint-soft:   #f4f9f7;
	--pct-brand-tint-strong: #d7e6e0;
	--pct-footer-bg:         #10302c;

	/* Top bar: a light band so the offer in it reads at a glance. */
	--pct-announce-bg:       #e6f8f4;
	--pct-announce-fg:       #0c111d;
	--pct-announce-promo:    #0f6b60;

	/* Menu bar text; the band itself is the parent's Navigation background. */
	--pct-nav-fg:            #fff;
	--pct-nav-hover:         #fff;
}

/* Red header, as on the current pctmart.com, with everything else in the
   navy of the logo's second pill: red on every button, icon and tint was
   too much of it. The header and menu bars take their red and charcoal from
   the parent's settings (inc/color-scheme.php); only small header details
   read --pct-brand. */
body.pctmart-scheme-red {
	--pct-brand:             #ec1e1e;
	--pct-brand-deep:        #1e3a8a;
	--pct-brand-ink:         #3d0a0a;
	--pct-brand-mid:         #3b6fd8;
	--pct-brand-mid-deep:    #1e3a8a;
	--pct-brand-tint:        #eef3fb;
	--pct-brand-tint-soft:   #f6f8fc;
	--pct-brand-tint-strong: #d8e2f4;
	--pct-footer-bg:         #161616;

	--pct-announce-bg:       #fff3c4;
	--pct-announce-fg:       #1d2327;
	--pct-announce-promo:    #b42318;

	/* White menu bar under the red header (inc/color-scheme.php sets the
	   band white); dark labels, red on hover. */
	--pct-nav-fg:            #1d2327;
	--pct-nav-hover:         #ec1e1e;
}

:root {
	/* Brand. Keep in step with the Customizer accent rather than fighting it. */
	--pct-green:      #5f8f1d;
	--pct-green-dark: #4d7317;
	--pct-indigo:     #29166f;

	--pct-ink:        #1d2327;
	--pct-muted:      #667085;
	--pct-line:       #e4e7ec;

	--pct-radius:     6px;
}

/* Archive and product pages: the breadcrumb sat hard against the header, so
   the trail and the title start lower on desktop. */
@media (min-width: 993px) {
	.archive .woocommerce-breadcrumb,
	.single-product .woocommerce-breadcrumb {
		padding-top: 36px;
	}
}

/* --------------------------------------------------------------------------
   1. Type
   The Customizer sets Inter (self-hosted) site-wide and its rule wins over
   this one; this stack is only the fallback when the Customizer font is
   turned off.
   -------------------------------------------------------------------------- */

body,
button,
input,
select,
textarea {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   2. Stock status
   The sheet sync drives in-stock / out-of-stock, so these two states need to
   read clearly. Shoptimizer styles .stock as plain text.
   -------------------------------------------------------------------------- */

.woocommerce div.product p.stock {
	display: inline-block;
	padding: 2px 10px;
	border-radius: var(--pct-radius);
	font-size: 13px;
	font-weight: 500;
}

.woocommerce div.product p.stock.in-stock {
	background: #ecfdf3;
	color: #05603a;
}

.woocommerce div.product p.stock.out-of-stock {
	background: #fef3f2;
	color: #b42318;
}

/* A product the sync marked out of stock should look unavailable in the grid
   too, not just on its own page. */
.woocommerce ul.products li.product.outofstock .woocommerce-loop-product__link img {
	opacity: 0.55;
}

/* Active ingredient under the card title (inc/shop-loop.php). Small and
   muted so the brand name stays the line people read first. */
ul.products li.product .pct-card-ingredient {
	margin: 2px 0 6px;
	color: var(--pct-muted);
	font-size: 12px;
	line-height: 1.35;
}

/* "Sold out" label on the card (inc/shop-loop.php), over the photo's corner. */
ul.products li.product {
	position: relative;
}

ul.products li.product .pct-card-soldout {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	padding: 3px 10px;
	border-radius: 25rem;
	background: #b42318;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   3. Variation tables
   Variable products here vary on strength alone, and those are short values —
   the default full-width select looks broken beside them.
   -------------------------------------------------------------------------- */

.woocommerce div.product form.cart .variations select {
	min-width: 12em;
	max-width: 100%;
	border-radius: var(--pct-radius);
}

.woocommerce div.product form.cart .variations th.label {
	padding-right: 1em;
	color: var(--pct-muted);
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   4. Short description
   The sheet keeps this field current, so it carries most of the real product
   information. Give it a little more presence than body copy.
   -------------------------------------------------------------------------- */

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--pct-ink);
	font-size: 15px;
	line-height: 1.65;
}

/* --------------------------------------------------------------------------
   5. Admin-ish niceties
   The catalog is large and machine-generated, so SKUs are worth reading.
   -------------------------------------------------------------------------- */

.woocommerce div.product .product_meta .sku {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   6. Layout primitive

   The site grid, and a site-wide one: the footer uses it as much as the home
   sections do. Shoptimizer's own `.col-full` does this job, but only reliably
   at the top level — nested inside a template it loses its max-width, and
   content ends up flush to the viewport edge while the header stays on the
   grid. The numbers here are the parent's, so anything carrying this class
   lines up with the header and the category bar.
   -------------------------------------------------------------------------- */

.pctmart-inner {
	box-sizing: content-box;
	width: auto;
	max-width: 1170px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 2.617924em;
	padding-left: 2.617924em;
}

@media (max-width: 768px) {
	.pctmart-inner {
		padding-right: 1em;
		padding-left: 1em;
	}
}

/* -------------------------------------------------------------------------
 * Content pages (FAQ, shipping, policies)
 * ---------------------------------------------------------------------- */
.page .entry-content .pctmart-lead {
	font-size: 1.15em;
	line-height: 1.6;
	color: #333;
	margin-bottom: 2em;
}
.page .entry-content h2 {
	margin-top: 2.2em;
}
.page .entry-content h3 {
	margin-top: 1.6em;
	font-size: 1.15em;
}
.page .entry-content h2 + h3 {
	margin-top: 1em;
}
.pctmart-table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5em 0;
	font-size: 0.95em;
}
.pctmart-table th,
.pctmart-table td {
	border: 1px solid #e3e3e3;
	padding: 0.75em 0.9em;
	text-align: left;
	vertical-align: top;
}
.pctmart-table th {
	background: var(--pct-brand-tint-soft);
}
@media (max-width: 600px) {
	.pctmart-table thead { display: none; }
	.pctmart-table tr { display: block; border: 1px solid #e3e3e3; margin-bottom: 1em; }
	.pctmart-table td { display: block; border: 0; border-top: 1px solid #eee; }
	.pctmart-table td:first-child { border-top: 0; background: var(--pct-brand-tint-soft); }
}

/* -------------------------------------------------------------------------
 * Shipping terms by country (inc/country-shipping.php)
 *
 * The panel the top bar's "We ship to" link lands on, above the general
 * policy on the Shipping and delivery page.
 * ---------------------------------------------------------------------- */
.pctmart-ship-country {
	margin: 0 0 2.5em;
	padding: 24px;
	border: 1px solid var(--pct-line);
	border-radius: 12px;
	background: var(--pct-brand-tint-soft);
	/* Clear of the sticky header when the #ship-country anchor is followed. */
	scroll-margin-top: 140px;
}

.page .entry-content .pctmart-ship-country-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
}

.pctmart-ship-country-flag {
	display: block;
	width: auto;
	height: 22px;
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.pctmart-ship-terms {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 28px;
	margin: 0 0 20px;
}

.pctmart-ship-term dt {
	margin: 0 0 4px;
	color: var(--pct-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pctmart-ship-term dd {
	margin: 0;
	color: var(--pct-ink);
	font-size: 15px;
	line-height: 1.55;
}

.pctmart-ship-country-none {
	font-weight: 500;
}

.pctmart-ship-picker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding-top: 16px;
	border-top: 1px solid var(--pct-line);
}

.pctmart-ship-picker label {
	font-size: 14px;
	font-weight: 500;
}

.pctmart-ship-picker select {
	flex: 1 1 220px;
	max-width: 320px;
}

@media (max-width: 600px) {
	.pctmart-ship-country {
		padding: 18px;
	}

	.pctmart-ship-terms {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* -------------------------------------------------------------------------
 * Parcel tracking (inc/order-tracking.php)
 *
 * On the Track order page and My account → View order, above the order table.
 * ---------------------------------------------------------------------- */
.pctmart-track {
	margin: 0 0 28px;
}

.woocommerce .pctmart-track-title {
	margin: 0 0 12px;
	font-size: 20px;
}

.pctmart-track-empty,
.pctmart-track-pending {
	margin: 0;
	color: var(--pct-muted);
	font-size: 14px;
}

.pctmart-track-parcel {
	margin: 0 0 14px;
	padding: 18px 20px;
	border: 1px solid var(--pct-line);
	border-radius: 12px;
	background: #fff;
}

.pctmart-track-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin-bottom: 10px;
}

.pctmart-track-number {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.pctmart-track-label {
	color: var(--pct-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pctmart-track-code {
	color: var(--pct-ink);
	font-size: 16px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.03em;
}

.pctmart-track-status {
	margin: 0;
	padding: 4px 12px;
	border-radius: 25rem;
	background: #eef4ff;
	color: #1d4ed8;
	font-size: 13px;
	font-weight: 600;
}

.pctmart-track-status[data-status="delivered"] {
	background: #ecfdf3;
	color: #05603a;
}

.pctmart-track-route {
	margin: 0 0 10px;
	color: #475467;
	font-size: 14px;
}

.pctmart-track-latest {
	margin: 0 0 10px;
	padding: 12px 14px;
	border-left: 3px solid var(--pct-brand-deep);
	border-radius: 0 8px 8px 0;
	background: var(--pct-brand-tint-soft);
}

.pctmart-track-latest-state {
	margin: 0 0 4px;
	color: var(--pct-ink);
	font-size: 15px;
	font-weight: 600;
}

.pctmart-track-latest-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 0;
	color: #475467;
	font-size: 13px;
}

.pctmart-track-latest-meta a {
	color: var(--pct-brand-deep);
}

.pctmart-track-history summary {
	color: var(--pct-brand-deep);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.pctmart-track-events {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.pctmart-track-events li {
	display: grid;
	grid-template-columns: 7.5em minmax(0, 1fr);
	gap: 2px 12px;
	margin: 0;
	padding: 8px 0;
	border-top: 1px solid var(--pct-line);
	font-size: 13.5px;
}

.pctmart-track-events time {
	grid-row: span 2;
	color: var(--pct-muted);
	font-variant-numeric: tabular-nums;
}

.pctmart-track-event-place {
	color: var(--pct-muted);
}

.pctmart-track-out {
	margin: 10px 0 0;
	font-size: 13px;
}

.pctmart-track-out a {
	color: var(--pct-brand-deep);
	font-weight: 600;
}

.pctmart-track-mine {
	margin: 0 0 28px;
	padding: 18px 20px;
	border: 1px solid var(--pct-line);
	border-radius: 12px;
	background: var(--pct-brand-tint-soft);
}

.page .entry-content .pctmart-track-mine h2 {
	margin: 0 0 10px;
	font-size: 18px;
}

.pctmart-track-mine-list {
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}

.pctmart-track-mine-list li {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 0;
	padding: 8px 0;
	border-top: 1px solid var(--pct-line);
	font-size: 14px;
}

.pctmart-track-mine-list li span {
	color: var(--pct-muted);
}

/* -------------------------------------------------------------------------
 * Support tickets (inc/support-tickets.php)
 * ---------------------------------------------------------------------- */
.pctmart-ticket-gate,
.pctmart-ticket-box {
	margin: 1.5em 0;
	padding: 22px 24px;
	border: 1px solid var(--pct-line);
	border-radius: 12px;
	background: var(--pct-brand-tint-soft);
}

.page .entry-content .pctmart-ticket-box-title {
	margin: 0 0 8px;
	font-size: 18px;
}

.pctmart-ticket-gate-lead {
	font-size: 16px;
}

.pctmart-ticket-gate-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
}

.pctmart-ticket-gate .button,
.pctmart-ticket-box .button {
	border-radius: 25rem;
	background: var(--pct-brand-deep);
	color: #fff;
	font-weight: 600;
}

.pctmart-ticket-link {
	margin-left: 12px;
	color: var(--pct-brand-deep);
	font-weight: 600;
}

.pctmart-ticket-gate-alt {
	margin-bottom: 0;
	color: var(--pct-muted);
	font-size: 14px;
}

.pctmart-ticket-admin-note {
	padding: 10px 14px;
	border: 1px dashed #f79009;
	border-radius: 8px;
	background: #fffaeb;
	color: #93370d;
	font-size: 14px;
}