/*
Theme Name: Aquabloom
Theme URI: https://localhost/aquabloom
Description: Aquabloom storefront - a child theme of Fish Aquarium Shop tuned for an Indian aquarium and aquascaping retailer. Adds a purpose-built homepage, a wider product grid, INR/GST-aware pricing display, a sticky cart indicator in the header and refinements to the WooCommerce catalogue and product pages. All shop behaviour lives in the Aquabloom Core plugin, so this theme can be replaced without losing store functionality.
Author: Aquabloom
Author URI: https://localhost/aquabloom
Template: fish-aquarium-shop
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: aquabloom
Tags: e-commerce, two-columns, right-sidebar, custom-menu, custom-logo, featured-images, translation-ready
*/

/* -----------------------------------------------------------------------------
 * Design tokens
 *
 * Sampled from the AquaBloom GlassGarden logo: a deep navy badge (#0C1B2A), the
 * white bloom, leaf green (#7CC342) and bubble teal (#2DC4E6).
 * -------------------------------------------------------------------------- */
:root {
	--ab-deep: #0c1b2a;
	--ab-navy: #07111c;
	--ab-teal: #0f7f96;
	--ab-teal-dark: #0a5f71;
	--ab-aqua: #2dc4e6;
	--ab-leaf: #7cc342;
	--ab-leaf-dark: #5ca330;
	--ab-amber: #d97706;
	--ab-ink: #0f1c26;
	--ab-body: #435668;
	--ab-muted: #64798d;
	--ab-line: #dae6ee;
	--ab-surface: #f2f9fc;
	--ab-white: #ffffff;
	--ab-ok: #4f9c1f;
	--ab-radius: 12px;
	--ab-shadow: 0 10px 30px rgba(12, 27, 42, 0.12);
}

/* -----------------------------------------------------------------------------
 * Base typography
 * -------------------------------------------------------------------------- */
body {
	color: var(--ab-body);
	background: var(--ab-white);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--ab-deep);
}

a {
	color: var(--ab-teal);
}

a:hover,
a:focus {
	color: var(--ab-teal-dark);
}

/* Visible focus for keyboard users everywhere. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--ab-aqua);
	outline-offset: 2px;
}

.ab-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.25rem;
}

.ab-section {
	margin: clamp(2.5rem, 6vw, 4.5rem) auto;
}

.ab-section-head {
	max-width: 720px;
	margin: 0 auto 2rem;
	text-align: center;
}

.ab-section-head h2 {
	margin: 0 0 0.6rem;
	font-size: clamp(1.55rem, 3.2vw, 2.2rem);
	line-height: 1.2;
}

.ab-section-head p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--ab-muted);
}

.ab-eyebrow {
	display: block;
	margin-bottom: 0.6rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ab-teal);
}

/* -----------------------------------------------------------------------------
 * Header contact bar (WhatsApp / phone / email / Instagram)
 * -------------------------------------------------------------------------- */
.ab-headbar {
	background: var(--ab-deep);
	color: #fff;
	font-size: 0.85rem;
	line-height: 1.2;
}

.ab-headbar__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0.5rem 1.25rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* Both groups (contact + account) sit together on the right. */
	justify-content: flex-end;
	gap: 0.4rem 1.4rem;
}

.ab-headbar__group {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 1.4rem;
}



/* A subtle divider between the contact links and the account links. */
.ab-headbar__group--account {
	gap: 0.4rem 0.75rem;
	padding-left: 1.4rem;
	margin-left: 0.2rem;
	border-left: 1px solid rgba(255, 255, 255, 0.18);
}

/* Login / Sign Up / Logout rendered as small pill buttons. */
.ab-headbar__link--auth {
	padding: 0.28rem 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 999px;
	font-weight: 600;
}

.ab-headbar__link--auth:hover,
.ab-headbar__link--auth:focus {
	background: var(--ab-leaf);
	border-color: var(--ab-leaf);
	color: #fff;
}

@media (max-width: 600px) {
	.ab-headbar__group--account {
		padding-left: 0;
		margin-left: 0;
		border-left: 0;
		width: 100%;
		justify-content: center;
	}
}

.ab-headbar__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
	font-weight: 500;
	transition: color 0.15s ease;
}

.ab-headbar__link:hover,
.ab-headbar__link:focus {
	color: #fff;
}

.ab-headbar__link svg,
.ab-headbar__link i {
	flex: 0 0 auto;
	font-size: 0.95rem;
}

