/*
 * Mobile layout.
 *
 * Every layout in this theme is declared as an inline style attribute on the
 * element itself, which is how the design was built and is not worth unpicking
 * across twenty templates. An inline style beats any selector, however specific,
 * so the only thing that can override one is !important. That is why it appears
 * throughout this file. It is confined to layout properties inside media
 * queries, so nothing here has any effect at desktop width, and the desktop
 * design remains exactly what the template says it is.
 *
 * The companion to that rule: the templates now carry a class on each layout
 * container (bb-cat-grid, bb-footer-grid and so on). Adding a class is cheap and
 * safe; it means the rules below read as intent rather than as attribute
 * matching against style strings.
 *
 * Breakpoints, chosen from where each layout actually breaks rather than from
 * device names:
 *   1024px  three- and four-across grids lose a column; nav drawer takes over
 *    760px  side-by-side halves stack
 *    560px  single column, tighter type and padding
 *
 * Loaded last, after main.css, single-product.css and checkout.css.
 */

/* -------------------------------------------------------------------
 * Global guards
 *
 * A single element wider than the viewport makes the whole page scroll
 * sideways, which is the difference between a cramped page and a broken one.
 * ----------------------------------------------------------------- */

@media (max-width: 1024px) {
	html,
	body.bb-body {
		max-width: 100%;
		overflow-x: hidden;
	}

	/* Grid and flex children refuse to shrink below their content's intrinsic
	   width unless told to. This is the single most common cause of a stray
	   horizontal scrollbar on a phone. */
	.bb-cat-grid > *,
	.bb-occ-grid > *,
	.bb-product-grid > *,
	.bb-similar-grid > *,
	.bb-wishlist-grid > *,
	.bb-ig-tiles > *,
	.bb-footer-grid > *,
	.bb-help-grid > * {
		min-width: 0;
	}
}

/* -------------------------------------------------------------------
 * Header
 * ----------------------------------------------------------------- */

/* The hamburger does not exist above the breakpoint. */
.bb-mobile-toggle {
	display: none;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	line-height: 0;
}

@media (max-width: 1024px) {
	/* Main bar becomes hamburger | wordmark | icons. The nav is not merely
	   hidden for looks: it is replaced by the drawer, which renders the same
	   menus. */
	.bb-mobile-toggle {
		display: inline-flex;
		align-items: center;
	}

	.bb-mainbar-inner {
		grid-template-columns: auto 1fr auto !important;
		gap: 14px !important;
		min-height: 62px !important;
	}

	.bb-mainbar-inner > nav {
		display: none !important;
	}

	/* The megamenu panels belong to the desktop nav that is now hidden. */
	.bb-megamenu,
	#bb-menu-backdrop {
		display: none !important;
	}

	.bb-header-icons {
		gap: 16px !important;
	}

	/* Search and the bag stay in the bar. Account and wishlist move into the
	   drawer, which already lists both, because four icons plus a hamburger
	   leave the wordmark too little room to sit on one line. */
	.bb-header-icons .bb-account-trigger,
	.bb-header-icons a[aria-label="Wishlist"] {
		display: none !important;
	}

	/* Logo lockup: keep the mark, shrink the wordmark so it never wraps. */
	.bb-mainbar-inner > a,
	.bb-mainbar-inner > div:not(.bb-header-icons) {
		justify-content: center;
	}

	/* The wordmark is an anchor in one context and a span in the others, so it
	   carries a class rather than being matched on element type. Three lines of
	   "Bliss & Beauty Boutique" is what pushed the header to 84px tall. */
	.bb-wordmark {
		font-size: 16px !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		min-width: 0;
	}

	/* The lockup is logo + wordmark; the wordmark is the part allowed to shrink. */
	.bb-mainbar-inner > a,
	.bb-mainbar-inner > div:not(.bb-header-icons) {
		min-width: 0;
		gap: 8px !important;
	}

	.bb-mainbar-inner .custom-logo-link img,
	.bb-mainbar-inner > a img {
		max-height: 34px;
		width: auto;
	}

	/* Brand tabs: one scrollable row rather than three wrapped lines. */
	.bb-tabs-inner {
		gap: 22px !important;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.bb-tabs-inner::-webkit-scrollbar {
		display: none;
	}

	.bb-tabs-inner > a {
		font-size: 12.5px !important;
		white-space: nowrap;
		flex: none;
	}

	/* Top bar: drop the empty left spacer so the ticker gets the room. */
	.bb-topbar-inner {
		grid-template-columns: 1fr auto !important;
		gap: 10px !important;
	}

	.bb-topbar-inner > div:first-child {
		display: none !important;
	}
}

/* -------------------------------------------------------------------
 * The drawer
 *
 * Hidden entirely above the breakpoint, so its markup costs nothing on desktop.
 * ----------------------------------------------------------------- */

