/*
Theme Name: Popato
Theme URI: https://popato.in
Description: Popato storefront theme — a Hello Elementor child theme carrying the Popato brand system (warm sand/ink palette, Georgia display serif) and a conversion-tuned WooCommerce skin. Built for Elementor Pro Theme Builder.
Author: Popato
Version: 1.0.0
Template: hello-elementor
License: GNU General Public License v2 or later
Text Domain: popato
Tags: e-commerce, custom-colors, responsive-layout
*/

/* ==========================================================================
   1. Design tokens — the single source of truth for the Popato brand.
      Derived from the Z-Luxe product page design.
   ========================================================================== */

:root {
	/* Core palette — black and white, matching popato.in. The warm sand/espresso
	   scheme this started with has been dropped entirely; the only colour left
	   is the review star, which needs to read as a star and not as a glyph. */
	--pop-ink:        #000000; /* headings, buttons, primary text */
	--pop-ink-soft:   #333333;
	--pop-body:       #333333; /* body copy */
	--pop-muted:      #767676; /* secondary copy, meta — AA on white */
	--pop-faint:      #9b9b9b;

	--pop-cream:      #ffffff; /* text on dark */
	--pop-sand:       #e5e5e5;
	--pop-bg:         #ffffff; /* page background */
	--pop-bg-alt:     #ffffff; /* was a grey band — the page is white throughout */
	--pop-surface:    #ffffff;
	--pop-line:       #e5e5e5; /* hairlines, borders */

	/* Primary action: black, lightening to popato.in's rgb(71,71,71) on hover. */
	--pop-gold:       #000000;
	--pop-gold-dark:  #474747;
	--pop-star:       #000000; /* mono throughout, stars included */
	--pop-success:    #000000;
	--pop-success-bg: #f7f7f7;
	--pop-sale:       #000000;

	/* Typography */
	/* Manrope reads as premium and modern at display sizes; Inter is the most
	   legible body face at small sizes on Indian mobile screens. */
	--pop-font-display: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--pop-font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

	--pop-h1: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
	--pop-h2: clamp(1.6rem, 1.2rem + 1.7vw, 2.35rem);
	--pop-h3: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
	--pop-lead: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);

	/* Rhythm & shape */
	--pop-container: 1200px;
	--pop-gutter: clamp(14px, 4vw, 24px);
	--pop-section-y: clamp(38px, 6vw, 76px);
	--pop-radius: 14px;
	--pop-radius-sm: 9px;
	--pop-radius-pill: 999px;

	--pop-shadow-sm: 0 1px 2px rgba(27, 27, 27, .06), 0 2px 8px rgba(27, 27, 27, .05);
	--pop-shadow-md: 0 4px 12px rgba(27, 27, 27, .08), 0 12px 32px rgba(27, 27, 27, .07);
	--pop-shadow-lg: 0 12px 40px rgba(27, 27, 27, .14);

	--pop-ease: cubic-bezier(.4, 0, .2, 1);
	--pop-speed: .22s;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
	background: var(--pop-bg);
	color: var(--pop-body);
	font-family: var(--pop-font-body);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

h1, h2, h3, h4, .pop-display,
.woocommerce-loop-product__title,
.product_title {
	font-family: var(--pop-font-display);
	color: var(--pop-ink);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -0.022em;   /* geometric sans needs tighter tracking than a serif */
}

h1 { font-size: var(--pop-h1); }
h2 { font-size: var(--pop-h2); }
h3 { font-size: var(--pop-h3); }

a { color: var(--pop-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--pop-gold-dark); }

img, video { max-width: 100%; height: auto; }

/* Visible, brand-consistent focus ring — accessibility baseline. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--pop-gold);
	outline-offset: 2px;
	border-radius: 4px;
}

.pop-container {
	max-width: var(--pop-container);
	margin-inline: auto;
	padding-inline: var(--pop-gutter);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* Skip link */