.ab-headbar__link--whatsapp {
	padding: 0.28rem 0.85rem;
	background: #25d366;
	border-radius: 999px;
	color: #fff;
	font-weight: 600;
}

.ab-headbar__link--whatsapp:hover,
.ab-headbar__link--whatsapp:focus {
	background: #1eb85a;
	color: #fff;
}

.ab-headbar__link--ig {
	padding: 0.28rem 0.85rem;
	border-radius: 999px;
	color: #fff;
	font-weight: 600;
	/* Instagram brand gradient. */
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

.ab-headbar__link--ig:hover,
.ab-headbar__link--ig:focus {
	color: #fff;
	filter: brightness(1.08);
}

@media (max-width: 600px) {
	.ab-headbar__inner {
		justify-content: center;
		gap: 0.3rem 1rem;
		padding: 0.45rem 1rem;
	}
	/* Keep the bar compact on phones - show icons, drop the long email text. */
	.ab-headbar__link--email span {
		display: none;
	}
}

/* -----------------------------------------------------------------------------
 * Header layout tightening
 *
 * The parent theme leaves a large empty top bar and pushes the nav down. Pull it
 * back up and vertically centre the logo against the menu.
 * -------------------------------------------------------------------------- */
#header {
	padding: 0.75rem 0;
}

#header .topbar {
	display: none; /* Superseded by .ab-headbar above. */
}

#header .logo img.custom-logo {
	max-height: 72px;
	width: auto;
}

#header .menu-bar {
	margin-top: 0;
}

/* -----------------------------------------------------------------------------
 * Inner-page banner
 *
 * The parent prints a tall grey "#inner-pages-header" banner with the page title
 * and breadcrumb on every singular view. It is redundant on the front page (the
 * hero already carries the branding) and washed-out grey elsewhere. Hide it on
 * the front page; brand it everywhere else.
 * -------------------------------------------------------------------------- */
.home #inner-pages-header,
.page-template-front-page #inner-pages-header,
body.woocommerce-cart #inner-pages-header,
body.woocommerce-checkout #inner-pages-header {
	display: none;
}

#inner-pages-header {
	position: relative;
	padding: 2.75rem 1.25rem 3.25rem;
	margin-bottom: 2rem;
	background: linear-gradient(160deg, var(--ab-teal) 0%, var(--ab-deep) 100%);
	color: #fff;
	overflow: hidden;
}

#inner-pages-header .header-overlay {
	display: none;
}

#inner-pages-header .header-content {
	position: relative;
	z-index: 2;
}

#inner-pages-header h1 {
	margin: 0;
	color: #fff;
	font-size: clamp(1.6rem, 3.5vw, 2.4rem);
	line-height: 1.15;
}

#inner-pages-header .theme-breadcrumb {
	margin-top: 0.6rem;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.82);
}

#inner-pages-header .theme-breadcrumb a {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
}

#inner-pages-header .theme-breadcrumb a:hover {
	color: #fff;
}

#inner-pages-header .slidoly {
	position: absolute;
	inset: auto 0 -1px 0;
	line-height: 0;
	z-index: 1;
}

#inner-pages-header .slidoly svg {
	width: 100%;
	height: 42px;
}

#inner-pages-header .slidoly .wave1,
#inner-pages-header .slidoly .wave2 {
	fill: #fff;
}

/* -----------------------------------------------------------------------------
 * Header: cart indicator
 * -------------------------------------------------------------------------- */
.ab-cart-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 1.05rem;
	background: var(--ab-leaf);
	color: #fff;
	border-radius: 999px;
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.ab-cart-link:hover,
.ab-cart-link:focus {
	background: var(--ab-leaf-dark);
	color: #fff;
}

.ab-cart-link__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5em;
	height: 1.5em;
	padding: 0 0.35em;
	background: rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	font-size: 0.78rem;
	line-height: 1;
}

/* -----------------------------------------------------------------------------
 * Homepage: featured products rail
 * -------------------------------------------------------------------------- */
.ab-home-intro {
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
}

.ab-home-intro p {
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--ab-body);
}

.ab-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1.5rem;
	align-items: stretch;
}

.ab-card {
	padding: 1.75rem;
	background: var(--ab-surface);
	border: 1px solid var(--ab-line);
	border-radius: var(--ab-radius);
}

.ab-card h3 {
	margin: 0 0 0.7rem;
	font-size: 1.15rem;
}

