/* THINK ABOUT BOOKS — PRODUCT DETAIL */ body.single-product { --tab-navy:#071B3D; --tab-teal:#1687A3; --tab-teal-dark:#086B85; --tab-aqua:#78C8D8; --tab-ice:#F3F9FB; --tab-border:#DCE9EE; --tab-slate:#607086; } /* THREE REAL COLUMNS */ .tab-product-top { width:min(calc(100% - 72px),1580px); margin:0 auto; padding:42px 0 55px; display:grid; grid-template-columns: minmax(300px,1fr) minmax(330px,1.05fr) minmax(360px,.95fr); gap:42px; align-items:start; } .tab-product-gallery, .tab-product-info, .tab-product-purchase { min-width:0; } /* REMOVE XSTORE COLUMN WIDTHS */ .tab-product-top .product-images, .tab-product-top .product-information { float:none !important; width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; } /* GALLERY */ .tab-product-gallery .woocommerce-product-gallery { width:100% !important; margin:0 !important; } .tab-product-gallery .woocommerce-product-gallery__wrapper { width:100% !important; margin:0 !important; } .tab-product-gallery .woocommerce-product-gallery__image { width:100% !important; display:flex !important; justify-content:center; } .tab-product-gallery .woocommerce-product-gallery__image a { width:100% !important; display:flex !important; justify-content:center; } .tab-product-gallery .woocommerce-product-gallery__image img { display:block !important; width:auto !important; max-width:100% !important; height:auto !important; max-height:520px !important; margin:0 auto !important; object-fit:contain !important; } /* THUMBNAILS BELOW COVER */ .tab-product-gallery .flex-control-thumbs { position:static !important; width:100% !important; display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; gap:10px !important; margin:16px 0 0 !important; padding:0 !important; transform:none !important; } .tab-product-gallery .flex-control-thumbs li { float:none !important; flex:0 0 76px !important; width:76px !important; height:98px !important; margin:0 !important; overflow:hidden; border:1px solid var(--tab-border); border-radius:7px; background:#fff; } .tab-product-gallery .flex-control-thumbs li img { width:100% !important; height:100% !important; padding:4px; object-fit:contain; } .tab-product-gallery .flex-control-thumbs li img.flex-active { box-shadow: inset 0 0 0 2px var(--tab-teal); } /* DISABLE OLD VERTICAL THUMBNAIL GEOMETRY */ .tab-product-gallery .with-vertical-slider { padding-left:0 !important; padding-right:0 !important; } .tab-product-gallery [class*="thumbnails"] { position:static !important; transform:none !important; } /* INFORMATION */ .tab-product-info { padding-top:4px; } .tab-product-info .product_title { margin:0 0 8px !important; color:var(--tab-navy) !important; font-size:clamp(38px,3vw,54px) !important; font-weight:800 !important; line-height:1.02 !important; letter-spacing:-.04em !important; } .tab-product-info .price { margin:0 0 14px !important; color:var(--tab-navy) !important; } .tab-product-info .woocommerce-product-details__short-description { margin-bottom:24px !important; color:#42546A !important; font-size:15px !important; line-height:1.7 !important; } .tab-product-info .product_meta { margin-top:20px !important; padding-top:18px !important; border-top:1px solid var(--tab-border) !important; color:var(--tab-slate) !important; font-size:12px !important; line-height:1.9 !important; } .tab-product-info .product_meta > span { display:block; } .tab-product-info .product_meta a { color:var(--tab-teal) !important; } /* PURCHASE PANEL */ .tab-product-purchase .tab-purchase-card { position:static !important; width:100% !important; max-width:none !important; margin:0 !important; padding:26px !important; border:1px solid var(--tab-border) !important; border-radius:16px !important; background:#fff !important; box-shadow: 0 14px 38px rgba(7,27,61,.075) !important; } .tab-product-purchase .tab-purchase-price, .tab-product-purchase .tab-purchase-price .woocommerce-Price-amount { color:var(--tab-navy) !important; font-size:30px !important; font-weight:800 !important; } .tab-product-purchase .tab-purchase-stock { margin:14px 0 3px !important; color:#168A62 !important; font-weight:700 !important; } .tab-product-purchase .tab-purchase-delivery { margin-bottom:16px; color:var(--tab-slate); font-size:12px; } /* CART */ .tab-product-purchase form.cart { width:100% !important; display:grid !important; grid-template-columns:78px minmax(0,1fr) !important; gap:10px !important; margin:18px 0 10px !important; } .tab-product-purchase form.cart .quantity { display:flex !important; width:78px !important; height:52px !important; margin:0 !important; border:1px solid var(--tab-border) !important; border-radius:7px !important; } .tab-product-purchase .single_add_to_cart_button { display:flex !important; width:100% !important; min-height:52px !important; align-items:center; justify-content:center; margin:0 !important; border:0 !important; border-radius:7px !important; background: linear-gradient( 90deg, var(--tab-teal-dark), var(--tab-teal) ) !important; color:#fff !important; font-size:12px !important; font-weight:800 !important; } /* BUY NOW */ .tab-product-purchase .tab-buy-now-button { display:flex !important; width:100% !important; min-height:52px !important; align-items:center; justify-content:center; margin:12px 0 15px !important; border:2px solid var(--tab-teal) !important; border-radius:7px !important; background:#fff !important; color:var(--tab-teal-dark) !important; font-size:12px !important; font-weight:800 !important; } /* REFERRAL */ .tab-product-purchase .tab-share-earn { margin-top:16px !important; padding:18px !important; border:1px solid var(--tab-border) !important; border-radius:10px !important; background: linear-gradient( 135deg, var(--tab-ice), #fff ) !important; } .tab-product-purchase .tab-share-earn__content strong { color:var(--tab-teal-dark) !important; } .tab-product-purchase .tab-share-link { color:var(--tab-teal-dark) !important; border-color:var(--tab-teal) !important; } /* RESPONSIVE */ @media (max-width:1100px) { .tab-product-top { width:calc(100% - 40px); grid-template-columns:1fr 1fr; gap:35px; } .tab-product-purchase { grid-column:1 / -1; max-width:650px; width:100%; margin:0 auto; } } @media (max-width:767px) { .tab-product-top { width:calc(100% - 28px); display:block; padding-top:25px; } .tab-product-gallery, .tab-product-info, .tab-product-purchase { width:100%; margin-bottom:28px; } } /* ========================================================= TAB PRODUCT — FINAL GALLERY SIZE + THUMBNAILS Does NOT change the locked 3-column architecture ========================================================= */ /* Gallery canvas */ body.single-product .tab-product-gallery { width:100% !important; min-width:0 !important; } /* WooCommerce gallery itself */ body.single-product .tab-product-gallery .woocommerce-product-gallery { width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; } /* Main gallery viewport */ body.single-product .tab-product-gallery .woocommerce-product-gallery__wrapper { width:100% !important; max-width:100% !important; min-height:500px !important; display:block !important; margin:0 !important; padding:0 !important; overflow:hidden !important; background:#FFFFFF !important; border-radius:12px !important; } /* Every WooCommerce slide */ body.single-product .tab-product-gallery .woocommerce-product-gallery__image { width:100% !important; max-width:100% !important; min-height:500px !important; display:flex !important; align-items:center !important; justify-content:center !important; margin:0 !important; padding:0 !important; } /* Image link */ body.single-product .tab-product-gallery .woocommerce-product-gallery__image > a { width:100% !important; height:500px !important; display:flex !important; align-items:center !important; justify-content:center !important; } /* MAIN BOOK COVER */ body.single-product .tab-product-gallery .woocommerce-product-gallery__image img.wp-post-image, body.single-product .tab-product-gallery .woocommerce-product-gallery__image img { width:auto !important; max-width:92% !important; height:auto !important; max-height:500px !important; min-width:260px !important; margin:0 auto !important; object-fit:contain !important; object-position:center center !important; transform:none !important; } /* ========================================================= THUMBNAILS — BELOW MAIN COVER ========================================================= */ body.single-product .tab-product-gallery .flex-control-thumbs { position:static !important; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; width:100% !important; max-width:100% !important; display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; align-items:center !important; justify-content:flex-start !important; gap:10px !important; margin:14px 0 0 !important; padding:0 !important; transform:none !important; list-style:none !important; } /* Individual thumbnail */ body.single-product .tab-product-gallery .flex-control-thumbs li { position:static !important; float:none !important; flex:0 0 72px !important; width:72px !important; height:92px !important; margin:0 !important; padding:0 !important; overflow:hidden !important; border:1px solid var(--tab-border) !important; border-radius:7px !important; background:#FFFFFF !important; cursor:pointer; } /* Thumbnail image */ body.single-product .tab-product-gallery .flex-control-thumbs li img { display:block !important; width:100% !important; height:100% !important; min-width:0 !important; max-width:none !important; max-height:none !important; padding:4px !important; object-fit:contain !important; opacity:.65 !important; transition: opacity .2s ease, box-shadow .2s ease; } /* Selected thumbnail */ body.single-product .tab-product-gallery .flex-control-thumbs li img.flex-active { opacity:1 !important; box-shadow: inset 0 0 0 2px var(--tab-teal) !important; } /* Hover */ body.single-product .tab-product-gallery .flex-control-thumbs li img:hover { opacity:1 !important; } /* ========================================================= XSTORE VERTICAL SLIDER OVERRIDES ========================================================= */ body.single-product .tab-product-gallery .with-vertical-slider { padding-left:0 !important; padding-right:0 !important; } body.single-product .tab-product-gallery [class*="vertical"] { left:auto !important; right:auto !important; } body.single-product .tab-product-gallery [class*="thumbnails"] { position:static !important; transform:none !important; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width:1100px) { body.single-product .tab-product-gallery .woocommerce-product-gallery__wrapper, body.single-product .tab-product-gallery .woocommerce-product-gallery__image { min-height:440px !important; } body.single-product .tab-product-gallery .woocommerce-product-gallery__image > a { height:440px !important; } body.single-product .tab-product-gallery .woocommerce-product-gallery__image img { min-width:0 !important; max-height:440px !important; } } @media (max-width:767px) { body.single-product .tab-product-gallery .woocommerce-product-gallery__wrapper, body.single-product .tab-product-gallery .woocommerce-product-gallery__image { min-height:380px !important; } body.single-product .tab-product-gallery .woocommerce-product-gallery__image > a { height:380px !important; } body.single-product .tab-product-gallery .woocommerce-product-gallery__image img { min-width:0 !important; max-width:90% !important; max-height:380px !important; } body.single-product .tab-product-gallery .flex-control-thumbs li { flex-basis:58px !important; width:58px !important; height:76px !important; } } /* ========================================================= TAB PRODUCT GALLERY V2 Large cover + horizontal thumbnails ========================================================= */ /* Reset XStore slider geometry */ body.single-product .tab-product-gallery .product-images, body.single-product .tab-product-gallery .woocommerce-product-gallery, body.single-product .tab-product-gallery .woocommerce-product-gallery.with-vertical-slider { position:relative !important; width:100% !important; max-width:100% !important; height:auto !important; min-height:0 !important; margin:0 !important; padding:0 !important; overflow:visible !important; } /* Main slider */ body.single-product .tab-product-gallery .woocommerce-product-gallery__wrapper { position:relative !important; width:100% !important; max-width:100% !important; height:520px !important; min-height:520px !important; margin:0 !important; padding:0 !important; overflow:hidden !important; background:#fff !important; border:1px solid var(--tab-border) !important; border-radius:12px !important; } /* Reset every slide */ body.single-product .tab-product-gallery .woocommerce-product-gallery__image, body.single-product .tab-product-gallery .woocommerce-product-gallery__image.flex-active-slide { position:relative !important; float:none !important; width:100% !important; max-width:100% !important; height:520px !important; min-height:520px !important; margin:0 !important; padding:18px !important; display:flex !important; align-items:center !important; justify-content:center !important; overflow:hidden !important; transform:none !important; } /* Main image link */ body.single-product .tab-product-gallery .woocommerce-product-gallery__image > a { position:static !important; display:flex !important; width:100% !important; height:100% !important; align-items:center !important; justify-content:center !important; margin:0 !important; padding:0 !important; } /* Cover itself */ body.single-product .tab-product-gallery .woocommerce-product-gallery__image img, body.single-product .tab-product-gallery .woocommerce-product-gallery__image img.wp-post-image { position:static !important; display:block !important; width:auto !important; min-width:0 !important; max-width:100% !important; height:auto !important; min-height:0 !important; max-height:484px !important; margin:auto !important; padding:0 !important; object-fit:contain !important; object-position:center !important; transform:none !important; } /* ========================================================= THUMBNAILS ========================================================= */ body.single-product .tab-product-gallery .flex-control-thumbs { position:static !important; inset:auto !important; display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; align-items:center !important; justify-content:flex-start !important; width:100% !important; height:auto !important; gap:12px !important; margin:14px 0 0 !important; padding:0 !important; overflow:visible !important; transform:none !important; list-style:none !important; } body.single-product .tab-product-gallery .flex-control-thumbs li { position:relative !important; float:none !important; flex:0 0 90px !important; width:90px !important; height:115px !important; margin:0 !important; padding:5px !important; overflow:hidden !important; border:1px solid var(--tab-border) !important; border-radius:8px !important; background:#fff !important; box-shadow:none !important; } body.single-product .tab-product-gallery .flex-control-thumbs li img { position:static !important; display:block !important; width:100% !important; min-width:0 !important; max-width:100% !important; height:100% !important; min-height:0 !important; max-height:100% !important; margin:0 !important; padding:0 !important; object-fit:contain !important; object-position:center !important; opacity:.68 !important; transform:none !important; cursor:pointer !important; } body.single-product .tab-product-gallery .flex-control-thumbs li img.flex-active { opacity:1 !important; } body.single-product .tab-product-gallery .flex-control-thumbs li:has(img.flex-active) { border:2px solid var(--tab-teal) !important; } /* Remove XStore vertical thumbnail controls */ body.single-product .tab-product-gallery [class*="vertical-slider"], body.single-product .tab-product-gallery [class*="verticalSlider"] { left:auto !important; right:auto !important; } body.single-product .tab-product-gallery .swiper-button-prev, body.single-product .tab-product-gallery .swiper-button-next { display:none !important; } /* Zoom button stays inside main gallery */ body.single-product .tab-product-gallery .woocommerce-product-gallery__trigger { top:14px !important; right:14px !important; left:auto !important; z-index:20 !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width:1100px) { body.single-product .tab-product-gallery .woocommerce-product-gallery__wrapper, body.single-product .tab-product-gallery .woocommerce-product-gallery__image, body.single-product .tab-product-gallery .woocommerce-product-gallery__image.flex-active-slide { height:470px !important; min-height:470px !important; } body.single-product .tab-product-gallery .woocommerce-product-gallery__image img { max-height:434px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px) { body.single-product .tab-product-gallery .woocommerce-product-gallery__wrapper, body.single-product .tab-product-gallery .woocommerce-product-gallery__image, body.single-product .tab-product-gallery .woocommerce-product-gallery__image.flex-active-slide { height:430px !important; min-height:430px !important; } body.single-product .tab-product-gallery .woocommerce-product-gallery__image { padding:14px !important; } body.single-product .tab-product-gallery .woocommerce-product-gallery__image img { max-height:402px !important; } body.single-product .tab-product-gallery .flex-control-thumbs li { flex-basis:68px !important; width:68px !important; height:88px !important; } } /* ========================================================= TAB PRODUCT GALLERY V3 Top alignment + full-size book cover ========================================================= */ /* --------------------------------------------------------- MOVE ALL THREE COLUMNS UP --------------------------------------------------------- */ body.single-product .tab-product-top { padding-top: 18px !important; } /* Remove XStore spacing immediately above product area */ body.single-product .product-content, body.single-product .content-page { padding-top: 0 !important; margin-top: 0 !important; } /* ========================================================= GALLERY — RESET FLEXSLIDER INTERNAL WIDTHS ========================================================= */ body.single-product .tab-product-gallery .woocommerce-product-gallery { width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } /* * Main visible cover frame. */ body.single-product .tab-product-gallery .woocommerce-product-gallery__wrapper { position: relative !important; width: 100% !important; max-width: 100% !important; height: 520px !important; min-height: 520px !important; margin: 0 !important; padding: 18px !important; overflow: hidden !important; display: block !important; border: 1px solid var(--tab-border) !important; border-radius: 12px !important; background: #FFFFFF !important; box-sizing: border-box !important; } /* * CRITICAL: * XStore/FlexSlider can leave width values directly on slides. * Override them. */ body.single-product .tab-product-gallery .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image { position: absolute !important; top: 18px !important; left: 18px !important; width: calc(100% - 36px) !important; max-width: calc(100% - 36px) !important; height: calc(100% - 36px) !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; float: none !important; overflow: hidden !important; opacity: 0; pointer-events: none; transform: none !important; } /* Active FlexSlider slide */ body.single-product .tab-product-gallery .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image.flex-active-slide { position: absolute !important; display: flex !important; opacity: 1 !important; pointer-events: auto !important; z-index: 2 !important; } /* * Fallback for gallery before FlexSlider initializes: * first slide must remain visible. */ body.single-product .tab-product-gallery .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child { opacity: 1; } /* Link fills entire cover frame */ body.single-product .tab-product-gallery .woocommerce-product-gallery__image > a { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= ACTUAL BOOK IMAGE ========================================================= */ /* * Scale primarily by HEIGHT. * * This is what was missing. * The image should fill most of the 484px usable canvas * while retaining the book's natural aspect ratio. */ body.single-product .tab-product-gallery .woocommerce-product-gallery__image img, body.single-product .tab-product-gallery .woocommerce-product-gallery__image img.wp-post-image { position: static !important; display: block !important; width: auto !important; max-width: 100% !important; height: 100% !important; max-height: 100% !important; min-width: 0 !important; min-height: 0 !important; margin: 0 auto !important; padding: 0 !important; object-fit: contain !important; object-position: center center !important; transform: none !important; } /* ========================================================= THUMBNAILS BELOW COVER ========================================================= */ body.single-product .tab-product-gallery .flex-control-thumbs { position: relative !important; inset: auto !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; width: 100% !important; height: auto !important; margin: 14px 0 0 !important; padding: 0 !important; overflow: visible !important; transform: none !important; } body.single-product .tab-product-gallery .flex-control-thumbs li { position: relative !important; float: none !important; flex: 0 0 86px !important; width: 86px !important; height: 110px !important; margin: 0 !important; padding: 5px !important; overflow: hidden !important; border: 1px solid var(--tab-border) !important; border-radius: 8px !important; background: #FFFFFF !important; box-sizing: border-box !important; } body.single-product .tab-product-gallery .flex-control-thumbs li img { position: static !important; display: block !important; width: 100% !important; max-width: 100% !important; height: 100% !important; max-height: 100% !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; opacity: .65 !important; transform: none !important; } body.single-product .tab-product-gallery .flex-control-thumbs li img.flex-active { opacity: 1 !important; } body.single-product .tab-product-gallery .flex-control-thumbs li:has(img.flex-active) { border: 2px solid var(--tab-teal) !important; } /* ========================================================= REMOVE OLD XSTORE VERTICAL GALLERY BEHAVIOUR ========================================================= */ body.single-product .tab-product-gallery .with-vertical-slider { padding-left: 0 !important; padding-right: 0 !important; } body.single-product .tab-product-gallery [class*="vertical-slider"], body.single-product .tab-product-gallery [class*="verticalSlider"] { position: static !important; left: auto !important; right: auto !important; width: 100% !important; transform: none !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { body.single-product .tab-product-top { padding-top: 12px !important; } body.single-product .tab-product-gallery .woocommerce-product-gallery__wrapper { height: 430px !important; min-height: 430px !important; } body.single-product .tab-product-gallery .flex-control-thumbs li { flex-basis: 66px !important; width: 66px !important; height: 86px !important; } } /* ========================================================= TAB PRODUCT — OUTER CANVAS ONLY DO NOT alter internal 3-column geometry ========================================================= */ @media (min-width:1200px) { /* * XStore outer wrappers: * allow our custom product layout to use the wide * approved Think About Books desktop canvas. */ body.single-product .page-wrapper .container, body.single-product .content-page, body.single-product .product-content { width:100% !important; max-width:none !important; margin-left:auto !important; margin-right:auto !important; padding-left:0 !important; padding-right:0 !important; } /* * Our actual three-column component. * * Keep the existing column ratios unchanged. * Only widen the overall canvas. */ body.single-product .tab-product-top { width:calc(100% - 110px) !important; max-width:1800px !important; margin-left:auto !important; margin-right:auto !important; padding-top:12px !important; } /* * Equal top alignment. */ body.single-product .tab-product-gallery, body.single-product .tab-product-info, body.single-product .tab-product-purchase { margin-top:0 !important; padding-top:0 !important; align-self:start !important; } body.single-product .tab-product-info .product-information-inner, body.single-product .tab-product-info .fixed-content, body.single-product .tab-product-purchase .tab-purchase-card { margin-top:0 !important; top:auto !important; } /* * Slight title reduction only. */ body.single-product .tab-product-info .product_title { font-size:clamp(34px,2.3vw,46px) !important; line-height:1.04 !important; margin-top:0 !important; } } /* Large monitors */ @media (min-width:1900px) { body.single-product .tab-product-top { width:calc(100% - 140px) !important; max-width:1860px !important; } } /* ========================================================= TAB PRODUCT — BALANCED DESKTOP WIDTH Keep working 3-column architecture ========================================================= */ @media (min-width:1200px) { /* * Bring the product back in from the browser edges. * Wide, but not full-screen. */ body.single-product .tab-product-top { width:88% !important; max-width:1600px !important; margin-left:auto !important; margin-right:auto !important; padding-top:14px !important; } /* * Preserve equal top alignment. */ body.single-product .tab-product-gallery, body.single-product .tab-product-info, body.single-product .tab-product-purchase { margin-top:0 !important; padding-top:0 !important; align-self:start !important; } /* * Slightly reduce title now that the middle * column is a little narrower. */ body.single-product .tab-product-info .product_title { font-size:clamp(34px,2.15vw,44px) !important; line-height:1.04 !important; } /* * Lower product sections should follow * the same visual boundaries. */ body.single-product .woocommerce-tabs, body.single-product .related, body.single-product .upsells { width:88% !important; max-width:1600px !important; margin-left:auto !important; margin-right:auto !important; } } /* On very large monitors, don't let the site spread excessively */ @media (min-width:1900px) { body.single-product .tab-product-top, body.single-product .woocommerce-tabs, body.single-product .related, body.single-product .upsells { width:86% !important; max-width:1650px !important; } } /* ========================================================= TAB PRODUCT V6 KEEP LEFT SIDE — FIX RIGHT SIDE ========================================================= */ @media (min-width:1200px) { /* * KEEP current 88% outer canvas. * Redistribute only the internal columns. */ body.single-product .tab-product-top { width:88% !important; max-width:1600px !important; grid-template-columns: minmax(340px, 1.08fr) minmax(330px, .98fr) minmax(360px, .94fr) !important; column-gap:42px !important; align-items:start !important; } /* --------------------------------------------- LEFT — LEAVE WORKING GALLERY ALONE --------------------------------------------- */ body.single-product .tab-product-gallery { width:100% !important; min-width:0 !important; margin:0 !important; } /* --------------------------------------------- MIDDLE — SLIGHTLY MORE COMPACT --------------------------------------------- */ body.single-product .tab-product-info { width:100% !important; min-width:0 !important; margin:0 !important; } body.single-product .tab-product-info .product_title { font-size:clamp( 34px, 2vw, 42px ) !important; line-height:1.05 !important; margin-top:0 !important; margin-bottom:8px !important; } /* --------------------------------------------- RIGHT — BRING PANEL INWARD --------------------------------------------- */ body.single-product .tab-product-purchase { width:100% !important; min-width:0 !important; display:flex !important; justify-content:flex-end !important; margin:0 !important; padding:0 !important; } body.single-product .tab-product-purchase .tab-purchase-card { position:static !important; width:100% !important; max-width:430px !important; margin:0 !important; padding:26px !important; box-sizing:border-box !important; } /* * Prevent any button/form from forcing * purchase panel beyond its grid column. */ body.single-product .tab-product-purchase form.cart, body.single-product .tab-product-purchase .single_add_to_cart_button, body.single-product .tab-product-purchase .tab-buy-now-button, body.single-product .tab-product-purchase .tab-share-earn { width:100% !important; max-width:100% !important; box-sizing:border-box !important; } body.single-product .tab-product-purchase form.cart { grid-template-columns: 78px minmax(0,1fr) !important; } } /* ========================================================= RELATED PRODUCTS — NORMAL BOOKSTORE CARD SIZE ========================================================= */ @media (min-width:1200px) { body.single-product .related { width:88% !important; max-width:1500px !important; margin-left:auto !important; margin-right:auto !important; } body.single-product .related ul.products { display:grid !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap:30px !important; } body.single-product .related ul.products li.product { width:100% !important; max-width:260px !important; margin:0 auto !important; text-align:center !important; } body.single-product .related ul.products li.product img { display:block !important; width:100% !important; max-width:230px !important; height:310px !important; margin:0 auto 14px !important; object-fit:contain !important; background:#fff !important; } body.single-product .related ul.products li.product .woocommerce-loop-product__title { color:#071B3D !important; font-size:15px !important; line-height:1.35 !important; } } /* ========================================================= LARGE DESKTOP ========================================================= */ @media (min-width:1700px) { body.single-product .tab-product-purchase .tab-purchase-card { max-width:450px !important; } } /* ========================================================= TAB PRODUCT — APPROVED PURCHASE BUTTONS One Add to Cart + One Buy Now ========================================================= */ /* --------------------------------------------------------- HIDE XSTORE / THEME BUY-NOW BUTTONS INSIDE NATIVE CART Keep our .tab-buy-now-button only. --------------------------------------------------------- */ body.single-product .tab-product-purchase form.cart .et-single-buy-now, body.single-product .tab-product-purchase form.cart .buy-now-button, body.single-product .tab-product-purchase form.cart .etheme-buy-now, body.single-product .tab-product-purchase form.cart [class*="buy-now"], body.single-product .tab-product-purchase form.cart [class*="buy_now"] { display:none !important; } /* If XStore places its Buy Now immediately after form.cart */ body.single-product .tab-product-purchase form.cart + .et-single-buy-now, body.single-product .tab-product-purchase form.cart + .buy-now-button, body.single-product .tab-product-purchase form.cart + .etheme-buy-now { display:none !important; } /* --------------------------------------------------------- REMOVE OR DIVIDER LEFT BY XSTORE --------------------------------------------------------- */ body.single-product .tab-product-purchase form.cart .etheme-or, body.single-product .tab-product-purchase form.cart .or, body.single-product .tab-product-purchase form.cart [class*="or-separator"], body.single-product .tab-product-purchase form.cart [class*="separator"] { display:none !important; } /* --------------------------------------------------------- ADD TO CART — APPROVED SOLID BUTTON --------------------------------------------------------- */ body.single-product .tab-product-purchase .single_add_to_cart_button { display:flex !important; width:100% !important; min-height:54px !important; align-items:center !important; justify-content:center !important; gap:9px !important; margin:0 !important; padding:0 20px !important; border:0 !important; border-radius:7px !important; background: linear-gradient( 90deg, #086B85, #1687A3 ) !important; color:#FFFFFF !important; font-size:13px !important; font-weight:800 !important; letter-spacing:.025em !important; text-transform:uppercase !important; box-shadow:none !important; } /* --------------------------------------------------------- OUR BUY NOW — APPROVED OUTLINED BUTTON --------------------------------------------------------- */ body.single-product .tab-product-purchase .tab-buy-now-button { display:flex !important; width:100% !important; min-height:54px !important; align-items:center !important; justify-content:center !important; gap:9px !important; margin:12px 0 18px !important; padding:0 20px !important; border:2px solid #1687A3 !important; border-radius:7px !important; background:#FFFFFF !important; color:#086B85 !important; font-size:13px !important; font-weight:800 !important; letter-spacing:.025em !important; text-transform:uppercase !important; box-shadow:none !important; } body.single-product .tab-product-purchase .tab-buy-now-button:hover { background:#F3F9FB !important; border-color:#086B85 !important; color:#071B3D !important; } /* --------------------------------------------------------- WISHLIST — KEEP --------------------------------------------------------- */ body.single-product .tab-product-purchase .tab-purchase-wishlist, body.single-product .tab-product-purchase .yith-wcwl-add-to-wishlist { display:block !important; margin:0 0 18px !important; } /* --------------------------------------------------------- COMPARE — NOT IN APPROVED PRODUCT DESIGN --------------------------------------------------------- */ body.single-product .tab-product-purchase .compare, body.single-product .tab-product-purchase .compare-button, body.single-product .tab-product-purchase [class*="compare"] { display:none !important; } /* --------------------------------------------------------- SHARE & EARN --------------------------------------------------------- */ body.single-product .tab-product-purchase .tab-share-earn { margin-top:8px !important; padding:20px !important; border:1px solid #DCE9EE !important; border-radius:10px !important; background: linear-gradient( 135deg, #F3F9FB, #FFFFFF ) !important; } /* ========================================================= TAB PRODUCT V7 FINAL PRODUCT PAGE CONTAINMENT ========================================================= */ :root { --tab-product-canvas: 88%; --tab-product-max: 1600px; } /* --------------------------------------------------------- BREADCRUMBS --------------------------------------------------------- */ body.single-product .woocommerce-breadcrumb, body.single-product .page-heading .woocommerce-breadcrumb, body.single-product .breadcrumbs { width:var(--tab-product-canvas) !important; max-width:var(--tab-product-max) !important; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box !important; } /* * Some XStore breadcrumb wrappers are full width. * Keep wrapper full width but constrain its content. */ body.single-product .page-heading { width:100% !important; max-width:none !important; padding-left:0 !important; padding-right:0 !important; } /* --------------------------------------------------------- MAIN PRODUCT Preserve current working three-column geometry --------------------------------------------------------- */ @media (min-width:1200px) { body.single-product .tab-product-top { width:var(--tab-product-canvas) !important; max-width:var(--tab-product-max) !important; margin-left:auto !important; margin-right:auto !important; } } /* --------------------------------------------------------- EVERYTHING BELOW PRODUCT --------------------------------------------------------- */ body.single-product .woocommerce-tabs, body.single-product .product .woocommerce-tabs, body.single-product .related, body.single-product .related-products, body.single-product .upsells, body.single-product .cross-sells { width:var(--tab-product-canvas) !important; max-width:var(--tab-product-max) !important; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box !important; } /* WooCommerce tab panel itself */ body.single-product .woocommerce-Tabs-panel { width:100% !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important; box-sizing:border-box !important; } /* Review form */ body.single-product #reviews, body.single-product #review_form, body.single-product #review_form_wrapper { width:100% !important; max-width:100% !important; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box !important; } /* --------------------------------------------------------- RELATED PRODUCTS Four controlled cards --------------------------------------------------------- */ @media (min-width:1200px) { body.single-product .related ul.products { display:grid !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap:28px !important; width:100% !important; margin-left:0 !important; margin-right:0 !important; } body.single-product .related ul.products li.product { width:100% !important; max-width:260px !important; margin:0 auto !important; float:none !important; text-align:center !important; } body.single-product .related ul.products li.product img { width:100% !important; max-width:220px !important; height:300px !important; margin:0 auto 12px !important; object-fit:contain !important; background:#F7FAFB !important; } } /* --------------------------------------------------------- TAB DEFAULT PRODUCT IMAGE --------------------------------------------------------- */ body.single-product .tab-default-product-image { width:100% !important; height:100% !important; display:flex !important; align-items:center !important; justify-content:center !important; background:#F7FAFB !important; } body.single-product .tab-default-product-image a { width:100% !important; height:100% !important; display:flex !important; align-items:center !important; justify-content:center !important; } body.single-product .tab-default-product-image img { width:auto !important; max-width:82% !important; height:auto !important; max-height:82% !important; object-fit:contain !important; } /* --------------------------------------------------------- TABLET / MOBILE --------------------------------------------------------- */ @media (max-width:1199px) { :root { --tab-product-canvas: calc(100% - 40px); } } @media (max-width:767px) { :root { --tab-product-canvas: calc(100% - 28px); } body.single-product .related ul.products { display:grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap:18px !important; } } /* ========================================================= TAB PRODUCT — FINAL LOWER CONTENT CANVAS ========================================================= */ @media (min-width:1200px) { body.single-product .woocommerce-tabs, body.single-product .woocommerce-tabs .wc-tabs-wrapper, body.single-product #reviews, body.single-product #comments, body.single-product #review_form_wrapper, body.single-product .related { width:88% !important; max-width:1600px !important; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box !important; } body.single-product .woocommerce-Tabs-panel { width:100% !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important; padding-left:0 !important; padding-right:0 !important; box-sizing:border-box !important; } body.single-product #review_form, body.single-product #respond { width:100% !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important; } body.single-product #review_form textarea, body.single-product #review_form input[type="text"], body.single-product #review_form input[type="email"] { width:100% !important; max-width:100% !important; box-sizing:border-box !important; } body.single-product .related ul.products { width:100% !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important; } }