/* ==========================================================================
   Qelq — shared components (catalogue in build/spec/conventions.md)

   Specificity notes
   -----------------
   * `:root .q-x` is used as a cheap, order-independent +1 class bump. It is
     needed where the Elementor kit (`.elementor-kit-N a`, `.elementor-kit-N h2`,
     0,1,1), Elementor widget defaults (`.elementor-widget-text-editor`,
     `.elementor-widget-button .elementor-button`, 0,2,0), Cartify element rules
     (`input[type=email]`, `a:focus{outline:0}`) or WooCommerce
     (`.woocommerce button.button.alt`, 0,3,1) would otherwise win.
   * Elementor containers read layout from custom properties (--padding-top,
     --row-gap, --flex-direction, --e-con-grid-template-columns ...). We set
     those properties with low specificity, so explicit layout settings made in
     Elementor (printed per element, 0,3,0) always win. We never fight them.
   * Elementor widget wrappers carry our classes (`_css_classes`); the inner
     element (.elementor-heading-title, .elementor-button, img) is styled
     through the wrapper.
   * Breakpoints follow Elementor: tablet <= 1024px, mobile <= 767px.
   ========================================================================== */


/* ==========================================================================
   0. Elementor normalisation inside rebuilt content
   ========================================================================== */

/* Nested containers: drop Elementor's 10px default container padding (the
   design never uses it). Padding set in Elementor is printed per element with
   higher specificity and still applies. */
.q-section .e-con,
.e-con.q-season {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
}

/* Text editor widgets take colour/typography from their q- class or section,
   not from Elementor's global defaults. */
.q-section .elementor-widget-text-editor {
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
}

/* Cartify gives every <p> a 30px bottom margin; the design spaces paragraphs
   by 16px and never adds trailing space. */
.q-section .elementor-widget-text-editor p {
	margin: 0 0 16px;
}

.q-section .elementor-widget-text-editor :is(p, ul, ol):last-child {
	margin-bottom: 0;
}

.q-section .elementor-widget-text-editor :is(ul, ol) {
	margin: 0 0 16px;
	padding-left: 1.25em;
}

/* Inline links inside running text */
:root .q-section .elementor-widget-text-editor a,
:root .q-section p > a:not([class]) {
	color: var(--q-navy);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

:root .q-section .elementor-widget-text-editor a:hover,
:root .q-section p > a:not([class]):hover {
	text-decoration-thickness: 2px;
}

/* Heading widgets: wrapper carries the type style, the title inherits it
   (beats `.elementor-widget-heading .elementor-heading-title` global
   defaults, the kit's `h2` rules and Cartify's heading margins). */
.q-section .elementor-widget-heading {
	font-family: var(--q-font-display);
	font-weight: 500;
}

:root .elementor-element[class*=" q-"] .elementor-heading-title,
:root .q-section .elementor-heading-title {
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-wrap: inherit;
	color: inherit;
	margin: 0;
	padding: 0;
}

.elementor-heading-title a {
	color: inherit;
	text-decoration: none;
}

/* Raw headings inside HTML widgets / shortcodes in rebuilt sections */
:root .q-section :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--q-font-display);
	font-weight: 500;
	color: inherit;
	margin: 0;
}

/* Visible focus everywhere in rebuilt content. Cartify removes outlines on
   a/button/input/select:focus (0,1,1 / 0,2,1); this is 0,3,0. */
:is(.q-section, .q-products, .q-topbar, .q-hicons, .q-newsletter, .q-crumbs, .q-pagination, .q-sort)
:is(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--q-focus);
	outline-offset: 3px;
}

/* Anchor containers (cards rendered as <a>) */
:root a.e-con {
	color: inherit;
	text-decoration: none;
}


/* ==========================================================================
   1. Typography
   ========================================================================== */

:root :is(.q-display, .q-h1, .q-h2, .q-h2s, .q-h3, .q-h4, .q-h5) {
	font-family: var(--q-font-display);
	font-weight: 500;
	margin: 0;
}

