/* =========================================================
   Saidah Collections — Single Product Page
   Restyles WooCommerce's own markup (gallery/zoom/lightbox,
   variation forms, tabs) — none of it is rebuilt from scratch,
   per the brief. Only layout/visuals are custom here.
   ========================================================= */

.single-product-page { padding: 32px 40px var(--saidah-section-gap); }
/* Deliberately NOT using the `padding:` shorthand above -- it would
   reset padding-left/padding-right to 0 on this element too, wiping
   out .container-fluid's own horizontal padding (that's exactly what
   was pinning the whole page to the browser edges). Longhand only
   touches top/bottom, leaving left/right exactly as .container-fluid
   set them. */

/*
 * A leftover rule from an earlier basic WooCommerce pass --
 * `.woocommerce div.product { display: grid; grid-template-columns:
 * 1fr 1fr; }` -- targets WooCommerce's own outer wrapper around the
 * ENTIRE product block (gallery+summary+tabs+related, all of it).
 * With that active, our .product-main-grid and .product-tabs-wrap
 * (its two direct children) become the outer grid's two columns
 * instead of stacking -- which is exactly the "3 columns" bug this
 * neutralizes it specifically for the custom single-product layout,
 * without needing to hunt down and edit wherever that old rule lives.
 */
.woocommerce div.product {
	display: block !important;
	grid-template-columns: none !important;
	gap: 0 !important;
}
.product-tabs-wrap { display: block !important; width: 100% !important; float: none !important; clear: both !important; }

/* Neutralizes an older, more basic .woocommerce div.product rule
   elsewhere in the theme (from before this dedicated product-page
   redesign) that set display:grid with 2 columns directly on
   WooCommerce's own outer product wrapper. Because that wrapper
   contains the gallery, summary, AND the tabs/related-products output
   as direct children, that old rule was pulling all of them into one
   grid together -- which is what caused the layout to fracture into
   stray columns instead of "gallery+summary on top, tabs below". Our
   OWN .product-main-grid (scoped just to gallery+summary) and
   .product-tabs-wrap (a plain full-width block below it) are the
   actual layout system now; this override makes sure nothing else
   quietly reintroduces the same conflict WooCommerce's own CSS did on
   this page. */
.woocommerce div.product {
	display: block !important;
	grid-template-columns: none !important;
	gap: 0 !important;
}

/* ---------- Main grid: gallery + summary ---------- */
.product-main-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important;
	gap: 56px;
	align-items: start;
}
.product-main-grid::after { content: ""; display: table; clear: both; } /* neutralizes any stray float from elsewhere */
.product-gallery-wrap,
.product-summary-wrap { float: none !important; width: auto !important; }

/* ---------- Gallery (WooCommerce's own markup, restyled) ---------- */
.product-gallery-wrap { position: sticky; top: 90px; }
.woocommerce-product-gallery { position: relative; }
.woocommerce-product-gallery__wrapper { width: 100% !important; margin: 0; border-radius: var(--saidah-radius); overflow: hidden; background: var(--saidah-surface); }
.woocommerce-product-gallery__image { border-radius: var(--saidah-radius); }
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.woocommerce-product-gallery__trigger {
	position: absolute; top: 16px; right: 16px; z-index: 5;
	width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.92);
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 4px 14px rgba(61,26,84,.18);
}
.woocommerce-product-gallery__trigger img { display: none; } /* hide WC's default tiny icon image, replaced by our own icon below */
.woocommerce-product-gallery__trigger::before {
	content: ""; width: 18px; height: 18px;
	background: var(--saidah-primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Thumbnail strip */
.flex-control-thumbs {
	display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none;
}
.flex-control-thumbs li { width: 76px; }
.flex-control-thumbs img {
	width: 76px; height: 76px; object-fit: cover; border-radius: var(--saidah-radius);
	border: 2px solid transparent; cursor: pointer; opacity: .75; transition: opacity .2s, border-color .2s;
}
.flex-control-thumbs img:hover { opacity: 1; }
.flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--saidah-secondary); }

/* Sale/featured labels sitting on the main image, if present */
.woocommerce-product-gallery .onsale {
	position: absolute; top: 16px; left: 16px; z-index: 5;
	background: var(--saidah-primary); color: #fff; font-size: .7rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .05em; padding: 6px 12px; border-radius: 20px;
}

