/**
 * Shop content area — sidebar+main layout, toolbar, product-grid
 * breakpoints, and pagination. Scoped entirely to body.myshop-shop-archive
 * (Shop page + product category/tag archives only — see
 * inc/hooks/filters.php) so none of this can ever affect single-product,
 * cart, checkout, account, or the homepage. Only enqueued in that same
 * context — see inc/enqueue/styles.php.
 *
 * ======================================================================
 * LAYOUT — #content is the real two-column parent, not #page
 * ======================================================================
 * Verified against the actual rendered DOM (a headless-browser CDP
 * session reading getComputedStyle()/getBoundingClientRect(), not
 * inferred from the PHP templates): on a WooCommerce archive, #page has
 * exactly ONE child — #content. #primary and #left-sidebar are both
 * children of #content, not of #page.
 *
 * #content is already `display: flex` natively — GeneratePress core,
 * wp-content/themes/generatepress/assets/css/main.css:1176
 * (".site-content { display: flex; }") — so this works WITH that
 * existing flex container instead of putting a competing layout on
 * #page. An earlier version of this file put `display:grid` on #page;
 * since #page only has the one child, that grid had nothing to put in
 * its second track, which is what collapsed the whole content column
 * (see chat history for the full browser diagnostic).
 *
 * Scoped to >= 1100px only — below that, GeneratePress's own native
 * responsive behavior for .site-content (main.css's own max-width:768px
 * block switches it to flex-direction:column, sidebar width:auto) is
 * left completely alone, exactly as before this fix existed.
 */

.myshop-shop-archive #content {
	/* No giant card behind the product area — it sits on the plain page
	   surface, the product image tiles are what create visual structure. */
	background-color: transparent;
}

@media (min-width: 1100px) {
	.myshop-shop-archive #content {
		align-items: flex-start;
		gap: 40px;
	}

	.myshop-shop-archive #left-sidebar {
		order: 1;
		flex: 0 0 260px;
		width: 260px;
		max-width: 260px;
		min-width: 260px;
		margin: 0;
	}

	.myshop-shop-archive #primary,
	.myshop-shop-archive .site-content .content-area {
		order: 2;
		flex: 1 1 auto;
		width: auto;
		max-width: none;
		min-width: 0;
		margin: 0;
	}
}

/* ======================================================================
   Shop title — WooCommerce's own dynamic page-title block
   (.woocommerce-products-header__title.page-title); text itself
   ("Κατάστημα" on the plain Shop root only, category names elsewhere are
   untouched) comes from inc/woocommerce/shop-toolbar.php's
   woocommerce_page_title filter.
   ====================================================================== */

.myshop-shop-archive .woocommerce-products-header__title {
	margin: 0 0 12px;
	font-size: clamp(30px, 2vw, 38px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--color-heading);
}

/* ======================================================================
   Toolbar — result count (left) + sorting dropdown (right) on one line.
   Wrapper printed by inc/woocommerce/shop-toolbar.php.
   ====================================================================== */

.myshop-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--myshop-space-sm);
	margin-bottom: clamp(24px, 3vw, 36px);
}

.myshop-shop-archive .woocommerce-result-count {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 14px;
	font-weight: 400;
}

.myshop-shop-toolbar__sorting {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.myshop-shop-toolbar__sorting label {
	color: var(--color-text-muted);
	font-size: 14px;
	white-space: nowrap;
}

.myshop-shop-toolbar__sorting select.orderby {
	appearance: none;
	-webkit-appearance: none;
	height: 42px;
	min-width: 170px;
	padding-inline: 12px 34px;
	border: 1px solid var(--color-border);
	border-radius: 5px;
	background-color: var(--color-background);
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23766f5e' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	color: var(--color-text);
	font-size: 14px;
	cursor: pointer;
}

.myshop-shop-toolbar__sorting select.orderby:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 1px;
}

@media (max-width: 480px) {
	.myshop-shop-toolbar__sorting select.orderby {
		min-width: 0;
	}
}