.pop-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 10000;
	background: var(--pop-ink); color: var(--pop-cream);
	padding: 12px 20px; border-radius: 0 0 var(--pop-radius-sm) 0;
}
.pop-skip-link:focus { left: 0; color: var(--pop-cream); }

/* ==========================================================================
   3. Buttons — one system across theme, WooCommerce and Elementor
   ========================================================================== */

.pop-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wc-block-components-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--pop-font-body);
	font-size: 15px;
	font-weight: 650;
	letter-spacing: .01em;
	line-height: 1.2;
	padding: 14px 26px;
	min-height: 48px; /* comfortable tap target */
	border: 1px solid transparent;
	border-radius: var(--pop-radius-pill);
	background: var(--pop-ink);
	color: var(--pop-cream);
	cursor: pointer;
	text-decoration: none;
	transition: transform var(--pop-speed) var(--pop-ease),
	            box-shadow var(--pop-speed) var(--pop-ease),
	            background-color var(--pop-speed) var(--pop-ease);
}

.pop-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--pop-ink-soft);
	color: var(--pop-cream);
	transform: translateY(-1px);
	box-shadow: var(--pop-shadow-md);
}

/* Primary conversion action — add to cart, checkout, place order */
.pop-btn--primary,
.woocommerce button.single_add_to_cart_button,
.woocommerce .checkout-button,
.woocommerce #place_order,
.wc-block-components-checkout-place-order-button {
	background: var(--pop-gold);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	padding: 16px 32px;
	min-height: 54px;
	box-shadow: var(--pop-shadow-sm);
}

.pop-btn--primary:hover,
.woocommerce button.single_add_to_cart_button:hover,
.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover {
	background: var(--pop-gold-dark);
	color: #fff;
}

.pop-btn--ghost {
	background: transparent;
	color: var(--pop-ink);
	border-color: var(--pop-ink);
}
.pop-btn--ghost:hover { background: var(--pop-ink); color: var(--pop-cream); }

.pop-btn--block { width: 100%; }

button[disabled], .button.disabled, .woocommerce button.button:disabled {
	opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none !important;
}

/* ==========================================================================
   4. WooCommerce — product grid
   ========================================================================== */

/* popato.in runs a fixed 3-up grid at 20px, dropping to 2-up at 10px on small
   screens — not an auto-fill, so the card width is predictable at every size. */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 768.98px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

/* ------------------------------------------------------------------------
   Catalogue card — popato.in's, reproduced from their computed CSS.

   Their card is `.wd-product`: centre-aligned, no chrome, a 12px flex gap
   between every element, and text that inherits the 18px body size. The
   thumbnail is a square with the second gallery image absolutely stacked on
   it, fading in and scaling to 1.09 on hover, and Add to cart slides up from
   translateY(103%) to sit flush on the foot of the picture.
   ------------------------------------------------------------------------ */

.woocommerce ul.products li.product {
	position: relative;
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	gap: 12px;                 /* --wd-prod-gap */
	background: none;
	border: 0;
	border-radius: 0;
	text-align: center;
	font-size: 18px;           /* title and price inherit this, as theirs do */
	line-height: 1.4;
}

.woocommerce ul.products li.product .pop-card__media {
	position: relative;
	display: block;
	/* Clips the 1.09 hover scale and gives the button its containing block. */
	overflow: hidden;
	border-radius: 0;
	backface-visibility: hidden;
}

.woocommerce ul.products li.product .pop-card__link {
	display: block;
	position: relative;
}

.woocommerce ul.products li.product a img {
	display: block;
	margin: 0;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: #fff;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--pop-font-display);
	font-size: inherit;
	font-weight: 600;
	color: #333;
	line-height: inherit;
	/* Their -.2em block trim, which pulls the name up under the picture. */
	margin-block: -.2em;
	padding: 0;
}