:root .q-display {
	font-size: 56px;
	line-height: 1.06;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

:root .q-h1 {
	font-size: 48px;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

:root .q-h2 {
	font-size: 40px;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

:root .q-h2s {
	font-size: 30px;
	line-height: 1.2;
	letter-spacing: normal;
}

:root .q-h3 {
	font-size: 24px;
	line-height: 1.25;
	letter-spacing: normal;
}

:root .q-h4 {
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: normal;
}

:root .q-h5 {
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: normal;
}

:root .q-eyebrow {
	font-family: var(--q-font-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--q-muted);
}

:root .q-lead {
	font-size: 19px;
	line-height: 1.55;
}

:root .q-body {
	font-size: 17px;
	line-height: 1.6;
	color: var(--q-body);
}

:root .q-text {
	font-size: 16px;
	line-height: 1.5;
}

:root .q-small {
	font-size: 14px;
	line-height: 1.5;
}

:root .q-muted {
	color: var(--q-muted);
}

/* Text classes are body copy even when put on a heading widget */
:root :is(.q-lead, .q-body, .q-text, .q-small) {
	font-family: var(--q-font-body);
}

:root .elementor-widget-heading:is(.q-lead, .q-body, .q-text, .q-small) {
	font-weight: 400;
}

/* Cartify's 30px <p> margin on raw text */
:root p:is(.q-lead, .q-body, .q-text, .q-small, .q-muted, .q-eyebrow) {
	margin: 0;
}

/* Measures: beat Elementor's `.e-con > .elementor-widget { max-width:100% }` */
:root .q-measure,
:root .elementor-element.q-measure {
	max-width: 520px;
}

:root .q-measure-lg,
:root .elementor-element.q-measure-lg {
	max-width: 640px;
}

:root .q-price,
:root .q-price.elementor-widget :is(.price, .amount, ins, bdi) {
	font-family: var(--q-font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: inherit;
	text-decoration: none;
	background: none;
}

:root .q-price.elementor-widget .price {
	margin: 0;
}

:root .q-price.elementor-widget del {
	color: var(--q-muted);
	font-weight: 400;
	opacity: 1;
}


/* ==========================================================================
   2. Dark context — `q-dark` on a navy/ink section (or any inner container)
   ========================================================================== */

:root .q-dark {
	color: var(--q-cream);
}

:root .q-dark .elementor-widget-heading,
:root .q-dark :is(h1, h2, h3, h4, h5, h6),
:root .q-dark :is(.q-display, .q-h1, .q-h2, .q-h2s, .q-h3, .q-h4, .q-h5) {
	color: var(--q-white);
}

:root .q-dark .q-eyebrow {
	color: var(--q-sand);
}

:root .q-dark :is(.q-lead, .q-body, .q-text, .q-small) {
	color: var(--q-cream);
}

:root .q-dark .q-muted {
	color: var(--q-footer-muted);
}

:root .q-dark .elementor-widget-text-editor a,
:root .q-dark p > a:not([class]) {
	color: var(--q-sand);
}


/* ==========================================================================
   3. Buttons — btn(text, href, variant) => `q-btn q-btn--<variant>` on the
   Elementor button widget; also works on a raw <a>/<button class="q-btn">.
   Inside the widget we style .elementor-button (and WooCommerce `.button` /
   submit buttons, so `q-btn` also works on Woo add-to-cart widgets).
   Elementor's own button styles (grey bg, 15px, 12px 24px padding, kit hover)
   are neutralised by specificity (0,4,0), no !important.
   ========================================================================== */

:root :is(.q-btn:not(.elementor-widget), .q-btn.elementor-widget :is(.elementor-button, .button, button[type="submit"])) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: auto;
	min-height: var(--q-ctl-h);
	height: auto;
	margin: 0;
	padding: 0 28px;
	box-sizing: border-box;
	border: 1.5px solid transparent;
	border-radius: var(--q-radius);
	background: transparent;
	box-shadow: none;
	color: var(--q-navy);
	fill: currentColor;
	font-family: var(--q-font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-align: center;
	text-transform: none;
	text-decoration: none;
	text-shadow: none;
	cursor: pointer;
	opacity: 1;
	transition: background-color .2s var(--q-ease), border-color .2s var(--q-ease), color .2s var(--q-ease), text-decoration-color .2s var(--q-ease);
	-webkit-tap-highlight-color: transparent;
}

:root .q-btn.elementor-widget :is(.elementor-button-content-wrapper, .elementor-button-text) {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: inherit;
	font: inherit;
}

:root .q-btn.elementor-widget .elementor-button-icon svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* navy: navy bg, white text */
:root :is(.q-btn--navy:not(.elementor-widget), .q-btn--navy.elementor-widget :is(.elementor-button, .button, button[type="submit"])) {
	background-color: var(--q-navy);
	border-color: var(--q-navy);
	color: var(--q-white);
}

:root :is(.q-btn--navy:not(.elementor-widget), .q-btn--navy.elementor-widget :is(.elementor-button, .button, button[type="submit"])):hover {
	background-color: var(--q-ink);
	border-color: var(--q-ink);
	color: var(--q-white);
}

/* sand: sand bg, navy text */
:root :is(.q-btn--sand:not(.elementor-widget), .q-btn--sand.elementor-widget :is(.elementor-button, .button, button[type="submit"])) {
	background-color: var(--q-sand);
	border-color: var(--q-sand);
	color: var(--q-navy);
}

:root :is(.q-btn--sand:not(.elementor-widget), .q-btn--sand.elementor-widget :is(.elementor-button, .button, button[type="submit"])):hover {
	background-color: var(--q-white);
	border-color: var(--q-white);
	color: var(--q-navy);
}

/* outline-navy */
:root :is(.q-btn--outline-navy:not(.elementor-widget), .q-btn--outline-navy.elementor-widget :is(.elementor-button, .button, button[type="submit"])) {
	background-color: transparent;
	border-color: var(--q-navy);
	color: var(--q-navy);
}

:root :is(.q-btn--outline-navy:not(.elementor-widget), .q-btn--outline-navy.elementor-widget :is(.elementor-button, .button, button[type="submit"])):hover {
	background-color: var(--q-navy);
	border-color: var(--q-navy);
	color: var(--q-white);
}

/* outline-sand (on dark) */
:root :is(.q-btn--outline-sand:not(.elementor-widget), .q-btn--outline-sand.elementor-widget :is(.elementor-button, .button, button[type="submit"])) {
	background-color: transparent;
	border-color: var(--q-sand);
	color: var(--q-sand);
}

:root :is(.q-btn--outline-sand:not(.elementor-widget), .q-btn--outline-sand.elementor-widget :is(.elementor-button, .button, button[type="submit"])):hover {
	background-color: var(--q-sand);
	border-color: var(--q-sand);
	color: var(--q-navy);
}

/* white */
:root :is(.q-btn--white:not(.elementor-widget), .q-btn--white.elementor-widget :is(.elementor-button, .button, button[type="submit"])) {
	background-color: var(--q-white);
	border-color: var(--q-white);
	color: var(--q-navy);
}

:root :is(.q-btn--white:not(.elementor-widget), .q-btn--white.elementor-widget :is(.elementor-button, .button, button[type="submit"])):hover {
	background-color: var(--q-cream);
	border-color: var(--q-cream);
	color: var(--q-navy);
}

/* link / link-light: underlined text link with a 44px touch target.
   Same :is() shape as the base rule so the specificity matches (0,4,0). */
:root :is(.q-btn--link:not(.elementor-widget), .q-btn--link-light:not(.elementor-widget), .q-btn--link.elementor-widget :is(.elementor-button, .button), .q-btn--link-light.elementor-widget :is(.elementor-button, .button)) {
	min-height: var(--q-tap);
	padding: 0;
	border-color: transparent;
	border-width: 0;
	border-radius: 0;
	background: transparent;
	justify-content: flex-start;
	gap: 8px;
	text-align: left;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}

:root :is(.q-btn--link:not(.elementor-widget), .q-btn--link.elementor-widget :is(.elementor-button, .button)) {
	color: var(--q-navy);
}

:root :is(.q-btn--link-light:not(.elementor-widget), .q-btn--link-light.elementor-widget :is(.elementor-button, .button)),
:root .q-dark :is(.q-btn--link:not(.elementor-widget), .q-btn--link.elementor-widget :is(.elementor-button, .button)) {
	color: var(--q-white);
}

:root :is(.q-btn--link:not(.elementor-widget), .q-btn--link-light:not(.elementor-widget), .q-btn--link.elementor-widget :is(.elementor-button, .button), .q-btn--link-light.elementor-widget :is(.elementor-button, .button)):hover {
	background: transparent;
	text-decoration-thickness: 2px;
}

:root :is(.q-btn--link:not(.elementor-widget), .q-btn--link.elementor-widget :is(.elementor-button, .button)):hover {
	color: var(--q-navy);
}

:root :is(.q-btn--link-light:not(.elementor-widget), .q-btn--link-light.elementor-widget :is(.elementor-button, .button)):hover,
:root .q-dark :is(.q-btn--link:not(.elementor-widget), .q-btn--link.elementor-widget :is(.elementor-button, .button)):hover {
	color: var(--q-sand);
}

/* Sizes */
:root :is(.q-btn--sm:not(.elementor-widget), .q-btn--sm.elementor-widget :is(.elementor-button, .button, button[type="submit"])) {
	min-height: var(--q-tap);
	padding-left: 20px;
	padding-right: 20px;
}

:root .q-btn--block.elementor-widget {
	width: 100%;
	max-width: 100%;
	--container-widget-width: 100%;
	align-self: stretch;
}

:root :is(.q-btn--block:not(.elementor-widget), .q-btn--block.elementor-widget :is(.elementor-button, .button, button[type="submit"])) {
	display: flex;
	width: 100%;
}

/* Keyboard focus (visible ring; sand inside dark contexts via --q-focus) */
:root :is(.q-btn:not(.elementor-widget), .q-btn.elementor-widget :is(.elementor-button, .button, button[type="submit"])):focus-visible {
	outline: 2px solid var(--q-focus);
	outline-offset: 3px;
}

:root :is(.q-btn:not(.elementor-widget), .q-btn.elementor-widget :is(.elementor-button, .button, button[type="submit"])):is(:disabled, .disabled, [aria-disabled="true"]) {
	opacity: .55;
	cursor: not-allowed;
}

/* Button rows */
.q-btn.elementor-widget .elementor-button-wrapper {
	display: block;
}


/* ==========================================================================
   4. Images — img() adds `q-img`, ratio => `q-ratio-W-H`, pos => --q-obj-pos
   ========================================================================== */

.q-ratio-4-5 { --q-ratio: 4 / 5; }
.q-ratio-1-1 { --q-ratio: 1 / 1; }
.q-ratio-3-2 { --q-ratio: 3 / 2; }
.q-ratio-16-9 { --q-ratio: 16 / 9; }
.q-ratio-5-4 { --q-ratio: 5 / 4; }
.q-ratio-4-3 { --q-ratio: 4 / 3; }
.q-ratio-2-3 { --q-ratio: 2 / 3; }
.q-ratio-3-4 { --q-ratio: 3 / 4; }

:root .q-img :is(a, picture, .elementor-widget-container) {
	display: block;
}

/* An explicit Elementor `height` setting is printed per element (0,3,1) and
   still wins over the ratio, as intended. */
:root .q-img img,
:root img.q-img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: var(--q-ratio, auto);
	object-fit: cover;
	object-position: var(--q-obj-pos, 50% 50%);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	transition: scale .5s var(--q-ease);
}

:root .q-img--mirror img,
:root img.q-img--mirror {
	transform: scaleX(-1);
}

/* Product cut-outs: stone backdrop, multiply, slight zoom (as in the design) */
:root .q-img--product {
	background-color: var(--q-stone);
	overflow: hidden;
}

:root .q-img--product img {
	mix-blend-mode: multiply;
	transform: scale(1.25);
	transform-origin: 50% 62%;
}

:root .q-img--product.q-img--mirror img {
	transform: scale(-1.25, 1.25);
}


/* ==========================================================================
   5. Layout helpers
   ========================================================================== */

/* q-section: added by section(). Padding/gap/width come from Elementor. */
:root .e-con.q-section {
	overflow-x: clip; /* nothing may push the page sideways on phones */
}

.e-con.q-stack {
	--flex-direction: column;
}

.q-stack:not(.e-con) {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.e-con.q-cluster {
	--flex-direction: row;
	--flex-wrap: wrap;
	--align-items: center;
	--row-gap: 12px;
	--column-gap: 12px;
}

.q-cluster:not(.e-con) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

/* q-split: two columns, each at least 480px, collapsing to one column. */
.e-con.e-grid.q-split {
	--e-con-grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr));
	--align-items: center;
}

.e-con.e-flex.q-split {
	--flex-direction: row;
	--flex-wrap: wrap;
	--align-items: center;
}

:root .e-flex.q-split > :is(.elementor-element, .e-con),
:root .e-flex.q-split > .e-con-inner > :is(.elementor-element, .e-con) {
	--flex-grow: 1;
	--flex-shrink: 1;
	--flex-basis: min(480px, 100%);
	flex: 1 1 min(480px, 100%);
	min-width: 0;
}

.q-split:not(.e-con) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr));
	gap: 72px;
	align-items: center;
}