.bb-mobile-nav {
	display: none;
}

@media (max-width: 1024px) {
	.bb-mobile-nav:not([hidden]) {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 95;
	}

	.bb-mobile-nav__scrim {
		position: absolute;
		inset: 0;
		background: rgba(20, 20, 26, .45);
		opacity: 0;
		transition: opacity 200ms ease-out;
	}

	.bb-mobile-nav__panel {
		position: absolute;
		inset: 0 auto 0 0;
		width: 320px;
		max-width: 86vw;
		background: #fff;
		display: flex;
		flex-direction: column;
		transform: translateX(-100%);
		transition: transform 220ms ease-out;
		box-shadow: 12px 0 32px rgba(20, 20, 26, .14);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.bb-mobile-nav.is-open .bb-mobile-nav__scrim {
		opacity: 1;
	}

	.bb-mobile-nav.is-open .bb-mobile-nav__panel {
		transform: translateX(0);
	}

	.bb-mobile-nav__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 20px 22px 16px;
		border-bottom: 1px solid var(--bb-hairline);
	}

	.bb-mobile-nav__wordmark {
		font-family: var(--bb-font-serif);
		font-size: 18px;
		font-weight: 600;
		color: var(--bb-ink);
	}

	.bb-mobile-nav__close {
		color: var(--bb-ink);
		cursor: pointer;
		padding: 4px;
		line-height: 0;
	}

	.bb-mobile-nav__tabs {
		display: flex;
		flex-direction: column;
		padding: 12px 0;
		border-bottom: 1px solid var(--bb-hairline);
	}

	.bb-mobile-nav__tab {
		font-family: var(--bb-font-serif);
		font-size: 14px;
		font-weight: 600;
		letter-spacing: .03em;
		text-transform: uppercase;
		color: var(--bb-ink);
		padding: 11px 22px;
		text-decoration: none;
	}

	.bb-mobile-nav__list {
		display: flex;
		flex-direction: column;
		padding: 8px 0 16px;
		flex: 1;
	}

	/* A 52px row is a comfortable touch target; 44px is the practical floor. */
	.bb-mobile-nav__link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		width: 100%;
		min-height: 52px;
		padding: 0 22px;
		font-size: 13px;
		font-weight: 600;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--bb-ink);
		background: none;
		border: 0;
		text-align: left;
		text-decoration: none;
		cursor: pointer;
	}

	.bb-mobile-nav__chev {
		flex: none;
		transition: transform 180ms ease-out;
	}

	.bb-mobile-nav__toggle[aria-expanded="true"] .bb-mobile-nav__chev {
		transform: rotate(180deg);
	}

	.bb-mobile-nav__sub {
		padding: 2px 0 14px;
		background: var(--bb-body-bg);
	}

	.bb-mobile-nav__sub[hidden] {
		display: none;
	}

	.bb-mobile-nav__subheading {
		font-size: 10px;
		font-weight: 700;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--bb-tertiary-alt);
		padding: 14px 22px 6px;
	}

	.bb-mobile-nav__sublink {
		display: block;
		min-height: 44px;
		line-height: 44px;
		padding: 0 22px;
		font-size: 13.5px;
		color: var(--bb-muted);
		text-decoration: none;
	}

	.bb-mobile-nav__foot {
		display: flex;
		flex-direction: column;
		border-top: 1px solid var(--bb-hairline);
		padding: 10px 0 24px;
	}

	.bb-mobile-nav__foot a {
		min-height: 46px;
		line-height: 46px;
		padding: 0 22px;
		font-size: 13px;
		color: var(--bb-muted);
		text-decoration: none;
	}

	/* While the drawer is open the page behind it must not scroll. */
	body.bb-nav-open {
		overflow: hidden;
	}
}

/* -------------------------------------------------------------------
 * Home page
 * ----------------------------------------------------------------- */

@media (max-width: 1024px) {
	.bb-cat-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}

	.bb-ig-grid {
		gap: 36px !important;
	}
}

@media (max-width: 760px) {
	/* 640px of hero on a phone is most of the screen before any content. */
	#bb-hero-slider {
		height: 460px !important;
	}

	#bb-hero-slider h1 {
		font-size: 30px !important;
		line-height: 1.2 !important;
	}

	#bb-hero-slider [style*="letter-spacing:.24em"] {
		font-size: 10.5px !important;
	}

	/* Side by side halves stack. */
	.bb-split-grid,
	.bb-watches-grid,
	.bb-ig-grid {
		grid-template-columns: 1fr !important;
	}

	.bb-split-panel {
		height: 320px !important;
	}

	.bb-watches-panel {
		height: 280px !important;
	}

	.bb-cat-grid,
	.bb-occ-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	/* Section rhythm: 80px of padding reads as a gap, not as breathing room. */
	main section[style*="padding:80px"],
	main section[style*="padding: 80px"] {
		padding-top: 48px !important;
		padding-bottom: 48px !important;
	}

	main h2[style*="font-size:28px"] {
		font-size: 22px !important;
		margin-bottom: 24px !important;
	}
}

