/*
 * Theme Name:  Cascade Child
 * Theme URI:   https://codesupply.co/themes/cascade/
 * Description: Cascade Child Theme
 * Author:      Code Supply Co.
 * Author URI:  https://codesupply.co/
 * Template:    cascade
 * Version:     1.0.16
 */

/* Copy any classes from parent theme here. They will override the parent's version. */

/* Authors and publishers directories */
.diwan-authors-page, .diwan-publishers-page { padding: 48px 0 72px; }
.diwan-authors-header, .diwan-publishers-header { margin-bottom: 32px; }
.diwan-authors-header h1, .diwan-publishers-header h1 { margin-bottom: 20px; }
#diwan-author-search, #diwan-publisher-search { width: 100%; max-width: 620px; padding: 13px 16px; border: 1px solid var(--cs-color-border); border-radius: 3px; font-size: 16px; }
.diwan-authors-list, .diwan-publishers-list { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px 28px; }
.diwan-author-link, .diwan-publisher-link { display: block; padding: 5px 0; text-decoration: none; }
.diwan-author-link:hover, .diwan-publisher-link:hover { text-decoration: underline; }
@media (max-width: 1024px) { .diwan-authors-list, .diwan-publishers-list { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 767px) { .diwan-authors-list, .diwan-publishers-list { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 480px) { .diwan-authors-list, .diwan-publishers-list { grid-template-columns: 1fr; } }

/* Neutral fallback behind every Shopify product image.
   A real cover sits on top; if Shopify has no image, this remains visible.

   Commented out 2026-09-29: the client wants no background behind product
   images in the grid. The [data-missing-image] / .cs-shopify-image-missing
   rules further down still give a placeholder to products with no cover.
.woocommerce-thumbnail,
.single-product__main-image {
	background-color: #f1f1f1 !important;
	min-height: 350px;
}
*/


/* Product category links under the image. */
.single-product__categories a,
.single-product__categories a:visited {
	color: var(--cs-color-secondary);
	text-decoration: none;
}
.single-product__categories a:hover,
.single-product__categories a:focus {
	color: var(--diwan-link, var(--cs-color-primary));
	text-decoration: none;
}
.single-product__author-line a,
.single-product__author-line a:visited,
.single-product__author a,
.single-product__author a:visited,
.single-product__publisher a,
.single-product__publisher a:visited {
	color: var(--cs-color-secondary);
	text-decoration: none;
}
.single-product__author-line a:hover,
.single-product__author-line a:focus,
.single-product__author a:hover,
.single-product__author a:focus,
.single-product__publisher a:hover,
.single-product__publisher a:focus {
	color: var(--diwan-link, var(--cs-color-primary));
	text-decoration: none;
}

/* some space on dark mode/light mode toggle */
.cs-site-scheme-toggle {
	margin-right: 20px;
}

/* ── Sticky header ───────────────────────────────────────────────────────────
   The theme's "smart sticky" is broken on this site. Scrolling down pins
   .cs-header at a negative offset roughly equal to its own height, leaving a
   few pixels on screen, and the .cs-header-smart-visible class that is meant
   to bring it back on scroll up is never applied. Measured by scrolling in
   100px steps both ways: 4px of a 76px header visible, in both directions.
   The header effectively disappears.

   Pinning `top` overrides that offset. The theme's script computes it at
   runtime from CSS variables, so a plain rule loses to the computed value —
   !important here is deliberate, not a shortcut. The header ends up always
   visible rather than smart-hiding, which is what was asked for and what the
   header search needs to be useful. */
.cs-header {
	top: 0 !important;
}
/* The admin bar is fixed to the top for logged-in users on wide screens. */
body.admin-bar .cs-header {
	top: 32px !important;
}
/* The fixed admin bar is taller on narrow tablets. */
@media screen and (min-width: 601px) and (max-width: 782px) {
	body.admin-bar .cs-header {
		top: 46px !important;
	}
}
/* On phones the admin bar scrolls away, so the header pins to the top. */
@media screen and (max-width: 600px) {
	body.admin-bar .cs-header {
		top: 0 !important;
	}
}

/* Two-row storefront header. Its natural height replaces Cascade's spacer. */
.cs-header-before.diwan-header-before {
	display: none;
}
.cs-header-before.diwan-header-before + .cs-header.diwan-header {
	margin-top: 0;
	margin-bottom: 0;
}
header.cs-header.diwan-header .cs-header__inner.diwan-header__top {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr) auto;
	grid-template-areas: "brand search actions";
	align-items: center;
	gap: 24px;
	min-height: 88px;
	padding: 8px 0 0;
	border-bottom: 0;
	margin-bottom: 0;
}
.diwan-header__brand {
	grid-area: brand;
	min-width: 0;
}
.cs-header.diwan-header .cs-logo {
	margin: 0;
}
.cs-header.diwan-header .cs-header__logo img {
	width: 280px;
	max-width: 100%;
	height: auto;
	max-height: none;
}
.diwan-header__actions {
	grid-area: actions;
	display: flex;
	align-items: center;
	gap: 20px;
}
.cs-header.diwan-header .diwan-header__menu-toggle,
.cs-header.diwan-header .diwan-header__scheme,
.cs-header.diwan-header .cs-header__cart {
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	color: var(--cs-color-primary);
	font: inherit;
	min-height: 44px;
	cursor: pointer;
}
/* Placeholder languages: the upcoming versions are intentionally not links. */
.diwan-header__language {
	position: relative;
	flex-shrink: 0;
	color: var(--cs-color-primary);
	font-size: var(--cs-font-primary-size);
	font-weight: var(--cs-font-primary-weight);
}
.cs-header.diwan-header .diwan-header__language > summary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
	padding: 0;
	list-style: none;
	cursor: pointer;
}
.diwan-header__language > summary::-webkit-details-marker {
	display: none;
}
.diwan-header__language-icon {
	display: none;
}
.cs-header.diwan-header .diwan-header__language > summary {
	transition: color 0.25s;
}
.cs-header.diwan-header .diwan-header__language > summary:hover {
	color: var(--cs-color-secondary);
}
.cs-header.diwan-header .diwan-header__language-options {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 100;
	width: 180px;
	max-width: calc(100vw - 32px);
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--cs-color-border);
	border-radius: var(--cs-layout-elements-border-radius);
	background: var(--cs-color-submenu-background, var(--cs-site-background));
	color: var(--cs-color-primary);
	font-family: var(--cs-font-submenu-family), sans-serif;
	font-size: var(--cs-font-submenu-size);
	font-weight: 400;
	font-style: var(--cs-font-submenu-style);
	letter-spacing: var(--cs-font-submenu-letter-spacing);
	text-transform: var(--cs-font-submenu-text-transform);
	line-height: 1.5;
	text-align: left;
}
.diwan-header__language-options > li {
	margin: 0;
	padding: 0 0.6125rem;
	cursor: default;
}
.diwan-header__language-options > li > strong,
.diwan-header__language-options > li > span {
	display: block;
	padding: 9px;
	transition: color 0.25s;
}
.diwan-header__language-options > li:not(:first-child) > span {
	border-top: 1px solid var(--cs-color-border);
}
.diwan-header__language-options > li:hover {
	color: var(--cs-color-secondary);
}
.diwan-header__language-options > li[dir="rtl"] {
	text-align: right;
}
.cs-header.diwan-header .diwan-header__menu-toggle,
.cs-header.diwan-header .diwan-header__scheme-icon {
	display: none;
}
.cs-header.diwan-header .diwan-header__nav {
	display: flex;
	align-items: stretch;
	justify-content: center;
	height: 72px;
	border-bottom: var(--cs-header-border-width) solid var(--cs-color-divider);
}
.cs-header.diwan-header .cs-header__nav:not(.cs-header__nav-secondary) {
	margin-left: 0;
}
.cs-header.diwan-header .cs-header__nav-secondary::before {
	top: calc(50% - 12px);
}
.cs-header.diwan-header .cs-header__nav-inner > li {
	height: 100%;
}
.cs-header.diwan-header .cs-header__nav-inner > li > a,
.cs-header.diwan-header .diwan-mega__trigger {
	padding-bottom: 24px;
	font-size: calc(var(--cs-font-menu-size, 0.75rem) + 2px);
	line-height: 1.4;
}
.diwan-header__nav .cs-header__nav-inner .sub-menu > li:is(.current-menu-item, .current-menu-parent, .current-menu-ancestor) > a > span:not(.expanded) {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}
.cs-header.diwan-header :is(button, a, input, summary):focus-visible {
	outline: 2px solid var(--cs-color-primary);
	outline-offset: -2px;
}
@media (min-width: 1336px) {
	.cs-header.diwan-header > .cs-container {
		position: relative;
		display: grid;
		grid-template-columns: 280px minmax(0, 1fr) auto;
		/* Flexible outer rows center search and navigation beside the logo. */
		grid-template-areas: "brand . ." "brand search actions" "brand nav nav" "brand . .";
		grid-template-rows: 1fr auto auto 1fr;
		column-gap: 24px;
		align-items: center;
		padding-top: 8px;
		padding-bottom: 20px;
		border-bottom: var(--cs-header-border-width) solid var(--cs-color-divider);
	}
	header.cs-header.diwan-header .cs-header__inner.diwan-header__top {
		display: contents;
	}
	.cs-header.diwan-header .diwan-header__nav {
		grid-area: nav;
		position: static;
		justify-content: flex-start;
		height: 40px;
		margin-top: 20px;
		border-bottom: 0;
	}
	.cs-header.diwan-header .cs-header__nav-inner > li > a,
	.cs-header.diwan-header .diwan-mega__trigger {
		padding-bottom: 0;
	}
	.cs-header.diwan-header .cs-header__nav-secondary::before {
		top: 50%;
	}
	.cs-header.diwan-header .diwan-mega__trigger {
		position: relative;
	}
	/* Keep a hover path across the extra space above the dropdown panel. */
	.cs-header.diwan-header .diwan-mega__disclosure[open] > .diwan-mega__trigger::after {
		content: '';
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		height: 40px;
	}
}
@media (max-width: 991px) {
	.cs-header.diwan-header > .cs-container {
		padding-right: 16px;
		padding-left: 16px;
	}
	header.cs-header.diwan-header .cs-header__inner.diwan-header__top {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		grid-template-areas: "menu brand actions" "search search search";
		gap: 12px;
		min-height: 0;
		padding: 12px 0;
	}
	.diwan-header__brand {
		justify-self: center;
	}
	.cs-header.diwan-header .cs-header__logo img {
		width: 112px;
	}
	.cs-header.diwan-header .diwan-header__menu-toggle {
		grid-area: menu;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		justify-self: start;
	}
	.diwan-header__actions {
		justify-self: end;
		gap: 4px;
	}
	.cs-header.diwan-header .diwan-header__scheme .cs-site__scheme-toggle-title,
	.cs-header.diwan-header .diwan-header__scheme .cs-site__scheme-toggle-element,
	.cs-header.diwan-header .cs-header__cart-label,
	.cs-header.diwan-header .cs-header__my-account,
	.cs-header.diwan-header .diwan-header__nav {
		display: none;
	}
	.cs-header.diwan-header .diwan-header__scheme,
	.cs-header.diwan-header .diwan-header__language > summary {
		justify-content: center;
		width: 32px;
	}
	.diwan-header__language-label,
	.diwan-header__language-arrow {
		display: none;
	}
	.diwan-header__language-icon {
		display: block;
	}
	.cs-header.diwan-header .diwan-header__scheme-icon {
		display: block;
		font-size: 1.25rem;
	}
	.cs-header.diwan-header .cs-header__cart .cs-icon-cart {
		font-size: 1.25rem;
	}
}
@media (max-width: 360px) {
	header.cs-header.diwan-header .cs-header__inner.diwan-header__top {
		grid-template-columns: 40px minmax(0, 1fr) auto;
		column-gap: 8px;
	}
	.cs-header.diwan-header .cs-header__logo img {
		width: 96px;
	}
}

