/** * Coway PDP styles. * * Scoped under .coway-* so a theme's own product styles stay untouched. */ /* The theme sets overflow-x:hidden on only, but the browser's actual horizontal scrollbar is a property of (the root scrolling container) — hiding overflow on body alone stops content spilling out of body itself, not the page-level scrollbar. Anything wider than the viewport anywhere on the page (flexslider's gallery track runs at 200% of its own width by design, for instance) still shows up as a scrollable page unless html is covered too. */ html { overflow-x: hidden; } .coway-specs { --coway-blue: #1f7ae0; --coway-blue-dark: #14539b; --coway-amber: #e8931f; --coway-ink: #1b2733; --coway-muted: #9aa7b4; --coway-line: #e6ebf1; --coway-soft: #f5f8fb; max-width: 1180px; margin: 48px auto; padding: 0 20px; color: var(--coway-ink); font-size: 15px; line-height: 1.5; } /* ---------- block shell ---------- */ .coway-block { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: start; padding: 28px 0; border-bottom: 1px solid var(--coway-line); } .coway-block:last-child { border-bottom: 0; } /* Info tables carry no heading in the design, so they span both columns. */ .coway-block--nolabel { grid-template-columns: 1fr; } .coway-block__label { display: flex; align-items: center; gap: 10px; color: var(--coway-blue); font-weight: 700; } /* Sized here rather than in the file, so brand icons (44px viewBox) and the built-in fallbacks (24px) render at the same visual size. */ .coway-icon { width: 26px; height: 26px; flex: none; } .coway-tile__icon .coway-icon { width: 22px; height: 22px; } /* ---------- checklist ---------- */ .coway-checklist { display: grid; grid-template-columns: repeat(var(--coway-cols, 2), minmax(0, 1fr)); gap: 16px 32px; margin: 0; padding: 0; list-style: none; } .coway-checklist__item { display: flex; align-items: center; gap: 10px; color: var(--coway-ink); } .coway-checklist--centered .coway-checklist__item { flex-direction: column-reverse; gap: 12px; text-align: center; } .coway-check { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--coway-blue); color: #fff; } .coway-check svg { width: 14px; height: 14px; } .is-partial .coway-check { background: var(--coway-amber); } .is-off .coway-check { background: #dfe5ec; color: #fff; } .is-off .coway-checklist__label { color: var(--coway-muted); } .coway-checklist__star { color: var(--coway-amber); } .coway-checklist__detail { display: block; color: var(--coway-muted); font-size: 13px; } /* ---------- tiles ---------- */ .coway-tiles { display: grid; /* One row per block, as the design shows. auto-fit would wrap the 5th tile onto a second row at common widths. */ grid-template-columns: repeat(var(--coway-tile-count, 5), minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } .coway-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 12px; border: 1px solid var(--coway-line); border-radius: 12px; text-align: center; } .coway-tile.is-empty { background: var(--coway-soft); border-color: transparent; color: var(--coway-muted); } .coway-tile__icon { color: var(--coway-blue); } .coway-tile.is-empty .coway-tile__icon { color: var(--coway-muted); } .coway-tile__label { font-weight: 600; font-size: 14px; } .coway-tile__value { color: var(--coway-blue); font-size: 26px; font-weight: 700; line-height: 1.15; } .coway-tile.is-empty .coway-tile__value { color: var(--coway-muted); font-size: 14px; font-weight: 400; } .coway-tile__unit, .coway-tile__detail { color: var(--coway-muted); font-size: 12px; } /* ---------- table ---------- */ .coway-table { width: 100%; border-collapse: collapse; } .coway-table th, .coway-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--coway-line); font-weight: 400; } .coway-table th { width: 34%; color: #55636f; } .coway-table tr:nth-child(odd) { background: var(--coway-soft); } .coway-table__unit { color: var(--coway-muted); font-size: 13px; } /* ---------- spec table (grouped heading + several label/value items) ---------- */ .coway-spec-table__group { display: grid; grid-template-columns: 220px 1fr; gap: 8px 24px; padding: 20px 0; border-bottom: 1px solid var(--coway-line); } .coway-spec-table__group:last-child { border-bottom: 0; } .coway-spec-table__heading { font-weight: 600; color: var(--coway-ink); } .coway-spec-table__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; } .coway-spec-table__item-label { font-size: 14px; color: #55636f; } .coway-spec-table__item-value { font-size: 15px; color: var(--coway-ink); } .coway-spec-table__item-label + .coway-spec-table__item-value { margin-top: 2px; } @media (max-width: 640px) { .coway-spec-table__group { grid-template-columns: 1fr; gap: 8px; } .coway-spec-table__items { grid-template-columns: 1fr; } } /* ---------- hero ---------- */ .coway-hero { --coway-blue: #1f7ae0; --coway-cyan: #00a8e1; --coway-ink: #1b2733; --coway-muted: #9aa7b4; --coway-line: #e6ebf1; /* Shared page frame — hero, specs and related all line up on these. */ --coway-page: 1180px; --coway-gutter: 20px; max-width: var(--coway-page); margin: 0 auto; padding: 16px var(--coway-gutter) 0; color: var(--coway-ink); } .coway-hero__crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; color: var(--coway-muted); font-size: 14px; } .coway-hero__crumbs a { color: var(--coway-muted); text-decoration: none; } .coway-hero__crumbs a:hover { color: var(--coway-blue); } .coway-hero__crumbs [aria-current] { color: var(--coway-ink); } .coway-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; } .coway-hero__stage { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; border-radius: 16px; background: #fff; overflow: hidden; } .coway-hero__image { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .coway-hero__thumbs { display: flex; gap: 12px; justify-content: center; margin-top: 16px; } .coway-hero__thumb { width: 96px; height: 96px; padding: 6px; border: 1px solid transparent; border-radius: 10px; background: #fff; cursor: pointer; } .coway-hero__thumb.is-active { border-color: var(--coway-blue); } .coway-hero__thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .coway-hero__pill { display: inline-block; padding: 5px 16px; border-radius: 999px; background: #e6f6fd; color: var(--coway-cyan); font-size: 14px; font-weight: 600; text-decoration: none; transition: background 0.15s ease; } a.coway-hero__pill:hover, a.coway-hero__pill:focus { background: var(--coway-cyan); color: #fff; } .coway-hero__title { /* The theme's base stylesheet centres every

below 1024px (h1{text-align:center}); this element is an

, so without an explicit override here it inherits that centring instead of sitting flush left like the rest of the summary column. / text-align: left; margin: 12px 0 10px; font-size: 56px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; } .coway-herocolors { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; } .coway-herocolors-label { font-weight: 700; } .coway-herocolors-name { color: var(--coway-muted); font-size: 14px; } .coway-heroswatches { display: flex; gap: 10px; flex-basis: 100%; margin-top: 6px; } / ---------- colors ---------- / .coway-colors { display: flex; align-items: center; gap: 12px; margin: 16px 0; } .coway-colorslabel { color: #55636f; font-size: 14px; } .coway-colorslist { display: flex; gap: 8px; } .coway-swatch { padding: 3px; border: 2px solid transparent; border-radius: 50%; background: none; cursor: pointer; line-height: 0; } .coway-swatch.is-active { border-color: #1f7ae0; } .coway-swatchdot { display: block; width: 30px; height: 30px; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 50%; } .coway-colorscurrent { color: #55636f; font-size: 14px; } / ---------- price table ---------- / .coway-prices { margin: 0; font-size: 15px; } .coway-pricescaption { margin: 0 0 10px; text-align: center; font-size: 17px; } .coway-pricestabs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; } .coway-pricestab { padding: 7px 16px; border: 1px solid #d8e0e8; border-radius: 999px; background: #fff; color: #55636f; font-size: 14px; font-family: inherit; cursor: pointer; } .coway-pricestab:hover { border-color: #1f7ae0; color: #1f7ae0; } .coway-pricestab.is-active { border-color: #1f7ae0; background: #1f7ae0; color: #fff; font-weight: 600; } .coway-pricestable { width: 100%; border-collapse: collapse; } .coway-pricestable th, .coway-pricestable td { padding: 12px 10px; text-align: center; border-bottom: 1px solid #e6ebf1; vertical-align: middle; } / Vertical rules between the label and value columns, as in the design. / .coway-pricestable td { border-left: 1px solid #e6ebf1; } .coway-pricestable tbody th { width: 34%; text-align: left; font-weight: 400; } .coway-priceslabel { display: block; color: #1f7ae0; font-size: 21px; font-weight: 500; line-height: 1.25; } .coway-pricesnote { display: block; color: #55636f; font-size: 14px; } .coway-pricesamount { display: block; color: #1f7ae0; font-size: 26px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.2; } .coway-pricesperiod { display: block; color: #55636f; font-size: 14px; } .coway-pricesrow--full .coway-pricesamount { font-size: 30px; } .coway-pricesfootnote { margin: 8px 0 0; color: #9aa7b4; font-size: 12px; text-align: center; } .coway-pricescta { display: block; margin-top: 20px; padding: 15px 40px; border-radius: 8px; background: #1f7ae0; color: #fff; font-size: 20px; font-weight: 700; text-align: center; text-decoration: none; } .coway-pricescta:hover { background: #14539b; color: #fff; } / ---------- promo gallery ---------- / / Runs edge-to-edge like the reference design's banners — unlike the other sections here, these images are meant to fill the viewport width, not sit inside the shared content frame. / .coway-promo { display: flex; flex-direction: column; / Break out of the 1180px content frame its parent (.woocommerce div.product) applies, so these banners run the full viewport width the way they do in the reference design. --coway-vw (set in pdp.js from document.documentElement.clientWidth) stands in for 100vw here: the vw unit always includes the scrollbar gutter per spec, and on platforms where that gutter doesn't actually paint a scrollbar, the extra width showed up as a blank strip down the right edge. clientWidth is the true visible width, so the math below lands exact instead of short. The parent is centred with margin:auto inside , so its left edge sits at (vw - min(vw, 1180px)) / 2 from the viewport edge — pull left by exactly that to reach 0, then span the full width. / width: var(--coway-vw, 100vw); / The theme makes .woocommerce div.product a flex container (for the gallery/summary/specs/related layout), and a flex item's width is a sizing hint flexbox is free to shrink — flex-shrink: 0 is what makes it actually hold the full width instead of getting compressed to fit the row alongside its siblings. / flex-shrink: 0; margin-left: calc((min(var(--coway-vw, 100vw), 1180px) - var(--coway-vw, 100vw)) / 2 - 20px); } @media (max-width: 600px) { .coway-promo { margin-left: calc((min(var(--coway-vw, 100vw), 1180px) - var(--coway-vw, 100vw)) / 2 - 16px); } } .coway-promoitem { display: block; line-height: 0; } .coway-promoitem img { display: block; width: 100%; height: auto; } / ---------- related ---------- / .coway-related { max-width: 1180px; margin: 40px auto; padding: 0 20px; } .coway-relatedtitle { margin: 0 0 18px; font-size: 24px; font-weight: 700; text-align: center; } / ---------- product cards ---------- / .coway-cards { display: grid; / Keep the requested number of cards on one row even in a narrow theme container; minmax(260px,…) would wrap 3 cards below ~840px. The floor is 0 so columns may shrink instead of overflowing. / grid-template-columns: repeat(var(--coway-card-cols, 3), minmax(0, 1fr)); gap: 16px; / Centred in its section on desktop (.coway-related is wider than the 900px cap below, so without this the grid sits flush against the section's left edge instead of the middle). The mobile scroller further down switches this back to a left-aligned 0 so the row starts at the edge like a normal horizontal-scroll list. / margin: 24px auto; / A shortcode with only 1-2 cards gets 1-2 grid columns, which without a cap stretches each card to fill the row. The listing grid overrides this back to full width below, since it always fills its container at a fixed column count regardless of how many cards are on the page. / max-width: 900px; } .coway-card { display: flex; flex-direction: column; padding: 14px; border: 1px solid #e6ebf1; border-radius: 12px; background: #fff; transition: box-shadow 0.18s ease, transform 0.18s ease; } .coway-card:hover { box-shadow: 0 8px 24px rgba(20, 40, 70, 0.1); transform: translateY(-2px); } .coway-cardmedia { display: block; aspect-ratio: 1 / 1; margin-bottom: 14px; border-radius: 10px; background: #f5f8fb; overflow: hidden; } .coway-cardmedia img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .coway-cardtitle { margin: 0 0 2px; font-size: 17px; font-weight: 700; line-height: 1.3; } .coway-cardtitle a { color: #1f7ae0; text-decoration: none; } .coway-cardsubtitle { margin: 0 0 8px; color: #9aa7b4; font-size: 13px; } .coway-cardmeta { margin: 0 0 10px; color: #55636f; font-size: 13px; line-height: 1.45; } / Push the price/CTA to the bottom so cards of differing text length align. / .coway-cardfoot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; } .coway-cardprice { margin: 0; color: #1f7ae0; font-size: 16px; font-weight: 700; } .coway-cardprice--none { color: #9aa7b4; font-weight: 400; } .coway-cardper { font-size: 13px; font-weight: 400; } .coway-cardbadge { padding: 3px 12px; border-radius: 999px; background: #e8f6ed; color: #1f8a4c; font-size: 12px; white-space: nowrap; } .coway-cardcta { display: block; margin-top: 14px; padding: 11px 16px; border-radius: 8px; background: #4a9fe8; color: #fff; font-weight: 600; text-align: center; text-decoration: none; } .coway-cardcta:hover { background: #1f7ae0; color: #fff; } / ---------- summary panel on a stock Woo template ---------- / .coway-summary { --coway-blue: #1f7ae0; --coway-cyan: #00a8e1; --coway-ink: #1b2733; --coway-muted: #9aa7b4; --coway-line: #e6ebf1; color: var(--coway-ink); } / Product shots are transparent PNGs; a soft frosted panel behind them keeps white-on-white products visible without hiding their edges. / .woocommerce div.product div.images .woocommerce-product-galleryimage, .woocommerce div.product div.images .woocommerce-product-galleryimage a { position: relative; display: block; border-radius: 16px; overflow: hidden; } .woocommerce div.product div.images .woocommerce-product-galleryimage::before { content: ""; position: absolute; inset: 0; border-radius: 16px; background: radial-gradient(120% 90% at 50% 12%, rgba(255, 255, 255, 0.95) 0%, rgba(233, 242, 250, 0.85) 55%, rgba(214, 230, 244, 0.9) 100%); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); z-index: 0; } .woocommerce div.product div.images .woocommerce-product-galleryimage img { position: relative; z-index: 1; mix-blend-mode: multiply; } / Put the product header on the same frame as the spec table below it, so the breadcrumb, gallery and specs all share one left/right margin. / .woocommerce div.product, .woocommerce .woocommerce-breadcrumb, .rank-math-breadcrumb { box-sizing: border-box; width: 100%; max-width: 1180px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; } / The breadcrumb is a flex child of here, so auto margins would centre it on its own text width instead of filling the frame. / .single-product .rank-math-breadcrumb, .single-product .woocommerce-breadcrumb { align-self: center; } .woocommerce div.product div.images, .woocommerce div.product div.summary { margin-bottom: 24px; } / The frame is applied by the wrapper above, so nested sections must not add their own — otherwise they centre inside it and sit inset twice. / .woocommerce div.product .coway-specs, .woocommerce div.product .coway-related { width: 100%; max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } @media (max-width: 600px) { .woocommerce div.product, .woocommerce .woocommerce-breadcrumb, .rank-math-breadcrumb { padding-left: 16px; padding-right: 16px; } } / ---------- image lightbox (Elementor) ---------- The theme opens galleries in Elementor's lightbox, not WooCommerce's PhotoSwipe. Its default is a solid 80% black scrim, which makes a transparent product PNG look like it's floating in a void. / .elementor-lightbox { / Light frosted veil: the page stays faintly visible behind it, and white product shots don't glare against a black field. / background-color: rgba(232, 240, 248, 0.8) !important; backdrop-filter: blur(22px) saturate(1.05); -webkit-backdrop-filter: blur(22px) saturate(1.05); } / Frame the picture itself rather than the whole stage, so the panel hugs the product and leaves a wide margin to click on to dismiss. / .elementor-lightbox .swiper-zoom-container img { max-width: 56% !important; max-height: 78% !important; object-fit: contain; margin: auto; padding: 28px; box-sizing: border-box; border-radius: 18px; background: #fff; border: 1px solid rgba(18, 30, 46, 0.06); box-shadow: 0 18px 50px rgba(12, 24, 40, 0.16); } / Chrome is white by default for a dark scrim; on a light one it needs to be dark, on a chip so it stays legible over the picture. / .elementor-lightbox .dialog-lightbox-close-button, .elementor-lightbox .elementor-swiper-button { color: #1b2733 !important; background: #fff; border-radius: 50%; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(12, 24, 40, 0.14); opacity: 1; transition: transform 0.15s ease; } .elementor-lightbox .dialog-lightbox-close-button:hover, .elementor-lightbox .elementor-swiper-button:hover { transform: scale(1.08); background: #fff; } .elementor-lightbox .dialog-lightbox-close-button { top: 18px; right: 18px; } .elementor-lightbox .elementor-swiper-button-prev { left: 18px; } .elementor-lightbox .elementor-swiper-button-next { right: 18px; } / Footer/title bar reads as dark text now. / .elementor-lightbox .elementor-slideshowtitle, .elementor-lightbox .elementor-slideshowdescription, .elementor-lightbox .elementor-slideshowcounter { color: #55636f !important; } .elementor-lightbox .elementor-slideshowheader { background: none !important; } @media (max-width: 782px) { .elementor-lightbox .swiper-zoom-container img { max-width: 78% !important; max-height: 70% !important; padding: 20px; border-radius: 14px; } .elementor-lightbox .dialog-lightbox-close-button, .elementor-lightbox .elementor-swiper-button { width: 38px; height: 38px; } } @media (max-width: 480px) { .elementor-lightbox .swiper-zoom-container img { max-width: 88% !important; max-height: 64% !important; padding: 14px; } / Swipe replaces the arrows on a phone. / .elementor-lightbox .elementor-swiper-button-prev, .elementor-lightbox .elementor-swiper-button-next { display: none !important; } } / ---------- image lightbox (PhotoSwipe fallback) ---------- / / Product shots are transparent PNGs, so the stock solid-black backdrop makes them look like they're floating in a void. A blurred view of the page reads as a dialog over the product instead. / .pswpbg { / A light veil rather than a dark one: the product shots are white, so a dark scrim would make them glare, and a blurred page reads better behind a light panel. 80% keeps the page faintly visible as context. / background: rgba(238, 244, 250, 0.8) !important; backdrop-filter: blur(20px) saturate(1.05); -webkit-backdrop-filter: blur(20px) saturate(1.05); opacity: 1 !important; } / Cap the image so it never fills the stage, leaving room to click to dismiss. PhotoSwipe positions each slide with an inline left/top computed from the uncapped size, so capping alone pushes the picture off-centre; the margin re-centres it inside the slide without fighting the library's transforms. / .pswpitem img.pswpimg { max-width: 82vw !important; max-height: 76vh !important; margin-left: auto !important; margin-right: auto !important; object-fit: contain; } / PhotoSwipe's icons are a white sprite meant for a dark UI; on a light panel they need inverting, and a solid chip behind them to stay legible. / .pswpbutton { background-color: #fff !important; border: 1px solid rgba(18, 30, 46, 0.08); border-radius: 50%; opacity: 1; filter: invert(1); box-shadow: 0 2px 10px rgba(12, 24, 40, 0.12); transition: transform 0.15s ease; } .pswpbutton:hover { transform: scale(1.08); } .pswpbutton--arrow--left, .pswpbutton--arrow--right { background: none !important; border: 0; box-shadow: none; } .pswpbutton--arrow--left::before, .pswpbutton--arrow--right::before { background-color: #fff; border-radius: 50%; box-shadow: 0 2px 10px rgba(12, 24, 40, 0.12); } / Sharing, fullscreen and zoom add nothing for a product shot, and their white sprite is nearly invisible on the light veil. Close is the only one kept. / .pswpbutton--share, .pswpbutton--fs, .pswpbutton--zoom { display: none !important; } .pswptop-bar { background: none !important; } .pswpcaption { background: rgba(255, 255, 255, 0.85) !important; } .pswpcaptioncenter { color: #1b2733 !important; text-align: center; } .pswpcounter { color: #55636f; opacity: 0.9; } @media (max-width: 782px) { .pswpitem img.pswpimg { max-width: 84vw !important; max-height: 68vh !important; } } @media (max-width: 480px) { .pswpitem img.pswpimg { max-width: 86vw !important; max-height: 64vh !important; } / Swipe replaces the arrows on a phone. / .pswpbutton--arrow--left, .pswpbutton--arrow--right { display: none !important; } } / ---------- product listing page ---------- / .coway-plp { --coway-blue: #1f7ae0; --coway-cyan: #00a8e1; --coway-ink: #1b2733; --coway-muted: #9aa7b4; --coway-line: #e6ebf1; display: grid; grid-template-columns: 240px 1fr; gap: 32px; / width:100% stops a short page (few cards) from shrinking the whole listing — some theme wrappers size to content. / width: 100%; max-width: 1180px; margin: 0 auto; padding: 24px 20px; color: var(--coway-ink); align-items: start; box-sizing: border-box; } / The theme's shop wrapper is a flex child of , so it sizes to its content instead of the viewport. On a listing page that meant a page with only two cards rendered the whole thing narrow; on a product page it's worse — the flexslider gallery track is 200%-of-itself wide by design (see .woocommerce-product-gallerywrapper), and being a flex child means .shop-main's own intrinsic width follows that oversized content, dragging every other element on the page (price table, spec tiles, thumbnails — anything using % or the theme's own layout) out to match, well before .flex-viewport's overflow:hidden gets a chance to clip the gallery back down. Stretching the wrapper to the viewport on both single-product and PLP pages keeps this from happening at all. / .coway-has-plp .shop-main, .coway-has-plp .shop-content, .coway-has-plp .site-main, .coway-has-plp .page-content, .single-product .shop-main, .single-product .shop-content, .single-product .site-main, .single-product .page-content { width: 100%; align-self: stretch; / The theme caps ordinary pages at a narrow reading width; a listing needs the full frame, which .coway-plp then limits to 1180px itself. / max-width: none; } .coway-plpfilters-title { margin: 0 0 18px; color: var(--coway-cyan); font-size: 22px; font-weight: 700; text-align: center; } .coway-plpgroup { margin: 0 0 22px; padding: 0; border: 0; } / Each group collapses, on every screen size. / .coway-plplegend { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 0; margin-bottom: 10px; border: 0; background: none; color: var(--coway-cyan); font-family: inherit; font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; } .coway-plplegend svg { width: 15px; height: 15px; flex: none; transition: transform 0.2s ease; } .coway-plplegend[aria-expanded="false"] svg { transform: rotate(-90deg); } .coway-plpbody[hidden] { display: none; } .coway-plprange { display: flex; gap: 8px; margin-bottom: 8px; } .coway-plprange input { width: 100%; min-width: 0; padding: 7px 8px; border: 1px solid var(--coway-line); border-radius: 6px; font-size: 14px; text-align: center; } .coway-plpslider { width: 100%; accent-color: var(--coway-blue); } .coway-plpcheck { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 7px; padding-left: 14px; font-size: 14px; line-height: 1.4; cursor: pointer; } .coway-plpcheck input { margin: 2px 0 0; accent-color: var(--coway-blue); flex: none; } / On a category-scoped page the list navigates instead of filtering. / .coway-plpcheck--link a { color: var(--coway-ink); text-decoration: none; } .coway-plpcheck--link a:hover { color: var(--coway-blue); } .coway-plpcheck--link strong { color: var(--coway-blue); } .coway-plpactions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .coway-plpapply { padding: 10px 22px; border: 0; border-radius: 8px; background: var(--coway-blue); color: #fff; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; } .coway-plpapply:hover { background: #14539b; } .coway-plpreset { color: var(--coway-muted); font-size: 14px; } .coway-plptitle { margin: 0 0 18px; color: var(--coway-cyan); font-size: 26px; font-weight: 700; text-align: center; } / The listing is always 3 across, whatever the card count — the shortcode's per-row variable suits an inline row, not a full grid. / / The card template sets --coway-card-cols from how many cards it was given, which suits an inline row. A listing must keep a fixed grid so the last page doesn't render narrower cards than the first — so override the variable itself, not just the grid, since the inline style would otherwise win. / .coway-plp__results .coway-cards { --coway-card-cols: 3; margin-top: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); / The listing always fills its column of the sidebar layout — the 900px cap above is for a standalone [coway_cards]/related-products row. / max-width: none; } @media (max-width: 1024px) { .coway-plpresults .coway-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } / Below this the sidebar leaves too little room for the grid. / .coway-plp { grid-template-columns: 1fr; gap: 20px; } } / Two across is the floor — a single column wastes a phone's width and makes the listing very long to scroll. / @media (max-width: 560px) { .coway-plpresults .coway-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .coway-plp .coway-card { padding: 12px; } .coway-plp .coway-cardtitle { font-size: 15px; } .coway-plp .coway-cardmeta, .coway-plp .coway-cardsubtitle { font-size: 12px; } .coway-plp .coway-cardcta { padding: 9px 10px; font-size: 14px; } } / ---------- mobile filter drawer ---------- / .coway-plpopen, .coway-plpclose { display: none; } @media (max-width: 1024px) { / Button that opens the drawer; hidden on desktop where filters are inline. / .coway-plpopen { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 11px 20px; border: 1px solid var(--coway-blue); border-radius: 999px; background: #fff; color: var(--coway-blue); font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; } .coway-plpopen svg { width: 16px; height: 16px; } / Bottom sheet: rises from the bottom, with the actions pinned inside it so they're reachable without scrolling to the end of the filters. / .coway-plpfilters { position: fixed; right: 0; bottom: 0; left: 0; z-index: 9999; display: flex; flex-direction: column; max-height: 85vh; padding: 20px 20px 0; border-radius: 18px 18px 0 0; background: #fff; box-shadow: 0 -8px 40px rgba(20, 40, 70, 0.18); transform: translateY(100%); transition: transform 0.28s ease; visibility: hidden; } .coway-plpfilters.is-open { transform: translateY(0); visibility: visible; } / Grab handle, as on a native sheet. / .coway-plpfilters::before { content: ""; width: 44px; height: 4px; margin: -8px auto 12px; border-radius: 999px; background: #dbe3ea; flex: none; } / Only the filter list scrolls; the action bar stays put. / .coway-plpscroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .coway-plpactions { position: sticky; bottom: 0; margin: 0 -20px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--coway-line); background: #fff; } .coway-plpapply { flex: 1; } .coway-plpclose { display: block; position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: #f1f5f9; color: #55636f; font-size: 19px; line-height: 1; cursor: pointer; } / Dimmed backdrop; clicking it closes the drawer. / .coway-plpbackdrop { position: fixed; inset: 0; z-index: 9998; background: rgba(16, 28, 44, 0.45); opacity: 0; visibility: hidden; transition: opacity 0.25s ease; } .coway-plpbackdrop.is-open { opacity: 1; visibility: visible; } / Stop the page behind the drawer from scrolling. / body.coway-drawer-open { overflow: hidden; } } .coway-plpempty { padding: 48px 0; color: var(--coway-muted); text-align: center; } / ---------- pagination ---------- / .coway-plpresults { / Without this the column shrinks to its content, so a page holding only two cards would render a narrower grid than a full one. / min-width: 0; } .coway-pager { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 28px; } .coway-pagernum, .coway-pagerstep { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; border: 1px solid #d8e0e8; border-radius: 8px; color: #1b2733; font-size: 14px; text-decoration: none; } .coway-pagernum:hover, .coway-pagerstep:hover { border-color: #1f7ae0; color: #1f7ae0; } .coway-pagernum.is-current { border-color: #1f7ae0; background: #1f7ae0; color: #fff; font-weight: 600; } .coway-pagercount { margin: 10px 0 0; color: #9aa7b4; font-size: 13px; text-align: center; } / ---------- comparison table ---------- / .coway-compare { max-width: 1180px; margin: 56px auto; padding: 0 20px; color: #1b2733; / Sticky cells inside the scroller report their full width up the tree, which makes ancestors think the page is wider than the viewport. Clipping here stops that leaking out as a stray horizontal scroll. / overflow-x: clip; } .coway-comparebar { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .coway-comparetitle { margin: 0; color: #00a8e1; font-size: 26px; font-weight: 700; text-align: center; } .coway-comparetoggle { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border: 1px solid #1f7ae0; border-radius: 999px; background: #fff; color: #1f7ae0; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } .coway-comparetoggle:hover { background: #1f7ae0; color: #fff; } .coway-comparetoggle svg { width: 15px; height: 15px; transition: transform 0.2s ease; } .coway-compare.is-open .coway-comparetoggle svg { transform: rotate(180deg); } / Only one of the two labels shows, depending on state. / .coway-comparetoggle-close, .coway-compare.is-open .coway-comparetoggle-open { display: none; } .coway-compare.is-open .coway-comparetoggle-close { display: inline; } / Many models means many columns; scroll inside the table, never the page. The explicit width (not just max-width) stops the sticky cells inside from reporting the table's full width to ancestors, which would otherwise show up as a stray horizontal scroll on the page. / .coway-comparescroll { width: 100%; max-width: 100%; overflow-x: auto; contain: paint; -webkit-overflow-scrolling: touch; } .coway-comparetable { width: max-content; min-width: 100%; border-collapse: collapse; font-size: 14px; } .coway-comparetable th, .coway-comparetable td { padding: 12px 10px; text-align: center; vertical-align: middle; } / The label column stays put while the models scroll past it. Group headings are excluded: they span the whole table, so pinning them would drag their text along as the row scrolls. / .coway-comparetable tbody tr:not(.coway-comparegroup) th, .coway-comparecorner { position: sticky; left: 0; z-index: 1; min-width: 190px; max-width: 190px; background: #fff; text-align: left; font-weight: 400; } .coway-comparecorner-title { display: block; color: #1f7ae0; font-weight: 700; } .coway-comparecorner-sub { display: block; color: #9aa7b4; font-size: 12px; } .coway-comparehead { min-width: 130px; border-left: 1px solid #eef2f6; } .coway-comparehead a { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #1b2733; font-weight: 700; text-decoration: none; } .coway-comparehead img { width: 92px; height: 92px; object-fit: contain; mix-blend-mode: multiply; } .coway-comparegroup th { background: #f2f8fd; color: #1f7ae0; font-weight: 700; text-align: left; / The cell spans the table, so its text is what needs pinning — otherwise the heading scrolls out of sight while its band stays on screen. / padding-left: 0; } .coway-comparegroup th span { position: sticky; left: 0; display: inline-block; padding: 0 10px; } .coway-comparetable tbody tr:not(.coway-comparegroup) { border-top: 1px solid #eef2f6; } .coway-comparemark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #d9e1e8; color: #fff; } .coway-comparemark svg { width: 13px; height: 13px; } .is-on .coway-comparemark { background: #2bb673; } .is-partial .coway-comparemark { background: #e8931f; } / On a phone the label column would eat most of the viewport, leaving barely one model visible; shrink everything so two or three fit alongside it. / @media (max-width: 600px) { .coway-compare { padding: 0 16px; } .coway-comparetable { font-size: 13px; } .coway-comparetable th, .coway-comparetable td { padding: 9px 6px; } .coway-comparetable tbody tr:not(.coway-comparegroup) th, .coway-comparecorner { min-width: 120px; max-width: 120px; } .coway-comparehead { min-width: 88px; } .coway-comparehead img { width: 56px; height: 56px; } .coway-comparehead a { font-size: 12px; gap: 5px; } .coway-comparecorner-sub { display: none; } .coway-comparetitle { font-size: 21px; } } / ---------- responsive ---------- / @media (max-width: 782px) { .coway-block { grid-template-columns: 1fr; gap: 14px; } .coway-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; } .coway-tiles { / Five tiles don't fit on a phone; let them wrap here. / grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); } .coway-table th { width: 42%; } .coway-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } / Related products stay one row and scroll sideways on a phone, rather than wrapping into a 2-column grid like a listing page's cards do. / .coway-related .coway-cards { display: flex; grid-template-columns: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding-bottom: 4px; / The desktop rule centres this grid with margin:auto — a scrolling row should instead start flush at the left edge like any other horizontal-scroll list, not float in the middle of the section. / margin-left: 0; margin-right: 0; max-width: none; / contain: paint keeps this scroller's overflow from being counted toward the page's own scrollWidth — the same fix the comparison table needed for the same reason. / contain: paint; } .coway-related .coway-card { flex: 0 0 200px; scroll-snap-align: start; } .coway-herogrid { grid-template-columns: 1fr; gap: 24px; } .coway-herotitle { font-size: 32px; } .coway-priceslabel { font-size: 17px; } .coway-pricesamount { font-size: 21px; } .coway-pricestable th, .coway-pricestable td { padding: 10px 6px; } .coway-herothumb { width: 72px; height: 72px; } / Filters stack above the grid rather than squeezing beside it. */ .coway-plp { grid-template-columns: 1fr; gap: 20px; } } @media (max-width: 600px) { .coway-hero { --coway-gutter: 16px; } .coway-hero__title { font-size: 30px; } } @media (max-width: 480px) { .coway-cards { grid-template-columns: 1fr; } }