.woocommerce ul.products li.product .price {
	display: block;
	padding: 0;
	margin-block: -.2em;
	color: var(--pop-ink);
	font-size: inherit;
	font-weight: 400;
	line-height: inherit;
	font-family: var(--pop-font-body);
}
.woocommerce ul.products li.product .price del {
	color: var(--pop-muted);
	font-weight: 400;
	margin-right: 6px;
	opacity: .85;
}
.woocommerce ul.products li.product .price ins {
	background: transparent;
	color: var(--pop-ink);
	font-weight: 600;
	text-decoration: none;
}

/* popato.in shows no star rating in the grid. */
.woocommerce ul.products li.product .star-rating { display: none; }

/* Add to cart: 38px tall, square, black, uppercase 13/600. It waits just below
   the picture at translateY(103%) and slides flush on hover — and sits at 80%
   opacity until the pointer is on the button itself, exactly as theirs does. */
.woocommerce ul.products li.product .button {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 3;
	display: block;
	margin: 0;
	padding: 0 10px;
	min-height: 38px;
	line-height: 38px;
	border: 0;
	border-radius: 0 !important;
	background: #000 !important;
	color: #fff !important;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: uppercase;
	opacity: .8;
	transform: translateY(103%) translateZ(0);
	backface-visibility: hidden;
	transition: transform .3s ease, opacity .3s ease;
}
.woocommerce ul.products li.product:hover .button,
.woocommerce ul.products li.product .button:focus-visible {
	transform: translateY(0) translateZ(0);
}

/* Their accented-button hover is rgb(71,71,71) with no shadow. The site-wide
   button hover would otherwise lift this one and drop a shadow under it, which
   the loop button never does — so both are cancelled here. */
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:focus {
	opacity: 1;
	background: #474747 !important;
	color: #fff !important;
	box-shadow: none !important;
	transform: translateY(0) translateZ(0);
}

/* The product name goes to black on hover, not to the site's gold link colour. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title a {
	color: #333;
	text-decoration: none;
	transition: color .2s var(--pop-ease);
}
.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title a:hover {
	color: #000;
}

/* Nothing else on the card reacts to hover: no lift, no shadow, no zoom on the
   primary image — only the second image fades in and the button slides up. */
.woocommerce ul.products li.product:hover {
	transform: none;
	box-shadow: none;
}

/* Their breakpoint: below 1024px the button stops hiding, because hover is not
   a gesture on touch and an unreachable Add to cart is no Add to cart. */
@media (max-width: 1024px) {
	.woocommerce ul.products li.product .button {
		position: static;
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 576px) {
	.woocommerce ul.products li.product { font-size: 16.2px; gap: 10px; }
}

/* Sale badge — popato.in's exact spec: black, 12px radius, uppercase 12/600,
   inset 7px from the top-left of the thumbnail. */
.woocommerce span.onsale {
	position: absolute;
	top: 7px;
	inset-inline-start: 7px;
	right: auto;
	min-width: 50px;
	min-height: 0;
	padding: 5px 10px;
	margin: 0;
	line-height: 1.2;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: normal;
	text-align: center;
	text-transform: uppercase;
	background: #000;
	color: #fff;
	border-radius: 12px;
	z-index: 4;
}
.woocommerce ul.products li.product { position: relative; }

/* ==========================================================================
   5. WooCommerce — single product
   ========================================================================== */

.woocommerce div.product .product_title { margin-bottom: 10px; }

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--pop-ink);
	font-family: var(--pop-font-body);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 700;
}
.woocommerce div.product p.price del { font-size: .6em; color: var(--pop-muted); font-weight: 500; }
.woocommerce div.product p.price ins { background: transparent; color: var(--pop-ink); text-decoration: none; }

.woocommerce div.product .woocommerce-product-gallery img { border-radius: var(--pop-radius); }

.woocommerce div.product form.cart { margin-block: 22px; }

