/* ============================================================
		   PLEASUREWALA — MODERN DESIGN SYSTEM
		   Direction: dark editorial "boudoir" palette (deep plum/wine +
		   brass gold accent) — matches the brand's real promise (discreet,
		   premium, wrapped-gift privacy) rather than a generic dark-mode
		   neon theme. Bodoni Moda (high-contrast display serif, editorial/
		   glamour feel) for headings, Sora (clean geometric sans) for body.
		   Signature element: a soft gold "ribbon rule" gradient divider
		   under section headings, echoing the unwrap-a-gift motif.
		   ============================================================ */

		:root {
			--pw-bg: #12060F;
			--pw-bg-alt: #1C0A15;
			--pw-surface: #24101B;
			--pw-surface-hover: #2E1522;
			--pw-accent: #D6336C;
			--pw-accent-dim: #8C1F49;
			--pw-gold: #C9A24B;
			--pw-gold-soft: rgba(201,162,75,0.28);
			--pw-text: #F3E9E4;
			--pw-text-muted: #B79AA8;
			--pw-radius: 16px;
			--pw-font-display: 'Bodoni Moda', 'Playfair Display', Georgia, serif;
			--pw-font-body: 'Sora', 'Segoe UI', sans-serif;
		}

		img.img-fluid-1 { width:100%; height:auto; }
		.item1{padding-top:calc(100% / 3);}
		.item1 img {width:100%;height:auto;}
		@media (max-width:599px) {
			.item1{padding-top:calc(100% / 1);}
			.item1 img {width: 100%;height: auto;}
			.divImage{position: relative;width: 100%;padding-top: calc(100% / 0.85);}
			.divImage img{position: absolute;top: 0px;left: 0px;width: 100%;height: auto;}
		}
		section.secure .logos .pp img { height: 90px; width:auto; }
		@media screen and (max-width: 1199px) {
			section.secure .logos .pp img { height: 55px; width:auto; }
		}

		/* ---- Section eyebrow / heading treatment ---- */
		section.categories, section.top-products, section.why-shop,
		section.discreet, section.faqs, section.shop-by-city, section.blogs {
			background-color: var(--pw-bg);
			font-family: var(--pw-font-body);
			color: var(--pw-text);
		}
		section.categories .heading, section.top-products .heading,
		section.why-shop .heading, section.faqs .heading, section.shop-by-city .heading {
			padding-bottom: 0 !important;
			margin-bottom: 36px !important;
			text-align: center;
		}
		section.categories .heading b.bullet-heading, section.top-products .heading b.bullet-heading,
		section.why-shop .heading b.bullet-heading, section.faqs .heading b.bullet-heading,
		section.shop-by-city .heading b.bullet-heading {
			font-family: var(--pw-font-display);
			font-variation-settings: "opsz" 96;
			font-weight: 500;
			font-style: italic;
			font-size: 2rem;
			letter-spacing: 0.02em;
			color: var(--pw-text);
			display: inline-block;
			line-height: 1.3;
		}
		/* Divider now sits directly under the text in normal flow, not absolutely
		   positioned against the container - fixes the "floats in the gap between
		   rows" issue where it drifted toward the next section's content. */
		section.categories .heading::after, section.top-products .heading::after,
		section.why-shop .heading::after, section.faqs .heading::after,
		section.shop-by-city .heading::after {
			content: "";
			display: block;
			width: 120px;
			height: 2px;
			margin: 14px auto 0;
			background: linear-gradient(90deg, transparent, var(--pw-gold), transparent);
		}

		/* ---- Category tiles ---- */
		section.categories a[title] {
			border: 1px solid var(--pw-gold-soft) !important;
			border-radius: var(--pw-radius) !important;
			overflow: hidden;
			background: var(--pw-surface);
			transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease;
		}
		section.categories a[title]:hover {
			border-color: var(--pw-gold) !important;
			transform: translateY(-4px);
			box-shadow: 0 14px 30px -12px rgba(0,0,0,.6), 0 0 0 1px var(--pw-gold-soft);
		}
		section.categories a[title] img { transition: transform .5s ease; }
		section.categories a[title]:hover img { transform: scale(1.06); }

		/* ---- Product cards ----
		   Using auto-fill/minmax instead of a fixed column count: the grid
		   sizes itself to whatever the container's real width is, rather than
		   me guessing a column count (a flat "4 columns" made cards oversized
		   on wide screens because the container here is wider than a standard
		   Bootstrap container). Mobile still gets an explicit 2-column override
		   below, since that's the one breakpoint that needs a guarantee. */
		.top-products .all-top {
			display: grid !important;
			grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
			gap: 20px;
		}
		@media (max-width: 599px) {
			.top-products .all-top { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
		}
		.top-products .top {
			width: 100% !important;
			max-width: 100% !important;
			margin: 0 !important;
			box-sizing: border-box;
			background: var(--pw-surface);
			border: 1px solid var(--pw-gold-soft);
			border-radius: var(--pw-radius);
			padding: 14px 14px 18px;
			position: relative;
			transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
		}
		.top-products .top:hover {
			transform: translateY(-6px);
			border-color: var(--pw-gold);
			box-shadow: 0 18px 34px -16px rgba(0,0,0,.65);
		}
		.top-products .top .off strong {
			background: linear-gradient(120deg, var(--pw-gold), #E8C97A);
			color: #2A1400;
			font-family: var(--pw-font-body);
			font-weight: 700;
			font-size: .72rem;
			padding: 3px 10px;
			border-radius: 999px;
			display: inline-block;
			letter-spacing: .02em;
		}
		.top-products .top .h3 {
			font-family: var(--pw-font-body);
			font-weight: 500;
			font-size: .92rem;
			color: var(--pw-text);
			margin-top: 8px;
			min-height: 2.4em;
		}
		.top-products .top .h4 {
			font-family: var(--pw-font-body);
			font-weight: 700;
			color: var(--pw-accent);
			font-size: 1.05rem;
		}
		.top-products .top .h4 del {
			color: var(--pw-text-muted);
			font-weight: 400;
			margin-right: 6px;
		}
		.top-products .top .add-crttt {
			display: inline-block;
			width: 100%;
			text-align: center;
			margin-top: 10px;
			padding: 9px 0;
			border-radius: 999px;
			background: linear-gradient(120deg, var(--pw-accent-dim), var(--pw-accent));
			color: #fff !important;
			font-weight: 600;
			font-size: .85rem;
			letter-spacing: .02em;
			transition: transform .25s ease, box-shadow .25s ease;
		}
		.top-products .top .add-crttt:hover {
			transform: translateY(-2px);
			box-shadow: 0 10px 20px -8px rgba(214,51,108,.6);
		}

		/* ---- Why Shop cards ---- */
		section.why-shop { padding: 60px 0 !important; }
		section.why-shop p { color: var(--pw-text-muted); line-height: 1.7; }
		section.why-shop p strong { color: var(--pw-gold); font-weight: 600; }
		section.why-shop .col-md-4, section.why-shop .col-12 {
			position: relative;
		}
		section.why-shop h3.h5 {
			font-family: var(--pw-font-display);
			font-variation-settings: "opsz" 96;
			font-style: italic;
			font-weight: 600;
			font-size: 1.2rem;
			color: var(--pw-text);
			padding-left: 18px;
			position: relative;
			margin-bottom: 8px;
		}
		section.why-shop h3.h5::before {
			content: "";
			position: absolute;
			left: 0;
			top: 8px;
			width: 8px;
			height: 8px;
			background: var(--pw-gold);
			transform: rotate(45deg);
		}

		/* ---- FAQ accordion ---- */
		section.faqs .card {
			background: var(--pw-surface) !important;
			border: 1px solid var(--pw-gold-soft) !important;
			border-radius: 12px !important;
			overflow: hidden;
			transition: border-color .3s ease;
		}
		section.faqs .card:hover { border-color: var(--pw-gold) !important; }
		section.faqs .btn-link {
			font-family: var(--pw-font-body);
			font-weight: 500;
			color: var(--pw-text) !important;
			position: relative;
			padding: 16px 34px 16px 16px !important;
		}
		section.faqs .btn-link::after {
			content: "+";
			position: absolute;
			right: 16px;
			top: 50%;
			transform: translateY(-50%);
			font-family: var(--pw-font-display);
			font-size: 1.3rem;
			color: var(--pw-gold);
			transition: transform .3s ease;
		}
		section.faqs .btn-link[aria-expanded="true"]::after { transform: translateY(-50%) rotate(45deg); }
		section.faqs .btn-link[aria-expanded="true"] { color: var(--pw-accent) !important; }
		section.faqs .card-body { color: var(--pw-text-muted); line-height: 1.7; }

		/* ---- Shop by city ---- */
		section.shop-by-city p a {
			display: inline-block;
			border: 1px solid var(--pw-gold-soft);
			border-radius: 999px;
			padding: 7px 18px;
			margin: 4px !important;
			font-size: .85rem;
			transition: all .3s ease;
		}
		section.shop-by-city p a:hover {
			background: linear-gradient(120deg, var(--pw-accent-dim), var(--pw-accent));
			border-color: transparent;
			color: #fff !important;
			transform: translateY(-2px);
		}

		/* ---- Long-form content (discreet section) ---- */
		section.discreet { padding: 20px 0 60px; }
		section.discreet h1.title, section.discreet h2.title {
			font-family: var(--pw-font-display);
			font-variation-settings: "opsz" 96;
			font-style: italic;
			font-weight: 600;
			color: var(--pw-text);
		}
		section.discreet p, section.discreet li { color: var(--pw-text-muted); line-height: 1.75; }
		section.discreet li strong { color: var(--pw-gold); }
		section.discreet a.text-warning { color: var(--pw-accent) !important; text-decoration: underline; text-decoration-color: var(--pw-gold-soft); }

		/* ---- Blog cards ---- */
		section.blogs .outer {
			background: var(--pw-surface);
			border: 1px solid var(--pw-gold-soft);
			border-radius: var(--pw-radius);
			overflow: hidden;
			padding-bottom: 16px;
			transition: transform .3s ease, border-color .3s ease;
		}
		section.blogs .outer:hover { transform: translateY(-6px); border-color: var(--pw-gold); }
		section.blogs .outer .image img { transition: transform .5s ease; }
		section.blogs .outer:hover .image img { transform: scale(1.06); }
		section.blogs .outer h3 { padding: 0 16px; font-size: .95rem; margin-bottom: 8px; }
		section.blogs .outer h3 a { color: var(--pw-text) !important; font-family: var(--pw-font-body); font-weight: 500; }
		section.blogs .outer h3 a:hover { color: var(--pw-gold) !important; }
		/* Title clamps to 2 lines so cards with short/long titles still line up */
		section.blogs .outer h3 a {
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			min-height: 2.6em;
			line-height: 1.3;
		}
		/* Description clamps to exactly 3 lines with an ellipsis, so every card
		   takes up the same height regardless of how long blog_page_description is */
		section.blogs .outer .desc {
			padding: 0 16px;
			margin: 0;
			color: var(--pw-text-muted);
			font-size: .82rem;
			line-height: 1.6;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
			overflow: hidden;
			min-height: 4.8em;
		}
		section.blogs .actionBtn {
			display: block;
			width: max-content;
			margin: 24px auto 0;
			border: 1px solid var(--pw-gold);
			color: var(--pw-gold) !important;
			padding: 9px 26px;
			border-radius: 999px;
			transition: all .3s ease;
		}
		section.blogs .actionBtn:hover { background: var(--pw-gold); color: #1C0A15 !important; }

		/* ============================================================
		   CATEGORY / GRID PAGE ADDITIONS (grid-page.php)
		   This page reuses .top-products .top / .h3 / .h4 / .off / .add-crttt
		   from the product card rules above, so those inherit automatically.
		   These rules cover the pieces unique to this page.
		   ============================================================ */

		/* Page heading (category/subcategory name) - same serif treatment as
		   other section headings, but this page uses a bare <h1 class="title">
		   with no .heading wrapper, so it needs its own selector. */
		section.top-products h1.title {
			font-family: var(--pw-font-display);
			font-variation-settings: "opsz" 96;
			font-style: italic;
			font-weight: 600;
			color: var(--pw-text);
			font-size: 1.9rem;
			margin-bottom: 10px;
		}
		section.top-products h1.title::after {
			content: "";
			display: block;
			width: 120px;
			height: 2px;
			margin: 14px auto 22px;
			background: linear-gradient(90deg, transparent, var(--pw-gold), transparent);
		}
		section.top-products > p {
			text-align: center;
			color: var(--pw-text-muted);
			max-width: 720px;
			margin: 0 auto 30px;
			line-height: 1.7;
		}

		/* Sort By dropdown - default browser select looks broken on a dark
		   background, so give it the same surface/gold treatment as the rest
		   of the theme. */
		.top-products label {
			color: var(--pw-text-muted);
			font-family: var(--pw-font-body);
			font-size: .85rem;
		}
		.top-products select#sortby {
			background: var(--pw-surface);
			color: var(--pw-text);
			border: 1px solid var(--pw-gold-soft);
			border-radius: 8px;
			padding: 6px 12px;
			font-family: var(--pw-font-body);
			font-size: .85rem;
		}
		.top-products select#sortby:focus { outline: none; border-color: var(--pw-gold); }

		/* Product image full-bleed to the top corners of the card - this page's
		   markup sets padding:0 inline on .top (unlike the homepage cards) so the
		   image sits flush; overflow:hidden on the card clips it to match the
		   card's own rounded corners, and margin-top on .off gives breathing
		   room below the image now that the card has no built-in padding. */
		.top-products .top { overflow: hidden; }
		.top-products .top .image.divImage img { transition: transform .5s ease; }
		.top-products .top:hover .image.divImage img { transform: scale(1.06); }
		.top-products .top .off { margin-top: 12px; }

		/* Rating stars - recolor from the default pure yellow to the theme's
		   gold so they don't clash. !important needed because these SVGs carry
		   their own inline <style> block later in the document, which would
		   otherwise win on source order despite equal selector specificity. */
		.star-1 { fill: var(--pw-gold) !important; }

		/* Load More button */
		#load-more.custom-button {
			display: inline-block;
			border: 1px solid var(--pw-gold);
			color: var(--pw-gold) !important;
			background: transparent;
			padding: 10px 30px;
			border-radius: 999px;
			font-family: var(--pw-font-body);
			font-weight: 500;
			transition: all .3s ease;
		}
		#load-more.custom-button:hover {
			background: var(--pw-gold);
			color: #1C0A15 !important;
		}

		/* Long-form SEO content block below the product grid - same treatment
		   as the homepage's discreet section body copy. */
		.page_content { color: var(--pw-text-muted); line-height: 1.75; }
		.page_content h2, .page_content h3 {
			font-family: var(--pw-font-display);
			font-variation-settings: "opsz" 96;
			font-style: italic;
			font-weight: 600;
			color: var(--pw-text);
		}
		.page_content strong { color: var(--pw-gold); }
		.page_content a { color: var(--pw-accent); text-decoration: underline; text-decoration-color: var(--pw-gold-soft); }