/*
 * v2.3.2 FIX: footer.php now always renders `<details ... open>` — relying
 * on CSS alone to force a *closed* <details>'s content visible turned out to
 * be browser-dependent (some engines hide closed-details children in a way
 * plain CSS, even with !important, can't reliably override). Instead,
 * assets/js/main.js's syncFooterAccordions() is the only thing that ever
 * adds/removes the `open` attribute: present above 767px (desktop, this
 * block just disables the click affordance since it's always open), removed
 * at/below 767px on load (see the max-width: 767px block for sizing) so
 * mobile starts collapsed and visitors can tap to expand.
 */
@media (min-width: 768px) {
	.hb-footer__accordion > summary {
		cursor: default;
		pointer-events: none;
	}

	.hb-footer__accordion > summary::after {
		display: none;
	}
}

@media (max-width: 1199px) {
	.hb-hero {
		min-height: 460px;
	}

	.hb-header-main__inner {
		grid-template-columns: minmax(160px, 190px) minmax(260px, 1fr) auto;
		gap: 1rem;
	}

	.hb-header-action--favorites {
		display: none;
	}

	.hb-home-categories {
		grid-auto-flow: row;
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.hb-footer__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.hb-footer__brand {
		grid-column: span 2;
	}

	.hb-account-layout {
		grid-template-columns: 230px minmax(0, 1fr);
	}

	.hb-account-stats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/*
 * Product grid column tiers, from widest to narrowest:
 * - unscoped (>=1560px): 6 without a sidebar, 5 with one (.hb-shop-layout:not(--full) override, woocommerce.css)
 * - 1024-1559px: 4 with a sidebar (below)
 * - 768-1023px (tablet, see the max-width: 1023px block): 3, both contexts
 * - <=767px (mobile, see the max-width: 767px block): 2, both contexts, never fewer
 * The with-sidebar selector is repeated at each tier (not just narrowed generically)
 * because it needs to match or beat the specificity of woocommerce.css's own
 * `.hb-shop-layout:not(.hb-shop-layout--full) ...` rule to actually win — a generic
 * lower-specificity `.woocommerce .products { ... }` next to it silently loses
 * regardless of which @media block "looks" more specific to a human reader.
 */
@media (max-width: 1559px) {
	.hb-shop-layout:not(.hb-shop-layout--full) .woocommerce ul.products,
	.hb-shop-layout:not(.hb-shop-layout--full) .woocommerce .products,
	.hb-shop-layout:not(.hb-shop-layout--full) .hb-product-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 1024px) {
	.hb-product-grid--compact {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/*
	 * v2.2.9: the desktop dynamic-width gallery (see woocommerce.css, ≥1025px)
	 * only makes sense with the extra horizontal room a desktop layout has.
	 * Tablet and mobile both just stack the two columns full-width instead.
	 */
	.woocommerce div.product .hb-single-product__top {
		display: block;
	}

	.woocommerce div.product .hb-single-product__gallery {
		width: 100%;
		min-width: 0;
		max-width: none;
	}
}

/*
 * v2.3.8: sidebar/layout breakpoint moved from 991px to 1023px, and the
 * layout/toolbar rules consolidated into one place instead of being spread
 * across (and overridden piecemeal by) several older tiers.
 */
@media (max-width: 1023px) {
	.hb-shop-layout {
		display: block;
	}

	.hb-shop-sidebar {
		display: none;
	}

	.hb-shop-layout__content {
		width: 100%;
		min-width: 0;
		max-width: 100%;
	}

	.hb-shop-filter-toggle {
		display: inline-flex;
	}

	.hb-product-grid,
	.woocommerce .products,
	.hb-shop-layout:not(.hb-shop-layout--full) .woocommerce ul.products,
	.hb-shop-layout:not(.hb-shop-layout--full) .woocommerce .products,
	.hb-shop-layout:not(.hb-shop-layout--full) .hb-product-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}

	.hb-shop-toolbar {
		flex-wrap: wrap;
	}

	.woocommerce .woocommerce-ordering,
	.woocommerce .woocommerce-result-count {
		float: none;
		width: 100%;
		margin: 0;
	}

	.woocommerce .woocommerce-ordering select {
		width: 100%;
		min-width: 0;
		max-width: 100%;
	}
}

@media (max-width: 991px) {
	html,
	body {
		font-size: 14px;
	}

	.hb-main {
		padding: 2rem 0;
	}

	.hb-header-topbar,
	.hb-header-nav,
	.hb-header-action--account,
	.hb-header-action--favorites {
		display: none;
	}

	.hb-header-main__inner {
		grid-template-columns: minmax(0, 1fr) auto auto;
		align-items: center;
		min-height: 58px;
		gap: 0.65rem;
		padding-block: 0.6rem;
	}

	.hb-header-main__search {
		grid-column: 1 / -1;
		order: 3;
		width: 100%;
	}

	.hb-header-search {
		min-height: 50px;
	}

	.hb-header-branding {
		min-width: 0;
	}

	.hb-header-logo__name {
		font-size: 1.12rem;
	}

	.hb-header-branding__tagline {
		font-size: 0.72rem;
	}

	.hb-header-actions {
		gap: 0.5rem;
	}

	.hb-header-action--cart {
		min-width: 48px;
	}

	.hb-header-action--cart .hb-header-action__text,
	.hb-header-action--cart .hb-cart-total {
		display: none;
	}

	.hb-header-action--cart .hb-cart-link__inner {
		position: relative;
		justify-content: center;
		width: 48px;
		min-height: 48px;
		padding: 0;
	}

	.hb-header-action--cart .hb-cart-count {
		position: absolute;
		top: -6px;
		right: -6px;
		display: inline-grid;
		place-items: center;
		min-width: 22px;
		height: 22px;
		padding: 0 0.25rem;
		border-radius: var(--hb-radius-pill);
		background: var(--hb-color-primary);
		color: #ffffff;
		font-size: 0.72rem;
	}

	.hb-grid--posts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.hb-home-product-showcase {
		grid-template-columns: 1fr;
	}

	.hb-single-product__summary {
		padding: 0.9rem;
	}

	.hb-hero {
		min-height: 380px;
	}

	.hb-hero__overlay {
		padding: 1.5rem 1.25rem;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.92) 55%, rgba(255, 255, 255, 0.55) 85%, rgba(255, 255, 255, 0.35) 100%);
	}

	.hb-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.hb-hero__button {
		min-height: 50px;
		text-align: center;
	}

	.hb-home-cta {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
		padding: 1.5rem;
	}

	.hb-home-cta__content {
		max-width: none;
	}

	.hb-home-cta__actions {
		flex-direction: column;
	}

	.hb-home-categories {
		display: flex;
		overflow-x: auto;
		padding-bottom: 0.3rem;
		scroll-snap-type: x proximity;
	}

	.hb-category-card {
		flex: 0 0 150px;
		scroll-snap-align: start;
	}

	.hb-home-section__title {
		font-size: 1.38rem;
	}

	/*
	 * v2.2.2: below desktop, .hb-benefits switches from "one bordered strip
	 * with internal divider lines" to a 2x2 grid of independent cards — no
	 * shared outer border/background, no nth-child divider borders (those
	 * only made sense for the single-row strip and fought the 2-column
	 * wrap). Stays 2 columns down to 320px, see the 480px/360px blocks below
	 * for the smaller padding/font-size steps — never collapses to 1.
	 */
	.hb-benefits {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		border: 0;
		background: transparent;
	}

	.hb-benefits__item {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.4rem;
		min-width: 0;
		padding: 12px;
		border: 1px solid var(--hb-color-border);
		border-radius: var(--hb-radius-md);
		background: var(--hb-color-surface);
	}

	.hb-benefits__title {
		display: -webkit-box;
		overflow: hidden;
		font-size: 0.94rem;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.hb-benefits__description {
		display: -webkit-box;
		overflow: hidden;
		font-size: 0.84rem;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}

	.hb-footer__grid {
		grid-template-columns: 1fr 1fr;
	}

	.hb-footer__brand {
		grid-column: 1 / -1;
	}

	.hb-footer__bottom-inner {
		align-items: flex-start;
		flex-direction: column;
	}

	.hb-page-hero__inner,
	.hb-section-title-row,
	.hb-favorites__toolbar,
	.hb-support-strip {
		align-items: flex-start;
		flex-direction: column;
	}

	.hb-form-layout,
	.hb-checkout-grid,
	.hb-cart-layout {
		grid-template-columns: 1fr;
	}

	.hb-checkout-grid__review,
	.hb-cart-summary {
		position: static;
		top: auto;
	}

	.hb-account-layout {
		grid-template-columns: 1fr;
	}

	.hb-account-nav {
		position: static;
		overflow-x: auto;
	}

	.hb-account-nav ul {
		display: flex;
		gap: 0.4rem;
		min-width: max-content;
	}

	.hb-account-nav a {
		white-space: nowrap;
	}

	.hb-blog-grid,
	.hb-help-cards,
	.hb-address-grid,
	.hb-order-overview,
	.hb-account-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hb-account-dashboard-grid,
	.hb-account-addresses {
		grid-template-columns: 1fr;
	}

	/*
	 * Tablet fix: the mobile header row runs to 991px, not 767px.
	 * Above 767px the desktop .hb-header-main__inner used to take over while
	 * this block had already hidden the topbar, the category nav and the
	 * account/favorites buttons - and the only [data-hb-menu-toggle] lives
	 * inside .hb-header-mobile-row, so 768-991px ended up with a header that
	 * had no navigation at all and no way to open the drawer. These rules sit
	 * at the end of the block so they still beat the --account/--favorites
	 * display:none declared above, and ahead of the 767px block so every
	 * narrower phone override still wins.
	 */

	/*
	 * v2.3.2 FIX: the desktop .hb-header-main__inner (branding/search/actions
	 * sharing one .hb-header-actions parent) is hidden outright on mobile —
	 * a single shared parent can only ever land in one grid area, so account,
	 * favorites and cart could never split into independent left/right groups
	 * from it. header.php now renders a real, separate .hb-header-mobile-row
	 * with each button as its own grid item instead: [menu][account] left,
	 * logo dead-center, [favoriler][cart] right, both groups equal width.
	 */
	.hb-header-main__inner {
		display: none;
	}

	.hb-header-mobile-row {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		gap: 8px;
		width: 100%;
		padding-block: 8px;
	}

	.hb-header-main__search--mobile {
		display: block;
		width: 100%;
		padding-bottom: 8px;
	}

	.hb-header-mobile-row__left,
	.hb-header-mobile-row__right {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	/*
	 * v2.3.3 FIX: left/right groups both hold exactly 2 same-size (44px)
	 * buttons + this 8px gap, so both auto-sized columns above end up
	 * identical width (96px) from their own content — real symmetry, not a
	 * hardcoded number that only happens to match.
	 */
	.hb-header-mobile-row__logo {
		justify-self: center;
		min-width: 0;
		max-width: 100%;
	}

	.hb-header-mobile-row .hb-header-branding {
		display: grid;
		justify-items: center;
		gap: 0;
		min-width: 0;
		text-align: center;
	}

	.hb-header-mobile-row .hb-header-branding__tagline {
		display: none;
	}

	.hb-header-mobile-row .hb-header-logo .custom-logo-link,
	.hb-header-mobile-row .hb-header-logo__link {
		max-width: 130px;
	}

	.hb-header-mobile-row .hb-header-logo .custom-logo {
		max-width: 115px;
		max-height: 40px;
		width: auto;
		height: auto;
	}

	.hb-header-mobile-row .hb-header-logo__image {
		max-width: 130px;
		max-height: 32px;
		width: auto;
		height: auto;
	}

	.hb-header-mobile-row .hb-header-logo__name {
		overflow: hidden;
		max-width: 90px;
		font-size: 1rem;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	/* All four mobile-row buttons: identical 44×44 icon-only squares. */
	.hb-mobile-toggle,
	.hb-header-mobile-row .hb-header-action {
		width: 44px;
		height: 44px;
		min-width: 44px;
		min-height: 44px;
		padding: 0;
		display: grid;
		place-items: center;
		border: 1px solid var(--hb-color-border);
		border-radius: var(--hb-radius-md);
		background: var(--hb-color-surface);
	}

	.hb-header-mobile-row .hb-header-action,
	.hb-header-mobile-row .hb-cart-link__inner {
		position: relative;
	}

	.hb-header-mobile-row .hb-cart-link__inner {
		display: grid;
		place-items: center;
		width: 100%;
		height: 100%;
	}

	/*
	 * v2.3.4 FIX: components.css's desktop .hb-header-action / .hb-cart-link__inner
	 * rules add a `border-left` (the separator between account/favorites/cart
	 * in the desktop row) and their own padding — neither is touched by the
	 * width/height/padding:0/border reset above (that rule never set
	 * border-left or .hb-cart-link__inner's own padding), so both leaked
	 * through as a stray vertical line inside the cart button on mobile.
	 * Reset explicitly here; the button's own full 1px border (set above)
	 * is untouched.
	 */
	.hb-header-mobile-row .hb-header-action,
	.hb-header-mobile-row .hb-cart-link__inner {
		padding: 0;
		border-left: 0;
	}

	/*
	 * v2.3.3 FIX: every icon SVG in the row — including the menu toggle's,
	 * which sits directly inside .hb-mobile-toggle with no .hb-header-action__icon
	 * wrapper — is forced to the same 20px box. Previously only account/
	 * favorites/cart's icons picked up 20px (via .hb-header-action__icon
	 * .hb-icon in components.css); the menu icon fell back to its own raw
	 * SVG width="22" attribute, 2px larger than the other three and the
	 * visible cause of the "icons don't sit on one line" report.
	 * display:block avoids any inline-baseline drift; flex-shrink:0 stops a
	 * tight grid/flex track from squeezing it.
	 */
	.hb-header-mobile-row .hb-mobile-toggle svg,
	.hb-header-mobile-row .hb-header-action__icon svg {
		display: block;
		width: 20px;
		height: 20px;
		flex-shrink: 0;
	}

	.hb-header-mobile-row .hb-cart-total {
		display: none;
	}

	/*
	 * v2.3.3 FIX (layout): .hb-header-action__text is taken out of flow. An
	 * absolutely positioned child is never generated as a grid item at all,
	 * so each button's grid (.hb-header-action / .hb-cart-link__inner, both
	 * place-items: center) ends up with exactly ONE real item — the icon —
	 * centered with no second "row" for the (hidden) text to occupy.
	 */
	.hb-header-mobile-row .hb-header-action__text {
		position: absolute;
		inset: 0;
		overflow: hidden;
	}

	/*
	 * v2.3.4 FIX (visibility): 2.3.3 only zeroed __text's own font-size,
	 * expecting it to be inherited down — but .hb-header-action__title and
	 * .hb-header-action__subtitle both carry their OWN explicit font-size in
	 * components.css (0.82rem / 0.72rem), and an element's own declared value
	 * always wins over an inherited one regardless of specificity. That's why
	 * "Hesabım" / the username / "Favoriler" / "Ürün" kept showing on mobile
	 * despite __text's font-size: 0. Fixed by targeting __title and
	 * __subtitle directly (2-class specificity beats their 1-class own
	 * rules): __title has no descendant that needs to survive, so plain
	 * display: none is safe; __subtitle's own font-size: 0 is what actually
	 * collapses the raw " Ürün"/etc. label text (and, via inheritance, the
	 * count span) — the badge rule below then restores the count's own
	 * font-size explicitly, overriding the inherited 0 the same way __title's
	 * old font-size overrode __text's.
	 */
	.hb-header-mobile-row .hb-header-action__title {
		display: none;
	}

	.hb-header-mobile-row .hb-header-action__subtitle {
		font-size: 0;
		line-height: 0;
	}

	.hb-header-mobile-row .hb-cart-count,
	.hb-header-mobile-row [data-hb-favorites-count] {
		position: absolute;
		top: 4px;
		right: 4px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 18px;
		height: 18px;
		padding: 0 4px;
		border-radius: var(--hb-radius-pill);
		background: var(--hb-color-primary);
		color: #ffffff;
		font-size: 11px;
		font-weight: 800;
		line-height: 1;
	}
}

@media (max-width: 767px) {
	.hb-button,
	input[type="submit"] {
		min-height: 48px;
	}

	/*
	 * v2.3.3: compact mobile search — shorter box, tighter radius/padding,
	 * icon-only submit button (its "Ara" label only makes sense once there's
	 * room for it, on tablet/desktop).
	 */
	.hb-header-search {
		min-height: 50px;
		border-radius: 12px;
	}

	.hb-header-search__field {
		padding: 0 0.85rem;
		font-size: 0.9rem;
	}

	.hb-header-search__submit {
		width: 60px;
	}

	.hb-header-search__submit span {
		display: none;
	}

	.hb-container,
	.hb-container--narrow {
		width: min(100% - 20px, var(--hb-container-width));
	}

	.hb-main {
		padding-top: 0;
	}

	.hb-main--woocommerce,
	.hb-main--shop {
		padding-top: 10px;
	}

	.hb-page-shell {
		gap: 12px;
		padding-top: 10px;
		padding-bottom: 1.5rem;
	}

	.hb-page-hero {
		padding: 0;
		gap: 6px;
	}

	.hb-page-hero__title {
		margin: 0;
	}

	/*
	 * Checkout/cart already build their own bordered panels
	 * (.hb-checkout-shell, .hb-order-review, .hb-cart-items, .hb-cart-summary)
	 * one level down — .hb-page-content's own card padding/border/shadow on
	 * top of those is a redundant outer box on these two pages only.
	 */
	body.woocommerce-checkout .hb-page-content,
	body.woocommerce-cart .hb-page-content {
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		margin-top: 0;
	}

	.hb-page-hero__title {
		font-size: 1.65rem;
	}

	.hb-system-panel,
	.hb-side-panel,
	.hb-page-content,
	.hb-single-post,
	.hb-error-page {
		padding: 1rem;
	}

	.hb-error-page {
		grid-template-columns: 1fr;
	}

	.hb-error-page__mark {
		display: none;
	}

	.hb-form__grid,
	.hb-buyer-form-grid,
	.hb-auth-layout--registration-enabled,
	.hb-blog-grid,
	.hb-help-cards,
	.hb-address-grid,
	.hb-order-overview,
	.hb-checkout-progress,
	.hb-view-order__grid {
		grid-template-columns: 1fr;
	}

	.hb-account-header,
	.hb-account-status,
	.hb-account-card__head,
	.hb-view-order__header,
	.hb-mini-order,
	.hb-order-item {
		align-items: stretch;
		grid-template-columns: 1fr;
		flex-direction: column;
	}

	.hb-order-item__image {
		width: 100%;
		max-width: 140px;
	}

	.hb-summary-list div {
		grid-template-columns: 1fr;
		gap: 0.2rem;
	}

	.hb-account-table thead {
		display: none;
	}

	.hb-account-table,
	.hb-account-table tbody,
	.hb-account-table tr,
	.hb-account-table td {
		display: block;
		width: 100%;
	}

	.hb-account-table tr {
		padding: 0.75rem;
		margin-bottom: 0.75rem;
		border: 1px solid var(--hb-color-border);
		border-radius: var(--hb-radius-md);
		background: #ffffff;
	}

	.hb-account-table td {
		padding: 0.35rem 0;
		border: 0;
	}

	.hb-account-table td::before {
		content: attr(data-title);
		display: block;
		margin-bottom: 0.15rem;
		color: var(--hb-color-muted);
		font-size: 0.78rem;
		font-weight: 850;
	}

	.hb-checkout-progress li {
		padding: 0.62rem 0.72rem;
	}

	.hb-file-input__control {
		grid-template-columns: minmax(0, 1fr);
		align-items: stretch;
	}

	.hb-file-input__button {
		width: 100%;
	}

	.hb-support-strip__actions {
		width: 100%;
	}

	.hb-support-strip__actions .hb-button {
		flex: 1 1 auto;
	}

	.hb-hero {
		min-height: 320px;
	}

	.hb-hero__title {
		font-size: clamp(2rem, 7vw, 2.4rem);
	}

	/*
	 * v2.3.8: 320-430px keeps exactly 2 columns (was 3, which is what made
	 * cards too narrow to be usable) — the with-sidebar-specific selector is
	 * repeated here too so it can actually beat the 4-/3-column with-sidebar
	 * rules at wider breakpoints on specificity, not just win on media order.
	 */
	.hb-product-grid,
	.woocommerce .products,
	.woocommerce .products.hb-shop-grid--3,
	.woocommerce .products.hb-shop-grid--4,
	.woocommerce .products.hb-shop-grid--5,
	.woocommerce .products.columns-5,
	.woocommerce .products.columns-4,
	.woocommerce .products.columns-3,
	.hb-shop-layout:not(.hb-shop-layout--full) .woocommerce ul.products,
	.hb-shop-layout:not(.hb-shop-layout--full) .woocommerce .products,
	.hb-shop-layout:not(.hb-shop-layout--full) .hb-product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px;
		width: 100%;
		margin: 0;
	}

	.hb-product-grid--compact,
	.woocommerce .up-sells ul.products,
	.woocommerce .related ul.products,
	.hb-favorites__grid,
	.hb-recently-viewed__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.woocommerce ul.products li.product,
	.hb-product-card {
		display: flex;
		flex-direction: column;
		width: auto;
		min-width: 0;
		max-width: none;
		margin: 0;
		border-radius: 12px;
		overflow: hidden;
	}

	.hb-product-card__body {
		padding: 8px;
	}

	.hb-product-card__title {
		font-size: 13px;
		line-height: 1.3;
	}

	/*
	 * v2.3.8: price HTML (del + ins, sometimes a secondary currency line from
	 * a plugin) is free-flowing inline content — without wrap it can overflow
	 * a 2-column mobile card's width instead of dropping to a second line.
	 */
	.hb-product-card__price {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 3px 5px;
		font-size: 14px;
	}

	.hb-product-card__cart {
		width: 100%;
		min-height: 40px;
		margin-top: auto;
		padding-inline: 6px;
		font-size: 12px;
	}

	.hb-promo-banners {
		grid-template-columns: 1fr;
	}

	.hb-promo-banner {
		grid-template-columns: 1fr;
		min-height: 0;
		padding: 1rem;
	}

	.hb-promo-banner__media {
		display: none;
	}

	.woocommerce table.cart td.product-thumbnail img {
		width: 52px;
		height: 52px;
	}

	.woocommerce-cart .cart-collaterals .cart_totals {
		max-width: 100%;
		margin-left: 0;
	}

	.hb-cart-item {
		grid-template-columns: 86px minmax(0, 1fr);
	}

	.hb-cart-item__media img {
		width: 86px;
		height: 86px;
	}

	.hb-cart-item__body {
		grid-template-columns: 1fr;
		gap: 0.65rem;
	}

	.hb-cart-actions,
	.hb-cart-items__header {
		align-items: stretch;
		flex-direction: column;
	}

	.hb-cart-actions .button,
	.hb-cart-items__header .hb-button {
		width: 100%;
	}

	.woocommerce-cart .coupon {
		width: 100%;
	}

	.woocommerce-cart .coupon .input-text {
		flex: 1 1 auto;
		min-width: 0;
	}

	/*
	 * v2.3.8 FIX: [Filtrele][count][Sırala] used to be forced into one
	 * `flex-wrap: nowrap` row — that's exactly what didn't fit at 320–430px
	 * (confirmed: .hb-shop-toolbar's own scrollWidth exceeded its
	 * clientWidth here). Toolbar markup was rebuilt around
	 * .hb-shop-toolbar__actions (filter + sort) and .hb-shop-toolbar__results
	 * (count), and mobile now stacks them: actions on row 1 (filter button +
	 * sort select sharing the row via grid), result count on its own row 2.
	 */
	.hb-shop-toolbar {
		display: grid;
		grid-template-columns: 1fr;
		gap: 8px;
		width: 100%;
		padding: 8px;
	}

	.hb-shop-toolbar__actions {
		display: grid;
		grid-template-columns: minmax(110px, auto) minmax(0, 1fr);
		gap: 8px;
		width: 100%;
	}

	.hb-shop-toolbar__filter,
	.hb-shop-toolbar__sort,
	.hb-shop-toolbar__sort form,
	.hb-shop-toolbar__sort select {
		min-width: 0;
		max-width: 100%;
	}

	.hb-shop-toolbar__sort select {
		width: 100%;
		height: 44px;
		padding-inline: 12px 34px;
		border-radius: var(--hb-radius-md);
		font-size: 13px;
	}

	.hb-shop-toolbar__filter {
		height: 44px;
		padding-inline: 12px;
		white-space: nowrap;
	}

	.hb-shop-toolbar__results {
		width: 100%;
		font-size: 12px;
		line-height: 1.35;
		color: var(--hb-color-muted);
		text-align: left;
		white-space: normal;
	}

	/*
	 * v2.2.2: compact, symmetrical 2x2 footer. Brand stays full-width above;
	 * Kategoriler/Kurumsal/Destek/Ödeme Yöntemleri form the 2x2 grid. Each
	 * <details> ships closed (no `open` attribute in footer.php) so the
	 * section only takes ~44px until the visitor taps it open.
	 */
	.hb-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px 12px;
		padding-block: 24px;
	}

	.hb-footer__brand {
		grid-column: 1 / -1;
	}

	.hb-footer__nav {
		min-width: 0;
	}

	.hb-footer .custom-logo {
		max-width: 90px;
		max-height: 32px;
	}

	.hb-footer__brand-name {
		font-size: 0.86rem;
	}

	.hb-footer__description {
		display: -webkit-box;
		overflow: hidden;
		max-width: none;
		font-size: 0.78rem;
		line-height: 1.4;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}

	.hb-footer__title {
		font-size: 0.92rem;
	}

	.hb-footer__accordion > summary {
		min-height: 44px;
	}

	.hb-footer__menu {
		gap: 6px;
	}

	.hb-footer__menu a {
		font-size: 0.8rem;
		line-height: 1.4;
	}

	/*
	 * v2.5.1/2.5.2: center the Ödeme Yöntemleri block on mobile. Root cause of
	 * the earlier left-shift: .hb-footer__grid is a 2-column grid on mobile
	 * (repeat(2, minmax(0, 1fr))) and .hb-footer__payments was never told to
	 * span both columns, so it — and everything centered inside it — only had
	 * half the footer's width to center within. `grid-column: 1 / -1` is the
	 * fix; centering rules alone cannot compensate for a half-width track.
	 */
	.hb-footer__payments {
		grid-column: 1 / -1;
		justify-self: stretch;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		max-width: none;
		min-width: 0;
		margin: 0;
		padding: 12px 8px;
		text-align: center;
	}

	.hb-footer__payments .hb-footer__title {
		width: 100%;
		margin: 0 0 8px;
		text-align: center;
	}

	.hb-footer__payments .hb-payment-logos {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		width: auto;
		max-width: 100%;
		min-width: 0;
		margin: 8px auto 10px;
		padding: 0;
		gap: 8px;
	}

	.hb-footer__payments .hb-payment-logos__item {
		display: block;
		flex: 0 1 auto;
		width: auto;
		height: 26px;
		max-width: 92px;
		margin: 0;
		padding: 3px 6px;
		object-fit: contain;
	}

	.hb-footer__payments > p {
		display: block;
		width: 100%;
		max-width: 290px;
		margin: 0 auto;
		padding: 0;
		text-align: center;
		font-size: 0.78rem;
		line-height: 1.45;
	}

	/*
	 * v2.3.6: .hb-archive-header stays horizontal on mobile too — title +
	 * count share one grid row, description drops to its own row underneath
	 * (still full-width of the left column, not stacked with the count).
	 * Never collapse this to display:block for the whole row; that's the
	 * "title / description / count" vertical stack this component exists
	 * to replace.
	 */
	.hb-archive-header {
		width: 100%;
		margin: 10px 0 12px;
		padding: 13px;
		border-radius: 14px;
	}

	.hb-archive-header__breadcrumb {
		margin-bottom: 8px;
		font-size: 12px;
	}

	.hb-archive-header__row {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
		gap: 8px;
	}

	.hb-archive-header__main {
		display: block;
		min-width: 0;
	}

	/*
	 * v2.3.8: search-result titles ("Arama Sonuçları: {query}") can be an
	 * arbitrary, unbreakable user-typed string — clamp() plus
	 * overflow-wrap: anywhere keeps a long one from forcing the row wider
	 * than the viewport instead of just wrapping.
	 */
	.hb-archive-header__title {
		min-width: 0;
		margin: 0;
		font-size: clamp(23px, 7vw, 28px);
		line-height: 1.08;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.hb-archive-header__description {
		margin-top: 6px;
		overflow: visible;
		font-size: 13px;
		line-height: 1.4;
		white-space: normal;
		text-overflow: clip;
		overflow-wrap: anywhere;
	}

	.hb-archive-header__count {
		flex-shrink: 0;
		align-self: start;
		min-height: 30px;
		padding: 0 9px;
		font-size: 12px;
		white-space: nowrap;
	}

	.hb-archive-header__actions {
		margin-top: 10px;
		justify-content: stretch;
	}
}

/*
 * v2.5.2: the base <=767px rule above already sets flex-wrap: nowrap plus
 * 26px/92px logo sizing, which fits all 3 logos on one row down to 360px.
 * Below that, shrink further instead of wrapping — three logos still fit
 * one row at 320px once they're small enough.
 */
@media (max-width: 359px) {
	.hb-footer__payments .hb-payment-logos {
		gap: 5px;
	}

	.hb-footer__payments .hb-payment-logos__item {
		height: 23px;
		max-width: 78px;
		padding: 3px 5px;
	}
}

@media (max-width: 640px) {
	.hb-mobile-drawer__actions,
	.hb-mobile-drawer__quicklinks,
	.hb-promo-banner {
		grid-template-columns: 1fr;
	}

	.hb-promo-banner {
		display: grid;
		align-items: start;
	}

	.hb-grid--posts {
		grid-template-columns: 1fr;
	}

	.hb-single-heading__title {
		font-size: 1.55rem;
	}

	.hb-single-price__value {
		font-size: 1.45rem;
	}

	.woocommerce div.product form.cart,
	.woocommerce div.product form.cart .single_variation_wrap,
	.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
		align-items: stretch;
	}

	.woocommerce div.product form.cart .button,
	.woocommerce div.product form.cart button.single_add_to_cart_button,
	.hb-single-wishlist {
		flex: 1 1 auto;
	}

	body.hb-has-mobile-product-bar {
		padding-bottom: calc(74px + env(safe-area-inset-bottom));
	}

	.hb-mobile-product-bar {
		display: grid;
	}

	.hb-shop-header__description:not(.is-expanded) {
		max-height: 4.8em;
		overflow: hidden;
	}

	.hb-shop-header__more {
		display: inline-flex;
	}

}

@media (max-width: 560px) {
	.hb-container,
	.hb-container--narrow {
		width: min(100% - 1rem, var(--hb-container-width));
	}

	.hb-header-logo__mark,
	.hb-footer__brand-mark {
		width: 38px;
		height: 38px;
		border-radius: 12px;
	}

	.hb-header-logo__name {
		font-size: 1rem;
	}

	.hb-header-branding__tagline {
		max-width: 12rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.hb-filter-drawer__footer {
		display: grid;
		grid-template-columns: 1fr;
	}

	.woocommerce div.product div.images .flex-control-thumbs li,
	.woocommerce div.product div.images .flex-control-thumbs img {
		width: 66px;
		height: 66px;
	}

	.hb-single-meta__row {
		grid-template-columns: 1fr;
		gap: 0.18rem;
	}

	.woocommerce #reviews #comments ol.commentlist li {
		grid-template-columns: 1fr;
	}

	.hb-home-section__header {
		align-items: flex-start;
		flex-direction: column;
	}

	.hb-home-product-panel {
		padding: 0.75rem;
	}

	.hb-home-product-panel__header {
		align-items: center;
		flex-direction: row;
	}

	.hb-product-grid {
		gap: 0.6rem;
	}

	.hb-product-card__body {
		padding: 0.65rem;
	}

	.hb-product-card__title {
		font-size: 0.84rem;
	}

	.hb-benefits {
		gap: 8px;
	}

	.hb-benefits__item {
		padding: 10px;
	}
}

/* Product grid drops to 2 columns from here down to 320px (never 1). */
@media (max-width: 480px) {
	.hb-product-grid,
	.woocommerce .products,
	.woocommerce .products.hb-shop-grid--3,
	.woocommerce .products.hb-shop-grid--4,
	.woocommerce .products.hb-shop-grid--5,
	.woocommerce .products.columns-5,
	.woocommerce .products.columns-4,
	.woocommerce .products.columns-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 0.55rem;
	}

	.hb-product-grid--compact,
	.woocommerce .up-sells ul.products,
	.woocommerce .related ul.products,
	.hb-favorites__grid,
	.hb-recently-viewed__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.hb-home-section {
		padding: 1rem 0;
	}

	.hb-home-section__title {
		font-size: 1.2rem;
	}

	.hb-product-card__body {
		padding: 0.55rem;
	}

	.hb-product-card__title {
		font-size: 0.86rem;
	}

	.hb-product-card__price {
		font-size: 1rem;
	}

	.hb-product-card__cart {
		min-height: 42px;
		font-size: 0.78rem;
	}

	.hb-benefits {
		gap: 8px;
	}

	.hb-benefits__item {
		padding: 8px;
	}

	.hb-benefits__title {
		font-size: 0.88rem;
	}

	.hb-benefits__description {
		font-size: 0.78rem;
	}
}

