/* Store skins.
   ---------------------------------------------------------------------------
   One file, one block per store. custom-shop-styles.css owns all layout and
   reads every colour, radius and shadow from a token; a skin only re-points
   those tokens. Adding a store means adding a block here and one line to that
   store's wp-config.php:

       define( 'SHOP_SKIN', 'aqua' );

   Unset or unknown values fall back to 'mono'. Register the name in
   custom_shop_styles_skins() in custom-shop-styles.php or it will be ignored.

   Skin blocks are scoped to body.shop-skin-<name>. That beats the :root
   defaults for everything inside <body>, which is the whole storefront. */


/* ===========================================================================
   mono — default
   Near-black ink and buttons on white, neutral grey shadows. Quiet and
   product-led: nothing on the page competes with the photography.
   Defined as the :root defaults in custom-shop-styles.css, so it needs no
   block here. body.shop-skin-mono is emitted anyway as a styling hook.
   =========================================================================== */


/* ===========================================================================
   aqua — bright & airy retail
   White cards floating on a blue-tinted page, #046afd carrying every action.
   Signature: the blue is treated as a *light source*, not a coat of paint —
   every shadow is tinted with it rather than neutral grey, and the primary
   button lifts into a blue glow on hover. Colour arrives as atmosphere first
   and pigment second, which is what keeps it airy at this saturation.
   =========================================================================== */

body.shop-skin-aqua {
	/* Ink — blue-black rather than neutral, so text sits in the same family
	   as the brand instead of being a grey foreign object next to it. */
	--shop-ink: #0b1a33;
	--shop-muted: #5b7089;        /* 5.1:1 on white — AA */
	--shop-body-text: #33475f;

	/* Surfaces */
	--shop-card-bg: #fff;
	--shop-img-bg: #eef3fc;
	--shop-border: #dfe7f5;

	/* Brand */
	--shop-accent: #046afd;       /* 4.7:1 with white text — AA */
	--shop-accent-hover: #0353d1;
	--shop-on-accent: #fff;
	--shop-price: #046afd;        /* price reads as the call to action */
	--shop-sale: #e5484d;
	--shop-featured-bg: #046afd;

	/* Stock pills, tinted to match */
	--shop-ok-bg: #e6f6ec;
	--shop-ok-ink: #157f3c;
	--shop-bad-bg: #fdecec;
	--shop-bad-ink: #c1272d;

	/* Shape — a touch softer than mono to read friendlier */
	--shop-radius: 16px;
	--shop-pill: 999px;

	/* Depth & motion — blue-tinted, never grey */
	--shop-lift: -6px;
	--shop-shadow-sm: 0 4px 14px rgba(4, 54, 120, 0.10);
	--shop-shadow-hover: 0 18px 36px -14px rgba(4, 54, 120, 0.28);

	/* Page field the white cards float on */
	background-color: #f5f8ff;
}

/* Resting card shadow. mono gives cards a border and no lift until hover;
   aqua floats them from the start so the page reads open rather than gridded. */
body.shop-skin-aqua .brxe-woocommerce-products ul.products li.product,
body.shop-skin-aqua ul.products.woocommerce > li.repeater-item.product,
body.shop-skin-aqua .brxe-product-related ul.products li.product {
	box-shadow: 0 1px 2px rgba(4, 54, 120, 0.04),
	            0 8px 20px -14px rgba(4, 54, 120, 0.18);
}

/* Signature: the primary action lifts into its own blue light on hover. */
body.shop-skin-aqua .brxe-woocommerce-products ul.products li.product a.add_to_cart_button:hover,
body.shop-skin-aqua .brxe-woocommerce-products ul.products li.product a.button:hover,
body.shop-skin-aqua ul.products.woocommerce > li.repeater-item.product > div.dynamic:nth-of-type(3) a.button:hover,
body.shop-skin-aqua .brxe-product-related ul.products li.product a.add_to_cart_button:hover,
body.shop-skin-aqua .brxe-product-add-to-cart .single_add_to_cart_button:hover {
	box-shadow: 0 8px 18px -6px rgba(4, 106, 253, 0.45);
}

/* The toolbar select is the one control that shouldn't gain blue on focus —
   it's navigation, not an action. It borrows ink instead, matching mono. */
body.shop-skin-aqua .brxe-woocommerce-products .woocommerce-ordering .orderby:hover,
body.shop-skin-aqua .brxe-woocommerce-products .woocommerce-ordering .orderby:focus {
	border-color: var(--shop-accent);
}