/* ── Header product search ───────────────────────────────────────────────────
   A plain GET form that navigates to /collections/all-products/?search=…
   Rendered once into the shared responsive header. */
/* The form owns the height and both children fill it, so the input and the
   button can never disagree. Without this the theme's own input padding
   (16px 20px) made the field 60px tall while the button stayed at 26px and
   floated in the middle of it.

   Selectors are deliberately deep (.cs-header .cs-header__product-search …)
   to outrank the theme's generic input and button rules without !important. */
.cs-header .cs-header__product-search {
	display: flex;
	align-items: stretch;
	grid-area: search;
	min-width: 0;
	height: 48px;
	margin: 0;
	/* Containing block for the focus tip below. */
	position: relative;
}
.cs-header .cs-header__product-search .diwan-search-clear-wrap {
	flex: 1;
	min-width: 0;
}
.cs-header .cs-header__product-search .cs-header__product-search-input {
	height: 100%;
	width: 100%;
	padding: 0;
	padding-inline: 0.75rem 2.25rem;
	margin: 0;
	border: 1px solid var(--cs-color-border, #ccc);
	border-inline-end: 0;
	border-radius: 0;
	border-start-start-radius: 5px;
	border-end-start-radius: 5px;
	background: transparent;
	color: inherit;
	font-size: 1rem;
	line-height: normal;
	box-sizing: border-box;
}
.cs-header.diwan-header .diwan-search-clear {
	color: inherit;
	right: auto;
	inset-inline-end: 0.55rem;
}

.cs-header .cs-header__product-search .cs-header__product-search-submit {
	height: 100%;
	/* Square, and never squeezed by the input beside it. */
	flex: 0 0 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	border-start-end-radius: 5px;
	border-end-end-radius: 5px;
	cursor: pointer;
	line-height: 1;
}
@media (max-width: 991px) {
	.cs-header .cs-header__product-search {
		height: 44px;
	}
	.cs-header .cs-header__product-search .cs-header__product-search-submit {
		flex-basis: 44px;
	}
	.cs-header .cs-header__product-search .cs-header__product-search-input {
		font-size: 1rem;
	}
}

/* The focus hint describes the additional searchable fields. Visibility keeps
   the aria-describedby content available, and its width fits phone screens. */
.cs-header .cs-header__product-search .cs-header__product-search-hint {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 100;
	width: max-content;
	max-width: min(320px, calc(100vw - 2rem));
	margin: 0;
	padding: 0.5rem 0.7rem;
	border: 1px solid var(--cs-color-border, #ccc);
	border-radius: 4px;
	background: var(--cs-layout-background, #fff);
	color: inherit;
	font-size: 1rem;
	line-height: 1.45;
	text-align: left;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease, visibility 0.15s ease;
}
/* :focus-within on the form, not :focus on the input, so tabbing onward to the
   submit button keeps the tip up instead of flashing it away mid-interaction. */
.cs-header .cs-header__product-search:focus-within .cs-header__product-search-hint {
	opacity: 1;
	visibility: visible;
}

/* Collection and homepage Latest Arrivals headings: 20% below theme sizes. */
.woocommerce-area .woocommerce-products-header__title {
	font-size: 3rem;
}
.home #cs-featured-products-90b00ea .cs-featured-products__heading {
	font-size: 2.25rem;
}

/* Shopify product card: centered listing text and larger titles. */
.cs-featured-products-woocommerce ul.products li.product .woocommerce-loop-product__link > :is(.woocommerce-loop-product__title, .cs-card-authors, .price) {
	text-align: center;
}
.cs-featured-products-woocommerce ul.products li.product .woocommerce-loop-product__link > .woocommerce-loop-product__title {
	font-size: 1.125rem;
}
.cs-featured-products-woocommerce ul.products li.product .woocommerce-loop-product__link > .price {
	display: flex;
	font-size: max(1rem, var(--cs-font-primary-size, 1rem));
	justify-content: center;
}
.woocommerce-loop-product__title:has(+ .cs-card-authors shopify-data:not(:empty)) {
	margin-bottom: 0;
}
.cs-card-authors {
	margin-top: 0.25rem;
	font-size: 1rem;
	color: var(--cs-color-secondary);
}
.cs-card-authors:not(:has(shopify-data:not(:empty))),
.cs-card-author-separator {
	display: none;
}
.cs-card-authors:has(.cs-card-author-primary:not(:empty)):has(.cs-card-author-secondary:not(:empty)) .cs-card-author-separator {
	display: inline;
}

.cs-featured-products-woocommerce .woocommerce-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Shopify product card: gap between sale price and crossed-out compare-at price.
   Scoped to the loop's .price wrapper so the PDP (which uses .single-product__price
   with flex+gap) is unaffected. */
.price .single-product__compare-price {
	margin-left: 6px;
}

/* no fix color, handle light/dark mode */
.single-product__details{
	background: transparent;
}
@media (max-width: 799.98px) {
	.single-product-layout .single-product__details {
		padding: 0;
	}
}

/* Product detail page: buy button disabled */

button.single-product__buy-button:disabled,button.single-product__buy-button:disabled[disabled] {
	color: var(--cs-dark-button-background);
}

/* Product detail page: SKU label (shown above description) */
.single-product__sku {
	color: var(--cs-color-secondary);
	font-size: 1rem;
	margin-top: 16px;
	margin-bottom: 8px;
}

/* Product detail page: out-of-stock notice (shown below SKU) */
.single-product__unavailable {
	color: var(--diwan-red, var(--cs-color-primary));
	font-size: 1rem;
	margin-bottom: 8px;
}

/* Product detail page: metadata under image (author + categories) */
.single-product__meta-under-image {
	width: 100%;
	margin-top: 20px;
}
.single-product__author-line {
	font-weight: 600;
	margin-bottom: 4px;
}
.single-product__categories {
	color: var(--cs-color-secondary);
	font-size: 1rem;
}
.single-product__publisher,
.single-product__pages {
	color: var(--cs-color-secondary);
	font-size: 1rem;
	margin-top: 0.2rem;
}

/* Product detail page: author line below title (right column) */
.single-product__author {
	color: var(--cs-color-secondary);
	font-size: 1em;
	margin-top: 4px;
	margin-bottom: 8px;
}
/* Both author wrappers are now plain divs holding the metafield contexts, so
   they exist even for a product with no author at all — previously the div
   itself lived inside the context template and vanished with it. Hide them
   when Shopify rendered nothing, or an author-less product leaves an empty
   div with margins. A <shopify-data> still inside a <template> is inert and
   correctly does not match :has(). */
.single-product__author-line:not(:has(shopify-data)),
.single-product__author:not(:has(shopify-data)) {
	display: none;
}

/* Hide variant selector when it renders no options (single-variant products) */
shopify-variant-selector:empty {
	display: none;
}

/* Uniform image sizes — collection page + Elementor widget */
.woocommerce-area .woocommerce-thumbnail,
.cs-featured-products-woocommerce .woocommerce-thumbnail {
	/* Exposed as a variable so .cs-quickview can centre itself on the image
	   without duplicating the magic number. Change it here only. */
	height: var(--cs-thumb-height, 350px);
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
}
/* Shopify image placeholder, all frontend product views.
   Put the placeholder on the stable wrapper, not <shopify-media>: the web
   component can render its image inside shadow DOM, so :has(img) is unreliable.

   Commented out 2026-09-29 — see the note on the first placeholder rule.
.woocommerce-area .woocommerce-thumbnail,
.cs-featured-products-woocommerce .woocommerce-thumbnail,
.single-product__main-image {
	background: #f1f1f1;
}
*/
.woocommerce-area .woocommerce-thumbnail shopify-media,
.cs-featured-products-woocommerce .woocommerce-thumbnail shopify-media {
	height: 100%;
	width: 100%;
	display: block;
}
.woocommerce-area .woocommerce-thumbnail shopify-media img,
.cs-featured-products-woocommerce .woocommerce-thumbnail shopify-media img {
	object-fit: contain !important;
	/* Keep each cover's own proportions, but sit it on the bottom edge of the
	   350px box so a row of different-height books shares one baseline,
	   like a bookshop shelf. The <img> itself fills the box; object-position
	   is what moves the drawn cover inside it — flex alignment on the wrapper
	   would do nothing. */
	object-position: center bottom !important;
	width: 100% !important;
	height: 100% !important;
	/* The cream (light) / gray (dark) the client saw was this background
	   filling the empty space beside the cover.
	   Was: background: var(--cs-layout-background, #fff) !important;
	   Must stay the !important SHORTHAND: <shopify-media> puts a blurred
	   24px preview of the cover in the img's inline background-image, and
	   only a shorthand that outranks the inline style clears it too. */
	background: transparent !important;
}

/* The theme's inline Customizer CSS paints the thumbnail wrapper #999 with
   !important. Replace it with the palette's book-cover background.

   Selector specificity is (0,5,2) to beat the theme's (0,4,2). The :not()s
   leave products flagged as missing a cover to the placeholder rules below. */
.woocommerce-area ul.products li.product.type-product .woocommerce-thumbnail:not([data-missing-image]):not(.cs-shopify-image-missing),
.cs-featured-products-woocommerce ul.products li.product.type-product .woocommerce-thumbnail:not([data-missing-image]):not(.cs-shopify-image-missing) {
	background: var(--cs-layout-background) !important;
}

/* PDP uses the same neutral placeholder behind Shopify media. */
.single-product__main-image shopify-media {
	display: block;
	width: 100%;
	min-height: var(--cs-thumb-height, 350px);
}
.single-product__main-image shopify-media img {
	background: var(--cs-layout-background, #fff) !important;
}

/* Missing Shopify image: Shopify itself marks the wrapper from product data. */
.woocommerce-thumbnail[data-missing-image],
.single-product__main-image[data-missing-image] {
	background: var(--cs-layout-background) !important;
	min-height: var(--cs-thumb-height, 350px);
}
.woocommerce-thumbnail[data-missing-image] shopify-media,
.single-product__main-image[data-missing-image] shopify-media {
	min-height: inherit;
}

/* Legacy fallback detector kept as a secondary safety net. */
.woocommerce-thumbnail.cs-shopify-image-missing,
.single-product__main-image.cs-shopify-image-missing {
	background: var(--cs-layout-background);
	min-height: var(--cs-thumb-height, 350px);
}
.woocommerce-thumbnail.cs-shopify-image-missing::after,
.single-product__main-image.cs-shopify-image-missing::after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	min-height: inherit;
}

/* Remove underline from product title and description */
.woocommerce-area .woocommerce-loop-product__link,
.cs-featured-products-woocommerce .woocommerce-loop-product__link {
	text-decoration: none;
	color: inherit;
}

/* Remove list indentation from book grids at every screen width. */
.woocommerce-area .woocommerce ul.products,
.home .cs-featured-products-woocommerce ul.products {
	padding: 0;
}
.home .cs-featured-products-woocommerce .woocommerce-thumbnail {
	margin-inline: auto;
}

/* Homepage and Explore: two books per row on phones with enough room. */
@media screen and (max-width: 599px) {
	.home .cs-featured-products-woocommerce ul.products[class*="columns-"],
	.woocommerce-area .woocommerce ul.products[class*="columns-"] {
		--cs-products-grid-columns: 1;
		grid-template-columns: minmax(0, 1fr);
	}
}
@media screen and (min-width: 360px) and (max-width: 767px) {
	.home .cs-featured-products-woocommerce ul.products[class*="columns-"],
	.woocommerce-area .woocommerce ul.products[class*="columns-"] {
		--cs-products-grid-columns: 2;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 1rem;
	}
}
@media screen and (min-width: 600px) and (max-width: 899px) {
	.woocommerce-area .woocommerce ul.products { --cs-products-grid-columns: 2; }
}
@media screen and (min-width: 900px) {
	.woocommerce-area .woocommerce ul.products { --cs-products-grid-columns: 4; }
}

/* Prevent Cascade's minicart body lock — Shopify cart handles its own dialog */
body.cs-shop-minicart-active {
	overflow: auto;
}

/* ── "All Products" collection: sidebar and results ─────────────────────── */

.collection-search-layout {
	margin-top: 1.5rem;
}
.collection-search-layout .product-search-controls {
	display: contents;
}
.collection-search-layout .product-search-empty {
	min-height: 10rem;
}
.collection-search-layout .collection-tools-panel {
	min-width: 0;
	margin-bottom: 24px;
	padding: 0;
	border: 0;
}
.collection-search-layout .collection-tools-mobile-toggle {
	display: none;
}
@media (max-width: 599px) {
	.collection-search-layout .collection-tools-mobile-toggle {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		margin-bottom: 16px;
		padding: 12px 16px;
		border: 0;
		border-radius: 4px;
		background: var(--cs-color-button);
		color: var(--cs-color-button-contrast);
		font: inherit;
		text-align: start;
		cursor: pointer;
	}
	.collection-tools-mobile-toggle > span:first-child {
		flex-shrink: 0;
		font-weight: 600;
	}
	.collection-tools-mobile-toggle .collection-tools-current-search {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.collection-tools-mobile-toggle > svg {
		flex-shrink: 0;
		margin-inline-start: auto;
	}
	.collection-tools-mobile-toggle[aria-expanded="true"] > svg {
		transform: rotate(180deg);
	}
	.collection-search-layout:not(.is-mobile-tools-open) .collection-tools-panel {
		display: none;
	}
}
@media (min-width: 992px) {
	.collection-search-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
		gap: 0 24px;
		align-items: start;
	}
	.collection-search-layout .collection-tools-panel {
		grid-column: 1;
		grid-row: 1;
		margin-bottom: 0;
	}
	.collection-search-layout :is(.collection-search-results, .product-search-empty) {
		grid-column: 2;
		grid-row: 1;
		min-width: 0;
	}
	.collection-search-layout .collection-tools-panel.collection-search-follow-ready {
		align-self: stretch;
		display: flex;
	}
	.collection-search-follow-ready .product-search-sidebar {
		flex: 1;
		min-width: 0;
	}
	.collection-search-follow-ready [data-dwfl]:not([hidden]) {
		display: contents;
	}
	.collection-search-follow__content {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		padding-bottom: 12px;
		background: var(--cs-layout-background, #fff);
	}
	.collection-search-follow__content .dwfl__active {
		margin: 0;
	}
	.collection-search-follow.is-following {
		position: sticky;
		top: var(--collection-search-follow-top, 16px);
		z-index: 4;
		background: var(--cs-layout-background, #fff);
	}
	.collection-search-follow.is-pinned::before {
		content: '';
		position: absolute;
		inset-inline: 0;
		bottom: 100%;
		height: 16px;
		background: var(--cs-layout-background, #fff);
	}
	.collection-search-follow.is-pinned .collection-search-follow__content {
		transform: translateY(var(--collection-search-follow-lag, 0px));
		transition: transform 220ms ease-out;
	}
	.collection-search-follow.is-pinned .collection-search-follow__content:focus-within {
		transform: none;
	}
	.collection-search-filter-options {
		display: flex;
		flex-direction: column;
		margin-bottom: -8px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.collection-search-follow.is-pinned .collection-search-follow__content {
		transform: none;
		transition: none;
	}
}

/* Sidebar filter panel */
.product-search-sidebar {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.product-search-sidebar label {
	font-weight: 600;
	margin-bottom: -0.5rem;
}
.product-search-sidebar input[type="search"],
.product-search-sidebar input[type="number"] {
	width: 100%;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--cs-color-border);
	border-radius: 4px;
	font-size: 1rem;
}
/* Hint line under the search field. The sidebar is a flex column with a 1rem
   gap, so pull the hint back up against the input it describes — the same
   negative-margin technique the labels above use. */
.product-search-sidebar .product-search-hint {
	margin: -0.5rem 0 0;
	font-size: 1rem;
	line-height: 1.4;
	opacity: 0.75;
}
.product-search-sidebar .price-range-row {
	display: flex;
	gap: 0.75rem;
}
.product-search-sidebar .price-range-row input {
	flex: 1;
	min-width: 0;
}

/* Lazy loading — replaces the previous/next pager */
.product-search-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	margin-top: 2rem;
	padding: 1rem 0;
}
/* A tripwire, not content: it only has to intersect the viewport. */
.product-search-sentinel {
	width: 100%;
	height: 1px;
}
.product-search-count {
	margin: 0;
	font-size: 1rem;
	color: var(--cs-color-secondary);
}
.product-search-load-more {
	padding: 0.65rem 2rem;
	cursor: pointer;
	font-size: 0.9rem;
}
/* The parent theme gives every button `display: flex`, which beats the plain
   `hidden` attribute — without this the button is visible even when hidden. */
.product-search-load-more[hidden] {
	display: none;
}

/* ── Card overlay actions: Quick View + add to cart ──────────────────────────
   Both buttons are children of <li>, not of the product <a>, so the <li> has to
   be their positioning context. Colours are left to the parent theme's own
   button styling, which already handles light/dark. */
.woocommerce ul.products li.product {
	position: relative;
}
.cs-quickview {
	position: absolute;
	/* Just inside the bottom edge of the thumbnail, not centred on it. On touch
	   devices the button cannot hide behind a hover, so a centred button would
	   permanently cover the cover art. At the bottom edge it overlaps least. */
	top: calc(var(--cs-thumb-height, 350px) - 0.75rem);
	left: 0.75rem;
	transform: translate(0, -100%);
	z-index: 2;
	padding: 0.5rem 1.25rem;
	font-size: 0.85rem;
	white-space: nowrap;
	cursor: pointer;
	/* Revealed on hover. visibility (not display) keeps it focusable-in-order
	   and lets the fade run; it never occupies layout, so cards do not shift. */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Add to cart. Pinned to the TOP-right of the thumbnail, not the bottom: the
   Quick View button is centred along the bottom edge, and at narrow card widths
   (or with a longer translated label) the two collide there. Anchoring to the
   opposite corner keeps them apart regardless of label length. */
.cs-add-to-cart {
	position: absolute;
	top: calc(var(--cs-thumb-height, 350px) - 0.75rem);
	right: 0.75rem;
	transform: translateY(-100%);
	z-index: 2;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border-radius: 50%;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}
/* Out of stock. Kept visible rather than hidden so the state is legible —
   a missing button reads as a bug, a dimmed one reads as unavailable. */
.cs-add-to-cart:disabled {
	cursor: not-allowed;
	opacity: 0.35;
}

.woocommerce ul.products li.product:hover .cs-quickview,
.woocommerce ul.products li.product:focus-within .cs-quickview,
.woocommerce ul.products li.product:hover .cs-add-to-cart,
.woocommerce ul.products li.product:focus-within .cs-add-to-cart {
	opacity: 1;
	visibility: visible;
}
/* Touch devices have no hover, so the buttons would be unreachable. */
@media (hover: none) {
	.cs-quickview,
	.cs-add-to-cart {
		opacity: 1;
		visibility: visible;
	}
}
/* A disabled button that stays visible must not fade back in at full opacity
   when the card is hovered. */
.woocommerce ul.products li.product:hover .cs-add-to-cart:disabled,
.woocommerce ul.products li.product:focus-within .cs-add-to-cart:disabled {
	opacity: 0.35;
}

/* ── Quick View modal corrections ────────────────────────────────────────────
   Fixes for the Shopify plugin's modal.css, which assumes a wide LTR layout.
   Loaded after it (theme enqueues at priority 99, plugin at 10). */

/* min-width:400px on the media pane starved the details column, wrapping the
   title under the close button. Let both panes share the width instead. */
#product-modal .product-modal__media,
#product-modal .product-modal__details {
	flex: 1 1 50%;
	min-width: 0;
}
#product-modal .product-modal__content {
	width: min(992px, 92vw);
}
/* Logical property, so the title clears the close button under both LTR and
   RTL — Arabic titles align right and ran directly beneath it. */
#product-modal .product-modal__title {
	font-size: 1.5rem;
	padding-inline-end: 3rem;
}
#product-modal .product-modal__title a {
	color: inherit;
	text-decoration: none;
}
#product-modal .product-modal__title a:hover {
	color: var(--diwan-red);
}
#product-modal .product-modal__image-link {
	display: block;
	max-width: 100%;
}
#product-modal .product-modal__add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
#product-modal .product-modal__quantity {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	min-height: 44px;
	border: 1px solid var(--cs-color-border);
	border-radius: 4px;
}
#product-modal .product-modal__quantity button {
	align-self: stretch;
	width: 36px;
	padding: 0;
	border: 0;
	background: var(--cs-layout-background);
	color: var(--cs-color-primary);
	font-size: 1rem;
}
#product-modal .product-modal__quantity input {
	width: 3rem;
	margin: 0;
	padding: 0.5rem 0.25rem;
	border: 0;
	background: var(--cs-layout-background);
	color: var(--cs-color-primary);
	font-size: 1rem;
	text-align: center;
	appearance: textfield;
}
#product-modal .product-modal__quantity input::-webkit-inner-spin-button,
#product-modal .product-modal__quantity input::-webkit-outer-spin-button {
	margin: 0;
	appearance: none;
}
#product-modal .product-modal__add-to-cart > .product-modal__add-button {
	flex: 1 1 180px;
	width: auto;
}
.diwan-search-clear-wrap {
	position: relative;
	display: block;
	width: 100%;
}

