/*
 * EgyTech custom styles -- shop.css
 * Scope: Shop archive / product-blocks grid (.wopb-block-382d56)
 * Moved out of WordPress Additional CSS on 2026-09-21 so that a change
 * to one area can no longer overwrite unrelated sections.
 * See docs/SITE-CUSTOMIZATION-MAP.md
 */

/* ============================================================
   Shop page product card redesign (product-blocks / wopb grid).
   Scoped to this specific block instance (.wopb-block-382d56) so
   it never affects any other wopb block elsewhere on the site.
   Card previously had no background/border/shadow, titles had no
   line-clamp (titles here run to full spec sheets), images used
   object-fit:fill (distorted/stretched them), and the price had no
   visual emphasis over the rest of the card text.
   ============================================================ */

/* Defensive: CSS Grid items default to min-width:auto, which lets
   long unwrapped content blow out its column. Kept even though the
   title fix below avoids nowrap entirely -- same lesson as the
   homepage Featured Products grid fix above. */
.wopb-block-382d56 .wopb-block-item {
	min-width: 0;
}

/* Card chrome: white background, border, rounded corners, soft
   shadow, gentle hover lift -- matches the card style already used
   for Our Categories / Featured Products elsewhere on the site. */
.wopb-block-382d56 .wopb-block-content-wrap {
	background: #ffffff;
	border: 1px solid #ececec;
	border-radius: 14px !important;
	padding: 16px 16px 20px 16px !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.wopb-block-382d56 .wopb-block-item:hover .wopb-block-content-wrap {
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
	transform: translateY(-4px);
}

/* Fix stretched/distorted product images: contain instead of fill,
   on a light neutral backing so contain doesn't leave odd gaps. */
.wopb-block-382d56 .wopb-block-item .wopb-block-image img {
	object-fit: contain !important;
	background: #fafafa;
	border-radius: 8px;
}

/* -------------------------------------------------------------------------
   TITLE -- corrected.
   ROOT CAUSE OF "STILL CUT OFF": the previous version applied
   display:-webkit-box + -webkit-line-clamp to BOTH the <h3
   class="wopb-block-title"> wrapper AND the <a> nested inside it at the
   same time (a single comma-separated selector targeting both). Nesting
   two -webkit-box line-clamp contexts like that is unreliable across
   browsers -- the inner <a> becoming its own -webkit-box flex-like
   container fights the outer h3's own box/clamp behavior, which is what
   produced the broken/clipped look reported live.
   FIX: the clamp is applied to exactly ONE element -- the <a>, which is
   the element that actually contains the title text (confirmed live DOM:
   <h3 class="wopb-block-title"><a>Full title text</a></h3>). The h3
   wrapper itself is left as a plain block with a reserved min-height so
   every card's title area is still the same height regardless of how
   short/long that card's own title is. Also increased from 2 to 3 lines
   and bumped to font-weight 600 -- these titles run to full spec sheets,
   so 2 lines was still reading as cut off, and the brief was to use a
   stronger weight for readability. ------------------------------------ */
.wopb-block-382d56 .wopb-block-title {
	display: block;
	min-height: 4.2em;
}
.wopb-block-382d56 .wopb-block-title a {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.4em;
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   PRICE -- made genuinely dominant, not just present.
   The builder's own CSS sets `line-height:20px !important` on
   .wopb-product-price -- at the larger size used here that would look
   cramped, so line-height is explicitly overridden here too (also
   !important, since only !important reliably beats another !important
   regardless of selector order). Sale price stays bold brand blue; the
   old crossed-out price is pushed small/muted/secondary, with a clear
   margin separating the whole price block from the title above and the
   buttons below. ------------------------------------------------------- */
.wopb-block-382d56 .wopb-product-price {
	font-size: 26px !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
	margin: 14px 0 14px 0 !important;
	letter-spacing: 0.2px;
}
.wopb-block-382d56 .wopb-product-price del {
	margin-right: 8px;
}
.wopb-block-382d56 .wopb-product-price del .amount {
	color: #9a9a9a;
	font-weight: 400;
	font-size: 14px;
}
/* Old-price strike alignment fix: the browser's native text-decoration
   line-through was rendering visibly too high through this text (a known
   font-metric quirk, not fixable via text-decoration-thickness/skip-ink --
   those control thickness/gap behavior, not vertical position). Replaced
   with a manually centered line: del becomes a definite inline-block box
   so ::after can be sized/positioned against it precisely, then
   top:50%/translateY(-50%) centers the line through the exact middle of
   that box regardless of font/weight. currentColor keeps the line the
   same muted gray as the text itself. */
.wopb-block-382d56 .wopb-product-price del {
	text-decoration: none;
	position: relative;
	display: inline-block;
}
.wopb-block-382d56 .wopb-product-price del::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1.5px;
	background-color: currentColor;
	transform: translateY(-50%);
	pointer-events: none;
}
.wopb-block-382d56 .wopb-product-price ins {
	text-decoration: none;
}
.wopb-block-382d56 .wopb-product-price ins .amount {
	color: #035292;
	font-weight: 800;
}

/* Sale ribbon on this grid used a leftover green (#63B646), not the
   brand blue already applied to the core WooCommerce .onsale badge
   elsewhere on the site -- aligning it here too for consistency. */
.wopb-block-382d56 .wopb-onsale {
	background: #035292 !important;
}
.wopb-block-382d56 .wopb-onsale.wopb-onsale-ribbon:before {
	border-left-color: #035292 !important;
	border-right-color: #035292 !important;
}

/* -------------------------------------------------------------------------
   ADD TO CART / VIEW CART -- redesigned CTA area.
   CONFIRMED LIVE (fresh unauthenticated fetch, empty cart): the "View
   Cart" link is rendered UNCONDITIONALLY in the markup on every single
   card, right next to "Add to Cart", with no inline hidden style and
   no CSS in the plugin's own base stylesheet that hides it by default --
   so both are visible together on every card at all times, not just
   after something is actually added. Previously both inherited the exact
   same solid button style from one generic selector, so they looked like
   two competing, colliding duplicate buttons -- this is the root cause of
   "look poor and inconsistent".
   FIX: `.wopb-cart-action` (their shared wrapper) becomes a wrapping flex
   row with a clean gap, so the two links can never collide or overlap at
   any card width. "Add to Cart" keeps its existing primary solid-blue
   style (already correct) with an added hover lift for polish. "View
   Cart" is restyled as a visually distinct, smaller, outlined secondary
   pill, so the pair reads as one primary + one secondary action instead
   of two duplicate buttons -- looks intentional whether one or both are
   showing. ------------------------------------------------------------- */
.wopb-block-382d56 .wopb-cart-action {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 16px;
}

.wopb-block-382d56 .wopb-block-content-wrap .wopb-block-image ~ .wopb-product-btn a {
	margin: 0 !important;
	border-radius: 8px !important;
	transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.wopb-block-382d56 .wopb-block-content-wrap .wopb-block-image ~ .wopb-product-btn a.wopb-cart-normal:hover {
	box-shadow: 0 6px 16px rgba(3, 82, 146, 0.25);
	transform: translateY(-2px);
}

.wopb-block-382d56 .wopb-block-content-wrap .wopb-block-image ~ .wopb-product-btn a.wopb-cart-active {
	background: #ffffff !important;
	color: #035292 !important;
	border: 1.5px solid #035292 !important;
	padding: 10px 16px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
}
.wopb-block-382d56 .wopb-block-content-wrap .wopb-block-image ~ .wopb-product-btn a.wopb-cart-active:hover {
	background: #035292 !important;
	color: #ffffff !important;
}



/* Shop card responsive: keep the CTA row and title clamp comfortable on
   narrower cards (2-column tablet/mobile grid, confirmed in the builder's
   own breakpoints above). */
@media (max-width: 992px) {
	.wopb-block-382d56 .wopb-product-price {
		font-size: 22px !important;
	}
}
@media (max-width: 480px) {
	.wopb-block-382d56 .wopb-cart-action {
		flex-direction: column;
		align-items: stretch;
	}
	.wopb-block-382d56 .wopb-block-content-wrap .wopb-block-image ~ .wopb-product-btn a {
		width: 100%;
		text-align: center;
	}
}

/*
CTC Separate Stylesheet
Updated: 2026-09-20
Theme Name: EgyTech Pro (hello-elementor-child)
*/