/**
 * Crooked custom styles.
 *
 * 1. Dark theme (DEFAULT) — applied via html:not(.theme-light) so the site is
 *    dark with no JS and no cookie. Light mode = the original Botiga design,
 *    untouched.
 * 2. Theme toggle button.
 * 3. Gallery collage (color → B&W + text overlay on hover).
 */

/* ---------- 1. Dark theme (default) ---------- */

html:not(.theme-light) {
	--ck-bg: #0f0f0f;
	--ck-surface: #1b1b1b;
	--ck-surface-2: #242424;
	--ck-text: #ededed;
	--ck-text-muted: #a8a8a8;
	--ck-border: #333;
}

html:not(.theme-light) body,
html:not(.theme-light) #page.site,
html:not(.theme-light) .site-content {
	background-color: var(--ck-bg);
	color: var(--ck-text);
}

/* Header + footer builder rows — Botiga paints backgrounds per row wrapper,
   so the wrappers need overriding, not just the <header>/<footer> shells */
html:not(.theme-light) .bhfb-header,
html:not(.theme-light) .bhfb-footer,
html:not(.theme-light) .bhfb .bhfb-row-wrapper,
html:not(.theme-light) .header-row,
html:not(.theme-light) .footer-row {
	background-color: var(--ck-bg) !important;
	color: var(--ck-text);
}

html:not(.theme-light) h1,
html:not(.theme-light) h2,
html:not(.theme-light) h3,
html:not(.theme-light) h4,
html:not(.theme-light) h5,
html:not(.theme-light) h6,
html:not(.theme-light) .site-title a,
html:not(.theme-light) .site-description,
html:not(.theme-light) .entry-title a {
	color: var(--ck-text) !important;
}

html:not(.theme-light) p,
html:not(.theme-light) li,
html:not(.theme-light) label,
html:not(.theme-light) .price,
html:not(.theme-light) .woocommerce-Price-amount {
	color: var(--ck-text);
}

/* Elementor text widgets often carry a dim gray from the old light design —
   normalize them in dark so copy stays readable */
html:not(.theme-light) .elementor-widget-text-editor,
html:not(.theme-light) .elementor-widget-text-editor p,
html:not(.theme-light) .elementor-heading-title {
	color: var(--ck-text) !important;
}

html:not(.theme-light) a,
html:not(.theme-light) .main-navigation a,
html:not(.theme-light) .menu a,
html:not(.theme-light) .bhfb a,
html:not(.theme-light) .bhfb-woo-icons a,
html:not(.theme-light) .botiga-dropdown-link {
	color: var(--ck-text) !important;
}

html:not(.theme-light) a:hover,
html:not(.theme-light) .main-navigation a:hover {
	color: var(--ck-text-muted) !important;
}

/* Header icons (cart, search, hamburger) are SVGs with a baked-in dark
   fill/stroke — color rules on <a> don't reach them */
html:not(.theme-light) .site-header-cart svg,
html:not(.theme-light) .bhfb-woo-icons svg,
html:not(.theme-light) .bhfb-header .ws-svg-icon svg,
html:not(.theme-light) .botiga-offcanvas-toggle svg {
	fill: var(--ck-text) !important;
}

html:not(.theme-light) .bhfb-header svg[stroke],
html:not(.theme-light) .bhfb-header svg [stroke] {
	stroke: var(--ck-text);
}

/* Footer widgets: text + the newsletter heading */
html:not(.theme-light) .bhfb-footer .widget,
html:not(.theme-light) .bhfb-footer .widget p,
html:not(.theme-light) .bhfb-footer .textwidget,
html:not(.theme-light) .bhfb-footer .wp-block-paragraph,
html:not(.theme-light) .botiga-credits,
html:not(.theme-light) .botiga-credits a {
	color: var(--ck-text-muted) !important;
}

/* Dark logo files — invert so they stay visible on dark
   (placeholder trick: replace with real light logo files if it looks off) */
html:not(.theme-light) .site-branding img,
html:not(.theme-light) .custom-logo,
html:not(.theme-light) .bhfb-footer .textwidget img {
	filter: invert(1) hue-rotate(180deg);
}

