/**
 * Bonza. Wishlist Off-Canvas Drawer skin.
 *
 * Skins the SHARED wishlist-offcanvas module (assets/css/components/wishlist-offcanvas.css,
 * inc/wishlist-offcanvas.php) to Bonza's Figma spec. Structure and behaviour stay in the
 * shared module; this file is colors, type, spacing and the card-grid layout only.
 *
 * Figma file cY9QX6IwGVaaGI4r7J2RRF, component set 68:34939 "Wishlist":
 *   68:34938 Property 1=Empty (desktop, 445px)
 *   68:34937 Property 1=Filled (desktop, 445px)
 *   2138:116628 Property 1=Variant3 (mobile filled, 340px)
 *   2138:116569 Property 1=Variant4 (mobile empty, 340px)
 *
 * Bonza opts into the card-grid item layout (blocksy_child_wishlist_card_layout
 * filter, set in clients/bonza/bonza.php). Figma shows a 2-col PRODUCT CARD grid,
 * not the shared module's default list-row layout.
 *
 * Colors are bare literals, not `var(--theme-palette-color-N, <literal>)`. Blocksy
 * always emits its own palette to :root (themes/blocksy/inc/classes/colors.php), so
 * a var() fallback here never fires and the rule silently renders Blocksy's default
 * blue instead of Bonza's brand green. Same convention already used by the Cart
 * Off-Canvas precedent in this file (see the #woo-cart-panel section above).
 *
 * @package Blocksy_Child
 * @client  Bonza
 * @date 2026-08-26
 */

/* ==========================================================================
   Panel container. width/radius/shadow/background.
   WHY: Figma's Filled/Empty frames are 445px wide with a light shadow and a
   cream fill; the shared module's PHP-generated defaults (500px width,
   0/0/70/0.35 shadow) come from mirroring the Cart panel's Customizer values,
   which haven't been set for Bonza yet.

   `inc/wishlist-offcanvas.php` prints its own inline style block
   (#blocksy-child-wishlist-panel-css) in wp_footer at priority 99, targeting
   these exact same selectors at the exact same specificity, LATER in the
   document than this enqueued stylesheet. Equal specificity plus later
   source order means that inline block always wins over a plain
   `#woo-wishlist-panel { ... }` rule here, so `--side-panel-width` and the
   close-button icon color need one extra type-selector (`body`) so they
   actually take effect.
   ========================================================================== */
body #woo-wishlist-panel {
	--side-panel-width: 445px;
}

#woo-wishlist-panel .ct-panel-inner {
	border-radius: 24px 0 0 24px;
	box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.08);
}

body #woo-wishlist-panel .ct-panel-inner {
	background-color: #F8EDE3;
}

/* Blocksy's own mobile breakpoint (NOT 768px). Figma's mobile frames
   (Variant3/Variant4) are a fixed 340px, not the shared module's 90vw. */
@media (max-width: 690px) {
	body #woo-wishlist-panel {
		--side-panel-width: 340px;
	}

	#woo-wishlist-panel .ct-panel-inner {
		border-radius: 24px 0 0 24px;
	}
}

/* ==========================================================================
   Header band. heart icon + "Wishlist (N)" + close button.
   WHY: Figma's header is a solid brand-green (#247B4E) 76px band with white
   type and icons; the shared module leaves .ct-panel-actions unstyled
   (inherits page text color) since most sites don't want a colored band here.
   `border-bottom: none` clears the grey divider assets/css/components/
   offcanvas.css puts on every panel header by default (visible against a
   solid green band; matches the same reset in the Cart Off-Canvas section).
   ========================================================================== */
#woo-wishlist-panel .ct-panel-actions {
	background-color: #247B4E;
	padding: 16px 20px;
	min-height: 76px;
	border-bottom: none;
	align-items: center;
}

#woo-wishlist-panel .ct-panel-heading,
#woo-wishlist-panel .ct-wishlist-panel-title {
	color: #fff;
	font-family: "Nominee", var(--theme-headings-font-family, var(--theme-font-family, sans-serif));
	font-weight: 900;
	font-size: 18px;
	line-height: 20px;
	text-transform: uppercase;
	letter-spacing: normal;
}

#woo-wishlist-panel .ct-wishlist-panel-icon {
	fill: #fff;
}

#woo-wishlist-panel .ct-wishlist-panel-count {
	color: #fff;
	opacity: 0.7;
}

/* Same specificity bump as the panel-width rule above: the shared module's
   wp_footer block also writes a literal --theme-icon-color on this exact
   selector, later in the document. */
body #woo-wishlist-panel .ct-toggle-close {
	--theme-icon-color: #fff;
}

body #woo-wishlist-panel .ct-toggle-close:hover {
	--theme-icon-color: rgba(255, 255, 255, 0.75);
}

