/* ========================================================= BARGCHI PRODUCT PAGE HERO + GALLERY + PRODUCT INFO + PURCHASE Mockup Match ========================================================= */ /* ========================================================= DESIGN SYSTEM ========================================================= */ :root { /* Brand */ --bargchi-navy: #102B4E; --bargchi-navy-2: #163A63; --bargchi-orange: #FF5A00; --bargchi-orange-hover: #E95000; --bargchi-orange-soft: #FFF5EE; /* Text */ --bargchi-text-main: #102B4E; --bargchi-text-body: #425466; --bargchi-text-muted: #6F8095; --bargchi-text-light: #8A97A8; /* Backgrounds */ --bargchi-bg-page: #FFFFFF; --bargchi-bg-soft: #F8FAFC; --bargchi-bg-soft-2: #F5F8FB; --bargchi-bg-card: #FFFFFF; /* Borders */ --bargchi-border: #E4EBF2; --bargchi-border-soft: #EDF2F7; --bargchi-border-strong: #D7E1EB; /* Status */ --bargchi-success: #15803D; /* Rating */ --bargchi-star: #F59E0B; /* Shadows */ --bargchi-shadow-xs: 0 2px 8px rgba(16, 43, 78, 0.04); --bargchi-shadow-sm: 0 6px 18px rgba(16, 43, 78, 0.06); --bargchi-shadow-md: 0 12px 30px rgba(16, 43, 78, 0.08); /* Radius */ --bargchi-radius-sm: 8px; --bargchi-radius-md: 12px; --bargchi-radius-lg: 16px; --bargchi-radius-xl: 20px; /* Layout */ --bargchi-container: 1280px; } /* ========================================================= RESET ========================================================= */ .bargchi-product-page, .bargchi-product-page *, .bargchi-product-page *::before, .bargchi-product-page *::after { box-sizing: border-box; } /* ========================================================= PRODUCT PAGE ========================================================= */ .bargchi-product-page { direction: rtl; width: 100%; padding: 20px 0 72px; background: var(--bargchi-bg-page); color: var(--bargchi-text-body); } .bargchi-product-container { width: min( calc(100% - 40px), var(--bargchi-container) ); margin-inline: auto; } /* ========================================================= BREADCRUMB ========================================================= */ .bargchi-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 22px; padding-top: 4px; color: var(--bargchi-text-muted); font-size: 13px; line-height: 1.9; } .bargchi-breadcrumb a { color: var(--bargchi-text-muted); text-decoration: none; transition: color 160ms ease; } .bargchi-breadcrumb a:hover { color: var(--bargchi-orange); } .bargchi-breadcrumb-separator { color: var(--bargchi-border-strong); } /* ========================================================= HERO Desktop: Left = Gallery Right = Product Information ========================================================= */ .bargchi-product-hero { display: grid; grid-template-areas: "gallery summary"; grid-template-columns: minmax(0, 1.12fr) minmax(370px, 0.88fr); gap: 38px; align-items: start; direction: ltr; } .bargchi-gallery-card { grid-area: gallery; } .bargchi-summary-card { grid-area: summary; } /* Persian inner content */ .bargchi-gallery-card, .bargchi-summary-card { direction: rtl; min-width: 0; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: 0 !important; } /* ========================================================= PRODUCT GALLERY ========================================================= */ .bargchi-product-gallery { display: grid; grid-template-areas: "thumbs stage" "thumbs counter"; grid-template-columns: 78px minmax(0, 1fr); gap: 0 18px; align-items: start; width: 100%; min-width: 0; direction: ltr; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* ========================================================= MAIN IMAGE STAGE ========================================================= */ .bargchi-gallery-stage { grid-area: stage; position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 550px; min-height: 550px; margin: 0 !important; padding: 0 !important; overflow: hidden; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: 0 !important; } /* ========================================================= MAIN PRODUCT IMAGE ========================================================= */ .bargchi-gallery-main-image { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0 !important; padding: 0 !important; border: 0 !important; outline: 0 !important; object-fit: contain; opacity: 1; user-select: none; -webkit-user-drag: none; transition: opacity 150ms ease; } .bargchi-gallery-main-image.is-changing { opacity: 0; } /* WooCommerce Placeholder */ .bargchi-gallery-stage .woocommerce-placeholder { width: 100%; height: 100%; object-fit: contain; border: 0 !important; } /* ========================================================= THUMBNAIL COLUMN ========================================================= */ .bargchi-gallery-thumbnails { grid-area: thumbs; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 78px; max-height: 550px; margin: 0; padding: 1px 2px; overflow-x: hidden; overflow-y: auto; direction: ltr; scrollbar-width: thin; scrollbar-color: var(--bargchi-border-strong) transparent; } .bargchi-gallery-thumbnails::-webkit-scrollbar { width: 4px; } .bargchi-gallery-thumbnails::-webkit-scrollbar-track { background: transparent; } .bargchi-gallery-thumbnails::-webkit-scrollbar-thumb { background: var(--bargchi-border-strong); border-radius: 20px; } /* ========================================================= THUMBNAIL BUTTON ========================================================= */ .bargchi-product-page .bargchi-gallery-thumbnail { -webkit-appearance: none !important; appearance: none !important; flex: 0 0 74px; display: flex !important; align-items: center !important; justify-content: center !important; width: 74px !important; height: 74px !important; min-width: 74px !important; min-height: 74px !important; margin: 0 !important; padding: 6px !important; overflow: hidden; background: #FFFFFF !important; background-image: none !important; border: 1px solid var(--bargchi-border) !important; border-radius: 11px !important; box-shadow: none !important; color: inherit !important; cursor: pointer; outline: none; transition: border-color 160ms ease, box-shadow 160ms ease; } .bargchi-product-page .bargchi-gallery-thumbnail::before, .bargchi-product-page .bargchi-gallery-thumbnail::after { display: none !important; content: none !important; } .bargchi-product-page .bargchi-gallery-thumbnail img { display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 7px; object-fit: contain !important; } .bargchi-product-page .bargchi-gallery-thumbnail:hover { border-color: var(--bargchi-navy) !important; background: #FFFFFF !important; } .bargchi-product-page .bargchi-gallery-thumbnail.is-active { border: 2px solid var(--bargchi-navy) !important; background: #FFFFFF !important; box-shadow: 0 0 0 2px rgba(16, 43, 78, 0.05) !important; } .bargchi-product-page .bargchi-gallery-thumbnail:focus-visible { border-color: var(--bargchi-navy) !important; box-shadow: 0 0 0 3px rgba(16, 43, 78, 0.10) !important; } /* ========================================================= GALLERY ARROWS ========================================================= */ .bargchi-product-page .bargchi-gallery-arrow { -webkit-appearance: none !important; appearance: none !important; position: absolute; top: 50%; z-index: 5; display: flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; margin: 0 !important; padding: 0 !important; border: 1px solid var(--bargchi-border) !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.96) !important; color: var(--bargchi-navy) !important; box-shadow: none !important; font-family: Arial, sans-serif; font-size: 27px; font-weight: 400; line-height: 1; cursor: pointer; opacity: 0; transform: translateY(-50%); transition: opacity 160ms ease, border-color 160ms ease; } .bargchi-product-page .bargchi-gallery-arrow::before, .bargchi-product-page .bargchi-gallery-arrow::after { display: none !important; content: none !important; } .bargchi-gallery-prev { left: 8px; } .bargchi-gallery-next { right: 8px; } .bargchi-gallery-stage:hover .bargchi-gallery-arrow { opacity: 1; } .bargchi-product-page .bargchi-gallery-arrow:hover { border-color: var(--bargchi-navy) !important; } /* ========================================================= IMAGE COUNTER ========================================================= */ .bargchi-gallery-counter { grid-area: counter; display: none; align-items: center; justify-content: center; gap: 4px; width: fit-content; margin: 8px auto 0; padding: 3px 9px; direction: ltr; background: var(--bargchi-bg-soft); border: 1px solid var(--bargchi-border-soft); border-radius: 999px; color: var(--bargchi-text-muted); font-size: 11px; } /* ========================================================= PRODUCT INFORMATION ========================================================= */ .bargchi-summary-card { padding: 24px 0 0 !important; margin: 0 !important; direction: rtl; text-align: right; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: 0 !important; } /* ========================================================= PRODUCT BRAND ========================================================= */ .bargchi-product-brand { display: inline-flex; align-items: center; margin: 0 0 8px; color: var(--bargchi-navy); font-size: 14px; font-weight: 800; line-height: 1.8; } .bargchi-product-brand::after { content: ""; display: inline-block; width: 3px; height: 15px; margin-right: 9px; background: var(--bargchi-orange); border-radius: 10px; } /* ========================================================= OLD CATEGORY FALLBACK ========================================================= */ .bargchi-product-category { display: inline-flex; align-items: center; margin: 0 0 8px; color: var(--bargchi-orange); font-size: 13px; font-weight: 500; line-height: 1.8; } .bargchi-product-category a { color: inherit; text-decoration: none; } /* ========================================================= PRODUCT TITLE ========================================================= */ .bargchi-product-title { max-width: 100%; margin: 0; color: var(--bargchi-text-main); font-size: 29px; font-weight: 800; line-height: 1.7; letter-spacing: -0.2px; } /* ========================================================= REAL PRODUCT RATING Dynamic WooCommerce rating + reviews link ========================================================= */ .bargchi-product-rating-row { display: flex; align-items: center; width: 100%; margin-top: 14px; } /* * Whole rating area is one real clickable control. * It opens the Reviews tab via JavaScript. */ .bargchi-product-page .bargchi-rating-link { -webkit-appearance: none !important; appearance: none !important; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; gap: 8px; min-width: 0; min-height: 28px; margin: 0 !important; padding: 3px 0 !important; background: transparent !important; background-image: none !important; border: 0 !important; border-radius: 6px !important; box-shadow: none !important; outline: 0; color: inherit !important; font: inherit !important; line-height: 1 !important; text-align: right; text-decoration: none !important; text-transform: none !important; cursor: pointer; transition: color 160ms ease; } .bargchi-product-page .bargchi-rating-link::before, .bargchi-product-page .bargchi-rating-link::after { display: none !important; content: none !important; } /* ========================================================= REAL AVERAGE NUMBER ========================================================= */ .bargchi-rating-number { display: inline-flex; align-items: center; flex: 0 0 auto; color: var(--bargchi-text-main); font-size: 14px; font-weight: 800; line-height: 1; } /* ========================================================= REAL STARS Filled percentage is supplied by PHP from WooCommerce. ========================================================= */ .bargchi-rating-stars { position: relative; display: inline-block; flex: 0 0 82px; width: 82px; height: 19px; overflow: hidden; direction: ltr; unicode-bidi: isolate; font-family: Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 19px; letter-spacing: 1px; text-align: left; white-space: nowrap; vertical-align: middle; transition: transform 160ms ease; } .bargchi-rating-stars-back, .bargchi-rating-stars-front { position: absolute; top: 0; left: 0; height: 19px; line-height: 19px; white-space: nowrap; pointer-events: none; } .bargchi-rating-stars-back { width: 100%; color: #DCE3EB; } .bargchi-rating-stars-front { /* * Width is written inline by single-product.php: * style="width: XX%;" */ overflow: hidden; color: var(--bargchi-star); } /* ========================================================= REAL REVIEW COUNT ========================================================= */ .bargchi-review-count { display: inline-flex; align-items: center; flex: 0 0 auto; color: var(--bargchi-text-muted); font-size: 13px; font-weight: 500; line-height: 1.5; white-space: nowrap; transition: color 160ms ease; } /* ========================================================= RATING INTERACTIONS ========================================================= */ @media (hover: hover) and (pointer: fine) { .bargchi-product-page .bargchi-rating-link:hover .bargchi-review-count { color: var(--bargchi-orange); } .bargchi-product-page .bargchi-rating-link:hover .bargchi-rating-stars { transform: translateY(-1px); } } .bargchi-product-page .bargchi-rating-link:focus-visible { outline: 2px solid rgba(255, 90, 0, 0.30) !important; outline-offset: 4px; box-shadow: none !important; } /* ========================================================= KEY FEATURES ========================================================= */ .bargchi-key-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; margin-top: 24px; padding: 17px 6px; background: #FFFFFF; border: 1px solid var(--bargchi-border); border-radius: 13px; overflow: hidden; } /* ========================================================= SINGLE FEATURE ========================================================= */ .bargchi-key-feature { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-width: 0; padding: 2px 9px; text-align: center; } .bargchi-key-feature:not(:last-child)::after { content: ""; position: absolute; top: 7px; left: 0; width: 1px; height: calc(100% - 14px); background: var(--bargchi-border-soft); } /* ========================================================= FEATURE ICON ========================================================= */ .bargchi-key-feature-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-bottom: 7px; color: var(--bargchi-text-light); } .bargchi-key-feature-icon svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================= FEATURE TEXT ========================================================= */ .bargchi-key-feature-name { display: block; width: 100%; overflow: hidden; color: var(--bargchi-text-muted); font-size: 11.5px; font-weight: 500; line-height: 1.65; text-overflow: ellipsis; white-space: nowrap; } .bargchi-key-feature-value { display: block; width: 100%; margin-top: 4px; overflow: hidden; color: var(--bargchi-text-main); font-size: 13px; font-weight: 800; line-height: 1.6; text-overflow: ellipsis; white-space: nowrap; } /* ========================================================= FORCE REMOVE OUTER HERO BOXES ========================================================= */ .bargchi-product-page .bargchi-gallery-card, .bargchi-product-page .bargchi-gallery-stage, .bargchi-product-page .bargchi-summary-card, .bargchi-product-page .bargchi-product-gallery { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: 0 !important; } .bargchi-product-page .bargchi-summary-card::before, .bargchi-product-page .bargchi-summary-card::after, .bargchi-product-page .bargchi-gallery-card::before, .bargchi-product-page .bargchi-gallery-card::after, .bargchi-product-page .bargchi-gallery-stage::before, .bargchi-product-page .bargchi-gallery-stage::after { display: none !important; content: none !important; } /* ========================================================= PURCHASE BOX ========================================================= */ .bargchi-purchase-box { width: 100%; margin-top: 18px; padding: 18px; background: #FFFFFF; border: 1px solid var(--bargchi-border); border-radius: 14px; box-shadow: none; } /* ========================================================= PRICE ========================================================= */ .bargchi-price-section { display: flex; flex-direction: column; gap: 6px; } .bargchi-product-price { display: flex; flex-direction: column; gap: 4px; } .bargchi-price-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .bargchi-regular-price { color: var(--bargchi-text-light); font-size: 13px; text-decoration-thickness: 1px; } .bargchi-discount-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 25px; padding: 3px 9px; background: var(--bargchi-orange-soft); border: 1px solid #FFE0CF; border-radius: 7px; color: var(--bargchi-orange); font-size: 12px; font-weight: 700; } .bargchi-current-price { color: var(--bargchi-text-main); font-size: 26px; font-weight: 900; line-height: 1.5; } .bargchi-current-price .price, .bargchi-current-price .amount, .bargchi-current-price bdi { color: inherit; font-size: inherit; font-weight: inherit; } .bargchi-current-price del { color: var(--bargchi-text-light); font-size: 13px; font-weight: 400; } .bargchi-current-price ins { color: var(--bargchi-text-main); text-decoration: none; } /* ========================================================= STOCK ========================================================= */ .bargchi-stock-status { display: inline-flex; align-items: center; gap: 7px; width: fit-content; margin-top: 10px; font-size: 13px; font-weight: 600; } .bargchi-stock-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; } .bargchi-stock-status.is-in-stock { color: var(--bargchi-success); } .bargchi-stock-status.is-in-stock .bargchi-stock-dot { background: var(--bargchi-success); } .bargchi-stock-status.is-out-of-stock { color: #B42318; } .bargchi-stock-status.is-out-of-stock .bargchi-stock-dot { background: #B42318; } .bargchi-stock-status.is-backorder { color: #B45309; } .bargchi-stock-status.is-backorder .bargchi-stock-dot { background: #B45309; } /* ========================================================= SHIPPING INFO ========================================================= */ .bargchi-shipping-info { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--bargchi-border-soft); } .bargchi-shipping-item { display: flex; flex-direction: row; align-items: center; gap: 9px; width: 100%; min-height: 28px; } /* ========================================================= GENERIC SHIPPING ICON ========================================================= */ .bargchi-shipping-icon { flex: 0 0 26px; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; color: var(--bargchi-navy); } .bargchi-shipping-icon svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* Nationwide truck */ .bargchi-shipping-icon--truck { color: var(--bargchi-navy); } /* Legacy express icon */ .bargchi-shipping-icon--express { color: var(--bargchi-orange); } .bargchi-shipping-icon--express svg { fill: var(--bargchi-orange); stroke: var(--bargchi-orange); } /* ========================================================= SNAPP SHIPPING LOGO ========================================================= */ .bargchi-shipping-logo { flex: 0 0 34px; display: flex; align-items: center; justify-content: center; width: 34px; height: 28px; overflow: hidden; } .bargchi-shipping-logo img { display: block; width: 32px; height: auto; max-width: 100%; max-height: 24px; margin: 0; padding: 0; border: 0; object-fit: contain; } .bargchi-shipping-item--snapp { align-items: center; } /* Text beside Snapp stays neutral */ .bargchi-shipping-item--snapp .bargchi-shipping-text { color: var(--bargchi-text-body); } /* ========================================================= SHIPPING TEXT ========================================================= */ .bargchi-shipping-text { display: block; min-width: 0; color: var(--bargchi-text-body); font-size: 13.5px; font-weight: 600; line-height: 1.8; white-space: nowrap; } /* Compatibility with previous HTML */ .bargchi-shipping-content { display: flex; flex-direction: row; align-items: center; gap: 5px; min-width: 0; } .bargchi-shipping-content strong, .bargchi-shipping-content span { display: inline; margin: 0; line-height: 1.8; } .bargchi-shipping-content strong { color: var(--bargchi-text-main); font-size: 13px; font-weight: 700; } .bargchi-shipping-content span { color: var(--bargchi-text-muted); font-size: 13px; font-weight: 500; } /* ========================================================= ADD TO CART AREA ========================================================= */ .bargchi-add-to-cart-area { width: 100%; margin-top: 16px; } .bargchi-add-to-cart-area form.cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; width: 100%; margin: 0 !important; } /* ========================================================= QUANTITY ========================================================= */ .bargchi-add-to-cart-area .quantity { display: flex !important; align-items: center; height: 48px; margin: 0 !important; overflow: hidden; background: #FFFFFF; border: 1px solid var(--bargchi-border); border-radius: 9px; } .bargchi-add-to-cart-area .quantity input.qty { width: 46px !important; height: 46px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--bargchi-text-main); font-size: 14px; font-weight: 700; text-align: center; } .bargchi-add-to-cart-area .quantity input.minus, .bargchi-add-to-cart-area .quantity input.plus, .bargchi-add-to-cart-area .quantity button.minus, .bargchi-add-to-cart-area .quantity button.plus { width: 40px !important; height: 46px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; color: var(--bargchi-text-main) !important; box-shadow: none !important; font-size: 16px !important; } /* ========================================================= ADD TO CART BUTTON ========================================================= */ .bargchi-product-page .bargchi-add-to-cart-area .single_add_to_cart_button { flex: 1 1 220px; min-height: 48px; margin: 0 !important; padding: 10px 20px !important; background: var(--bargchi-orange) !important; border: 1px solid var(--bargchi-orange) !important; border-radius: 9px !important; box-shadow: none !important; color: #FFFFFF !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1.4 !important; transition: background-color 160ms ease, border-color 160ms ease; } .bargchi-product-page .bargchi-add-to-cart-area .single_add_to_cart_button:hover { background: var(--bargchi-orange-hover) !important; border-color: var(--bargchi-orange-hover) !important; } .bargchi-product-page .bargchi-add-to-cart-area .single_add_to_cart_button.disabled, .bargchi-product-page .bargchi-add-to-cart-area .single_add_to_cart_button:disabled { cursor: not-allowed; opacity: 0.5; } /* ========================================================= VARIABLE PRODUCT ========================================================= */ .bargchi-add-to-cart-area .variations_form { display: block !important; width: 100%; } .bargchi-add-to-cart-area table.variations { width: 100%; margin: 0 0 14px !important; border: 0 !important; } .bargchi-add-to-cart-area table.variations tbody, .bargchi-add-to-cart-area table.variations tr, .bargchi-add-to-cart-area table.variations th, .bargchi-add-to-cart-area table.variations td { border: 0 !important; } .bargchi-add-to-cart-area table.variations tr { display: grid; grid-template-columns: 1fr; gap: 7px; margin-bottom: 13px; } .bargchi-add-to-cart-area table.variations th.label { display: block; width: 100%; padding: 0 !important; color: var(--bargchi-text-main); font-size: 13px; font-weight: 700; text-align: right; } .bargchi-add-to-cart-area table.variations td.value { display: block; width: 100%; padding: 0 !important; } .bargchi-add-to-cart-area table.variations select { width: 100% !important; height: 46px; margin: 0 !important; padding: 0 12px !important; background: #FFFFFF !important; border: 1px solid var(--bargchi-border) !important; border-radius: 8px !important; color: var(--bargchi-text-main); font-size: 13px; } .bargchi-add-to-cart-area .reset_variations { display: none !important; margin-top: 7px; color: var(--bargchi-text-muted); font-size: 12px; text-decoration: none; } /* ========================================================= WOODMART REAL VARIATION SWATCHES Color attributes = real round swatches Other attributes = clean text swatches ========================================================= */ /* * Important: * Bargchi no longer creates its own variation buttons. * WooCommerce/WoodMart remains the source of truth. */ .bargchi-product-page .bargchi-add-to-cart-area .wd-swatches-product { display: flex !important; flex-wrap: wrap; align-items: center; gap: 11px; width: 100%; margin: 2px 0 0 !important; padding: 2px 0 !important; } /* --------------------------------------------------------- Hide only the native select when WoodMart swatches exist. The select remains alive for WooCommerce variation logic. --------------------------------------------------------- */ .bargchi-product-page .bargchi-add-to-cart-area td.value:has(.wd-swatches-product) > select, .bargchi-product-page .bargchi-add-to-cart-area .wd-swatches-product + select, .bargchi-product-page .bargchi-add-to-cart-area select:has(+ .wd-swatches-product) { position: absolute !important; width: 1px !important; height: 1px !important; min-width: 1px !important; min-height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; } /* --------------------------------------------------------- Attribute label --------------------------------------------------------- */ .bargchi-product-page .bargchi-add-to-cart-area table.variations th.label { margin-bottom: 2px; } .bargchi-product-page .bargchi-add-to-cart-area table.variations th.label label { display: inline-flex; align-items: center; min-height: 24px; margin: 0; color: var(--bargchi-text-main); font-size: 13px; font-weight: 700; line-height: 1.8; } /* --------------------------------------------------------- REAL COLOR / IMAGE SWATCH --------------------------------------------------------- */ .bargchi-product-page .bargchi-add-to-cart-area .wd-swatch.wd-bg, .bargchi-product-page .bargchi-add-to-cart-area .wd-swatch.swatch-with-bg { position: relative; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; margin: 3px !important; padding: 0 !important; overflow: visible !important; border: 0 !important; border-radius: 50% !important; color: transparent !important; font-size: 0 !important; line-height: 0 !important; box-shadow: 0 0 0 1px var(--bargchi-border-strong) !important; cursor: pointer; vertical-align: middle; } /* Inner color/image must also stay round */ .bargchi-product-page .bargchi-add-to-cart-area .wd-swatch.wd-bg .wd-swatch-bg, .bargchi-product-page .bargchi-add-to-cart-area .wd-swatch.swatch-with-bg .wd-swatch-bg { width: 100% !important; height: 100% !important; border-radius: 50% !important; background-position: center !important; background-size: cover !important; } /* No color names inside circular swatches */ .bargchi-product-page .bargchi-add-to-cart-area .wd-swatch.wd-bg .wd-swatch-text, .bargchi-product-page .bargchi-add-to-cart-area .wd-swatch.swatch-with-bg .wd-swatch-text { display: none !important; } /* Remove WoodMart's extra decorative ring */ .bargchi-product-page .bargchi-add-to-cart-area .wd-swatch.wd-bg::after, .bargchi-product-page .bargchi-add-to-cart-area .wd-swatch.swatch-with-bg::after { display: none !important; content: none !important; } /* Hover */ .bargchi-product-page .bargchi-add-to-cart-area .wd-swatch.wd-bg:hover:not(.wd-disabled), .bargchi-product-page .bargchi-add-to-cart-area .wd-swatch.swatch-with-bg:hover:not(.wd-disabled) { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3px var(--bargchi-navy) !important; } /* Selected */ .bargchi-product-page .bargchi-add-to-cart-area .wd-swatch.wd-bg.wd-active, .bargchi-product-page .bargchi-add-to-cart-area .wd-swatch.wd-bg.active-swatch, .bargchi-product-page .bargchi-add-to-cart-area .wd-swatch.swatch-with-bg.wd-active, .bargchi-product-page .bargchi-add-to-cart-area .wd-swatch.swatch-with-bg.active-swatch { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--bargchi-navy) !important; } /* Disabled */ .bargchi-product-page .bargchi-add-to-cart-area .wd-swatch.wd-bg.wd-disabled, .bargchi-product-page .bargchi-add-to-cart-area .wd-swatch.swatch-with-bg.wd-disabled { opacity: 0.32; cursor: not-allowed; } /* --------------------------------------------------------- TEXT SWATCH Used for non-color attributes such as size / power / model --------------------------------------------------------- */ .bargchi-product-page .bargchi-add-to-cart-area .wd-swatch.wd-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 64px; min-height: 40px; margin: 0 !important; padding: 7px 14px !important; background: #FFFFFF !important; border: 1px solid var(--bargchi-border) !important; border-radius: 8px !important; box-shadow: none !important; color: var(--bargchi-text-main) !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.4 !important; cursor: pointer; } .bargchi-product-page .bargchi-add-to-cart-area .wd-swatch.wd-text .wd-swatch-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; color: inherit !important; font: inherit !important; line-height: 1.4 !important; } .bargchi-product-page .bargchi-add-to-cart-area .wd-swatch.wd-text::after { display: none !important; content: none !important; } .bargchi-product-page .bargchi-add-to-cart-area .wd-swatch.wd-text:hover:not(.wd-disabled) { border-color: var(--bargchi-navy) !important; } .bargchi-product-page .bargchi-add-to-cart-area .wd-swatch.wd-text.wd-active, .bargchi-product-page .bargchi-add-to-cart-area .wd-swatch.wd-text.active-swatch { background: var(--bargchi-bg-soft) !important; border: 2px solid var(--bargchi-navy) !important; color: var(--bargchi-navy) !important; } .bargchi-product-page .bargchi-add-to-cart-area .wd-swatch.wd-text.wd-disabled { opacity: 0.35; cursor: not-allowed; background: var(--bargchi-bg-soft) !important; color: var(--bargchi-text-light) !important; } /* --------------------------------------------------------- Reset variations --------------------------------------------------------- */ .bargchi-product-page .bargchi-add-to-cart-area .reset_variations { display: none !important; align-items: center; min-height: 24px; margin-top: 9px; color: var(--bargchi-text-muted); font-size: 12px; font-weight: 500; line-height: 1.5; text-decoration: none; } .bargchi-product-page .bargchi-add-to-cart-area .reset_variations:hover { color: var(--bargchi-orange); } /* --------------------------------------------------------- Dynamic discount badge --------------------------------------------------------- */ .bargchi-variable-discount { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; min-height: 25px; margin-bottom: 2px; padding: 3px 9px; background: var(--bargchi-orange-soft); border: 1px solid #FFE0CF; border-radius: 7px; color: var(--bargchi-orange); font-size: 12px; font-weight: 700; } /* Price and stock are already synced to Bargchi main UI */ .bargchi-product-page .bargchi-add-to-cart-area .woocommerce-variation-price, .bargchi-product-page .bargchi-add-to-cart-area .woocommerce-variation-availability { display: none !important; } /* --------------------------------------------------------- Variable add-to-cart row --------------------------------------------------------- */ .bargchi-product-page .bargchi-add-to-cart-area .woocommerce-variation-add-to-cart.variations_button { display: flex !important; flex-wrap: nowrap; align-items: stretch; gap: 10px; width: 100%; margin-top: 10px; } .bargchi-product-page .bargchi-add-to-cart-area .woocommerce-variation-add-to-cart.variations_button .quantity { flex: 0 0 auto; } .bargchi-product-page .bargchi-add-to-cart-area .woocommerce-variation-add-to-cart.variations_button .single_add_to_cart_button { flex: 1 1 auto; } /* ========================================================= MOBILE VARIATION SWATCHES ========================================================= */ @media (max-width: 767px) { .bargchi-product-page .bargchi-add-to-cart-area .wd-swatches-product { gap: 10px; } .bargchi-product-page .bargchi-add-to-cart-area .wd-swatch.wd-bg, .bargchi-product-page .bargchi-add-to-cart-area .wd-swatch.swatch-with-bg { width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; } .bargchi-product-page .bargchi-add-to-cart-area .wd-swatch.wd-text { min-width: 58px; min-height: 39px; padding: 6px 12px !important; font-size: 12px !important; } .bargchi-product-page .bargchi-add-to-cart-area table.variations th.label label { font-size: 12px; } .bargchi-product-page .bargchi-add-to-cart-area .woocommerce-variation-add-to-cart.variations_button { gap: 8px; } } /* ========================================================= VARIATION RESULT ========================================================= */ .bargchi-add-to-cart-area .single_variation_wrap { width: 100%; } .bargchi-add-to-cart-area .woocommerce-variation { width: 100%; margin-bottom: 10px; } .bargchi-add-to-cart-area .woocommerce-variation-price { margin-bottom: 8px; color: var(--bargchi-text-main); font-size: 19px; font-weight: 800; } .bargchi-add-to-cart-area .woocommerce-variation-price .price { margin: 0; } .bargchi-add-to-cart-area .woocommerce-variation-availability { margin-bottom: 8px; font-size: 12px; } .bargchi-add-to-cart-area .woocommerce-variation-description { margin-bottom: 10px; color: var(--bargchi-text-muted); font-size: 12px; line-height: 1.9; } /* ========================================================= OUT OF STOCK MESSAGE ========================================================= */ .bargchi-add-to-cart-area .stock.out-of-stock { margin: 0; padding: 12px; background: #FFF1F0; border: 1px solid #FECACA; border-radius: 8px; color: #B42318; font-size: 13px; font-weight: 700; } /* ========================================================= LARGE DESKTOP / SMALL LAPTOP ========================================================= */ @media (max-width: 1180px) { .bargchi-product-hero { grid-template-columns: minmax(0, 1fr) minmax(340px, 0.9fr); gap: 26px; } .bargchi-gallery-stage { height: 500px; min-height: 500px; } .bargchi-gallery-thumbnails { max-height: 500px; } .bargchi-product-title { font-size: 26px; } .bargchi-key-feature { padding-inline: 5px; } .bargchi-key-feature-name { font-size: 11px; } .bargchi-key-feature-value { font-size: 12px; } .bargchi-shipping-text { font-size: 13px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .bargchi-product-container { width: min( calc(100% - 28px), var(--bargchi-container) ); } .bargchi-product-hero { grid-template-areas: "gallery" "summary"; grid-template-columns: 1fr; gap: 20px; } .bargchi-product-gallery { grid-template-areas: "stage" "counter" "thumbs"; grid-template-columns: 1fr; gap: 0; direction: rtl; } .bargchi-gallery-stage { width: 100%; height: auto; min-height: auto; aspect-ratio: 1 / 1; } .bargchi-gallery-counter { display: flex; } .bargchi-gallery-thumbnails { flex-direction: row; justify-content: flex-start; align-items: center; width: 100%; max-height: none; gap: 8px; margin-top: 9px; padding: 2px 2px 6px; overflow-x: auto; overflow-y: hidden; direction: rtl; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } .bargchi-product-page .bargchi-gallery-thumbnail { flex: 0 0 68px; width: 68px !important; height: 68px !important; min-width: 68px !important; min-height: 68px !important; } .bargchi-summary-card { padding-top: 0 !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .bargchi-product-page { padding: 10px 0 58px; } .bargchi-product-container { width: calc(100% - 20px); } /* Breadcrumb */ .bargchi-breadcrumb { flex-wrap: nowrap; margin-bottom: 10px; overflow-x: auto; color: var(--bargchi-text-muted); font-size: 11.5px; white-space: nowrap; scrollbar-width: none; } .bargchi-breadcrumb::-webkit-scrollbar { display: none; } /* Main image */ .bargchi-gallery-stage { aspect-ratio: 1 / 1; } /* Arrows */ .bargchi-product-page .bargchi-gallery-arrow { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; opacity: 1; font-size: 24px; } .bargchi-gallery-prev { left: 5px; } .bargchi-gallery-next { right: 5px; } /* Thumbnails */ .bargchi-gallery-thumbnails { gap: 7px; margin-top: 7px; } .bargchi-product-page .bargchi-gallery-thumbnail { flex: 0 0 62px; width: 62px !important; height: 62px !important; min-width: 62px !important; min-height: 62px !important; padding: 5px !important; border-radius: 9px !important; } /* Product info */ .bargchi-product-brand { margin-bottom: 5px; font-size: 12.5px; } .bargchi-product-title { font-size: 21px; line-height: 1.7; } .bargchi-product-rating-row { margin-top: 10px; } .bargchi-product-page .bargchi-rating-link { gap: 6px; min-height: 26px; padding: 2px 0 !important; } .bargchi-rating-number { font-size: 13px; } .bargchi-rating-stars { flex-basis: 72px; width: 72px; height: 17px; font-size: 14px; line-height: 17px; letter-spacing: 1px; } .bargchi-rating-stars-back, .bargchi-rating-stars-front { height: 17px; line-height: 17px; } .bargchi-review-count { font-size: 12px; } /* Features */ .bargchi-key-features { margin-top: 17px; padding: 13px 3px; border-radius: 11px; } .bargchi-key-feature { padding-inline: 3px; } .bargchi-key-feature-icon { width: 27px; height: 27px; margin-bottom: 5px; } .bargchi-key-feature-icon svg { width: 21px; height: 21px; } .bargchi-key-feature-name { font-size: 10px; line-height: 1.6; } .bargchi-key-feature-value { margin-top: 2px; font-size: 11px; } /* Purchase */ .bargchi-purchase-box { margin-top: 15px; padding: 16px; border-radius: 12px; } .bargchi-current-price { font-size: 22px; } .bargchi-stock-status { font-size: 12px; } /* Shipping */ .bargchi-shipping-info { gap: 9px; margin-top: 12px; padding-top: 12px; } .bargchi-shipping-item { gap: 8px; min-height: 27px; } .bargchi-shipping-icon { flex-basis: 24px; width: 24px; height: 24px; } .bargchi-shipping-icon svg { width: 20px; height: 20px; } /* Snapp mobile */ .bargchi-shipping-logo { flex: 0 0 31px; width: 31px; height: 25px; } .bargchi-shipping-logo img { width: 29px; max-height: 22px; } .bargchi-shipping-text { font-size: 12px; line-height: 1.75; white-space: normal; } .bargchi-shipping-content { flex-wrap: wrap; } .bargchi-shipping-content strong, .bargchi-shipping-content span { font-size: 12px; } /* Cart */ .bargchi-add-to-cart-area form.cart { gap: 8px; } .bargchi-product-page .bargchi-add-to-cart-area .single_add_to_cart_button { min-height: 48px; font-size: 13px !important; } .bargchi-add-to-cart-area table.variations th.label { font-size: 12px; } .bargchi-add-to-cart-area table.variations select { font-size: 12px; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .bargchi-product-page .bargchi-gallery-thumbnail { flex: 0 0 58px; width: 58px !important; height: 58px !important; min-width: 58px !important; min-height: 58px !important; } .bargchi-product-title { font-size: 20px; } .bargchi-key-features { padding-inline: 2px; } .bargchi-key-feature-name { font-size: 9.5px; } .bargchi-key-feature-value { font-size: 10.5px; } .bargchi-shipping-text { font-size: 11.5px; } .bargchi-shipping-logo { flex-basis: 29px; width: 29px; } .bargchi-shipping-logo img { width: 27px; } } /* ========================================================= FINAL ALIGNMENT / WOODMART COMPATIBILITY ========================================================= */ /* Shipping icon + text visual alignment */ .bargchi-shipping-item { align-items: center !important; } .bargchi-shipping-icon, .bargchi-shipping-logo { align-self: center; line-height: 0; } .bargchi-shipping-text { display: flex; align-items: center; min-height: 26px; margin: 0; line-height: 1.7; } /* Slightly wider Snapp logo area for a cleaner baseline */ .bargchi-shipping-logo { flex-basis: 42px; width: 42px; height: 26px; } .bargchi-shipping-logo img { width: 38px; max-height: 22px; } /* Variable product form itself should not become a flex row */ .bargchi-add-to-cart-area form.variations_form.cart { display: block !important; } /* Keep regular/simple product form in a row */ .bargchi-add-to-cart-area form.cart:not(.variations_form) { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; } /* Ensure old Bargchi generated variation UI can never reappear visually */ .bargchi-product-page .bargchi-variation-options, .bargchi-product-page .bargchi-variation-option { display: none !important; } /* Legacy class cleanup: native select is not hidden unless WoodMart swatches exist */ .bargchi-product-page .bargchi-add-to-cart-area select.bargchi-native-variation-select:not(:has(+ .wd-swatches-product)) { position: static !important; width: 100% !important; height: 46px !important; margin: 0 !important; padding: 0 12px !important; overflow: visible !important; clip: auto !important; clip-path: none !important; white-space: normal !important; border: 1px solid var(--bargchi-border) !important; opacity: 1 !important; pointer-events: auto !important; } @media (max-width: 767px) { .bargchi-shipping-logo { flex-basis: 38px; width: 38px; height: 24px; } .bargchi-shipping-logo img { width: 35px; max-height: 20px; } .bargchi-shipping-text { min-height: 24px; line-height: 1.65; } } @media (max-width: 420px) { .bargchi-product-page .bargchi-add-to-cart-area .woocommerce-variation-add-to-cart.variations_button { flex-wrap: wrap; } .bargchi-product-page .bargchi-add-to-cart-area .woocommerce-variation-add-to-cart.variations_button .single_add_to_cart_button { flex: 1 1 180px; } } /* ========================================================= BARGCHI FINAL VARIATION UI FIX - Hide reset link - Compact selected color label - Medium selected-color preview - Clean WoodMart tooltip (including body-mounted tooltip) ========================================================= */ /* --------------------------------------------------------- 1) NEVER SHOW "پاک کردن" --------------------------------------------------------- */ .bargchi-product-page .bargchi-add-to-cart-area .reset_variations, body.single-product .reset_variations { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* --------------------------------------------------------- 2) SELECTED VARIATION LABEL Result: رنگ: مشکی ● --------------------------------------------------------- */ .bargchi-product-page .bargchi-add-to-cart-area table.variations th.label { margin: 0 0 4px !important; padding: 0 !important; text-align: right !important; } .bargchi-product-page .bargchi-add-to-cart-area table.variations th.label label { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; gap: 5px !important; min-height: 28px; margin: 0 !important; padding: 0 !important; direction: rtl !important; color: var(--bargchi-text-main) !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.55 !important; white-space: nowrap; } .bargchi-product-page .bargchi-add-to-cart-area .bargchi-variation-label-name, .bargchi-product-page .bargchi-add-to-cart-area .bargchi-variation-label-selected { display: inline-flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; color: var(--bargchi-text-main) !important; font-size: 14px !important; line-height: 1.55 !important; white-space: nowrap; vertical-align: middle; } .bargchi-product-page .bargchi-add-to-cart-area .bargchi-variation-label-name { font-weight: 700 !important; } .bargchi-product-page .bargchi-add-to-cart-area .bargchi-variation-label-selected { font-weight: 700 !important; } /* --------------------------------------------------------- 3) MEDIUM COLOR PREVIEW BESIDE SELECTED NAME Not too small, not too large --------------------------------------------------------- */ .bargchi-product-page .bargchi-add-to-cart-area .bargchi-selected-color-preview { display: inline-block !important; width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; flex: 0 0 16px !important; margin: 0 1px 0 0 !important; padding: 0 !important; border: 1px solid #C9D4DF !important; border-radius: 50% !important; background-position: center !important; background-size: cover !important; background-repeat: no-repeat !important; box-shadow: none !important; vertical-align: middle !important; } /* Keep white visible */ .bargchi-product-page .bargchi-add-to-cart-area .bargchi-selected-color-preview[style*="255, 255, 255"], .bargchi-product-page .bargchi-add-to-cart-area .bargchi-selected-color-preview[style*="rgb(255, 255, 255)"] { border-color: #BFCBD7 !important; } /* --------------------------------------------------------- 4) MAIN COLOR SWATCHES Keep the clean round selection style --------------------------------------------------------- */ .bargchi-product-page .bargchi-add-to-cart-area .wd-swatches-product { align-items: center !important; gap: 12px !important; } .bargchi-product-page .bargchi-add-to-cart-area .wd-swatch.wd-bg, .bargchi-product-page .bargchi-add-to-cart-area .wd-swatch.swatch-with-bg { vertical-align: middle !important; transition: box-shadow 140ms ease, opacity 140ms ease !important; } /* --------------------------------------------------------- 5) WOODMART TOOLTIP IMPORTANT: WoodMart can append tooltip markup directly under , therefore these selectors must NOT be limited to .bargchi-product-page. --------------------------------------------------------- */ /* New WoodMart tooltip */ body.single-product .wd-tooltip-label, /* Older WoodMart tooltip */ body.single-product .woodmart-tooltip-label, /* jQuery / Bootstrap-like tooltip used by some WoodMart builds */ body.single-product .tooltip-inner { min-width: max-content !important; max-width: 180px !important; padding: 6px 10px !important; background: #102B4E !important; background-color: #102B4E !important; border: 0 !important; border-radius: 7px !important; box-shadow: 0 5px 14px rgba(16, 43, 78, 0.16) !important; color: #FFFFFF !important; font-family: inherit !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.45 !important; text-align: center !important; text-transform: none !important; white-space: nowrap !important; } /* New WoodMart tooltip arrow */ body.single-product .wd-tltp-top .wd-tooltip-label::before { border-top-color: #102B4E !important; } /* Older WoodMart tooltip arrow */ body.single-product .woodmart-tltp .woodmart-tooltip-label::before { border-top-color: #102B4E !important; } /* jQuery / Bootstrap tooltip arrow */ body.single-product .tooltip.top .tooltip-arrow { border-top-color: #102B4E !important; } body.single-product .tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color: #102B4E !important; } /* If tooltip wrapper itself has old default styling */ body.single-product .tooltip, body.single-product .wd-tltp, body.single-product .woodmart-tltp { text-transform: none !important; } /* --------------------------------------------------------- 6) MOBILE --------------------------------------------------------- */ @media (max-width: 767px) { .bargchi-product-page .bargchi-add-to-cart-area table.variations th.label label { gap: 5px !important; font-size: 13px !important; } .bargchi-product-page .bargchi-add-to-cart-area .bargchi-variation-label-name, .bargchi-product-page .bargchi-add-to-cart-area .bargchi-variation-label-selected { font-size: 13px !important; } .bargchi-product-page .bargchi-add-to-cart-area .bargchi-selected-color-preview { width: 15px !important; height: 15px !important; min-width: 15px !important; min-height: 15px !important; flex-basis: 15px !important; } } /* ========================================================= FIX EXTRA COLON + MOVE SWATCH TOOLTIP BELOW ========================================================= */ /* --------------------------------------------------------- 1) REMOVE EXTRA COLON FROM WOODMART / THEME --------------------------------------------------------- */ .bargchi-product-page .bargchi-add-to-cart-area table.variations th.label::before, .bargchi-product-page .bargchi-add-to-cart-area table.variations th.label::after, .bargchi-product-page .bargchi-add-to-cart-area table.variations th.label label::before, .bargchi-product-page .bargchi-add-to-cart-area table.variations th.label label::after { content: none !important; display: none !important; } /* --------------------------------------------------------- 2) MAKE SURE LABEL IS CLEAN --------------------------------------------------------- */ .bargchi-product-page .bargchi-add-to-cart-area table.variations th.label label { display: inline-flex !important; align-items: center !important; gap: 5px !important; direction: rtl !important; margin: 0 !important; padding: 0 !important; line-height: 1.5 !important; } /* --------------------------------------------------------- 3) WOODMART TOOLTIP BELOW SWATCH --------------------------------------------------------- */ .bargchi-product-page .bargchi-add-to-cart-area .wd-swatch { position: relative !important; } /* New WoodMart */ .bargchi-product-page .bargchi-add-to-cart-area .wd-swatch .wd-tooltip-label, .bargchi-product-page .bargchi-add-to-cart-area .wd-tltp .wd-tooltip-label { top: calc(100% + 9px) !important; bottom: auto !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; margin: 0 !important; padding: 6px 10px !important; background: #102B4E !important; border: 0 !important; border-radius: 7px !important; color: #FFFFFF !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.4 !important; white-space: nowrap !important; box-shadow: 0 5px 14px rgba(16, 43, 78, 0.16) !important; z-index: 50 !important; } /* --------------------------------------------------------- 4) TOOLTIP ARROW POINTS UP --------------------------------------------------------- */ .bargchi-product-page .bargchi-add-to-cart-area .wd-tltp-top .wd-tooltip-label::before, .bargchi-product-page .bargchi-add-to-cart-area .wd-tooltip-label::before { top: -5px !important; bottom: auto !important; left: 50% !important; transform: translateX(-50%) !important; border-top-color: transparent !important; border-bottom-color: #102B4E !important; margin: 0 !important; } /* --------------------------------------------------------- 5) OLD WOODMART SUPPORT --------------------------------------------------------- */ .bargchi-product-page .bargchi-add-to-cart-area .woodmart-tooltip-label { top: calc(100% + 9px) !important; bottom: auto !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; padding: 6px 10px !important; background: #102B4E !important; color: #FFFFFF !important; border-radius: 7px !important; font-size: 11px !important; font-weight: 600 !important; white-space: nowrap !important; box-shadow: 0 5px 14px rgba(16, 43, 78, 0.16) !important; } /* ========================================================= PRODUCT BENEFITS BAR ========================================================= */ .bargchi-product-benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; width: 100%; margin-top: 28px; padding: 17px 12px; direction: rtl; background: #FFFFFF; border: 1px solid var(--bargchi-border); border-radius: 13px; box-shadow: none; } /* ========================================================= SINGLE BENEFIT ========================================================= */ .bargchi-benefit-item { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; min-height: 46px; padding: 0 14px; color: var(--bargchi-text-main); } /* Divider between items */ .bargchi-benefit-item:not(:last-child)::after { content: ""; position: absolute; top: 50%; left: 0; width: 1px; height: 30px; background: var(--bargchi-border-soft); transform: translateY(-50%); } /* ========================================================= BENEFIT ICON ========================================================= */ .bargchi-benefit-icon { flex: 0 0 32px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--bargchi-text-muted); line-height: 0; } .bargchi-benefit-icon svg { display: block; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================= BENEFIT TEXT ========================================================= */ .bargchi-benefit-title { display: inline-flex; align-items: center; margin: 0; color: var(--bargchi-text-main); font-size: 14px; font-weight: 700; line-height: 1.7; white-space: nowrap; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .bargchi-product-benefits { margin-top: 22px; } .bargchi-benefit-item { gap: 8px; padding-inline: 8px; } .bargchi-benefit-title { font-size: 13px; } .bargchi-benefit-icon { width: 29px; height: 29px; flex-basis: 29px; } .bargchi-benefit-icon svg { width: 23px; height: 23px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .bargchi-product-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 20px; padding: 8px; border-radius: 12px; } .bargchi-benefit-item { justify-content: flex-start; min-height: 54px; padding: 8px 10px; gap: 8px; } /* * Desktop vertical separators are removed. */ .bargchi-benefit-item::after { display: none !important; } /* * Horizontal separation for first row */ .bargchi-benefit-item:nth-child(1), .bargchi-benefit-item:nth-child(2) { border-bottom: 1px solid var(--bargchi-border-soft); } /* * Vertical middle separation */ .bargchi-benefit-item:nth-child(odd) { border-left: 1px solid var(--bargchi-border-soft); } .bargchi-benefit-title { font-size: 15px; font-weight: 700; } .bargchi-benefit-icon { flex-basis: 28px; width: 28px; height: 28px; } .bargchi-benefit-icon svg { width: 22px; height: 22px; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .bargchi-product-benefits { padding: 6px; } .bargchi-benefit-item { min-height: 51px; padding: 7px 6px; gap: 6px; } .bargchi-benefit-title { font-size: 11.5px; } .bargchi-benefit-icon { flex-basis: 25px; width: 25px; height: 25px; } .bargchi-benefit-icon svg { width: 20px; height: 20px; } } /* ========================================================= FORCE KEEP BARGCHI BENEFITS VISIBLE ========================================================= */ .bargchi-product-page .bargchi-product-benefits { display: grid !important; visibility: visible !important; opacity: 1 !important; position: relative !important; z-index: 2 !important; width: 100% !important; height: auto !important; min-height: 72px !important; max-height: none !important; overflow: visible !important; transform: none !important; pointer-events: auto !important; } .bargchi-product-page, .bargchi-product-container { height: auto !important; max-height: none !important; overflow: visible !important; } .bargchi-benefits-section { width: 100%; margin: 0 0 28px; padding: 0; background: #fff; } .bargchi-product-benefits { width:100%; display:flex; align-items:center; justify-content:space-around; gap:20px; margin-top:40px; padding:22px 30px; border:1px solid #e5e7eb; border-radius:14px; background:#fff; } .bargchi-benefit-item { display:flex; align-items:center; gap:8px; color:#102B4E; } .bargchi-benefit-icon { width:36px; height:36px; display:flex; align-items:center; justify-content:center; font-size:22px; } .bargchi-benefit-title { font-size:15px; font-weight:700; } .bargchi-benefits-wrapper { width:100%; display:flex; align-items:center; justify-content:space-between; background:#fff; border:1px solid #e7edf3; border-radius:14px; padding:18px 35px; margin-top:35px; } .bargchi-benefit-item { flex:1; display:flex; justify-content:center; align-items:center; gap:8px; position:relative; color:#102B4E; font-size:14px; font-weight:700; } .bargchi-benefit-item:not(:last-child)::after { content:""; position:absolute; left:0; height:35px; width:1px; background:#e5e7eb; } .bargchi-benefit-icon { width:28px; height:28px; display:flex; align-items:center; justify-content:center; } .bargchi-benefit-icon svg { width:26px; height:26px; stroke:#60758C; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; } .bargchi-benefit-item { display:flex; align-items:center; justify-content:center; gap:10px; } /* ===================================== BARGCHI PRODUCT BENEFITS ===================================== */ .bargchi-product-benefits { width:100%; display:flex; align-items:center; justify-content:space-around; background:#ffffff; border:1px solid #E4EAF2; border-radius:16px; min-height:78px; padding:0 25px; box-sizing:border-box; } .bargchi-benefit-item { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; position:relative; } .bargchi-benefit-item:not(:last-child)::after { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); height:32px; width:1px; background:#E7EDF4; } .bargchi-benefit-icon { width:30px; height:30px; display:flex; align-items:center; justify-content:center; color:#526B86; } .bargchi-benefit-icon svg { width:26.5px; height:26.5px; stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round; } .bargchi-benefit-title { font-size:15px; font-weight:700; color:#102B4E; white-space:nowrap; } /* ===================================================== BARGCHI TECHNICAL SPECS ===================================================== */ .bargchi-tech-specs-section{ margin: 34px 0 28px; } .bargchi-tech-specs-head{ margin-bottom: 18px; } .bargchi-tech-specs-title{ margin: 0 0 6px; font-size: 24px; font-weight: 800; color: #102b4e; line-height: 1.5; } .bargchi-tech-specs-subtitle{ margin: 0; font-size: 14px; color: #6d7f95; line-height: 1.9; } .bargchi-tech-specs-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .bargchi-tech-specs-card{ background: #ffffff; border: 1px solid #e4ebf3; border-radius: 20px; padding: 18px; box-shadow: 0 8px 20px rgba(16, 43, 78, 0.04); } .bargchi-tech-specs-group-title{ margin: 0 0 14px; font-size: 17px; font-weight: 800; color: #102b4e; line-height: 1.6; } .bargchi-tech-specs-list{ display: flex; flex-direction: column; gap: 10px; } .bargchi-tech-specs-row{ display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px 14px; background: #f8fbfe; border: 1px solid #edf2f7; border-radius: 14px; } .bargchi-tech-specs-label{ font-size: 14px; font-weight: 600; color: #6d7f95; line-height: 1.8; } .bargchi-tech-specs-value{ font-size: 14px; font-weight: 700; color: #102b4e; line-height: 1.8; } @media (max-width: 992px){ .bargchi-tech-specs-grid{ grid-template-columns: 1fr; } } @media (max-width: 767px){ .bargchi-tech-specs-section{ margin: 26px 0 20px; } .bargchi-tech-specs-title{ font-size: 20px; } .bargchi-tech-specs-row{ grid-template-columns: 1fr; gap: 6px; padding: 12px; } .bargchi-tech-specs-label, .bargchi-tech-specs-value{ font-size: 13px; } } /* ========================================================= BARGCHI TECHNICAL SPECS ========================================================= */ .bargchi-tech-specs { width: 100%; margin: 34px 0 42px; direction: rtl; } /* ========================================================= SECTION HEADER ========================================================= */ .bargchi-tech-specs-header { margin-bottom: 22px; } .bargchi-tech-specs-title { position: relative; display: inline-block; margin: 0 0 8px; padding-bottom: 10px; color: #102B4E; font-size: 24px; font-weight: 800; line-height: 1.5; } .bargchi-tech-specs-title::after { content: ""; position: absolute; right: 0; bottom: 0; width: 42px; height: 3px; background: #FF5A00; border-radius: 10px; } .bargchi-tech-specs-description { margin: 0; color: #6F8095; font-size: 14px; font-weight: 400; line-height: 1.9; } /* ========================================================= GROUPS ========================================================= */ .bargchi-tech-specs-groups { display: flex; flex-direction: column; gap: 16px; } /* ========================================================= GROUP CARD ========================================================= */ .bargchi-tech-specs-group { overflow: hidden; background: #FFFFFF; border: 1px solid #E4EBF2; border-radius: 14px; box-shadow: none; } /* ========================================================= GROUP HEADER ========================================================= */ .bargchi-tech-specs-group-header { display: flex; align-items: center; min-height: 58px; padding: 0 18px; background: #F8FAFC; border-bottom: 1px solid #EDF2F7; } .bargchi-tech-specs-group-title { position: relative; margin: 0; padding-right: 30px; color: #102B4E; font-size: 16px; font-weight: 800; line-height: 1.6; } /* Minimal section icon */ .bargchi-tech-specs-group-title::before { content: ""; position: absolute; right: 0; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); border: 2px solid #6F8095; border-radius: 5px; box-sizing: border-box; } /* two small detail lines inside icon */ .bargchi-tech-specs-group-title::after { content: ""; position: absolute; right: 5px; top: 50%; width: 8px; height: 4px; transform: translateY(-50%); border-top: 1.5px solid #6F8095; border-bottom: 1.5px solid #6F8095; } /* ========================================================= ITEMS ========================================================= */ .bargchi-tech-specs-items { display: flex; flex-direction: column; } /* ========================================================= SPEC ROW ========================================================= */ .bargchi-tech-specs-row { display: grid; grid-template-columns: minmax(170px, 28%) minmax(0, 1fr); align-items: center; min-height: 54px; padding: 0 18px; background: #FFFFFF; border: 0; border-radius: 0; } .bargchi-tech-specs-row:not(:last-child) { border-bottom: 1px solid #EDF2F7; } /* subtle row hover - desktop only */ @media (hover: hover) and (pointer: fine) { .bargchi-tech-specs-row { transition: background-color .18s ease; } .bargchi-tech-specs-row:hover { background: #FBFCFE; } } /* ========================================================= NAME ========================================================= */ .bargchi-tech-specs-name { padding-left: 18px; color: #6F8095; font-size: 14px; font-weight: 500; line-height: 1.8; } /* ========================================================= VALUE ========================================================= */ .bargchi-tech-specs-value { position: relative; min-width: 0; padding-right: 20px; color: #102B4E; font-size: 14px; font-weight: 700; line-height: 1.8; } /* vertical separator */ .bargchi-tech-specs-value::before { content: ""; position: absolute; right: 0; top: 50%; width: 1px; height: 24px; background: #EDF2F7; transform: translateY(-50%); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .bargchi-tech-specs { margin-top: 28px; } .bargchi-tech-specs-title { font-size: 22px; } .bargchi-tech-specs-row { grid-template-columns: minmax(150px, 34%) minmax(0, 1fr); } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .bargchi-tech-specs { margin: 26px 0 32px; } .bargchi-tech-specs-header { margin-bottom: 16px; } .bargchi-tech-specs-title { margin-bottom: 6px; font-size: 20px; } .bargchi-tech-specs-description { font-size: 13px; } .bargchi-tech-specs-groups { gap: 12px; } .bargchi-tech-specs-group { border-radius: 12px; } .bargchi-tech-specs-group-header { min-height: 54px; padding: 0 14px; } .bargchi-tech-specs-group-title { font-size: 14px; } .bargchi-tech-specs-row { grid-template-columns: minmax(105px, 38%) minmax(0, 1fr); min-height: 50px; padding: 0 14px; } .bargchi-tech-specs-name { padding-left: 10px; font-size: 12.5px; } .bargchi-tech-specs-value { padding-right: 12px; font-size: 12.5px; } .bargchi-tech-specs-value::before { height: 20px; } } /* ========================================================= BARGCHI PRODUCT CONTENT TABS Description + Technical Specs + Reviews ========================================================= */ .bargchi-product-content-tabs { width: 100%; margin: 34px 0 48px; direction: rtl; background: #FFFFFF; border: 1px solid var(--bargchi-border); border-radius: var(--bargchi-radius-lg); overflow: hidden; box-shadow: var(--bargchi-shadow-xs); } /* ========================================================= TAB NAVIGATION ========================================================= */ .bargchi-tabs-navigation { position: relative; display: flex; align-items: stretch; justify-content: flex-start; gap: 0; width: 100%; min-height: 64px; padding: 0 18px; overflow: visible; background: #FAFBFD; border: 0; border-bottom: 1px solid var(--bargchi-border); box-sizing: border-box; } /* ========================================================= TAB BUTTON ========================================================= */ .bargchi-tab-button { -webkit-appearance: none !important; appearance: none !important; position: relative; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px; flex: 0 0 auto; min-width: 155px; min-height: 64px; margin: 0 !important; padding: 0 24px !important; background: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: var(--bargchi-text-muted) !important; font-family: inherit !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1 !important; text-align: center; white-space: nowrap; cursor: pointer; outline: 0; transition: color 160ms ease, background-color 160ms ease; } .bargchi-tab-button::before { display: none !important; content: none !important; } /* ========================================================= ACTIVE TAB ========================================================= */ .bargchi-tab-button.is-active { color: var(--bargchi-navy) !important; background: #FFFFFF !important; } /* ========================================================= TAB UNDERLINE ========================================================= */ .bargchi-tab-button::after { content: "" !important; position: absolute; right: 24px; left: 24px; bottom: -1px; display: block !important; width: auto !important; height: 3px; background: transparent; border-radius: 8px 8px 0 0; transform: none !important; opacity: 1 !important; transition: background-color 160ms ease; } .bargchi-tab-button.is-active::after { width: auto !important; background: var(--bargchi-orange) !important; } /* Desktop hover */ @media (hover: hover) and (pointer: fine) { .bargchi-tab-button:hover:not(.is-active) { color: var(--bargchi-navy) !important; background: rgba(16, 43, 78, 0.025) !important; } } /* Keyboard accessibility */ .bargchi-tab-button:focus-visible { z-index: 2; outline: 2px solid rgba(255, 90, 0, 0.30) !important; outline-offset: -5px; border-radius: 8px !important; } /* ========================================================= REVIEW COUNT BADGE ========================================================= */ .bargchi-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px; background: #EEF3F7; border: 1px solid #E4EBF2; border-radius: 999px; color: var(--bargchi-text-muted); font-size: 11px; font-weight: 800; line-height: 1; } .bargchi-tab-button.is-active .bargchi-tab-count { background: var(--bargchi-orange-soft); border-color: #FFE0CF; color: var(--bargchi-orange); } /* ========================================================= TAB CONTENT ========================================================= */ .bargchi-tabs-content { width: 100%; padding: 28px 26px 30px; background: #FFFFFF; } .bargchi-tab-panel[hidden] { display: none !important; } .bargchi-tab-panel.is-active { display: block; animation: bargchiTabFadeIn 180ms ease; } @keyframes bargchiTabFadeIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .bargchi-tab-panel.is-active { animation: none; } } /* ========================================================= DESCRIPTION ========================================================= */ .bargchi-description-content { width: 100%; max-width: 100%; color: var(--bargchi-text-body); font-size: 15px; font-weight: 400; line-height: 2.15; } .bargchi-description-content > *:first-child { margin-top: 0; } .bargchi-description-content > *:last-child { margin-bottom: 0; } .bargchi-description-content p { margin-top: 0; margin-bottom: 18px; } .bargchi-description-content h2, .bargchi-description-content h3, .bargchi-description-content h4 { margin-top: 26px; margin-bottom: 12px; color: var(--bargchi-text-main); font-weight: 800; line-height: 1.7; } .bargchi-description-content h2 { font-size: 22px; } .bargchi-description-content h3 { font-size: 19px; } .bargchi-description-content h4 { font-size: 16px; } .bargchi-description-content ul, .bargchi-description-content ol { margin: 14px 0 18px; padding-right: 22px; } .bargchi-description-content li { margin-bottom: 7px; } .bargchi-description-content img { display: block; max-width: 100%; height: auto; margin: 22px auto; border: 0; border-radius: 14px; } /* ========================================================= SPECIFICATIONS ========================================================= */ .bargchi-specifications-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; } /* Specification group */ .bargchi-specification-group { min-width: 0; overflow: hidden; padding: 0; background: #FFFFFF; border: 1px solid var(--bargchi-border); border-radius: 14px; box-shadow: none; } /* Group header */ .bargchi-specification-group-head { display: flex; align-items: center; gap: 10px; min-height: 54px; margin: 0; padding: 0 16px; background: var(--bargchi-bg-soft); border-bottom: 1px solid var(--bargchi-border-soft); } .bargchi-specification-accent { width: 3px; height: 20px; flex: 0 0 3px; background: var(--bargchi-orange); border-radius: 999px; } .bargchi-specification-group-title { margin: 0 !important; padding: 0 !important; color: var(--bargchi-text-main); font-size: 15px; font-weight: 800; line-height: 1.7; } /* Rows */ .bargchi-specification-rows { display: flex; flex-direction: column; width: 100%; } .bargchi-specification-row { display: grid; grid-template-columns: minmax(125px, 36%) minmax(0, 1fr); align-items: stretch; gap: 0; min-height: 52px; background: #FFFFFF; border: 0; } .bargchi-specification-row:not(:last-child) { border-bottom: 1px solid var(--bargchi-border-soft); } .bargchi-specification-name, .bargchi-specification-value { display: flex; align-items: center; min-width: 0; padding: 11px 14px; line-height: 1.8; } .bargchi-specification-name { color: var(--bargchi-text-muted); background: #FBFCFD; font-size: 13px; font-weight: 500; } .bargchi-specification-value { position: relative; color: var(--bargchi-text-main); font-size: 13.5px; font-weight: 750; overflow-wrap: anywhere; } .bargchi-specification-value::before { content: ""; position: absolute; right: 0; top: 50%; width: 1px; height: 24px; background: var(--bargchi-border-soft); transform: translateY(-50%); } @media (hover: hover) and (pointer: fine) { .bargchi-specification-row:hover .bargchi-specification-name, .bargchi-specification-row:hover .bargchi-specification-value { background-color: #F9FBFD; } } /* ========================================================= REVIEWS — REAL WOOCOMMERCE CONTENT ========================================================= */ .bargchi-reviews-content { width: 100%; color: var(--bargchi-text-body); } .bargchi-reviews-content .woocommerce-Reviews-title { display: none !important; } .bargchi-reviews-content #reviews { width: 100%; margin: 0 !important; } .bargchi-reviews-content #comments, .bargchi-reviews-content #review_form_wrapper { min-width: 0; } /* Empty reviews message */ .bargchi-reviews-content .woocommerce-noreviews { margin: 0 0 18px !important; padding: 14px 16px; background: var(--bargchi-bg-soft); border: 1px solid var(--bargchi-border); border-radius: 10px; color: var(--bargchi-text-muted); font-size: 13.5px; } /* Comment list */ .bargchi-reviews-content .commentlist { margin: 0 !important; padding: 0 !important; list-style: none !important; } .bargchi-reviews-content .commentlist li.review { margin: 0 0 14px !important; padding: 18px !important; background: #FFFFFF; border: 1px solid var(--bargchi-border); border-radius: 14px; box-shadow: none; } .bargchi-reviews-content .commentlist li.review:last-child { margin-bottom: 0 !important; } .bargchi-reviews-content .comment_container { display: block; } .bargchi-reviews-content .avatar { border-radius: 50% !important; } .bargchi-reviews-content .comment-text { margin: 0 !important; padding: 0 !important; border: 0 !important; } .bargchi-reviews-content .meta { margin-bottom: 10px !important; color: var(--bargchi-text-muted) !important; font-size: 12.5px !important; } .bargchi-reviews-content .description { color: var(--bargchi-text-body); font-size: 14px; line-height: 2; } /* Stars */ .bargchi-reviews-content .star-rating, .bargchi-reviews-content .stars a { color: var(--bargchi-star) !important; } /* Review form */ .bargchi-reviews-content #review_form_wrapper { margin-top: 22px; padding: 20px; background: var(--bargchi-bg-soft); border: 1px solid var(--bargchi-border); border-radius: 14px; } .bargchi-reviews-content #reply-title { display: block; margin: 0 0 14px; color: var(--bargchi-text-main); font-size: 16px; font-weight: 800; line-height: 1.8; } .bargchi-reviews-content .comment-form-rating, .bargchi-reviews-content .comment-form-comment, .bargchi-reviews-content .comment-form-author, .bargchi-reviews-content .comment-form-email { margin-bottom: 14px; } .bargchi-reviews-content label { display: block; margin-bottom: 7px; color: var(--bargchi-text-main); font-size: 13px; font-weight: 700; } .bargchi-reviews-content textarea, .bargchi-reviews-content input[type="text"], .bargchi-reviews-content input[type="email"] { width: 100% !important; margin: 0 !important; padding: 11px 13px !important; background: #FFFFFF !important; border: 1px solid var(--bargchi-border-strong) !important; border-radius: 9px !important; color: var(--bargchi-text-main) !important; box-shadow: none !important; outline: none !important; } .bargchi-reviews-content textarea { min-height: 150px; resize: vertical; } .bargchi-reviews-content textarea:focus, .bargchi-reviews-content input[type="text"]:focus, .bargchi-reviews-content input[type="email"]:focus { border-color: var(--bargchi-navy) !important; } .bargchi-reviews-content #submit { min-height: 44px !important; margin: 0 !important; padding: 0 22px !important; background: var(--bargchi-orange) !important; border: 1px solid var(--bargchi-orange) !important; border-radius: 9px !important; color: #FFFFFF !important; box-shadow: none !important; font-size: 13.5px !important; font-weight: 800 !important; transition: background-color 160ms ease, border-color 160ms ease; } .bargchi-reviews-content #submit:hover { background: var(--bargchi-orange-hover) !important; border-color: var(--bargchi-orange-hover) !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .bargchi-product-content-tabs { margin-top: 28px; } .bargchi-tabs-content { padding: 24px 20px 26px; } .bargchi-specifications-layout { grid-template-columns: 1fr; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .bargchi-product-content-tabs { margin: 24px 0 34px; border-radius: 12px; } .bargchi-tabs-navigation { min-height: 54px; gap: 0; overflow-x: auto; overflow-y: hidden; padding: 0 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .bargchi-tabs-navigation::-webkit-scrollbar { display: none; } .bargchi-tab-button { flex: 0 0 auto; min-width: auto; min-height: 54px; padding: 0 16px !important; font-size: 13px !important; white-space: nowrap; } .bargchi-tab-button::after { right: 15px; left: 15px; height: 3px; } .bargchi-tab-count { min-width: 21px; height: 21px; padding: 0 6px; font-size: 10px; } .bargchi-tabs-content { padding: 18px 12px 20px; } .bargchi-description-content { font-size: 13.5px; line-height: 2.05; } .bargchi-description-content h2 { font-size: 19px; } .bargchi-description-content h3 { font-size: 17px; } .bargchi-specifications-layout { grid-template-columns: 1fr; gap: 12px; } .bargchi-specification-group { border-radius: 11px; } .bargchi-specification-group-head { min-height: 50px; padding: 0 13px; } .bargchi-specification-group-title { font-size: 13.5px; } .bargchi-specification-row { grid-template-columns: minmax(100px, 38%) minmax(0, 1fr); min-height: 48px; } .bargchi-specification-name, .bargchi-specification-value { padding: 10px 11px; font-size: 12.5px; } .bargchi-specification-value::before { height: 20px; } .bargchi-reviews-content .commentlist li.review { padding: 14px !important; border-radius: 11px; } .bargchi-reviews-content #review_form_wrapper { margin-top: 18px; padding: 14px; border-radius: 11px; } .bargchi-reviews-content textarea { min-height: 130px; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .bargchi-tab-button { padding: 0 13px !important; font-size: 12.5px !important; } .bargchi-tabs-content { padding-inline: 10px; } .bargchi-specification-row { grid-template-columns: minmax(92px, 40%) minmax(0, 1fr); } .bargchi-specification-name, .bargchi-specification-value { padding-inline: 9px; font-size: 12px; } } /* ========================================================= BARGCHI REVIEWS SUMMARY ========================================================= */ .bargchi-reviews-summary { display: grid; grid-template-columns: minmax(230px, .75fr) minmax(320px, 1.25fr); align-items: center; gap: 44px; width: 100%; margin-bottom: 26px; padding: 24px 26px; background: linear-gradient( 135deg, #FFFFFF 0%, #FAFCFE 100% ); border: 1px solid var(--bargchi-border); border-radius: 16px; } /* ========================================================= SCORE ========================================================= */ .bargchi-reviews-score { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; } .bargchi-reviews-score-main { display: flex; align-items: baseline; gap: 7px; } .bargchi-reviews-score-number { color: var(--bargchi-text-main); font-size: 38px; font-weight: 900; line-height: 1.2; } .bargchi-reviews-score-max { color: var(--bargchi-text-muted); font-size: 13px; font-weight: 500; } /* ========================================================= SCORE STARS ========================================================= */ .bargchi-reviews-score-stars { display: flex; direction: ltr; gap: 3px; margin-top: 10px; } .bargchi-review-star { position: relative; display: inline-block; width: 20px; height: 20px; overflow: hidden; font-family: Arial, sans-serif; font-size: 19px; line-height: 20px; } .bargchi-review-star-empty { position: absolute; inset: 0; color: #DCE3EB; } .bargchi-review-star-fill { position: absolute; top: 0; left: 0; z-index: 2; display: block; height: 100%; overflow: hidden; color: var(--bargchi-star); white-space: nowrap; } .bargchi-reviews-score-count { margin-top: 9px; color: var(--bargchi-text-muted); font-size: 12.5px; font-weight: 500; line-height: 1.8; } .bargchi-reviews-score-count strong { color: var(--bargchi-text-main); font-weight: 800; } /* ========================================================= DISTRIBUTION ========================================================= */ .bargchi-reviews-distribution { display: flex; flex-direction: column; gap: 9px; width: 100%; } .bargchi-rating-distribution-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 32px; align-items: center; gap: 10px; min-height: 22px; } .bargchi-rating-distribution-label { display: inline-flex; align-items: center; justify-content: flex-start; gap: 4px; direction: ltr; color: var(--bargchi-text-muted); font-size: 12px; font-weight: 600; } .bargchi-rating-distribution-star { color: var(--bargchi-star); font-size: 13px; } /* Track */ .bargchi-rating-distribution-track { position: relative; width: 100%; height: 7px; overflow: hidden; background: #EDF2F7; border-radius: 999px; } /* Fill */ .bargchi-rating-distribution-fill { position: absolute; top: 0; right: 0; display: block; height: 100%; background: var(--bargchi-star); border-radius: inherit; } /* Number */ .bargchi-rating-distribution-count { color: var(--bargchi-text-muted); font-size: 11.5px; font-weight: 600; text-align: left; } /* ========================================================= BARGCHI REVIEW FORM — PROFESSIONAL / MINIMAL Real WooCommerce review form ========================================================= */ /* --------------------------------------------------------- Outer form card --------------------------------------------------------- */ .bargchi-reviews-list-and-form #review_form_wrapper, .bargchi-product-tabs-panels #review_form_wrapper { width: 100%; margin-top: 26px !important; padding: 0 !important; overflow: hidden; background: #FFFFFF !important; border: 1px solid var(--bargchi-border) !important; border-radius: 16px !important; box-shadow: 0 6px 22px rgba(16, 43, 78, 0.04) !important; } .bargchi-reviews-list-and-form #review_form, .bargchi-product-tabs-panels #review_form { width: 100%; margin: 0; padding: 0; } .bargchi-reviews-list-and-form #review_form #respond, .bargchi-product-tabs-panels #review_form #respond { width: 100%; margin: 0 !important; padding: 24px 26px 26px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* --------------------------------------------------------- Form title --------------------------------------------------------- */ .bargchi-reviews-list-and-form #review_form #reply-title, .bargchi-product-tabs-panels #review_form #reply-title { position: relative; display: block; margin: 0 0 20px !important; padding: 0 12px 16px 0; color: var(--bargchi-text-main) !important; font-size: 17px !important; font-weight: 800 !important; line-height: 1.9 !important; border-bottom: 1px solid var(--bargchi-border-soft); } .bargchi-reviews-list-and-form #review_form #reply-title::before, .bargchi-product-tabs-panels #review_form #reply-title::before { content: ""; position: absolute; top: 8px; right: 0; width: 3px; height: 18px; background: var(--bargchi-orange); border-radius: 999px; } .bargchi-reviews-list-and-form #review_form #reply-title small, .bargchi-product-tabs-panels #review_form #reply-title small { display: inline-block; margin-right: 8px; } .bargchi-reviews-list-and-form #review_form #reply-title small a, .bargchi-product-tabs-panels #review_form #reply-title small a { color: var(--bargchi-text-muted) !important; font-size: 12px !important; font-weight: 600 !important; text-decoration: none !important; } /* --------------------------------------------------------- Informational messages --------------------------------------------------------- */ .bargchi-reviews-list-and-form #review_form .comment-notes, .bargchi-reviews-list-and-form #review_form .logged-in-as, .bargchi-reviews-list-and-form #review_form .must-log-in, .bargchi-product-tabs-panels #review_form .comment-notes, .bargchi-product-tabs-panels #review_form .logged-in-as, .bargchi-product-tabs-panels #review_form .must-log-in { margin: -6px 0 18px !important; color: var(--bargchi-text-muted) !important; font-size: 12.5px !important; font-weight: 500; line-height: 2 !important; } .bargchi-reviews-content .woocommerce-verification-required, .bargchi-reviews-content .woocommerce-verification-required p { margin: 0 !important; } .bargchi-reviews-content .woocommerce-verification-required { padding: 15px 17px; background: #F8FAFC; border: 1px solid var(--bargchi-border); border-radius: 12px; color: var(--bargchi-text-muted); font-size: 13px; line-height: 2; } /* --------------------------------------------------------- Shared field spacing / labels --------------------------------------------------------- */ .bargchi-reviews-list-and-form #review_form .comment-form-rating, .bargchi-reviews-list-and-form #review_form .comment-form-comment, .bargchi-reviews-list-and-form #review_form .comment-form-author, .bargchi-reviews-list-and-form #review_form .comment-form-email, .bargchi-product-tabs-panels #review_form .comment-form-rating, .bargchi-product-tabs-panels #review_form .comment-form-comment, .bargchi-product-tabs-panels #review_form .comment-form-author, .bargchi-product-tabs-panels #review_form .comment-form-email { margin: 0 0 20px !important; } .bargchi-reviews-list-and-form #review_form label, .bargchi-product-tabs-panels #review_form label { display: block; margin: 0 0 8px !important; color: var(--bargchi-text-main) !important; font-size: 13.5px !important; font-weight: 750 !important; line-height: 1.8 !important; } .bargchi-reviews-list-and-form #review_form .required, .bargchi-product-tabs-panels #review_form .required { color: #E5484D !important; } /* ========================================================= RATING — COMPACT PROFESSIONAL STARS ========================================================= */ .bargchi-reviews-list-and-form #review_form .comment-form-rating, .bargchi-product-tabs-panels #review_form .comment-form-rating { display: grid; grid-template-columns: minmax(115px, auto) minmax(0, 1fr); align-items: center; gap: 18px; min-height: 64px; padding: 12px 0 18px !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--bargchi-border-soft) !important; border-radius: 0 !important; } .bargchi-reviews-list-and-form #review_form .comment-form-rating label, .bargchi-product-tabs-panels #review_form .comment-form-rating label { margin: 0 !important; color: var(--bargchi-text-main) !important; font-size: 13.5px !important; font-weight: 800 !important; white-space: nowrap; } /* Reset theme/Woo star presentation, while keeping Woo's native click logic */ .bargchi-reviews-list-and-form #review_form p.stars, .bargchi-product-tabs-panels #review_form p.stars { display: flex !important; align-items: center !important; justify-content: flex-start !important; width: fit-content !important; margin: 0 !important; padding: 0 !important; direction: ltr !important; line-height: 1 !important; } .bargchi-reviews-list-and-form #review_form p.stars span, .bargchi-product-tabs-panels #review_form p.stars span { display: inline-flex !important; align-items: center !important; gap: 5px !important; width: auto !important; margin: 0 !important; padding: 0 !important; direction: ltr !important; } .bargchi-reviews-list-and-form #review_form p.stars a, .bargchi-product-tabs-panels #review_form p.stars a { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 30px !important; width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; color: transparent !important; font-size: 0 !important; line-height: 1 !important; text-indent: -9999px !important; text-decoration: none !important; white-space: nowrap !important; cursor: pointer; transform: none !important; } .bargchi-reviews-list-and-form #review_form p.stars a::before, .bargchi-product-tabs-panels #review_form p.stars a::before { content: "★" !important; position: absolute !important; inset: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 30px !important; height: 30px !important; color: #D8E0E9 !important; font-family: Arial, sans-serif !important; font-size: 26px !important; font-weight: 400 !important; line-height: 30px !important; text-indent: 0 !important; transition: color 140ms ease, transform 140ms ease; } .bargchi-reviews-list-and-form #review_form p.stars a::after, .bargchi-product-tabs-panels #review_form p.stars a::after { display: none !important; content: none !important; } /* Hover: fill stars from 1 through hovered star */ .bargchi-reviews-list-and-form #review_form p.stars:hover a::before, .bargchi-product-tabs-panels #review_form p.stars:hover a::before { color: var(--bargchi-star) !important; } .bargchi-reviews-list-and-form #review_form p.stars a:hover ~ a::before, .bargchi-product-tabs-panels #review_form p.stars a:hover ~ a::before { color: #D8E0E9 !important; } .bargchi-reviews-list-and-form #review_form p.stars a:hover::before, .bargchi-product-tabs-panels #review_form p.stars a:hover::before { transform: scale(1.08); } /* WooCommerce selected state */ .bargchi-reviews-list-and-form #review_form p.stars.selected a::before, .bargchi-product-tabs-panels #review_form p.stars.selected a::before { color: var(--bargchi-star) !important; } .bargchi-reviews-list-and-form #review_form p.stars.selected a.active ~ a::before, .bargchi-product-tabs-panels #review_form p.stars.selected a.active ~ a::before { color: #D8E0E9 !important; } .bargchi-reviews-list-and-form #review_form p.stars a:focus-visible::before, .bargchi-product-tabs-panels #review_form p.stars a:focus-visible::before { color: var(--bargchi-star) !important; filter: drop-shadow(0 0 3px rgba(245, 158, 11, 0.30)); } /* ========================================================= COMMENT FIELD ========================================================= */ .bargchi-reviews-list-and-form #review_form .comment-form-comment, .bargchi-product-tabs-panels #review_form .comment-form-comment { margin-top: 22px !important; } .bargchi-reviews-list-and-form #review_form textarea, .bargchi-product-tabs-panels #review_form textarea { display: block; width: 100% !important; min-height: 145px !important; max-height: 360px; margin: 0 !important; padding: 14px 16px !important; resize: vertical; background: #FBFCFE !important; border: 1px solid #DCE5EE !important; border-radius: 11px !important; box-shadow: none !important; outline: none !important; color: var(--bargchi-text-main) !important; font: inherit; font-size: 13.5px !important; font-weight: 500; line-height: 2 !important; transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease; } .bargchi-reviews-list-and-form #review_form textarea::placeholder, .bargchi-product-tabs-panels #review_form textarea::placeholder { color: #97A6B8 !important; opacity: 1; } .bargchi-reviews-list-and-form #review_form textarea:hover, .bargchi-product-tabs-panels #review_form textarea:hover { border-color: #C9D5E2 !important; } .bargchi-reviews-list-and-form #review_form textarea:focus, .bargchi-product-tabs-panels #review_form textarea:focus { background: #FFFFFF !important; border-color: var(--bargchi-navy) !important; box-shadow: 0 0 0 3px rgba(16, 43, 78, 0.07) !important; } /* --------------------------------------------------------- Name / email inputs when WooCommerce shows them --------------------------------------------------------- */ .bargchi-reviews-list-and-form #review_form input[type="text"], .bargchi-reviews-list-and-form #review_form input[type="email"], .bargchi-product-tabs-panels #review_form input[type="text"], .bargchi-product-tabs-panels #review_form input[type="email"] { width: 100% !important; height: 46px !important; margin: 0 !important; padding: 0 14px !important; background: #FBFCFE !important; border: 1px solid #DCE5EE !important; border-radius: 10px !important; box-shadow: none !important; outline: none !important; color: var(--bargchi-text-main) !important; font: inherit; font-size: 13px !important; transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease; } .bargchi-reviews-list-and-form #review_form input[type="text"]:focus, .bargchi-reviews-list-and-form #review_form input[type="email"]:focus, .bargchi-product-tabs-panels #review_form input[type="text"]:focus, .bargchi-product-tabs-panels #review_form input[type="email"]:focus { background: #FFFFFF !important; border-color: var(--bargchi-navy) !important; box-shadow: 0 0 0 3px rgba(16, 43, 78, 0.07) !important; } /* ========================================================= SUBMIT ROW ========================================================= */ .bargchi-reviews-list-and-form #review_form .form-submit, .bargchi-product-tabs-panels #review_form .form-submit { display: flex !important; align-items: center; justify-content: flex-start; margin: 20px 0 0 !important; padding: 0 !important; } .bargchi-reviews-list-and-form #review_form #submit, .bargchi-reviews-list-and-form #review_form .submit, .bargchi-product-tabs-panels #review_form #submit, .bargchi-product-tabs-panels #review_form .submit { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 122px !important; min-height: 44px !important; height: 44px !important; margin: 0 !important; padding: 0 22px !important; background: var(--bargchi-orange) !important; background-image: none !important; border: 1px solid var(--bargchi-orange) !important; border-radius: 9px !important; box-shadow: none !important; color: #FFFFFF !important; font: inherit !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1 !important; text-align: center !important; text-transform: none !important; cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease; } @media (hover: hover) and (pointer: fine) { .bargchi-reviews-list-and-form #review_form #submit:hover, .bargchi-reviews-list-and-form #review_form .submit:hover, .bargchi-product-tabs-panels #review_form #submit:hover, .bargchi-product-tabs-panels #review_form .submit:hover { background: var(--bargchi-orange-hover) !important; border-color: var(--bargchi-orange-hover) !important; transform: translateY(-1px); } } .bargchi-reviews-list-and-form #review_form #submit:active, .bargchi-reviews-list-and-form #review_form .submit:active, .bargchi-product-tabs-panels #review_form #submit:active, .bargchi-product-tabs-panels #review_form .submit:active { transform: translateY(0); } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .bargchi-reviews-list-and-form #review_form_wrapper, .bargchi-product-tabs-panels #review_form_wrapper { margin-top: 20px !important; border-radius: 13px !important; } .bargchi-reviews-list-and-form #review_form #respond, .bargchi-product-tabs-panels #review_form #respond { padding: 18px 15px 20px !important; } .bargchi-reviews-list-and-form #review_form #reply-title, .bargchi-product-tabs-panels #review_form #reply-title { margin-bottom: 16px !important; padding-bottom: 13px; font-size: 15px !important; } .bargchi-reviews-list-and-form #review_form #reply-title::before, .bargchi-product-tabs-panels #review_form #reply-title::before { top: 7px; height: 16px; } .bargchi-reviews-list-and-form #review_form .comment-form-rating, .bargchi-product-tabs-panels #review_form .comment-form-rating { grid-template-columns: 1fr; gap: 9px; min-height: 0; padding: 7px 0 15px !important; } .bargchi-reviews-list-and-form #review_form p.stars span, .bargchi-product-tabs-panels #review_form p.stars span { gap: 4px !important; } .bargchi-reviews-list-and-form #review_form p.stars a, .bargchi-product-tabs-panels #review_form p.stars a, .bargchi-reviews-list-and-form #review_form p.stars a::before, .bargchi-product-tabs-panels #review_form p.stars a::before { width: 29px !important; height: 29px !important; min-width: 29px !important; min-height: 29px !important; } .bargchi-reviews-list-and-form #review_form p.stars a::before, .bargchi-product-tabs-panels #review_form p.stars a::before { font-size: 25px !important; line-height: 29px !important; } .bargchi-reviews-list-and-form #review_form .comment-form-comment, .bargchi-product-tabs-panels #review_form .comment-form-comment { margin-top: 17px !important; } .bargchi-reviews-list-and-form #review_form textarea, .bargchi-product-tabs-panels #review_form textarea { min-height: 125px !important; padding: 12px 13px !important; border-radius: 10px !important; font-size: 13px !important; } .bargchi-reviews-list-and-form #review_form .form-submit, .bargchi-product-tabs-panels #review_form .form-submit { margin-top: 16px !important; } .bargchi-reviews-list-and-form #review_form #submit, .bargchi-reviews-list-and-form #review_form .submit, .bargchi-product-tabs-panels #review_form #submit, .bargchi-product-tabs-panels #review_form .submit { width: 100% !important; min-width: 0 !important; min-height: 44px !important; height: 44px !important; } } /* ========================================================= BARGCHI RELATED PRODUCTS Smart responsive layout + premium sales-oriented cards ========================================================= */ .bargchi-related-products { width: 100%; margin: 56px 0 30px; direction: rtl; } /* ========================================================= HEADER ========================================================= */ .bargchi-related-products-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; } .bargchi-related-products-heading { display: flex; align-items: flex-start; gap: 11px; min-width: 0; } .bargchi-related-products-accent { flex: 0 0 4px; width: 4px; height: 34px; margin-top: 4px; background: var(--bargchi-orange); border-radius: 999px; } .bargchi-related-products-title { margin: 0 !important; color: var(--bargchi-text-main); font-size: 24px; font-weight: 900; line-height: 1.5; } .bargchi-related-products-subtitle { margin: 5px 0 0; color: var(--bargchi-text-muted); font-size: 13px; font-weight: 500; line-height: 1.8; } /* ========================================================= ARROWS ========================================================= */ .bargchi-related-products-arrows { display: flex; align-items: center; gap: 7px; direction: ltr; } .bargchi-related-arrow { -webkit-appearance: none !important; appearance: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 !important; background: #FFFFFF !important; background-image: none !important; border: 1px solid var(--bargchi-border) !important; border-radius: 11px !important; color: var(--bargchi-navy) !important; box-shadow: none !important; font-family: Arial, sans-serif !important; font-size: 25px !important; font-weight: 400 !important; line-height: 1 !important; cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease; } .bargchi-related-arrow::before, .bargchi-related-arrow::after { display: none !important; content: none !important; } @media (hover: hover) and (pointer: fine) { .bargchi-related-arrow:hover { background: var(--bargchi-bg-soft) !important; border-color: var(--bargchi-navy) !important; transform: translateY(-1px); } } /* ========================================================= SMART TRACK 1 card -> centered 2 cards -> centered 3 cards -> balanced 4 cards -> full-width four-column grid 5+ -> horizontal slider, 4 visible on desktop No extra PHP count class is required. ========================================================= */ .bargchi-related-track { display: grid; gap: 18px; width: 100%; min-width: 0; padding: 2px 1px 14px; } /* 1 product */ .bargchi-related-track:has(> .bargchi-related-card:only-child) { grid-template-columns: minmax(270px, 330px); justify-content: center; } /* 2 products */ .bargchi-related-track:has(> .bargchi-related-card:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(270px, 330px)); justify-content: center; } /* 3 products */ .bargchi-related-track:has(> .bargchi-related-card:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(240px, 1fr)); } /* 4 products */ .bargchi-related-track:has(> .bargchi-related-card:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* 5+ products */ .bargchi-related-track:has(> .bargchi-related-card:nth-child(5)) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 54px) / 4); overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-inline: contain; } .bargchi-related-track::-webkit-scrollbar { display: none; } /* ========================================================= CARD ========================================================= */ .bargchi-related-card { position: relative; display: flex; flex-direction: column; min-width: 0; width: 100%; overflow: hidden; scroll-snap-align: start; background: #FFFFFF; border: 1px solid var(--bargchi-border); border-radius: 18px; box-shadow: 0 5px 18px rgba(16, 43, 78, 0.035); transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } .bargchi-related-track:has(> .bargchi-related-card:only-child) .bargchi-related-card { max-width: 330px; margin-inline: auto; } @media (hover: hover) and (pointer: fine) { .bargchi-related-card:hover { transform: translateY(-4px); border-color: #D4DEE9; box-shadow: 0 16px 34px rgba(16, 43, 78, 0.09); } } /* ========================================================= IMAGE ========================================================= */ .bargchi-related-image-link { display: block; color: inherit; text-decoration: none !important; } .bargchi-related-image-wrap { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 235px; padding: 20px; overflow: hidden; background: linear-gradient( 180deg, #FAFCFE 0%, #FFFFFF 100% ); } .bargchi-related-image { display: block; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain; transition: transform 220ms ease; } @media (hover: hover) and (pointer: fine) { .bargchi-related-card:hover .bargchi-related-image { transform: scale(1.035); } } /* ========================================================= DISCOUNT BADGE ========================================================= */ .bargchi-related-discount { position: absolute; top: 14px; right: 14px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 28px; padding: 0 9px; background: var(--bargchi-orange); border-radius: 999px; color: #FFFFFF; font-size: 12px; font-weight: 800; line-height: 1; } /* ========================================================= STOCK BADGE ========================================================= */ .bargchi-related-stock-badge { position: absolute; top: 14px; left: 14px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; min-height: 27px; padding: 4px 9px; background: rgba(255, 255, 255, 0.94); border: 1px solid var(--bargchi-border); border-radius: 999px; color: var(--bargchi-text-light); font-size: 11px; font-weight: 700; } .bargchi-related-card.is-out-of-stock .bargchi-related-image { opacity: 0.55; } /* ========================================================= CARD BODY ========================================================= */ .bargchi-related-body { display: flex; flex: 1; flex-direction: column; padding: 17px 17px 16px; border-top: 1px solid var(--bargchi-border-soft); } /* ========================================================= TITLE ========================================================= */ .bargchi-related-card-title { min-height: 52px; margin: 0 !important; color: var(--bargchi-text-main); font-size: 14px; font-weight: 800; line-height: 1.85; } .bargchi-related-card-title a { display: -webkit-box; overflow: hidden; color: inherit !important; text-decoration: none !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } @media (hover: hover) and (pointer: fine) { .bargchi-related-card-title a:hover { color: var(--bargchi-orange) !important; } } /* ========================================================= RATING ========================================================= */ .bargchi-related-rating { display: flex; align-items: center; gap: 6px; min-height: 26px; margin-top: 9px; } .bargchi-related-rating-stars { position: relative; display: inline-block; flex: 0 0 68px; width: 68px; height: 16px; overflow: hidden; direction: ltr; unicode-bidi: isolate; font-family: Arial, sans-serif; font-size: 13px; line-height: 16px; letter-spacing: 0.5px; white-space: nowrap; } .bargchi-related-rating-back, .bargchi-related-rating-front { position: absolute; top: 0; left: 0; height: 16px; white-space: nowrap; } .bargchi-related-rating-back { width: 100%; color: #DCE3EB; } .bargchi-related-rating-front { overflow: hidden; color: var(--bargchi-star); } .bargchi-related-rating-number { color: var(--bargchi-text-main); font-size: 12px; font-weight: 700; } .bargchi-related-review-count { color: var(--bargchi-text-light); font-size: 11.5px; font-weight: 500; white-space: nowrap; } /* ========================================================= BOTTOM + PRICE ========================================================= */ .bargchi-related-bottom { margin-top: auto; padding-top: 16px; } .bargchi-related-price-wrap { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 2px; min-height: 45px; } .bargchi-related-old-price { color: var(--bargchi-text-light); font-size: 11.5px; font-weight: 500; line-height: 1.5; text-decoration-thickness: 1px; } .bargchi-related-current-price-row { display: flex; align-items: baseline; gap: 5px; } .bargchi-related-price-prefix { color: var(--bargchi-text-muted); font-size: 11.5px; font-weight: 500; } .bargchi-related-price { color: var(--bargchi-text-main); font-size: 18px; font-weight: 900; line-height: 1.6; } .bargchi-related-price .woocommerce-Price-currencySymbol { margin-right: 3px; color: var(--bargchi-text-muted); font-size: 11px; font-weight: 500; } .bargchi-related-price.unavailable { color: var(--bargchi-text-muted); font-size: 13px; } /* ========================================================= CTA ========================================================= */ .bargchi-related-cta { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; margin-top: 12px; padding: 0 14px; background: var(--bargchi-bg-soft); border: 1px solid var(--bargchi-border); border-radius: 11px; color: var(--bargchi-navy) !important; font-size: 12.5px; font-weight: 800; text-decoration: none !important; transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, transform 160ms ease; } .bargchi-related-cta svg { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } @media (hover: hover) and (pointer: fine) { .bargchi-related-card:hover .bargchi-related-cta { background: var(--bargchi-orange); border-color: var(--bargchi-orange); color: #FFFFFF !important; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .bargchi-related-products { margin-top: 44px; } .bargchi-related-track { gap: 16px; } .bargchi-related-track:has(> .bargchi-related-card:nth-child(3):last-child), .bargchi-related-track:has(> .bargchi-related-card:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bargchi-related-track:has(> .bargchi-related-card:nth-child(5)) { grid-auto-columns: calc((100% - 32px) / 3); } .bargchi-related-image-wrap { height: 210px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .bargchi-related-products { margin: 38px 0 18px; } .bargchi-related-products-head { align-items: center; margin-bottom: 18px; } .bargchi-related-products-title { font-size: 19px; } .bargchi-related-products-subtitle { display: none; } .bargchi-related-products-accent { height: 28px; } .bargchi-related-products-arrows { display: none; } /* One product fills the mobile container cleanly */ .bargchi-related-track:has(> .bargchi-related-card:only-child) { grid-template-columns: minmax(0, 1fr); justify-content: stretch; } .bargchi-related-track:has(> .bargchi-related-card:only-child) .bargchi-related-card { max-width: none; margin-inline: 0; } /* 2+ products become touch-friendly horizontal cards */ .bargchi-related-track:has(> .bargchi-related-card:nth-child(2)) { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(245px, 78vw); gap: 12px; width: calc(100% + 28px); margin-inline: -14px; padding: 2px 14px 13px; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-inline: contain; } .bargchi-related-card { border-radius: 15px; } .bargchi-related-image-wrap { height: 205px; padding: 16px; } .bargchi-related-body { padding: 14px 14px 13px; } .bargchi-related-card-title { min-height: 48px; font-size: 13px; } .bargchi-related-price { font-size: 16px; } .bargchi-related-cta { min-height: 42px; margin-top: 10px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .bargchi-related-track:has(> .bargchi-related-card:nth-child(2)) { grid-auto-columns: minmax(230px, 84vw); } } /* ========================================================= BARGCHI FINAL RESPONSIVE PRODUCT HERO Mobile-first sales layout --------------------------------------------------------- Mobile order: Brand -> Title -> Rating -> Gallery -> Key features -> Purchase ========================================================= */ @media (min-width: 768px) and (max-width: 991px) { .bargchi-product-hero { gap: 24px; } .bargchi-gallery-stage { height: min(62vw, 560px); min-height: 440px; aspect-ratio: auto; } .bargchi-summary-card { width: 100%; max-width: 760px; margin-inline: auto !important; } .bargchi-key-features { margin-top: 20px; } .bargchi-purchase-box { margin-top: 16px; } } @media (max-width: 767px) { /* --------------------------------------------------------- PAGE + HERO STRUCTURE --------------------------------------------------------- */ .bargchi-product-page { padding-top: 8px; padding-bottom: 72px; } .bargchi-product-container { width: calc(100% - 24px); } .bargchi-product-hero { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "title" "rating" "gallery" "features" "purchase"; gap: 0; align-items: start; direction: rtl; } /* * On mobile the summary wrapper becomes layout-transparent, * so its real children can be placed around the gallery. */ .bargchi-summary-card { display: contents !important; } .bargchi-product-brand { grid-area: brand; direction: rtl; justify-self: stretch; margin: 2px 0 5px !important; font-size: 12.5px; } .bargchi-product-title { grid-area: title; direction: rtl; width: 100%; margin: 0 !important; font-size: 20px; line-height: 1.75; letter-spacing: -0.1px; } .bargchi-product-rating-row { grid-area: rating; direction: rtl; margin-top: 8px; } .bargchi-gallery-card { grid-area: gallery; direction: rtl; width: 100%; min-width: 0; margin-top: 14px !important; } .bargchi-key-features { grid-area: features; direction: rtl; } .bargchi-purchase-box { grid-area: purchase; direction: rtl; } /* --------------------------------------------------------- BREADCRUMB --------------------------------------------------------- */ .bargchi-breadcrumb { margin-bottom: 12px; padding-top: 0; gap: 6px; font-size: 11px; } /* --------------------------------------------------------- GALLERY --------------------------------------------------------- */ .bargchi-product-gallery { width: 100%; grid-template-areas: "stage" "counter" "thumbs"; grid-template-columns: minmax(0, 1fr); gap: 0; direction: rtl; } .bargchi-gallery-stage { width: 100%; height: clamp(300px, 82vw, 390px); min-height: 0; aspect-ratio: auto; padding: 6px 4px !important; } .bargchi-gallery-main-image { width: 100%; height: 100%; object-fit: contain; } .bargchi-gallery-counter { display: inline-flex; margin-top: 6px; padding: 3px 9px; justify-self: center; } .bargchi-gallery-thumbnails { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; width: 100%; max-height: none; gap: 7px; margin-top: 8px; padding: 2px 1px 5px; overflow-x: auto; overflow-y: hidden; direction: rtl; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .bargchi-gallery-thumbnails::-webkit-scrollbar { display: none; } .bargchi-product-page .bargchi-gallery-thumbnail { flex: 0 0 60px; width: 60px !important; height: 60px !important; min-width: 60px !important; min-height: 60px !important; padding: 5px !important; border-radius: 9px !important; scroll-snap-align: start; } .bargchi-product-page .bargchi-gallery-arrow { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; opacity: 1; background: rgba(255, 255, 255, .94) !important; box-shadow: 0 4px 14px rgba(16, 43, 78, .06) !important; } /* --------------------------------------------------------- RATING --------------------------------------------------------- */ .bargchi-product-page .bargchi-rating-link { gap: 6px; min-height: 25px; padding: 1px 0 !important; } .bargchi-rating-number { font-size: 12.5px; } .bargchi-rating-stars { flex-basis: 70px; width: 70px; height: 17px; font-size: 14px; line-height: 17px; } .bargchi-rating-stars-back, .bargchi-rating-stars-front { height: 17px; line-height: 17px; } .bargchi-review-count { font-size: 11.5px; } /* --------------------------------------------------------- KEY FEATURES — 2 x 2 --------------------------------------------------------- */ .bargchi-key-features { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin-top: 18px; padding: 0; overflow: hidden; border-radius: 12px; background: #FFFFFF; } .bargchi-key-feature { min-height: 92px; padding: 12px 8px; justify-content: center; border: 0; } .bargchi-key-feature:not(:last-child)::after { display: none !important; content: none !important; } .bargchi-key-feature:nth-child(odd) { border-left: 1px solid var(--bargchi-border-soft); } .bargchi-key-feature:nth-child(-n+2) { border-bottom: 1px solid var(--bargchi-border-soft); } .bargchi-key-feature-icon { width: 28px; height: 28px; margin-bottom: 5px; } .bargchi-key-feature-icon svg { width: 21px; height: 21px; } .bargchi-key-feature-name { font-size: 10.5px; line-height: 1.7; white-space: normal; text-overflow: clip; } .bargchi-key-feature-value { margin-top: 2px; font-size: 11.5px; line-height: 1.65; white-space: normal; text-overflow: clip; } /* --------------------------------------------------------- PURCHASE BOX --------------------------------------------------------- */ .bargchi-purchase-box { width: 100%; margin-top: 14px; padding: 15px; border-radius: 12px; } .bargchi-current-price { font-size: 22px; line-height: 1.55; } .bargchi-price-top { gap: 8px; } .bargchi-discount-badge { min-height: 24px; padding: 3px 8px; font-size: 11.5px; } .bargchi-stock-status { margin-top: 8px; font-size: 12px; } /* --------------------------------------------------------- SHIPPING --------------------------------------------------------- */ .bargchi-shipping-info { gap: 8px; margin-top: 12px; padding-top: 12px; } .bargchi-shipping-item { gap: 7px; min-height: 26px; align-items: center !important; } .bargchi-shipping-icon { flex: 0 0 23px; width: 23px; height: 23px; } .bargchi-shipping-icon svg { width: 19px; height: 19px; } .bargchi-shipping-logo { flex-basis: 36px; width: 36px; height: 23px; } .bargchi-shipping-logo img { width: 33px; max-height: 20px; } .bargchi-shipping-text { min-height: 23px; font-size: 11.8px; line-height: 1.7; white-space: normal; } /* --------------------------------------------------------- VARIATIONS + CART --------------------------------------------------------- */ .bargchi-add-to-cart-area { margin-top: 14px; } .bargchi-add-to-cart-area table.variations { margin-bottom: 12px !important; } .bargchi-product-page .bargchi-add-to-cart-area .wd-swatches-product { gap: 10px; } .bargchi-product-page .bargchi-add-to-cart-area .woocommerce-variation-add-to-cart.variations_button { gap: 8px; width: 100%; } .bargchi-add-to-cart-area form.cart:not(.variations_form) { gap: 8px; } .bargchi-add-to-cart-area .quantity { height: 46px; } .bargchi-add-to-cart-area .quantity input.qty { height: 44px !important; } .bargchi-product-page .bargchi-add-to-cart-area .single_add_to_cart_button { min-height: 46px; border-radius: 9px !important; font-size: 13px !important; } } @media (max-width: 420px) { .bargchi-product-container { width: calc(100% - 20px); } .bargchi-product-title { font-size: 19px; } .bargchi-gallery-stage { height: clamp(285px, 84vw, 350px); } .bargchi-product-page .bargchi-gallery-thumbnail { flex-basis: 56px; width: 56px !important; height: 56px !important; min-width: 56px !important; min-height: 56px !important; } .bargchi-key-feature { min-height: 88px; padding: 11px 6px; } .bargchi-key-feature-name { font-size: 10px; } .bargchi-key-feature-value { font-size: 11px; } .bargchi-purchase-box { padding: 14px; } .bargchi-shipping-text { font-size: 11.5px; } .bargchi-product-page .bargchi-add-to-cart-area .woocommerce-variation-add-to-cart.variations_button { flex-wrap: nowrap; } .bargchi-product-page .bargchi-add-to-cart-area .woocommerce-variation-add-to-cart.variations_button .quantity { flex: 0 0 auto; } .bargchi-product-page .bargchi-add-to-cart-area .woocommerce-variation-add-to-cart.variations_button .single_add_to_cart_button { flex: 1 1 auto; min-width: 0; } } /* ========================================================= BARGCHI KEY FEATURES Full text support for long values ========================================================= */ .bargchi-key-features { align-items: stretch; } .bargchi-key-feature { min-width: 0; height: auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; } /* Feature label */ .bargchi-key-feature-name { width: 100%; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: normal; overflow-wrap: break-word; } /* Feature value */ .bargchi-key-feature-value { display: block !important; width: 100%; max-width: 100%; margin-top: 4px; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; -webkit-line-clamp: unset !important; -webkit-box-orient: initial !important; word-break: normal; overflow-wrap: anywhere; line-height: 1.75; text-align: center; } /* Remove any inherited single-line limitation */ .bargchi-key-feature-value, .bargchi-key-feature-value * { white-space: normal !important; } /* ========================================================= DESKTOP ========================================================= */ @media (min-width: 992px) { .bargchi-key-feature { padding-inline: 10px; } .bargchi-key-feature-value { font-size: 12px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .bargchi-key-feature-value { font-size: 12px; line-height: 1.7; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .bargchi-key-feature { min-height: 105px; padding: 10px 7px; } .bargchi-key-feature-name { font-size: 10.5px; } .bargchi-key-feature-value { font-size: 11px; line-height: 1.75; } } /* ========================================================= BARGCHI FINAL MOBILE POLISH Mobile UX stabilization for Benefits + Tabs + Reviews Keeps desktop/tablet behavior intact. ========================================================= */ @media (max-width: 767px) { /* --------------------------------------------------------- PAGE RHYTHM --------------------------------------------------------- */ .bargchi-product-page { padding-top: 8px; padding-bottom: 48px; } .bargchi-product-container { width: calc(100% - 24px); } .bargchi-breadcrumb { margin-bottom: 10px; gap: 5px; font-size: 10.5px; line-height: 1.8; } .bargchi-product-brand { margin-bottom: 4px !important; } .bargchi-product-title { font-size: 20px; line-height: 1.7; } .bargchi-gallery-card { margin-top: 12px !important; } .bargchi-gallery-stage { height: clamp(285px, 79vw, 325px); min-height: 0; padding: 4px 2px !important; } /* --------------------------------------------------------- KEY FEATURES Keep the complete text while preserving a compact 2x2 grid. --------------------------------------------------------- */ .bargchi-key-features { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; padding: 0; } .bargchi-key-feature { min-height: 102px; padding: 11px 8px; justify-content: center; } .bargchi-key-feature-name { font-size: 10.5px; line-height: 1.65; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } .bargchi-key-feature-value { margin-top: 3px; font-size: 11px; line-height: 1.72; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; } /* --------------------------------------------------------- PURCHASE BOX --------------------------------------------------------- */ .bargchi-purchase-box { margin-top: 14px; padding: 14px; border-radius: 12px; } .bargchi-current-price { font-size: 21px; } .bargchi-shipping-text { white-space: normal; font-size: 11.7px; line-height: 1.75; } /* --------------------------------------------------------- BENEFITS The actual template can use either wrapper class. Force a clean 2x2 layout on mobile. --------------------------------------------------------- */ .bargchi-product-page .bargchi-product-benefits, .bargchi-product-page .bargchi-benefits-wrapper, .bargchi-product-benefits, .bargchi-benefits-wrapper { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: stretch !important; justify-content: stretch !important; gap: 0 !important; width: 100% !important; min-height: 0 !important; height: auto !important; margin-top: 24px !important; padding: 7px !important; overflow: hidden !important; background: #FFFFFF !important; border: 1px solid var(--bargchi-border) !important; border-radius: 13px !important; box-shadow: none !important; } .bargchi-benefit-item { flex: none !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; min-width: 0 !important; min-height: 62px !important; height: auto !important; margin: 0 !important; padding: 9px 8px !important; border: 0 !important; color: var(--bargchi-text-main) !important; text-align: right !important; } .bargchi-benefit-item::after, .bargchi-benefit-item:not(:last-child)::after { display: none !important; content: none !important; } .bargchi-benefit-item:nth-child(odd) { border-left: 1px solid var(--bargchi-border-soft) !important; } .bargchi-benefit-item:nth-child(-n+2) { border-bottom: 1px solid var(--bargchi-border-soft) !important; } .bargchi-benefit-icon { flex: 0 0 25px !important; width: 25px !important; height: 25px !important; margin: 0 !important; color: #5D7590 !important; } .bargchi-benefit-icon svg { width: 22px !important; height: 22px !important; stroke-width: 1.65 !important; } .bargchi-benefit-title { display: block !important; min-width: 0 !important; margin: 0 !important; color: var(--bargchi-text-main) !important; font-size: 12.5px !important; font-weight: 750 !important; line-height: 1.65 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: break-word; } /* --------------------------------------------------------- CONTENT TABS Equal-width tabs instead of a cramped horizontal strip. --------------------------------------------------------- */ .bargchi-product-content-tabs { margin: 24px 0 30px; border-radius: 13px; overflow: hidden; } .bargchi-tabs-navigation { display: flex !important; align-items: stretch; justify-content: stretch; width: 100%; min-height: 54px; padding: 0 !important; gap: 0 !important; overflow: visible !important; background: #FAFBFD; } .bargchi-tab-button { flex: 1 1 0 !important; min-width: 0 !important; min-height: 54px !important; gap: 4px !important; padding: 0 6px !important; font-size: 11.6px !important; font-weight: 750 !important; line-height: 1.35 !important; white-space: nowrap !important; } .bargchi-tab-button::after { right: 8px !important; left: 8px !important; height: 3px !important; } .bargchi-tab-count { min-width: 18px; height: 18px; padding: 0 5px; font-size: 9px; } .bargchi-tabs-content { padding: 16px 10px 18px !important; } /* --------------------------------------------------------- TECHNICAL SPECS --------------------------------------------------------- */ .bargchi-specifications-layout { grid-template-columns: 1fr; gap: 11px; } .bargchi-specification-group { border-radius: 11px; } .bargchi-specification-group-head { min-height: 48px; padding: 0 12px; } .bargchi-specification-group-title { font-size: 13.5px; } .bargchi-specification-row { grid-template-columns: minmax(98px, 38%) minmax(0, 1fr); min-height: 47px; } .bargchi-specification-name, .bargchi-specification-value { padding: 9px 10px; font-size: 12px; line-height: 1.8; } /* --------------------------------------------------------- REVIEWS SUMMARY Desktop's two-column summary overflows on 390px screens. Stack score and distribution vertically. --------------------------------------------------------- */ .bargchi-reviews-summary { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; gap: 18px !important; width: 100% !important; min-width: 0 !important; margin: 0 0 18px !important; padding: 18px 14px !important; overflow: hidden !important; border-radius: 13px !important; } .bargchi-reviews-score { width: 100%; min-width: 0; align-items: center !important; text-align: center !important; } .bargchi-reviews-score-main { justify-content: center; gap: 5px; } .bargchi-reviews-score-number { font-size: 31px; line-height: 1.2; } .bargchi-reviews-score-max { font-size: 11.5px; } .bargchi-reviews-score-stars { justify-content: center; margin-top: 7px; gap: 2px; } .bargchi-review-star { width: 18px; height: 18px; font-size: 17px; line-height: 18px; } .bargchi-reviews-score-count { margin-top: 7px; font-size: 11.5px; line-height: 1.8; } .bargchi-reviews-distribution { width: 100%; min-width: 0; gap: 8px; padding-top: 15px; border-top: 1px solid var(--bargchi-border-soft); } .bargchi-rating-distribution-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) 26px; align-items: center; gap: 8px; min-height: 19px; width: 100%; direction: rtl; } .bargchi-rating-distribution-label { justify-content: flex-start; gap: 3px; font-size: 11px; direction: ltr; white-space: nowrap; } .bargchi-rating-distribution-star { font-size: 12px; } .bargchi-rating-distribution-track { width: 100%; height: 6px; } .bargchi-rating-distribution-count { font-size: 10.5px; text-align: left; white-space: nowrap; } .bargchi-reviews-content .woocommerce-noreviews { margin-bottom: 14px !important; padding: 12px 13px; border-radius: 10px; font-size: 12px; line-height: 1.9; } /* --------------------------------------------------------- RELATED PRODUCTS --------------------------------------------------------- */ .bargchi-related-products { margin: 30px 0 12px; } .bargchi-related-products-head { margin-bottom: 15px; } .bargchi-related-products-title { font-size: 18px; } .bargchi-related-card-title { font-size: 12.8px; line-height: 1.85; } .bargchi-related-price { font-size: 15.5px; } .bargchi-related-cta { min-height: 40px; font-size: 12px; } } @media (max-width: 420px) { .bargchi-product-container { width: calc(100% - 20px); } .bargchi-product-title { font-size: 19px; } .bargchi-gallery-stage { height: clamp(275px, 78vw, 310px); } .bargchi-benefit-item { min-height: 60px !important; padding: 8px 7px !important; gap: 7px !important; } .bargchi-benefit-title { font-size: 11.7px !important; } .bargchi-tab-button { padding-inline: 4px !important; font-size: 11px !important; } .bargchi-tab-count { min-width: 17px; height: 17px; padding-inline: 4px; font-size: 8.5px; } .bargchi-tabs-content { padding-inline: 9px !important; } .bargchi-reviews-summary { padding: 16px 12px !important; } .bargchi-rating-distribution-row { grid-template-columns: 34px minmax(0, 1fr) 23px; gap: 7px; } } /* ========================================================= BARGCHI FINAL DESKTOP + TABLET POLISH Added after mobile stabilization. Scope starts at 768px so the approved mobile layout stays intact. ========================================================= */ /* ========================================================= TABLET — 768px to 991px ========================================================= */ @media (min-width: 768px) and (max-width: 991px) { /* Page rhythm */ .bargchi-product-page { padding-top: 16px; padding-bottom: 64px; } .bargchi-product-container { width: min(calc(100% - 36px), 920px); } .bargchi-breadcrumb { margin-bottom: 18px; font-size: 12px; } /* Hero */ .bargchi-product-hero { grid-template-areas: "gallery" "summary"; grid-template-columns: minmax(0, 1fr); gap: 26px; } .bargchi-gallery-card, .bargchi-summary-card { width: 100%; max-width: 760px; margin-inline: auto !important; } .bargchi-product-gallery { grid-template-areas: "stage" "counter" "thumbs"; grid-template-columns: minmax(0, 1fr); gap: 0; } .bargchi-gallery-stage { width: 100%; height: clamp(430px, 63vw, 560px); min-height: 0; aspect-ratio: auto; } .bargchi-gallery-thumbnails { width: 100%; max-height: none; flex-direction: row; justify-content: flex-start; gap: 10px; margin-top: 10px; padding: 2px 2px 7px; overflow-x: auto; overflow-y: hidden; } .bargchi-product-page .bargchi-gallery-thumbnail { flex: 0 0 70px; width: 70px !important; height: 70px !important; min-width: 70px !important; min-height: 70px !important; } .bargchi-summary-card { padding-top: 0 !important; } .bargchi-product-brand { margin-bottom: 6px; font-size: 13px; } .bargchi-product-title { font-size: 26px; line-height: 1.65; } .bargchi-product-rating-row { margin-top: 11px; } /* Key features: 2x2 keeps long values readable on tablet */ .bargchi-key-features { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 20px; padding: 0; border-radius: 14px; } .bargchi-key-feature { min-height: 112px; padding: 15px 12px; } .bargchi-key-feature:nth-child(odd)::after { display: block !important; top: 12px; left: 0; height: calc(100% - 24px); } .bargchi-key-feature:nth-child(even)::after { display: none !important; } .bargchi-key-feature:nth-child(1), .bargchi-key-feature:nth-child(2) { border-bottom: 1px solid var(--bargchi-border-soft); } .bargchi-key-feature-name { font-size: 11.5px; } .bargchi-key-feature-value { font-size: 12.5px; line-height: 1.75; } /* Purchase box */ .bargchi-purchase-box { margin-top: 20px; padding: 20px; border-radius: 15px; } .bargchi-current-price { font-size: 25px; } .bargchi-shipping-text { font-size: 13px; white-space: normal; } .bargchi-add-to-cart-area form.cart, .bargchi-product-page .bargchi-add-to-cart-area .woocommerce-variation-add-to-cart.variations_button { gap: 10px; } /* Benefits */ .bargchi-product-benefits { margin-top: 26px; border-radius: 14px; } .bargchi-benefit-item { min-height: 66px; padding-inline: 12px; } .bargchi-benefit-title { font-size: 13px; } /* Tabs */ .bargchi-product-content-tabs { margin: 32px 0 42px; border-radius: 15px; } .bargchi-tabs-navigation { min-height: 60px; padding-inline: 8px; } .bargchi-tab-button { flex: 1 1 0; min-width: 0; min-height: 60px; padding-inline: 12px !important; font-size: 14px !important; } .bargchi-tab-button::after { right: 16px; left: 16px; } .bargchi-tabs-content { padding: 24px 20px 28px; } .bargchi-specifications-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } /* Review summary */ .bargchi-reviews-summary { grid-template-columns: minmax(210px, .8fr) minmax(0, 1.2fr); gap: 26px; padding: 22px; } /* Related products */ .bargchi-related-products { margin-top: 46px; } .bargchi-related-products-title { font-size: 22px; } .bargchi-related-track:has(> .bargchi-related-card:nth-child(3):last-child), .bargchi-related-track:has(> .bargchi-related-card:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bargchi-related-track:has(> .bargchi-related-card:nth-child(5)) { grid-auto-columns: calc((100% - 18px) / 2); } .bargchi-related-image-wrap { height: 225px; } } /* ========================================================= COMPACT DESKTOP — 992px to 1180px ========================================================= */ @media (min-width: 992px) and (max-width: 1180px) { .bargchi-product-container { width: min(calc(100% - 36px), var(--bargchi-container)); } .bargchi-product-hero { grid-template-columns: minmax(0, 1.04fr) minmax(360px, .96fr); gap: 28px; } .bargchi-gallery-stage { height: clamp(455px, 47vw, 510px); min-height: 0; } .bargchi-gallery-thumbnails { max-height: 510px; } .bargchi-product-title { font-size: 25px; line-height: 1.65; } /* Two-by-two prevents long specs from becoming tiny */ .bargchi-key-features { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; } .bargchi-key-feature { min-height: 102px; padding: 13px 10px; } .bargchi-key-feature:nth-child(odd)::after { display: block !important; top: 12px; left: 0; height: calc(100% - 24px); } .bargchi-key-feature:nth-child(even)::after { display: none !important; } .bargchi-key-feature:nth-child(1), .bargchi-key-feature:nth-child(2) { border-bottom: 1px solid var(--bargchi-border-soft); } .bargchi-key-feature-value { font-size: 12px; } .bargchi-purchase-box { padding: 17px; } .bargchi-current-price { font-size: 24px; } .bargchi-shipping-text { white-space: normal; font-size: 12.5px; } .bargchi-product-content-tabs { margin-top: 36px; } .bargchi-tabs-content { padding: 26px 24px 30px; } .bargchi-reviews-summary { gap: 30px; padding: 23px 24px; } .bargchi-related-track:has(> .bargchi-related-card:nth-child(5)) { grid-auto-columns: calc((100% - 36px) / 3); } } /* ========================================================= WIDE DESKTOP — 1181px+ ========================================================= */ @media (min-width: 1181px) { .bargchi-product-page { padding-top: 22px; padding-bottom: 76px; } .bargchi-product-hero { grid-template-columns: minmax(0, 1.1fr) minmax(390px, .9fr); gap: 42px; } .bargchi-gallery-stage { height: clamp(520px, 40vw, 570px); min-height: 0; } .bargchi-gallery-thumbnails { max-height: 570px; } .bargchi-summary-card { padding-top: 12px !important; } .bargchi-product-title { font-size: 30px; line-height: 1.65; } .bargchi-product-rating-row { margin-top: 12px; } .bargchi-key-features { margin-top: 22px; padding-block: 18px; border-radius: 14px; } .bargchi-key-feature { min-height: 92px; padding-inline: 11px; } .bargchi-key-feature-value { font-size: 12.5px; line-height: 1.7; } .bargchi-purchase-box { margin-top: 20px; padding: 20px; border-radius: 15px; } .bargchi-current-price { font-size: 27px; } .bargchi-product-page .bargchi-add-to-cart-area .single_add_to_cart_button { min-height: 50px; } /* Benefits */ .bargchi-product-benefits { margin-top: 30px; border-radius: 14px; } .bargchi-benefit-item { min-height: 70px; } /* Tabs */ .bargchi-product-content-tabs { margin: 38px 0 50px; border-radius: 16px; } .bargchi-tabs-navigation { min-height: 62px; } .bargchi-tab-button { min-height: 62px; } .bargchi-tabs-content { padding: 30px 28px 34px; } .bargchi-specifications-layout { gap: 16px; } .bargchi-reviews-summary { gap: 38px; padding: 25px 28px; } /* Related products */ .bargchi-related-products { margin-top: 54px; } .bargchi-related-products-head { margin-bottom: 22px; } .bargchi-related-image-wrap { height: 240px; } } /* ========================================================= DESKTOP / TABLET MICRO-POLISH ========================================================= */ @media (min-width: 768px) { /* Prevent long textual values from colliding with dividers */ .bargchi-key-feature-name, .bargchi-key-feature-value { overflow-wrap: anywhere; hyphens: auto; } /* More stable tab panels when content changes height */ .bargchi-tab-panel { width: 100%; min-width: 0; } /* Cleaner card rhythm */ .bargchi-specification-group, .bargchi-related-card, .bargchi-purchase-box, .bargchi-product-content-tabs { backface-visibility: hidden; } /* Keyboard focus stays visible without changing layout */ .bargchi-related-cta:focus-visible, .bargchi-related-card-title a:focus-visible { outline: 2px solid rgba(255, 90, 0, .28); outline-offset: 3px; } } /* ======================================================================== BARGCHI PRODUCT VIDEO V1 First key-feature card + click-to-load modal ======================================================================== */ /* * The video control intentionally reuses .bargchi-key-feature so its height, * spacing, divider and responsive behavior stay identical to the real * WooCommerce attribute cards. Only native