/*
Theme Name: Sugana's Handicrafts (Kadence Child)
Theme URI: https://www.suganashandicrafts.com
Description: Custom child theme for Sugana's Handicrafts, built on Kadence. Implements brand colors, typography and product-page customizations from the UI/UX Style Guide.
Author: Sugana's Handicrafts
Template: kadence
Version: 1.1.78
Text Domain: kadence-child
*/

/* ==========================================================================
   Brand palette (from UI_UX_STYLE_GUIDE.md)
   Sandal Brown #5D4037 | Antique Gold #C89B3C | Cream #FAF7F0 | Deep Maroon #6A1B1A
   ========================================================================== */
:root {
	--sh-sandal-brown: #5D4037;
	--sh-antique-gold: #C89B3C;
	--sh-cream: #FAF7F0;
	/* Sampled directly from the approved mockup's dark bars (announcement/nav/trust/footer) —
	   a near-black espresso brown, not the brighter maroon-red the style guide hex implied. */
	--sh-deep-maroon: #2F150A;
	/* Header brand-name text and hairline dividers, per the approved header mockup. */
	--sh-ink: #221A16;
	--sh-hairline: rgba(93, 64, 55, 0.25);
	/* Sampled from the approved shop mockup's sidebar section headlines
	   ("Categories", "Filter By Price", "Top Rated Products") — a warmer,
	   lighter tan-brown than --sh-deep-maroon or --sh-sandal-brown. */
	--sh-heading-brown: #8B6443;
	/* Semantic status color, not part of the brand palette — used for the success toast border. */
	--sh-success-green: #2E7D32;
	/* Semantic status color, not part of the brand palette — used for the low-rating badge (see product rating badge rules). */
	--sh-error-red: #C0392B;
	/* Sitewide: the page backdrop that sits outside the boxed content
	   column, so the column's side gutters are visible instead of
	   blending into the cream content itself. A warm, slightly deeper
	   neutral than --sh-cream, in the same family rather than a stark
	   platform grey — see "Flipkart-style boxed layout" further down. */
	--sh-page-gutter: #EDE4D3;
}

/* Sitewide "sticky footer": Kadence makes .site a flex column
   (min-height:100vh) with #inner-wrap set to flex:1 0 auto, so on
   short-content pages (e.g. Offers, with just two coupon cards) #inner-wrap
   stretches to fill the leftover space between header and footer, keeping
   the footer pinned to the bottom of the viewport — that's most of what
   reads as "space between page content and the footer links" on those
   pages, dwarfing any margin/padding tweak on the content itself. Turned
   off sitewide so the footer sits right after the content instead; on tall
   screens with short content this can leave blank space below the footer
   rather than above it. Selector matched to Kadence's own
   "body.footer-on-bottom #inner-wrap{flex:1 0 auto}" (global.min.css,
   loaded after this stylesheet, so it wins any specificity tie) — !important
   is needed to win regardless. */
body.footer-on-bottom #inner-wrap {
	flex: 0 0 auto !important;
}

body,
body.content-style-unboxed .site,
body.content-style-boxed,
.site {
	background-color: var(--sh-cream) !important;
	font-family: 'Poppins', 'Inter', sans-serif;
	color: var(--sh-sandal-brown);
}
/* Cards/panels that should read as "white paper" floating on the cream page */
.woocommerce ul.products li.product,
.woocommerce-tabs {
	background-color: #fff;
}
.entry.single-entry {
	background-color: transparent;
	box-shadow: none !important;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .wp-block-heading {
	font-family: 'Cinzel', 'Cormorant Garamond', serif;
	color: var(--sh-deep-maroon);
	letter-spacing: 0.5px;
}

a {
	color: var(--sh-sandal-brown);
}
a:hover {
	color: var(--sh-antique-gold);
}

/* ==========================================================================
   Buttons — Primary: gold background / dark text. Secondary: brown outline.
   ========================================================================== */
.wp-block-button__link,
.kt-button,
button.button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.single_add_to_cart_button {
	background-color: var(--sh-antique-gold) !important;
	border: 1px solid var(--sh-antique-gold) !important;
	color: var(--sh-deep-maroon) !important;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	letter-spacing: 0.5px;
	border-radius: 2px;
	text-transform: uppercase;
	transition: all 0.2s ease-in-out;
}
.wp-block-button__link:hover,
.kt-button:hover,
button.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.single_add_to_cart_button:hover {
	background-color: var(--sh-deep-maroon) !important;
	border-color: var(--sh-deep-maroon) !important;
	color: var(--sh-cream) !important;
}

.is-style-outline .wp-block-button__link,
.sh-btn-secondary {
	background-color: transparent !important;
	border: 1px solid var(--sh-sandal-brown) !important;
	color: var(--sh-sandal-brown) !important;
}
.is-style-outline .wp-block-button__link:hover,
.sh-btn-secondary:hover {
	background-color: var(--sh-sandal-brown) !important;
	color: var(--sh-cream) !important;
}

/* Cart page "Proceed to Checkout" button: rendered by the WooCommerce Cart
   block with only the generic .wp-element-button/.wc-block-components-button
   classes, none of which are in the selector list above — so it was falling
   back to the plain default button look instead of the site's gold/maroon
   theme used everywhere else (Add to Cart, etc). */
.wc-block-cart__submit-button {
	background-color: var(--sh-antique-gold) !important;
	border: 1px solid var(--sh-antique-gold) !important;
	color: var(--sh-deep-maroon) !important;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	letter-spacing: 0.5px;
	border-radius: 2px;
	text-transform: uppercase;
	transition: all 0.2s ease-in-out;
}
.wc-block-cart__submit-button:hover {
	background-color: var(--sh-deep-maroon) !important;
	border-color: var(--sh-deep-maroon) !important;
	color: var(--sh-cream) !important;
}

/* Cart page "Add coupons" panel: the "Apply" button, same treatment as
   "Proceed to Checkout" above — it's rendered with the same generic
   .wp-element-button/.wc-block-components-button classes, so without this
   it falls back to the plain default button look instead of the site's
   gold/maroon theme. Dimmed (not the full !important gold) while
   aria-disabled — WooCommerce sets that whenever the code field is empty —
   so it still visibly reads as inactive rather than a clickable button.

   Sized down ~30% from the block's default (was 103×54px, filling the
   form row's full height via flex's default align-items:stretch) and
   centered on the row instead of stretched — align-items:center on the
   form is what lets the button shrink to its own content height rather
   than matching the "Enter code" input's 54px, and padding/font-size
   below are ~70% of the effective defaults that produced that 103×54px
   box. The padding override needs the same
   .wc-block-components-totals-coupon__form ancestor the block's own
   padding-left/right:16px rule uses (two classes) to win on specificity —
   see the border-bottom fix elsewhere in this file for the same pattern.
   font-size and min-height need !important instead: both are fought over
   by rules of equal specificity to a plain .wc-block-components-totals-coupon__button
   selector — Kadence's own button reset (button, .wp-element-button, etc,
   in global.min.css, font-size:1.125rem) happens to be enqueued *after*
   this child theme's stylesheet despite being the parent theme, so at
   equal specificity it would otherwise win the cascade on load order
   alone; the block's own min-height:3em
   (body:not(.woocommerce-block-theme-has-button-styles)
   .wc-block-components-button:not(.is-link)) outranks it on specificity
   regardless of order. */
.wc-block-components-totals-coupon__form {
	align-items: center;
}
.wc-block-components-totals-coupon__button {
	background-color: var(--sh-antique-gold) !important;
	border: 1px solid var(--sh-antique-gold) !important;
	color: var(--sh-deep-maroon) !important;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 12.6px !important;
	letter-spacing: 0.5px;
	border-radius: 2px;
	text-transform: uppercase;
	transition: all 0.2s ease-in-out;
	min-height: 0 !important;
}
.wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button {
	padding: 7px 6px;
}
.wc-block-components-totals-coupon__button:hover {
	background-color: var(--sh-deep-maroon) !important;
	border-color: var(--sh-deep-maroon) !important;
	color: var(--sh-cream) !important;
}
.wc-block-components-totals-coupon__button[aria-disabled="true"] {
	opacity: 0.5;
}

/* ==========================================================================
   Header / announcement bar
   ========================================================================== */
.sh-announcement-bar {
	background-color: var(--sh-deep-maroon);
	color: var(--sh-cream);
	font-size: 13px;
	padding: 8px 24px;
	display: flex;
	align-items: center;
	position: relative;
	/* Clips the marquee track below so the scrolling copies aren't visible
	   past the bar's own edges. */
	overflow: hidden;
}
.sh-announcement-bar a { color: var(--sh-cream); }
/* Continuously scrolling ticker, restored to how the bar looked earlier
   (previously overridden to a static left-aligned message). Only a single
   copy of the message is rendered (see sh_announcement_bar() in
   functions.php) — an earlier version duplicated it for a classic
   back-to-back marquee loop, but with a short message and a wide track
   that put both copies on screen at once, reading as the text repeated
   itself rather than one message scrolling. .sh-announcement-marquee is
   the track: flex:1 so it fills the bar between the left edge and the
   social icons, position:relative as the positioning context for the text,
   overflow:hidden so the text is only visible while inside the track.
   The text is positioned with `left` (a %, resolved against the *track's*
   width) rather than `transform` (a %, resolved against the *text's own*
   width) — from left:100% (its left edge starts exactly at the track's
   right edge, i.e. fully hidden just off-screen) to left:-100% (its left
   edge ends one full track-width to the left of the track's own left
   edge). As long as the message is shorter than the track — true at any
   reasonable viewport width — that guarantees it's fully off-screen at
   both ends, so the loop restart is invisible and only one instance of
   the text is ever visible at a time.
   margin-right (NOT padding-right — percentages for an absolutely
   positioned child resolve against the containing block's *padding* box,
   which already includes any padding, so padding-right here would do
   nothing to keep left:100% from landing under the icons; margin actually
   shrinks the track's own box) reserves room for the absolutely positioned
   .sh-announcement-social icons (~24px right offset + ~2×14px icons +
   10px gap ≈ 62px, plus headroom), so the track's own right edge — and
   therefore the text's left:100% starting point and the overflow:hidden
   clip line — stops clear of the icons instead of sliding underneath
   them. Verified empirically (getBoundingClientRect on both), not just by
   this math, given a rendering assumption already broke silently once in
   this file's history (see the display:inline-block strut note above). */
.sh-announcement-marquee {
	flex: 1 1 auto;
	position: relative;
	overflow: hidden;
	margin-right: 90px;
	height: 1.4em;
}
.sh-announcement-text {
	position: absolute;
	top: 50%;
	white-space: nowrap;
	/* 14s -> 28s: half speed (same distance, twice the time), per request. */
	animation: sh-announcement-scroll 28s linear infinite;
}
@keyframes sh-announcement-scroll {
	from { left: 100%; transform: translateY(-50%); }
	to   { left: -100%; transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.sh-announcement-text {
		animation: none;
		position: static;
		display: block;
		text-align: center;
		transform: none;
	}
}
.sh-announcement-social {
	position: absolute;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	gap: 10px;
}
.sh-announcement-social a { display: inline-flex; opacity: 0.85; }
.sh-announcement-social a:hover { opacity: 1; color: var(--sh-antique-gold); }

/* Logo badge text is too small to read at header size, so the brand name is
   rendered as a separate two-line label next to it (see child theme's
   template-parts/header/logo.php override): "SUGANA'S" over a hairline
   divider over "HANDICRAFTS". */
.site-branding a.brand.sh-brand-link { gap: 16px; }
.site-branding a.brand img.custom-logo {
	max-height: 92px;
	width: auto;
}
.sh-brand-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}
.sh-brand-line1,
.sh-brand-line2 {
	font-family: 'Cormorant Garamond', 'Cinzel', serif;
	color: var(--sh-ink);
	text-transform: uppercase;
	line-height: 1.2;
}
.sh-brand-line1 {
	font-size: 26px;
	font-weight: 600;
	letter-spacing: 2px;
}
.sh-brand-divider {
	width: 100%;
	height: 1px;
	margin: 6px 0;
	background: var(--sh-hairline);
}
.sh-brand-line2 {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 4px;
}

/* Header search bar: text input + WooCommerce category filter + submit button,
   styled as one connected pill per the approved header mockup. */
.sh-header-search {
	display: flex;
	align-items: stretch;
	width: 100%;
	max-width: 460px;
}
.sh-header-search-input {
	flex: 1;
	min-width: 0;
	border: 1px solid #ddd;
	border-right: none;
	padding: 10px 16px;
	font-size: 14px;
	font-family: 'Poppins', sans-serif;
	color: var(--sh-sandal-brown);
	background: #fff;
}
.sh-header-search-input:focus { outline: none; border-color: var(--sh-antique-gold); }
.sh-header-search-cat-wrap {
	display: flex;
	align-items: center;
	border: 1px solid #ddd;
	border-left: 1px solid #e2e2e2;
	background: #fff;
}
.sh-header-search-cat {
	max-width: 140px;
	border: none;
	background: transparent;
	padding: 10px 12px;
	font-size: 13px;
	font-family: 'Poppins', sans-serif;
	color: var(--sh-sandal-brown);
}
.sh-header-search-cat:focus { outline: none; }
.sh-header-search-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	background: var(--sh-antique-gold);
	border: 1px solid var(--sh-antique-gold);
	color: var(--sh-deep-maroon);
	cursor: pointer;
	transition: background 0.2s ease;
}
.sh-header-search-btn:hover {
	background: var(--sh-deep-maroon);
	border-color: var(--sh-deep-maroon);
	color: var(--sh-cream);
}

/* Header search bar hidden per request (markup/logic kept intact in
   template-parts/header/search.php in case it's needed again later).
   `visibility:hidden` (not `display:none`) is deliberate: the main header
   row is a 3-column CSS grid with explicit fixed-width tracks
   (site-header-row-center-column), and `display:none` removes the center
   item from the grid entirely — the browser then auto-places the next grid
   item (the account/cart icons) into the now-vacant center track instead of
   the rightmost one, pulling them away from the right edge. Keeping the
   element in normal flow (just invisible) preserves the 3-track layout so
   the icons stay in their original rightmost column.
   !important is needed because Kadence's own header.min.css sets
   `.site-header-section{display:flex}` on the same element and is enqueued
   (kadence-header-css) after this stylesheet, so it would otherwise win the
   equal-specificity tie. */
.site-header-main-section-center {
	visibility: hidden !important;
}

/* Header utility icons (wishlist / account / cart): icon above a text label,
   with a hairline divider setting the Cart icon apart from the rest. */
/* The flex row parent is .header-html-inner itself, not the <p> wpautop
   wraps the shortcode output in: the account dropdown's <div>/<ul> markup
   is flow content, which the HTML parser can't nest inside a <p> — it
   auto-closes the <p> right before the <div>, so the icons end up as
   sibling <p>/<div>/<a> nodes directly under .header-html-inner rather
   than all inside one <p>. */
.header-html-inner {
	display: flex;
	align-items: center;
	gap: 20px;
}
.header-html-inner p {
	display: flex;
	align-items: center;
	margin: 0;
}
.sh-header-icon,
a.wishlist_products_counter {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	color: var(--sh-sandal-brown);
	text-decoration: none;
}
.sh-header-icon:hover,
a.wishlist_products_counter:hover { color: var(--sh-antique-gold); }
.sh-header-icon-label,
.wishlist_products_counter_text {
	font-size: 11px;
	letter-spacing: 0.3px;
	white-space: nowrap;
	max-width: 90px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sh-cart-count,
.wishlist_products_counter_number {
	position: absolute;
	top: -6px;
	right: -10px;
	background: var(--sh-deep-maroon);
	color: var(--sh-cream);
	font-size: 10px;
	line-height: 1;
	min-width: 16px;
	height: 16px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2px;
}
.wishlist_products_counter_number:empty { display: none; }

/* The wishlist heart is a filled icon-font glyph from the TI Wishlist plugin.
   Swap it for a masked SVG outline so it matches the Account/Cart line icons,
   without depending on the plugin's webfont loading. */
a.wishlist_products_counter.top_wishlist-heart:before {
	/* The plugin has a higher-specificity rule for its "has products" state
	   (.wishlist-counter-with-products:before), so this needs !important to
	   reliably win regardless of wishlist contents. */
	content: none !important;
}
a.wishlist_products_counter.top_wishlist-heart:after {
	content: "";
	order: -1;
	width: 22px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><path d='M20.8 4.6a5.5 5.5 0 00-7.8 0L12 5.6l-1-1a5.5 5.5 0 00-7.8 7.8l1 1L12 21l7.8-7.8 1-1a5.5 5.5 0 000-7.8z'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><path d='M20.8 4.6a5.5 5.5 0 00-7.8 0L12 5.6l-1-1a5.5 5.5 0 00-7.8 7.8l1 1L12 21l7.8-7.8 1-1a5.5 5.5 0 000-7.8z'/></svg>") center / contain no-repeat;
}

.sh-cart-icon {
	margin-left: 4px;
	padding-left: 24px;
	border-left: 1px solid var(--sh-hairline);
}

/* Account dropdown: hidden by default, revealed on hover/focus of the wrap
   so it works with a mouse and (via focus-within) with keyboard tabbing.
   Styled to match the site's existing SHOP nav submenu (deep maroon panel,
   cream text, gold on hover, flat corners, hairline dividers) instead of a
   generic white card, so it reads as the same component family. */
.sh-account-menu-wrap {
	position: relative;
	display: flex;
}
.sh-account-dropdown {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 8px;
	width: 210px;
	background: var(--sh-deep-maroon);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	z-index: 100;
}
.sh-account-menu-wrap:hover .sh-account-dropdown,
.sh-account-menu-wrap:focus-within .sh-account-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.sh-account-dropdown-signup {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 12px;
	color: var(--sh-cream);
}
/* !important needed on the two rules below: Kadence's own global.min.css
   (loaded after this stylesheet) has `.inner-link-style-normal a:not(.button)`
   underlining links, which outranks a plain single-class selector here. */
.sh-account-dropdown-signup a {
	color: var(--sh-antique-gold);
	text-decoration: none !important;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	font-size: 11px;
}
.sh-account-dropdown-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.sh-account-dropdown-list li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.sh-account-dropdown-list li:last-child {
	border-bottom: none;
}
.sh-account-dropdown-list a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	color: var(--sh-cream);
	text-decoration: none !important;
	font-size: 12px;
	white-space: nowrap;
}
.sh-account-dropdown-list a:hover {
	color: var(--sh-deep-maroon);
	background: var(--sh-antique-gold);
}
.sh-account-dropdown-list svg {
	flex-shrink: 0;
}

/* ==========================================================================
   Page title banner: sitewide removal. Kadence prints an h1 with the
   current page/post/archive name ("Cart", "Offers", product category
   names like "Dhoop", etc.) inside every .entry-hero row — hidden here on
   every page rather than per template. Kept in the markup (not unhooked)
   so screen readers/SEO still see it; the hero row itself collapses to
   auto height instead of leaving the empty space from Kadence's
   fixed-height title flex box. Page-specific hero rows below (Shop banner)
   build on top of this.
   !important on min-height: Kadence prints its own per-template rule
   (e.g. .entry-hero.page-hero-section .entry-header{min-height:200px})
   as inline CSS in wp_head, generated from the Customizer and enqueued
   after this stylesheet — same specificity, later in the cascade, so it
   wins the tie without it. */