/* q-band: thin full-width strip (e.g. the sand category strip under the hero) */
.e-con.q-band {
	--min-height: 64px;
	--justify-content: center;
}

:root .q-band {
	font-size: 16px;
	font-weight: 600;
}

:root .q-band a:not(.elementor-button) {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var(--q-tap);
	color: inherit;
	text-decoration: none;
}

:root .q-band a:not(.elementor-button):hover {
	text-decoration: underline;
	text-underline-offset: 5px;
}

/* ---- Cards ------------------------------------------------------------- */
.e-con.q-card {
	--row-gap: 14px;
	--column-gap: 14px;
	--flex-direction: column;
}

.e-con.q-card--collection {
	--row-gap: 18px;
	--column-gap: 18px;
}

:root .q-card {
	color: inherit;
	text-decoration: none;
	min-width: 0;
}

.q-card:not(.e-con) {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.q-card--collection:not(.e-con) {
	gap: 18px;
}

/* clip the hover zoom */
:root .q-card .q-img,
:root .q-tile .q-img {
	overflow: hidden;
}

:root .q-card:hover .q-img img,
:root .q-tile:hover .q-img img {
	scale: 1.03;
}

:root .q-card:is(:hover, :focus-visible) :is(.q-h2s, .q-h3, .q-h4, .q-h5, .q-card__title),
:root .q-tile:is(:hover, :focus-visible) :is(.q-h2s, .q-h3, .q-h4, .q-card__title) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

:root .q-card:focus-visible,
:root .q-tile:focus-visible {
	outline: 2px solid var(--q-focus);
	outline-offset: 4px;
}

/* Collection card: 24px title + body-2 description (as on Kreu) */
:root .q-card--collection :is(.q-text, .q-small, .elementor-widget-text-editor) {
	color: var(--q-body-2);
}

:root .q-dark .q-card--collection :is(.q-text, .q-small, .elementor-widget-text-editor) {
	color: var(--q-cream);
}

/* Category card: 20px title under a 4/5 photo */
:root .q-card--category .elementor-widget-heading {
	font-size: 20px;
	line-height: 1.3;
}

/* ---- Tile: paper card, images + text side by side, wraps on mobile ----- */
.e-con.q-tile {
	--flex-direction: row;
	--flex-wrap: wrap;
	--row-gap: 0px;
	--column-gap: 0px;
	--align-items: stretch;
}

:root .q-tile {
	background-color: var(--q-paper);
	color: var(--q-navy);
	text-decoration: none;
}

:root .e-con.q-tile > .e-con:first-child,
:root .e-con.q-tile > .elementor-element:first-child {
	--flex-grow: 1;
	--flex-basis: 400px;
	flex: 1 1 400px;
	min-width: 0;
}

:root .e-con.q-tile > .e-con:last-child {
	--flex-grow: 1;
	--flex-basis: 360px;
	--padding-top: 24px;
	--padding-bottom: 24px;
	--padding-left: 40px;
	--padding-right: 40px;
	--justify-content: center;
	--row-gap: 10px;
	flex: 1 1 360px;
	min-width: 0;
}

.q-tile:not(.e-con) {
	display: flex;
	flex-wrap: wrap;
}

/* A paper tile placed inside a dark section stays a light island */
:root .q-dark .q-tile {
	color: var(--q-navy);
	--q-focus: var(--q-navy);
}

:root .q-dark .q-tile :is(.elementor-widget-heading, h1, h2, h3, h4, h5, h6) {
	color: var(--q-navy);
}

:root .q-dark .q-tile .q-eyebrow {
	color: var(--q-muted);
}

:root .q-dark .q-tile :is(.q-lead, .q-body, .q-text, .q-small) {
	color: var(--q-body);
}

/* ---- Hero -------------------------------------------------------------
   Section `q-hero q-dark` (bg #010D30): first child is the image widget
   `q-hero__media` (absolutely fills the hero), ::after carries the gradient,
   every other child sits above it. Phone: photo on top, text at the bottom,
   gradient runs bottom-up. */
:root .q-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.e-con.q-hero {
	--justify-content: center;
}

:root .q-hero > .e-con-inner {
	position: static;
}

/* Season variants placed inside the hero must not become the positioning
   context of the media. */
:root .q-hero .e-con.q-season {
	--position: static;
	position: static;
}

:root .q-hero .q-hero__media {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	--container-widget-width: 100%;
}

:root .q-hero .q-hero__media :is(.elementor-widget-container, a, picture) {
	display: block;
	width: 100%;
	height: 100%;
}

:root .q-hero .q-hero__media img {
	width: 100%;
	height: 100%;
	max-width: none;
	aspect-ratio: auto;
	object-fit: cover;
	object-position: var(--q-obj-pos, 50% 50%);
	scale: none;
}

:root .q-hero::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(1, 13, 48, 0.94) 0%, rgba(1, 13, 48, 0.9) 34%, rgba(1, 13, 48, 0.6) 46%, rgba(1, 13, 48, 0) 62%);
}

:root .q-hero > .e-con-inner > :not(.q-hero__media):not(.q-season),
:root .q-hero.e-con-full > :not(.q-hero__media):not(.q-season),
:root .q-hero .q-season > :not(.q-hero__media),
:root .q-hero .q-season > .e-con-inner > :not(.q-hero__media) {
	position: relative;
	z-index: 1;
}