/* Product cards (light gray in the original design) */
html:not(.theme-light) .woocommerce-loop-product,
html:not(.theme-light) .botiga-wc-loop-product,
html:not(.theme-light) ul.products li.product,
html:not(.theme-light) .product-thumbnail-wrapper {
	background-color: var(--ck-surface) !important;
}

html:not(.theme-light) .woocommerce-loop-product__title,
html:not(.theme-light) ul.products li.product .price {
	color: var(--ck-text) !important;
}

/* Dropdown menus — submenus only: Botiga puts .botiga-dropdown-ul on the
   top-level #primary-menu too, so that class alone would paint the whole
   header menu strip */
html:not(.theme-light) .main-navigation ul ul,
html:not(.theme-light) .main-navigation .sub-menu,
html:not(.theme-light) .site-header-cart .widget_shopping_cart {
	background-color: var(--ck-surface) !important;
	border-color: var(--ck-border);
}

/* Botiga paints each submenu <li> white on its own, not just the <ul> */
html:not(.theme-light) .main-navigation .sub-menu li,
html:not(.theme-light) .main-navigation ul ul li {
	background-color: var(--ck-surface) !important;
	border-color: var(--ck-border) !important;
}

/* Forms (incl. WPForms on the contact page) */
html:not(.theme-light) input[type="text"],
html:not(.theme-light) input[type="email"],
html:not(.theme-light) input[type="search"],
html:not(.theme-light) input[type="tel"],
html:not(.theme-light) input[type="number"],
html:not(.theme-light) input[type="password"],
html:not(.theme-light) textarea,
html:not(.theme-light) select {
	background-color: var(--ck-surface) !important;
	border-color: var(--ck-border) !important;
	color: var(--ck-text) !important;
}

html:not(.theme-light) .wpforms-field-label,
html:not(.theme-light) .wpforms-field-sublabel,
html:not(.theme-light) .wpforms-field-description {
	color: var(--ck-text) !important;
}

/* Buttons: invert — white button, dark text */
html:not(.theme-light) .button,
html:not(.theme-light) button[type="submit"],
html:not(.theme-light) input[type="submit"],
html:not(.theme-light) .single_add_to_cart_button,
html:not(.theme-light) .checkout-button {
	background-color: var(--ck-text) !important;
	border-color: var(--ck-text) !important;
	color: var(--ck-bg) !important;
}

html:not(.theme-light) .button:hover,
html:not(.theme-light) button[type="submit"]:hover,
html:not(.theme-light) input[type="submit"]:hover {
	background-color: var(--ck-text-muted) !important;
	border-color: var(--ck-text-muted) !important;
}

/* Footer, mirroring the light design's structure: there the page is #fff,
   the footer block #f5f5f5 and the credits row #e5e5e5, while the row's 60px
   translucent border-top blends into the block (background-clip: border-box).
   Same relationships on dark: page #0f0f0f, block a step lighter, credits a
   step more; border transparent so it blends like in light. */
html:not(.theme-light) .bhfb-footer .bhfb-main_footer_row {
	background-color: #191919 !important;
	border-top-color: transparent !important;
}

html:not(.theme-light) .bhfb-footer .bhfb-below_footer_row {
	background-color: #292929 !important;
}

/* Botiga's Woo page-header band (shop/category title area) ships white even
   when empty — repaint so it doesn't show as a stripe under the header */
html:not(.theme-light) .woocommerce-page-header {
	background-color: var(--ck-bg) !important;
	color: var(--ck-text);
}

/* Woo notices, cart/checkout + product attribute tables */
html:not(.theme-light) .woocommerce-message,
html:not(.theme-light) .woocommerce-info,
html:not(.theme-light) .woocommerce-error,
html:not(.theme-light) .cart_totals,
html:not(.theme-light) #order_review,
html:not(.theme-light) table.shop_table {
	background-color: var(--ck-surface);
	color: var(--ck-text);
	border-color: var(--ck-border);
}

