/* ========================================================================== Used iPhone Store Single Product — Structural CSS Blocksy + WooCommerce ========================================================================== */ /* ========================================================================== 01. PRODUCT ROOT / VARIABLES ========================================================================== */ body.single-product { --used-product-max-width: 1240px; --used-product-gap: 30px; --used-surface: var(--theme-palette-color-8, #ffffff); --used-surface-muted: var(--theme-palette-color-7, #f8fafc); --used-border: var(--theme-palette-color-6, #e5e7eb); --used-text-main: var(--theme-text-color, #0f172a); --used-text-body: var(--theme-text-color, #334155); --used-text-muted: #64748b; --used-primary-blue: var(--theme-palette-color-1, #0284c7); --used-dark-blue: #0369a1; --used-success: #16a34a; --used-radius-sm: 10px; --used-radius-md: 16px; --used-radius-lg: 20px; --used-shadow-soft: 0 8px 30px rgba(15, 23, 42, 0.06); } /* ========================================================================== 02. PRODUCT ROOT ========================================================================== */ body.single-product .used-iphone-single-product { width: min( var(--used-product-max-width), calc(100% - 40px) ); max-width: var(--used-product-max-width); margin-inline: auto; min-width: 0; padding-block: 30px 60px; box-sizing: border-box; } /* ========================================================================== 03. MAIN PRODUCT LAYOUT ========================================================================== Desktop / Tablet: ┌──────────────────────┬────────────────────────┐ │ Primary Summary │ │ │ │ Gallery + Video │ ├──────────────────────┤ │ │ Secondary Modules │ │ │ │ │ └──────────────────────┴────────────────────────┘ Mobile: Primary Summary Gallery Video Secondary Modules IMPORTANT: The DOM order is: summary gallery secondary The Grid controls the desktop placement. ========================================================================== */ body.single-product .used-iphone-single-product .product-main-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: auto auto; grid-template-areas: "summary gallery" "secondary gallery"; column-gap: var(--used-product-gap); row-gap: 24px; width: 100%; max-width: 100%; margin: 0; padding: 0; direction: ltr; align-items: start; min-width: 0; box-sizing: border-box; } /* ========================================================================== 04. SUMMARY COLUMN ========================================================================== */ body.single-product .used-iphone-single-product .product-summary-column { grid-area: summary; width: 100%; max-width: 100%; min-width: 0; margin: 0; padding: 0; direction: rtl; text-align: right; box-sizing: border-box; } /* ========================================================================== 04.1 PRIMARY SUMMARY ========================================================================== */ body.single-product .used-iphone-single-product .product-summary-primary { width: 100%; max-width: 100%; min-width: 0; margin: 0; padding: 0; box-sizing: border-box; } /* ========================================================================== 04.2 SECONDARY PRODUCT INFORMATION ========================================================================== */ body.single-product .used-iphone-single-product .product-secondary-information { grid-area: secondary; width: 100%; max-width: 100%; min-width: 0; margin: 0; padding: 0; direction: rtl; text-align: right; box-sizing: border-box; } /* ========================================================================== 05. GALLERY COLUMN ========================================================================== */ body.single-product .used-iphone-single-product .product-gallery-column { grid-area: gallery; width: 100%; max-width: 100%; min-width: 0; margin: 0; padding: 0; direction: rtl; box-sizing: border-box; } /* ========================================================================== 06. BLOCKSY PRODUCT MEDIA WRAPPER ========================================================================== Blocksy may add: .product-entry-wrapper.is-width-constrained around the gallery. The media order is intentionally: 1. Gallery 2. Video 3. Trust / after-video content ========================================================================== */ body.single-product .used-iphone-single-product .product-gallery-column .product-entry-wrapper.is-width-constrained { display: flex; flex-direction: column; align-items: stretch; width: 100%; max-width: 100%; min-width: 0; margin: 0; padding: 0; box-sizing: border-box; } /* Direct media children */ body.single-product .used-iphone-single-product .product-gallery-column .product-entry-wrapper.is-width-constrained > .woocommerce-product-gallery, body.single-product .used-iphone-single-product .product-gallery-column .product-entry-wrapper.is-width-constrained > .used-product-video-slot { width: 100%; max-width: 100%; min-width: 0; flex: 0 0 auto; box-sizing: border-box; } /* Gallery first */ body.single-product .used-iphone-single-product .product-gallery-column .product-entry-wrapper.is-width-constrained > .woocommerce-product-gallery { order: 1; } /* Video second */ body.single-product .used-iphone-single-product .product-gallery-column .product-entry-wrapper.is-width-constrained > .used-product-video-slot { order: 2; } /* ========================================================================== 07. PRODUCT ENTRY SAFETY ========================================================================== */ body.single-product .product-entry-wrapper { width: 100%; max-width: 100%; min-width: 0; margin: 0; box-sizing: border-box; } body.single-product .product-entry-wrapper, body.single-product .product-entry-wrapper * { box-sizing: border-box; min-width: 0; } /* * Prevent legacy WooCommerce floats. */ body.single-product .product-entry-wrapper .summary.entry-summary { float: none; width: 100%; max-width: 100%; min-width: 0; margin: 0; box-sizing: border-box; } /* ========================================================================== 08. OUTER PRODUCT ARTICLE ========================================================================== */ body.single-product .ct-container-full { width: 100%; max-width: none; min-width: 0; box-sizing: border-box; } body.single-product .ct-container-full article.product { width: 100%; max-width: none; min-width: 0; margin-inline: 0; box-sizing: border-box; } /* ========================================================================== 09. BLOCKSY GALLERY ========================================================================== */ body.single-product .used-iphone-single-product .woocommerce-product-gallery { display: block; position: relative; float: none; width: 100%; max-width: 100%; min-width: 0; height: auto; margin: 0 0 30px; padding: 0; background: var(--used-surface); border: 1px solid var(--used-border); border-radius: var(--used-radius-md); box-shadow: var(--used-shadow-soft); overflow: hidden; box-sizing: border-box; } /* * Blocksy gallery internal container. */ body.single-product .used-iphone-single-product .ct-product-gallery-container { width: 100%; max-width: 100%; min-width: 0; margin: 0; padding: 20px; background: transparent; border: 0; box-shadow: none; box-sizing: border-box; } /* * Gallery images. */ body.single-product .used-iphone-single-product .woocommerce-product-gallery img { display: block; width: auto; max-width: 100%; height: auto; box-sizing: border-box; } /* * Flexy / Blocksy slider safety. */ body.single-product .used-iphone-single-product .woocommerce-product-gallery .flexy-container, body.single-product .used-iphone-single-product .woocommerce-product-gallery .flexy-items, body.single-product .used-iphone-single-product .woocommerce-product-gallery .flexy-view { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } /* ========================================================================== 10. GALLERY CONTROLS ========================================================================== */ body.single-product .used-iphone-single-product .woocommerce-product-gallery__trigger { z-index: 5; } body.single-product .used-iphone-single-product .flexy-pills { max-width: 100%; box-sizing: border-box; } /* ========================================================================== 11. SUMMARY ========================================================================== */ body.single-product .used-iphone-single-product .summary.entry-summary { width: 100%; max-width: 100%; min-width: 0; margin: 0; padding: 30px; float: none; direction: rtl; text-align: right; box-sizing: border-box; } /* * Prevent summary children from causing horizontal overflow. */ body.single-product .used-iphone-single-product .summary.entry-summary > * { width: auto; max-width: 100%; min-width: 0; box-sizing: border-box; } /* ========================================================================== 12. SUMMARY TYPOGRAPHY ========================================================================== */ body.single-product .used-iphone-single-product .summary.entry-summary .product_title { margin-top: 0; color: var(--used-text-main); overflow-wrap: anywhere; word-break: normal; } body.single-product .used-iphone-single-product .summary.entry-summary .price { direction: rtl; color: var(--used-text-main); overflow-wrap: anywhere; } body.single-product .used-iphone-single-product .summary.entry-summary .price ins { color: var(--used-primary-blue); text-decoration: none; } body.single-product .used-iphone-single-product .summary.entry-summary .price del { color: var(--used-text-muted); } body.single-product .used-iphone-single-product .summary.entry-summary .woocommerce-product-details__short-description { max-width: 100%; color: var(--used-text-body); line-height: 1.9; overflow-wrap: anywhere; } /* ========================================================================== 13. ADD TO CART ========================================================================== */ body.single-product .used-iphone-single-product .ct-product-add-to-cart { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } body.single-product .used-iphone-single-product .ct-product-add-to-cart .cart { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } body.single-product .used-iphone-single-product .ct-product-add-to-cart .quantity { max-width: 100%; } body.single-product .used-iphone-single-product .ct-product-add-to-cart .single_add_to_cart_button { min-height: 48px; border-radius: 12px; font-family: inherit; font-weight: 800; box-sizing: border-box; } /* ========================================================================== 14. PRODUCT META ========================================================================== */ body.single-product .used-iphone-single-product .product_meta { width: 100%; max-width: 100%; min-width: 0; overflow-wrap: anywhere; box-sizing: border-box; } /* ========================================================================== 15. ADDITIONAL INFORMATION ========================================================================== */ body.single-product .used-iphone-single-product .ct-product-additional-info { width: 100%; max-width: 100%; min-width: 0; margin-top: 20px; padding: 18px; background: var(--used-surface-muted); border: 1px solid var(--used-border); border-radius: var(--used-radius-md); box-sizing: border-box; } body.single-product .used-iphone-single-product .ct-product-additional-info ul { margin: 12px 0 0; padding: 0; list-style: none; } body.single-product .used-iphone-single-product .ct-product-additional-info li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 0; color: var(--used-text-body); line-height: 1.7; } body.single-product .used-iphone-single-product .ct-product-additional-info .ct-label { min-width: 0; overflow-wrap: anywhere; } /* ========================================================================== 16. PAYMENT METHODS ========================================================================== */ body.single-product .used-iphone-single-product .ct-payment-methods { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } /* ========================================================================== 17. INSPECTION CARD ========================================================================== */ .used-iphone-inspection-card { width: 100%; max-width: 100%; min-width: 0; margin: 20px 0; padding: 20px; overflow: hidden; background: linear-gradient( 145deg, #f8fafc 0%, #f0f9ff 100% ); border: 1px solid #e0f2fe; border-radius: var(--used-radius-lg); box-sizing: border-box; } .inspection-header { display: flex; align-items: center; gap: 12px; min-width: 0; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--used-border); } .inspection-header > div { min-width: 0; } .shield-icon { flex: 0 0 auto; font-size: 26px; line-height: 1; } .inspection-header h4 { margin: 0; color: var(--used-text-main); font-size: 15px; font-weight: 800; line-height: 1.5; overflow-wrap: anywhere; } .inspection-header p { margin: 2px 0 0; color: var(--used-text-muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; } .inspection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; min-width: 0; } .spec-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 10px 14px; background: #ffffff; border: 1px solid var(--used-border); border-radius: var(--used-radius-sm); box-sizing: border-box; } .spec-item.full-width { grid-column: 1 / -1; } .spec-label, .spec-value { min-width: 0; overflow-wrap: anywhere; font-size: 13px; line-height: 1.6; } .spec-label { color: var(--used-text-muted); } .spec-value { color: var(--used-text-main); font-weight: 700; } .highlight-grade { color: var(--used-primary-blue); } .highlight-battery { color: var(--used-success); } .ltr-text { display: inline-block; direction: ltr; unicode-bidi: isolate; } .guarantee-text { color: var(--used-primary-blue); font-size: 12px; } /* ========================================================================== 18. PRODUCT VIDEO ========================================================================== */ body.single-product .used-iphone-single-product .used-product-video-slot { display: block; position: relative; width: 100%; max-width: 100%; min-width: 0; height: auto; margin: 0; padding: 0; box-sizing: border-box; } body.single-product .used-iphone-single-product .used-product-video-slot .used-video-preview { display: block; position: relative; width: 100%; max-width: 100%; min-width: 0; height: auto; margin: 0 0 28px; padding: 22px; box-sizing: border-box; } /* * Legacy video wrapper. */ body.single-product .used-iphone-single-product .iphone-spotlight-video-wrapper { display: block; position: relative; width: 100%; max-width: 100%; min-width: 0; height: auto; box-sizing: border-box; } /* * Video / iframe. */ body.single-product .used-iphone-single-product .used-product-video-slot video, body.single-product .used-iphone-single-product .used-product-video-slot iframe { display: block; width: 100%; max-width: 100%; height: auto; box-sizing: border-box; } body.single-product .used-iphone-single-product .used-product-video-slot .btn-jump-to-video { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 100%; min-width: 0; margin-top: 12px; box-sizing: border-box; } /* ========================================================================== 19. TRUST BADGES ========================================================================== */ body.single-product .used-iphone-single-product .product-trust-badges { display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; width: 100%; max-width: 100%; min-width: 0; margin-top: 20px; box-sizing: border-box; } body.single-product .used-iphone-single-product .trust-pill { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 100%; min-width: 0; padding: 12px 16px; color: var(--used-text-body); background: var(--used-surface-muted); border: 1px solid var(--used-border); border-radius: 10px; font-size: 13px; font-weight: 600; box-sizing: border-box; } body.single-product .used-iphone-single-product .trust-pill .pill-icon { flex: 0 0 auto; font-size: 18px; line-height: 1; } /* ========================================================================== 20. PRODUCT TABS ========================================================================== */ body.single-product .woocommerce-tabs { width: min( var(--used-product-max-width), calc(100% - 40px) ); max-width: var(--used-product-max-width); min-width: 0; margin-inline: auto; box-sizing: border-box; } body.single-product .woocommerce-tabs .entry-content { min-width: 0; overflow-wrap: anywhere; } /* ========================================================================== 21. RELATED / UPSELLS ========================================================================== */ body.single-product .related, body.single-product .upsells { width: min( var(--used-product-max-width), calc(100% - 40px) ); max-width: var(--used-product-max-width); min-width: 0; margin-inline: auto; box-sizing: border-box; } body.single-product .related [data-products], body.single-product .upsells [data-products] { min-width: 0; box-sizing: border-box; } /* ========================================================================== 22. STICKY CART ========================================================================== */ .used-sticky-cart { position: fixed; z-index: 99990; right: 0; bottom: 18px; left: 0; display: block; padding: 0 20px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(20px); transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease; box-sizing: border-box; } .used-sticky-cart.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .used-sticky-cart__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 24px; width: min(1100px, 100%); min-height: 76px; margin: 0 auto; padding: 12px 16px 12px 12px; background: rgba(255, 255, 255, 0.94); border: 1px solid var(--used-border); border-radius: 18px; box-shadow: 0 12px 40px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.08); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-sizing: border-box; } .used-sticky-cart__product { min-width: 0; } .used-sticky-cart__label { display: block; margin-bottom: 2px; color: var(--used-text-muted); font-size: 11px; font-weight: 600; } .used-sticky-cart__name { display: block; overflow: hidden; color: var(--used-text-main); font-size: 14px; font-weight: 800; line-height: 1.6; text-overflow: ellipsis; white-space: nowrap; } .used-sticky-cart__price { direction: rtl; white-space: nowrap; color: var(--used-text-main); font-size: 18px; font-weight: 900; } .used-sticky-cart__price del { margin-inline-end: 7px; color: var(--used-text-muted); font-size: 12px; font-weight: 600; } .used-sticky-cart__price ins { color: var(--used-primary-blue); text-decoration: none; } .used-sticky-cart__action { flex: 0 0 auto; } .used-sticky-cart__button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 190px; min-height: 48px; padding: 10px 20px; color: #fff; background: var(--used-primary-blue); border: 0; border-radius: 12px; box-shadow: 0 5px 15px rgba(2, 132, 199, 0.22); font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; box-sizing: border-box; } .used-sticky-cart__button:hover { background: var(--used-dark-blue); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(2, 132, 199, 0.28); } .used-sticky-cart__button:active { transform: translateY(0); } .used-sticky-cart__button:disabled, .used-sticky-cart__button.is-disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; } .used-sticky-cart__button-icon { font-size: 16px; line-height: 1; } /* ========================================================================== 23. DESKTOP ========================================================================== */ @media (min-width: 1025px) { body.single-product .used-iphone-single-product { width: min( var(--used-product-max-width), calc(100% - 40px) ); max-width: var(--used-product-max-width); } /* * Desktop grid: * * column 1 = summary + secondary * column 2 = gallery * * Gallery spans both rows. */ body.single-product .used-iphone-single-product .product-main-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: auto auto; grid-template-areas: "summary gallery" "secondary gallery"; column-gap: var(--used-product-gap); row-gap: 24px; direction: ltr; align-items: start; } body.single-product .used-iphone-single-product .product-summary-column { grid-area: summary; } body.single-product .used-iphone-single-product .product-gallery-column { grid-area: gallery; } body.single-product .used-iphone-single-product .product-secondary-information { grid-area: secondary; } body.single-product .used-iphone-single-product .summary.entry-summary { padding: 30px; } } /* ========================================================================== 24. TABLET ========================================================================== */ @media (min-width: 768px) and (max-width: 1024px) { body.single-product .used-iphone-single-product { width: calc(100% - 32px); max-width: var(--used-product-max-width); } body.single-product .used-iphone-single-product .product-main-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: "summary gallery" "secondary gallery"; column-gap: 20px; row-gap: 20px; direction: ltr; align-items: start; } body.single-product .used-iphone-single-product .product-summary-column { grid-area: summary; } body.single-product .used-iphone-single-product .product-gallery-column { grid-area: gallery; } body.single-product .used-iphone-single-product .product-secondary-information { grid-area: secondary; } body.single-product .used-iphone-single-product .summary.entry-summary { padding: 24px; } body.single-product .used-iphone-single-product .ct-product-gallery-container { padding: 16px; } } /* ========================================================================== 25. MOBILE ========================================================================== */ @media (max-width: 767px) { body.single-product .used-iphone-single-product { width: calc(100% - 24px); max-width: none; margin-inline: auto; } /* * Mobile order: * * 1. Product title * 2. Rating * 3. Price * 4. Short description * 5. Add to cart * 6. Product meta * 7. Gallery * 8. Video * 9. Decision card * 10. Specs * 11. Daily Drop * 12. Purchase info * 13. Trade-in */ body.single-product .used-iphone-single-product .product-main-layout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "summary" "gallery" "secondary"; column-gap: 0; row-gap: 0; width: 100%; max-width: 100%; margin: 0; padding: 0; direction: rtl; align-items: start; } body.single-product .used-iphone-single-product .product-summary-column { grid-area: summary; width: 100%; max-width: 100%; min-width: 0; margin: 0; padding: 0; } body.single-product .used-iphone-single-product .product-gallery-column { grid-area: gallery; width: 100%; max-width: 100%; min-width: 0; margin: 0; padding: 0; } body.single-product .used-iphone-single-product .product-secondary-information { grid-area: secondary; width: 100%; max-width: 100%; min-width: 0; margin: 0; padding: 0; } /* * Gallery and video stay vertically stacked. */ body.single-product .used-iphone-single-product .product-gallery-column .product-entry-wrapper.is-width-constrained { display: flex; flex-direction: column; align-items: stretch; width: 100%; } body.single-product .used-iphone-single-product .product-gallery-column .product-entry-wrapper.is-width-constrained > .woocommerce-product-gallery { order: 1; } body.single-product .used-iphone-single-product .product-gallery-column .product-entry-wrapper.is-width-constrained > .used-product-video-slot { order: 2; } body.single-product .used-iphone-single-product .woocommerce-product-gallery { margin-bottom: 24px; } body.single-product .used-iphone-single-product .summary.entry-summary { width: 100%; max-width: 100%; margin: 0 0 30px; padding: 20px; } body.single-product .used-iphone-single-product .ct-product-gallery-container { padding: 14px; } .inspection-grid { grid-template-columns: minmax(0, 1fr); } .spec-item.full-width { grid-column: auto; } } /* ========================================================================== 26. SMALL MOBILE ========================================================================== */ @media (max-width: 480px) { body.single-product .used-iphone-single-product { width: calc(100% - 16px); } body.single-product .used-iphone-single-product .summary.entry-summary { padding: 16px; } body.single-product .used-iphone-single-product .ct-product-gallery-container { padding: 10px; } .spec-item { align-items: flex-start; flex-direction: column; gap: 4px; } .used-sticky-cart { bottom: 7px; padding: 0 7px; } .used-sticky-cart__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; min-height: 58px; padding: 7px; border-radius: 13px; } .used-sticky-cart__product { display: none; } .used-sticky-cart__price { min-width: 0; overflow: hidden; font-size: 14px; text-overflow: ellipsis; } .used-sticky-cart__button { min-width: 0; min-height: 44px; padding: 8px 12px; font-size: 12px; } .used-sticky-cart__button-icon { display: none; } } /* ========================================================================== 27. GLOBAL PRODUCT SAFETY ========================================================================== */ body.single-product .used-iphone-single-product img, body.single-product .used-iphone-single-product video, body.single-product .used-iphone-single-product iframe { max-width: 100%; box-sizing: border-box; } body.single-product .used-iphone-single-product table { max-width: 100%; overflow-wrap: anywhere; box-sizing: border-box; } body.single-product .used-iphone-single-product input, body.single-product .used-iphone-single-product select, body.single-product .used-iphone-single-product textarea, body.single-product .used-iphone-single-product button { max-width: 100%; font-family: inherit; box-sizing: border-box; } /* ========================================================================== 28. REDUCED MOTION ========================================================================== */ @media (prefers-reduced-motion: reduce) { .used-sticky-cart, .used-sticky-cart__button { transition: none; } } /* ========================================================================== 29. FINAL STRUCTURAL SAFETY ========================================================================== This section intentionally contains only structural protection. There are no additional grid-placement overrides here. The actual grid is defined once in section 03 and adjusted in sections 23–25. ========================================================================== */ body.single-product .used-iphone-single-product .product-main-layout > .product-summary-column, body.single-product .used-iphone-single-product .product-main-layout > .product-gallery-column, body.single-product .used-iphone-single-product .product-main-layout > .product-secondary-information { min-width: 0; max-width: 100%; box-sizing: border-box; } /* * Prevent children of the three main columns from creating a wider * grid track. */ body.single-product .used-iphone-single-product .product-summary-column > *, body.single-product .used-iphone-single-product .product-gallery-column > *, body.single-product .used-iphone-single-product .product-secondary-information > * { min-width: 0; max-width: 100%; box-sizing: border-box; } /* ========================================================================== Used iPhone Store — Product Summary Card Stable Spacing / Blocksy Override ========================================================================== */ /* -------------------------------------------------------------------------- Summary Column -------------------------------------------------------------------------- */ .used-iphone-single-product .product-summary-column { width: 100% !important; min-width: 0 !important; direction: rtl; box-sizing: border-box !important; } /* -------------------------------------------------------------------------- Main Card -------------------------------------------------------------------------- */ .used-iphone-single-product .product-summary-primary { position: relative; display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; padding: 38px 42px 36px !important; border: 1px solid #e2e8f0; border-radius: 22px; background: #ffffff; box-shadow: 0 8px 28px rgba(15, 23, 42, 0.055), 0 1px 3px rgba(15, 23, 42, 0.035); overflow: hidden; } /* نوار بالایی */ .used-iphone-single-product .product-summary-primary::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 3px; background: #0284c7; pointer-events: none; } /* -------------------------------------------------------------------------- Critical Inner Spacing Fix -------------------------------------------------------------------------- */ /* * جلوگیری از اعمال margin منفی، عرض اضافی یا position * توسط Blocksy روی عناصر داخلی کارت */ .used-iphone-single-product .product-summary-primary > * { position: static; width: auto; max-width: 100%; margin-right: 0 !important; margin-left: 0 !important; box-sizing: border-box !important; } /* عناصر اصلی باید تمام عرض فضای داخلی کارت را بگیرند */ .used-iphone-single-product .product-summary-primary .product_title, .used-iphone-single-product .product-summary-primary .woocommerce-product-rating, .used-iphone-single-product .product-summary-primary .price, .used-iphone-single-product .product-summary-primary .woocommerce-product-details__short-description, .used-iphone-single-product .product-summary-primary form.cart, .used-iphone-single-product .product-summary-primary .product_meta { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* -------------------------------------------------------------------------- Product Title -------------------------------------------------------------------------- */ .used-iphone-single-product .product-summary-primary .product_title { margin: 0 0 20px !important; padding: 0 !important; color: #0f172a !important; font-size: clamp(24px, 2vw, 32px) !important; font-weight: 800 !important; line-height: 1.55 !important; letter-spacing: -0.35px; overflow-wrap: anywhere; } /* -------------------------------------------------------------------------- Rating -------------------------------------------------------------------------- */ .used-iphone-single-product .product-summary-primary .woocommerce-product-rating { display: flex !important; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 24px !important; padding: 0 0 20px !important; border-bottom: 1px solid #e2e8f0; color: #64748b; font-size: 13px; line-height: 1.8; } .used-iphone-single-product .product-summary-primary .star-rating { margin: 0 !important; color: #f59e0b; font-size: 15px; } .used-iphone-single-product .product-summary-primary .woocommerce-review-link { color: #64748b !important; font-size: 13px; font-weight: 600; text-decoration: none; } /* -------------------------------------------------------------------------- Price Panel -------------------------------------------------------------------------- */ .used-iphone-single-product .product-summary-primary .price { display: flex !important; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 25px !important; padding: 18px 21px !important; border: 1px solid #dbeafe; border-radius: 16px; background: linear-gradient( 135deg, #f8fbff 0%, #eef6ff 100% ); color: #075985 !important; line-height: 1.8; } .used-iphone-single-product .product-summary-primary .price ins { order: 2; display: inline-flex; align-items: baseline; color: #075985 !important; font-size: clamp(24px, 2vw, 32px) !important; font-weight: 900 !important; line-height: 1.45; text-decoration: none !important; letter-spacing: -0.4px; } .used-iphone-single-product .product-summary-primary .price del { order: 1; display: inline-flex; align-items: center; position: relative; color: #64748b !important; font-size: 0.95rem; font-weight: 600; text-decoration: none !important; opacity: 1; } .used-iphone-single-product .product-summary-primary .price del::after { content: ""; position: absolute; right: -3px; left: -3px; top: 50%; height: 2px; background: #ef4444; border-radius: 999px; transform: rotate(-7deg); } .used-iphone-single-product .product-summary-primary .price .amount { color: inherit !important; font-weight: inherit !important; } .used-iphone-single-product .product-summary-primary .price .woocommerce-Price-currencySymbol { margin-right: 5px; color: #0369a1 !important; font-size: 0.72em !important; font-weight: 700; } /* -------------------------------------------------------------------------- Short Description -------------------------------------------------------------------------- */ .used-iphone-single-product .product-summary-primary .woocommerce-product-details__short-description { margin: 0 0 27px !important; padding: 19px 22px 19px 20px !important; border: 1px solid #e2e8f0; border-right: 3px solid #38bdf8; border-radius: 13px; background: #f8fafc; color: #475569 !important; font-size: 14px !important; font-weight: 400; line-height: 2.05 !important; overflow-wrap: anywhere; } .used-iphone-single-product .product-summary-primary .woocommerce-product-details__short-description p { margin: 0 0 10px !important; padding: 0 !important; } .used-iphone-single-product .product-summary-primary .woocommerce-product-details__short-description p:last-child { margin-bottom: 0 !important; } .used-iphone-single-product .product-summary-primary .woocommerce-product-details__short-description a { color: #0369a1 !important; text-decoration: underline; } /* -------------------------------------------------------------------------- Add to Cart -------------------------------------------------------------------------- */ .used-iphone-single-product .product-summary-primary form.cart { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 0 27px !important; padding: 0 !important; box-sizing: border-box !important; } /* wrapper افزودن به سبد */ .used-iphone-single-product .product-summary-primary form.cart .ct-cart-actions { display: flex !important; align-items: stretch !important; flex-wrap: nowrap !important; gap: 0 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* quantity مخفی نباید هیچ فضای فیزیکی داشته باشد */ .used-iphone-single-product .product-summary-primary form.cart .quantity.hidden { display: none !important; } /* دکمه */ .used-iphone-single-product .product-summary-primary form.cart .ct-cart-actions .single_add_to_cart_button { display: flex !important; align-items: center !important; justify-content: center !important; flex: 1 1 auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 68px !important; min-height: 68px !important; margin: 0 !important; padding: 18px 28px !important; box-sizing: border-box !important; border: 0 !important; border-radius: 16px !important; background: linear-gradient( 135deg, #0284c7 0%, #0369a1 100% ) !important; color: #ffffff !important; font-size: 1.12rem !important; font-weight: 800 !important; line-height: 1.4 !important; box-shadow: 0 8px 20px rgba(3, 105, 161, 0.22); transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease; } .used-iphone-single-product .product-summary-primary form.cart .ct-cart-actions .single_add_to_cart_button:hover { background: linear-gradient( 135deg, #0369a1 0%, #075985 100% ) !important; box-shadow: 0 11px 26px rgba(3, 105, 161, 0.3); transform: translateY(-2px); } .used-iphone-single-product .product-summary-primary form.cart .ct-cart-actions .single_add_to_cart_button:active { transform: translateY(0); } /* -------------------------------------------------------------------------- Product Meta -------------------------------------------------------------------------- */ .used-iphone-single-product .product-summary-primary .product_meta { display: flex !important; flex-direction: column; align-items: stretch; gap: 12px; margin: 0 !important; padding: 21px 0 0 !important; border-top: 1px solid #e2e8f0; color: #64748b !important; font-size: 13px; line-height: 1.9; } .used-iphone-single-product .product-summary-primary .product_meta > span { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px; min-width: 0; line-height: 1.9; } .used-iphone-single-product .product-summary-primary .product_meta .sku_wrapper::before, .used-iphone-single-product .product-summary-primary .product_meta .posted_in::before, .used-iphone-single-product .product-summary-primary .product_meta .tagged_as::before { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 24px; width: 24px; height: 24px; margin-left: 2px; border-radius: 7px; background: #e0f2fe; color: #0284c7; font-size: 11px; font-weight: 800; } .used-iphone-single-product .product-summary-primary .product_meta .sku_wrapper::before { content: "#"; } .used-iphone-single-product .product-summary-primary .product_meta .posted_in::before { content: "▦"; } .used-iphone-single-product .product-summary-primary .product_meta .tagged_as::before { content: "⌑"; } .used-iphone-single-product .product-summary-primary .product_meta .label { color: #475569 !important; font-weight: 800; } .used-iphone-single-product .product-summary-primary .product_meta a { color: #0284c7 !important; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; } .used-iphone-single-product .product-summary-primary .product_meta a:hover { color: #075985 !important; text-decoration: underline; } /* -------------------------------------------------------------------------- Sale Badge -------------------------------------------------------------------------- */ .used-iphone-single-product .product-summary-primary .onsale { top: 18px !important; right: 18px !important; left: auto !important; min-width: auto !important; min-height: auto !important; padding: 6px 11px !important; border-radius: 999px !important; background: #dc2626 !important; color: #ffffff !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1.5 !important; } /* -------------------------------------------------------------------------- Mobile -------------------------------------------------------------------------- */ @media (max-width: 767px) { .used-iphone-single-product .product-summary-primary { padding: 30px 25px 28px !important; border-radius: 19px; } .used-iphone-single-product .product-summary-primary .product_title { margin-bottom: 17px !important; font-size: 24px !important; line-height: 1.6 !important; } .used-iphone-single-product .product-summary-primary .woocommerce-product-rating { margin-bottom: 21px !important; padding-bottom: 17px !important; } .used-iphone-single-product .product-summary-primary .price { gap: 9px; margin-bottom: 22px !important; padding: 17px 18px !important; } .used-iphone-single-product .product-summary-primary .price ins { font-size: 1.35rem !important; } .used-iphone-single-product .product-summary-primary .price del { font-size: 0.86rem; } .used-iphone-single-product .product-summary-primary .woocommerce-product-details__short-description { margin-bottom: 23px !important; padding: 16px 18px 16px 16px !important; font-size: 13px !important; line-height: 2 !important; } .used-iphone-single-product .product-summary-primary form.cart { margin-bottom: 23px !important; } .used-iphone-single-product .product-summary-primary form.cart .ct-cart-actions .single_add_to_cart_button { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 62px !important; min-height: 62px !important; padding: 15px 18px !important; border-radius: 14px !important; font-size: 1rem !important; } .used-iphone-single-product .product-summary-primary .product_meta { gap: 10px; padding-top: 18px !important; font-size: 12px; } } /* -------------------------------------------------------------------------- Dark Mode -------------------------------------------------------------------------- */ [data-theme="dark"] .used-iphone-single-product .product-summary-primary, .dark-mode .used-iphone-single-product .product-summary-primary { border-color: #334155; background: #0f172a; } [data-theme="dark"] .used-iphone-single-product .product-summary-primary .product_title, .dark-mode .used-iphone-single-product .product-summary-primary .product_title { color: #f8fafc !important; } [data-theme="dark"] .used-iphone-single-product .product-summary-primary .woocommerce-product-rating, .dark-mode .used-iphone-single-product .product-summary-primary .woocommerce-product-rating { border-color: #334155; color: #cbd5e1; } [data-theme="dark"] .used-iphone-single-product .product-summary-primary .price { border-color: #334155; background: linear-gradient( 135deg, #172554 0%, #1e3a8a 100% ); } [data-theme="dark"] .used-iphone-single-product .product-summary-primary .price ins, [data-theme="dark"] .used-iphone-single-product .product-summary-primary .price .amount { color: #e0f2fe !important; } [data-theme="dark"] .used-iphone-single-product .product-summary-primary .price del { color: #cbd5e1 !important; } [data-theme="dark"] .used-iphone-single-product .product-summary-primary .price .woocommerce-Price-currencySymbol { color: #bae6fd !important; } [data-theme="dark"] .used-iphone-single-product .product-summary-primary .woocommerce-product-details__short-description, .dark-mode .used-iphone-single-product .product-summary-primary .woocommerce-product-details__short-description { border-color: #334155; background: #1e293b; color: #cbd5e1 !important; } [data-theme="dark"] .used-iphone-single-product .product-summary-primary .product_meta, .dark-mode .used-iphone-single-product .product-summary-primary .product_meta { border-color: #334155; color: #cbd5e1 !important; } [data-theme="dark"] .used-iphone-single-product .product-summary-primary .product_meta .label, .dark-mode .used-iphone-single-product .product-summary-primary .product_meta .label { color: #e2e8f0 !important; }