.entry-hero .entry-header {
	min-height: 0 !important;
}
.entry-hero .entry-header .entry-title,
.entry-hero .entry-header .page-title {
	display: none;
}
/* With the heading hidden, Kadence's default .content-area margin-top
   (5rem) becomes a large empty gap between the (now near-empty) hero row
   and the actual page content — halved sitewide. Page-specific overrides
   further down (Cart/Checkout 1.5rem, Shop 2.5rem, My Account 0 via its
   own content-area rule) are more specific and take precedence over this
   general one where they exist. */
.entry-hero + #primary.content-area {
	margin-top: 2.5rem;
}

/* Offers (96), Our Story/About Us (95), Contact Us (97) and Track Order (98):
   halve the sitewide banner-to-content gap (2.5rem, set above) again — this
   is most of what reads as "top padding" on these pages, since it's the gap
   between the header and the page's own heading block. */
body.page-id-95 .entry-hero + #primary.content-area,
body.page-id-96 .entry-hero + #primary.content-area,
body.page-id-97 .entry-hero + #primary.content-area,
body.page-id-98 .entry-hero + #primary.content-area {
	margin-top: 1.25rem;
}
/* Same four pages plus the Blog index: Kadence's default content-area
   margin-bottom (5rem, left untouched sitewide elsewhere) leaves a large
   gap between each page's own content and the footer links below — same
   treatment as the Cart/Checkout pages further down. Halved to 2.5rem.
   Offers had already been halved once before (to 2.5rem); it's now halved
   again on top of that, to 1.25rem. */
body.page-id-95 #primary.content-area,
body.page-id-97 #primary.content-area,
body.page-id-98 #primary.content-area,
body.blog #primary.content-area {
	margin-bottom: 2.5rem;
}
body.page-id-96 #primary.content-area {
	margin-bottom: 1.25rem;
}

/* Same four pages: Kadence's global "Boxed" content style sets
   .entry-content-wrap padding to a flat 2rem via customizer-generated inline
   CSS (single-class selector), so this two-class selector's higher
   specificity wins regardless of source order. padding-top is trimmed,
   closing the remaining gap above each page's own heading block; left/right
   are zeroed too — now that the box itself is the page edge (see the
   sitewide .content-container.site-container padding removal above), this
   inner 2rem read as a second, redundant inset stacked on top of it. Bottom
   keeps Kadence's default 2rem (1.5rem on mobile). */
body.page-id-95 .entry-content-wrap,
body.page-id-96 .entry-content-wrap,
body.page-id-97 .entry-content-wrap,
body.page-id-98 .entry-content-wrap {
	padding-top: 1rem;
	padding-left: 0;
	padding-right: 0;
}

/* Blog page (post index, body.blog): the post grid sits directly inside
   #main, with no left/right padding of its own — matching every other page
   now that the box itself is the page edge (see the sitewide
   .content-container.site-container padding removal above) and
   Offers/Our Story/Contact Us/Track Order's .entry-content-wrap inset was
   zeroed to match it. This previously added a compensating 2rem/1.5rem
   here to line up with those pages' old (now-removed) inset; left in place
   it would just reintroduce the padding on the blog page alone. */
body.blog #archive-container {
	padding-left: 0;
	padding-right: 0;
}

/* Blog page heading ("Blog"): it's a plain h1 printed straight into #main
   (see sh_blog_page_heading() in functions.php), not one of the
   .entry-content headings the other pages use, so it inherits none of the
   spacing they get for free. No left/right padding needed — same flush
   edge as the grid above — but keep the ~1rem gap to whatever follows it
   that the other pages' h1 gets from its own margin-bottom; here that gap
   was 0, since the h1 sits directly against the (empty) WooCommerce
   notices wrapper and then the grid. */
body.blog #main > h1.wp-block-heading {
	margin-bottom: 1rem;
}

/* Blog cards: drop the "By <author>" byline from each card's meta row, per
   request — every post is written by the same store account, so it's just
   noise. Scoped to .loop-entry (grid/archive cards) so a future single-post
   template's own author byline, if ever added, is untouched. */
.loop-entry .entry-meta .posted-by {
	display: none;
}

/* My Account login: split brand/form panel, per the approved login mockup —
   recolored to the site's own maroon/gold/cream palette instead of the
   mockup's blue/orange. Drop the theme's page-hero-to-content margin (5rem)
   on this page only, which otherwise leaves a large empty gap above the
   panel; the entry-content-wrap's own 2rem padding is left untouched as the
   "standard" spacing around it. Replace the dropped margin with the same
   2rem so the card sits with even space on all four sides instead of
   touching the top edge. Kadence's default 5rem margin-bottom is replaced
   with half of the --global-md-spacing standard (1rem) — even that
   "standard" 2rem still left more empty space below account pages (e.g.
   after the Edit Account "Save" button) than felt right above the footer
   newsletter bar, so it's intentionally tighter here than the top spacing. */
body.woocommerce-account .content-area {
	margin-top: 0;
	padding-top: 2rem;
	margin-bottom: calc(var(--global-md-spacing) / 2);
}
/* Kadence's global "Boxed" content style gives .entry-content-wrap its own
   white card (background/shadow/radius) via customizer-generated CSS — on
   this page that just doubles up on the .sh-login-split card nested inside
   it. Strip the outer card, keep its top/side padding, and let the inner
   card be the only visible "card" on the page. Its own padding-bottom
   (1.5rem) is dropped too, on top of the .content-area margin-bottom above
   it, to close the remaining gap below the Edit Account "Save" button. */
body.woocommerce-account .entry-content-wrap {
	background: none;
	box-shadow: none;
	border-radius: 0;
	padding-bottom: 0;
}
/* My Account nav column narrower: Kadence's own woocommerce-account.min.css
   splits the account page 30% nav / 70% content (desktop only, >=768px) and
   is enqueued after this stylesheet (kadence-account-woocommerce-css loads
   later than kadence-child-style-css), so it wins ties on selector
   specificity alone — !important is needed to override it. 30% * 0.6 = 18%,
   i.e. the nav column (and the vertical divider along its right edge) is
   reduced by 40%, with the freed-up width going to the content column. */
@media screen and (min-width: 768px) {
	.woocommerce-account .account-navigation-wrap {
		width: 18% !important;
	}
	.woocommerce-account .woocommerce-MyAccount-content {
		width: 82% !important;
	}
}
/* Kadence's default .content-area margin-top (5rem) leaves a large empty
   gap between the banner and the page content below — same fix as the
   shop banner's own spacing override further down. The "Cart"/"Checkout"
   h1 itself is already hidden by the sitewide page-title rule above; on
   the cart/checkout steps the injected step-progress bar (below) fills
   that space instead, and on the order-received ("Thank you") page it
   just leaves the payment-success card flush against the header. */
body.woocommerce-cart .entry-hero + #primary.content-area,
body.woocommerce-checkout .entry-hero + #primary.content-area {
	margin-top: 1.5rem;
}
/* Same Kadence default (5rem) also sets .content-area's margin-BOTTOM,
   leaving a large empty gap between the cart page's content (the totals
   sidebar/Proceed to checkout button) and the footer links below. Halve
   it on the cart page specifically. */
body.woocommerce-cart #primary.content-area {
	margin-bottom: 2.5rem;
}
/* Checkout page: same Kadence default (.content-area margin-bottom: 5rem)
   as the cart page above, leaving a large empty gap between the checkout
   content (Order Summary / Place Order) and the footer links below. Halve
   it here too, on the checkout page specifically. */
body.woocommerce-checkout #primary.content-area {
	margin-bottom: 2.5rem;
}
/* Cart page: "Product" (items table) and "Cart Totals" panels as white
   bordered cards, matching the "Delivery Address" card style on the
   Checkout page (see .sh-deliver-to-card / .sh-address-select-panel
   above — same padding/border/radius/background values).

   The Cart block's two-column layout (.wc-block-components-sidebar-layout,
   display:flex) normally creates its column gutter via one-sided
   percentage padding on these same elements (padding-right:4.5283% on the
   main column, padding-left:2.2641% on the sidebar) rather than a real
   margin/gap — fine when neither column has a visible edge, but once a
   border is added that padding just becomes dead space *inside* each card
   with the two borders left touching. So the gutter mechanism is replaced
   outright here: both paddings become a flat 20px (matching the address
   card), both widths lose 10px each to make room, and a 20px margin
   between the two boxes supplies the actual visual gap — the arithmetic
   ((65% - 10px) + 20px + (35% - 10px) = 100%) keeps the pair fitting
   exactly one row, so flex-wrap never kicks in on desktop. Below the
   block's own @container (max-width: 699px) breakpoint (where it switches
   to a stacked single column) that math is dropped in favour of a plain
   100%-wide stack with a bottom margin standing in for the gap. */
.wc-block-components-sidebar-layout .wc-block-components-main {
	width: calc(65% - 10px);
	margin-right: 20px;
	padding: 20px;
	border: 1px solid var(--sh-hairline);
	border-radius: 4px;
	background: #fff;
	box-sizing: border-box;
}
/* The sidebar column itself stays a plain layout box (width/spacing only)
   — the card look goes on .wp-block-woocommerce-cart-order-summary-block
   instead (the heading/coupon/totals-rows group), one level down, so that
   "Proceed to Checkout" (.wp-block-woocommerce-proceed-to-checkout-block,
   a sibling of that group, not a descendant) renders below/outside the
   card rather than inside it — same as the Checkout page, where "Place
   Order" also sits outside the Order Summary. */
.wc-block-components-sidebar-layout .wc-block-components-sidebar {
	width: calc(35% - 10px);
	box-sizing: border-box;
}
.wc-block-components-sidebar-layout .wc-block-components-sidebar .wp-block-woocommerce-cart-order-summary-block {
	padding: 20px;
	border: 1px solid var(--sh-hairline);
	border-radius: 4px;
	background: #fff;
	box-sizing: border-box;
}
.wc-block-components-sidebar-layout .wc-block-components-sidebar .wp-block-woocommerce-proceed-to-checkout-block {
	margin-top: 20px;
}
/* Responsive cart layout: tablet breakpoint with adjusted column ratio */
@media (min-width: 769px) and (max-width: 1024px) {
	.wc-block-components-sidebar-layout .wc-block-components-main {
		width: calc(60% - 10px);
	}
	.wc-block-components-sidebar-layout .wc-block-components-sidebar {
		width: calc(40% - 10px);
	}
}
@media (max-width: 768px) {
	.wc-block-components-sidebar-layout .wc-block-components-main,
	.wc-block-components-sidebar-layout .wc-block-components-sidebar {
		width: 100%;
	}
	.wc-block-components-sidebar-layout .wc-block-components-main {
		margin-right: 0;
		margin-bottom: 20px;
	}
}
/* "Product" card: WooCommerce draws a border-bottom on the items <table>
   itself (regardless of row count) as a separator before whatever follows
   it in the sidebar-less classic layout. Here that "whatever follows" is
   just this card's own bottom padding, so the rule only ever shows up as a
   stray line under the last row — drop it. The block's own rule is
   .wc-block-cart__main .wc-block-cart-items (inside its
   @container (min-width: 700px) breakpoint), two classes deep, so the
   plain .wc-block-cart-items selector loses on specificity despite loading
   later in the cascade — match the same compound selector to win instead. */
.wc-block-cart__main .wc-block-cart-items {
	border-bottom: none;
}

/* Cart page totals: the WooCommerce Cart block's "Taxes" row label is a
   JS-side translated string (wp.i18n, "woocommerce" domain) baked into the
   block's compiled bundle — unlike the classic checkout totals table (which
   goes through WC_Countries::tax_or_vat(), filtered to "GST" in
   functions.php), there's no PHP hook for it. Swap it visually via CSS
   instead: it's the one totals row scoped under .wc-block-components-totals-taxes,
   so this can't touch Subtotal/Packaging Charges/Shipping/Total. Font size
   matches the block's own .wc-block-components-totals-item__label rule so
   "GST" lines up exactly like "Taxes" did. font-size on the ::after is
   set to the --small preset — the same token every other row's label
   (Subtotal, Packaging Charges, Flat Rate, Discount) inherits for its own
   font-size — not --medium (that's the larger token the final "Total
   Amount" row uses), so GST's label matches its siblings exactly instead
   of rendering oversized. The "(18%)" is the standard GST rate (Marketing
   > Tax rates) that every published product is currently on — since this
   is a static string rather than a computed rate, revisit it if products
   on the 12%/5% GST classes already configured there ever go live.
   */
.wc-block-components-totals-taxes .wc-block-components-totals-item__label {
	font-size: 0;
}
.wc-block-components-totals-taxes .wc-block-components-totals-item__label::after {
	content: 'GST (18%)';
	font-size: var(--wp--preset--font-size--small, 14px);
}
/* "You will save ₹XYZ on this order" — js/cart-order-summary-extras.js
   inserts this right after the "Total Amount" row (only when a coupon
   produced a discount), centered across the Cart totals box rather than
   left-aligned like the rows above it. */
.sh-cart-savings-message {
	color: #2e7d32;
	font-size: var(--wp--preset--font-size--small, 14px);
	font-weight: 500;
	margin: 8px 0 0;
	text-align: center;
}
/* Cart totals "Discount" row: put the applied coupon code chip right next
   to the "Discount" label (not dropped to its own line below, which is
   the block's default — .wc-block-components-totals-item__description
   normally has width:100%, forcing a break in the flex-wrap row — and not
   after the amount either, which is where it'd naturally fall since the
   DOM order is label, then amount, then chip). Reorder the row's flex
   items — label, chip, amount — and push the amount to the row's right
   edge with margin-left:auto now that it's no longer the label's
   flex-grow doing that job. */
.wc-block-components-totals-discount .wc-block-components-totals-item__label {
	flex-grow: 0;
	order: 1;
}
.wc-block-components-totals-discount .wc-block-components-totals-item__description {
	width: auto;
	margin-left: 12.8px;
	order: 2;
}
/* The coupon <ul>'s own default list padding-left (~25px, likely a
   generic ".entry-content ul" reset from the parent theme's content
   typography bleeding into this block's markup) was most of the visible
   "Discount"-to-chip gap — zero it out. What's left is WooCommerce's own
   4px flex gap between row items plus the margin-left above (12.8px),
   for a total gap of ~16.8px — half of the ~33.6px (25px stray padding +
   4px flex gap + the previous 0.375em/~4.7px margin) it used to be. */
.wc-block-components-totals-discount .wc-block-components-totals-discount__coupon-list {
	margin-top: 0;
	padding-left: 0;
}
/* The chip <li> itself (.wc-block-components-chip) carries its own
   default margin:0 .365em .365em 0 — meant to space multiple wrapping
   chips apart, but with coupons restricted to one at a time
   (sh_restrict_cart_to_single_coupon() in functions.php) there's never a
   second chip to make room for. That stray ~4.6px bottom margin was still
   padding out the bottom of the <ul>'s (and so .__description's) auto
   height with nothing matching it on top, so the row's
   align-items:center — which centers .__description as a whole against
   the "Discount" label — ended up centering that lopsided box rather
   than the chip actually inside it, leaving the chip rendering a couple
   of px above the label's true vertical center. Zeroing it here is what
   makes the two actually line up. */
.wc-block-components-totals-discount .wc-block-components-chip {
	margin-bottom: 0;
}
.wc-block-components-totals-discount .wc-block-components-totals-item__value {
	margin-left: auto;
	order: 3;
}
/* WooCommerce stores/matches coupon codes lowercase internally, so the
   applied-coupon chip in the Discount row renders whatever case the
   customer typed (or lowercase, if they didn't). Uppercase it visually —
   purely cosmetic, doesn't touch the underlying code used for validation. */
.wc-block-components-totals-discount .wc-block-components-chip__text {
	text-transform: uppercase;
}
/* Cart page "Add coupons" panel: the gap above an error like "This coupon
   code has already been used." is mostly the browser's default 1em
   bottom margin on <form> (computed to ~32px here) leaking through —
   WooCommerce's own CSS sets margin-bottom:0 on a *different* selector
   and never resets the bare <form> element, so the default survives on
   .wc-block-components-totals-coupon__form itself. Zero that out, then
   size the error's own top padding (normally 8px) to land the total gap
   at half of the original ~40px (32px stray margin + 8px padding) — i.e.
   20px — scoped to the coupon panel so it doesn't touch validation
   errors elsewhere (e.g. checkout address fields). */
.wc-block-components-totals-coupon .wc-block-components-totals-coupon__form {
	margin-bottom: 0;
}
.wc-block-components-totals-coupon .wc-block-components-validation-error {
	padding-top: 20px;
}
/* Purchase-flow step indicator ("Cart > Address > Payment"), shown on the
   cart and checkout pages until the order is placed. "Address" and
   "Payment" share the single checkout page, so js/checkout-step-progress.js
   flips "Address" from current to complete (and "Payment" from upcoming to
   current) in place once a payment method is selected — see is-complete
   below for that state's styling. */