/* ---------- Summary column ---------- */
.product-summary-wrap { display: flex; flex-direction: column; gap: 4px; }
.product-summary-wrap .product_title {
	font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 0 0 8px; line-height: 1.25;
}
.woocommerce-product-rating { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.star-rating { color: var(--saidah-secondary); font-size: .95rem; }
.woocommerce-review-link { font-size: .85rem; color: var(--saidah-muted); }

.product-summary-wrap .price {
	font-family: var(--saidah-font-heading); font-size: 1.6rem; color: var(--saidah-primary);
	margin-bottom: 18px; display: block;
}
.product-summary-wrap .price del { color: var(--saidah-muted); font-size: 1.1rem; font-weight: 400; margin-right: 10px; }
.product-summary-wrap .price ins { text-decoration: none; }

.woocommerce-product-details__short-description {
	font-size: .92rem; color: var(--saidah-muted); line-height: 1.7; margin-bottom: 22px;
	padding-bottom: 22px; border-bottom: 1px solid var(--saidah-border);
}
.woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }

/* ---------- Variations (WooCommerce's own <table>/<select>, restyled) ---------- */
.variations { width: 100%; margin-bottom: 6px; border: none; }
.variations tr { display: block; margin-bottom: 16px; }
.variations td, .variations th { display: block; border: none; padding: 0; text-align: left; }
.variations label { font-size: .82rem; font-weight: 600; color: var(--saidah-primary); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; display: block; }
.variations select {
	width: 100%; max-width: 320px; padding: 12px 14px; border: 1.5px solid var(--saidah-border);
	border-radius: var(--saidah-radius); font-size: .92rem; background: #fff; color: var(--saidah-text);
	cursor: pointer;
}
.variations select:focus { outline: none; border-color: var(--saidah-secondary); }
.variations .reset_variations {
	display: inline-block; margin-top: 6px; font-size: .78rem; color: var(--saidah-muted); text-decoration: underline;
}