@media (max-width: 560px) {
	#bb-hero-slider {
		height: 400px !important;
	}

	#bb-hero-slider h1 {
		font-size: 25px !important;
	}

	/* The two hero buttons side by side leave each one too narrow to read. */
	#bb-hero-slider [style*="display:flex;gap:16px"] {
		flex-direction: column !important;
		width: 100%;
		max-width: 260px;
	}

	#bb-hero-slider [style*="display:flex;gap:16px"] > a {
		text-align: center;
	}

	.bb-ig-tiles {
		gap: 6px !important;
	}
}

/* -------------------------------------------------------------------
 * Shop archives
 * ----------------------------------------------------------------- */

@media (max-width: 1024px) {
	.bb-product-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 18px !important;
	}

	/* The filter sidebar is a 240px fixed column. Below this width it takes the
	   full row above the products rather than squeezing them. */
	.bb-shop-layout {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}
}

@media (max-width: 760px) {
	.bb-product-grid,
	.bb-similar-grid,
	.bb-wishlist-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 16px !important;
	}
}

/* -------------------------------------------------------------------
 * Product page
 * ----------------------------------------------------------------- */

@media (max-width: 900px) {
	/* single-product.css lays the product out as a two-column grid, so that is
	   what has to collapse. No !important needed: this is a real stylesheet rule
	   competing with another, and the `body` prefix plus load order wins. */
	body .bb-pdp div.product {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
	}

	/* Collapsing the track list is not enough on its own. single-product.css
	   pins the gallery to `grid-column: 1` and the summary to `grid-column: 2`,
	   and an explicit placement past the last declared track creates an implicit
	   column rather than wrapping. The result was a two-track grid whose first
	   track collapsed to 0px, so the product image disappeared entirely. Both
	   children have to be released back to auto placement. */
	body .bb-pdp div.product .woocommerce-product-gallery,
	body .bb-pdp div.product .summary {
		grid-column: auto;
	}

	body .bb-pdp div.product div.images,
	body .bb-pdp div.product div.summary {
		float: none;
		width: 100%;
		margin: 0;
	}

	.bb-gallery-thumbs {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}

	/* Add to Bag is the page's one job on a phone. */
	body .bb-pdp form.cart .single_add_to_cart_button,
	body .bb-pdp .woocommerce-variation-add-to-cart .single_add_to_cart_button {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* The product tabs run off the edge once there are more than two. */
	body .bb-pdp .woocommerce-tabs ul.tabs {
		display: flex;
		overflow-x: auto;
		white-space: nowrap;
		scrollbar-width: none;
	}

	body .bb-pdp .woocommerce-tabs ul.tabs::-webkit-scrollbar {
		display: none;
	}
}

@media (max-width: 560px) {
	body .bb-pdp .product_title {
		font-size: 24px;
	}

	.bb-gallery-thumbs {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		gap: 8px !important;
	}
}

/* -------------------------------------------------------------------
 * Quick view
 * ----------------------------------------------------------------- */

@media (max-width: 760px) {
	#bb-quickview-content {
		grid-template-columns: 1fr !important;
		max-height: 92vh !important;
	}
}

/* -------------------------------------------------------------------
 * Footer
 * ----------------------------------------------------------------- */

@media (max-width: 900px) {
	.bb-help-grid {
		grid-template-columns: 1fr !important;
		gap: 36px !important;
		padding-top: 44px !important;
		padding-bottom: 44px !important;
	}

	.bb-footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 32px !important;
		padding-top: 44px !important;
		padding-bottom: 44px !important;
	}
}

@media (max-width: 560px) {
	.bb-footer-grid {
		grid-template-columns: 1fr !important;
	}

	/* Footer links are navigation on a phone, so they get touch-sized rows. */
	.bb-footer-links a {
		display: inline-block;
		padding: 4px 0;
	}
}

/* -------------------------------------------------------------------
 * Cart drawer
 * ----------------------------------------------------------------- */

@media (max-width: 560px) {
	#bb-cart-drawer {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* -------------------------------------------------------------------
 * Pagination
 * ----------------------------------------------------------------- */

@media (max-width: 560px) {
  .bb-pagination {
    margin-top: 36px;
    padding-top: 24px;
  }

  .bb-pagination__links .page-numbers {
    min-width: 38px;
    height: 38px;
    padding: 0 8px;
    font-size: 12.5px;
  }

  .bb-pagination__links .prev,
  .bb-pagination__links .next {
    font-size: 10.5px;
    padding: 0 10px;
  }
}