:root .q-hero .q-lead {
	max-width: 480px;
}


/* ==========================================================================
   6. Seasons — body class `qelq-season-<key>` (PHP). Every variant is built
   in Elementor inside a container `q-season q-season--<key>`; only the active
   one is shown. `late` also gets `qelq-season-vitiri` from PHP, so the vitiri
   hero/tile shows; a `q-season--late` sibling (if one exists) replaces it.
   No season class on <body> => standard. Elementor editor shows all variants.
   ========================================================================== */

body:not(.elementor-editor-active) .q-season:not(
	body.qelq-season-standard .q-season--standard,
	body:not([class*="qelq-season-"]) .q-season--standard,
	body.qelq-season-nentor .q-season--nentor,
	body.qelq-season-vitiri .q-season--vitiri,
	body.qelq-season-late .q-season--late,
	body.qelq-season-valentin .q-season--valentin,
	body.qelq-season-mars .q-season--mars,
	body.qelq-season-vere .q-season--vere
) {
	display: none;
}

body.qelq-season-late:not(.elementor-editor-active) .q-season.q-season--vitiri:is(:has(~ .q-season--late), .q-season--late ~ .q-season--vitiri) {
	display: none;
}

.elementor-editor-active .q-season {
	outline: 1px dashed #B5532A;
	outline-offset: -1px;
}


/* ==========================================================================
   7. Small components
   ========================================================================== */

/* ---- Chip (pill link, 44px) ------------------------------------------- */
:root :is(.q-chip:not(.elementor-widget), .q-chip.elementor-widget :is(.elementor-button, a)) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-height: var(--q-tap);
	margin: 0;
	padding: 0 18px;
	box-sizing: border-box;
	border: 1px solid var(--q-border);
	border-radius: 22px;
	background: transparent;
	box-shadow: none;
	color: var(--q-navy);
	font-family: var(--q-font-body);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	transition: border-color .2s var(--q-ease), background-color .2s var(--q-ease), color .2s var(--q-ease);
}

:root :is(.q-chip:not(.elementor-widget), .q-chip.elementor-widget :is(.elementor-button, a)):hover {
	border-color: var(--q-navy);
	background: transparent;
	color: var(--q-navy);
}

:root :is(.q-chip--strong:not(.elementor-widget), .q-chip--strong.elementor-widget :is(.elementor-button, a)) {
	border-color: var(--q-navy);
	font-weight: 600;
}

:root :is(.q-chip:not(.elementor-widget):is(.is-active, .q-chip--active, [aria-current]:not([aria-current="false"])), .q-chip--active.elementor-widget :is(.elementor-button, a), .q-chip.elementor-widget [aria-current]:not([aria-current="false"])),
:root :is(.q-chip:not(.elementor-widget):is(.is-active, .q-chip--active, [aria-current]:not([aria-current="false"])), .q-chip--active.elementor-widget :is(.elementor-button, a), .q-chip.elementor-widget [aria-current]:not([aria-current="false"])):hover {
	border-color: var(--q-navy);
	background-color: var(--q-navy);
	color: var(--q-white);
	font-weight: 600;
}

:root .q-dark :is(.q-chip:not(.elementor-widget), .q-chip.elementor-widget :is(.elementor-button, a)) {
	border-color: var(--q-dash-dark);
	color: var(--q-cream);
}

:root .q-dark :is(.q-chip:not(.elementor-widget), .q-chip.elementor-widget :is(.elementor-button, a)):hover {
	border-color: var(--q-sand);
	color: var(--q-sand);
}

/* ---- Breadcrumbs ------------------------------------------------------
   <nav class="q-crumbs" aria-label="Vendndodhja"><a>Kreu</a><span aria-hidden="true">/</span><span aria-current="page">…</span></nav> */
:root .q-crumbs:not(.elementor-widget),
:root .q-crumbs > p {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

:root .q-crumbs {
	font-family: var(--q-font-body);
	font-size: 14px;
	line-height: 1.5;
	color: var(--q-muted);
}

:root .q-crumbs a {
	/* 44px tall hit area without changing the 21px line box */
	display: inline-block;
	padding: 12px 0;
	margin: -12px 0;
	color: var(--q-muted);
	text-decoration: none;
}

:root .q-crumbs a:hover {
	color: var(--q-navy);
	text-decoration: underline;
	text-underline-offset: 4px;
}

:root .q-crumbs [aria-current="page"],
:root .q-crumbs .last {
	color: var(--q-navy);
	font-weight: 600;
}

:root .q-dark .q-crumbs,
:root .q-dark .q-crumbs a {
	color: var(--q-footer-muted);
}

:root .q-dark .q-crumbs a:hover,
:root .q-dark .q-crumbs :is([aria-current="page"], .last) {
	color: var(--q-white);
}

/* ---- Divider ------------------------------------------------------------ */
:root .q-divider:not(.elementor-widget-divider) {
	display: block;
	height: 0;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--q-line);
	background: none;
}

:root .q-divider.elementor-widget-divider {
	--divider-border-style: solid;
	--divider-border-width: 1px;
	--divider-color: var(--q-line);
}

:root .q-dark .q-divider:not(.elementor-widget-divider) {
	border-top-color: var(--q-line-dark);
}

:root .q-dark .q-divider.elementor-widget-divider {
	--divider-color: var(--q-line-dark);
}

/* ---- Badge -------------------------------------------------------------- */
:root .q-badge {
	display: inline-flex;
	align-items: center;
	width: auto;
	padding: 5px 10px;
	border-radius: 2px;
	background: var(--q-navy);
	color: var(--q-white);
	font-family: var(--q-font-body);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

:root .q-badge.elementor-widget {
	align-self: flex-start;
}

:root .q-badge.elementor-widget .elementor-heading-title {
	color: inherit;
}

:root .q-dark .q-badge {
	background: var(--q-sand);
	color: var(--q-navy);
}

/* ---- Note (dashed info box) -------------------------------------------- */
:root .q-note {
	align-self: flex-start;
	max-width: 100%;
	margin: 0;
	padding: 10px 14px;
	border: 1px dashed var(--q-border);
	border-radius: 0;
	background: transparent;
	color: var(--q-muted);
	font-family: var(--q-font-body);
	font-size: 14px;
	line-height: 1.45;
}

:root .q-note p {
	margin: 0;
}

:root .q-dark .q-note {
	border-color: var(--q-dash-dark);
	color: var(--q-sand);
}

/* ---- Placeholder (eb placeholder(): .q-ph.q-ratio-x > __label + __note) - */
:root .q-ph {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	aspect-ratio: var(--q-ratio, auto);
	min-height: 120px;
	padding: 24px;
	box-sizing: border-box;
	border: 1px dashed var(--q-border);
	background: var(--q-stone);
	color: var(--q-muted);
	text-align: center;
}

:root .q-ph__label {
	font-family: var(--q-font-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

:root .q-ph__note {
	max-width: 260px;
	font-size: 15px;
	line-height: 1.45;
}

:root .q-dark .q-ph {
	border-color: var(--q-dash-dark);
	background: transparent;
	color: var(--q-sand);
}


/* ==========================================================================
   8. FAQ — details/summary accordion
   <div class="q-faq"><details open><summary>Pyetja</summary><p>Përgjigja</p></details>…</div>
   (class may sit on the HTML widget wrapper or on the inner div)
   ========================================================================== */

:root .q-faq details {
	margin: 0;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--q-line);
}

:root .q-faq details:first-of-type {
	border-top: 1px solid var(--q-line);
}

:root .q-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 64px;
	padding: 12px 0;
	list-style: none;
	cursor: pointer;
	color: inherit;
	font-family: var(--q-font-body);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.35;
}

:root .q-faq summary::-webkit-details-marker {
	display: none;
}

:root .q-faq summary::marker {
	content: "";
}

/* plus / minus drawn in CSS so every page gets the same icon */
:root .q-faq summary > svg {
	display: none;
}

:root .q-faq summary::after {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background:
		linear-gradient(currentColor, currentColor) center / 14px 1.8px no-repeat,
		linear-gradient(currentColor, currentColor) center / 1.8px 14px no-repeat;
	transition: background-size .2s var(--q-ease);
}

:root .q-faq details[open] > summary::after {
	background-size: 14px 1.8px, 1.8px 0;
}

:root .q-faq summary:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

:root .q-faq details > :not(summary) {
	max-width: 640px;
	margin: 0;
	padding: 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--q-body);
}