.woocommerce-variation-price { font-family: var(--saidah-font-heading); font-size: 1.4rem; color: var(--saidah-primary); margin: 14px 0; }
.woocommerce-variation-availability { margin-bottom: 10px; }
.woocommerce-variation-availability .stock { font-size: .85rem; padding: 6px 12px; border-radius: 20px; display: inline-block; }
.woocommerce-variation-availability .in-stock { background: #eaf6ec; color: #1e6b2f; }
.woocommerce-variation-availability .out-of-stock { background: #fbeaea; color: #a1272e; }
.woocommerce-variation-availability .available-on-backorder { background: var(--saidah-surface); color: var(--saidah-primary); }
.single_variation_wrap { margin-bottom: 18px; }
.woocommerce-variation-description { font-size: .85rem; color: var(--saidah-muted); }

/* ---------- Quantity + Add to Cart form ---------- */
form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 8px; margin-bottom: 24px; }
.quantity { display: flex; align-items: stretch; border: 1.5px solid var(--saidah-border); border-radius: var(--saidah-radius); overflow: hidden; }
.quantity .qty-btn {
	width: 42px; background: var(--saidah-surface); border: none; font-size: 1.1rem; font-weight: 600;
	color: var(--saidah-primary); cursor: pointer; transition: background .15s;
}
.quantity .qty-btn:hover:not(:disabled) { background: var(--saidah-border); }
.quantity .qty-btn:disabled { opacity: .35; cursor: not-allowed; }
.quantity input.qty {
	width: 54px; border: none; text-align: center; font-size: .95rem; -moz-appearance: textfield;
	padding: 10px 0;
}
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.single_add_to_cart_button {
	flex: 1 1 220px; padding: 15px 28px; background: var(--saidah-primary); color: #fff;
	border: none; border-radius: var(--saidah-radius); font-size: .88rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .06em; cursor: pointer;
	transition: background .2s, transform .15s; position: relative;
}
.single_add_to_cart_button:hover:not(:disabled) { background: var(--saidah-secondary); color: var(--saidah-primary); }
.single_add_to_cart_button:disabled { background: var(--saidah-border); color: var(--saidah-muted); cursor: not-allowed; }
.single_add_to_cart_button.loading,
.sticky-atc-button.loading { color: transparent; }
.single_add_to_cart_button.loading::after,
.sticky-atc-button.loading::after {
	content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
	border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%;
	animation: saidahSpin .7s linear infinite;
}
.single_add_to_cart_button.is-success,
.sticky-atc-button.is-success { background: #1e6b2f !important; color: #fff !important; }
@keyframes saidahSpin { to { transform: rotate(360deg); } }

.saidah-atc-error { flex-basis: 100%; background: #fbeaea; color: #a1272e; padding: 10px 14px; border-radius: var(--saidah-radius); font-size: .85rem; }

.product_meta { font-size: .8rem; color: var(--saidah-muted); padding-top: 16px; border-top: 1px solid var(--saidah-border); }
.product_meta > span { display: block; margin-bottom: 6px; }
.product_meta a { color: var(--saidah-primary); }

/* ---------- Social share ---------- */
.product-share { display: flex; align-items: center; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.product-share-label { font-size: .8rem; color: var(--saidah-muted); font-weight: 600; }
.share-btn {
	width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: var(--saidah-surface); color: var(--saidah-primary); border: none; cursor: pointer;
	transition: background .2s, color .2s, transform .2s;
}
.share-btn:hover { background: var(--saidah-primary); color: #fff; transform: translateY(-2px); }
.share-copied-msg { font-size: .78rem; color: #1e6b2f; font-weight: 600; }

/* ---------- Tabs ---------- */
.product-tabs-wrap { margin-top: 64px; }
.woocommerce-tabs ul.tabs { display: flex; gap: 8px; border-bottom: 2px solid var(--saidah-border); margin: 0 0 30px; padding: 0; list-style: none; flex-wrap: wrap; }
.woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce-tabs ul.tabs li a {
	display: block; padding: 12px 22px; font-size: .85rem; font-weight: 600; text-transform: uppercase;
	letter-spacing: .04em; color: var(--saidah-muted); border-radius: var(--saidah-radius) var(--saidah-radius) 0 0;
}
.woocommerce-tabs ul.tabs li.active a { color: var(--saidah-primary); background: var(--saidah-surface); }
.woocommerce-tabs .woocommerce-Tabs-panel {
	font-size: .92rem; line-height: 1.75; color: var(--saidah-text); max-width: 780px;
}
.woocommerce-tabs table.shop_attributes { width: 100%; border-collapse: collapse; max-width: 620px; }
.woocommerce-tabs table.shop_attributes th,
.woocommerce-tabs table.shop_attributes td { padding: 12px 16px; border-bottom: 1px solid var(--saidah-border); font-size: .88rem; text-align: left; }
.woocommerce-tabs table.shop_attributes th { color: var(--saidah-primary); font-weight: 600; width: 220px; }

/* Reviews tab */
#reviews .comment-form-rating label { font-size: .85rem; }
#reviews #respond input[type="text"],
#reviews #respond input[type="email"],
#reviews #respond textarea {
	width: 100%; max-width: 480px; padding: 11px 14px; border: 1px solid var(--saidah-border);
	border-radius: var(--saidah-radius); font-family: var(--saidah-font-body); font-size: .9rem; margin-top: 6px;
}
#reviews #respond .form-submit input {
	margin-top: 12px; padding: 12px 26px; background: var(--saidah-primary); color: #fff;
	border: none; border-radius: var(--saidah-radius); font-weight: 600; text-transform: uppercase;
	font-size: .82rem; letter-spacing: .05em; cursor: pointer;
}
.commentlist { list-style: none; padding: 0; }
.commentlist .comment { border-bottom: 1px solid var(--saidah-border); padding: 18px 0; }
.commentlist .star-rating { margin-bottom: 6px; }

/* ---------- Related products ---------- */
.related.products, .up-sells.upsells { margin-top: 70px; }
.related.products > h2, .up-sells.upsells > h2 {
	font-size: clamp(1.4rem, 2.2vw, 1.9rem); text-align: center; margin-bottom: 34px;
}
.related.products ul.products, .up-sells.upsells ul.products {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; list-style: none; padding: 0;
}

/* ---------- Sticky Add to Cart bar ---------- */
.sticky-atc-bar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 800;
	background: #fff; border-top: 1px solid var(--saidah-border);
	box-shadow: 0 -8px 24px rgba(61,26,84,.12);
	transform: translateY(100%); transition: transform .3s ease;
}
.sticky-atc-bar.is-visible { transform: translateY(0); }
.sticky-atc-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; }
.sticky-atc-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sticky-atc-info img { width: 46px; height: 46px; object-fit: cover; border-radius: var(--saidah-radius); flex-shrink: 0; }
.sticky-atc-text { display: flex; flex-direction: column; min-width: 0; }
.sticky-atc-title { font-size: .85rem; font-weight: 600; color: var(--saidah-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.sticky-atc-price { font-size: .82rem; color: var(--saidah-primary); font-weight: 700; }
.sticky-atc-button {
	flex-shrink: 0; padding: 12px 26px; font-size: .82rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: .05em; border-radius: var(--saidah-radius); background: var(--saidah-primary); color: #fff;
	border: none; cursor: pointer; transition: background .2s; position: relative;
}
.sticky-atc-button:hover:not(:disabled) { background: var(--saidah-secondary); color: var(--saidah-primary); }
.sticky-atc-button:disabled { background: var(--saidah-border); color: var(--saidah-muted); cursor: not-allowed; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 991px) {
	.product-main-grid { grid-template-columns: 1fr; gap: 32px; }
	.product-gallery-wrap { position: static; }
	.related.products ul.products, .up-sells.upsells ul.products { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
	.single-product-page { padding: 0 16px 70px; }

	/* Gallery: edge-to-edge feel, swipeable, no border radius clipping the swipe area */
	.product-main-grid { gap: 18px; display: block; }
	.product-gallery-wrap { margin: 0 -16px 0; }
	.woocommerce-product-gallery__wrapper { border-radius: 0; }
	.woocommerce-product-gallery__trigger { top: 14px; right: 14px; width: 38px; height: 38px; }
	.flex-control-thumbs { padding: 0 16px; gap: 8px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -ms-overflow-style: none; margin-top: 12px; }
	.flex-control-thumbs::-webkit-scrollbar { display: none; }
	.flex-control-thumbs li { width: 58px; flex-shrink: 0; }
	.flex-control-thumbs img { width: 58px; height: 58px; }

	/* Summary: breathing room, app-card feel */
	.product-summary-wrap { padding-top: 18px; gap: 2px; }
	.product-summary-wrap .product_title { font-size: 1.3rem; }
	.product-summary-wrap .price { font-size: 1.35rem; margin-bottom: 14px; }
	.woocommerce-product-details__short-description { font-size: .88rem; margin-bottom: 18px; padding-bottom: 18px; }

	/* Variations: full-width touch-friendly selects, clear active state */
	.variations tr { margin-bottom: 14px; }
	.variations select { max-width: 100%; padding: 14px 16px; font-size: 1rem; min-height: 48px; }
	.woocommerce-variation-price { font-size: 1.2rem; }

	/* Quantity + Add to Cart: big touch targets (44px+ minimum tap size) */
	form.cart { gap: 10px; margin-bottom: 20px; }
	.quantity { flex: 0 0 auto; height: 48px; }
	.quantity .qty-btn { width: 46px; font-size: 1.2rem; }
	.quantity input.qty { width: 48px; font-size: 1rem; }
	.single_add_to_cart_button { flex: 1 1 auto; padding: 15px 20px; font-size: .85rem; min-height: 48px; border-radius: 10px; }

	/* Social share: compact, touch-friendly row */
	.product-share { gap: 8px; margin-top: 16px; }
	.share-btn { width: 40px; height: 40px; }

	/* Tabs: horizontally scrollable like an app's segmented control */
	.product-tabs-wrap { margin-top: 40px; }
	.woocommerce-tabs ul.tabs {
		display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; scrollbar-width: none; -ms-overflow-style: none;
		border-bottom: 1px solid var(--saidah-border); padding-bottom: 0;
	}
	.woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }
	.woocommerce-tabs ul.tabs li { flex-shrink: 0; }
	.woocommerce-tabs ul.tabs li a { padding: 11px 16px; font-size: .78rem; white-space: nowrap; }
	.woocommerce-tabs .woocommerce-Tabs-panel { font-size: .88rem; }
	.woocommerce-tabs table.shop_attributes th { width: 120px; font-size: .82rem; }
	.woocommerce-tabs table.shop_attributes td { font-size: .82rem; }

	/* Related products: comfortable 2-up grid, matches homepage app-card feel */
	.related.products, .up-sells.upsells { margin-top: 48px; }
	.related.products ul.products, .up-sells.upsells ul.products { grid-template-columns: repeat(2, 1fr); gap: 14px; }

	/* Reviews form: full-width, native-feeling inputs */
	#reviews #respond input[type="text"],
	#reviews #respond input[type="email"],
	#reviews #respond textarea { max-width: 100%; padding: 13px 14px; font-size: 1rem; }
	#reviews #respond .form-submit input { width: 100%; padding: 14px; min-height: 48px; }

	/* Sticky bar: minimal, app-like, doesn't eat the screen */
	.sticky-atc-bar { padding-bottom: env(safe-area-inset-bottom, 0); }
	.sticky-atc-inner { padding: 10px 16px; }
	.sticky-atc-title { max-width: 130px; font-size: .8rem; }
	.sticky-atc-button { padding: 12px 20px; font-size: .78rem; min-height: 44px; }
	body { padding-bottom: 0; } /* sticky bar is fixed and self-contained, doesn't need body padding on product pages */
}

@media (max-width: 480px) {
	.related.products ul.products, .up-sells.upsells ul.products { grid-template-columns: 1fr 1fr; gap: 12px; }
	.sticky-atc-info img { width: 38px; height: 38px; }
	.sticky-atc-text { display: none; } /* keep the mobile bar minimal: image + button only, true app-like compactness */
	.product-summary-wrap .product_title { font-size: 1.2rem; }
	.woocommerce-tabs ul.tabs li a { padding: 10px 13px; font-size: .74rem; }
}

/* Respect reduced-motion preferences; keep interactions fast, not flashy */
@media (prefers-reduced-motion: reduce) {
	.sticky-atc-bar, .single_add_to_cart_button, .share-btn, .flex-control-thumbs img { transition: none; }
}