.sh-step-progress {
	display: flex;
	list-style: none;
	margin: 0 auto;
	padding: 2rem 0 0;
	width: 100%;
	max-width: 340px;
}
.sh-step-progress__step {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.sh-step-progress__step:not(:first-child)::before {
	content: '';
	position: absolute;
	top: 15px;
	left: -50%;
	width: 100%;
	height: 2px;
	background: var(--sh-hairline);
	z-index: 0;
}
.sh-step-progress__circle {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-weight: 700;
	background: var(--sh-cream);
	border: 1.5px solid var(--sh-hairline);
	color: var(--sh-sandal-brown);
}
.sh-step-progress__label {
	margin-top: 8px;
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	color: var(--sh-sandal-brown);
	opacity: 0.7;
}
.sh-step-progress__step.is-current .sh-step-progress__circle {
	background: var(--sh-antique-gold);
	border-color: var(--sh-antique-gold);
	color: var(--sh-deep-maroon);
}
.sh-step-progress__step.is-current .sh-step-progress__label {
	color: var(--sh-deep-maroon);
	font-weight: 600;
	opacity: 1;
}
.sh-step-progress__step.is-complete .sh-step-progress__circle {
	background: var(--sh-antique-gold);
	border-color: var(--sh-antique-gold);
	color: var(--sh-deep-maroon);
	font-size: 16px;
}
.sh-step-progress__step.is-complete .sh-step-progress__label {
	color: var(--sh-deep-maroon);
	opacity: 1;
}
/* Color the connecting line behind any step that follows a completed one,
   so the "traversed" portion of the bar reads as done at a glance. */
.sh-step-progress__step.is-complete + .sh-step-progress__step::before {
	background: var(--sh-antique-gold);
}
@media all and (max-width: 480px) {
	.sh-step-progress {
		max-width: 260px;
	}
	.sh-step-progress__circle {
		width: 26px;
		height: 26px;
		font-size: 12px;
	}
	.sh-step-progress__step:not(:first-child)::before {
		top: 12px;
	}
	.sh-step-progress__label {
		font-size: 11px;
	}
}
/* margin-bottom: extra breathing room below the login card specifically, on
   top of the account-wide .content-area margin-bottom above (which stays
   tighter — see its comment — for the sake of other My Account pages) so the
   card doesn't sit close to the footer links right under it. */
.sh-login-split {
	display: flex;
	flex-wrap: wrap;
	max-width: 900px;
	margin: 0 auto 2rem;
	background: #fff;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(90, 60, 40, 0.12);
}
.sh-login-brand {
	flex: 1 1 320px;
	background: var(--sh-deep-maroon);
	padding: 48px 40px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
}
.sh-login-brand-title {
	/* !important: Kadence's own global.min.css (loaded after this stylesheet)
	   sets h1-h6 font-family from a --global-heading-font-family custom
	   property that resolves to "inherit" (i.e. body's Poppins), at the same
	   selector specificity as the site's own h1-h6 rule above — so it wins
	   the cascade tie and would otherwise flatten this to sans-serif. */
	font-family: 'Cinzel', 'Cormorant Garamond', serif !important;
	color: var(--sh-cream) !important;
	font-size: 32px;
	margin: 0 0 16px;
}
.sh-login-brand-subtitle {
	font-size: 15px;
	line-height: 1.6;
	color: rgba(250, 247, 240, 0.75);
	margin: 0;
	max-width: 26em;
}
.sh-login-brand-art {
	display: flex;
	gap: 16px;
}
.sh-login-brand-art span {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(250, 247, 240, 0.08);
	border: 1px solid rgba(200, 155, 60, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sh-antique-gold);
}
.sh-login-form-panel {
	flex: 1 1 360px;
	padding: 48px 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.sh-login-form-panel form.woocommerce-form-login,
.sh-login-form-panel form.sh-otp-form {
	width: 100%;
	max-width: 360px;
}
.sh-login-submit-row button {
	width: 100%;
}
.sh-otp-note {
	font-size: 14px;
	line-height: 1.6;
	color: var(--sh-sandal-brown);
	margin: 0 0 20px;
}
.sh-otp-code-input {
	letter-spacing: 6px;
	font-size: 20px;
	text-align: center;
}
.sh-otp-reset-form {
	max-width: 360px;
	width: 100%;
	margin-top: 14px;
	text-align: center;
}
.sh-otp-reset-link {
	background: none !important;
	border: none !important;
	padding: 0 !important;
	color: var(--sh-sandal-brown) !important;
	font-size: 13px;
	text-decoration: underline !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer;
}
.sh-otp-reset-link:hover {
	color: var(--sh-antique-gold) !important;
}
@media (max-width: 700px) {
	.sh-login-brand {
		padding: 32px 28px;
	}
	.sh-login-form-panel {
		padding: 32px 28px;
	}
}

/* My Account > Edit Account: Gender radio group, and the locked Email /
   Mobile number fields (grayed out to read as non-editable at a glance,
   matching the disabled attribute already on those inputs). */
.sh-account-gender {
	border: none;
	padding: 0;
	margin: 0 0 16px;
}
.sh-account-gender legend {
	padding: 0;
	margin: 0 0 8px;
	font-size: inherit;
	font-weight: 600;
}
.sh-radio-group {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px 24px;
}
.sh-account-gender .sh-radio-option {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 400 !important;
	white-space: nowrap;
	cursor: pointer;
}
.sh-radio-option input[type="radio"] {
	margin: 0;
}
.woocommerce-EditAccountForm input:disabled {
	background-color: rgba(93, 64, 55, 0.08);
	color: var(--sh-sandal-brown);
	cursor: not-allowed;
}
.sh-mobile-input-wrap {
	display: flex;
	align-items: stretch;
	flex-wrap: nowrap;
}
.sh-mobile-prefix {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 0 10px;
	border: 1px solid var(--sh-hairline);
	border-right: none;
	background: rgba(93, 64, 55, 0.08);
	color: var(--sh-sandal-brown);
	font-size: 14px;
	white-space: nowrap;
}
.sh-mobile-input-wrap input {
	flex: 1 1 auto;
	min-width: 0;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
#account_date_of_birth {
	width: auto;
}
#account_display_name,
#account_email {
	width: 50%;
}
.sh-mobile-input-wrap {
	width: 50%;
}
#account_display_name_description {
	display: block;
	margin-top: 6px;
	white-space: nowrap;
}
@media (max-width: 700px) {
	#account_display_name,
	#account_email,
	.sh-mobile-input-wrap {
		width: 100%;
	}
	#account_display_name_description {
		white-space: normal;
	}
}

/* My Account > Edit Account: WooCommerce core hides the required-field
   asterisk by default (`.form-row .required { visibility: hidden }` in
   woocommerce.css) in favor of an "(optional)" label on non-required
   fields — but this form has no such labels, so the asterisk needs to
   actually show for First Name, Display name, Email Address and Mobile
   Number. !important beats core's higher-specificity selector regardless
   of stylesheet load order. */
.edit-account .required {
	visibility: visible !important;
}

/* Inline below-field validation errors, shown/hidden by
   js/edit-account-validation.js. */
.edit-account .sh-field-error {
	display: none;
	margin-top: 6px;
	font-size: 13px;
	color: var(--sh-error-red);
}
.edit-account .sh-field-error.is-visible {
	display: block;
}
.edit-account .woocommerce-Input.sh-input-invalid {
	border-color: var(--sh-error-red);
}

/* Inline below-field errors on the OTP login form (myaccount/form-login.php),
   rendered server-side by sh_otp_login_error() in place of WooCommerce's
   default top-of-page notice list. */
.sh-login-form-panel .sh-field-error {
	display: none;
	margin-top: 6px;
	font-size: 13px;
	color: var(--sh-error-red);
}
.sh-login-form-panel .sh-field-error.is-visible {
	display: block;
}
.sh-login-form-panel .woocommerce-Input.sh-input-invalid {
	border-color: var(--sh-error-red);
}

/* Success notices (WooCommerce's .woocommerce-message, e.g. "Account details
   changed successfully.") as a bottom-center toast with a green success
   border, in place of the default inline banner. Error/info notices are
   untouched. */
.woocommerce-message,
.woocommerce .woocommerce-message {
	position: fixed !important;
	left: 50% !important;
	right: auto !important;
	top: auto !important;
	bottom: 24px !important;
	transform: translate(-50%, 0) !important;
	z-index: 999999 !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 10px !important;
	width: max-content !important;
	max-width: 90vw !important;
	margin: 0 !important;
	padding: 10px 16px !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	background-color: #ffffff !important;
	color: var(--sh-ink) !important;
	border-top: none !important;
	border-right: none !important;
	border-bottom: none !important;
	border-left: 4px solid var(--sh-success-green) !important;
	border-radius: 5px !important;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28) !important;
	list-style: none !important;
	white-space: nowrap !important;
	overflow-x: auto !important;
	animation: sh-toast-in 0.25s ease-out !important;
}
.woocommerce-message::before {
	position: static !important;
	top: auto !important;
	left: auto !important;
	color: var(--sh-success-green) !important;
}
.woocommerce-message::after {
	display: none !important;
}
.woocommerce-message .button {
	float: none !important;
	margin: 0 !important;
	flex-shrink: 0 !important;
	white-space: nowrap !important;
	padding: 6px 12px !important;
	font-size: 12px !important;
}
.woocommerce-message.sh-toast-out {
	animation: sh-toast-out 0.25s ease-in forwards !important;
}
@keyframes sh-toast-in {
	from {
		opacity: 0;
		transform: translate(-50%, 12px);
	}
	to {
		opacity: 1;
		transform: translate(-50%, 0);
	}
}
@keyframes sh-toast-out {
	from {
		opacity: 1;
		transform: translate(-50%, 0);
	}
	to {
		opacity: 0;
		transform: translate(-50%, 12px);
	}
}

/* Bottom navigation row on a maroon band, matching the wireframe */
.site-bottom-header-wrap {
	background-color: var(--sh-deep-maroon);
}
.site-bottom-header-wrap .main-navigation .primary-menu-container > ul > li.menu-item > a {
	color: var(--sh-cream);
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.5px;
}
.site-bottom-header-wrap .main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
.site-bottom-header-wrap .main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a {
	color: var(--sh-antique-gold);
}

/* SHOP dropdown (and any other submenu): match the maroon/cream/gold nav
   palette above instead of Kadence's default light dropdown panel.
   !important is needed because Kadence's own inline override references
   --global-palette3/8 custom properties that are never defined on this site
   (they're normally injected by the Kadence Blocks plugin, which isn't
   installed here), so that rule resolves to transparent/inherited text —
   but it still wins equal-specificity ties since it's printed after this
   stylesheet in <head>. */
.header-navigation .header-menu-container ul ul.sub-menu,
.header-navigation .header-menu-container ul ul.submenu {
	background: var(--sh-deep-maroon) !important;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
}
.header-navigation .header-menu-container ul ul li.menu-item {
	border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}
.header-navigation .header-menu-container ul ul li.menu-item > a {
	color: var(--sh-cream) !important;
}
.header-navigation .header-menu-container ul ul li.menu-item > a:hover,
.header-navigation .header-menu-container ul ul li.menu-item.current-menu-item > a {
	color: var(--sh-deep-maroon) !important;
	background: var(--sh-antique-gold) !important;
}

/* Logo sizing — the source file is a large square crest, cap its header height */
.site-branding a.brand img.custom-logo {
	max-height: 72px;
	width: auto;
}
/* Responsive logo sizing for mobile and tablet */
@media (max-width: 600px) {
	.site-branding a.brand img.custom-logo {
		max-height: 48px;
	}
}
@media (min-width: 601px) and (max-width: 1024px) {
	.site-branding a.brand img.custom-logo {
		max-height: 60px;
	}
}

/* ==========================================================================
   Product cards
   ========================================================================== */
ul.products li.product {
	background: #fff;
	border-radius: 4px;
	overflow: hidden;
	transition: box-shadow .2s ease;
}
ul.products li.product:hover {
	box-shadow: 0 8px 24px rgba(90, 60, 40, .12);
}
ul.products li.product img {
	transition: transform .35s ease;
}
ul.products li.product:hover img {
	transform: scale(1.05);
}
/* Loop "Add to cart" button (shown on hover — woo-archive-action-on-hover):
   Kadence's default "text" button style only sets vertical padding
   (.5em 0), but this theme renders it as a solid pill (background + border,
   above), so with zero horizontal padding the label sits flush against the
   button's edges. nowrap keeps "ADD TO CART →" on one line instead of
   wrapping between words once the padding eats into the available width.
   Applies everywhere ul.products is rendered (shop, category archives,
   related/upsell products, search), not just the main shop page. */
.woocommerce ul.products li.product .product-action-wrap .button:not(.kb-button) {
	padding: 0.5em 0.6em;
	white-space: nowrap;
}
/* The button above is an inline text link, so without an explicit alignment
   it hugs the left edge of .product-action-wrap (which spans the full card
   width) instead of sitting centered, leaving an uneven gap on the right.
   !important: Kadence's own woocommerce.min.css happens to be enqueued
   after this child stylesheet (verified in the browser — its <link> tag
   comes later), so at equal selector specificity its same-selector
   ".product-action-wrap{padding:0 1rem}" rule wins the side padding on
   source order alone; !important is the only way to override it here. */
.woocommerce ul.products.woo-archive-action-on-hover li.product .product-action-wrap {
	text-align: center;
	/* Kadence's default 1rem side padding, plus the button's own padding
	   above, leaves too little room on the narrowest (4-column desktop)
	   cards — the button ends up wider than the space between this
	   padding, so it overflows one side instead of sitting centered. */
	padding-left: 0.5rem !important;
	padding-right: 0.5rem !important;
}
/* Wishlist heart (TI WooCommerce Wishlist, hooked into the same hover-shown
   action area as the Add to cart button above): it renders directly under
   the title/price with no breathing room above it, sitting flush against
   them. Give it top spacing to match. */
.woocommerce ul.products li.product .tinvwl-loop-button-wrapper {
	padding-top: 1rem;
}
/* Best Sellers (homepage [featured_products] shortcode), the Shop page's
   own product grid, and any other shortcode/widget-rendered product grid:
   pin the wishlist heart to the card's own top-right corner instead of the
   spot beside the price/above the Add to cart button, per design feedback
   that the Shop grid should match the Best Sellers card design. Excludes
   list view, which keeps its own distinct heart placement (below).
   js/wishlist-badge-position.js physically moves .tinvwl-loop-button-
   wrapper to be a direct child of li.product (adding this class) — it has
   to be a DOM move, not just CSS, because its original parent
   (.product-action-wrap) is itself position:absolute for its own
   hover-reveal placement, and position:absolute always resolves against
   the *nearest* positioned ancestor. li.product is already
   position:relative (Kadence default), so this positions directly
   against the card. */
.woocommerce ul.products:not(.products-list-view) li.product > .tinvwl-loop-button-wrapper.sh-wishlist-top-right {
	position: absolute;
	top: 1rem;
	right: 1rem;
	bottom: auto;
	padding: 0;
}
/* Wishlist heart pinned to the card corner (above): Kadence's own
   woocommerce.min.css shows a dark "Add to Wishlist" / "Remove from
   Wishlist" label bubble next to the heart on hover
   (.tinvwl_add_to_wishlist_button:hover .tinvwl_add_to_wishlist-text{
   opacity:1}) — per design feedback that label shouldn't appear here, now
   that the heart is pinned to the card corner on its own. Scoped via the
   same .sh-wishlist-top-right marker class the JS above adds, so it
   automatically covers every grid the heart gets pinned in. */
.tinvwl-loop-button-wrapper.sh-wishlist-top-right .tinvwl_add_to_wishlist-text,
.tinvwl-loop-button-wrapper.sh-wishlist-top-right .tinvwl_remove_from_wishlist-text {
	display: none !important;
}
.woocommerce span.onsale {
	background-color: var(--sh-deep-maroon);
}
.woocommerce ul.products li.product .price {
	color: var(--sh-deep-maroon);
	font-weight: 600;
}
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
	color: var(--sh-antique-gold);
}
.woocommerce ul.products li.product .star-rating {
	margin: 6px auto 4px;
}

/* ==========================================================================
   Product rating badge: a "4.0 ★ (12)" pill instead of star icons, colour-
   coded green when the average is above 3 and red at 3 or below (1-5
   scale) — per design feedback. js/product-rating-badge.js reads the
   rating/count WooCommerce already renders into each .star-rating element
   (kept in the DOM for accessibility, visually hidden by the first rule
   below) and inserts .sh-rating-badge right after it; nothing here does
   anything without that script having run.
   ========================================================================== */
/* !important throughout: .star-rating's own width/height (from Kadence's
   woocommerce.min.css, same 1-class specificity as this rule but loaded
   later) would otherwise win the tie and keep the element visible at its
   original 5.4em box. This is the standard "visually hidden, still
   readable by screen readers" pattern (clip + 1x1px) rather than
   display:none, so the rating's role="img"/aria-label stays announced. */
.star-rating.sh-rating-badge-source {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	white-space: nowrap !important;
}
/* Sized at 77% of the original box (0.7 scale-down, then a further 1.1
   bump back up — gap/padding/radius/font-size all scaled by the same
   combined factor) per design feedback — this is the single shared rule
   for the badge everywhere it appears (Shop, Best Sellers, Top Rated
   Products, related/upsell products, single product pages), so the sizing
   applies sitewide from here. */
.sh-rating-badge {
	display: inline-flex;
	align-items: center;
	gap: 2.31px;
	padding: 1.54px 6.16px;
	border-radius: 3.08px;
	font-size: 9.24px;
	font-weight: 700;
	line-height: 1.5;
	color: #fff;
	white-space: nowrap;
}
.sh-rating-badge-count {
	font-weight: 500;
	opacity: 0.85;
}
.sh-rating-badge--good { background-color: var(--sh-success-green); }
.sh-rating-badge--poor { background-color: var(--sh-error-red); }

/* Single product summary's "Rating | <review count>" line: the badge's
   own "(N)" count suffix would otherwise duplicate the count already
   shown by the "| N Reviews" link next to it (see the child theme's
   woocommerce/single-product/rating.php override), so hide it only in
   this one location — every other place the shared badge renders
   (Shop grid, Best Sellers, Top Rated Products widget) keeps its count. */
.woocommerce-product-rating .sh-rating-badge-count {
	display: none;
}
.woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 0.5em;
	flex-wrap: wrap;
}
.woocommerce-product-rating .woocommerce-review-link {
	color: var(--sh-sandal-brown);
	text-decoration: underline;
}
/* The "|" separator (own span, not part of the link — see rating.php)
   just needs a muted colour; the gap on either side of it already comes
   from the flex row's own `gap`, keeping the link's underline clear of
   both the separator and the rating badge. */
.woocommerce-product-rating .sh-review-sep {
	color: var(--sh-sandal-brown);
	opacity: 0.5;
}

/* Rating badge and price on one line, per design feedback that the Shop
   grid and the Top Rated Products widget should match the Best Sellers
   card design. .entry-content-wrap is a column flexbox (Kadence), so its
   direct children each take their own row regardless of their own display
   value — the only way to put two of those children side by side is to
   give them a shared flex-row parent. js/product-rating-badge.js wraps the
   badge and the .price it was inserted next to in a .sh-rating-price-row
   for Best Sellers ([featured_products], wrapped in .woocommerce.columns-5),
   the Shop page's own grid (ul.products.woo-archive-loop), and the Top
   Rated Products widget (.widget_top_rated_products); elsewhere the badge
   and price keep their normal stacked layout. */
.sh-rating-price-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 0.3em;
}
/* Kadence's ".star-rating~.price" padding/spacing rules target .price as a
   sibling of .star-rating — moving .price into this wrapper breaks that
   relationship, so its spacing needs to be set explicitly here instead. */
.woocommerce.columns-5 li.product .sh-rating-price-row .price,
.woocommerce ul.products.woo-archive-loop li.product .sh-rating-price-row .price,
.widget_top_rated_products .sh-rating-price-row .price {
	padding: 0 !important;
	margin: 0 !important;
}

/* ==========================================================================
   Shop toggle: list view
   ========================================================================== */
/* Kadence's list view sizes the thumbnail column at 1fr of a 1fr/2fr split,
   i.e. a third of the row width — since the image is square, that makes each
   row's height a third of the row's own width, taller than needed for a list
   layout. Narrowing the image column to ~1/3.4 shaves roughly 2rem off the
   row height at typical sidebar-layout widths.
   !important: this selector is identical to Kadence's own (down to the
   letter), and Kadence's woocommerce.min.css is enqueued after this child
   stylesheet — at tied specificity, source order alone would let its rule
   win, so !important is the only way to override it. */
.woocommerce ul.products.products-list-view li.product {
	grid-template-columns: 1fr 2.4fr !important;
}
/* Also trim the content column's padding, which was sized for the taller
   default row. Same tie/!important situation as above. */
.woocommerce ul.products.products-list-view li.product .entry-content-wrap {
	padding: 0.75rem 1rem 0.75rem 1.25rem !important;
}
/* Grid view centers the Add to cart button (rule above); in list view it
   should stay left-aligned with the rest of the row's text instead. Placed
   after the grid rule so it wins the tie (both selectors carry the same
   specificity). */
.woocommerce ul.products.products-list-view li.product .product-action-wrap {
	text-align: left;
	/* .product-action-wrap's own box (unlike .entry-content-wrap above it)
	   already starts flush with the title/price text's left edge, not the
	   card's outer edge — so it needs zero left padding of its own to line
	   the button up with that text, not a copy of .entry-content-wrap's
	   1.25rem inset (confirmed by comparing their getBoundingClientRect()
	   in the browser: .product-action-wrap's left already equals the
	   title's left).
	   !important: the button-style archive uses "woo-archive-action-on-hover"
	   (this site's chosen "show on hover" style), and that class stays on
	   ul.products in list view too — so the
	   ".woo-archive-action-on-hover ... .product-action-wrap{padding-left:
	   0.5rem !important}" rule above (written for the narrow grid columns)
	   was also winning here, nudging the button 0.5rem right of the text,
	   since it's tied on specificity with this selector and carries
	   !important itself. Both selectors tie at 5 classes + 2 elements, so
	   with both !important, source order is the tiebreaker — this rule
	   needs to be the one placed later (it already is) and needs
	   !important to actually win it. */
	padding-left: 0 !important;
}
/* .entry-content-wrap is itself position:relative (Kadence), and it's the
   nearer ancestor of the wishlist wrapper below — so without this, "top:2rem;
   right:2rem" resolves against the content column (which is inset from, and
   vertically centered within, the row) rather than the row/card itself,
   landing noticeably off the intended 2rem from the card's actual corner.
   List view doesn't need this element to be a positioning context for
   anything else (product-action-wrap is position:static in list view), so
   it's safe to drop back to static and let li.product (also
   position:relative, per Kadence) be the positioning context instead. */