:root .q-faq details > :not(summary) + :not(summary) {
	margin-top: 14px;
}

:root .q-faq details > :not(summary):last-child {
	padding-bottom: 24px;
}

:root .q-dark .q-faq details,
:root .q-dark .q-faq details:first-of-type {
	border-color: var(--q-line-dark);
}

:root .q-dark .q-faq summary {
	color: var(--q-sand);
}

:root .q-dark .q-faq details > :not(summary) {
	color: var(--q-cream);
}


/* ==========================================================================
   9. Steps — numbered list
   <ol class="q-steps"><li><span class="q-steps__num">1</span>
     <div><span class="q-steps__title">…</span><span class="q-steps__text">…</span></div></li></ol>
   Without __num the number is generated. `q-steps--rule`: About-page style
   (2px top rule, "01" numbering, 200px columns).
   ========================================================================== */

:root :is(ol.q-steps, ul.q-steps, .q-steps:not(ol):not(ul) > :is(ol, ul), .q-steps > .elementor-widget-container > :is(ol, ul)) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: q-step;
}

:root .q-steps li {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin: 0;
	padding: 0;
	counter-increment: q-step;
}

:root .q-steps li > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

/* (kept as two rules: a browser without :has() must still style __num) */
:root .q-steps__num {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--q-sand);
	color: var(--q-navy);
	font-family: var(--q-font-display);
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
}

:root .q-steps li:not(:has(.q-steps__num))::before {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--q-sand);
	color: var(--q-navy);
	font-family: var(--q-font-display);
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
}

:root .q-steps li:not(:has(.q-steps__num))::before {
	content: counter(q-step);
}

:root .q-steps__title {
	display: block;
	font-family: var(--q-font-display);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
}

:root .q-steps__text {
	display: block;
	font-size: 16px;
	line-height: 1.55;
	color: var(--q-body);
}

/* rule variant */
:root :is(ol.q-steps--rule, ul.q-steps--rule, .q-steps--rule:not(ol):not(ul) > :is(ol, ul), .q-steps--rule > .elementor-widget-container > :is(ol, ul)) {
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: 32px 24px;
}

:root .q-steps--rule li {
	flex-direction: column;
	gap: 8px;
	padding-top: 20px;
	border-top: 2px solid var(--q-navy);
}

:root .q-steps--rule .q-steps__num {
	display: block;
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	color: var(--q-muted);
	font-size: 15px;
	line-height: 1.4;
}

:root .q-steps--rule li:not(:has(.q-steps__num))::before {
	display: block;
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	color: var(--q-muted);
	font-size: 15px;
	line-height: 1.4;
}

:root .q-steps--rule li:not(:has(.q-steps__num))::before {
	content: counter(q-step, decimal-leading-zero);
}

:root .q-dark .q-steps__title {
	color: var(--q-white);
}

:root .q-dark .q-steps__text {
	color: var(--q-cream);
}

:root .q-dark .q-steps--rule li {
	border-top-color: var(--q-sand);
}

:root .q-dark .q-steps--rule .q-steps__num {
	color: var(--q-sand);
}

:root .q-dark .q-steps--rule li:not(:has(.q-steps__num))::before {
	color: var(--q-sand);
}


/* ==========================================================================
   10. Icon row — inline icon + label items (sand on dark)
   <ul class="q-icon-row"><li><svg class="q-ico" …></svg>Çdo të shtunë</li>…</ul>
   ========================================================================== */

:root :is(ul.q-icon-row, ol.q-icon-row, div.q-icon-row:not(.elementor-widget), p.q-icon-row, .q-icon-row.elementor-widget :is(ul, ol)) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

:root .q-icon-row {
	font-family: var(--q-font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
}

:root .q-icon-row :is(li, .q-icon-row__item),
:root :is(ul, ol, div, p).q-icon-row > span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

:root .q-icon-row svg {
	flex: none;
	width: 20px;
	height: 20px;
}

:root .q-dark .q-icon-row {
	color: var(--q-sand);
}


/* ==========================================================================
   11. Forms — q-field / q-label / q-input / q-select
   (Cartify styles input[type=…] at 0,1,1 and MC4WP at 0,2,1, hence :root)
   ========================================================================== */

:root .q-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	margin: 0;
}

