/*
Theme Name: Happy Plants
Theme URI: https://happyplants.co.ke
Description: Happy Plants WooCommerce store
Author: Happy Plants
Template: storefront
Version: 1.0.0
Text Domain: happyplants-theme
*/

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=DM+Sans:wght@300;400;500&display=swap");

/* -------------------------------------------------------------------------
   Design tokens
   ------------------------------------------------------------------------- */

:root {
	--g: #1c3a28;
	--gm: #2e5c3e;
	--ga: #4a7c5a;
	--gp: #f0f5f2;
	--gold: #b8975a;
	--w: #ffffff;
	--off: #fafaf8;
	--t: #111111;
	--mu: #888888;
	--bd: rgba(0, 0, 0, 0.08);
	--serif: "Cormorant Garamond", Georgia, serif;
	--sans: "DM Sans", system-ui, sans-serif;
}

/* -------------------------------------------------------------------------
   Global resets — no shadows; radius only where specified below
   ------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-shadow: none !important;
}

*,
*::before,
*::after {
	border-radius: 0 !important;
}

button,
.button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-button__link,
.added_to_cart,
.woocommerce-mini-cart__buttons .button {
	border-radius: 1px !important;
}

/* Search field wrapper + input (design: 2px) */
.site-search,
.site-search form,
.site-search .woocommerce-product-search,
.site-search input.search-field,
.site-search input[type="search"] {
	border-radius: 2px !important;
}

/* Cart item count badge (gold circle) */
.site-header-cart .cart-contents .count {
	border-radius: 999px !important;
}

/* -------------------------------------------------------------------------
   Base typography
   ------------------------------------------------------------------------- */

body {
	font-family: var(--sans);
	font-size: 15px;
	color: var(--t);
	background: var(--off);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
	font-family: var(--serif);
	font-weight: 300;
}

/* -------------------------------------------------------------------------
   Storefront layout — full width, no sidebar
   ------------------------------------------------------------------------- */

#secondary.widget-area,
#secondary {
	display: none !important;
}

#primary {
	width: 100% !important;
	float: none !important;
}

.right-sidebar #primary,
.left-sidebar #primary,
.full-width-content #primary,
.no-sidebar #primary {
	width: 100% !important;
	float: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.col-full {
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* -------------------------------------------------------------------------
   Standardized page container — 1200px / 32px gutters (matches header & footer).
   Applied to default page wrappers. Pages with custom layouts (cart, checkout,
   single product, shop archive, front page) provide their own wrappers and
   bypass this via #primary > .hp-page-full opt-out class if needed.
   ------------------------------------------------------------------------- */
#primary .entry-content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px 32px 64px;
	box-sizing: border-box;
}

/* My Account: outer page container is handled in account.css (full width + inner max). */
.woocommerce-account #primary .entry-content,
.woocommerce-account #primary .entry-content > .woocommerce {
	max-width: none !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding: 0 !important;
}

/* Pages that intentionally render full-bleed: opt out so they keep their own
   internal padding (set in their dedicated CSS files). */
.woocommerce-cart #primary .entry-content,
.woocommerce-checkout #primary .entry-content,
.woocommerce-order-pay #primary .entry-content,
.woocommerce-order-received #primary .entry-content,
.single-product #primary .entry-content,
.archive.woocommerce #primary .entry-content,
.tax-product_cat #primary .entry-content,
.tax-product_tag #primary .entry-content,
.home #primary .entry-content {
	max-width: none;
	margin: 0;
	padding: 0;
}

.woocommerce-account #primary .site-main {
	padding: 24px clamp(20px, 4vw, 48px) 64px;
	box-sizing: border-box;
}

/* Undo dark-header / customizer inline header treatments */
.site-header,
.site-header.storefront-header-dark {
	background: var(--w) !important;
	color: var(--t) !important;
}

body.storefront-header-dark .site-header {
	background: var(--w) !important;
}

/* -------------------------------------------------------------------------
   Site header — row 1 (logo, search, account / wishlist / cart links)
   Logo file: set in Customizer or use assets/images/logo-header.svg in markup
   ------------------------------------------------------------------------- */

.site-header {
	background: var(--w) !important;
}

.site-branding .custom-logo-link img,
.site-branding img.custom-logo,
.site-branding h1.logo img,
.site-branding .logo img {
	height: 36px;
	width: auto;
	display: block;
}

.site-header > .col-full {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center !important;
	gap: 20px;
	padding-left: 32px !important;
	padding-right: 32px !important;
	padding-top: 14px !important;
	padding-bottom: 14px !important;
	border-bottom: 0.5px solid var(--bd);
}