/* ==========================================================================
   Card-grid item layout (Figma "Filled" state, a 2-col PRODUCT CARD grid).
   Active only when clients/bonza/bonza.php's blocksy_child_wishlist_card_layout
   filter is on, via the .ct-wishlist-cards scope class the shared JS/PHP
   already add to #woo-wishlist-panel in that mode.
   ========================================================================== */
#woo-wishlist-panel.ct-wishlist-cards .ct-wishlist-items--cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	list-style: none;
	padding: 0;
	margin: 0;
}

#woo-wishlist-panel.ct-wishlist-cards .ct-wishlist-item {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	padding: 0;
	border-bottom: none;
	position: relative;
}

#woo-wishlist-panel.ct-wishlist-cards .ct-wishlist-item .ct-media-container {
	width: 100%;
	min-width: 0;
	aspect-ratio: 3 / 4;
	border-radius: var(--theme-border-radius, 8px);
}

#woo-wishlist-panel.ct-wishlist-cards .ct-wishlist-item .ct-media-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#woo-wishlist-panel.ct-wishlist-cards .ct-wishlist-item-info {
	padding-right: 0;
}

#woo-wishlist-panel.ct-wishlist-cards .ct-wishlist-remove {
	position: static;
	margin-top: 4px;
	opacity: 1;
	font-size: 12px;
	text-decoration: underline;
	color: #666;
}

#woo-wishlist-panel.ct-wishlist-cards .ct-wishlist-remove-label {
	pointer-events: none;
}

/* ==========================================================================
   "You May Also Like" heading. shared between the Filled state's suggested-
   products carousel (.ct-wishlist-suggested, always rendered by the module)
   and the Empty state's category grid (.ct-wishlist-categories, card-layout
   only, added below). Figma "Links/Bold": Nominee Heavy Extended 900,
   14px/16px, UPPERCASE, letter-spacing 0.02em, color #353638.
   ========================================================================== */
#woo-wishlist-panel .ct-wishlist-categories .ct-module-title,
#woo-wishlist-panel .ct-wishlist-suggested .ct-module-title {
	font-family: "Nominee", var(--theme-headings-font-family, var(--theme-font-family, sans-serif));
	font-weight: 900;
	font-size: 14px;
	line-height: 16px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #353638;
	margin-bottom: 12px;
}

/* ==========================================================================
   Empty-state "You May Also Like" category grid (Figma Empty state, a 2x2
   grid of category cards: cover image(s), name, live product count).
   ========================================================================== */
#woo-wishlist-panel .ct-wishlist-category-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

#woo-wishlist-panel .ct-wishlist-category-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-decoration: none;
	color: inherit;
}

#woo-wishlist-panel .ct-wishlist-category-media {
	display: flex;
	gap: 2px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--theme-border-radius, 8px);
}

#woo-wishlist-panel .ct-wishlist-category-media--single {
	aspect-ratio: 1 / 1;
}

/* Wrapped-cover markup, produced when the aw_category_cards_image_htmls()
   helper is present. */
#woo-wishlist-panel .ct-wishlist-category-img-wrap {
	flex: 1;
	overflow: hidden;
}

#woo-wishlist-panel .ct-wishlist-category-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Bare-img fallback markup. That helper does not exist on this site, so
   inc/wishlist-offcanvas.php's else-branch runs instead: a plain
   wp_get_attachment_image() call with no wrapper span. Without this rule
   the image sits unsized inside the flex/aspect-ratio box above. */
#woo-wishlist-panel .ct-wishlist-category-media > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

#woo-wishlist-panel .ct-wishlist-category-name {
	font-size: 14px;
	font-weight: 600;
	color: #353638;
}

#woo-wishlist-panel .ct-wishlist-category-count {
	font-size: 12px;
	opacity: 0.6;
}

/* ==========================================================================
   Sign-up / continue CTAs. Figma's full-width pill button ("register" on
   the guest notice, "Continue Shopping" on the empty state): brand green,
   999px pill radius, soft double drop-shadow, Nominee 900 12px uppercase.
   ========================================================================== */
#woo-wishlist-panel .ct-wishlist-signup-btn,
#woo-wishlist-panel .ct-wishlist-continue-btn {
	background: #247B4E;
	color: #fff;
	border-radius: 999px;
	box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.03), 0 12px 16px -4px rgba(0, 0, 0, 0.08);
	padding: 16px 24px;
	height: 48px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Nominee", var(--theme-headings-font-family, var(--theme-font-family, sans-serif));
	font-weight: 900;
	font-size: 12px;
	letter-spacing: 0.04em;
}

#woo-wishlist-panel .ct-wishlist-signup-btn:hover,
#woo-wishlist-panel .ct-wishlist-continue-btn:hover {
	background: #1d6640;
	color: #fff;
}

#woo-wishlist-panel .ct-wishlist-guest-notice {
	background: transparent;
	padding: 0;
	text-align: left;
}