.woocommerce ul.products.products-list-view li.product .entry-content-wrap {
	position: static;
}
/* Wishlist heart: Kadence's own default for this element
   (ul.products li.product .tinvwl-loop-button-wrapper{position:absolute;
   bottom:100%;right:0}) positions it relative to .product-action-wrap,
   which is itself position:absolute in grid view — but in list view that
   wrap switches to position:static, so "bottom:100%" instead resolves
   against li.product and pins the icon above the whole row, off-card
   entirely. Reposition it explicitly at the row's top-right corner instead. */
.woocommerce ul.products.products-list-view li.product .tinvwl-loop-button-wrapper {
	position: absolute;
	top: 2rem;
	right: 2rem;
	bottom: auto;
	padding: 0;
}
/* The wishlist plugin's own CSS gives the heart button a 15px top margin
   (meant to clear the Add to cart button it normally sits under) — with
   the wrapper now positioned directly, that just pushes the icon further
   from the 2rem inset above. */
.woocommerce ul.products.products-list-view li.product .tinvwl_add_to_wishlist_button {
	margin-top: 0;
}

/* ==========================================================================
   Shop / product-category archive banner: removed entirely (both the main
   "/shop" page and category pages like "/product-category/dhoop/") so the
   header's menu bar is followed directly by the toolbar/product grid, no
   dark banner or breadcrumb. Kept in the markup rather than unhooked (same
   reasoning as the sitewide title hiding above) so it's still there for
   SEO/screen readers.
   ========================================================================== */
.entry-hero.product-archive-hero-section {
	display: none;
}
.entry-hero.product-archive-hero-section + #primary.content-area {
	margin-top: var(--global-md-spacing);
}
/* Shop page: reduce the gap between the product grid and the footer links
   below. Kadence's default .content-area margin-bottom (5rem) was left
   untouched here (unlike the Cart/Checkout/Offers overrides above) — cut
   by 30% (5rem -> 3.5rem) per design feedback. */
body.woocommerce-shop #primary.content-area {
	margin-bottom: 3.5rem;
}
/* The whole site moved to a "box width" layout (see the "Flipkart-style
   boxed layout" rules further down): the boxed column itself now reads as
   the page edge, with the visible gutter outside it doing the job this
   inset used to do. Kadence's own
   ".site-container{padding:0 var(--global-content-edge-padding)}" rule
   (global.min.css) is what adds a 24px left/right inset inside that box on
   every page — cancelled everywhere except the homepage, which keeps
   Kadence's original inset per design feedback (the homepage's own
   sections/hero are built assuming that inset is still there). This was
   originally shop-page-only (its toolbar/sidebar/grid were redesigned to
   span the box's full width); other pages keep their own inner padding
   (.entry-content-wrap's 2rem, Blog's #archive-container 2rem, etc.)
   unchanged, so they still get breathing room from that inner layer —
   they just lose this extra outer inset on top of it. */
body:not(.home) .content-container.site-container {
	padding-left: 0;
	padding-right: 0;
}
/* Shop page: halve the gap between the sidebar column (Categories/Filter
   widgets) and the main column (toolbar + product grid) per design
   feedback. Kadence's own rule is
   ".has-sidebar .content-container{grid-gap:var(--global-xl-spacing)}"
   (global.min.css, --global-xl-spacing: 3.5em) inside the same
   min-width:1025px breakpoint it's defined in — matched here so this
   doesn't apply below the breakpoint, where the sidebar stacks under the
   grid instead of sitting beside it. */
@media screen and (min-width: 1025px) {
	body.woocommerce-shop.has-sidebar .content-container {
		grid-gap: 1.75em;
	}
}
/* Shop page: halve the gap between product cards per design feedback.
   Kadence's own rule is
   ".grid-cols{column-gap:2.5rem;row-gap:2.5rem}" (all.min.css/content.min.css),
   applied to the product grid via the "grid-cols" class Kadence adds to
   ul.products (see product_loop_start() in the WooCommerce component). */
body.woocommerce-shop ul.products.grid-cols {
	column-gap: 1.25rem;
	row-gap: 1.25rem;
}

/* ==========================================================================
   Shop toolbar: result count / sort / grid-list toggle row
   ========================================================================== */
.kadence-shop-top-row {
	align-items: center;
	padding: 14px 0;
	border-bottom: 1px solid var(--sh-hairline);
	margin-bottom: 1.5rem !important;
}
.woocommerce-result-count { margin: 0; color: var(--sh-sandal-brown); }
.woocommerce-ordering select.orderby {
	border: 1px solid var(--sh-hairline);
	border-radius: 2px;
	padding: 8px 32px 8px 12px;
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	color: var(--sh-sandal-brown);
	background-color: #fff;
}
.kadence-product-toggle-container button.kadence-toggle-shop-layout {
	border: 1px solid var(--sh-hairline);
	background: #fff;
	color: var(--sh-sandal-brown);
}
.kadence-product-toggle-container button.kadence-toggle-shop-layout.toggle-active,
.kadence-product-toggle-container button.kadence-toggle-shop-layout:hover {
	background: var(--sh-antique-gold);
	border-color: var(--sh-antique-gold);
	color: var(--sh-deep-maroon);
}

/* ==========================================================================
   Shop sidebar widgets: Categories / Filter by Price / Top Rated Products
   ========================================================================== */
.primary-sidebar.widget-area .widget {
	background: #fff;
	border-radius: 4px;
	padding: 22px 24px;
	box-shadow: 0 4px 14px rgba(90, 60, 40, 0.06);
}
.primary-sidebar.widget-area .widget_product_categories {
	padding-bottom: 0;
}
.primary-sidebar.widget-area .widget-title {
	font-family: 'Cinzel', serif;
	font-size: 16px;
	color: var(--sh-heading-brown);
	padding-bottom: 10px;
	margin-bottom: 12px;
	border-bottom: 2px solid var(--sh-antique-gold);
}
.widget_product_categories ul.product-categories li {
	list-style: none;
	display: flex;
	justify-content: space-between;
	padding: 7px 0;
	border-bottom: 1px dashed var(--sh-hairline);
}
.widget_product_categories ul.product-categories li:last-child { border-bottom: none; }
.widget_product_categories ul.product-categories li a {
	color: var(--sh-sandal-brown);
	font-size: 14px;
	display: inline-block;
	transition: transform 0.2s ease, color 0.2s ease;
}
.widget_product_categories ul.product-categories li a::before {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	margin-right: 8px;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 5px solid var(--sh-antique-gold);
	vertical-align: middle;
	transition: transform 0.2s ease;
}
.widget_product_categories ul.product-categories li a:hover {
	color: var(--sh-antique-gold);
	transform: translateX(6px);
}
.widget_product_categories ul.product-categories li a:hover::before {
	transform: translateX(2px);
}
.widget_product_categories .count {
	color: #b8a89a;
	font-size: 12px;
}
/* No margin-top here (Kadence's own woocommerce.min.css doesn't set one
   either): the row below already centers the button and price label on
   its cross axis via align-items:center, and a top margin on just the
   button would shift its centered position down, throwing it out of
   vertical alignment with "Price: ₹70 — ₹400" per design feedback. The
   row's own gap (below) already provides spacing both side by side and
   when flex-wrap drops the button to its own line on narrow widths. */
.widget_price_filter .price_slider_amount .button {
	float: none;
}
.widget_price_filter .price_slider_amount {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}
/* Slider track: a dot marking each end of the selectable range, per the
   approved mockup, in addition to the gold fill/handles. */
.widget_price_filter .price_slider_wrapper .ui-slider {
	position: relative;
}
.widget_price_filter .price_slider_wrapper .ui-slider::before,
.widget_price_filter .price_slider_wrapper .ui-slider::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sh-antique-gold);
	transform: translateY(-50%);
	z-index: 1;
}
.widget_price_filter .price_slider_wrapper .ui-slider::before { left: -1px; }
.widget_price_filter .price_slider_wrapper .ui-slider::after { right: -1px; }
/* !important: Kadence's own woocommerce.min.css carries a same-property
   rule on a more specific selector
   (".woocommerce.widget_price_filter .ui-slider .ui-slider-range{
   background-color:var(--global-palette-highlight)}" — 4 classes vs. this
   rule's 3) and loads after this stylesheet, so it wins the cascade on
   specificity alone. That variable is never actually defined on this site,
   so the property resolves to invalid/initial (transparent) instead — the
   filled range and handles were rendering as a flat, uncoloured grey
   instead of the theme's gold, with the "highlighted dot" handles reduced
   to a barely-visible outline. !important is the only way to win here. */
.widget_price_filter .ui-slider .ui-slider-range,
.widget_price_filter .ui-slider .ui-slider-handle {
	background-color: var(--sh-antique-gold) !important;
	border-color: var(--sh-antique-gold) !important;
}
/* Highlighted min/max value bubble shown above each slider handle while
   dragging, so both ends of the selected range stay visible on the scale. */
.widget_price_filter .ui-slider .ui-slider-handle {
	position: absolute;
}
.widget_price_filter .ui-slider .ui-slider-handle .sh-price-tooltip {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 8px;
	padding: 2px 7px;
	background: var(--sh-antique-gold);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	border-radius: 3px;
	pointer-events: none;
}
.widget_price_filter .ui-slider .ui-slider-handle .sh-price-tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 4px solid transparent;
	border-top-color: var(--sh-antique-gold);
}
.widget_price_filter .price_label { font-size: 13px; color: var(--sh-sandal-brown); }
/* Lay this row out as a 2-row grid — the image spans the full height on
   the left, with Name above a combined Rating+Price row beside it on the
   right — per design feedback that rating and price should share one row
   here, matching the Best Sellers card design:
     [image] Name
     [image] Rating  Price
   The image and title come from WooCommerce's own widget template
   (wc_get_template('content-widget-product.php')) wrapped in a single
   <a>, both as ITS children rather than li's — "display:contents" on that
   <a> below removes its own box so the image and title behave as direct
   grid items of li (this grid container) instead, letting them land in
   separate cells while the <a> still wraps both for the link/click
   target. */
.widget_top_rated_products .product_list_widget li {
	display: grid;
	grid-template-columns: 56px 1fr;
	grid-template-rows: auto auto;
	column-gap: 12px;
	row-gap: 4px;
	align-items: start;
	padding: 12px 0;
	border-bottom: 1px dashed var(--sh-hairline);
}
.widget_top_rated_products .product_list_widget li:last-child { border-bottom: none; }
/* !important: Kadence's own woocommerce.min.css sets this <a> to
   "display:block" (".woocommerce ul.product_list_widget li a{display:
   block;...}"), on a selector that beats this one on specificity for the
   same reason as the img rule below (one more type selector: ul/li/a vs.
   just li/a) and loads after this stylesheet. Left at block, the <a>
   would still generate its own box and keep the image/title nested and
   auto-placed as a single grid item instead of "display:contents"
   dissolving it so its children land in the separate cells specified
   below. */
.widget_top_rated_products .product_list_widget li > a {
	display: contents !important;
}
.widget_top_rated_products .product_list_widget li > .star-rating {
	grid-column: 2;
	grid-row: 2;
}
/* js/product-rating-badge.js wraps the rating badge together with the
   .price that follows it into a single .sh-rating-price-row flex row (see
   that class above) so they sit side by side — that wrapper, not the badge
   alone, is what lands in the grid here; .star-rating above stays a direct
   li child (for the wrapper to be inserted next to) but is visually hidden
   (position:absolute elsewhere) so it doesn't need to reserve grid space. */
.widget_top_rated_products .product_list_widget li > .sh-rating-price-row {
	grid-column: 2;
	grid-row: 2;
	/* Grid items stretch to fill their cell's inline size by default
	   (unlike flex items, which size to content) — since column 2 is a 1fr
	   track spanning the widget's full width, the row was stretching edge
	   to edge instead of hugging its own content like everywhere else the
	   badge is used. */
	justify-self: start;
}
/* !important: Kadence's own woocommerce.min.css floats this image left
   (".woocommerce ul.product_list_widget li img{float:left;margin-right:8px;
   width:50px;...}") on a selector that ties on class-count (2) with this
   one but carries more element selectors (ul/li/img vs. just img), which
   wins specificity ties — and it also loads after this stylesheet. The
   float needs cancelling regardless of the grid placement below, or it
   would still pull the image out of normal flow. !important is needed on
   every property here to actually beat it. */
.widget_top_rated_products .product_list_widget img {
	float: none !important;
	width: 56px !important;
	height: 56px !important;
	object-fit: cover;
	border-radius: 4px;
	margin-right: 0 !important;
	grid-column: 1;
	grid-row: 1 / 3;
}
.widget_top_rated_products .product_list_widget .product-title {
	display: block;
	grid-column: 2;
	grid-row: 1;
	font-size: 14px;
	color: var(--sh-sandal-brown);
	font-weight: 500;
}
/* No grid-column/grid-row here: the price now lives inside the
   .sh-rating-price-row wrapper (placed above) rather than being a direct
   grid item of li itself. */
.widget_top_rated_products .product_list_widget .woocommerce-Price-amount {
	color: var(--sh-deep-maroon);
	font-weight: 600;
	font-size: 13px;
}

/* ==========================================================================
   Trust / icon bars
   ========================================================================== */
.sh-trust-bar {
	background-color: var(--sh-deep-maroon);
	color: var(--sh-cream);
	padding: 40px 0;
}
.sh-trust-bar .sh-trust-item {
	text-align: center;
}
.sh-trust-bar h4 {
	color: var(--sh-antique-gold);
}

/* ==========================================================================
   Product page custom tabs
   ========================================================================== */
.woocommerce-tabs ul.tabs li.active a {
	color: var(--sh-deep-maroon);
	border-bottom: 2px solid var(--sh-antique-gold);
}

/* Kadence's own woocommerce.min.css sets `margin:0 .6em` on each tab (li),
   loaded after this stylesheet at equal specificity, so !important is
   needed to win. .6em on both sides of two adjacent tabs adds up to a
   1.2em gap — tighten that per design feedback that the tab row reads too
   spread out (Description / Ingredients / How to Use / etc.). */
.woocommerce-tabs ul.tabs li {
	margin: 0 0.5em 0 0 !important;
}
.woocommerce-tabs ul.tabs li:last-child {
	margin-right: 0 !important;
}

/* Kadence's own woocommerce.min.css enqueues *after* this child stylesheet
   and re-zeroes .panel's padding at the same specificity, so plain source
   order would let it win — !important is needed to actually land the fix.
   Give every tab panel (Description, Ingredients, How to Use, Shipping &
   Delivery, Reviews) the same breathing room instead of flush edges. */
.woocommerce div.product .woocommerce-tabs .panel,
.woocommerce-tabs .panel {
	padding: 1rem !important;
}
.woocommerce-tabs .panel > h2:first-child {
	margin-top: 0;
	margin-bottom: 16px;
}

/* Single product content (gallery, title, price, tabs — everything inside
   #product-<id>.entry-content-wrap.product): the site's Kadence "Content
   Style" is set to Unboxed, and Kadence's own woocommerce.min.css has an
   unconditional `.content-style-unboxed .entry-content-wrap.product:
   not(.loop-entry){padding:0}` rule for that mode, loaded after this
   stylesheet — so without !important the product content sits flush
   against the boxed page frame's edge instead of having breathing room. */
.content-style-unboxed .entry-content-wrap.product:not(.loop-entry) {
	padding: 1rem !important;
}
/* The breadcrumb ("Home / Shop / ... / <product>") sits in its own
   .product-title.product-above wrapper, a sibling of #product-<id> above
   — not a child of it — so the 1rem inset added to the product content
   just above doesn't reach it, and it's left with no horizontal padding
   of its own (Kadence only ever gives .kadence-breadcrumbs vertical
   margin). Match the same 1rem so the breadcrumb lines up with the
   product content beneath it instead of sitting flush at the page edge,
   plus 1rem on top so it isn't flush against the page frame's top edge. */
.content-style-unboxed .product-title.product-above {
	padding: 1rem 1rem 0 !important;
}
.single-product .kadence-breadcrumbs {
	margin-top: 0.5rem !important;
}

/* Reviews tab: Kadence's woocommerce.min.css floats #comments (60%) and
   #review_form_wrapper (40%) side by side inside #reviews (min-width:
   1025px) but never clears them. With no clearfix, #reviews collapses to
   zero height around its floated children, so the panel's box ends before
   the review list/form actually do — the form renders "outside" the tab
   panel's box instead of inside it. Standard clearfix restores the
   panel's height to actually contain the floated columns. */
#reviews::after {
	content: "";
	display: table;
	clear: both;
}
/* Defensive hardening against the floated #comments/#review_form_wrapper
   columns (60%/40%, set by Kadence's woocommerce.min.css) ever pushing
   past the panel's right edge: force border-box sizing explicitly (rather
   than relying on it being inherited) and cap every form field at the
   column's own width, so nothing inside can render wider than its float. */
#reviews,
#reviews #comments,
#reviews #review_form_wrapper {
	box-sizing: border-box;
	max-width: 100%;
}
#reviews #review_form_wrapper input:not([type="checkbox"]):not([type="radio"]),
#reviews #review_form_wrapper textarea,
#reviews #commentform input:not([type="checkbox"]):not([type="radio"]),
#reviews #commentform textarea {
	box-sizing: border-box;
	max-width: 100%;
	width: 100%;
}

/* Related products: match the Shop grid's 4-per-row desktop layout.
   Kadence already defaults `product_related_columns` to 4 (columns class
   grid-lg-col-4 → grid-template-columns:repeat(4,1fr) at 1025px+), but pin
   it explicitly so the related-products row can't drift to a different
   column count if that Customizer setting ever changes. */
@media (min-width: 1025px) {
	.related.products ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}
/* Kadence's .grid-cols (shared by every product grid) sets a 2.5rem gap
   between cards on both axes — halve it here for Related products only,
   so the freed-up space goes to each card's own width instead. */
.related.products ul.products {
	column-gap: 1.25rem !important;
	row-gap: 1.25rem !important;
}

/* Reviews form: trim the boilerplate and tighten the consent line. */
/* "Your email address will not be published. Required fields are marked *"
   is two separate <span>s in WooCommerce's markup (#email-notes and
   .required-field-message) — hide the second so only the email notice
   remains, without touching WooCommerce's translation strings. */
.woocommerce #reviews .required-field-message {
	display: none;
}
/* The cookies-consent checkbox and its label are just two inline siblings
   in a <p>, so the label text wraps under the checkbox once the line runs
   out of room. Lay them out as a row instead, checkbox fixed to the left,
   so wrapped lines stay beside it rather than starting on their own line.
   True single-line (no wrap) was tried and reverted: the sentence is ~77
   characters needing ~600px, but the review form column is only ~440px
   wide even on a 1400px desktop viewport — forcing nowrap there just
   pushed the text past the box's right edge (the exact overflow issue
   fixed earlier in this file), and fitting it would need a ~10px font. */
.woocommerce #reviews .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
}
.woocommerce #reviews .comment-form-cookies-consent input[type="checkbox"] {
	flex-shrink: 0;
	margin: 0.2em 0 0;
}