.site-header .site-branding {
	order: 1;
}

.site-header .site-search {
	order: 2;
	flex: 1 1 auto;
	max-width: 280px;
	min-width: 160px;
}

.site-header .secondary-navigation {
	order: 3;
	margin-left: auto;
}

/* Product search */
.site-search .woocommerce-product-search {
	background: #f5f5f3 !important;
	border: none !important;
	margin: 0;
	padding: 0;
}

.site-search label.screen-reader-text,
.site-search span.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.site-search input.search-field,
.site-search input[type="search"] {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	font-family: var(--sans) !important;
	font-size: 11px !important;
	color: var(--t) !important;
	padding: 7px 12px !important;
	width: 100%;
}

.site-search input.search-field:focus {
	outline: none;
}

.site-search button[type="submit"],
.site-search input[type="submit"] {
	border-radius: 2px !important;
	font-size: 11px !important;
	font-family: var(--sans) !important;
}

/* Utility links — secondary nav (Account, Wishlist, etc.) */
.secondary-navigation ul.menu a,
.secondary-navigation ul.menu li a {
	font-family: var(--sans) !important;
	font-size: 11px !important;
	font-weight: 400 !important;
	color: var(--mu) !important;
	text-decoration: none !important;
}

.secondary-navigation ul.menu a:hover,
.secondary-navigation ul.menu li a:hover {
	color: var(--t) !important;
}

.secondary-navigation ul.menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* -------------------------------------------------------------------------
   Secondary nav bar — primary menu (Shop categories)
   ------------------------------------------------------------------------- */

.storefront-primary-navigation {
	background: var(--w) !important;
	border-bottom: 0.5px solid var(--bd) !important;
	border-top: none !important;
}

.storefront-primary-navigation > .col-full {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center !important;
	justify-content: space-between;
	padding-left: 32px !important;
	padding-right: 32px !important;
}

.main-navigation {
	flex: 1 1 auto;
}

.main-navigation ul.menu,
.main-navigation ul.nav-menu {
	display: flex !important;
	flex-wrap: wrap;
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
	font-family: var(--sans) !important;
	font-size: 11px !important;
	font-weight: 400 !important;
	color: #555555 !important;
	padding: 11px 14px !important;
	letter-spacing: 0.02em !important;
	text-decoration: none !important;
	border-bottom: 1.5px solid transparent !important;
	display: inline-block;
}

.main-navigation ul.menu > li.current-menu-item > a,
.main-navigation ul.menu > li.current-menu-ancestor > a,
.main-navigation ul.menu > li.current_page_item > a,
.main-navigation ul.nav-menu > li.current-menu-item > a,
.main-navigation ul.nav-menu > li.current-menu-ancestor > a,
.main-navigation ul.nav-menu > li.current_page_item > a {
	color: var(--g) !important;
	border-bottom-color: var(--g) !important;
	font-weight: 500 !important;
}

.main-navigation ul.menu > li > a:hover,
.main-navigation ul.nav-menu > li > a:hover {
	color: var(--g) !important;
}

/* -------------------------------------------------------------------------
   Header cart — link + gold count badge
   ------------------------------------------------------------------------- */

.site-header-cart {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-header-cart .cart-contents {
	font-family: var(--sans) !important;
	font-size: 11px !important;
	font-weight: 400 !important;
	color: var(--mu) !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px;
	text-decoration: none !important;
}

.site-header-cart .cart-contents .woocommerce-Price-amount,
.site-header-cart .cart-contents .amount {
	font-size: 11px !important;
	color: var(--mu) !important;
}

.site-header-cart .cart-contents .count {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	min-height: 16px;
	padding: 0 5px;
	font-size: 10px !important;
	line-height: 1;
	font-weight: 500 !important;
	color: var(--w) !important;
	background: var(--gold) !important;
	font-family: var(--sans) !important;
}
/* -------------------------------------------------------------------------
   Topbar announcement (front page / custom markup: .hp-topbar)
   body … beats later single-class rules in front-page.css
   ------------------------------------------------------------------------- */

body .hp-topbar {
	/* position controlled in assets/css/header.css (fixed sticky stack) */
	z-index: 1210;
	background: var(--g) !important;
	text-align: center;
	font-family: var(--sans);
	font-size: 9px !important;
	color: rgba(255, 255, 255, 0.75);
	letter-spacing: 0.04em;
	padding: 5px 0 !important;
	margin: 0 !important;
	width: 100%;
}

body .hp-topbar__text {
	margin: 0;
	padding: 0;
	font-size: inherit;
	color: inherit;
	letter-spacing: inherit;
}