/* ========================================================================== So Glamy — Premium Single Product Page Loaded only on is_product() (see so_glamy_product_assets()). Uses theme tokens (--tb-theme-color, --tb-border-color) and its icon fonts. No template overrides — styles the standard WooCommerce/Maia markup. ========================================================================== */ :root { --sgp-radius: 14px; --sgp-radius-sm: 10px; --sgp-shadow: 0 2px 12px rgba(20, 20, 20, 0.06); --sgp-muted: #8a8a8a; /* Brand blush — WCAG-checked tokens (UI/UX Pro Max "Blush rose" palette). --sgp-accent passes contrast for white text on the Add-to-Cart CTA. */ --sgp-accent: #be185d; --sgp-accent-hover: #9d174d; --sgp-accent-soft: #fdf2f8; --sgp-border: var(--tb-border-color, #e7e7e7); --sgp-success: #1e8e5a; --sgp-font-body: var(--tb-text-primary-font, 'Lato', sans-serif); --sgp-font-head: var(--tb-text-second-font, 'Cormorant Garamond', serif); } .single-product .so-glamy-pdp-info, .single-product .so-glamy-pdp-info * { box-sizing: border-box; } /* ========================================================================== Layout — root-cause fix for the "empty space on the left" + narrow gallery -------------------------------------------------------------------------- Diagnosis (from the parent theme's css/template.css): 1. `.image-mains { width: 45% }` → gallery too narrow. 2. `.style-horizontal .image-mains { text-align:center }` → the (portrait) product image is CENTERED inside its 45% column, so it floats away from the left edge — that gap IS the "empty space on the left side". 3. gallery 45% + `.information.col-lg-6` 50% = 95% → a dead 5% gutter and unbalanced proportions vs Zivame (gallery ~55%). Fix: rebalance to a Zivame-like 55/45 split, left-align + fill the gallery so it uses its full column width, widen the content container on large screens, and keep the gallery sticky while the details column scrolls. ========================================================================== */ /* Use more of the screen on large monitors (theme caps container at 1320px). */ @media (min-width: 1400px) { body.single-product #tbay-main-content .container { max-width: 1480px; } } @media (min-width: 992px) { .single-product .single-main-content .row { display: flex; align-items: flex-start; flex-wrap: nowrap; } /* Gallery: wider (55%), fills its column, left-aligned (kills the gap). Sticky is driven by JS (so-glamy initStickyGallery) via translateY, NOT native position:sticky — the theme's mmenu wrapper carries a runtime transform on #tbay-main-content that breaks native sticky/fixed for all descendants. JS translate within the column is immune to that. */ .single-product .single-main-content .image-mains { flex: 0 0 44%; width: 44%; max-width: 44%; padding-right: 40px; text-align: left; /* overrides .style-horizontal centering */ position: relative; align-self: flex-start; will-change: transform; } .single-product .single-main-content .image-mains .woocommerce-product-gallery, .single-product .single-main-content .image-mains .images { width: 100%; max-width: 100%; margin: 0; } /* Cap the main image height so it never dominates (Amazon-like, smaller). */ .single-product .single-main-content .image-mains .woocommerce-product-gallery__image img, .single-product .single-main-content .image-mains .images img { max-height: 560px; object-fit: contain; } /* Details: the wider column, scrolls past the sticky gallery. */ .single-product .single-main-content .information { flex: 0 0 56%; width: 56%; max-width: 56%; align-self: flex-start; } } /* Guard against horizontal overflow WITHOUT breaking the sticky gallery. `overflow-x: hidden` makes a scroll container, which disables position:sticky on all descendants — use `clip` instead, which prevents horizontal scroll but does NOT establish a scroll container. */ body.single-product { overflow-x: clip; } /* THE key sticky fix. The theme boots mmenu with offCanvas:{ pageSelector:"#tbay-main-content" }, so mmenu stamps `.mm-slideout` onto #tbay-main-content AT RUNTIME (all viewports). That applies TWO position:sticky killers to the gallery's ancestor: 1. `#tbay-main-content.mm-slideout { overflow: hidden }` (theme) — scroll container trap. 2. `.mm-slideout { transform: translate3d(0,0,0) }` (mmenu, closed state, used to slide the menu) — a transform on an ancestor makes it the containing block and breaks position:sticky ABSOLUTELY, regardless of overflow. This is the real reason every earlier CSS-only fix failed: the transform is injected by JS after load, invisible to static checks. The off-canvas menu is not used on desktop, and the closed-state transform is the identity translate3d(0,0,0) — so removing both on desktop is visually a no-op but frees position:sticky. Mobile (<992px, where the menu slides and the gallery isn't sticky) is left untouched. */ @media (min-width: 992px) { html.mm-wrapper { overflow-x: clip; } body.single-product #tbay-main-content.mm-slideout { overflow: visible !important; transform: none !important; } } /* ---------- Title / price hierarchy ---------- */ .single-product .product_title { font-family: var(--sgp-font-head); font-size: 30px; line-height: 1.2; font-weight: 600; margin-bottom: 10px; } .single-product .summary p.price, .single-product .summary .price { font-family: var(--sgp-font-body); font-size: 24px; font-weight: 700; color: #191919; } .single-product .summary p.price del { color: var(--sgp-muted); font-weight: 400; font-size: 17px; margin-right: 8px; } .single-product .summary p.price ins { text-decoration: none; } /* ---------- Variation swatches ---------- */ .single-product .swatch-item, .single-product .variable-item { border-radius: 8px !important; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .single-product .variable-item.selected, .single-product .swatch-item.selected { border-color: var(--sgp-accent) !important; box-shadow: 0 0 0 2px rgba(190, 24, 93, 0.22) !important; } /* ---------- Quantity + Add to Cart ---------- */ .single-product form.cart { margin-top: 18px; } .single-product .quantity input.qty { min-height: 50px; border-radius: var(--sgp-radius-sm); border: 1px solid var(--sgp-border); text-align: center; } .single-product .single_add_to_cart_button { min-height: 50px; border-radius: var(--sgp-radius-sm) !important; font-weight: 700 !important; letter-spacing: 0.02em; font-size: 15px !important; background: var(--sgp-accent) !important; color: #fff !important; border-color: var(--sgp-accent) !important; transition: background 0.2s ease, transform 0.05s ease; } .single-product .single_add_to_cart_button:hover, .single-product .single_add_to_cart_button:focus { background: var(--sgp-accent-hover) !important; border-color: var(--sgp-accent-hover) !important; color: #fff !important; } .single-product .single_add_to_cart_button:active { transform: translateY(1px); } /* ---------- Info block (offers / delivery / stock / size guide) ---------- */ .so-glamy-pdp-info { font-family: var(--sgp-font-body); margin: 16px 0; display: flex; flex-direction: column; gap: 14px; } .so-glamy-lowstock { margin: 0; font-size: 13px; font-weight: 700; color: #c0392b; } .so-glamy-lowstock i { margin-right: 5px; } .so-glamy-sizeguide-trigger { align-self: flex-start; background: none; border: none; padding: 0; font-family: var(--sgp-font-body); font-size: 13px; font-weight: 600; color: var(--sgp-accent); cursor: pointer; text-decoration: underline; } .so-glamy-sizeguide-trigger i { margin-right: 5px; } /* Delivery estimator + pincode */ .so-glamy-delivery { border: 1px solid var(--sgp-border); border-radius: var(--sgp-radius); padding: 16px; background: var(--sgp-accent-soft); } .so-glamy-delivery-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 12px; } .so-glamy-delivery-head i { color: var(--sgp-accent); } .so-glamy-pincode { display: flex; gap: 8px; } .so-glamy-pincode-input { flex: 1 1 auto; min-height: 44px; border: 1px solid var(--sgp-border); border-radius: var(--sgp-radius-sm); padding: 0 12px; font-size: 14px; } .so-glamy-pincode-input:focus { outline: none; border-color: var(--sgp-accent); box-shadow: 0 0 0 3px rgba(190, 24, 93, 0.16); } .so-glamy-pincode-btn { min-height: 44px; padding: 0 18px; border: none; border-radius: var(--sgp-radius-sm); background: #191919; color: #fff; font-weight: 600; font-size: 13px; cursor: pointer; flex-shrink: 0; } .so-glamy-delivery-result { margin-top: 4px; } .so-glamy-delivery-result:empty { margin-top: 0; } .so-glamy-delivery-result .sg-dr-loc { font-size: 12px; color: var(--sgp-muted); margin: 12px 0 8px; } .so-glamy-delivery-result ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .so-glamy-delivery-result li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #333; } .so-glamy-delivery-result li i { color: var(--sgp-success); font-size: 13px; width: 14px; text-align: center; } .so-glamy-delivery-result li.sg-dr-by { font-weight: 700; color: #191919; } .so-glamy-delivery-result li.sg-dr-no i { color: #c0392b; } .so-glamy-delivery-result.is-err { font-size: 13px; color: #c0392b; font-weight: 600; margin-top: 12px; } .so-glamy-delivery-result.is-loading { font-size: 13px; color: var(--sgp-muted); margin-top: 12px; } /* Offers */ .so-glamy-pdp-offers { border: 1px dashed rgba(190, 24, 93, 0.4); border-radius: var(--sgp-radius); padding: 14px 16px; background: linear-gradient(135deg, rgba(190, 24, 93, 0.08), rgba(190, 24, 93, 0.02)); } .so-glamy-pdp-offers-title { margin: 0 0 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #6b4a12; } .so-glamy-pdp-offers-title i { margin-right: 5px; } .so-glamy-pdp-offers ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .so-glamy-pdp-offers li { display: flex; align-items: baseline; gap: 10px; font-size: 12px; } .so-glamy-pdp-offer-label { flex-shrink: 0; font-weight: 700; color: var(--sgp-success); min-width: 62px; } .so-glamy-pdp-offer-why { color: #555; } .so-glamy-pdp-offer-why strong { background: #fff; border: 1px dashed var(--sgp-border); padding: 1px 6px; border-radius: 4px; letter-spacing: 0.03em; } /* Trust badges */ .so-glamy-pdp-trust { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--sgp-border); display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 16px; font-family: var(--sgp-font-body); } .so-glamy-pdp-trust li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #555; } .so-glamy-pdp-trust i { color: var(--sgp-accent); font-size: 15px; width: 18px; text-align: center; } /* ---------- Payment icons row ---------- */ .so-glamy-pay-icons { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; font-family: var(--sgp-font-body); } .so-glamy-pay-lbl { font-size: 11px; color: var(--sgp-muted); text-transform: uppercase; letter-spacing: 0.04em; } .so-glamy-pay-icons ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .so-glamy-pay-icons li { font-size: 10px; font-weight: 700; letter-spacing: 0.02em; color: #444; background: #fff; border: 1px solid var(--sgp-border); border-radius: 5px; padding: 4px 8px; line-height: 1; } /* ---------- Accordions (Highlights / Fabric / Description / Return / FAQ) ---------- */ .so-glamy-accordions { margin-top: 22px; border-top: 1px solid var(--sgp-border); font-family: var(--sgp-font-body); } .so-glamy-acc { border-bottom: 1px solid var(--sgp-border); } .so-glamy-acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 16px 2px; font-size: 15px; font-weight: 600; color: #191919; } .so-glamy-acc > summary::-webkit-details-marker { display: none; } .so-glamy-acc > summary::after { content: '\f067'; /* plus */ font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 12px; color: var(--sgp-muted); transition: transform 0.2s ease; } .so-glamy-acc[open] > summary::after { content: '\f068'; /* minus */ } .so-glamy-acc-body { padding: 0 2px 18px; font-size: 14px; line-height: 1.6; color: #555; } .so-glamy-acc-body p { margin: 0 0 10px; } .so-glamy-highlights { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .so-glamy-highlights li { position: relative; padding-left: 22px; font-size: 14px; color: #333; } .so-glamy-highlights li::before { content: '\f00c'; /* check */ font-family: 'Font Awesome 5 Free'; font-weight: 900; position: absolute; left: 0; top: 1px; color: var(--sgp-success); font-size: 12px; } .so-glamy-faq { margin-bottom: 14px; } .so-glamy-faq:last-child { margin-bottom: 0; } .so-glamy-faq-q { font-weight: 600; color: #191919; margin: 0 0 4px; } .so-glamy-faq-a { color: #666; margin: 0; } /* ---------- Tabs / related polish ---------- */ .single-product .woocommerce-tabs { margin-top: 40px; } .single-product .related.products > h2, .single-product .up-sells > h2 { font-family: var(--sgp-font-head); font-size: 26px; font-weight: 600; } /* ---------- Size guide popup ---------- */ .so-glamy-sizeguide-overlay { position: fixed; inset: 0; z-index: 1000000; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; padding: 20px; } .so-glamy-sizeguide-overlay[hidden] { display: none; } .so-glamy-sizeguide-modal { background: #fff; border-radius: var(--sgp-radius); max-width: 460px; width: 100%; padding: 24px; position: relative; font-family: var(--sgp-font-body); max-height: 90vh; overflow-y: auto; } .so-glamy-sizeguide-close { position: absolute; top: 12px; right: 16px; background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--sgp-muted); } .so-glamy-sizeguide-modal h3 { font-family: var(--sgp-font-head); font-size: 24px; margin: 0 0 8px; } .so-glamy-sizeguide-note { font-size: 12px; color: var(--sgp-muted); margin: 0 0 16px; } .so-glamy-sizeguide-modal table { width: 100%; border-collapse: collapse; font-size: 14px; } .so-glamy-sizeguide-modal th, .so-glamy-sizeguide-modal td { border: 1px solid var(--sgp-border); padding: 10px; text-align: center; } .so-glamy-sizeguide-modal th { background: #fafafa; font-weight: 700; } /* ========================================================================== Mobile: single column + sticky Add-to-Cart bar ========================================================================== */ @media (max-width: 991.98px) { .single-product .so-glamy-pdp-trust { grid-template-columns: repeat(2, 1fr); } } /* ---------- Sticky buy bar (mobile + tablet) ---------- The theme renders its own fixed bottom nav (.footer-device-mobile, Home/ Shop/Wishlist/Account) at z-index:1001, shown below xl (1200px). On a product page the bottom belongs to the buy action (Zivame/Myntra/Amazon pattern), so we HIDE that nav on PDP and let the buy bar own the bottom — this is what fixed the reported overlap. Breakpoint matches the theme's d-xl-none (1200px) so the buy bar consistently replaces the nav. */ @media (max-width: 1199.98px) { body.single-product .footer-device-mobile { display: none !important; } body.single-product.has-sg-buybar { padding-bottom: 88px; } .so-glamy-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100000; /* above the theme nav (1001) */ display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.12); border-top: 1px solid var(--sgp-border); } .so-glamy-buybar-price { display: flex; flex-direction: column; line-height: 1.2; flex-shrink: 0; } .so-glamy-buybar-price .amt { font-weight: 700; font-size: 16px; color: #191919; } .so-glamy-buybar-price .lbl { font-size: 10px; color: var(--sgp-muted); } .so-glamy-buybar-btn { flex: 1 1 auto; min-height: 50px; border: none; border-radius: var(--sgp-radius-sm); background: var(--sgp-accent); color: #191919; font-weight: 700; font-size: 15px; letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer; } } /* Never show the buy bar on desktop (≥1200px) */ @media (min-width: 1200px) { .so-glamy-buybar { display: none !important; } } /* ========================================================================== Helpful guides — blog links under the add-to-cart area ========================================================================== */ body.single-product .sg-pguides { margin: 18px 0 0; padding: 14px 16px; border: 1px solid #F2DCE7; border-radius: 10px; background: #FDF6F9; } body.single-product .sg-pguides-label { display: block; font-family: var(--tb-text-primary-font, 'Montserrat', sans-serif); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #9A7A88; margin-bottom: 8px; } body.single-product .sg-pguides ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } body.single-product .sg-pguides li { margin: 0; } body.single-product .sg-pguides a { font-family: var(--tb-text-primary-font, 'Montserrat', sans-serif); font-size: 13.5px; line-height: 1.5; color: #333; text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } body.single-product .sg-pguides a::before { content: "→"; color: var(--tb-theme-color, #E91E8C); margin-right: 8px; font-weight: 700; } body.single-product .sg-pguides a:hover { color: var(--tb-theme-color, #E91E8C); border-bottom-color: var(--tb-theme-color, #E91E8C); }