/* ==========================================================================
   Sitewide layout
   ========================================================================== */
/* --- Flipkart-style boxed layout with visible side gutters ---
   Kadence's "Content Width: Normal" setting caps the page content at
   1290px and centers it (.content-container.site-container), but the
   sitewide rule near the top of this file forces body/.site to the exact
   same cream used by the content itself (!important), and most templates'
   article background is transparent too — so top to bottom, inside the
   boxed column and outside it are the identical color. On a wide screen
   the layout reads as edge-to-edge even though it technically isn't: the
   margins are there, just invisible. Give the outer page a distinct
   backdrop and paint the boxed column itself as a cream "card" on top of
   it, the way Flipkart's grey page frames its white boxed content. This
   was originally a homepage-only (body.home) treatment; it's now applied
   sitewide so every page shares the same boxed look.
   Earlier passes widened this column with fixed pixel values (1290px →
   1600px → 2000px), but on a very wide monitor even 2000px still left a
   large gap, since a fixed value can only be tuned for one screen size
   at a time. Switched instead to a self-adjusting width: viewport width
   minus a constant 120px on each side (via --global-vw, Kadence's own
   scrollbar-corrected 100vw, so this doesn't overflow and cause a
   horizontal scrollbar), capped at 3200px as a sane ceiling for
   exotic super-wide setups. That keeps the same ~120px gutter on any
   desktop screen without needing another manual re-tune. Below 1025px
   (tablet/mobile) the variable is left unset on purpose — var() with no
   fallback then makes max-width invalid-at-compute-time, which resolves
   to max-width:none (full width), matching the page's original
   small-screen behavior instead of forcing a 120px gutter onto a phone.
   The breakpoint below is 1200px, not the 1025px used elsewhere in this
   file: at 1025px, "viewport - 240px" is only 785px, a full 239px
   *narrower* than the uncapped 1024px box one pixel below it — a sudden
   cliff right at the boundary, discovered when the single-line fixes
   for the homepage's category row and trust bar started clipping/wrapping
   specifically between ~1025-1190px. Every real device width (1280,
   1366, 1440, 1536, 1600, 1920...) sits comfortably on one side of 1200
   or the other, so moving the threshold here just relocates the cliff
   to a gap nothing actually lands in. */
@media (min-width: 1200px) {
	body {
		--sh-boxed-width: min(calc(var(--global-vw, 100vw) - 240px), 3200px);
	}
}
body,
body.content-style-unboxed .site,
body.content-style-boxed {
	background-color: var(--sh-page-gutter) !important;
}
.content-container.site-container {
	max-width: var(--sh-boxed-width);
	background-color: var(--sh-cream);
}
/* The gutter above only showed behind the main content area — the
   announcement bar and the header (logo/search row, nav menu) still ran
   edge-to-edge above it, so the boxed look started partway down the page
   instead of the top. Box those two the same way, leaving their own
   backgrounds (maroon bar, white header) intact but narrowed to the same
   widened column and centered, so the gutter now runs the full height of
   the page down to the footer, which stays full-width on purpose. */
.sh-announcement-bar,
#masthead {
	max-width: var(--sh-boxed-width);
	margin-left: auto;
	margin-right: auto;
}
/* #masthead's parent (.site.wp-site-blocks) is a flex container, and a
   flex item with auto cross-axis margins stops stretching to fill the
   container — it shrinks to fit its content instead, which collapsed the
   header to ~846px regardless of viewport instead of the intended
   ~2750px, breaking the centering entirely. .sh-announcement-bar doesn't
   need this: its parent is plain <body> (block layout), where width:auto
   + margin:auto already fills-then-clamps-then-centers correctly. */
#masthead {
	width: 100%;
}
/* "Subscribe to Our Newsletter" is a footer-top widget (.sh-footer-newsletter,
   front page only), so it sits below the boxed content but above the actual
   footer columns and copyright bar — those two stay full-width on purpose,
   but this bar reads as part of the page's own content, not the footer
   proper, so it gets the same boxed column as the header/content above it
   instead of the footer's default near-full-width row padding. Its own
   ancestors are plain widget-area divs (not flex), so unlike #masthead it
   doesn't need the extra width:100% fix — margin:auto centers it correctly
   on its own once max-width is set. It also sits inside its own ancestor
   .site-container (a *different* element from the main
   .content-container.site-container above — this one wraps only the
   footer's top row) which Kadence hardcodes to the sitewide 1290px; that
   was silently capping the newsletter bar to ~1242px regardless of this
   rule, since a child can never exceed its parent's content width.
   Scoped to .site-top-footer-wrap so the footer's middle (columns) and
   bottom (copyright) rows, which have the same ".site-container" pattern,
   are left at 1290px, untouched. */
.site-top-footer-wrap .site-container {
	max-width: var(--sh-boxed-width);
}
.sh-footer-newsletter {
	max-width: var(--sh-boxed-width);
	margin-left: auto;
	margin-right: auto;
}
/* --- Hero v2: photo-style background slider, slider chrome --- */
.sh-hero-v2 {
	position: relative;
	height: 475px;
	background-color: var(--sh-deep-maroon);
	/* Sits inside the same boxed content column as the rest of the
	   homepage (see the "Flipkart-style boxed layout" rules above)
	   instead of breaking out to full viewport width, so it keeps
	   the same visible side gutters as every other section.
	   No border-radius: now that the hero spans the box's true edges
	   (see the negative margin below), rounded corners would leave a
	   small triangular sliver of the page background showing through
	   at each corner instead of a clean flush edge. */
	margin-bottom: 3rem;
	overflow: hidden;
	/* The boxed column (.content-container.site-container) keeps its own
	   24px left/right padding *inside* the box edge on the homepage
	   (Kadence's --global-content-edge-padding — see the sitewide padding
	   removal above, scoped to exclude body.home), which every other
	   section sits inside of — fine for grids/text, but on a full-bleed
	   banner it read as unwanted white space on both sides instead of the
	   banner filling the box. Cancel just that inset with a matching
	   negative margin + wider box so the hero spans the box's true edges
	   while everything below it keeps the normal inset. */
	margin-left: -24px;
	margin-right: -24px;
	width: calc(100% + 48px);
}
.sh-hero-slides {
	position: relative;
	width: 100%;
	height: 100%;
}
.sh-hero-slide {
	position: absolute;
	inset: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.9s ease;
	z-index: 1;
}
/* Blurred, scaled-up copy of the same image fills the frame behind the
   full, uncropped image so slides of any aspect ratio never show empty
   letterbox bars. */
.sh-hero-slide-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	filter: blur(30px) brightness(0.85);
	transform: scale(1.15);
}
/* The banner now fills the full boxed width and height with no letterbox
   margin on either side — object-fit:cover crops to fill instead of the
   previous contain (which showed the blurred .sh-hero-slide-bg copy
   behind it on wide screens whenever the source image's aspect ratio was
   narrower than the hero box). The blurred bg layer above is harmless
   dead weight now (fully covered) but left in place; removing it isn't
   needed since it's invisible either way. */
.sh-hero-slide-img {
	position: relative;
	z-index: 2;
	display: block;
	height: 100%;
	width: 100%;
	object-fit: cover;
}
.sh-hero-slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}
/* Each hero slide's artwork already bakes in its own heading/CTA, so the
   whole slide is one clickable link rather than a precisely-positioned
   overlay over a button drawn in the image. */
.sh-hero-slide-link {
	position: absolute;
	inset: 0;
	z-index: 3;
}
.sh-hero-v2-inner {
	position: relative;
	z-index: 2;
	max-width: 640px;
	padding: 0 6%;
	color: var(--sh-cream);
}
.sh-hero-title {
	color: var(--sh-cream);
	font-size: 44px;
	line-height: 1.25;
	margin: 0 0 16px;
	white-space: nowrap;
}
.sh-hero-subtitle {
	color: var(--sh-cream);
	font-size: 17px;
	opacity: 0.9;
	margin: 0 0 28px;
	line-height: 1.5;
}
.sh-hero-btn {
	display: inline-block;
	background: var(--sh-antique-gold);
	color: var(--sh-deep-maroon);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 14px 32px;
	border-radius: 2px;
	text-decoration: none;
}
/* Was background: var(--sh-cream) — the same colour as the page background
   (see body{background-color:var(--sh-cream)} above), so the button visibly
   vanished into the page on hover. Swapped for the deep-maroon/cream
   inversion already used for hover/focus on the theme's other primary
   buttons (e.g. .woocommerce .button:hover below) so it reads as an
   intentional, on-theme state instead of a bug. */
.sh-hero-btn:hover {
	background: var(--sh-deep-maroon);
	color: var(--sh-cream);
}
.sh-hero-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	background: rgba(255,255,255,0.25);
	border: none;
	color: var(--sh-cream);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 16px;
}
.sh-hero-arrow-prev { left: 20px; }
.sh-hero-arrow-next { right: 20px; }
.sh-hero-arrow:hover { background: rgba(255,255,255,0.4); }
.sh-hero-dots {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	gap: 8px;
}
.sh-dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: rgba(255,255,255,0.5);
	display: inline-block;
}
.sh-dot-active { background: var(--sh-antique-gold); }

/* --- Ornamental section title divider --- */
.sh-section-title-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 34px;
	margin-top: 3.5rem;
	margin-bottom: 2rem;
}
/* Hero banner already carries its own bottom margin, so the first title
   directly after it shouldn't add another block of top spacing on top of it. */
.sh-hero-v2 + .sh-section-title-wrap {
	margin-top: 0;
}
.sh-best-sellers-title {
	margin-top: 1rem;
}
/* Best Sellers product images: force a square frame explicitly instead of
   relying on WooCommerce's own thumbnail-cropping setting staying at its
   current 1:1 value — object-fit:cover keeps the product centered and
   filling the square if that setting (or the source image's own aspect
   ratio) ever changes. Scoped to this section's own wrapper class so the
   shop page and other product grids elsewhere are untouched. */
.woocommerce.columns-5 li.product a img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	height: auto;
}
.sh-hero-v2 {
	margin-bottom: 1.5rem;
}
.sh-section-title-wrap .sh-line {
	height: 1px;
	width: 55px;
	background: linear-gradient(90deg, transparent, var(--sh-antique-gold));
	display: inline-block;
	position: relative;
}
.sh-section-title-wrap .sh-line::before,
.sh-section-title-wrap .sh-line::after {
	content: "";
	position: absolute;
	top: 50%;
	border: 2px solid var(--sh-antique-gold);
	transform: translateY(-50%) rotate(45deg);
}
.sh-section-title-wrap .sh-line::before {
	right: -17px;
	width: 14px;
	height: 14px;
}
.sh-section-title-wrap .sh-line::after {
	right: -13px;
	width: 6px;
	height: 6px;
	border-color: #8a5a1e;
}
.sh-section-title-wrap .sh-line:last-of-type {
	background: linear-gradient(90deg, var(--sh-antique-gold), transparent);
}
.sh-section-title-wrap .sh-line:last-of-type::before {
	right: auto;
	left: -17px;
}
.sh-section-title-wrap .sh-line:last-of-type::after {
	right: auto;
	left: -13px;
}
.sh-section-title-wrap .sh-section-title {
	margin: 0 !important;
	white-space: nowrap;
}

/* --- Icon circles (trust bar + why choose us) --- */
.sh-icon-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	border: 1px solid var(--sh-antique-gold);
	margin-bottom: 14px;
}
.sh-icon-circle svg { width: 26px; height: 26px; color: var(--sh-antique-gold); }
.sh-icon-outline { border-color: var(--sh-deep-maroon); }
.sh-icon-outline svg { color: var(--sh-deep-maroon); }

/* Trust bar icons need more presence than the smaller Why Choose Us icons */
.sh-trust-bar .sh-icon-circle { width: 36px; height: 36px; margin-bottom: 6px; }
.sh-trust-bar .sh-icon-circle svg { width: 22px; height: 22px; }

