/* App product pages: square gallery, a 3px cumulative progress bar and event arrows. */ #productDetailView .product-detail-main-visual { aspect-ratio: 1; } #productDetailView #productDetailMainImage[hidden], #productDetailView #productDetailPager[hidden], #productDetailView #productDetailThumbs { display: none !important; } #productDetailView .product-detail-image-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 0; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab; direction: inherit; } #productDetailView .product-detail-image-rail::-webkit-scrollbar { display: none; } #productDetailView .product-detail-image-rail img { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; scroll-snap-align: start; user-select: none; -webkit-user-drag: none; } #productDetailView .product-detail-image-rail.is-product-dragging, #productDetailView .product-detail-image-rail.is-product-gliding { scroll-snap-type: none; scroll-behavior: auto; } #productDetailView .product-detail-image-rail.is-product-dragging { cursor: grabbing; } #productDetailView .product-detail-image-rail:focus-visible { outline: 2px solid #222; outline-offset: -3px; } #productDetailView .product-detail-image-progress { position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: #d9d9d9; pointer-events: none; z-index: 3; } #productDetailView .product-detail-image-progress::before { content: ''; display: block; height: 100%; width: var(--product-image-progress, 0%); background: #000; transition: width 250ms ease-out; } #productDetailView .product-detail-nav { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 80px; height: 80px; padding: 12px; border: 0; border-radius: 0; background: transparent; color: #4e4e4e; cursor: pointer; opacity: .625; z-index: 2; } #productDetailView .product-detail-nav::before { display: none; } #productDetailView .product-detail-nav.is-prev { left: auto; right: auto; inset-inline-start: -6px; } #productDetailView .product-detail-nav.is-next { left: auto; right: auto; inset-inline-end: -6px; } #productDetailView .product-detail-nav svg { display: block; width: 56px; height: 56px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: butt; stroke-linejoin: miter; } #productDetailView .product-detail-nav:hover { background: transparent; opacity: 1; } #productDetailView .product-detail-nav:disabled { opacity: .2; cursor: default; } #productDetailView .product-detail-nav:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; opacity: 1; } [dir='rtl'] #productDetailView .product-detail-nav svg { transform: scaleX(-1); } #productDetailView .product-detail-price { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 26px; font-weight: 600; } #productDetailView .product-detail-price-original { color: #999; font-size: 15px; font-weight: 500; } #productDetailView .product-detail-price-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; line-height: 1.2; } #productDetailView .product-detail-discount { color: #ff3b30; font-weight: 700; } #productDetailView .product-detail-benefits { margin-top: 16px; padding: 16px; background: #f7f7f7; font-size: 14px; line-height: 1.5; color: #222; } #productDetailView .product-detail-benefits[hidden] { display: none; } #productDetailView .product-detail-benefit-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; } #productDetailView .product-detail-benefit-price { font-size: 26px; font-weight: 700; } #productDetailView .product-detail-benefit-login { padding: 0; border: 0; background: transparent; color: #222; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: start; } #productDetailView .product-detail-benefit-breakdown > summary { width: fit-content; margin-top: 10px; cursor: pointer; font-size: 13px; } #productDetailView .product-detail-benefit-row, #productDetailView .product-detail-benefit-option { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; margin-top: 12px; text-align: start; overflow-wrap: anywhere; } #productDetailView .product-detail-benefit-option { padding: 12px; border: 1px solid #ddd; border-radius: 4px; background: #fff; color: #222; font: inherit; cursor: pointer; } #productDetailView .product-detail-benefit-option[aria-pressed='true'] { border-color: #222; outline: 1px solid #222; } #productDetailView .product-detail-benefit-option:disabled { color: #999; cursor: default; } #productDetailView .product-detail-benefit-max { margin-block: 16px 4px; padding: 9px 14px; border: 1px solid #222; border-radius: 4px; background: #222; color: #fff; font: inherit; cursor: pointer; } #productDetailView .product-detail-benefit-notice { margin: 12px 0 0; color: #777; font-size: 12px; line-height: 1.6; } #productDetailView .product-detail-shipping-text { font-size: 14px; font-weight: 500; color: #777; } /* Show the detail image cleanly up to the expand button. */ #productDetailView .product-detail-content.is-collapsed::after { content: none; display: none; } .product-detail-related-price .product-detail-discount { color: #ff3b30; margin-inline-end: 5px; } /* Match the home product rails while keeping the related grid in its existing layout. */ .product-detail-related-head { position: relative; } .product-detail-rail-arrow { position: absolute; z-index: 2; top: var(--related-arrow-top, 150px); transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 64px; padding: 0; border: 0; border-radius: 0; background: transparent; color: rgb(0 0 0 / 44%); cursor: pointer; } .product-detail-rail-arrow[hidden] { display: none; } .product-detail-rail-arrow[data-direction="-1"] { inset-inline-start: -40px; } .product-detail-rail-arrow[data-direction="1"] { inset-inline-end: -40px; } .product-detail-rail-arrow:hover { color: #555; } .product-detail-rail-arrow:focus-visible { outline: 2px solid #222; outline-offset: 3px; } .product-detail-rail-arrow .cast-rail-chevron { width: 16px; height: 32px; background: currentColor; opacity: .8; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 12'%3E%3Cpath d='M4.505 6 .582 2.077l.636-.636L5.778 6l-4.56 4.558-.636-.636L4.505 6Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 12'%3E%3Cpath d='M4.505 6 .582 2.077l.636-.636L5.778 6l-4.56 4.558-.636-.636L4.505 6Z'/%3E%3C/svg%3E") center / contain no-repeat; } .product-detail-rail-arrow[data-direction="-1"] .cast-rail-chevron { transform: scaleX(-1); } [dir="rtl"] .product-detail-rail-arrow .cast-rail-chevron { transform: scaleX(-1); } [dir="rtl"] .product-detail-rail-arrow[data-direction="-1"] .cast-rail-chevron { transform: none; } .product-grid.is-product-detail-related.is-mouse-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; } @media (min-width: 768px) and (max-width: 1399px) { .product-detail-rail-arrow[data-direction="-1"] { inset-inline-start: -24px; } .product-detail-rail-arrow[data-direction="1"] { inset-inline-end: -24px; } } @media (max-width: 767px) { .product-detail-rail-arrow { display: none; } } @media (max-width: 960px) { #productDetailView .product-detail-nav { display: none; } } @media (prefers-reduced-motion: reduce) { #productDetailView .product-detail-image-progress::before { transition: none; } } /* Continuous detail, review and inquiry sections with an opaque pinned menu. */ #productDetailView .product-detail-sections { grid-column: 1 / -1; min-width: 0; } #productDetailView .product-detail-tabs { position: sticky; top: var(--product-detail-header-height, 0px); z-index: 20; align-self: start; margin-top: 0; background: #fff; background-image: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } #productDetailView :is(.product-detail-panel-wrap, .product-detail-panel, .product-detail-review-box, .product-detail-inquiry-box) { background: #fff; background-image: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } #productDetailView :is(.product-detail-tabs, .product-detail-panel, .product-detail-content)::before, #productDetailView :is(.product-detail-tabs, .product-detail-panel, .product-detail-content)::after { content: none; display: none; } #productDetailView .product-detail-panel + .product-detail-panel { margin-top: 32px; padding-top: 24px; border-top: 8px solid #f5f5f5; } #productDetailView .product-detail-anchor-heading { margin: 0 0 20px; color: #222; font-size: 18px; font-weight: 700; } #productDetailView .product-detail-inline-tip { display: none; } /* Legacy controls must not blur product images or the content behind them. */ #productDetailView .product-detail-nav { backdrop-filter: none; -webkit-backdrop-filter: none; filter: none; } #productDetailView :is(.product-detail-topbar, .product-detail-bottom-bar) { background: #fff; background-image: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } body.theme-beclean.is-product-detail-open .topbar { background: #fff; background-image: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } /* Keep every section menu state solid; selection uses text and underline only. */ #productDetailView .product-detail-tabs, #productDetailView .product-detail-tab:is(button, :hover, :focus, :active, .is-active) { background: #fff; background-image: none; backdrop-filter: none; -webkit-backdrop-filter: none; filter: none; opacity: 1; box-shadow: none; } #productDetailView .product-detail-tab::before { content: none; display: none; } /* Product selection is a carrier preference; checkout confirms availability and the total. */ .product-detail-shipping-choice[hidden] { display: none; } .product-detail-shipping-choice { margin: 20px 0; } .product-detail-shipping-choice h4 { margin: 0 0 12px; font-size: 16px; } .product-carrier-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .product-carrier-card { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid #d0d0d0; border-radius: 4px; cursor: pointer; background: #fff; } .product-carrier-card.is-selected { border-color: #262626; box-shadow: inset 0 0 0 1px #262626; background: #f7f7f7; } .product-carrier-card input { width: 18px; height: 18px; flex: 0 0 18px; margin: 2px 0 0; accent-color: #262626; } .product-carrier-card > span { display: grid; min-width: 0; gap: 7px; overflow-wrap: anywhere; } .product-carrier-card strong { font-size: 16px; } .product-carrier-price { font-size: 14px; line-height: 1.4; } .product-carrier-tax { font-size: 12px; line-height: 1.5; color: #616161; } .product-carrier-card:focus-within { outline: 2px solid #5b5b5b; outline-offset: 2px; } @media (min-width: 768px) { #productDetailView .product-detail-copy { position: static; grid-row: auto; max-height: none; overflow: visible; } #productDetailView .product-detail-sections { width: min(100%, 900px); margin: 16px auto 0; } } @media (max-width: 480px) { .product-carrier-choices { grid-template-columns: 1fr; } } /* Desktop images pass input to the rail, like the event banner's drag surface. */ #productDetailView .product-detail-image-rail { user-select: none; -webkit-user-select: none; } @media (hover: hover) and (pointer: fine) { #productDetailView .product-detail-image-rail img { pointer-events: none; } } /* Purchase actions follow the estimated total on every screen size. */ #productDetailView .product-detail-bottom-bar { position: static !important; inset: auto !important; width: 100%; margin: 8px 0 0; padding: 12px 0 0; border: 0; } /* Keep the product gallery and purchase information balanced on wider screens. */ @media (min-width: 768px) { #productDetailView { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 56px); } #productDetailView .product-detail-copy { min-width: 0; gap: clamp(14px, 1.3vw, 20px); padding-top: 4px; } #productDetailView .product-detail-brand { font-size: 14px; letter-spacing: 0.04em; } #productDetailView .product-detail-title { min-width: 0; font-size: clamp(26px, 2.5vw, 34px); line-height: 1.3; overflow-wrap: anywhere; } #productDetailView .product-detail-price, #productDetailView .product-detail-benefit-price { font-size: clamp(27px, 2.3vw, 32px); } #productDetailView .product-detail-benefits { padding: 20px; font-size: 15px; } #productDetailView .product-detail-purchase-box { margin-top: 8px; padding: 20px 22px; } #productDetailView .product-detail-order-summary { gap: 14px; } #productDetailView .product-detail-order-summary-total { font-size: clamp(24px, 2vw, 28px); } #productDetailView .product-detail-bottom-btn { min-height: 58px; font-size: 16px; } } /* Reduce accumulated vertical spacing beside the square product image. */ @media (min-width: 768px) { #productDetailView .product-detail-copy { gap: 8px; padding-top: 0; } #productDetailView .product-detail-brand, #productDetailView .product-detail-title-row, #productDetailView .product-detail-price, #productDetailView .product-detail-benefits, #productDetailView .product-detail-purchase-box, #productDetailView .product-detail-order-summary, #productDetailView .shipping-destination-control--product { margin: 0; } #productDetailView .product-detail-title { font-size: clamp(22px, 1.8vw, 26px); line-height: 1.3; } #productDetailView .product-detail-price, #productDetailView .product-detail-benefit-price { font-size: clamp(24px, 1.9vw, 28px); } #productDetailView .product-detail-benefits { padding: 12px 16px; } #productDetailView .product-detail-shipping-row { padding: 10px 0; } #productDetailView .product-detail-purchase-box { padding: 8px 0; } #productDetailView .product-detail-order-summary { gap: 8px; } #productDetailView .product-detail-order-total-row { padding-top: 8px; } #productDetailView .product-detail-order-summary-total { font-size: 23px; } #productDetailView .product-detail-bottom-bar { margin: 0; padding: 4px 0 0; } #productDetailView .product-detail-bottom-btn { min-height: 52px; } } /* Align the purchase actions with the bottom of the product image when space allows. */ @media (min-width: 768px) { #productDetailView .product-detail-copy { align-self: stretch; justify-content: space-between; } }