/* ===========================================================================
   express — BestShopExp
   Brand colours sampled from the logo: teal #09A899, orange #FE9B19,
   deep teal #056160.

   Colour roles follow the logo's own semantics rather than picking a favourite:
   in the mark, teal is what stands still (the wordmark, the bag) and orange is
   what moves (the parcel, the arrow). So teal carries structure — ink, prices,
   borders — and orange is spent on exactly one thing per screen: the action.

   This is also forced by contrast. #FE9B19 on white is 2.1:1 and cannot legally
   hold white text, but on deep-teal-black it reaches 6.8:1. An orange button
   with near-black teal type is both the accessible answer and the one that
   matches the parcel in the logo, so the constraint and the brand agree.

   Signature: forward lean. The wordmark is oblique and the mark is drawn with
   speed lines, so badges are skewed to the same angle and cards accelerate
   sideways on hover with the shadow trailing behind them, rather than doing the
   generic straight-up lift. Motion reads as delivery, which is the business.
   =========================================================================== */

body.shop-skin-express {
	/* Ink — darkened from the logo's #056160 so long text stays comfortable */
	--shop-ink: #04332f;          /* 13.8:1 on white */
	--shop-muted: #4d7873;        /* 4.9:1 on white — AA */
	--shop-body-text: #2b4f4a;

	/* Surfaces */
	--shop-card-bg: #fff;
	--shop-img-bg: #eaf5f2;
	--shop-border: #d7ebe6;

	/* Brand */
	--shop-accent: #fe9b19;        /* the parcel orange — actions only */
	--shop-accent-hover: #ef8a06;
	--shop-on-accent: #04302b;     /* 6.8:1 on the orange — AA */
	--shop-price: var(--shop-ink); /* price is information, so it stays teal */
	--shop-sale: #c2410c;          /* deeper burnt orange, 5.2:1, never confused
	                                  with the CTA it sits next to */
	--shop-featured-bg: #056160;   /* the logo's deep teal */
	--shop-on-badge: #fff;         /* badges keep white type; only the orange
	                                  button needs dark text */

	/* The accent is far too light to be a focus ring — orange on a white card is
	   2.1:1, under the 3:1 minimum. Ink instead. */
	--shop-focus: var(--shop-ink);

	/* Stock pills */
	--shop-ok-bg: #e3f6f1;
	--shop-ok-ink: #046d5e;
	--shop-bad-bg: #fdecea;
	--shop-bad-ink: #b52d1c;

	/* Shape — tighter than aqua; soft corners read slow */
	--shop-radius: 10px;
	--shop-pill: 999px;

	/* Depth — teal-tinted. Lift is neutralised because this skin moves
	   cards sideways instead; see the momentum rule below. */
	--shop-lift: 0px;
	--shop-shadow-sm: 0 4px 14px rgba(4, 51, 47, 0.12);
	--shop-shadow-hover: -6px 16px 30px -14px rgba(4, 51, 47, 0.30);

	background-color: #f3faf8;
}

/* Signature 1 — oblique badges, set to the same lean as the wordmark. */
body.shop-skin-express .brxe-woocommerce-products ul.products li.product.sale::before,
body.shop-skin-express .brxe-woocommerce-products ul.products li.product.featured:not(.sale)::before {
	transform: skewX(-10deg);
	border-radius: 3px;
	padding: 5px 12px;
}

/* Signature 2 — momentum. Cards accelerate forward rather than lifting, and
   the shadow trails to the left as if left behind. */
body.shop-skin-express .brxe-woocommerce-products ul.products li.product:hover,
body.shop-skin-express ul.products.woocommerce > li.repeater-item.product:hover,
body.shop-skin-express .brxe-product-related ul.products li.product:hover {
	transform: translateX(6px);
}

/* Resting shadow, so cards read as already in motion on touch devices where
   the hover signature never fires. */
body.shop-skin-express .brxe-woocommerce-products ul.products li.product,
body.shop-skin-express ul.products.woocommerce > li.repeater-item.product,
body.shop-skin-express .brxe-product-related ul.products li.product {
	box-shadow: -1px 2px 3px rgba(4, 51, 47, 0.05);
}

/* The momentum rule is more specific than the base reduced-motion block, so it
   has to opt out here or it would override it and keep animating. */
@media (prefers-reduced-motion: reduce) {
	body.shop-skin-express .brxe-woocommerce-products ul.products li.product:hover,
	body.shop-skin-express ul.products.woocommerce > li.repeater-item.product:hover,
	body.shop-skin-express .brxe-product-related ul.products li.product:hover {
		transform: none;
	}
}

body.shop-skin-express .brxe-woocommerce-products .woocommerce-ordering .orderby:hover,
body.shop-skin-express .brxe-woocommerce-products .woocommerce-ordering .orderby:focus {
	border-color: var(--shop-ink);
}