/* --- Trust badges (Line Seal): 100% Natural, Handcrafted, Premium Quality, Chemical-Free --- */
.sh-badge-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 20px;
	margin: 28px 0;
}
.sh-badge { display: flex; flex-direction: column; align-items: center; }
.sh-badge svg { width: 42px; height: 42px; }
.sh-badge-ring { fill: none; stroke: var(--sh-antique-gold); stroke-width: 1.6; }
.sh-badge-art {
	fill: none;
	stroke: var(--sh-antique-gold);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.sh-badge-arctext {
	font-family: Arial, sans-serif;
	font-size: 6.4px;
	letter-spacing: 0.6px;
	fill: var(--sh-antique-gold);
}

/* --- Why Choose Us row --- */
.sh-why-choose {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
	text-align: center;
	margin-bottom: 3rem;
}
.sh-why-item { flex: 1; min-width: 150px; }
/* Halves the base .sh-icon-circle rule's 14px margin-bottom (the gap
   between the icon and "Authentic"/"Wide Range"/etc below it) down to
   7px, scoped to this section only — the trust bar's own icon already
   has its own separate, smaller margin-bottom and is untouched.
   Kadence's own heading-spacing default separately adds a 30px
   margin-top to the h5 itself (same higher-specificity-rule pattern as
   the trust bar's h4 fix elsewhere in this file), which was dwarfing
   this margin entirely until the !important on margin-top:0 below
   removed it — now this is the only real gap between icon and label. */
.sh-why-item .sh-icon-circle { margin-bottom: 1rem; }
/* Gap between the label ("Authentic", "Wide Range", etc) and its
   description ("Pure & Natural", "For Every Need", etc) below it —
   applies to all 5 items in this section since they share this same
   .sh-why-item h5 rule. Both margins need !important: the same
   higher-specificity Kadence heading-spacing rule noted above sets
   *both* margin-top (30px, already overridden) and margin-bottom
   (0.625em = 10px) — a plain margin-bottom here was still losing to
   that 10px, which is why the gap didn't actually land on 0.5rem. */
.sh-why-item h5 { margin: 0 0 0.25rem !important; }
.sh-why-item p { margin: 0; font-size: 14px; color: var(--sh-sandal-brown); }

/* --- Instagram feed grid --- */
.sh-instagram-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
	margin-bottom: 1.5rem;
}
.sh-instagram-grid img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 4px;
	display: block;
	transition: transform .25s ease;
}
.sh-instagram-grid a:hover img { transform: scale(1.04); }
.sh-instagram-viewmore { text-align: center; margin-bottom: 1.5rem; }
/* Responsive Instagram grid for mobile/tablet screens */
@media (max-width: 600px) {
	.sh-instagram-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 601px) and (max-width: 999px) {
	.sh-instagram-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
/* The vertical gap before "From Our Blog" was this margin-bottom (3rem)
   plus .sh-section-title-wrap's own default 3.5rem margin-top — 6.5rem
   total. Per design feedback that gap is halved to 3.25rem: margin-bottom
   above already dropped to 1.5rem, and this override (same pattern as the
   .sh-hero-v2 + .sh-section-title-wrap rule above) halves the title's own
   margin-top too, scoped to just this occurrence. */
.sh-instagram-viewmore + .sh-section-title-wrap { margin-top: 1.75rem; }

/* Category cards (WooCommerce product_categories shortcode output).
   At the old 150px card width + 20px gap, the 7 categories needed
   150*7 + 20*6 = 1170px to stay on one line — comfortably fits the old
   sitewide 1290px box, but not the narrower boxed widths further down
   this file at moderate desktop sizes, so the row wrapped to two lines.
   Shrunk to 120px cards + 10px gap (900px total) and a smaller label
   size so all 7 stay in a single row down to much narrower boxed
   widths too. flex-wrap stays put as a safety net for genuinely tiny
   screens rather than forcing a horizontal scrollbar. */
ul.products:has(li.product-category) {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
li.product-category {
	text-align: center;
	width: 120px;
	list-style: none;
	margin: 0 !important;
	box-shadow: none !important;
	background: none !important;
	overflow-wrap: normal;
	word-break: keep-all;
	/* Undo the shared `.product` card rule's overflow:hidden — with a fixed
	   card width and a single-line label below, the longer category names
	   (e.g. "Shower Gels (5)") need room to render without being clipped. */
	overflow: visible;
}
/* Kadence wraps the title in a `.product-details` div with 16px of side
   padding meant for full product cards (from its own highly specific
   `.woocommerce ul.products li.product .entry-content-wrap` rule, which
   !important is needed to beat); on these narrow, image-led category cards
   that padding leaves too little room for longer names like "Shower Gels
   (5)", so it's trimmed down here specifically. */
li.product-category .product-details {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
li.product-category h2 {
	white-space: nowrap;
	letter-spacing: 0;
}
li.product-category img {
	width: 90px !important;
	height: 90px !important;
	object-fit: cover;
	border-radius: 50% !important;
	border: 3px solid var(--sh-antique-gold);
	box-shadow: 0 6px 16px rgba(90,60,40,.15);
	transition: transform .25s ease;
	margin: 0 auto !important;
}
li.product-category:hover img { transform: translateY(-4px); }
/* Kadence's default archive hover effect lifts .entry-content-wrap (the
   label) up by 2rem — enough to drag it into the circle image above on
   these small category cards. Keep the hover lift, just scaled down to
   match the image's own -4px so the two move together instead of colliding. */
li.product-category:hover .entry-content-wrap,
li.product-category:focus-within .entry-content-wrap {
	transform: translateY(-4px) !important;
}
/* !important needed on both: Kadence's own woocommerce.min.css targets the
   same title with .woocommerce ul.products li.product .woocommerce-loop-category__title
   (this li carries both "product-category" and "product" classes) at far
   higher specificity, setting font-size:1em (17px) — that was silently
   winning over the plain font-size above regardless of source order,
   which is why "Shower Gels (5)" was overflowing its 120px card and
   visually disappearing behind the next category's circle. */
li.product-category h2 {
	font-size: 13px !important;
	color: var(--sh-sandal-brown);
	margin-top: 8px;
}
li.product-category mark {
	background: none;
	color: var(--sh-antique-gold);
	font-size: 10px !important;
}
/* Responsive category cards for mobile and tablet */
@media (max-width: 480px) {
	li.product-category {
		width: calc(50% - 5px);
	}
	li.product-category img {
		width: 70px !important;
		height: 70px !important;
	}
	li.product-category h2 {
		font-size: 11px !important;
		white-space: normal;
	}
}
@media (min-width: 481px) and (max-width: 768px) {
	li.product-category {
		width: calc(33.333% - 7px);
	}
	li.product-category img {
		width: 80px !important;
		height: 80px !important;
	}
	li.product-category h2 { font-size: 12px !important; }
}
/* At 1200px+ (the same breakpoint the boxed-width gutter uses elsewhere
   in this file), the 7 fixed-120px cards above stay clustered in the
   middle of the row with empty tan space on both sides once the box
   gets meaningfully wider than ~900px — most of the room on a normal
   desktop screen. Switch to a 7-column grid there instead of flexbox:
   each column stretches to share the row's full width equally, so the
   row always fills edge to edge with no leftover space, and a bit more
   room per column means the icon and label can grow too. Below 1200px
   (tablet/mobile) the flex rule above is left as-is — forcing exactly 7
   equal columns down to phone width would squeeze each one far too
   narrow for the icon, so those sizes keep wrapping to multiple rows
   instead. */
@media (min-width: 1200px) {
	ul.products:has(li.product-category) {
		display: grid !important;
		grid-template-columns: repeat(7, 1fr);
		gap: 16px;
	}
	li.product-category { width: auto; }
	li.product-category img {
		width: 115px !important;
		height: 115px !important;
	}
	li.product-category h2 { font-size: 15px !important; }
	li.product-category mark { font-size: 11px !important; }
}

.sh-trust-bar {
	border-radius: 4px;
	margin: 2rem 0;
	background-color: var(--sh-deep-maroon);
	/* Vertical padding trimmed from 26px to 16px, on top of the smaller
	   icon (52px -> 36px) and heading (22px -> 16px) below, to bring the
	   bar's overall height down noticeably rather than just nudging it. */
	padding: 16px 24px;
	display: flex;
	/* Centered, fixed-width items (rather than space-between + flex:1
	   stretching each column to fill the row) keep the four items grouped
	   closer together instead of spread edge-to-edge with wide gaps. */
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px 32px;
}
/* Keep all 4 items on one row at desktop widths instead of wrapping to
   two — flex-wrap stays put below 1200px (tablet/mobile, and the narrow
   band just above 1025px where the boxed column briefly has less room
   than it does at 1024px — see the --sh-boxed-width comment above)
   so those sizes still stack safely instead of clipping text. */
@media (min-width: 1200px) {
	.sh-trust-bar { flex-wrap: nowrap; }
}
.sh-trust-item { text-align: center; flex: 0 1 220px; min-width: 200px; }
/* !important needed: Kadence's own heading spacing (em-based, ~11px at this
   font-size) is applied via a later, higher-specificity rule and would
   otherwise override this tighter margin. */
.sh-trust-item h4 {
	color: var(--sh-antique-gold);
	font-size: 16px;
	margin: 0 0 4px !important;
	white-space: nowrap;
}
/* white-space:nowrap + a slightly smaller size keeps each description
   ("Pure, Chemical-Free Formulas", "Finest Ingredients, Finest Craft",
   etc) on a single line within the item's 200-220px width instead of
   wrapping to two, matching the same "single line" request applied to
   the category labels above. */
.sh-trust-item p {
	color: var(--sh-cream);
	opacity: 0.85;
	margin: 0;
	font-size: 13px;
	white-space: nowrap;
}

.sh-offer-banners { gap: 24px; margin: 3rem 0; }
.sh-offer-banner {
	padding: 48px 32px;
	border-radius: 4px;
	color: var(--sh-cream);
}
.sh-offer-banner h3 { color: var(--sh-cream); }
.sh-offer-festival {
	background: url('../kadence/assets/images/homeimages/festival_offers.png') center center / cover no-repeat;
	position: relative;
}
.sh-offer-festival > * { position: relative; z-index: 1; }
.sh-offer-arrivals {
	background: var(--sh-sandal-brown) url('../kadence/assets/images/homeimages/bullk_order.png') center center / cover no-repeat;
	position: relative;
}
.sh-offer-arrivals::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 4px;
}
.sh-offer-arrivals > * { position: relative; z-index: 1; }

.sh-why-item { text-align: center; }

.sh-blog-grid.wp-block-latest-posts li { list-style: none; }

.sh-newsletter {
	background: var(--sh-deep-maroon);
	color: var(--sh-cream);
	text-align: center;
	padding: 48px 32px;
	border-radius: 4px;
	margin: 3rem 0;
}
.sh-newsletter h3 { color: var(--sh-cream); }
.sh-newsletter-form {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 1rem;
	flex-wrap: wrap;
}
.sh-newsletter-form input[type="email"] {
	padding: 12px 16px;
	border-radius: 2px;
	border: none;
	min-width: 280px;
}
.sh-newsletter-form button {
	background: var(--sh-antique-gold);
	color: var(--sh-deep-maroon);
	border: none;
	padding: 12px 24px;
	font-weight: 600;
	text-transform: uppercase;
	border-radius: 2px;
	cursor: pointer;
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer.site-footer,
.sh-footer {
	background-color: var(--sh-cream);
	color: var(--sh-sandal-brown);
}

/* Main footer area (logo/about, Quick Links, Customer Service, Contact Us)
   reads as a light section per the approved mockup — only the newsletter row
   above it and (optionally) the copyright strip below stay dark/light-split. */
.site-middle-footer-wrap {
	background-color: var(--sh-cream);
	color: var(--sh-sandal-brown);
	border-top: 1px solid var(--sh-hairline);
	padding-top: 1rem;
}
/* Footer Links row (Quick Links / Customer Service / Contact Us columns):
   Kadence's own bottom padding here (30px — unset in the Customizer, so it
   falls through to Kadence's own default, output as inline CSS on
   "#colophon .site-middle-footer-inner-wrap") left a large gap below the
   columns before the copyright bar. Halved to 15px; selector matched
   (id + class) so this wins the specificity tie regardless of load order. */
#colophon .site-middle-footer-inner-wrap {
	padding-bottom: 15px;
}
.site-middle-footer-wrap .footer-widget-area-inner,
.site-middle-footer-wrap a {
	color: var(--sh-sandal-brown);
}
.site-middle-footer-wrap .widget-title {
	color: var(--sh-deep-maroon);
	font-family: 'Cinzel', serif;
	font-size: 16px;
	margin-bottom: 1rem;
}
.site-middle-footer-wrap a:hover { color: var(--sh-antique-gold); }

/* Quick Links / Customer Service footer menu hover state, matching the
   color + slide treatment already used for the shop sidebar's category
   links. !important is needed because Kadence's own widget/menu link color
   (set via its footer.min.css / inline customizer CSS, loaded after this
   stylesheet) otherwise wins the equal-specificity tie and silently
   suppresses the plain `a:hover` rule above. */
/* Quick Links / Customer Service link spacing: the visible gap between
   rows was never mainly the small li margin below (that only ever added a
   few px) — it's mostly the anchor's inherited *line-height* (the sitewide
   body value, 1.6 x 17px = 27.2px) plus Kadence's own .1em top/bottom
   padding (~3.4px), for a ~30.6px row step even with zero margin.
   IMPORTANT: display:inline-block (kept for several rounds of edits here)
   made the anchor lay out inside the <li>'s own inline formatting context,
   where the *li's* inherited line-height/font-size (still the sitewide
   1.6/17px, since only the anchor's were ever overridden) acts as a "strut"
   that sets the line box height regardless of the anchor's own smaller
   line-height — every line-height/font-size change above this line was
   computing correctly (verified via getComputedStyle) but rendering as if
   it never happened, because the strut, not the anchor, was governing the
   actual row height. Switched to display:block so the anchor's own box
   sets the <li>'s height directly, with no parent strut involved — this
   is also why line-height:0.5, requested and applied while the strut bug
   masked its effect, turned out to make adjacent rows visibly overlap
   (confirmed by screenshot) once it actually started rendering: at a 15px
   font, 0.5 is half the font's own natural height, well past the point
   text can stay legible. Settled on line-height:1.2 (~18px row step) as a
   legible tight value, then bumped again to line-height:1.6 (24px row
   step, measured via getBoundingClientRect) to match the wrapped address
   lines in the Contact Us column next to it (.sh-footer-contact-row's
   span text, which inherits the sitewide 15px/1.6 with no override of its
   own) — same 1.6 the body itself uses, just carried through explicitly
   here now that font-size is overridden to 15px. */
.site-middle-footer-wrap .widget_nav_menu ul.menu li a {
	display: block;
	/* Sitewide body font-size (17px) minus 2px, per request. */
	font-size: 15px;
	line-height: 1.6;
	padding: 0;
	transition: color 0.2s ease, transform 0.2s ease;
}
/* Right arrow marker before each link — switched from an SVG/mask icon to
   the same small solid-gold CSS triangle used by the Shop page's sidebar
   Categories list (.widget_product_categories ul.product-categories li a
   above), per request, including that widget's own hover treatment: the
   triangle gets an extra 2px nudge on top of the 6px the whole link
   already moves by (it's a child of the link, so it inherits that shift
   for free, then shifts an additional 2px of its own — same layered
   effect as the sidebar). Unlike the previous mask icon it's a fixed gold
   color rather than currentColor, matching the sidebar original exactly. */
.site-middle-footer-wrap .widget_nav_menu ul.menu li a::before {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	margin-right: 8px;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 5px solid var(--sh-antique-gold);
	vertical-align: middle;
	transition: transform 0.2s ease;
}
.site-middle-footer-wrap .widget_nav_menu ul.menu li a:hover {
	color: var(--sh-antique-gold) !important;
	transform: translateX(6px);
}
.site-middle-footer-wrap .widget_nav_menu ul.menu li a:hover::before {
	transform: translateX(2px);
}
.site-middle-footer-wrap .widget_nav_menu ul.menu li {
	margin-bottom: 0;
}

/* Bottom copyright bar reads as a light strip under the dark footer, per the approved mockup.
   A hairline divider marks it off from the footer links section above. */
.site-bottom-footer-wrap {
	background-color: var(--sh-cream);
	color: var(--sh-sandal-brown);
	font-size: 13px;
	text-align: center;
	padding-top: 0;
	padding-bottom: 0;
	border-top: 1px solid var(--sh-hairline);
}
.site-bottom-footer-wrap a { color: var(--sh-sandal-brown); }

/* Bottom row: copyright on the left, payment badges on the right, per mockup */
.site-bottom-footer-inner-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 18px 0;
}
.site-footer-bottom-section-2 { display: flex; justify-content: flex-end; }

/* --- Newsletter row (top of footer): a rounded card floating on the cream
   background, per the approved mockup, not a full-bleed bar. --- */
.site-top-footer-wrap {
	background-color: var(--sh-cream);
}
.site-top-footer-inner-wrap {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.sh-footer-newsletter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	background-color: var(--sh-deep-maroon);
	color: var(--sh-cream);
	border-radius: 6px;
	/* Vertical padding only (horizontal untouched) trimmed from 28px to
	   16px — the bar's height is padding-top + padding-bottom + the
	   content's own intrinsic height, so this cuts ~24px off the total,
	   the ~20% reduction asked for (measured ~115px -> ~91px). */
	padding: 16px 40px;
	margin: 24px 0;
}
.sh-footer-newsletter-text h3 {
	color: var(--sh-cream);
	margin: 0 0 4px;
	font-size: 22px;
}
.sh-footer-newsletter-text p {
	margin: 0;
	opacity: 0.85;
	font-size: 14px;
}
.sh-footer-newsletter-form {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 0;
	position: relative;
}
.sh-footer-newsletter-form input[type="email"] {
	min-width: 320px;
	padding: 14px 18px;
	border: none;
	border-radius: 2px 0 0 2px;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	background: #fff;
	color: var(--sh-sandal-brown);
}
.sh-footer-newsletter-form input[type="email"]::placeholder { color: #999; }
.sh-footer-newsletter-form button {
	background: var(--sh-antique-gold);
	color: var(--sh-deep-maroon);
	border: none;
	padding: 14px 28px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	border-radius: 0 2px 2px 0;
	cursor: pointer;
	transition: background 0.2s ease;
}
.sh-footer-newsletter-form button:hover { background: #b3872f; }
.sh-footer-newsletter-msg {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 6px;
	font-size: 13px;
	color: var(--sh-cream);
}
.sh-footer-newsletter-msg.is-error { color: #ffb4b4; }

/* --- Footer brand block (logo + name + tagline + social) --- */
.sh-footer-logo {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	margin-bottom: 14px;
}
.sh-footer-logo-img {
	width: 48px;
	height: 48px;
	object-fit: contain;
}
.sh-footer-logo-line1 {
	font-family: 'Cinzel', serif;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 1px;
	color: var(--sh-deep-maroon);
	text-transform: uppercase;
}
.sh-footer-about p {
	font-size: 14px;
	line-height: 1.6;
}
.sh-footer-social {
	display: flex;
	gap: 10px;
	margin-top: 16px !important;
}
.sh-footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--sh-hairline);
	border-radius: 50%;
	color: var(--sh-sandal-brown);
}
.sh-footer-social a:hover {
	background: var(--sh-antique-gold);
	border-color: var(--sh-antique-gold);
	color: var(--sh-deep-maroon);
}

/* --- Footer contact block with icons --- */
/* Spacing between rows (address/phone/email): originally 14px, bumped 25%
   to 17.5px, cut 50% to 8.75px, then halved again to 4.375px. */
.sh-footer-contact-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 4.375px !important;
	/* Match the Quick Links / Customer Service link font-size (15px, also
	   2px down from the sitewide 17px body size) so all four footer
	   columns read at the same size. */
	font-size: 15px;
}
.sh-footer-contact-row svg {
	flex: none;
	margin-top: 2px;
	color: var(--sh-sandal-brown);
}
.site-middle-footer-wrap .sh-footer-contact-row svg { color: var(--sh-sandal-brown); }

/* --- Payment badges (bottom bar) --- */
.sh-payment-icons {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.sh-payment-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 24px;
	padding: 0 10px;
	border-radius: 3px;
	font-family: Arial, sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.3px;
	background: #fff;
	border: 1px solid var(--sh-hairline);
	color: var(--sh-sandal-brown);
}
.sh-payment-visa { color: #1a1f71; }
.sh-payment-amex { color: #2e77bc; }
.sh-payment-rupay { color: #0b5b32; }
.sh-payment-upi { color: #6a1b1a; }
.sh-payment-mastercard { gap: 2px; padding: 0 8px; }
.sh-payment-mastercard i {
	width: 13px;
	height: 13px;
	border-radius: 50%;
	display: inline-block;
}
.sh-payment-mastercard i:first-child { background: #eb001b; }
.sh-payment-mastercard i:last-child { background: #f79e1b; margin-left: -5px; opacity: 0.85; }

/* Smaller variant of the badge above, for the network icon detected live
   inside the Saved Cards number field (see sh_card_network_badge_html() /
   manage-card.php) — same colors/shapes, just sized to sit inside an input. */
.sh-payment-badge--sm {
	height: 20px;
	padding: 0 8px;
	font-size: 9px;
}
.sh-payment-badge--sm.sh-payment-mastercard {
	padding: 0 6px;
}
.sh-payment-badge--sm.sh-payment-mastercard i {
	width: 11px;
	height: 11px;
}

.home .content-area { margin-bottom: 0; }

/* --- Sticky WhatsApp chat icon --- */
.sh-whatsapp-sticky {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	animation: sh-whatsapp-pulse 2.2s infinite;
}
.sh-whatsapp-sticky:hover {
	transform: scale(1.08);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
	color: #fff;
}
@keyframes sh-whatsapp-pulse {
	0% { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(37, 211, 102, 0.5); }
	70% { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), 0 0 0 12px rgba(37, 211, 102, 0); }
	100% { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(37, 211, 102, 0); }
}
@media (max-width: 600px) {
	.sh-whatsapp-sticky {
		right: 16px;
		bottom: 16px;
		width: 50px;
		height: 50px;
	}
}

/* --- Sticky "back to top" button, mirrored on the bottom-left --- */
.sh-back-to-top {
	position: fixed;
	left: 24px;
	bottom: 24px;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--sh-antique-gold);
	color: var(--sh-deep-maroon);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.sh-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.sh-back-to-top:hover {
	background: var(--sh-deep-maroon);
	color: var(--sh-cream);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
@media (max-width: 600px) {
	.sh-back-to-top {
		left: 16px;
		bottom: 16px;
		width: 38px;
		height: 38px;
	}
}

/* --- My Account > Addresses / Saved Cards: list empty state + item list.
   Saved Cards (my-cards.php) intentionally reuses this same component CSS
   via combined selectors — same visual pattern as the address book, just a
   different content shape (see functions.php "My Account > Saved Cards"). --- */
.sh-address-empty,
.sh-card-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 48px 20px;
}
.sh-address-empty-icon,
.sh-card-empty-icon {
	margin-bottom: 24px;
}
.sh-address-empty-title,
.sh-card-empty-title {
	margin: 0 0 8px;
	font-size: 20px;
}
.sh-address-empty-text,
.sh-card-empty-text {
	margin: 0 0 24px;
	color: var(--sh-sandal-brown);
}
.sh-address-add-btn,
.sh-card-add-btn {
	display: inline-block;
}

.sh-address-page-title,
.sh-card-page-title {
	margin: 0 0 16px;
	font-size: 20px;
}
.sh-address-add-row,
.sh-card-add-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px;
	margin-bottom: 20px;
	border: 1px solid var(--sh-hairline);
	border-radius: 4px;
	color: var(--sh-sandal-brown);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.03em;
	text-decoration: none;
}
.sh-address-add-row:hover,
.sh-card-add-row:hover {
	border-color: var(--sh-antique-gold);
	color: var(--sh-antique-gold);
}
.sh-address-add-icon,
.sh-card-add-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	font-size: 18px;
	line-height: 1;
}
.sh-address-list,
.sh-card-list {
	display: flex;
	flex-direction: column;
}
.sh-address-card,
.sh-card-item {
	position: relative;
	padding: 20px 0;
	border-bottom: 1px solid var(--sh-hairline);
}
.sh-address-card:first-child,
.sh-card-item:first-child {
	padding-top: 0;
}
.sh-address-card-top,
.sh-card-item-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 10px;
}
.sh-address-chip,
.sh-card-chip {
	display: inline-block;
	padding: 3px 10px;
	background: rgba(93, 64, 55, 0.08);
	color: var(--sh-sandal-brown);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.03em;
	border-radius: 3px;
}
.sh-address-name-phone {
	/* !important: Kadence's content.min.css matches this <p> via a broad
	   ".single-content p" rule (margin-bottom: var(--global-md-spacing), i.e.
	   32px) that outranks this single-class selector on specificity alone —
	   loaded after this stylesheet doesn't even matter, it wins outright. */
	margin: 0 0 3px !important;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.sh-address-name-phone-text {
	display: flex;
	gap: 12px;
}
.sh-address-lines {
	margin: 0 !important;
	color: var(--sh-sandal-brown);
	line-height: 1.6;
}

/* Saved Cards list item detail lines, stacked in the requested order
   (Nickname, Card Number, Expiry, Name on Card — see my-cards.php). Its own
   class rather than reusing .sh-address-lines: that one is margin:0 for a
   single line under the name row, these need spacing between several. */
.sh-card-detail-line {
	/* !important: see .sh-address-name-phone above — same Kadence
	   ".single-content p" override applies to every <p> in here. */
	margin: 0 0 4px !important;
	color: var(--sh-sandal-brown);
	line-height: 1.6;
}
.sh-card-detail-line:last-child {
	margin-bottom: 0 !important;
}
.sh-card-detail-line strong {
	color: var(--sh-ink);
}
.sh-card-nickname {
	font-size: 15px;
}
.sh-card-holder-name {
	font-size: 12px;
}

.sh-address-actions,
.sh-card-actions {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 2px;
}
.sh-address-action-icon,
.sh-card-action-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	color: var(--sh-sandal-brown);
	border-radius: 50%;
}
.sh-address-action-icon svg,
.sh-card-action-icon svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
.sh-address-action-icon:hover,
.sh-card-action-icon:hover {
	background: rgba(93, 64, 55, 0.08);
}
.sh-address-action-icon.sh-address-delete,
.sh-card-action-icon.sh-card-delete {
	color: #c0392b;
}

/* --- My Account > Saved Cards: add/edit form disclaimer note --- */
.sh-card-form-note {
	margin: 0 0 20px;
	padding: 12px 16px;
	background: var(--sh-cream);
	border: 1px solid var(--sh-hairline);
	border-radius: 4px;
	color: var(--sh-sandal-brown);
	font-size: 13px;
	line-height: 1.6;
}

/* Card number field: room on the right for the detected-network icon
   (js/card-actions.js's inline script on manage-card.php swaps its content
   as the customer types — see sh_card_network_badge_html() in functions.php
   for the initial, already-known state on Edit Card). */
.sh-card-number-field {
	position: relative;
}
.sh-card-number-field input {
	padding-right: 64px;
}
.sh-card-detected-icon {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	pointer-events: none;
}

/* --- My Account > Addresses: add/edit form (also reused as-is by the
   Saved Cards add/edit form — same field/grid/actions markup, see
   manage-card.php) --- */
.sh-address-label-field {
	border: none;
	padding: 0;
	margin: 0 0 20px;
}
.sh-address-label-field legend {
	padding: 0;
	margin: 0 0 8px;
	font-size: inherit;
	font-weight: 600;
}
.sh-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.sh-address-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 20px;
}
.sh-address-field {
	margin: 0 0 16px;
}
.sh-address-form-grid .sh-address-field {
	margin: 0;
}
.sh-pincode-status {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: var(--sh-sandal-brown);
}
.sh-address-field--full {
	grid-column: 1 / -1;
}
.sh-address-field input,
.sh-address-field select,
.sh-address-field textarea {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--sh-hairline);
	border-radius: 4px;
	background: #fff;
	color: var(--sh-ink);
	font-size: 14px;
	font-family: 'Poppins', 'Inter', sans-serif;
}
.sh-address-field input:focus,
.sh-address-field select:focus,
.sh-address-field textarea:focus {
	outline: none;
	border-color: var(--sh-antique-gold);
}
.sh-address-field textarea {
	min-height: 110px;
	resize: vertical;
}
/* Browser autofill (address/state are the fields Chrome/Safari most
   aggressively autofill) paints its own background that `background`
   can't override — repaint it white via the inset box-shadow trick so
   the Address and State fields keep matching the other fields. */
.sh-address-field input:-webkit-autofill,
.sh-address-field select:-webkit-autofill,
.sh-address-field textarea:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px #fff inset;
	box-shadow: 0 0 0 1000px #fff inset;
	-webkit-text-fill-color: var(--sh-ink);
}
.sh-select-wrap {
	position: relative;
}
.sh-select-wrap select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 40px;
	cursor: pointer;
}
.sh-select-wrap::after {
	content: '';
	position: absolute;
	right: 16px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--sh-sandal-brown);
	border-bottom: 2px solid var(--sh-sandal-brown);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}