html:not(.theme-light) table.shop_table td,
html:not(.theme-light) table.shop_table th,
html:not(.theme-light) table.woocommerce-product-attributes td,
html:not(.theme-light) table.woocommerce-product-attributes th {
	background-color: var(--ck-surface) !important;
	color: var(--ck-text) !important;
	border-color: var(--ck-border) !important;
}

html:not(.theme-light) table.woocommerce-product-attributes tr:nth-child(even) td,
html:not(.theme-light) table.woocommerce-product-attributes tr:nth-child(even) th {
	background-color: var(--ck-surface-2) !important;
}

/* Mobile offcanvas menu. Botiga slides it in from the LEFT while the
   hamburger sits top-right — flip it to the right so it opens under the
   button (both themes). */
.botiga-offcanvas-menu {
	left: auto !important;
	right: 0 !important;
	transform: translateX(100%) !important;
}

.botiga-offcanvas-menu.toggled {
	transform: translateX(0) !important;
}

/* ...and it ships white: repaint panel + controls for dark, otherwise the
   global light link color renders invisible on the white panel */
html:not(.theme-light) .botiga-offcanvas-menu,
html:not(.theme-light) .bhfb-mobile_offcanvas {
	background-color: var(--ck-bg) !important;
}

html:not(.theme-light) .botiga-offcanvas-menu a,
html:not(.theme-light) .botiga-offcanvas-menu button,
html:not(.theme-light) .botiga-offcanvas-menu .botiga-offcanvas-close {
	color: var(--ck-text) !important;
}

html:not(.theme-light) .botiga-offcanvas-menu svg,
html:not(.theme-light) .botiga-offcanvas-menu svg path {
	fill: currentColor;
	stroke: currentColor;
}

/* ---------- 2. Theme toggle button ---------- */

#crooked-theme-toggle {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 99999;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid #555;
	background: #1b1b1b;
	color: #ededed;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

html.theme-light #crooked-theme-toggle {
	background: #fff;
	color: #212121;
	border-color: #ccc;
}

/* ---------- 3. Gallery (CSS grid, dense flow) ---------- */

/* Dense grid: the browser backfills every hole. The JS assigns each tile a
   span class from its aspect ratio (ck-p portrait 1×3, ck-s squarish 1×2,
   ck-l landscape 2×3, ck-ls small landscape 1×2, ck-pa/ck-sa double-width
   accents), so the object-fit crop stays small. Overrides need !important —
   the WP gallery shortcode injects inline column styles. */
.crooked-gallery .gallery {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 130px;
	grid-auto-flow: dense;
	gap: 6px;
	margin: 0;
}

.crooked-gallery .gallery-item {
	position: relative;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 100%;
	/* visible card while a lazy image is still loading (or failed) —
	   otherwise a pending tile is black-on-black and reads as a hole */
	background: rgba(128, 128, 128, 0.12);
}

.crooked-gallery .gallery-item.ck-p {
	grid-row: span 3;
}

.crooked-gallery .gallery-item.ck-s,
.crooked-gallery .gallery-item.ck-ls {
	grid-row: span 2;
}

.crooked-gallery .gallery-item.ck-l {
	grid-column: span 2;
	grid-row: span 3;
}

.crooked-gallery .gallery-item.ck-pa {
	grid-column: span 2;
	grid-row: span 6;
}

.crooked-gallery .gallery-item.ck-sa {
	grid-column: span 2;
	grid-row: span 4;
}

.crooked-gallery .gallery-icon,
.crooked-gallery .gallery-icon a {
	display: block;
	height: 100%;
}

/* B&W at rest, original colors on hover (photos that ARE b&w just stay so).
   The slight cover-crop ("zoom") is what lets the grid stay hole-free. */
.crooked-gallery .gallery-item img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	filter: grayscale(1);
	transition: filter 0.35s ease, transform 0.35s ease;
}

.crooked-gallery .gallery-item:hover img {
	filter: none;
	transform: scale(1.03);
}