.ab-card p {
	margin: 0 0 0.9rem;
	font-size: 0.94rem;
	line-height: 1.7;
	color: var(--ab-muted);
}

.ab-card ul {
	margin: 0 0 0.9rem;
	padding-left: 1.15rem;
	font-size: 0.92rem;
	line-height: 1.75;
	color: var(--ab-muted);
}

.ab-card__link {
	font-weight: 600;
	font-size: 0.92rem;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

/* -----------------------------------------------------------------------------
 * WooCommerce: product grid
 * -------------------------------------------------------------------------- */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem;
	margin: 0 0 2.5rem;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
	display: none;
}

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

@media (max-width: 782px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
	}
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	padding: 0 0 1.1rem;
	background: var(--ab-white);
	border: 1px solid var(--ab-line);
	border-radius: var(--ab-radius);
	overflow: hidden;
	text-align: left;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-3px);
	border-color: var(--ab-teal);
	box-shadow: var(--ab-shadow);
}

.woocommerce ul.products li.product a img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0 0 0.9rem;
	border-radius: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 0 1rem;
	font-size: 0.98rem !important;
	line-height: 1.4;
	font-weight: 600;
	color: var(--ab-deep);
}

.woocommerce ul.products li.product .price {
	display: block;
	padding: 0 1rem;
	margin: 0.35rem 0 0.75rem;
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--ab-deep);
}

.woocommerce ul.products li.product .price del {
	font-weight: 400;
	font-size: 0.86rem;
	color: var(--ab-muted);
	margin-right: 0.35rem;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	color: var(--ab-leaf);
}

.woocommerce ul.products li.product .star-rating {
	margin: 0 1rem 0.5rem;
	font-size: 0.8rem;
	color: var(--ab-leaf);
}

.woocommerce ul.products li.product .button {
	margin: auto 1rem 0;
	padding: 0.6rem 1rem;
	background: var(--ab-teal);
	color: #fff;
	border: 0;
	border-radius: 8px;
	font-size: 0.88rem;
	font-weight: 600;
	text-align: center;
}

.woocommerce ul.products li.product .button:hover {
	background: var(--ab-teal-dark);
	color: #fff;
}

.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
	position: absolute;
	top: 10px;
	right: 10px;
	left: auto;
	z-index: 3;
	min-width: auto;
	min-height: auto;
	margin: 0;
	padding: 0.22rem 0.6rem;
	background: var(--ab-amber);
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.5;
	text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
 * WooCommerce: shop header, sorting, results
 * -------------------------------------------------------------------------- */
.ab-shop-header {
	padding: clamp(2rem, 5vw, 3.25rem) 0;
	margin-bottom: 2rem;
	background: linear-gradient(160deg, var(--ab-teal) 0%, var(--ab-deep) 100%);
	color: #fff;
}

.ab-shop-header h1,
.ab-shop-header .woocommerce-products-header__title {
	margin: 0 0 0.5rem;
	color: #fff;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.ab-shop-header__desc {
	max-width: 68ch;
	margin: 0;
	font-size: 1rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.88);
}

.ab-shop-header a {
	color: #fff;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	margin-bottom: 1.5rem;
	font-size: 0.9rem;
	color: var(--ab-muted);
}

.woocommerce .woocommerce-ordering select {
	padding: 0.5rem 0.7rem;
	border: 1px solid var(--ab-line);
	border-radius: 8px;
	background: #fff;
	color: var(--ab-ink);
}

/* -----------------------------------------------------------------------------
 * WooCommerce: single product
 * -------------------------------------------------------------------------- */
.woocommerce div.product .product_title {
	font-size: clamp(1.5rem, 3.2vw, 2.15rem);
	line-height: 1.2;
	margin-bottom: 0.6rem;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-size: 1.55rem;
	font-weight: 700;
	color: var(--ab-deep);
}

.woocommerce div.product p.price del {
	font-size: 1rem;
	font-weight: 400;
	color: var(--ab-muted);
}

.woocommerce div.product p.price ins {
	text-decoration: none;
	color: var(--ab-leaf);
}

.ab-price-note {
	display: block;
	margin: 0.2rem 0 0;
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--ab-muted);
}

.woocommerce div.product .woocommerce-product-details__short-description {
	margin: 1rem 0 1.5rem;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--ab-body);
}

.woocommerce div.product form.cart {
	margin-bottom: 1.25rem;
}