@media (max-width: 600px) {
	.sh-address-form-grid {
		grid-template-columns: 1fr;
	}
}
.sh-address-form-actions {
	display: flex;
	align-items: center;
	gap: 20px;
}
.sh-address-cancel-link {
	color: var(--sh-sandal-brown);
	text-decoration: underline;
}
.sh-address-cancel-link:hover {
	color: var(--sh-antique-gold);
}

/* --- My Account > Addresses: delete-confirm modal --- */
.sh-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(34, 26, 22, 0.55);
}
/* [hidden] alone would lose this tie to the rule above (same specificity,
   but the base rule's own `display:flex` — needed so the overlay is
   flex-centered when shown — outranks the browser default `[hidden]{display:
   none}` by CSS origin, not specificity). Repeating it here at higher
   specificity is what actually hides the overlay. */
.sh-modal-overlay[hidden] {
	display: none;
}
.sh-modal {
	width: 100%;
	max-width: 420px;
	padding: 32px;
	background: #fff;
	border-radius: 6px;
	text-align: center;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.sh-modal-title {
	margin: 0 0 24px;
	color: var(--sh-ink);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
}
.sh-modal-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 24px;
}
.sh-modal-confirm {
	flex: 1 1 auto;
	min-width: 160px;
}
.sh-modal-cancel {
	background: none !important;
	border: none !important;
	padding: 0 !important;
	color: var(--sh-sandal-brown) !important;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-decoration: underline !important;
	cursor: pointer;
}
.sh-modal-cancel:hover {
	color: var(--sh-antique-gold) !important;
}

/* --- My Account > Wishlist: card-style list (thumbnail, name, price, a
   "Currently unavailable" note, delete icon), overriding the TI Wishlist
   plugin's default table markup — see woocommerce/ti-wishlist.php and
   woocommerce/ti-wishlist-empty.php. Reuses the same page-title/list/
   action-icon-delete visual language as Saved Cards/Addresses above
   (.sh-card-page-title etc.) for consistency across My Account sub-pages. */
.sh-wishlist-page-title {
	margin: 0 0 16px;
	font-size: 20px;
}
.sh-wishlist-list {
	display: flex;
	flex-direction: column;
}
.sh-wishlist-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 20px 0;
	border-bottom: 1px solid var(--sh-hairline);
}
.sh-wishlist-item:first-child {
	padding-top: 0;
}
.sh-wishlist-thumb {
	flex-shrink: 0;
	width: 84px;
	text-align: center;
}
.sh-wishlist-thumb img {
	width: 84px;
	height: 84px;
	object-fit: contain;
	border: 1px solid var(--sh-hairline);
	border-radius: 4px;
}
.sh-wishlist-unavailable {
	display: block;
	margin-top: 6px;
	color: #c0392b;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}
.sh-wishlist-info {
	flex: 1 1 auto;
	min-width: 0;
	padding-right: 32px;
}
.sh-wishlist-name {
	display: block;
	margin-bottom: 6px;
	color: var(--sh-ink);
	font-weight: 600;
	text-decoration: none;
}
.sh-wishlist-name:hover {
	color: var(--sh-antique-gold);
}
.sh-wishlist-info dl.variation {
	margin: 0 0 6px !important;
	font-size: 12px;
	color: var(--sh-sandal-brown);
}
.sh-wishlist-price {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 15px;
}
.sh-wishlist-price ins {
	color: var(--sh-ink);
	font-weight: 700;
	text-decoration: none;
}
.sh-wishlist-price del {
	color: #9a8b7d;
	font-weight: 400;
	font-size: 13px;
}
.sh-wishlist-price-off {
	color: var(--sh-success-green);
	font-size: 13px;
	font-weight: 600;
}
.sh-wishlist-price-na {
	color: var(--sh-sandal-brown);
	font-size: 13px;
}
.sh-wishlist-delete {
	position: absolute;
	top: 20px;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	color: var(--sh-sandal-brown);
	border-radius: 50%;
}
.sh-wishlist-delete svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
.sh-wishlist-delete:hover {
	background: rgba(93, 64, 55, 0.08) !important;
	color: #c0392b;
}
.sh-wishlist-pagination {
	margin-top: 20px;
}

/* --- Checkout > Delivery address: "Deliver to" card + saved-address panel --- */
.sh-checkout-address {
	margin-bottom: 24px;
}
.sh-deliver-to-card {
	padding: 20px;
	border: 1px solid var(--sh-hairline);
	border-radius: 4px;
	background: #fff;
}
.sh-deliver-to-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}
.sh-deliver-to-head h3 {
	margin: 0;
	font-size: 16px;
}
.sh-address-change-btn {
	background: none;
	border: none;
	padding: 0;
	color: var(--sh-antique-gold);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-decoration: underline;
	cursor: pointer;
}
.sh-address-change-btn:hover {
	color: var(--sh-deep-maroon);
}
.sh-deliver-to-body .sh-address-name-phone {
	margin: 10px 0 3px !important;
	display: flex;
	gap: 12px;
}
.sh-deliver-to-body .sh-address-lines {
	margin: 0 !important;
	color: var(--sh-sandal-brown);
	line-height: 1.6;
}

.sh-address-select-panel {
	margin-top: 16px;
	padding: 20px;
	border: 1px solid var(--sh-hairline);
	border-radius: 4px;
	background: #fff;
}
.sh-address-select-panel[hidden] {
	display: none;
}
.sh-address-select-panel--open {
	margin-top: 0;
}

.sh-address-option-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-bottom: 20px;
}
.sh-address-option {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 4px;
	border-bottom: 1px solid var(--sh-hairline);
	cursor: pointer;
}
.sh-address-option:first-child {
	padding-top: 0;
}
.sh-address-option-radio {
	margin-top: 4px;
	flex-shrink: 0;
	accent-color: var(--sh-antique-gold);
}
.sh-address-option-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.sh-address-option--add-new .sh-address-option-body {
	flex-direction: row;
	align-items: center;
	gap: 10px;
	color: var(--sh-sandal-brown);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.03em;
}
.sh-address-option.is-selected {
	background: rgba(200, 155, 60, 0.06);
}

.sh-address-new-form[hidden] {
	display: none;
}
.sh-address-form-errors {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-left: 4px solid #c0392b;
	background: rgba(192, 57, 43, 0.06);
	color: #c0392b;
	font-size: 13px;
}
.sh-address-form-errors[hidden] {
	display: none;
}
.sh-address-form-errors p {
	margin: 0;
}
.sh-address-form-errors p + p {
	margin-top: 4px;
}
.sh-checkbox-option {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--sh-ink);
}
/* Reset the "Save this address to my address book" checkbox back to a
   normal checkbox — it sits inside .sh-address-field (sh-address-new-form-fields.php),
   whose generic "input" rule above (width:100%, padding, border, background)
   is meant for the text fields in the address form grid but also matches
   this checkbox, blowing it up into a full-width bordered box and breaking
   the single-line, left-aligned checkbox + label row .sh-checkbox-option's
   own flex layout is meant to produce. Two selectors (class + attribute)
   outweigh .sh-address-field input's one, so no !important is needed. */
.sh-checkbox-option input[type="checkbox"] {
	width: auto;
	flex-shrink: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	accent-color: var(--sh-antique-gold);
}
.sh-address-save-row {
	margin-top: -4px;
}

/* --- Checkout > Payment methods: left border on the selected gateway
   ("Cash on Delivery" / "UPI, Cards, Netbanking" in the wc_payment_methods
   radio list). Kadence's own woocommerce.min.css (enqueued as its own
   handle, after this stylesheet — see the My Account nav-width override
   above for the same load-order note) already borders every option — gray
   (var(--global-gray-400), #CBD5E0, the stray blue-gray bar seen on
   unselected options) by default, swapping to var(--global-palette-highlight)
   on the checked one — but that highlight variable resolves to
   var(--global-palette1), which this site's Global Palette output never
   defines. The invalid var() reference makes the whole border-left
   declaration compute to `none`, so the selected option ends up with NO
   border (the opposite of the intended highlight) while the unselected
   ones keep their gray bar. Zero out the default gray border and
   re-declare the checked state with a concrete brand color instead;
   !important matches this file's existing convention for beating that
   later-loaded stylesheet. */
.wc_payment_methods li.wc_payment_method > label {
	border-left: 5px solid transparent !important;
}
.wc_payment_methods li.wc_payment_method input.input-radio:checked + label {
	border-left: 5px solid var(--sh-antique-gold) !important;
	background: rgba(200, 155, 60, 0.06) !important;
}
/* Cash on Delivery: put its description ("Pay with cash upon delivery",
   from the WC_Gateway_COD "description" setting) on the same line as the
   "Cash on Delivery" label instead of the block below it — the .payment_box
   div core wraps every gateway's description/fields in, styled by
   woocommerce.min.css as a full-width block (width:100%, padding:15px,
   margin:1em 0) via an #payment-id selector, which outranks any
   class-based override here regardless of load order, hence !important.
   Scoped to payment_method_cod specifically: other gateways (e.g. Razorpay)
   can render actual form fields in their .payment_box, which still need
   the normal block layout. */
.wc_payment_methods li.wc_payment_method.payment_method_cod {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	column-gap: 10px;
}
.wc_payment_methods li.wc_payment_method.payment_method_cod .payment_box {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	font-size: 13px;
	color: var(--sh-sandal-brown);
}
.wc_payment_methods li.wc_payment_method.payment_method_cod .payment_box p {
	margin: 0;
}

.sh-address-select-actions {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 20px;
}

/* --- My Account > Orders: list page (Filters sidebar + search + one card
   per purchased product — see functions.php "My Account > Orders" for why
   it's per-item rather than per-order). --- */
.sh-orders-page {
	display: flex;
	align-items: flex-start;
	gap: 32px;
}
.sh-orders-filters {
	flex: 0 0 220px;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--sh-hairline);
	border-radius: 4px;
}
.sh-orders-filters-title {
	margin: 0 0 16px;
	font-size: 18px;
}
.sh-orders-filter-group {
	margin-bottom: 22px;
}
.sh-orders-filter-group-title {
	margin: 0 0 12px;
	font-family: 'Poppins', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sh-heading-brown);
}
.sh-orders-filter-option {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	font-size: 14px;
	color: var(--sh-sandal-brown);
	cursor: pointer;
}
.sh-orders-filter-option input {
	accent-color: var(--sh-antique-gold);
}
.sh-orders-clear-filters {
	display: inline-block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--sh-sandal-brown);
	text-decoration: underline;
}
.sh-orders-clear-filters:hover {
	color: var(--sh-antique-gold);
}

.sh-orders-main {
	flex: 1;
	min-width: 0;
}
.sh-orders-search {
	display: flex;
	margin-bottom: 24px;
}
.sh-orders-search-input {
	flex: 1;
	min-width: 0;
	padding: 12px 16px;
	border: 1px solid #ddd;
	border-right: none;
	border-radius: 4px 0 0 4px;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	color: var(--sh-sandal-brown);
	background: #fff;
}
.sh-orders-search-input:focus {
	outline: none;
	border-color: var(--sh-antique-gold);
}
.sh-orders-search-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 20px;
	background: var(--sh-antique-gold);
	border: 1px solid var(--sh-antique-gold);
	border-radius: 0 4px 4px 0;
	color: var(--sh-deep-maroon);
	font-weight: 600;
	font-size: 13px;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}
.sh-orders-search-btn:hover {
	background: var(--sh-deep-maroon);
	border-color: var(--sh-deep-maroon);
	color: var(--sh-cream);
}

.sh-orders-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.sh-order-card {
	position: relative;
	display: flex;
	gap: 16px;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--sh-hairline);
	border-radius: 4px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sh-order-card:hover {
	border-color: var(--sh-antique-gold);
	box-shadow: 0 8px 24px rgba(90, 60, 40, 0.12);
}
.sh-order-card-hitarea {
	position: absolute;
	inset: 0;
	z-index: 1;
}
.sh-order-card-thumb {
	position: relative;
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	border: 1px solid var(--sh-hairline);
	border-radius: 4px;
	overflow: hidden;
}
.sh-order-card-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sh-order-card-body {
	position: relative;
	flex: 1;
	min-width: 0;
}
.sh-order-card-title {
	margin: 0 0 6px !important;
	overflow: hidden;
	color: var(--sh-ink);
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	font-size: 15px;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sh-order-card-more {
	margin: 0 0 6px !important;
	color: var(--sh-sandal-brown);
	font-size: 12px;
}
.sh-order-card-price {
	margin: 0 !important;
	color: var(--sh-ink);
	font-weight: 600;
	font-size: 14px;
}
.sh-order-card-status {
	position: relative;
	flex-shrink: 0;
	min-width: 190px;
	text-align: right;
}
.sh-order-card-status-label {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	margin: 0 !important;
	font-size: 13px;
	color: var(--sh-ink);
}
.sh-order-card-status-subtext {
	margin: 2px 0 0 !important;
	color: var(--sh-sandal-brown);
	font-size: 12px;
}
.sh-order-card-review {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 8px;
	color: var(--sh-antique-gold);
	font-weight: 600;
	font-size: 12px;
	text-decoration: none;
}
.sh-order-card-review:hover {
	color: var(--sh-deep-maroon);
}
.sh-order-card-review svg {
	flex-shrink: 0;
}

.sh-order-status-dot {
	display: inline-block;
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
}
.sh-order-status-dot--green {
	background: var(--sh-success-green);
}
.sh-order-status-dot--red {
	background: #c0392b;
}
.sh-order-status-dot--gold {
	background: var(--sh-antique-gold);
}

.sh-orders-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 48px 20px;
	text-align: center;
}
.sh-orders-empty-icon {
	margin-bottom: 24px;
}
.sh-orders-empty-title {
	margin: 0 0 8px;
	font-size: 20px;
}
.sh-orders-empty-text {
	margin: 0 0 24px !important;
	color: var(--sh-sandal-brown);
}
.sh-orders-empty-btn {
	display: inline-block;
}

@media (max-width: 700px) {
	.sh-orders-page {
		flex-direction: column;
	}
	.sh-orders-filters {
		width: 100%;
	}
	.sh-order-card {
		flex-wrap: wrap;
	}
	.sh-order-card-status {
		width: 100%;
		min-width: 0;
		margin-top: 8px;
		text-align: left;
	}
	.sh-order-card-status-label {
		justify-content: flex-start;
	}
}

/* --- My Account > Orders: order detail page (tracker + delivery/price
   panels + printable invoice link — see view-order.php). --- */
.sh-order-back-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 16px;
	color: var(--sh-sandal-brown);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-decoration: none;
}
.sh-order-back-link:hover {
	color: var(--sh-antique-gold);
}

.sh-order-detail {
	display: flex;
	align-items: flex-start;
	gap: 32px;
}
.sh-order-detail-main {
	flex: 1;
	min-width: 0;
	padding: 24px;
	background: #fff;
	border: 1px solid var(--sh-hairline);
	border-radius: 4px;
}
.sh-order-detail-aside {
	display: flex;
	flex: 0 0 320px;
	flex-direction: column;
	gap: 20px;
}

.sh-order-detail-header {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--sh-hairline);
}
.sh-order-detail-info {
	flex: 1;
	min-width: 0;
}
.sh-order-detail-title {
	margin: 0 0 4px;
	color: var(--sh-ink);
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 19px;
}
.sh-order-detail-variant {
	margin: 0 0 6px !important;
	color: var(--sh-sandal-brown);
	font-size: 13px;
	text-transform: capitalize;
}
.sh-order-detail-seller {
	margin: 0 0 10px !important;
	color: var(--sh-sandal-brown);
	font-size: 12px;
}
.sh-order-detail-price {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 !important;
	color: var(--sh-ink);
	font-weight: 700;
	font-size: 20px;
}
.sh-order-detail-qty {
	color: var(--sh-sandal-brown);
	font-weight: 400;
	font-size: 13px;
}
.sh-order-detail-thumb {
	flex-shrink: 0;
	width: 96px;
	height: 96px;
	border: 1px solid var(--sh-hairline);
	border-radius: 4px;
	overflow: hidden;
}
.sh-order-detail-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sh-order-tracker {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}
.sh-order-tracker-step {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding-bottom: 28px;
}
.sh-order-tracker-step:last-child {
	padding-bottom: 0;
}
.sh-order-tracker-step:not(:last-child)::before {
	content: '';
	position: absolute;
	top: 24px;
	bottom: 0;
	left: 11px;
	width: 2px;
	background: var(--sh-hairline);
}
.sh-order-tracker-step--done:not(:last-child)::before {
	background: var(--sh-success-green);
}
.sh-order-tracker-dot {
	position: relative;
	z-index: 1;
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: #fff;
	border: 2px solid var(--sh-hairline);
	border-radius: 50%;
	color: #fff;
}
.sh-order-tracker-step--done .sh-order-tracker-dot {
	background: var(--sh-success-green);
	border-color: var(--sh-success-green);
}
.sh-order-tracker-step--cancelled .sh-order-tracker-dot {
	background: #c0392b;
	border-color: #c0392b;
}
.sh-order-tracker-text strong {
	display: block;
	color: var(--sh-ink);
	font-weight: 600;
	font-size: 14px;
}
.sh-order-tracker-step--upcoming .sh-order-tracker-text strong {
	color: var(--sh-sandal-brown);
	font-weight: 500;
}
.sh-order-tracker-date {
	display: block;
	margin-top: 2px;
	color: var(--sh-sandal-brown);
	font-size: 12px;
}

