/*
Theme Name: Watch World
Template: extendable
Theme URI: https://chiku-web.local
Author: Watch World, Malviya Road, Raipur
Description: A modern, minimalist luxury-retail child theme for Watch World — built on Extendable, refined with a warm ivory, ink and antique-gold palette that nods to the store's own signage and 40-year heritage.
Version: 1.0.0
Text Domain: watch-world
*/

/* ---------------------------------------------------------------
   Supplemental styling that theme.json cannot express cleanly.
   Global colors, typography and spacing live in theme.json —
   this file only handles bespoke component treatments.
   ------------------------------------------------------------- */

/* Logotype: tighten and track the site title like a boutique wordmark */
.wp-block-site-title a {
	letter-spacing: 0.12em;
	font-weight: 600;
}

/* Dark ink header bar, cream text/logo — matches a premium retail nav */
.site-header,
header.wp-block-template-part:has(.wp-block-site-title) {
	background-color: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
}
header.wp-block-template-part .wp-block-site-title a,
header.wp-block-template-part .wp-block-navigation a,
header.wp-block-template-part .wp-block-navigation__responsive-container-open svg {
	color: var(--wp--preset--color--background) !important;
}
header.wp-block-template-part .wp-block-navigation a:hover {
	color: var(--wp--preset--color--primary) !important;
}

/* Dark ink footer bar echoing the header */
footer.wp-block-template-part {
	background-color: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
}
footer.wp-block-template-part a,
footer.wp-block-template-part .wp-block-site-title a {
	color: var(--wp--preset--color--background);
}
footer.wp-block-template-part a:hover {
	color: var(--wp--preset--color--primary);
}
footer.wp-block-template-part .wp-block-social-link svg {
	fill: var(--wp--preset--color--background);
}

/* Trust / authorised-dealer strip */
.ww-trust-strip {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--foreground) 12%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--foreground) 12%, transparent);
}
.ww-trust-strip p {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--wp--preset--color--foreground-alt);
}

/* Hero: force cream text over the dark-dimmed storefront cover image */
.ww-hero .wp-block-cover__inner-container .wp-block-heading,
.ww-hero .wp-block-cover__inner-container p {
	color: var(--wp--preset--color--background) !important;
}

/* Product gallery images should never be stuck invisible waiting on JS
   that may not run (see: unrelated tracker script errors breaking the
   opacity-reveal handoff on this install). */
.woocommerce-product-gallery {
	opacity: 1 !important;
}

/* WooCommerce price + sale accents pick up the brand palette */
.woocommerce ins,
.price ins {
	text-decoration: none;
}
.woocommerce span.onsale,
.wc-block-components-product-sale-badge {
	background: var(--wp--preset--color--secondary) !important;
	color: var(--wp--preset--color--background) !important;
	font-weight: 600;
	letter-spacing: 0.04em;
	border-radius: 2px;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.price {
	color: var(--wp--preset--color--foreground);
}
.woocommerce ul.products li.product .price,
.wp-block-woocommerce-product-price {
	color: var(--wp--preset--color--foreground);
}

/* Product cards: subtle lift on hover for a premium feel */
.woocommerce ul.products li.product,
.wc-block-grid__product,
.wc-block-product-template li {
	transition: transform 180ms ease, box-shadow 180ms ease;
}
.woocommerce ul.products li.product:hover,
.wc-block-grid__product:hover,
.wc-block-product-template li:hover {
	transform: translateY(-3px);
}

/* Section eyebrow labels (small tracked caps above headings) */
.ww-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}