.woocommerce div.product form.cart .quantity input.qty,
.woocommerce .quantity input.qty {
	height: 54px;
	width: 78px;
	border: 1px solid var(--pop-line);
	border-radius: var(--pop-radius-pill);
	background: var(--pop-surface);
	text-align: center;
	font-size: 16px; /* prevents iOS zoom on focus */
	font-weight: 600;
	color: var(--pop-ink);
}

/* Variation swatches read as product choices, not form controls */
.woocommerce div.product form.cart .variations { border: 0; margin-bottom: 16px; }
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td { display: block; text-align: left; padding: 0 0 8px; }
.woocommerce div.product form.cart .variations label {
	font-weight: 650;
	color: var(--pop-ink);
	text-transform: uppercase;
	font-size: 12.5px;
	letter-spacing: .08em;
}

.woocommerce div.product form.cart .variations select,
.woocommerce .select2-container .select2-selection--single,
.woocommerce form .form-row select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
	width: 100%;
	min-height: 50px;
	padding: 12px 16px;
	border: 1px solid var(--pop-line);
	border-radius: var(--pop-radius-sm);
	background: var(--pop-surface);
	color: var(--pop-body);
	font-size: 16px;
	font-family: var(--pop-font-body);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin-bottom: 0;
	border-bottom: 1px solid var(--pop-line);
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 14px 18px;
	font-weight: 650;
	color: var(--pop-muted);
	border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--pop-ink);
	border-bottom-color: var(--pop-gold);
}

/* Specification table (built from product attributes) */
.woocommerce table.shop_attributes {
	border: 1px solid var(--pop-line);
	border-radius: var(--pop-radius);
	overflow: hidden;
	border-collapse: separate;
	border-spacing: 0;
}
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
	border: 0;
	border-bottom: 1px solid var(--pop-line);
	padding: 13px 16px;
	font-style: normal;
	line-height: 1.5;
}
.woocommerce table.shop_attributes th {
	background: var(--pop-bg-alt);
	color: var(--pop-ink);
	font-weight: 650;
	width: 42%;
}
.woocommerce table.shop_attributes tr:last-child th,
.woocommerce table.shop_attributes tr:last-child td { border-bottom: 0; }
.woocommerce table.shop_attributes p { margin: 0; }

/* Stock state */
.woocommerce div.product .stock.in-stock {
	display: inline-flex; align-items: center; gap: 7px;
	color: var(--pop-success);
	background: var(--pop-success-bg);
	padding: 6px 14px;
	border-radius: var(--pop-radius-pill);
	font-weight: 650;
	font-size: 14px;
}
.woocommerce div.product .stock.out-of-stock { color: var(--pop-sale); font-weight: 650; }

/* ==========================================================================
   6. Cart, checkout, account
   ========================================================================== */

.woocommerce table.shop_table {
	border: 1px solid var(--pop-line);
	border-radius: var(--pop-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--pop-surface);
}
.woocommerce table.shop_table th { background: var(--pop-bg-alt); color: var(--pop-ink); }
.woocommerce table.shop_table td, .woocommerce table.shop_table th { border-color: var(--pop-line); }

.woocommerce .cart_totals h2,
.woocommerce-checkout h3 { font-size: var(--pop-h3); margin-bottom: 14px; }

.woocommerce-checkout #payment {
	background: var(--pop-bg-alt);
	border: 1px solid var(--pop-line);
	border-radius: var(--pop-radius);
}
.woocommerce-checkout #payment ul.payment_methods { border-bottom-color: var(--pop-line); padding: 18px; }
.woocommerce-checkout #payment div.form-row { padding: 18px; }

.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border-top: 0;
	border-left: 4px solid var(--pop-gold);
	border-radius: var(--pop-radius-sm);
	background: var(--pop-bg-alt);
	color: var(--pop-body);
	padding: 16px 20px 16px 22px;
	box-shadow: var(--pop-shadow-sm);
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { color: var(--pop-gold); }
.woocommerce-message { border-left-color: var(--pop-success); }
.woocommerce-message::before { color: var(--pop-success); }
.woocommerce-error { border-left-color: var(--pop-sale); }
.woocommerce-error::before { color: var(--pop-sale); }