:root .q-label {
	display: block;
	margin: 0;
	color: inherit;
	font-family: var(--q-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	cursor: default;
}

:root .q-field :is(.q-input, .q-select),
:root :is(input, textarea, select).q-input,
:root select.q-select {
	display: block;
	width: 100%;
	max-width: 100%;
	height: var(--q-ctl-h);
	min-height: var(--q-ctl-h);
	margin: 0;
	padding: 0 14px;
	box-sizing: border-box;
	border: 1px solid var(--q-border);
	border-radius: var(--q-radius);
	background-color: var(--q-white);
	box-shadow: none;
	color: var(--q-navy);
	font-family: var(--q-font-body);
	font-size: 16px; /* 16px stops iOS zooming on focus */
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: normal;
	transition: border-color .2s var(--q-ease);
}

:root .q-field textarea.q-input,
:root textarea.q-input {
	height: auto;
	min-height: 140px;
	padding: 12px 14px;
	line-height: 1.5;
	resize: vertical;
}

:root .q-field input[type="file"].q-input,
:root input[type="file"].q-input {
	height: auto;
	min-height: var(--q-ctl-h);
	padding: 12px 14px;
	border-style: dashed;
	background-color: var(--q-linen);
	font-size: 15px;
}

:root .q-field :is(.q-input, .q-select)::placeholder,
:root .q-input::placeholder {
	color: var(--q-muted);
	opacity: 1;
}

:root .q-field :is(.q-input, .q-select):hover,
:root :is(.q-input, .q-select):hover {
	border-color: var(--q-navy);
}

:root .q-field :is(.q-input, .q-select):focus,
:root :is(.q-input, .q-select):focus {
	border-color: var(--q-navy);
	outline: none;
}

:root .q-field :is(.q-input, .q-select):focus-visible,
:root :is(.q-input, .q-select):focus-visible {
	outline: 2px solid var(--q-focus);
	outline-offset: 1px;
}

:root .q-field :is(.q-input, .q-select)[aria-invalid="true"],
:root :is(.q-input, .q-select)[aria-invalid="true"] {
	border-color: #B3261E;
}

/* Select: own chevron (Cartify replaces the native one with a black arrow) */
:root .q-field select.q-select,
:root select.q-select,
:root select.q-input {
	padding-right: 40px;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2310233F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 18px 18px;
	cursor: pointer;
}

/* Checkboxes / radios in rebuilt forms */
:root .q-section :is(input[type="checkbox"], input[type="radio"]),
:root .q-field :is(input[type="checkbox"], input[type="radio"]) {
	flex: none;
	width: 22px;
	height: 22px;
	margin: 2px 0 0;
	accent-color: var(--q-navy);
	cursor: pointer;
}

:root .q-dark .q-label {
	color: var(--q-sand);
}

:root .q-dark :is(.q-input, .q-select) {
	border-color: var(--q-white);
}


/* ==========================================================================
   12. Newsletter — [qelq_newsletter variant="light|dark|footer"]
   <form class="q-newsletter q-newsletter--{variant}"><div class="q-field">
     <label class="q-label">…</label><input class="q-input" type="email" …></div>
     <button class="q-btn q-btn--{navy|sand}" type="submit">Hyni në listë</button></form>
   ========================================================================== */

:root .q-newsletter {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* MC4WP may wrap the fields in its own div: let the flex layout see through */
:root .q-newsletter .mc4wp-form-fields {
	display: contents;
}

:root .q-newsletter .q-field {
	flex: 1 1 240px;
}

:root .q-newsletter .q-field .q-input {
	width: 100%;
	max-width: none;
	height: var(--q-ctl-h);
	padding: 0 16px;
	line-height: 1.3;
}

:root .q-newsletter .q-label {
	margin: 0;
	font-weight: 600;
}

:root .q-newsletter :is(.q-btn, button[type="submit"]) {
	flex: none;
	height: var(--q-ctl-h);
}

:root .q-newsletter :is(.mc4wp-response, .mc4wp-alert, .q-newsletter__msg) {
	flex: 1 1 100%;
	margin: 0;
	font-size: 15px;
	line-height: 1.45;
}

:root .q-newsletter :is(.mc4wp-response, .mc4wp-alert) p {
	margin: 0;
}

:root .q-newsletter :is(.mc4wp-response, .mc4wp-alert):empty {
	display: none;
}

/* light + footer: on white/paper */
:root .q-newsletter:is(.q-newsletter--light, .q-newsletter--footer) .q-label {
	color: var(--q-navy);
}

:root .q-newsletter:is(.q-newsletter--light, .q-newsletter--footer) .q-field .q-input {
	border-color: var(--q-border);
}

/* dark: on navy */
:root .q-newsletter--dark .q-label {
	color: var(--q-sand);
}

:root .q-newsletter--dark .q-field .q-input {
	border-color: var(--q-white);
}

:root .q-newsletter--dark :is(.mc4wp-response, .mc4wp-alert, .q-newsletter__msg) {
	color: var(--q-cream);
}

:root .q-newsletter--dark {
	--q-focus: var(--q-sand);
}


/* ==========================================================================
   13. Product grid — [qelq_products]
   ========================================================================== */

:root .q-products {
	--q-cols: 4;
	display: grid;
	grid-template-columns: repeat(var(--q-cols), minmax(0, 1fr));
	gap: 48px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

:root .q-products--cols-1 { --q-cols: 1; }
:root .q-products--cols-2 { --q-cols: 2; }
:root .q-products--cols-3 { --q-cols: 3; }
:root .q-products--cols-4 { --q-cols: 4; }
:root .q-products--cols-5 { --q-cols: 5; }
:root .q-products--cols-6 { --q-cols: 6; }

:root .q-product {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	color: var(--q-navy);
	text-decoration: none;
}

:root .q-product__media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: var(--q-stone);
}

/* `.woocommerce img { height:auto }` (0,1,1) must not break the square */
:root .q-product .q-product__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	mix-blend-mode: multiply;
	transform: scale(1.25);
	transform-origin: 50% 62%;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	transition: scale .5s var(--q-ease), opacity .2s var(--q-ease);
}

:root .q-product__info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

:root .q-product__col {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--q-muted);
}

:root .q-product__name {
	font-family: var(--q-font-display);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3;
}

:root .q-product__price {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
}

:root .q-product__price :is(.amount, bdi, ins) {
	color: inherit;
	text-decoration: none;
	background: none;
}

:root .q-product__price del {
	color: var(--q-muted);
	font-weight: 400;
	margin-right: 6px;
}

:root .q-product__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
}

:root .q-product:hover .q-product__img {
	scale: 1.04;
}

:root .q-product:is(:hover, :focus-visible) .q-product__name {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

:root .q-product:focus-visible {
	outline: 2px solid var(--q-focus);
	outline-offset: 4px;
}

/* sold */
:root .q-product.is-sold .q-product__img {
	opacity: .4;
}

:root .q-product.is-sold :is(.q-product__name, .q-product__price) {
	color: var(--q-muted);
}

/* ---- Sort bar: <form class="q-sort"><label class="q-label">Rendit</label><select class="q-select">… */
:root .q-sort {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 32px;
	padding: 0;
}

:root .q-sort .q-label {
	font-size: 16px;
	font-weight: 600;
}

:root .q-sort select.q-select {
	width: auto;
	min-width: 220px;
	height: var(--q-tap);
	min-height: var(--q-tap);
	padding: 0 40px 0 12px;
	font-size: 15px;
}

:root .q-sort :is(button, input[type="submit"]) {
	/* no-JS fallback submit; JS submits on change */
	min-height: var(--q-tap);
}

/* ---- Pagination (paginate_links, optionally a load-more summary) ------- */
:root .q-pagination {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding-top: 64px;
	margin: 0;
	font-family: var(--q-font-body);
}

:root .q-pagination :is(ul.page-numbers, .q-pagination__pages) {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

:root .q-pagination:not(:has(ul.page-numbers)):has(> .page-numbers) {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

:root .q-pagination li {
	margin: 0;
	padding: 0;
	border: 0;
}

:root .q-pagination :is(a, span).page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--q-tap);
	min-height: var(--q-tap);
	padding: 0 12px;
	box-sizing: border-box;
	border: 1px solid var(--q-border);
	border-radius: var(--q-radius);
	background: var(--q-white);
	color: var(--q-navy);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
}

:root .q-pagination a.page-numbers:hover {
	border-color: var(--q-navy);
}

:root .q-pagination .page-numbers.current {
	border-color: var(--q-navy);
	background: var(--q-navy);
	color: var(--q-white);
}

:root .q-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	min-width: 24px;
	padding: 0;
}

:root .q-pagination__count {
	font-size: 16px;
	color: var(--q-muted);
}

:root .q-pagination__bar {
	display: block;
	width: 240px;
	max-width: 100%;
	height: 4px;
	border-radius: 2px;
	background: var(--q-line);
	overflow: hidden;
}

:root .q-pagination__bar > span {
	display: block;
	height: 4px;
	background: var(--q-navy);
}


/* ==========================================================================
   14. Header pieces — [qelq_topbar], [qelq_header_icons], main menu (q-nav)
   ========================================================================== */

/* Top bar (on navy, sand text) */
:root .q-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	width: 100%;
	min-height: var(--q-tap);
	color: var(--q-sand);
	font-family: var(--q-font-body);
	font-size: 14px;
	line-height: 1.35;
}

:root .q-topbar__msgs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 28px;
	min-width: 0;
	font-weight: 500;
	letter-spacing: 0.01em;
}

:root .q-topbar__msgs > span {
	margin: 0;
}

:root .q-lang {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-left: auto;
	font-size: 14px;
	font-weight: 600;
}

:root .q-lang a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--q-tap);
	min-height: var(--q-tap);
	color: var(--q-sand);
	text-decoration: none;
	opacity: .8;
}