/* ======================================================================
   Product grid — exact breakpoints (not the fluid auto-fit the homepage
   and related-products sections use, see components/cards.css). The
   extra specificity from the .myshop-shop-archive ancestor plus
   !important is what's needed to beat that existing (also !important)
   rule on the shared `.woocommerce ul.products` selector for this
   context only, without touching or removing it.

   Selector note: this is `.myshop-shop-archive ul.products`, NOT
   `.myshop-shop-archive .woocommerce ul.products` — `.woocommerce` and
   `.myshop-shop-archive` are both classes on the SAME <body> element, so
   a descendant combinator between them (`.myshop-shop-archive
   .woocommerce ...`) requires a second, different ancestor carrying
   `.woocommerce` between body and ul.products — there isn't one, so that
   selector never matches anything (verified with element.matches() in a
   real browser: false). `.myshop-shop-archive` alone is already
   sufficient — it's only ever present on shop-archive pages, which are
   always WooCommerce pages.
   ====================================================================== */

.myshop-shop-archive ul.products {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	column-gap: clamp(24px, 2vw, 28px) !important;
	row-gap: clamp(48px, 4vw, 56px) !important;
}

/* WooCommerce's own clearfix pseudo-elements on ul.products (content:" ";
   display:table, from the plugin's own stylesheet) become actual grid
   items once the list is display:grid — ::before ends up occupying grid
   column 1, pushing every real product one cell to the right and leaving
   a phantom empty first cell. Scoped to the Shop grid only; the
   fluid/non-grid `.woocommerce ul.products` used elsewhere (homepage,
   related products) still needs its clearfix and is untouched. */
.myshop-shop-archive ul.products::before,
.myshop-shop-archive ul.products::after {
	content: none;
	display: none;
}

@media (max-width: 699px) {
	.myshop-shop-archive ul.products {
		grid-template-columns: 1fr !important;
	}
}

@media (min-width: 1100px) {
	.myshop-shop-archive ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (min-width: 1500px) {
	.myshop-shop-archive ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

/* ======================================================================
   Product-card visual polish — Shop-scoped overrides on top of the
   canonical card (components/cards.css), which stays byte-for-byte
   unchanged so the homepage/related-products cards are unaffected.
   ====================================================================== */

.myshop-shop-archive ul.products li.product a.woocommerce-loop-product__link img {
	padding: clamp(20px, 2vw, 24px);
	border-radius: 6px;
}

.myshop-shop-archive .myshop-product-card__category {
	margin-block: 16px 8px;
	color: var(--color-primary);
	opacity: 0.7;
}

/* Shop cards: the CTA spans the full card width (a deliberate difference
   from the homepage's fixed-width button, see components/cards.css). */
.myshop-shop-archive ul.products li.product .button {
	width: 100%;
	max-width: none;
	height: 44px;
	min-height: 0;
	border-radius: 5px;
}

/* ======================================================================
   Pagination — WooCommerce's own paginate_links() markup
   (.woocommerce-pagination ul.page-numbers), restyled.
   ====================================================================== */

.myshop-shop-archive .woocommerce-pagination {
	margin-top: clamp(40px, 5vw, 64px);
}

.myshop-shop-archive .woocommerce-pagination ul.page-numbers {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.myshop-shop-archive .woocommerce-pagination .page-numbers li {
	display: block;
}

.myshop-shop-archive .woocommerce-pagination .page-numbers a,
.myshop-shop-archive .woocommerce-pagination .page-numbers span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 6px;
	border: 1px solid var(--color-border);
	border-radius: 5px;
	color: var(--color-text);
	font-size: 14px;
	text-decoration: none;
}

.myshop-shop-archive .woocommerce-pagination .page-numbers a:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.myshop-shop-archive .woocommerce-pagination .page-numbers .current {
	border-color: var(--color-primary);
	background-color: var(--color-primary);
	color: var(--color-background);
}

.myshop-shop-archive .woocommerce-pagination .page-numbers.dots {
	border: 0;
	color: var(--color-text-muted);
}