.diwan-search-clear-wrap > input[type="search"] {
	width: 100%;
	padding-right: 2.25rem;
}

.diwan-search-clear-wrap > input[type="search"]::-webkit-search-cancel-button {
	display: none;
}

.diwan-search-clear {
	position: absolute;
	right: 0.55rem;
	top: 50%;
	transform: translateY(-50%);
	border: 0;
	padding: 0;
	background: transparent;
	color: currentColor;
	font: inherit;
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
	opacity: 1;
	z-index: 2;
}

.diwan-search-clear:hover {
	opacity: 0.8;
}

.diwan-search-clear-wrap > input:placeholder-shown + .diwan-search-clear {
	display: none;
}

#product-modal .product-modal__metadata {
	width: min(400px, 100%);
	text-align: left;
	margin: 0.3rem 0 1rem;
	font-size: 1rem;
	line-height: 1.4;
	font-weight: 400;
}
#product-modal .product-modal__metadata .single-product__author-line {
	color: var(--cs-color-primary);
}
#product-modal .product-modal__close-container {
	padding: 16px;
}
/* Show the complete cover in Quick View rather than cropping it. */
#product-modal .product-modal__media img {
	object-fit: contain !important;
	object-position: center !important;
}

/* ── HIDDEN: "Buy now" buttons ───────────────────────────────────────────────
   Hidden at the client's request (2026-08-02), expected to come back.
   TO RESTORE: delete this block. Nothing else needs changing.

   Done in CSS rather than by editing markup so there is a single revert point,
   and so the Shopify plugin's modal.php stays unmodified — it is third-party
   code we already patch elsewhere, and every extra edit is another thing an
   update would silently discard.

   display:none (not visibility/opacity) so the buttons also leave the tab
   order and the accessibility tree — a hidden-but-focusable button is worse
   than a visible one.

   Covers all three copies of the button:
     .single-product__buy-button  → cascade-child/shopify/pdp.php (live PDP)
                                  → shopify-plugin .../shopify-pdp.php (unused,
                                    our template overrides it, same class)
     .product-modal__buy-button   → shopify-plugin .../modal.php (Quick View)  */
