/* ========================================================= ALAIDEE PRODUCT MOBILE V2 - CLEAN MASTER Mobile only <= 767.98px 01 Gallery 02 Product identity / Meta / Feature chips 03 Price / Stock / Delivery 04 Qty / Add to Cart / Buy Now 05 Quantity pricing / RFQ 06 Secondary actions / Sales support Legacy experimental overrides removed. ========================================================= */ /* ========================================================= 01-04 PRODUCT INFO / PRICE / PURCHASE ========================================================= */ @media (max-width:767.98px){ /* ===================================================== 4. PRODUCT INFO CARD ===================================================== */ .main-product-top-row > .col-lg-7 > .product-card{ padding:10px 12px 11px !important; border-radius:15px !important; } /* ===================================================== 5. TITLE + BRAND ทำให้เป็น cluster เดียว ===================================================== */ .product-main-title{ display:flex !important; align-items:center !important; flex-wrap:wrap !important; gap:4px 7px !important; margin:0 0 4px !important; min-height:0 !important; } .product-main-title .mpn{ margin:0 !important; font-size:20px !important; line-height:1.05 !important; font-weight:800 !important; letter-spacing:-.4px !important; color:#102a72 !important; } .product-main-title .brand-inline{ padding:3px 7px !important; border-radius:10px !important; font-size:8px !important; line-height:1 !important; font-weight:700 !important; background:#eef3ff !important; color:#2855c7 !important; } /* ===================================================== 6. SKU + CATEGORY ดึงขึ้นมาติดกับ title ===================================================== */ .product-meta-bar{ display:flex !important; align-items:center !important; flex-wrap:wrap !important; gap:2px 11px !important; margin:0 0 5px !important; padding:0 !important; min-height:0 !important; font-size:10px !important; line-height:1.25 !important; } .product-meta-bar strong{ font-size:10px !important; font-weight:800 !important; color:#111827 !important; } /* ===================================================== 7. FEATURE CHIPS อยู่ติดกับ meta ไม่ลอยโดด ===================================================== */ .ala-mobile-feature-chips{ display:flex !important; align-items:center !important; width:100% !important; gap:4px !important; margin:0 0 7px !important; padding:0 !important; min-height:0 !important; overflow-x:auto !important; } .ala-mobile-feature-chip{ min-height:23px !important; padding:4px 7px !important; gap:4px !important; border-radius:12px !important; font-size:9px !important; line-height:1 !important; font-weight:600 !important; background:#f4f6fb !important; border:1px solid #e7ebf3 !important; color:#344563 !important; } .ala-mobile-feature-chip i{ font-size:10px !important; } /* ===================================================== 8. PRICE PANEL ไม่เปลี่ยนโครง เพียงเก็บ typography ให้เรียบร้อย ===================================================== */ .price-block{ margin:0 0 7px !important; } .price-summary-row > .price-left, .price-summary-row > .availability-pill{ min-height:88px !important; padding:8px 5px !important; } .price-vat{ font-size:10px !important; } .price-old-detail{ font-size:9px !important; } .price-main{ font-size:25px !important; } .availability-pill.stock span{ font-size:10px !important; } .availability-pill.stock strong{ font-size:21px !important; } .availability-pill.delivery span{ font-size:9px !important; line-height:1.1 !important; } .availability-pill.delivery strong{ max-width:105px !important; font-size:14px !important; line-height:1.12 !important; } /* ===================================================== 9. PURCHASE ROW รักษาขนาดที่กดง่าย ===================================================== */ .buy-row.mobile-3col{ grid-template-columns: 82px minmax(0,1fr) minmax(0,1fr) !important; gap:6px !important; } .buy-row.mobile-3col .qty-modern, .buy-row.mobile-3col .ala-btn-cart, .buy-row.mobile-3col .ala-btn-buy{ height:43px !important; } .buy-row.mobile-3col .ala-btn-cart, .buy-row.mobile-3col .ala-btn-buy{ font-size:11.5px !important; font-weight:800 !important; } /* Cart icon เดิมให้เห็นชัดขึ้น */ .buy-row.mobile-3col .ala-btn-cart .ala-icon{ display:inline-flex !important; align-items:center !important; justify-content:center !important; margin-right:3px !important; font-size:14px !important; } .buy-row.mobile-3col .ala-btn-buy .ala-icon{ margin-left:2px !important; font-size:12px !important; } } /* ========================================================= 05 QUANTITY PRICING / RFQ ========================================================= */ @media (max-width:767.98px){ /* ===================================================== QUANTITY PRICE ให้อยู่ติดกับ purchase flow แบบ distributor page ===================================================== */ .tier-box-new{ margin-top:8px !important; border:1px solid #e5e9ef !important; border-radius:12px !important; overflow:hidden !important; box-shadow:none !important; } .tier-box-new .tier-title{ padding:8px 10px !important; background:#fffbed !important; font-size:12px !important; font-weight:700 !important; text-align:center !important; } .tier-box-new table{ margin:0 !important; font-size:11px !important; } .tier-box-new th{ padding:7px 6px !important; font-size:10px !important; font-weight:700 !important; background:#fafbfc !important; } .tier-box-new td{ padding:7px 6px !important; font-size:11px !important; } /* ===================================================== RFQ / STOCK INQUIRY รักษา logic PHP เดิม เพียงทำให้ CTA กระชับใน Mobile ===================================================== */ .rfq-action-box{ margin:7px 0 9px !important; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; } .rfq-main-button{ width:100% !important; min-height:42px !important; border-radius:9px !important; font-size:13px !important; font-weight:700 !important; } .rfq-action-note{ margin-top:5px !important; font-size:10px !important; line-height:1.35 !important; text-align:center !important; } } /* ========================================================= PRODUCT MOBILE V2 PHASE 4 - SECONDARY ACTIONS + SALES SUPPORT MOBILE ONLY ========================================================= */ /* Desktop / tablet: new mobile block must never appear */ .ala-mobile-secondary{ display:none; } @media (max-width:767.98px){ /* ------------------------------------------------- ซ่อน Datasheet / RFQ ชุดเดิมที่อยู่ใต้รูป ------------------------------------------------- */ .main-product-top-row > .col-lg-5 .image-action-buttons{ display:none !important; } /* ------------------------------------------------- Mobile secondary area ------------------------------------------------- */ .ala-mobile-secondary{ display:block !important; margin:10px 0 12px !important; } /* DATASHEET / RFQ */ .ala-mobile-secondary-actions{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-bottom:8px; } .ala-mobile-secondary-btn{ min-width:0; min-height:40px; display:flex; align-items:center; justify-content:center; gap:6px; padding:7px 8px; background:#fff; border:1px solid #cfd6e2; border-radius:9px; color:#173477; font-size:12px; font-weight:600; line-height:1.2; text-decoration:none; box-shadow:none; } .ala-mobile-secondary-btn i{ flex:0 0 auto; font-size:15px; color:#173477; } /* ------------------------------------------------- SALES HELP ------------------------------------------------- */ .ala-mobile-sales-help{ width:100%; display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:8px; padding:8px 9px; background:#fffdf2; border:1px solid #eee4ad; border-radius:12px; } /* AVATAR */ .ala-mobile-sales-avatar-wrap{ width:42px; height:42px; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:50%; background:#fff; border:2px solid #f2c94c; } .ala-mobile-sales-avatar{ display:block; width:100%; height:100%; object-fit:cover; } /* TEXT */ .ala-mobile-sales-copy{ min-width:0; display:flex; flex-direction:column; gap:1px; } .ala-mobile-sales-copy strong{ display:block; margin:0; font-size:11px; line-height:1.3; font-weight:700; color:#15265d; } .ala-mobile-sales-copy span{ display:block; margin:0; font-size:9px; line-height:1.3; color:#667085; } /* LINE */ .ala-mobile-line-btn{ min-height:34px; display:flex; align-items:center; justify-content:center; gap:4px; padding:5px 9px; background:#20bd48; border:1px solid #18a83e; border-radius:18px; color:#fff !important; font-size:10px; font-weight:700; line-height:1; white-space:nowrap; text-decoration:none !important; } .ala-mobile-line-btn span{ display:inline-flex; align-items:center; justify-content:center; font-size:8px; font-weight:800; } } /* ========================================================= FINAL GALLERY ========================================================= */ /* ========================================================= ALAIDEE MASTER GALLERY CONTROLLER V1 FINAL AUTHORITY FOR MOBILE GALLERY TEST IMPORTANT: .product-image-area contains BOTH: - main image - thumbnail row Therefore the wrapper must NOT have a fixed height. ========================================================= */ @media (max-width:767.98px){ /* ===================================================== GALLERY CARD ===================================================== */ .main-product-top-row > .col-lg-5 > .product-card{ padding:8px 10px 8px !important; margin-bottom:8px !important; /* MASTER TARGET CARD PROPORTION */ aspect-ratio:2.12 / 1 !important; height:auto !important; min-height:0 !important; overflow:hidden !important; background:#fff !important; border:1px solid #edf0f4 !important; border-radius:16px !important; } /* ===================================================== IMAGE AREA Must contain image + thumbnails naturally ===================================================== */ .main-product-top-row > .col-lg-5 .product-image-area{ position:relative !important; width:100% !important; height:100% !important; min-height:0 !important; max-height:none !important; margin:0 !important; padding:0 !important; display:grid !important; grid-template-columns:100% !important; grid-template-rows:minmax(0, 1fr) 48px !important; align-items:center !important; justify-items:center !important; overflow:hidden !important; } /* ===================================================== MAIN PRODUCT IMAGE Universal rule: - portrait cannot become too tall - landscape cannot become too wide - preserve natural aspect ratio - NO scale() ===================================================== */ .main-product-top-row > .col-lg-5 #mainProductImage.main-product-image{ display:block !important; width:auto !important; height:auto !important; grid-row:1 !important; grid-column:1 !important; max-width:96% !important; max-height:96% !important; margin:0 auto !important; padding:0 !important; object-fit:contain !important; transform:none !important; transform-origin:center center !important; flex:0 0 auto !important; background:transparent !important; border:0 !important; border-radius:0 !important; } /* ===================================================== BADGES ===================================================== */ .main-product-top-row > .col-lg-5 .product-badge-wrap{ position:absolute !important; top:4px !important; left:0 !important; z-index:10 !important; } /* ===================================================== THUMBNAILS Separate natural row under main image ===================================================== */ .main-product-top-row > .col-lg-5 .thumb-row{ position:relative !important; grid-row:2 !important; grid-column:1 !important; width:100% !important; height:48px !important; min-height:48px !important; display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:center !important; gap:7px !important; margin:0 !important; padding:0 2px 1px !important; overflow-x:auto !important; overflow-y:hidden !important; background:transparent !important; z-index:3 !important; scrollbar-width:none !important; } .main-product-top-row > .col-lg-5 .thumb-row::-webkit-scrollbar{ display:none !important; } .main-product-top-row > .col-lg-5 .product-thumb{ display:block !important; flex:0 0 44px !important; width:44px !important; height:44px !important; margin:0 !important; padding:3px !important; object-fit:contain !important; background:#fff !important; border:1px solid #dfe4ec !important; border-radius:8px !important; transform:none !important; } /* first / current visual state */ .main-product-top-row > .col-lg-5 .product-thumb:first-child{ border:2px solid #315cff !important; padding:2px !important; } } /* ========================================================= ALAIDEE MOBILE MASTER PRODUCT FLOW V1 Master hierarchy: Title SKU / Category Feature chips Price / Stock / Delivery Purchase Sales card and short description are hidden from the mobile hero area only. ========================================================= */ @media (max-width:767.98px){ /* --------------------------------------------- Gallery Hide salesperson overlay on mobile. Do not touch gallery size/proportion. --------------------------------------------- */ .main-product-top-row > .col-lg-5 .sales-card{ display:none !important; } /* --------------------------------------------- Product hero Description will belong to the lower information section, not the purchase hero. --------------------------------------------- */ .product-info-card .product-short-desc{ display:none !important; } /* --------------------------------------------- Remove Bootstrap desktop spacing from information wrapper on mobile. --------------------------------------------- */ .product-info-card .product-info-wrap{ margin-bottom:0 !important; } /* --------------------------------------------- Tight Master spacing --------------------------------------------- */ .product-info-card .product-main-title{ margin-bottom:7px !important; } .product-info-card .product-meta-bar{ margin-bottom:8px !important; } .product-info-card .ala-mobile-feature-chips{ margin-bottom:10px !important; } .product-info-card .price-block{ margin-top:0 !important; margin-bottom:10px !important; } .product-info-card .product-action-wrap{ margin-top:0 !important; } } /* ========================================================= ALAIDEE MASTER GALLERY CONTROLS CSS V1 MOBILE ONLY Gallery dimensions remain untouched. ========================================================= */ @media (max-width:767.98px){ .product-image-area{ position:relative !important; } /* PREV / NEXT */ .ala-gallery-arrow{ position:absolute !important; top:42% !important; width:30px !important; height:30px !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:0 !important; border:1px solid #e1e5ec !important; border-radius:50% !important; background:rgba(255,255,255,.94) !important; color:#26344d !important; font-size:24px !important; line-height:1 !important; font-weight:400 !important; box-shadow:0 2px 8px rgba(20,35,70,.08) !important; z-index:8 !important; } .ala-gallery-prev{ left:7px !important; } .ala-gallery-next{ right:7px !important; } /* ZOOM */ .ala-gallery-zoom{ position:absolute !important; right:9px !important; bottom:55px !important; width:31px !important; height:31px !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:0 !important; border:1px solid #e1e5ec !important; border-radius:9px !important; background:rgba(255,255,255,.96) !important; color:#344563 !important; font-size:13px !important; box-shadow:0 2px 8px rgba(20,35,70,.08) !important; z-index:8 !important; } /* ACTIVE THUMB */ .product-image-area .product-thumb{ cursor:pointer !important; } .product-image-area .product-thumb.is-active{ border:2px solid #4d35ff !important; padding:2px !important; } /* FULLSCREEN ZOOM */ .ala-gallery-zoom-overlay{ position:fixed !important; inset:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:20px !important; background:rgba(255,255,255,.98) !important; z-index:99999 !important; } .ala-gallery-zoom-overlay img{ display:block !important; width:auto !important; height:auto !important; max-width:96vw !important; max-height:88vh !important; object-fit:contain !important; } .ala-gallery-zoom-close{ position:absolute !important; top:14px !important; right:14px !important; width:38px !important; height:38px !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:0 !important; border:1px solid #dfe3ea !important; border-radius:50% !important; background:#fff !important; color:#172033 !important; font-size:28px !important; line-height:1 !important; box-shadow:0 3px 12px rgba(20,35,70,.12) !important; } body.ala-gallery-zoom-open{ overflow:hidden !important; } } /* ========================================================= ALAIDEE MASTER VISUAL CLEANUP V2 MOBILE ONLY - hide gallery promo badges - remove yellow card top decoration - move zoom to lower-right - keep existing gallery proportion untouched ========================================================= */ @media (max-width:767.98px){ /* ===================================================== 1. GALLERY PROMO BADGES Hide visually only. Business logic remains untouched. ===================================================== */ .main-product-top-row > .col-lg-5 .product-badge-wrap{ display:none !important; } /* ===================================================== 2. REMOVE YELLOW TOP STRIP / DECORATION The Master uses a clean white card. Do not change card dimensions. ===================================================== */ .main-product-top-row > .col-lg-5 > .product-card, .main-product-top-row > .col-lg-7 > .product-card{ border-top-color:#edf0f4 !important; } .main-product-top-row > .col-lg-5 > .product-card::before, .main-product-top-row > .col-lg-5 > .product-card::after, .main-product-top-row > .col-lg-7 > .product-card::before, .main-product-top-row > .col-lg-7 > .product-card::after{ display:none !important; content:none !important; } /* ===================================================== 3. ZOOM Master position: lower-right of main image area, immediately above thumbnails. ===================================================== */ .ala-gallery-zoom{ position:absolute !important; top:auto !important; left:auto !important; right:10px !important; bottom:43px !important; width:auto !important; height:30px !important; min-width:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:5px !important; padding:0 10px !important; border:0 !important; border-radius:15px !important; background:rgba(70,78,96,.78) !important; color:#fff !important; font-size:10px !important; line-height:1 !important; font-weight:600 !important; box-shadow:none !important; z-index:8 !important; } .ala-gallery-zoom i{ font-size:11px !important; color:#fff !important; } .ala-gallery-zoom span{ display:inline !important; white-space:nowrap !important; } } /* ========================================================= ALAIDEE MASTER REAL BRAND LOGO CSS V1 MOBILE ONLY ========================================================= */ @media (max-width:767.98px){ .ala-gallery-brand-logo{ position:absolute !important; top:0 !important; right:3px !important; width:122px !important; height:50px !important; display:flex !important; align-items:center !important; justify-content:flex-end !important; margin:0 !important; padding:0 !important; background:rgba(255,255,255,.94) !important; border:0 !important; border-radius:6px !important; z-index:7 !important; pointer-events:none !important; } .ala-gallery-brand-logo img{ display:block !important; width:auto !important; height:auto !important; max-width:100% !important; max-height:100% !important; margin:0 !important; padding:0 !important; object-fit:contain !important; border:0 !important; background:transparent !important; } } /* ========================================================= ALAIDEE BRAND LOGO POSITION V3 Anchor to gallery card top-right ========================================================= */ @media (max-width:767.98px){ .main-product-top-row > .col-lg-5 > .product-card{ position:relative !important; } .main-product-top-row > .col-lg-5 .ala-gallery-brand-logo{ top:-6px !important; right:-7px !important; width:122px !important; height:50px !important; padding:0 !important; margin:0 !important; } } /* ========================================================= ALAIDEE PRICE PANEL MASTER V3 CSS MOBILE ONLY ========================================================= */ @media (max-width:767.98px){ /* ----- PANEL ----- */ .product-info-card .price-summary-row{ position:relative !important; grid-template-columns: 1.35fr 1fr 1.08fr !important; min-height:0 !important; margin:0 !important; border:1px solid #eadf9b !important; border-radius:15px !important; overflow:hidden !important; background:#fffdf2 !important; box-shadow:none !important; } .product-info-card .price-summary-row > .price-left, .product-info-card .price-summary-row > .availability-pill{ position:relative !important; min-height:82px !important; height:82px !important; padding:7px 5px !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; } /* ===================================================== PRICE ===================================================== */ .product-info-card .price-left{ background:#fffdf2 !important; } .ala-price-discount-badge{ position:absolute !important; top:6px !important; left:7px !important; min-width:42px !important; height:20px !important; padding:0 6px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:7px !important; background:#d9292f !important; color:#fff !important; font-size:10px !important; line-height:1 !important; font-weight:800 !important; white-space:nowrap !important; z-index:2 !important; } .product-info-card .price-vat{ margin:0 0 1px !important; font-size:10px !important; line-height:1.05 !important; font-weight:600 !important; color:#515766 !important; } .product-info-card .price-old-detail{ margin:0 0 2px !important; font-size:9px !important; line-height:1 !important; color:#8b8f99 !important; text-decoration:line-through !important; } .product-info-card .price-main{ margin:0 !important; font-size:25px !important; line-height:.98 !important; font-weight:800 !important; letter-spacing:-.7px !important; color:#2514b8 !important; } /* ถ้ามี badge ให้ VAT/ราคาไม่ชน badge */ .product-info-card .price-left:has(.ala-price-discount-badge) .price-vat{ margin-top:15px !important; } /* ===================================================== STOCK ===================================================== */ .product-info-card .availability-pill.stock{ background:#f1faf0 !important; color:#39842f !important; } .product-info-card .ala-stock-heading{ display:flex !important; align-items:center !important; justify-content:center !important; gap:5px !important; margin:0 0 4px !important; font-size:10px !important; line-height:1 !important; font-weight:600 !important; color:#438b3d !important; } .ala-stock-check{ width:15px !important; height:15px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; flex:0 0 15px !important; border-radius:50% !important; background:#4b9b42 !important; color:#fff !important; font-size:9px !important; line-height:1 !important; font-weight:800 !important; } .product-info-card .availability-pill.stock strong{ margin:0 0 5px !important; font-size:21px !important; line-height:1 !important; font-weight:800 !important; color:#438b2d !important; } .ala-stock-subline{ display:block !important; margin:0 !important; font-size:9px !important; line-height:1 !important; font-weight:600 !important; color:#3d4654 !important; } /* ===================================================== DELIVERY ===================================================== */ .product-info-card .availability-pill.delivery{ background:#fff9e8 !important; } .product-info-card .availability-pill.delivery > span{ margin:0 0 3px !important; font-size:9px !important; line-height:1.1 !important; font-weight:600 !important; color:#4d5360 !important; white-space:nowrap !important; } .product-info-card .availability-pill.delivery > strong{ max-width:105px !important; margin:0 !important; font-size:14px !important; line-height:1.08 !important; font-weight:800 !important; color:#d26324 !important; text-align:center !important; } /* ----- DIVIDERS ----- */ .product-info-card .price-summary-row > *{ border-right:1px solid #ebe7d6 !important; } .product-info-card .price-summary-row > *:last-child{ border-right:0 !important; } } /* ========================================================= ALAIDEE MODERN STOCK BOX ICON V1 ========================================================= */ @media (max-width:767.98px){ .ala-stock-subline{ display:flex !important; align-items:center !important; justify-content:center !important; gap:5px !important; } .ala-stock-box-icon{ width:18px !important; height:18px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; flex:0 0 18px !important; border-radius:5px !important; background:#fff7cf !important; border:1px solid #f0d85a !important; color:#b88700 !important; } .ala-stock-box-icon i{ font-size:9px !important; line-height:1 !important; } .ala-stock-subline > span:last-child{ font-size:9px !important; line-height:1 !important; font-weight:600 !important; color:#3d4654 !important; } } /* ========================================================= ALAIDEE DELIVERY PANEL MASTER V1 ========================================================= */ @media (max-width:767.98px){ .product-info-card .availability-pill.delivery{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; padding:7px 5px !important; background:#fff9e8 !important; } .product-info-card .availability-pill.delivery > .ala-delivery-heading{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; gap:5px !important; margin:0 0 5px !important; font-size:10px !important; line-height:1 !important; font-weight:600 !important; color:#4d5360 !important; white-space:nowrap !important; } .ala-delivery-truck{ display:inline-block !important; font-size:12px !important; line-height:1 !important; } .ala-delivery-info{ display:inline-flex !important; margin-left:3px !important; font-size:11px !important; line-height:1 !important; color:#69717e !important; } .product-info-card .availability-pill.delivery > strong{ max-width:120px !important; margin:0 !important; font-size:17px !important; line-height:1.05 !important; font-weight:800 !important; letter-spacing:-.2px !important; text-align:center !important; color:#d26324 !important; } } /* ========================================================= ALAIDEE PRODUCT HEADER MASTER SIZE V3 Match master visual proportions ========================================================= */ @media (max-width:767.98px){ /* ---------- PRODUCT TITLE ROW ---------- */ .product-info-card .product-main-title{ display:flex !important; align-items:center !important; flex-wrap:wrap !important; gap:5px 9px !important; margin:0 0 7px !important; padding:0 !important; } .product-info-card .product-main-title .mpn{ margin:0 !important; font-size:23px !important; line-height:1 !important; font-weight:800 !important; letter-spacing:-.5px !important; color:#0e155e !important; } /* ---------- BRAND PILL ---------- */ .product-info-card .product-main-title .brand-inline{ padding:5px 11px !important; border-radius:14px !important; background:#edf0ff !important; color:#354ee4 !important; font-size:9px !important; line-height:1 !important; font-weight:700 !important; white-space:nowrap !important; } /* ---------- SKU / CATEGORY ---------- */ .product-info-card .product-meta-bar{ display:flex !important; align-items:center !important; flex-wrap:wrap !important; gap:4px 14px !important; margin:0 0 9px !important; padding:0 !important; font-size:12px !important; line-height:1.2 !important; color:#596174 !important; } .product-info-card .product-meta-bar strong{ font-size:12px !important; line-height:1.2 !important; font-weight:800 !important; color:#394056 !important; } /* ---------- FEATURE ROW ---------- */ .product-info-card .ala-mobile-feature-chips{ display:flex !important; align-items:center !important; gap:7px !important; width:100% !important; margin:0 0 10px !important; padding:0 !important; overflow-x:auto !important; scrollbar-width:none !important; } .product-info-card .ala-mobile-feature-chips::-webkit-scrollbar{ display:none !important; } .product-info-card .ala-mobile-feature-chip{ min-height:32px !important; padding:6px 11px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; flex:0 0 auto !important; border:0 !important; border-radius:17px !important; background:#f1f3f8 !important; font-size:11px !important; line-height:1 !important; font-weight:600 !important; color:#34415d !important; white-space:nowrap !important; } .product-info-card .ala-mobile-feature-chip i{ font-size:12px !important; } } /* ========================================================= ALAIDEE PRODUCT MASTER MATCH V4 Reference: approved master screenshot Mobile only ========================================================= */ @media (max-width:767.98px){ /* ===================================================== 01. RIGHT PRODUCT CARD ===================================================== */ .main-product-top-row > .col-lg-7 > .product-card{ padding:10px 12px 10px !important; border-radius:16px !important; } .product-info-card .product-info-wrap{ gap:0 !important; margin:0 !important; padding:0 !important; } /* ===================================================== 02. MODEL + BRAND ROW ===================================================== */ .product-info-card .product-main-title{ display:flex !important; align-items:center !important; flex-wrap:nowrap !important; gap:8px !important; margin:0 0 6px !important; padding:0 !important; min-height:0 !important; } .product-info-card .product-main-title .mpn{ flex:0 1 auto !important; margin:0 !important; font-size:21px !important; line-height:1 !important; font-weight:800 !important; letter-spacing:-.45px !important; color:#0d155f !important; white-space:nowrap !important; } .product-info-card .product-main-title .brand-inline{ flex:0 0 auto !important; margin:0 !important; padding:4px 9px !important; border:0 !important; border-radius:12px !important; background:#edf0ff !important; color:#3d50dc !important; font-size:8.5px !important; line-height:1 !important; font-weight:700 !important; white-space:nowrap !important; } /* ===================================================== 03. SKU / CATEGORY ===================================================== */ .product-info-card .product-meta-bar{ display:flex !important; align-items:center !important; flex-wrap:nowrap !important; gap:0 !important; margin:0 0 7px !important; padding:0 !important; min-height:0 !important; font-size:10px !important; line-height:1.15 !important; color:#596174 !important; white-space:nowrap !important; } .product-info-card .product-meta-bar strong{ margin:0 4px 0 0 !important; font-size:10px !important; line-height:1.15 !important; font-weight:800 !important; color:#3b4256 !important; } .product-info-card .product-meta-bar > *{ margin-top:0 !important; margin-bottom:0 !important; } .product-info-card .product-meta-bar > * + *{ margin-left:11px !important; } /* ===================================================== 04. FEATURE CHIPS ROW ===================================================== */ .product-info-card .ala-mobile-feature-chips{ display:flex !important; align-items:center !important; width:100% !important; gap:5px !important; margin:0 0 8px !important; padding:0 !important; min-height:0 !important; overflow-x:auto !important; overflow-y:hidden !important; scrollbar-width:none !important; } .product-info-card .ala-mobile-feature-chips::-webkit-scrollbar{ display:none !important; } .product-info-card .ala-mobile-feature-chip{ flex:0 0 auto !important; min-height:26px !important; height:26px !important; margin:0 !important; padding:0 9px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:5px !important; border:0 !important; border-radius:14px !important; background:#f1f3f8 !important; color:#34415d !important; font-size:10px !important; line-height:1 !important; font-weight:600 !important; white-space:nowrap !important; } .product-info-card .ala-mobile-feature-chip i{ font-size:11px !important; line-height:1 !important; } /* ===================================================== 05. PRICE BLOCK OUTER SPACING ===================================================== */ .product-info-card .price-block{ margin:0 0 8px !important; padding:0 !important; } .product-info-card .price-summary-row{ grid-template-columns:1.35fr 1fr 1.08fr !important; min-height:0 !important; height:78px !important; margin:0 !important; border:1px solid #eadf9b !important; border-radius:14px !important; overflow:hidden !important; background:#fffdf2 !important; box-shadow:none !important; } .product-info-card .price-summary-row > .price-left, .product-info-card .price-summary-row > .availability-pill{ position:relative !important; min-height:78px !important; height:78px !important; margin:0 !important; padding:6px 4px !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; } /* ===================================================== 06. PRICE COLUMN ===================================================== */ .product-info-card .price-left{ background:#fffdf2 !important; } .product-info-card .ala-price-discount-badge{ top:6px !important; left:7px !important; min-width:40px !important; width:auto !important; height:19px !important; padding:0 6px !important; border-radius:7px !important; font-size:9.5px !important; line-height:1 !important; font-weight:800 !important; } .product-info-card .price-left:has(.ala-price-discount-badge) .price-vat{ margin-top:12px !important; } .product-info-card .price-vat{ margin-bottom:1px !important; font-size:9.5px !important; line-height:1 !important; font-weight:600 !important; color:#515766 !important; } .product-info-card .price-old-detail{ margin:0 0 2px !important; font-size:8.5px !important; line-height:1 !important; color:#8b8f99 !important; } .product-info-card .price-main{ margin:0 !important; font-size:23px !important; line-height:.95 !important; font-weight:800 !important; letter-spacing:-.6px !important; color:#2514b8 !important; } /* ===================================================== 07. STOCK COLUMN ===================================================== */ .product-info-card .availability-pill.stock{ background:#f1faf0 !important; color:#39842f !important; } .product-info-card .ala-stock-heading{ display:flex !important; align-items:center !important; justify-content:center !important; gap:4px !important; margin:0 0 3px !important; font-size:9.5px !important; line-height:1 !important; font-weight:600 !important; color:#438b3d !important; } .product-info-card .ala-stock-check{ width:15px !important; height:15px !important; flex:0 0 15px !important; font-size:9px !important; line-height:1 !important; } .product-info-card .availability-pill.stock strong{ margin:0 0 4px !important; font-size:20px !important; line-height:.95 !important; font-weight:800 !important; color:#438b2d !important; } .product-info-card .ala-stock-subline{ display:flex !important; align-items:center !important; justify-content:center !important; gap:4px !important; margin:0 !important; font-size:8.5px !important; line-height:1 !important; font-weight:600 !important; color:#3d4654 !important; } .product-info-card .ala-stock-box-icon{ width:16px !important; height:16px !important; flex:0 0 16px !important; border-radius:5px !important; background:#fff7cf !important; border:1px solid #f0d85a !important; color:#b88700 !important; } .product-info-card .ala-stock-box-icon i{ font-size:8px !important; } /* ===================================================== 08. DELIVERY COLUMN ===================================================== */ .product-info-card .availability-pill.delivery{ padding:6px 4px !important; background:#fff9e8 !important; } .product-info-card .availability-pill.delivery > .ala-delivery-heading{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; gap:4px !important; margin:0 0 4px !important; font-size:9px !important; line-height:1 !important; font-weight:600 !important; color:#4d5360 !important; white-space:nowrap !important; } .product-info-card .ala-delivery-truck{ font-size:10px !important; line-height:1 !important; } .product-info-card .ala-delivery-info{ margin-left:3px !important; font-size:10px !important; line-height:1 !important; color:#69717e !important; } .product-info-card .availability-pill.delivery > strong{ max-width:105px !important; margin:0 !important; font-size:14px !important; line-height:1.05 !important; font-weight:800 !important; letter-spacing:-.15px !important; text-align:center !important; color:#d26324 !important; } /* ===================================================== 09. PANEL DIVIDERS ===================================================== */ .product-info-card .price-summary-row > *{ border-right:1px solid #ebe7d6 !important; } .product-info-card .price-summary-row > *:last-child{ border-right:0 !important; } } /* ========================================================= ALAIDEE PRICE PANEL EXACT MASTER V6 Reference-calibrated from master/current screenshots MOBILE ONLY ========================================================= */ @media (max-width:767.98px){ /* ===================================================== 01 PANEL GEOMETRY ===================================================== */ .product-info-card .price-block{ margin:0 0 8px !important; padding:0 !important; } .product-info-card .price-summary-row{ display:grid !important; grid-template-columns: 1.38fr 1fr 1.10fr !important; width:100% !important; height:78px !important; min-height:78px !important; margin:0 !important; padding:0 !important; overflow:hidden !important; border:1px solid #eadf9b !important; border-radius:14px !important; background:#fffdf2 !important; box-shadow:none !important; } /* ===================================================== 02 ALL THREE CELLS ===================================================== */ .product-info-card .price-summary-row > .price-left, .product-info-card .price-summary-row > .availability-pill{ position:relative !important; width:auto !important; height:78px !important; min-height:78px !important; margin:0 !important; padding:0 !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; box-sizing:border-box !important; } /* ===================================================== 03 DIVIDERS ===================================================== */ .product-info-card .price-summary-row > *{ border-top:0 !important; border-bottom:0 !important; border-left:0 !important; border-right:1px solid #ebe7d6 !important; } .product-info-card .price-summary-row > *:last-child{ border-right:0 !important; } /* ===================================================== 04 PRICE CELL BACKGROUND ===================================================== */ .product-info-card .price-left{ background:#fffdf2 !important; } /* ===================================================== 05 DISCOUNT BADGE ===================================================== */ .product-info-card .ala-price-discount-badge{ position:absolute !important; top:6px !important; left:7px !important; width:auto !important; min-width:42px !important; height:20px !important; min-height:20px !important; margin:0 !important; padding:0 7px !important; display:flex !important; align-items:center !important; justify-content:center !important; border:0 !important; border-radius:7px !important; background:#d9292f !important; color:#fff !important; font-size:10px !important; line-height:20px !important; font-weight:800 !important; letter-spacing:0 !important; white-space:nowrap !important; transform:none !important; } /* ===================================================== 06 VAT ===================================================== */ .product-info-card .price-vat, .product-info-card .price-left:has(.ala-price-discount-badge) .price-vat{ margin:8px 0 1px !important; padding:0 !important; font-size:9.5px !important; line-height:11px !important; font-weight:600 !important; color:#515766 !important; transform:none !important; } /* ===================================================== 07 OLD PRICE ===================================================== */ .product-info-card .price-old-detail{ margin:0 0 2px !important; padding:0 !important; font-size:8.5px !important; line-height:9px !important; font-weight:500 !important; color:#8b8f99 !important; text-decoration:line-through !important; transform:none !important; } /* ===================================================== 08 MAIN PRICE ===================================================== */ .product-info-card .price-main{ margin:0 !important; padding:0 !important; font-size:23px !important; line-height:23px !important; font-weight:800 !important; letter-spacing:-.65px !important; color:#2514b8 !important; transform:none !important; } /* ===================================================== 09 STOCK CELL ===================================================== */ .product-info-card .availability-pill.stock{ background:#f1faf0 !important; justify-content:center !important; transform:none !important; } /* ===================================================== 10 STOCK HEADING ===================================================== */ .product-info-card .ala-stock-heading{ display:flex !important; align-items:center !important; justify-content:center !important; gap:4px !important; height:15px !important; min-height:15px !important; margin:0 0 3px !important; padding:0 !important; font-size:9.5px !important; line-height:15px !important; font-weight:600 !important; color:#438b3d !important; transform:none !important; } /* ===================================================== 11 GREEN CHECK ===================================================== */ .product-info-card .ala-stock-check{ width:14px !important; height:14px !important; min-width:14px !important; min-height:14px !important; flex:0 0 14px !important; margin:0 !important; padding:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important; background:#4b9b42 !important; color:#fff !important; font-size:8px !important; line-height:14px !important; font-weight:800 !important; transform:none !important; } /* ===================================================== 12 STOCK NUMBER ===================================================== */ .product-info-card .availability-pill.stock strong{ display:block !important; margin:0 0 4px !important; padding:0 !important; font-size:20px !important; line-height:20px !important; font-weight:800 !important; letter-spacing:-.35px !important; color:#438b2d !important; transform:none !important; } /* ===================================================== 13 STOCK SUBLINE ===================================================== */ .product-info-card .ala-stock-subline{ display:flex !important; align-items:center !important; justify-content:center !important; gap:4px !important; height:15px !important; min-height:15px !important; margin:0 !important; padding:0 !important; font-size:8.5px !important; line-height:15px !important; font-weight:600 !important; color:#3d4654 !important; transform:none !important; } /* ===================================================== 14 STOCK BOX ICON ===================================================== */ .product-info-card .ala-stock-box-icon{ width:14px !important; height:14px !important; min-width:14px !important; min-height:14px !important; flex:0 0 14px !important; margin:0 !important; padding:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; border:1px solid #f0d85a !important; border-radius:4px !important; background:#fff7cf !important; color:#b88700 !important; transform:none !important; } .product-info-card .ala-stock-box-icon i{ margin:0 !important; padding:0 !important; font-size:7px !important; line-height:1 !important; } /* ===================================================== 15 DELIVERY CELL ===================================================== */ .product-info-card .availability-pill.delivery{ padding:0 !important; justify-content:center !important; background:#fff9e8 !important; transform:none !important; } /* ===================================================== 16 DELIVERY HEADING ===================================================== */ .product-info-card .availability-pill.delivery > .ala-delivery-heading{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; height:15px !important; min-height:15px !important; gap:4px !important; margin:0 0 5px !important; padding:0 !important; font-size:9px !important; line-height:15px !important; font-weight:600 !important; color:#4d5360 !important; white-space:nowrap !important; transform:none !important; } /* ===================================================== 17 DELIVERY TRUCK ===================================================== */ .product-info-card .ala-delivery-truck{ display:inline-flex !important; align-items:center !important; justify-content:center !important; margin:0 !important; padding:0 !important; font-size:10px !important; line-height:1 !important; transform:none !important; } /* ===================================================== 18 DELIVERY INFO ===================================================== */ .product-info-card .ala-delivery-info{ display:inline-flex !important; align-items:center !important; justify-content:center !important; margin:0 0 0 4px !important; padding:0 !important; font-size:9px !important; line-height:1 !important; color:#69717e !important; transform:none !important; } /* ===================================================== 19 DELIVERY MAIN TEXT ===================================================== */ .product-info-card .availability-pill.delivery > strong{ display:block !important; width:100% !important; max-width:102px !important; margin:0 auto !important; padding:0 !important; font-size:14px !important; line-height:15px !important; font-weight:800 !important; letter-spacing:-.15px !important; color:#d26324 !important; text-align:center !important; transform:none !important; } } /* ========================================================= ALAIDEE PRICE CELL MASTER ALIGN V7 Fix discount / VAT collision MOBILE ONLY ========================================================= */ @media (max-width:767.98px){ /* * PRICE CELL * Master: * [ ลด 5% ] รวม VAT แล้ว * ราคาเดิม * ฿ราคาปัจจุบัน */ .product-info-card .price-left{ position:relative !important; display:block !important; height:78px !important; min-height:78px !important; padding:0 !important; background:#fffdf2 !important; overflow:hidden !important; } /* ------------------------- DISCOUNT BADGE ------------------------- */ .product-info-card .ala-price-discount-badge{ position:absolute !important; top:6px !important; left:7px !important; width:auto !important; min-width:42px !important; height:20px !important; min-height:20px !important; margin:0 !important; padding:0 7px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:7px !important; font-size:10px !important; line-height:20px !important; font-weight:800 !important; z-index:2 !important; transform:none !important; } /* ------------------------- VAT อยู่ขวาของ badge ------------------------- */ .product-info-card .price-vat, .product-info-card .price-left:has(.ala-price-discount-badge) .price-vat{ position:absolute !important; top:9px !important; left:62px !important; right:5px !important; display:block !important; margin:0 !important; padding:0 !important; font-size:9.5px !important; line-height:11px !important; font-weight:600 !important; text-align:center !important; color:#515766 !important; white-space:nowrap !important; transform:none !important; } /* ------------------------- OLD PRICE ใต้ VAT ------------------------- */ .product-info-card .price-old-detail{ position:absolute !important; top:21px !important; left:62px !important; right:5px !important; display:block !important; margin:0 !important; padding:0 !important; font-size:8.5px !important; line-height:9px !important; font-weight:500 !important; text-align:center !important; color:#8b8f99 !important; text-decoration:line-through !important; white-space:nowrap !important; transform:none !important; } /* ------------------------- MAIN PRICE ------------------------- */ .product-info-card .price-main{ position:absolute !important; left:4px !important; right:4px !important; bottom:9px !important; display:block !important; margin:0 !important; padding:0 !important; font-size:23px !important; line-height:23px !important; font-weight:800 !important; letter-spacing:-.65px !important; text-align:center !important; color:#2514b8 !important; white-space:nowrap !important; transform:none !important; } } /* ========================================================= ALAIDEE PRICE PANEL SHARED BASELINE V8 VAT / STOCK / DELIVERY headings on exact same row MOBILE ONLY ========================================================= */ @media (max-width:767.98px){ /* ===================================================== SHARED HEADING LINE ทุกหัวอยู่ที่ Y เดียวกัน ===================================================== */ .product-info-card .price-vat, .product-info-card .price-left:has(.ala-price-discount-badge) .price-vat, .product-info-card .ala-stock-heading, .product-info-card .availability-pill.delivery > .ala-delivery-heading{ position:absolute !important; top:11px !important; bottom:auto !important; height:15px !important; min-height:15px !important; margin:0 !important; padding:0 !important; line-height:15px !important; transform:none !important; } /* ===================================================== PRICE HEADING badge อยู่ซ้าย จึงให้ VAT ใช้พื้นที่ด้านขวา ===================================================== */ .product-info-card .price-vat, .product-info-card .price-left:has(.ala-price-discount-badge) .price-vat{ left:62px !important; right:5px !important; display:block !important; font-size:9.5px !important; font-weight:600 !important; text-align:center !important; white-space:nowrap !important; } /* ราคาเดิมอยู่ใต้ VAT */ .product-info-card .price-old-detail{ position:absolute !important; top:25px !important; left:62px !important; right:5px !important; margin:0 !important; padding:0 !important; line-height:9px !important; text-align:center !important; } /* ราคาหลัก */ .product-info-card .price-main{ bottom:13px !important; } /* ===================================================== STOCK HEADING ===================================================== */ .product-info-card .ala-stock-heading{ left:0 !important; right:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:4px !important; font-size:9.5px !important; font-weight:600 !important; } /* 20 ชิ้น */ .product-info-card .availability-pill.stock strong{ position:absolute !important; top:30px !important; left:0 !important; right:0 !important; margin:0 !important; padding:0 !important; font-size:20px !important; line-height:20px !important; text-align:center !important; } /* ในสต๊อก */ .product-info-card .ala-stock-subline{ position:absolute !important; top:55px !important; left:0 !important; right:0 !important; height:15px !important; margin:0 !important; padding:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:4px !important; } /* ===================================================== DELIVERY HEADING ===================================================== */ .product-info-card .availability-pill.delivery > .ala-delivery-heading{ left:0 !important; right:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:4px !important; font-size:9px !important; font-weight:600 !important; white-space:nowrap !important; } /* สอบถามกำหนดส่ง */ .product-info-card .availability-pill.delivery > strong{ position:absolute !important; top:32px !important; left:4px !important; right:4px !important; width:auto !important; max-width:none !important; margin:0 !important; padding:0 !important; font-size:14px !important; line-height:15px !important; font-weight:800 !important; text-align:center !important; } } /* ========================================================= ALAIDEE PRICE NO-DISCOUNT AUTO CENTER V1 MOBILE ONLY ========================================================= */ @media (max-width:767.98px){ /* * ไม่มีส่วนลด * VAT + ราคาหลัก จัดกลางช่องราคา */ .product-info-card .price-left:not(:has(.ala-price-discount-badge)) .price-vat{ position:absolute !important; top:18px !important; left:4px !important; right:4px !important; width:auto !important; margin:0 !important; padding:0 !important; text-align:center !important; font-size:9.5px !important; line-height:15px !important; font-weight:600 !important; transform:none !important; } .product-info-card .price-left:not(:has(.ala-price-discount-badge)) .price-main{ position:absolute !important; top:38px !important; bottom:auto !important; left:4px !important; right:4px !important; width:auto !important; margin:0 !important; padding:0 !important; text-align:center !important; font-size:23px !important; line-height:23px !important; font-weight:800 !important; transform:none !important; } } /* ========================================================= ALAIDEE PRICE NO-DISCOUNT MASTER V2 Keep shared heading baseline MOBILE ONLY ========================================================= */ @media (max-width:767.98px){ /* ===================================================== NO DISCOUNT: VAT ต้องอยู่ baseline เดียวกับ พร้อมส่ง / ระยะเวลาจัดส่ง ===================================================== */ .product-info-card .price-left:not(:has(.ala-price-discount-badge)) .price-vat{ position:absolute !important; top:11px !important; bottom:auto !important; left:4px !important; right:4px !important; width:auto !important; height:15px !important; min-height:15px !important; margin:0 !important; padding:0 !important; display:block !important; font-size:9.5px !important; line-height:15px !important; font-weight:600 !important; text-align:center !important; color:#515766 !important; white-space:nowrap !important; transform:none !important; } /* ===================================================== NO DISCOUNT: ราคาปัจจุบันอยู่กลางพื้นที่ด้านล่าง ===================================================== */ .product-info-card .price-left:not(:has(.ala-price-discount-badge)) .price-main{ position:absolute !important; top:37px !important; bottom:auto !important; left:4px !important; right:4px !important; width:auto !important; margin:0 !important; padding:0 !important; display:block !important; font-size:23px !important; line-height:23px !important; font-weight:800 !important; letter-spacing:-.65px !important; text-align:center !important; color:#2514b8 !important; white-space:nowrap !important; transform:none !important; } } /* ========================================================= ALAIDEE DELIVERY INQUIRY FIXED LINES V1 Always: สอบถาม กำหนดส่ง ========================================================= */ @media (max-width:767.98px){ .product-info-card .availability-pill.delivery > strong.ala-delivery-inquiry{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:flex-start !important; white-space:nowrap !important; } .product-info-card .availability-pill.delivery > strong.ala-delivery-inquiry > span{ display:block !important; margin:0 !important; padding:0 !important; white-space:nowrap !important; } } /* ========================================================= ALAIDEE DELIVERY INQUIRY TYPOGRAPHY V2 Restore master color / size / weight Keep fixed 2-line layout ========================================================= */ @media (max-width:767.98px){ .product-info-card .availability-pill.delivery > strong.ala-delivery-inquiry{ position:absolute !important; top:32px !important; left:4px !important; right:4px !important; width:auto !important; max-width:none !important; margin:0 !important; padding:0 !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:flex-start !important; color:#d26324 !important; font-size:14px !important; line-height:15px !important; font-weight:800 !important; letter-spacing:-.15px !important; text-align:center !important; white-space:nowrap !important; transform:none !important; } .product-info-card .availability-pill.delivery > strong.ala-delivery-inquiry > span{ display:block !important; margin:0 !important; padding:0 !important; color:#d26324 !important; font-size:14px !important; line-height:15px !important; font-weight:800 !important; letter-spacing:-.15px !important; white-space:nowrap !important; } } /* ========================================================= ALAIDEE SMART FEATURE CHIP COLORS V5 Semantic feature colors MOBILE ONLY ========================================================= */ @media (max-width:767.98px){ /* ----------------------------------------------------- COMMON CHIP ----------------------------------------------------- */ .product-info-card .ala-mobile-feature-chip{ min-height:25px !important; padding:4px 9px !important; display:inline-flex !important; align-items:center !important; gap:5px !important; border:0 !important; border-radius:14px !important; font-size:9.5px !important; line-height:1 !important; font-weight:600 !important; white-space:nowrap !important; box-shadow:none !important; } .product-info-card .ala-mobile-feature-chip i{ width:17px !important; height:17px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; flex:0 0 17px !important; border-radius:50% !important; font-size:9px !important; line-height:1 !important; } /* ----------------------------------------------------- CONNECTIVITY Bluetooth / Wireless / Network ----------------------------------------------------- */ .product-info-card .ala-feature-connectivity{ background:#eef1ff !important; color:#344fc6 !important; } .product-info-card .ala-feature-connectivity i{ background:#465ee8 !important; color:#fff !important; } /* ----------------------------------------------------- PROTECTION IP Rating / Protection ----------------------------------------------------- */ .product-info-card .ala-feature-protection{ background:#edf8ea !important; color:#4d8e40 !important; } .product-info-card .ala-feature-protection i{ background:#58a14a !important; color:#fff !important; } /* ----------------------------------------------------- POWER Battery / Capacity ----------------------------------------------------- */ .product-info-card .ala-feature-power{ background:#fff8df !important; color:#856d18 !important; } .product-info-card .ala-feature-power i{ background:#e5bb25 !important; color:#fff !important; } /* ----------------------------------------------------- DEFAULT / FUTURE FEATURE ----------------------------------------------------- */ .product-info-card .ala-feature-default{ background:#f3f4f7 !important; color:#3f4a60 !important; } .product-info-card .ala-feature-default i{ background:#697386 !important; color:#fff !important; } } /* ========================================================= ALAIDEE FEATURE CHIPS COMPACT V6 MOBILE ONLY ========================================================= */ @media (max-width:767.98px){ .product-info-card .ala-mobile-feature-chips{ gap:4px !important; margin-top:0 !important; margin-bottom:7px !important; min-height:0 !important; } .product-info-card .ala-mobile-feature-chip{ min-height:22px !important; height:22px !important; padding:2px 7px !important; gap:4px !important; border-radius:11px !important; font-size:9px !important; line-height:1 !important; font-weight:600 !important; } .product-info-card .ala-mobile-feature-chip i{ width:14px !important; height:14px !important; flex:0 0 14px !important; font-size:7.5px !important; } } /* ========================================================== ALAIDEE MOBILE BRAND LOGO SIZE -20% ========================================================== */ @media (max-width:767.98px){ .main-product-top-row > .col-lg-5 .ala-gallery-brand-logo{ width:98px !important; height:40px !important; } } /* ========================================================== ALAIDEE MOBILE BRAND LOGO FINAL TUNE -10% SIZE + MOVE UP ========================================================== */ @media (max-width:767.98px){ .main-product-top-row > .col-lg-5 .ala-gallery-brand-logo{ width:88px !important; height:36px !important; top:-9px !important; } } /* ALAIDEE MOBILE BRAND LOGO - MOVE LEFT 4PX */ @media (max-width:767.98px){ .main-product-top-row > .col-lg-5 .ala-gallery-brand-logo{ right:-3px !important; } } /* ALAIDEE MOBILE BRAND LOGO - MOVE LEFT ANOTHER 4PX */ @media (max-width:767.98px){ .main-product-top-row > .col-lg-5 .ala-gallery-brand-logo{ right:1px !important; } } /* ========================================================== ALAIDEE MOBILE GALLERY - IMAGE CONTAIN SAFETY V1 Keep current gallery/card proportions. Prevent unusually large product images from escaping card. ========================================================== */ @media (max-width:767.98px){ /* * Gallery itself must clip anything that tries * to escape the existing card boundary. */ .main-product-top-row > .col-lg-5 > .product-card{ overflow:hidden !important; } /* * Main image: * - never wider than available gallery * - never distort * - keep entire product visible */ .product-image-area > #mainProductImage.main-product-image{ display:block !important; width:auto !important; height:auto !important; max-width:100% !important; object-fit:contain !important; object-position:center center !important; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box !important; } /* * Extra protection against intrinsic image dimensions. */ .product-image-area{ max-width:100% !important; overflow:hidden !important; box-sizing:border-box !important; } } /* ========================================================== ALAIDEE MOBILE GALLERY - MAIN IMAGE HEIGHT SAFETY V1 Purpose: - prevent tall product images from clipping at top/bottom - keep current gallery card dimensions - keep thumbnail area unchanged - never crop product ========================================================== */ @media (max-width:767.98px){ /* * Main image only. * * Gallery card is intentionally compact. * Reserve vertical room for thumbnail + spacing. */ .product-image-area > #mainProductImage.main-product-image{ display:block !important; width:auto !important; height:auto !important; max-width:100% !important; /* * Main visual safety ceiling. * Prevent tall/square images from reaching * outside the usable gallery image area. */ max-height:250px !important; object-fit:contain !important; object-position:center center !important; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box !important; } /* * Do not allow intrinsic image dimensions * to paint outside the gallery. */ .product-image-area{ overflow:hidden !important; } } /* ========================================================== ALAIDEE MOBILE GALLERY - REAL CONTAIN FIX V1 Final authority: - card size unchanged - thumbnails unchanged - image always contained inside grid row 1 - no fixed px image height - no crop ========================================================== */ @media (max-width:767.98px){ /* * Critical: * height:100% must include the element's own box model. */ .main-product-top-row > .col-lg-5 .product-image-area{ width:100% !important; height:100% !important; min-width:0 !important; min-height:0 !important; box-sizing:border-box !important; display:grid !important; grid-template-columns: minmax(0,1fr) !important; grid-template-rows: minmax(0,1fr) 48px !important; align-items:center !important; justify-items:center !important; overflow:hidden !important; } /* * Main image belongs ONLY to row 1. * * Percentage max-height is now calculated against * the actual image row rather than using a guessed * fixed pixel ceiling. */ .main-product-top-row > .col-lg-5 #mainProductImage.main-product-image{ grid-column:1 !important; grid-row:1 !important; align-self:center !important; justify-self:center !important; display:block !important; width:auto !important; height:auto !important; max-width:94% !important; max-height:94% !important; margin:0 !important; padding:0 !important; object-fit:contain !important; object-position:center center !important; transform:none !important; box-sizing:border-box !important; } /* * Thumbnail row remains exactly in row 2. */ .main-product-top-row > .col-lg-5 .thumb-row{ grid-column:1 !important; grid-row:2 !important; align-self:center !important; height:48px !important; min-height:48px !important; margin:0 !important; } } /* ========================================================== ALAIDEE MOBILE GALLERY - MAIN IMAGE SCALE V1 MOBILE ONLY ========================================================== */ @media (max-width:767.98px){ .main-product-top-row > .col-lg-5 #mainProductImage.main-product-image{ transform:scale(.80) !important; transform-origin:center center !important; } } /* ========================================================== ALAIDEE MOBILE GALLERY - SOFT ACTIVE THUMBNAIL ========================================================== */ @media (max-width:767.98px){ .main-product-top-row > .col-lg-5 .product-image-area .product-thumb.is-active, .main-product-top-row > .col-lg-5 .product-image-area .product-thumb:first-child{ border:1px solid #8ea2d8 !important; padding:3px !important; box-shadow: 0 0 0 1px rgba(49,92,255,.05) !important; } }