.sh-order-updates {
	margin-bottom: 20px;
}
.sh-order-updates summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--sh-sandal-brown);
	font-weight: 600;
	font-size: 13px;
	list-style: none;
	cursor: pointer;
}
.sh-order-updates summary::-webkit-details-marker {
	display: none;
}
.sh-order-updates summary svg {
	transition: transform 0.2s ease;
}
.sh-order-updates[open] summary svg {
	transform: rotate(90deg);
}
.sh-order-updates-list {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}
.sh-order-updates-list li {
	padding: 10px 0;
	border-top: 1px solid var(--sh-hairline);
	color: var(--sh-sandal-brown);
	font-size: 13px;
}
.sh-order-updates-date {
	display: block;
	margin-bottom: 4px;
	color: var(--sh-heading-brown);
	font-size: 11px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
.sh-order-updates-list p {
	margin: 0 !important;
}

.sh-order-chat-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	margin-bottom: 24px;
	border: 1px solid var(--sh-hairline);
	border-radius: 4px;
	color: var(--sh-sandal-brown);
	font-weight: 600;
	font-size: 13px;
	text-decoration: none;
}
.sh-order-chat-btn:hover {
	border-color: var(--sh-antique-gold);
	color: var(--sh-antique-gold);
}

.sh-order-other-items {
	padding-top: 20px;
	border-top: 1px solid var(--sh-hairline);
}
.sh-order-other-items-title {
	margin: 0 0 14px;
	color: var(--sh-sandal-brown);
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.sh-order-other-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 0;
	border-top: 1px solid var(--sh-hairline);
}
.sh-order-other-item:first-child {
	padding-top: 0;
	border-top: none;
}
.sh-order-other-item-hitarea {
	position: absolute;
	inset: 0;
	z-index: 1;
}
.sh-order-other-item-thumb {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border: 1px solid var(--sh-hairline);
	border-radius: 4px;
	overflow: hidden;
}
.sh-order-other-item-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sh-order-other-item-title {
	margin: 0 0 4px !important;
	color: var(--sh-ink);
	font-size: 14px;
}
.sh-order-other-item-status {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 !important;
	color: var(--sh-sandal-brown);
	font-size: 12px;
}

.sh-order-panel {
	padding: 20px;
	background: #fff;
	border: 1px solid var(--sh-hairline);
	border-radius: 4px;
}
.sh-order-panel-title {
	margin: 0 0 16px;
	font-size: 15px;
}
.sh-order-address-block {
	display: flex;
	gap: 12px;
	margin-bottom: 16px;
}
.sh-order-address-block:last-child {
	margin-bottom: 0;
}
.sh-order-address-block svg {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--sh-sandal-brown);
}
.sh-order-address-block strong {
	display: block;
	margin-bottom: 2px;
	color: var(--sh-ink);
	font-size: 13px;
}
.sh-order-address-block p {
	margin: 0 !important;
	color: var(--sh-sandal-brown);
	font-size: 13px;
	line-height: 1.6;
}
.sh-order-address-block span {
	color: var(--sh-sandal-brown);
	font-size: 13px;
}

.sh-order-summary-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 0;
	color: var(--sh-sandal-brown);
	font-size: 13px;
}
.sh-order-summary-row:first-of-type {
	padding-top: 0;
}
.sh-order-summary-row span:last-child {
	color: var(--sh-ink);
	font-weight: 600;
}

.sh-order-price-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 0;
	color: var(--sh-sandal-brown);
	font-size: 13px;
}
.sh-order-price-row span:first-child {
	display: flex;
	align-items: center;
	gap: 4px;
}
.sh-order-price-strike {
	color: #9a8b7d;
	text-decoration: line-through;
}
.sh-order-price-discount {
	color: var(--sh-success-green);
}
.sh-order-price-row--total {
	margin-top: 6px;
	padding: 12px 0;
	border-top: 1px solid var(--sh-hairline);
	color: var(--sh-ink);
	font-weight: 700;
	font-size: 14px;
}
.sh-order-price-details summary {
	list-style: none;
	cursor: pointer;
}
.sh-order-price-details summary::-webkit-details-marker {
	display: none;
}
.sh-order-price-details summary svg {
	transition: transform 0.2s ease;
}
.sh-order-price-details[open] summary svg {
	transform: rotate(180deg);
}
.sh-order-price-sublist {
	margin: 0 0 4px;
	padding: 0;
	list-style: none;
}
.sh-order-price-sublist li {
	display: flex;
	justify-content: space-between;
	padding: 4px 0 4px 12px;
	color: var(--sh-sandal-brown);
	font-size: 12px;
}

.sh-order-paid-by {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-top: 16px;
	border-top: 1px solid var(--sh-hairline);
}
.sh-order-paid-by svg {
	flex-shrink: 0;
	color: var(--sh-sandal-brown);
}
.sh-order-paid-by-label {
	display: block;
	color: var(--sh-sandal-brown);
	font-size: 11px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
.sh-order-paid-by strong {
	display: block;
	color: var(--sh-ink);
	font-size: 13px;
}

.sh-order-invoice-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 16px;
}

@media (max-width: 820px) {
	.sh-order-detail {
		flex-direction: column;
	}
	.sh-order-detail-aside {
		width: 100%;
		flex: 1 1 auto;
	}
}
@media (max-width: 520px) {
	.sh-order-detail-header {
		flex-direction: column-reverse;
	}
	.sh-order-detail-thumb {
		width: 100%;
		height: 180px;
	}
}

/* --- Offers page: coupon cards ([sh_coupons] shortcode) — a ticket-style
   card (dashed border, punch-line above the code) per active coupon. --- */
.sh-coupon-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
	margin: 32px 0;
}
.sh-coupon-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px dashed var(--sh-antique-gold);
	border-radius: 8px;
	overflow: hidden;
}
.sh-coupon-card-badge {
	padding: 16px 20px;
	background: var(--sh-deep-maroon);
	color: var(--sh-antique-gold);
	font-family: 'Cinzel', 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 22px;
	letter-spacing: 0.03em;
	text-align: center;
}
.sh-coupon-card-body {
	flex: 1;
	padding: 16px 20px 0;
}
.sh-coupon-card-desc {
	margin: 0 0 10px !important;
	color: var(--sh-sandal-brown);
	font-size: 14px;
	line-height: 1.6;
}
.sh-coupon-card-terms {
	margin: 0 0 10px !important;
	color: var(--sh-heading-brown);
	font-size: 12px;
}
.sh-coupon-card-code-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 16px 16px;
	padding: 10px 14px;
	background: var(--sh-cream);
	border: 1px dashed var(--sh-hairline);
	border-radius: 4px;
}
.sh-coupon-card-code {
	color: var(--sh-ink);
	font-family: 'Poppins', monospace;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.08em;
}
.sh-coupon-card-copy {
	flex-shrink: 0;
	padding: 6px 12px;
	background: var(--sh-antique-gold);
	border: 1px solid var(--sh-antique-gold);
	border-radius: 4px;
	color: var(--sh-deep-maroon);
	font-weight: 600;
	font-size: 12px;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.sh-coupon-card-copy:hover {
	background: var(--sh-deep-maroon);
	border-color: var(--sh-deep-maroon);
	color: var(--sh-cream);
}
.sh-coupon-card-copy.is-copied {
	background: var(--sh-success-green);
	border-color: var(--sh-success-green);
	color: #fff;
}

/* --- Checkout > Thank You: payment-success card (woocommerce/checkout/thankyou.php). --- */
.sh-payment-success {
	max-width: 560px;
	margin: 40px auto;
	text-align: center;
}
.sh-payment-success-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: var(--sh-success-green);
	color: #fff;
	box-shadow: 0 0 0 8px rgba(46, 125, 50, 0.12);
}
.sh-payment-success-title {
	margin: 0 0 8px;
	font-size: 28px;
}
.sh-payment-success-subtext {
	margin: 0 0 28px;
	color: var(--sh-sandal-brown);
	font-size: 15px;
}
.sh-payment-success-card {
	background: #fff;
	border: 1px solid var(--sh-hairline);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(90, 60, 40, 0.08);
	text-align: left;
	overflow: hidden;
}
.sh-payment-success-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 24px;
	background: var(--sh-cream);
	border-bottom: 1px solid var(--sh-hairline);
}
.sh-payment-success-order-number {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: var(--sh-deep-maroon);
}
.sh-payment-success-status {
	flex-shrink: 0;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--sh-success-green);
	color: #fff;
	font-family: 'Poppins', sans-serif;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
/* Order Details | Billing Address, side by side in the same card. */
.sh-payment-success-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.sh-payment-success-col {
	padding: 20px 24px;
}
.sh-payment-success-col--address {
	border-left: 1px solid var(--sh-hairline);
}
.sh-payment-success-col-title {
	margin: 0 0 16px;
	font-family: 'Poppins', sans-serif;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--sh-heading-brown);
}
.sh-payment-success-address {
	font-style: normal;
	font-size: 14px;
	line-height: 1.6;
	color: var(--sh-ink);
}
.sh-payment-success-address-phone {
	margin: 8px 0 0;
	font-size: 14px;
	color: var(--sh-ink);
}
.sh-payment-success-details {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.sh-payment-success-detail {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.sh-payment-success-detail-label {
	font-family: 'Poppins', sans-serif;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--sh-heading-brown);
}
.sh-payment-success-detail-value {
	font-size: 14px;
	color: var(--sh-ink);
	word-break: break-word;
}
.sh-payment-success-detail-value--total {
	color: var(--sh-deep-maroon);
	font-size: 16px;
}
.sh-payment-success-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 24px;
	border-top: 1px solid var(--sh-hairline);
}
.sh-payment-success-card-footer p {
	margin: 0;
	font-size: 13px;
	color: var(--sh-sandal-brown);
}
.sh-payment-success-orders-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	padding: 10px 18px;
	background: var(--sh-antique-gold);
	border: 1px solid var(--sh-antique-gold);
	border-radius: 4px;
	color: var(--sh-deep-maroon) !important;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 13px;
	white-space: nowrap;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.sh-payment-success-orders-link:hover {
	background: var(--sh-deep-maroon);
	border-color: var(--sh-deep-maroon);
	color: var(--sh-cream) !important;
}
@media (max-width: 600px) {
	.sh-payment-success-columns {
		grid-template-columns: 1fr;
	}
	.sh-payment-success-col--address {
		border-left: none;
		border-top: 1px solid var(--sh-hairline);
	}
	.sh-payment-success-card-footer {
		flex-direction: column;
		align-items: flex-start;
	}
	.sh-payment-success-orders-link {
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   Business Dashboard ([sh_business_dashboard] shortcode, Business Dashboard
   page) — reuses the brand palette and the .sh-coupon-card visual language.
   ========================================================================== */
.sh-dashboard-shell {
	margin: 32px 0;
}
.sh-dashboard-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--sh-hairline);
	padding-bottom: 12px;
}
.sh-dashboard-nav a {
	padding: 8px 16px;
	border-radius: 4px;
	color: var(--sh-sandal-brown);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}
.sh-dashboard-nav a:hover {
	background: var(--sh-cream);
}
.sh-dashboard-nav a.is-active {
	background: var(--sh-deep-maroon);
	color: var(--sh-cream);
}

.sh-dashboard-stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 20px;
}
.sh-dashboard-stat-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--sh-hairline);
	border-radius: 8px;
}
.sh-dashboard-stat-label {
	color: var(--sh-heading-brown);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.sh-dashboard-stat-value {
	color: var(--sh-ink);
	font-family: 'Cinzel', 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 26px;
}

.sh-dashboard-form {
	max-width: 640px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.sh-dashboard-form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.sh-dashboard-form-row-inline {
	flex-direction: row;
	gap: 20px;
}
.sh-dashboard-form-row-inline > div {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.sh-dashboard-form-row label {
	color: var(--sh-heading-brown);
	font-weight: 600;
	font-size: 13px;
}
.sh-dashboard-form-row input,
.sh-dashboard-form-row select,
.sh-dashboard-form-row textarea {
	padding: 10px 12px;
	border: 1px solid var(--sh-hairline);
	border-radius: 4px;
	font-size: 14px;
	color: var(--sh-ink);
}
.sh-dashboard-submit {
	align-self: flex-start;
	padding: 10px 24px;
	background: var(--sh-deep-maroon);
	border: 1px solid var(--sh-deep-maroon);
	border-radius: 4px;
	color: var(--sh-cream);
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	transition: background 0.2s ease;
}
.sh-dashboard-submit:hover {
	background: var(--sh-sandal-brown);
	border-color: var(--sh-sandal-brown);
}
.sh-dashboard-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.sh-dashboard-table {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 24px;
}
.sh-dashboard-table-row {
	padding: 14px 18px;
	background: #fff;
	border: 1px solid var(--sh-hairline);
	border-radius: 6px;
}
.sh-dashboard-table-row summary {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	cursor: pointer;
	list-style: none;
	font-size: 14px;
	color: var(--sh-ink);
}
.sh-dashboard-table-row summary::-webkit-details-marker {
	display: none;
}
.sh-dashboard-order-number {
	font-weight: 700;
}
.sh-dashboard-order-status {
	margin-left: auto;
	padding: 3px 10px;
	background: var(--sh-cream);
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	color: var(--sh-deep-maroon);
}
.sh-dashboard-order-detail {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px dashed var(--sh-hairline);
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14px;
}
.sh-dashboard-order-detail ul {
	margin: 0;
	padding-left: 18px;
}
.sh-dashboard-status-form {
	display: flex;
	gap: 10px;
	align-items: center;
}
.sh-dashboard-status-select {
	padding: 6px 10px;
	border: 1px solid var(--sh-hairline);
	border-radius: 4px;
}
.sh-dashboard-status-form button,
.sh-dashboard-order-detail button {
	padding: 6px 14px;
	background: var(--sh-antique-gold);
	border: 1px solid var(--sh-antique-gold);
	border-radius: 4px;
	color: var(--sh-deep-maroon);
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
}

.sh-dashboard-pagination {
	display: flex;
	gap: 16px;
	margin-top: 16px;
}
.sh-dashboard-pagination a {
	color: var(--sh-sandal-brown);
	font-weight: 600;
	text-decoration: none;
}

.sh-dashboard-coupon-code {
	font-family: 'Poppins', monospace;
	font-weight: 700;
	letter-spacing: 0.05em;
	margin-right: 16px;
}
.sh-dashboard-coupon-discount {
	color: var(--sh-deep-maroon);
	font-weight: 600;
	margin-right: 16px;
}
.sh-dashboard-coupon-status {
	text-transform: capitalize;
	margin-right: 16px;
	color: var(--sh-heading-brown);
}

/* --- Contact Us page: two-column layout (info column + message-form card),
   per the approved contact-page mockup. Colors pull from the brand palette
   instead of the mockup's blue. --- */
.sh-contact-layout {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 56px;
	align-items: start;
}
@media all and (max-width: 767px) {
	.sh-contact-layout {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

.sh-contact-info-lead {
	color: var(--sh-sandal-brown);
	font-size: 16px;
	line-height: 1.7;
	margin: 0 0 28px;
}
.sh-contact-info-rows {
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.sh-contact-info-row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}
.sh-contact-info-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--sh-antique-gold);
	color: #fff;
}
.sh-contact-info-label {
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 12px;
	color: var(--sh-sandal-brown);
	margin-bottom: 2px;
}
.sh-contact-info-text {
	font-weight: 400;
	color: var(--sh-ink);
	line-height: 1.5;
}
.sh-contact-info-text a {
	color: var(--sh-ink);
	text-decoration: none;
}
.sh-contact-info-text a:hover {
	color: var(--sh-deep-maroon);
	text-decoration: underline;
}

.sh-contact-form-card {
	background: var(--sh-page-gutter);
	border-radius: 10px;
	padding: 32px 32px 16px;
}
.sh-contact-form-card h2 {
	margin: 0 0 20px;
	font-size: 22px;
	color: var(--sh-ink);
}

.sh-contact-form {
	position: relative;
}
/* Kadence's `.single-content form { margin-bottom: var(--global-md-spacing) }`
   (0,1,1 specificity) otherwise leaves a ~2rem gap below the form inside
   the card — .sh-contact-form-card .sh-contact-form (0,2,0) outranks it. */
.sh-contact-form-card .sh-contact-form {
	margin-bottom: 0;
}
.sh-contact-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
@media all and (max-width: 480px) {
	.sh-contact-form-row {
		grid-template-columns: 1fr;
	}
}
.sh-contact-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
/* Kadence's `.single-content p { margin-bottom: var(--global-md-spacing) }`
   (content.min.css, loaded after this stylesheet) is (0,1,1) specificity —
   it beats a bare `.sh-contact-field` class (0,1,0) regardless of source
   order, silently overriding the margin below, so these are scoped with
   the form ancestor ((0,2,0)) to actually win. */
.sh-contact-form .sh-contact-field {
	margin-bottom: 16px;
}
/* Full Name, Phone and Email: half the usual gap below (8px, not 16px) to
   the next field's label — Message keeps the default 16px before the
   submit button. */
.sh-contact-form .sh-contact-field--tight {
	margin-bottom: 8px;
}
.sh-contact-field label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	color: var(--sh-heading-brown);
	font-size: 14px;
}
.sh-contact-field .sh-required {
	color: var(--sh-error-red);
}
.sh-contact-field input,
.sh-contact-field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--sh-hairline);
	border-radius: 4px;
	font-family: inherit;
	font-size: 15px;
	color: var(--sh-ink);
	box-sizing: border-box;
}
/* Kadence's own input[type=...] base rule (same 0,1,1 specificity as
   `.sh-contact-field input`) sets the background, and can load after this
   stylesheet depending on enqueue order — so match its attribute-selector
   form to guarantee this wins regardless of order. */
.sh-contact-field input[type="text"],
.sh-contact-field input[type="tel"],
.sh-contact-field input[type="email"],
.sh-contact-field textarea {
	background: #fff;
}
.sh-contact-field textarea {
	resize: vertical;
}
/* Inline below-field errors, matching the Login page (see
   .sh-login-form-panel .sh-field-error) — shown/hidden by the validation
   script in sh_contact_form_shortcode(). */
.sh-contact-field .sh-field-error {
	display: none;
	margin-top: 6px;
	font-size: 13px;
	color: var(--sh-error-red);
}
.sh-contact-field .sh-field-error.is-visible {
	display: block;
}
.sh-contact-field input.sh-input-invalid,
.sh-contact-field textarea.sh-input-invalid {
	border-color: var(--sh-error-red);
}
.sh-contact-form button {
	background: var(--sh-antique-gold);
	color: var(--sh-deep-maroon);
	border: none;
	padding: 12px 28px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.2s ease;
}
.sh-contact-form button:hover { background: #b3872f; }
.sh-contact-form button:disabled { opacity: 0.6; cursor: default; }
.sh-contact-msg {
	display: block;
	margin-top: 10px;
	font-size: 14px;
	color: var(--sh-success-green);
}
.sh-contact-msg.is-error { color: var(--sh-error-red); }

/* --- Product reviews: "Be the first to review..." heading ---
   Parent theme's woocommerce.min.css sets `.woocommerce #reviews
   .comment-reply-title{font-size:24px}` and, despite this child stylesheet
   being enqueued as its dependent, actually loads AFTER it in the page
   (Kadence enqueues its own woocommerce.css separately, later). Matching
   the parent's selector exactly still loses on source order, so add one
   more specificity notch (the `body` element) to win regardless of order. */
body.woocommerce #reviews .comment-reply-title {
	font-size: 22px;
	white-space: nowrap;
}