:root .q-lang a[aria-current]:not([aria-current="false"]) {
	text-decoration: underline;
	text-underline-offset: 4px;
	opacity: 1;
}

:root .q-lang a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
	opacity: 1;
}

:root .q-lang > span {
	opacity: .5;
}

/* Header icons (on sand) */
:root .q-hicons {
	display: flex;
	align-items: center;
	gap: 2px;
}

:root .q-hicon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--q-tap);
	height: var(--q-tap);
	padding: 0;
	border: 0;
	border-radius: var(--q-radius);
	background: none;
	color: var(--q-navy);
	text-decoration: none;
	cursor: pointer;
}

:root .q-hicon svg {
	flex: none;
	width: 22px;
	height: 22px;
}

:root .q-hicon:hover {
	background: rgba(16, 35, 63, 0.08);
	color: var(--q-navy);
}

:root .q-hicon--cart {
	width: auto;
	gap: 6px;
	padding: 0 8px 0 11px;
}

:root .q-cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	box-sizing: border-box;
	border-radius: 10px;
	background: var(--q-navy);
	color: var(--q-sand);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
}

/* Main menu: widget('nav-menu', …, 'q-nav') — Elementor Pro nav menu.
   Pro's item rules sit at 0,3,0–0,4,0 (global colours, pointer states). */
:root .q-nav .elementor-nav-menu--main .elementor-item {
	display: inline-flex;
	align-items: center;
	min-height: var(--q-tap);
	padding: 0 14px;
	color: var(--q-navy);
	fill: var(--q-navy);
	font-family: var(--q-font-body);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
}

:root .q-nav .elementor-nav-menu--main .elementor-item:is(:hover, :focus, .elementor-item-active, .highlighted, [aria-current="page"]) {
	color: var(--q-navy);
	fill: var(--q-navy);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
}

:root .q-nav .elementor-nav-menu--main .elementor-item::before,
:root .q-nav .elementor-nav-menu--main .elementor-item::after {
	display: none; /* the design uses a text underline, not Pro's pointer bar */
}

:root .q-nav .elementor-menu-toggle {
	width: var(--q-tap);
	height: var(--q-tap);
	padding: 0;
	border: 0;
	border-radius: var(--q-radius);
	background: transparent;
	color: var(--q-navy);
	font-size: 24px;
}

:root .q-nav .elementor-menu-toggle :is(svg, i) {
	width: 24px;
	height: 24px;
	fill: currentColor;
	color: currentColor;
}

:root .q-nav .elementor-nav-menu--dropdown {
	background: var(--q-white);
	border-top: 1px solid var(--q-line);
}

:root .q-nav .elementor-nav-menu--dropdown a,
:root .q-nav .elementor-nav-menu--dropdown .elementor-item {
	min-height: 52px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--q-line);
	background: var(--q-white);
	color: var(--q-navy);
	font-family: var(--q-font-body);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

:root .q-nav .elementor-nav-menu--dropdown a:is(:hover, :focus, .elementor-item-active, .highlighted) {
	background: var(--q-paper);
	color: var(--q-navy);
}

:root .q-nav :is(a, .elementor-menu-toggle):focus-visible {
	outline: 2px solid var(--q-focus);
	outline-offset: 2px;
}


/* ==========================================================================
   15. Visibility utilities
   !important: Elementor shows containers with `display: var(--display)` and
   may set display per element/breakpoint; a hide utility has to win.
   ========================================================================== */

@media (max-width: 767px) {
	.q-hide-mobile {
		display: none !important;
	}
}

@media (min-width: 768px) {
	.q-hide-desktop {
		display: none !important;
	}
}


/* ==========================================================================
   16. Tablet (<= 1024px)
   ========================================================================== */

@media (max-width: 1024px) {
	:root .q-display {
		font-size: 48px;
	}

	:root .q-h1 {
		font-size: 42px;
	}

	:root .q-h2 {
		font-size: 34px;
	}

	:root :is(.q-products--cols-4, .q-products--cols-5, .q-products--cols-6) {
		--q-cols: 3;
	}
}


/* ==========================================================================
   17. Mobile (<= 767px) — type scale from the catalogue, 44px targets,
   16px side gutters come from Elementor section settings.
   ========================================================================== */

@media (max-width: 767px) {

	/* Type scale */
	:root .q-display {
		font-size: 36px;
		line-height: 1.08;
	}

	:root .q-h1 {
		font-size: 34px;
		line-height: 1.1;
	}

	:root .q-h2 {
		font-size: 30px;
		line-height: 1.15;
	}

	:root .q-h2s {
		font-size: 24px;
		line-height: 1.2;
	}

	:root .q-h3 {
		font-size: 20px;
		line-height: 1.25;
	}

	:root .q-h4 {
		font-size: 18px;
		line-height: 1.3;
	}

	:root .q-eyebrow {
		font-size: 12px;
	}

	:root .q-lead {
		font-size: 17px;
		line-height: 1.5;
	}

	:root .q-body {
		font-size: 16px;
		line-height: 1.55;
	}

	/* Hero: photo fills the hero, text sits at the bottom over a
	   bottom-up gradient (HomePhone: photo band ~350px at 390px wide). */
	:root .q-hero {
		--q-hero-photo: clamp(260px, 90vw, 420px);
	}

	:root .q-hero > .e-con-inner,
	:root .q-hero.e-con-full {
		padding-block-start: var(--q-hero-photo);
		justify-content: flex-end;
	}

	:root .q-hero::after {
		background: linear-gradient(180deg,
			rgba(1, 13, 48, 0.08) 0px,
			rgba(1, 13, 48, 0.15) calc(var(--q-hero-photo) - 60px),
			rgba(1, 13, 48, 0.86) var(--q-hero-photo),
			rgba(1, 13, 48, 0.96) calc(var(--q-hero-photo) + 90px));
	}

	:root .q-hero .q-lead {
		font-size: 16px;
		line-height: 1.5;
	}

	/* Hero buttons stack full width; the outline-sand secondary becomes a
	   white underlined link (as on HomePhone). */
	:root .q-hero .q-btn.elementor-widget {
		width: 100%;
		max-width: 100%;
		--container-widget-width: 100%;
	}

	:root .q-hero :is(.q-btn:not(.elementor-widget), .q-btn.elementor-widget :is(.elementor-button, .button)) {
		display: flex;
		width: 100%;
	}

	:root .q-hero :is(.q-btn--outline-sand:not(.elementor-widget), .q-btn--outline-sand.elementor-widget .elementor-button),
	:root .q-hero :is(.q-btn--outline-sand:not(.elementor-widget), .q-btn--outline-sand.elementor-widget .elementor-button):hover {
		min-height: 48px;
		border-color: transparent;
		background: transparent;
		color: var(--q-white);
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 5px;
	}

	/* Tile: text padding follows the 16px gutter */
	:root .e-con.q-tile > .e-con:last-child {
		--padding-left: 16px;
		--padding-right: 16px;
		--padding-top: 20px;
		--padding-bottom: 24px;
	}

	/* FAQ */
	:root .q-faq summary {
		min-height: 56px;
		font-size: 17px;
	}

	:root .q-faq details > :not(summary) {
		font-size: 16px;
		line-height: 1.55;
	}

	:root .q-faq details > :not(summary):last-child {
		padding-bottom: 20px;
	}

	/* Steps */
	:root .q-steps li {
		gap: 16px;
	}

	:root .q-steps__title {
		font-size: 18px;
	}

	/* Forms + newsletter: field and button full width */
	:root .q-newsletter {
		flex-direction: column;
		align-items: stretch;
	}

	:root .q-newsletter .q-field {
		flex: 0 0 auto;
	}

	:root .q-newsletter :is(.q-btn, button[type="submit"]) {
		width: 100%;
	}

	:root .q-sort {
		justify-content: space-between;
		margin-bottom: 24px;
	}

	:root .q-sort select.q-select {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* Product grid: 2 columns */
	:root .q-products,
	:root .q-products[class*="q-products--cols-"] {
		--q-cols: 2;
		gap: 32px 16px;
	}

	:root .q-products.q-products--cols-1 {
		--q-cols: 1;
	}

	:root .q-product {
		gap: 10px;
	}

	:root .q-product__info {
		gap: 3px;
	}

	:root .q-product__name {
		font-family: var(--q-font-body);
		font-size: 16px;
		font-weight: 600;
	}

	:root .q-product__price {
		font-weight: 400;
	}

	:root .q-product__badge {
		top: 8px;
		left: 8px;
	}

	:root .q-pagination {
		padding-top: 48px;
	}

	:root .q-pagination :is(.q-btn, .q-pagination__more) {
		width: 100%;
	}

	/* Top bar: only the first message; no wrapping */
	:root .q-topbar {
		flex-wrap: nowrap;
		gap: 8px;
	}

	:root .q-topbar__msgs {
		flex: 1 1 auto;
		flex-wrap: nowrap;
		overflow: hidden;
	}

	:root .q-topbar__msgs > :not(:first-child) {
		display: none;
	}

	:root .q-topbar__msgs > :first-child {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	:root .q-lang {
		flex: none;
		gap: 0;
	}

	:root .q-lang > span {
		display: none;
	}

	/* Header icons: search + cart on phones (account/wishlist live in the menu) */
	:root .q-hicons > .q-hicon:not(.q-hicon--cart):not(:first-child) {
		display: none;
	}

	:root .q-hicon--cart {
		width: var(--q-tap);
		padding: 0;
		gap: 0;
	}

	:root .q-hicon--cart .q-cart-count {
		position: absolute;
		top: 2px;
		right: 0;
		min-width: 18px;
		height: 18px;
		font-size: 11px;
	}

	/* Chips and crumbs never overflow */
	:root .q-crumbs {
		row-gap: 4px;
	}

	:root .q-band {
		--min-height: 56px;
	}
}


/* ==========================================================================
   18. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	:root .q-img img,
	:root .q-product .q-product__img,
	:root .q-faq summary::after,
	:root :is(.q-btn:not(.elementor-widget), .q-btn.elementor-widget .elementor-button) {
		transition: none;
	}

	:root .q-card:hover .q-img img,
	:root .q-tile:hover .q-img img,
	:root .q-product:hover .q-product__img {
		scale: none;
	}
}

/* =========================================================================
   Integration additions (classes printed by inc/*.php that had no rule yet)
   ========================================================================= */

/* Product card: piece number row, empty state, in-place "hide sold". */
:root .q-product__meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
}
:root .q-product__nr {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--q-muted);
	white-space: nowrap;
}
.q-products-empty {
	font-size: 17px;
	line-height: 1.6;
	color: var(--q-muted);
}
body.q-products-hide-sold .q-product.is-sold {
	display: none;
}