.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button {
	padding: 0.85rem 2rem;
	background: var(--ab-leaf);
	color: #fff;
	border: 0;
	border-radius: 999px;
	font-size: 1rem;
	font-weight: 600;
}

.woocommerce div.product form.cart .button:hover,
.woocommerce div.product .single_add_to_cart_button:hover {
	background: var(--ab-leaf-dark);
	color: #fff;
}

.woocommerce div.product .quantity input.qty {
	padding: 0.7rem 0.4rem;
	border: 1px solid var(--ab-line);
	border-radius: 8px;
}

.woocommerce div.product .stock {
	font-weight: 600;
}

.woocommerce div.product .stock.in-stock {
	color: var(--ab-ok);
}

.woocommerce div.product .product_meta {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--ab-line);
	font-size: 0.86rem;
	color: var(--ab-muted);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 0 0 1.5rem;
	border-bottom: 1px solid var(--ab-line);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	border-bottom: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0 1.25rem 0 0;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0.7rem 0;
	font-weight: 600;
	color: var(--ab-muted);
	border-bottom: 3px solid transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--ab-deep);
	border-bottom-color: var(--ab-leaf);
}

.woocommerce #content div.product div.images,
.woocommerce div.product div.images {
	margin-bottom: 2rem;
}

.woocommerce div.product div.images img {
	border-radius: var(--ab-radius);
}

/* -----------------------------------------------------------------------------
 * WooCommerce: cart, checkout, account
 * -------------------------------------------------------------------------- */
.woocommerce table.shop_table {
	border: 1px solid var(--ab-line);
	border-radius: var(--ab-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.woocommerce table.shop_table th {
	background: var(--ab-surface);
	color: var(--ab-deep);
	font-size: 0.86rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
	padding: 0.9rem 1rem;
	border-color: var(--ab-line);
}

.woocommerce .cart_totals table.shop_table th {
	text-transform: none;
	font-size: 0.94rem;
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background: var(--ab-teal);
	color: #fff;
	border-radius: 8px;
	font-weight: 600;
	padding: 0.7rem 1.4rem;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--ab-teal-dark);
	color: #fff;
}

.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background: var(--ab-leaf);
	color: #fff;
}

.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--ab-leaf-dark);
	color: #fff;
}

.woocommerce-checkout #payment {
	background: var(--ab-surface);
	border: 1px solid var(--ab-line);
	border-radius: var(--ab-radius);
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom-color: var(--ab-line);
}

.woocommerce-checkout #payment ul.payment_methods li {
	padding: 0.75rem 0;
	font-size: 0.95rem;
}

.woocommerce-checkout #payment ul.payment_methods label {
	font-weight: 600;
	color: var(--ab-deep);
}

.woocommerce-checkout #payment div.payment_box {
	background: #fff;
	border: 1px solid var(--ab-line);
	border-radius: 8px;
	font-size: 0.88rem;
	line-height: 1.65;
	color: var(--ab-muted);
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: #fff;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single {
	padding: 0.65rem 0.8rem;
	border: 1px solid var(--ab-line);
	border-radius: 8px;
	background: #fff;
	color: var(--ab-ink);
	font-size: 0.95rem;
	height: auto;
}

.woocommerce form .form-row label {
	font-weight: 600;
	font-size: 0.88rem;
	color: var(--ab-deep);
}

.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-noticies-wrapper .woocommerce-info {
	border-top-color: var(--ab-teal);
	background: var(--ab-surface);
	color: var(--ab-ink);
	border-radius: 8px;
}

.woocommerce-message {
	border-top-color: var(--ab-ok);
}

.woocommerce-error {
	border-top-color: #b42318;
}

.woocommerce-info::before,
.woocommerce-message::before {
	color: var(--ab-teal);
}

/* -----------------------------------------------------------------------------
 * Footer trust bar
 * -------------------------------------------------------------------------- */
.ab-trustbar {
	padding: 1.1rem 0;
	background: var(--ab-deep);
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.85rem;
}

.ab-trustbar__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.75rem;
	justify-content: center;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.25rem;
	text-align: center;
}

.ab-trustbar__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

/* -----------------------------------------------------------------------------
 * Accessibility helpers
 * -------------------------------------------------------------------------- */
.ab-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 0.75rem 1.25rem;
	background: #fff;
	color: var(--ab-deep);
	font-weight: 600;
}

.ab-skip-link:focus {
	left: 1rem;
	top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}