.single-product__buy-button,
#product-modal .product-modal__buy-button {
	display: none;
}

/* Stock labels on book cards, Quick View and book pages (added 26 Oct 2026).
   Markup: cascade-child/shopify/partials/product-card.php, shopify/pdp.php and
   shopify/modal.php. Shopify's web components show or hide them:
     special order = variant currentlyNotInStock (orderable, sent from Cairo)
     unavailable   = variant not availableForSale                           */
.dw-stock-note {
	display: block;
	width: fit-content;
	margin: 6px 0 0;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 0.8125rem;
	line-height: 1.5;
	font-weight: 500;
}
.dw-stock-note[hidden] {
	display: none !important;
}
.dw-stock-note--special {
	background: var(--diwan-peach, #f7dfd0);
	color: var(--diwan-graphite, #2d2926);
}
.dw-stock-note--unavailable {
	background: color-mix(in srgb, var(--diwan-graphite, #2d2926) 8%, #ffffff);
	color: var(--diwan-graphite, #2d2926);
}
.single-product__details .dw-stock-note,
#product-modal .dw-stock-note {
	margin: 0 0 12px;
	font-size: 0.9375rem;
}
/* Book cards: centred under the centred title and price; rounded box
   rather than a pill because the label wraps onto two lines on narrow cards. */
li.product .dw-stock-note {
	margin: 6px auto 0;
	text-align: center;
	border-radius: 8px;
	font-size: 0.75rem;
}

/* Account and social links directly below About Us in the responsive menu. */
.cs-offcanvas__inner > .widget,
.cs-offcanvas .diwan-mobile-nav-extras {
	flex-shrink: 0;
}
.cs-offcanvas .diwan-mobile-nav-extras {
	margin-bottom: 2rem;
}
.cs-offcanvas__inner > .widget + .diwan-mobile-nav-extras {
	/* Account for the widget's 3rem gap and its menu's -0.5rem margin. */
	margin-top: -2.5rem;
}
.cs-offcanvas .diwan-mobile-nav-extras__join {
	display: block;
	padding: 0.8125rem 0;
	font-family: var(--cs-font-headings-family), sans-serif;
	font-weight: var(--cs-font-headings-weight);
	font-size: 1.25rem;
	line-height: var(--cs-font-headings-line-height);
}
.cs-offcanvas .diwan-mobile-nav-extras__social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.5rem;
}
.cs-offcanvas .diwan-mobile-nav-extras__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
}
.cs-offcanvas .diwan-mobile-nav-extras__social svg {
	width: 20px;
	height: 20px;
}
.cs-offcanvas .diwan-mobile-nav-extras a {
	color: var(--diwan-graphite, #2d2926);
	text-decoration: none;
}
.cs-offcanvas .diwan-mobile-nav-extras a:hover,
.cs-offcanvas .diwan-mobile-nav-extras a:focus-visible {
	color: var(--diwan-red, #c63d32);
}