.crooked-gallery .gallery-caption {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 1rem;
	text-align: center;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	font-size: 1.05rem;
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

.crooked-gallery .gallery-item:hover .gallery-caption {
	opacity: 1;
}

@media (max-width: 767px) {
	/* two columns on phones, shorter row unit so tiles keep proportion */
	.crooked-gallery .gallery {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 100px;
	}

}

/* ---------- 3b. Home: full-viewport hero, no scroll ----------
   Header stays, the hero fills everything below it (--ck-header-h is set
   by crooked.js from the real header height). Footer is unreachable
   without scroll, so it's hidden on home. */

/* full-bleed reel on ALL sizes: hero covers the viewport including the
   top; the menu floats OVER it (transparent header + scrim). Desktop
   letterboxes the portrait video (object-fit contain) so the Crooked
   logo at the end of the reel stays fully visible; phones crop to fill. */
.home .elementor-widget-image-carousel {
	display: none;
}

.home #page .elementor {
	position: relative;
	z-index: 1000; /* above Botiga's header (z-index 999) */
	margin-top: calc(-1 * var(--ck-header-h, 80px));
	background: #000;
}

.home #crooked-theme-toggle {
	z-index: 1002;
}

/* menu over the video: transparent header rows with a dark scrim so the
   items read on any frame; white items + white logo in BOTH themes */
html .home .bhfb-header {
	position: relative;
	z-index: 1001;
	background: transparent !important;
}

html .home .bhfb-header .bhfb-row-wrapper {
	background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)) !important;
	border: 0 !important;
}

.home .bhfb-header,
.home .bhfb-header a,
.home .bhfb-header .menu > li > a {
	color: #fff !important;
}

.home .site-branding img,
.home .custom-logo {
	filter: invert(1) hue-rotate(180deg);
}

.home footer,
.home .bhfb-footer {
	display: none;
}

/* the reel (video injected by crooked.js): zoomed to fill (cover) on all
   screens. The vertical position is tuned so the end-of-reel wordmark
   stays whole and the logo centered — a 16:9 window can hold ~75% of the
   portrait frame's logo, so the top arm of the symbol trims on wide
   screens; phones show it all (9:16 box, no vertical crop). */
.ck-hero-video {
	display: none;
}

.home .ck-hero-video {
	display: block;
	width: 100%;
	height: 100vh;
	object-fit: cover;
	object-position: 50% 54%;
	background: #000;
}

body.home {
	overflow: hidden;
}

/* other pages keep the old phone rule: photos otherwise collapse to a
   ~170px strip */
@media (max-width: 767px) {
	body:not(.home) .elementor-image-carousel-wrapper .swiper-slide-image {
		height: 300px;
		object-fit: cover;
	}
}

/* ---------- 4. GLightbox dark skin ----------
   The stock "clean" skin has a white caption bar; the dark theme's global
   text color (#ededed) bleeds into it → invisible text. Dark box + bigger,
   always-visible controls in both themes (the lightbox is always dark). */

/* glightbox.min.css is enqueued after this file, so these overrides need the
   extra .glightbox-container class to out-rank its equal-specificity rules */
.glightbox-container.glightbox-clean .gslide-description {
	background: #141414;
}

.glightbox-container.glightbox-clean .gslide-title,
.glightbox-container.glightbox-clean .gslide-desc {
	color: #ededed;
}

.glightbox-container .goverlay,
.glightbox-clean .goverlay {
	background: rgba(8, 8, 8, 0.94);
}

.glightbox-container.glightbox-clean .gprev,
.glightbox-container.glightbox-clean .gnext,
.glightbox-container.glightbox-clean .gclose {
	background-color: rgba(255, 255, 255, 0.14);
	border-radius: 50%;
	width: 52px;
	height: 52px;
	opacity: 1;
}

.glightbox-container.glightbox-clean .gprev:hover,
.glightbox-container.glightbox-clean .gnext:hover,
.glightbox-container.glightbox-clean .gclose:hover {
	background-color: rgba(255, 255, 255, 0.3);
}

.glightbox-container.glightbox-clean .gprev path,
.glightbox-container.glightbox-clean .gnext path,
.glightbox-container.glightbox-clean .gclose path {
	fill: #fff;
}