@media (max-width: 360px) {
	.hb-header-main__inner {
		gap: 0.45rem;
	}

	.hb-header-logo__mark {
		display: none;
	}

	.hb-header-action--cart .hb-cart-link__inner,
	.hb-mobile-toggle {
		width: 44px;
		height: 44px;
	}

	.hb-product-card__cart {
		min-height: 40px;
		padding: 0.4rem 0.35rem;
		font-size: 0.74rem;
	}

	.hb-mobile-product-bar {
		grid-template-columns: 1fr;
	}

	.hb-mobile-product-bar__price {
		text-align: center;
	}

	.hb-account-stats {
		grid-template-columns: 1fr;
	}
}

/*
 * Down to 320px the product grid stays at 2 columns per spec (never
 * collapses to 1) — only non-grid, very-narrow-screen tweaks live here.
 */
@media (max-width: 340px) {
	.hb-product-grid,
	.hb-product-grid--compact {
		gap: 0.5rem;
	}

	.woocommerce .quantity.hb-quantity {
		grid-template-columns: 34px minmax(48px, 1fr) 34px;
	}
}

/*
 * v2.5.0: iyzico-readiness legal UI at mobile widths — long Turkish labels
 * (MERSİS Numarası, İade Kargo Firması, etc.) need to stack instead of
 * squeezing into a fixed two-column row; the cookie banner and checkout
 * agreement text need smaller type and full-width stacked buttons.
 */
@media (max-width: 560px) {
	.hb-legal-company-block__row {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}

	.hb-legal-doc-table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}

	.hb-cookie-banner {
		left: 8px;
		right: 8px;
		bottom: 8px;
		max-width: none;
		padding: 0.85rem 0.9rem;
	}

	.hb-cookie-banner__actions {
		flex-direction: column;
	}

	.hb-cookie-banner__actions .hb-button {
		width: 100%;
	}

	.hb-legal-checkbox {
		font-size: 0.84rem;
	}
}