/* Collection toolbar [qelq_collection_toolbar] (collection.json notes). */
.q-coltools {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px 32px;
	color: var(--q-navy);
}
.q-coltools__types {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
:root .q-coltools__types .q-chip {
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--q-border);
	border-radius: 22px;
	font-size: 15px;
	font-weight: 500;
	color: var(--q-navy);
	text-decoration: none;
}
:root .q-coltools__types .q-chip.is-active {
	background: var(--q-navy);
	border-color: var(--q-navy);
	color: var(--q-white);
	font-weight: 600;
}
.q-coltools__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 28px;
}
.q-coltools__count {
	font-size: 16px;
	color: var(--q-muted);
}
.q-coltools__sold {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
}
.q-coltools__sold input {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--q-navy);
}
.q-coltools__sold label {
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

/* Forms [qelq_contact_form] — generic layout; page CSS refines per form. */
.q-form {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
	color: var(--q-navy);
}
.q-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 16px;
}
.q-form--workshop .q-form__grid {
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
:root .q-form textarea.q-input {
	min-height: 120px;
	padding: 12px 14px;
	line-height: 1.5;
}
:root .q-form--workshop textarea.q-input {
	min-height: 96px;
}
:root .q-form input[type="file"].q-file {
	min-height: 52px;
	padding: 12px 14px;
	border-style: dashed;
	background: var(--q-linen);
	font-size: 15px;
}
.q-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
}
.q-form__note,
.q-form__alt {
	font-size: 15px;
	line-height: 1.5;
	color: var(--q-muted);
}
.q-form__alt a {
	color: var(--q-navy);
	font-weight: 600;
}
.q-form__hint {
	font-size: 14px;
	line-height: 1.5;
	color: var(--q-muted);
}
.q-form__hint a {
	color: var(--q-navy);
}
.q-form__response:empty {
	display: none;
}
.q-form__response,
.q-form__msg {
	margin: 0;
	padding: 12px 16px;
	border-left: 4px solid var(--q-navy);
	background: var(--q-paper);
	font-size: 16px;
	line-height: 1.5;
}
.q-form__response.is-error,
.q-form__msg--error {
	border-left-color: var(--q-error, #9B2C2C);
}
.q-form .q-field.is-invalid :is(.q-input, .q-select) {
	border-color: var(--q-error, #9B2C2C);
}
.q-form__hp {
	position: absolute !important; /* honeypot: must stay out of view whatever the page CSS does */
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
@media (max-width: 767px) {
	.q-form {
		gap: 16px;
	}
	.q-form__actions {
		flex-direction: column;
		align-items: stretch;
	}
	:root .q-form__actions .q-btn {
		width: 100%;
	}
}

/* Newsletter "outline" variant (sold panel of the Cartify fallback layout). */
.q-newsletter--outline {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
}
.q-newsletter--outline .q-field {
	flex: 1 1 220px;
}

/* Checkout: hidden country rows (Albania only), phone summary total. */
.qelq-hidden-row {
	display: none !important; /* WooCommerce sets display on .form-row; the field must stay in the form but out of sight */
}
.q-pg-checkout__mtoggle-total {
	font-weight: 600;
	white-space: nowrap;
}

/* Pair add-to-cart form wrapper. */
.q-pair-form {
	margin: 0;
}

/* Sold panel + gallery badge — only used when Cartify's own product layout renders
   (the Elementor single-product template has its own sold card). */
.woocommerce-product-gallery.is-sold {
	position: relative;
}
.q-sold-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
}
.q-sold {
	display: flex;
	flex-direction: column;
	gap: 20px;
	color: var(--q-navy);
	font-family: var(--q-font-body);
}
.q-sold__title {
	margin: 0;
	font-family: var(--q-font-display);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.25;
}
.q-sold__text,
.q-sold__custom-text,
.q-sold__list-text {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--q-body);
}
.q-sold__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.q-sold__custom,
.q-sold__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px;
	border: 1px dashed var(--q-border);
	border-radius: var(--q-radius);
	background: var(--q-linen);
}
.q-sold__custom-head,
.q-sold__list-head,
.q-sold__intro {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.q-sold__custom-title,
.q-sold__list-title {
	font-size: 17px;
	font-weight: 600;
}
.q-sold__custom-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	line-height: 1.5;
}
.q-sold__custom-row svg {
	flex: none;
}