/* My account navigation */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none; margin: 0; padding: 0;
	border: 1px solid var(--pop-line);
	border-radius: var(--pop-radius);
	overflow: hidden;
	background: var(--pop-surface);
}
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--pop-line); }
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block; padding: 13px 18px; font-weight: 600; text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--pop-bg-alt); color: var(--pop-ink);
	box-shadow: inset 3px 0 0 var(--pop-gold);
}

/* ==========================================================================
   6b. Long-form pages (policies, buying guides)
      These render through the classic template rather than Elementor, so they
      need their own measure and rhythm.
   ========================================================================== */

/* Scoped to classic pages only. Without :not(.elementor-page) this measure
   also squeezes every Elementor-built page down to 46rem. */
.page:not(.elementor-page) .site-main > .page-content,
.page:not(.elementor-page) .entry-content,
.single-post:not(.elementor-page) .entry-content {
	max-width: 46rem;
	margin-inline: auto;
	padding: clamp(28px, 5vw, 56px) var(--pop-gutter);
	font-size: 1.02rem;
	line-height: 1.75;
}

/* Elementor-built pages own their own width; never constrain their wrapper. */
.elementor-page .site-main,
.elementor-page .page-content,
.elementor-page .entry-content {
	max-width: none;
	padding: 0;
	margin: 0;
}

.page:not(.elementor-page) .entry-content > h2,
.page:not(.elementor-page) .site-main > .page-content h2 {
	margin: 2.1em 0 .6em;
	font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem);
	padding-bottom: .35em;
	border-bottom: 1px solid var(--pop-line);
}
.page:not(.elementor-page) .entry-content > h2:first-child,
.page:not(.elementor-page) .site-main > .page-content h2:first-child { margin-top: 0; }

.page:not(.elementor-page) .entry-content h3 { margin: 1.6em 0 .5em; }
.page:not(.elementor-page) .entry-content p { margin: 0 0 1.1em; }

.page:not(.elementor-page) .entry-content ul,
.page:not(.elementor-page) .entry-content ol,
.page:not(.elementor-page) .site-main > .page-content ul {
	margin: 0 0 1.3em;
	padding-left: 1.35em;
}
.page:not(.elementor-page) .entry-content li { margin-bottom: .5em; }

.page:not(.elementor-page) .entry-content a {
	color: var(--pop-gold-dark);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Page title on classic templates */
.page:not(.elementor-page) .entry-title,
.search .page-title {
	max-width: 46rem;
	margin: clamp(28px, 5vw, 52px) auto 0;
	padding-inline: var(--pop-gutter);
	font-size: var(--pop-h1);
}

/* ==========================================================================
   7. Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.woocommerce ul.products { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}

@media (max-width: 767px) {
	.woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: .95rem; padding: 12px 12px 4px; }
	.woocommerce ul.products li.product .price { padding-inline: 12px; font-size: .95rem; }
	.woocommerce ul.products li.product .button { margin: 10px 12px 12px; padding: 12px 16px; font-size: 14px; }

	/* Cart table collapses to cards */
	.woocommerce table.shop_table_responsive tr td { text-align: right; }
	.woocommerce table.shop_table_responsive tr td::before { float: left; font-weight: 650; color: var(--pop-ink); }

	/* Leave room for the sticky add-to-cart bar */
	body.single-product { padding-bottom: 78px; }
}

@media (max-width: 479px) {
	.woocommerce ul.products { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   8. Print — order confirmations / invoices
   ========================================================================== */

@media print {
	header, footer, .pop-sticky-atc, .pop-chat-launcher, .pop-announcement { display: none !important; }
	body { background: #fff; color: #000; }
}