@import url('../bluetooth-earphones/true-wireless-earbuds.css?v=3');

/* Kezon silicone chocolate molds page */
.tws-hero { background: #f4f5ef; }
html.js #main-content > .tws-hero { opacity: 1; transform: none; }
.product-gallery { background: var(--color-primary); }
.product-gallery__main figcaption { background: linear-gradient(0deg, rgba(51,51,51,.78), transparent); }
.product-gallery__thumbs button:hover, .product-gallery__thumbs button:focus-visible { border-color: #aeb295; }
.product-gallery__thumbs button > span { background: linear-gradient(0deg, rgba(51,51,51,.82), transparent); }
.tws-hero .button--outline { border-color: var(--color-primary); color: var(--color-primary); }
.tws-hero .button--outline:hover { color: #fff; background: var(--color-primary); }
.card-anchor, .clickable-grid > a { display: block; color: inherit; text-decoration: none; }
.earbud-card.card-anchor > div { gap: 0; }
.earbud-card.card-anchor span { display: block; margin-top: auto; color: var(--color-primary); font-size: .86rem; font-weight: 800; }
.clickable-grid > a { padding: 25px; border-radius: var(--radius-medium); background: var(--color-soft); transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.clickable-grid > a:hover { background: #eceee2; box-shadow: var(--shadow); transform: translateY(-4px); }
.clickable-grid > a h3 { margin-bottom: 10px; }
.clickable-grid > a p { margin: 0; color: var(--color-muted); font-size: .93rem; }
.risk-reduction { background: #333; }
.risk-reduction .split-layout p:not(.eyebrow), .six-grid--light a p { color: #f0f1e9; }
.six-grid--light > a { background: rgba(255,255,255,.10); }
.six-grid--light > a:hover { background: rgba(255,255,255,.17); box-shadow: none; }
.six-grid--light > a h3 { color: #fff; }
.comparison-section { background: #5e6346; }
.comparison-section .image-heading > div > p:last-child { color: #f0f1e9; }
.comparison-section .six-grid--light > a { min-height: 160px; }
.process-timeline { grid-template-columns: repeat(6, 1fr); }
.process-timeline h3 { margin: 0 0 8px; font-size: 1rem; }
#customization-process .image-heading { grid-template-columns: minmax(420px, .9fr) minmax(0, 1.1fr); gap: 46px; align-items: center; }
#customization-process .image-heading > div { min-width: 0; }
#customization-process .image-heading h2 { font-size: clamp(2.25rem, 3vw, 3.25rem); overflow-wrap: anywhere; }
.quality-section .mini-grid { grid-template-columns: repeat(2, 1fr); }
.use-case-grid > a { position: relative; padding-left: 75px; }
.use-case-grid > a::before { position: absolute; top: 23px; left: 21px; display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: var(--color-primary); background: #e5e7d9; content: '•'; font-size: 1.25rem; font-weight: 900; }
.chooser .choose-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 22px 0; counter-reset: choose; }
.chooser .choose-list > a { position: relative; min-height: 0; padding: 14px 12px 14px 51px; box-shadow: none; counter-increment: choose; }
.chooser .choose-list > a::before { position: absolute; top: 14px; left: 16px; color: var(--color-primary); content: counter(choose, decimal-leading-zero); font-size: .8rem; font-weight: 900; }
.chooser .choose-list h3 { margin: 0 0 4px; font-size: .9rem; }
.chooser .choose-list span { color: var(--color-muted); font-size: .8rem; line-height: 1.38; }
.final-inquiry__overlay { background: rgba(51,51,51,.76); }
.final-inquiry__copy > p:not(.eyebrow) { color: #f0f1e9; }
.final-inquiry__form .form-status { min-height: 20px; margin: 0; color: var(--color-primary); font-size: .85rem; font-weight: 700; }
.final-inquiry__contact { display: grid; gap: 5px; margin: 22px 0 0; padding: 0; color: #f0f1e9; list-style: none; font-size: .86rem; }
.final-inquiry__contact a { color: #fff; font-weight: 800; }
.hero-points, .check-list, .contact-list { display: grid; gap: 8px; margin: 22px 0; padding: 0; list-style: none; }
.hero-points li, .check-list li { position: relative; padding-left: 22px; color: var(--color-muted); font-size: .92rem; }
.hero-points li::before, .check-list li::before { position: absolute; top: 0; left: 0; color: var(--color-primary); content: '✓'; font-weight: 900; }
.check-list--light { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 30px 0 0; }
.check-list--light li { color: #f0f1e9; }
.check-list--light li::before { color: #d9ddbd; }
.contact-list li { color: var(--color-muted); font-size: .92rem; }
.contact-list a { color: var(--color-primary); font-weight: 800; }
.table-wrap { overflow-x: auto; margin-top: 32px; border: 1px solid var(--color-line); border-radius: var(--radius-medium); background: #fff; }
.table-wrap table { width: 100%; min-width: 620px; border-collapse: collapse; }
.table-wrap th, .table-wrap td { padding: 15px 18px; border-bottom: 1px solid var(--color-line); text-align: left; vertical-align: top; font-size: .92rem; line-height: 1.45; }
.table-wrap th { color: #fff; background: var(--color-primary); font-weight: 800; }
.table-wrap td:first-child { width: 31%; color: var(--color-text); font-weight: 800; }
.table-wrap tbody tr:last-child td { border-bottom: 0; }
.table-wrap--dark { border-color: rgba(255,255,255,.22); background: transparent; }
.table-wrap--dark th { background: rgba(255,255,255,.15); }
.table-wrap--dark td { border-color: rgba(255,255,255,.18); color: #f0f1e9; }
.table-wrap--dark td:first-child { color: #fff; }
.chooser .choose-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 22px 0; padding: 0; list-style: none; counter-reset: choose; }
.chooser .choose-list > li { position: relative; min-height: 0; padding: 14px 12px 14px 51px; border-radius: var(--radius-medium); background: var(--color-soft); box-shadow: none; counter-increment: choose; }
.chooser .choose-list > li::before { position: absolute; top: 14px; left: 16px; color: var(--color-primary); content: counter(choose, decimal-leading-zero); font-size: .8rem; font-weight: 900; }
.chooser .choose-list h3 { margin: 0 0 4px; font-size: .9rem; }
.chooser .choose-list span { color: var(--color-muted); font-size: .8rem; line-height: 1.38; }

@media (max-width: 1020px) { .process-timeline { grid-template-columns: repeat(3, 1fr); } #customization-process .image-heading { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
@media (max-width: 760px) { .process-timeline, .quality-section .mini-grid, .chooser .choose-list, .check-list--light { grid-template-columns: 1fr; } }

/* Stabilize the three-image hero gallery at tablet and mobile widths. */
.tws-hero { overflow: hidden; }
.tws-hero__stage { min-width: 0; }
.tws-hero__content { min-width: 0; }
.product-gallery {
    display: grid;
    width: 100%;
    max-width: 570px;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
}
.product-gallery__main {
    position: relative;
    min-height: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 14px;
    background: var(--color-soft);
}
.product-gallery__main img { width: 100%; height: 100%; }
.product-gallery__main figcaption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    gap: 9px;
    align-items: baseline;
    padding: 11px 14px;
    color: #fff;
    font-size: .76rem;
    font-weight: 800;
}
.product-gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 10px;
}
.product-gallery__thumbs button {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    height: 74px;
    border-color: var(--color-line);
    border-radius: 9px;
}
.product-gallery__thumbs button img {
    width: 44px;
    height: 72px;
    object-fit: cover;
}
.product-gallery__thumbs button > span {
    position: static;
    display: flex;
    gap: 5px;
    padding: 8px;
    color: var(--color-text);
    background: transparent;
    font-size: .72rem;
    line-height: 1.2;
}
.product-gallery__thumbs b { color: var(--color-primary); }

@media (max-width: 900px) {
    .tws-hero { padding: 34px 0 54px; }
    .tws-hero__stage { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .product-gallery { max-width: 680px; margin: 0 auto; }
    .product-gallery__main { aspect-ratio: 16 / 10; }
    .tws-hero__content { max-width: 680px; margin: 0 auto; }
}

@media (max-width: 560px) {
    .tws-hero { padding: 22px 0 44px; }
    .product-gallery__thumbs { grid-template-columns: 1fr; }
    .product-gallery__thumbs button { grid-template-columns: 54px minmax(0, 1fr); height: 58px; }
    .product-gallery__thumbs button img { width: 54px; height: 56px; }
    .product-gallery__thumbs button > span { font-size: .78rem; }
}

/* Standalone page layout: avoids inherited-template failures in local previews. */
.section-heading,
.image-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(270px, .55fr);
    gap: 34px;
    align-items: end;
    margin-bottom: 44px;
}
.section-heading h2,
.image-heading h2 { margin-bottom: 0; }
.section-heading > p,
.image-heading > div > p:last-child { margin: 0; color: var(--color-muted); }
.image-heading { grid-template-columns: 300px minmax(0, 1fr); align-items: center; }
.image-heading > img {
    width: 100%;
    height: 220px;
    border-radius: var(--radius-large);
    object-fit: cover;
    box-shadow: var(--shadow);
}
.split-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(36px, 7vw, 96px);
    align-items: center;
}
.split-layout > img {
    width: 100%;
    height: 420px;
    border-radius: var(--radius-large);
    object-fit: cover;
    box-shadow: var(--shadow);
}
.oem-section .split-layout > img,
.quality-section .split-layout > img,
.chooser .split-layout > img,
.buyer-section .split-layout > img,
.explain-section .split-layout > img { height: 500px; }
.earbuds-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.earbud-card.card-anchor {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    border-radius: var(--radius-large);
    background: #fff;
    box-shadow: var(--shadow);
    transition: transform .25s ease, box-shadow .25s ease;
}
.earbud-card.card-anchor:hover { box-shadow: 0 25px 60px rgba(122,126,92,.18); transform: translateY(-5px); }
.earbud-card.card-anchor > img { width: 100%; height: 220px; object-fit: cover; }
.earbud-card.card-anchor > div { display: flex; flex: 1; flex-direction: column; padding: 24px; }
.earbud-card.card-anchor h3 { margin-bottom: 10px; font-size: 1.2rem; }
.earbud-card.card-anchor p { margin: 0; color: var(--color-muted); }
.mini-grid,
.six-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 28px 0; gap: 12px; }
.clickable-grid > a { min-width: 0; }
.risk-reduction .split-layout { margin-bottom: 40px; }
.risk-reduction .split-layout > img { height: 310px; }
.risk-reduction .split-layout > div { color: #fff; }
.process-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
    margin: 58px 0 0;
    padding: 0;
    list-style: none;
}
.process-timeline::before { position: absolute; top: 22px; right: 8%; left: 8%; height: 1px; background: var(--color-line); content: ''; }
.process-timeline li { position: relative; z-index: 1; min-width: 0; padding-top: 62px; }
.process-timeline li > span { position: absolute; top: 0; left: 0; display: grid; width: 45px; height: 45px; place-items: center; border-radius: 50%; color: #fff; background: var(--color-primary); font-size: .8rem; font-weight: 900; }
.process-timeline p { margin: 0; color: var(--color-muted); font-size: .87rem; }
.faq-section .split-layout { align-items: stretch; }
.faq-section .split-layout > img { height: 100%; min-height: 620px; }
.faq-section .faq-content > p:not(.eyebrow) { color: var(--color-muted); }
.faq-section .faq-list { margin-top: 30px; border-top: 1px solid var(--color-line); }
.faq-section .faq-list article { border-bottom: 1px solid var(--color-line); }
.faq-section .faq-list button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; border: 0; color: var(--color-text); background: transparent; text-align: left; }
.faq-section .faq-list h3 { margin: 0; font-size: 1rem; letter-spacing: -.02em; }
.faq-section .faq-list button > span { color: var(--color-primary); font-size: 1.3rem; }
.faq-section .faq-list article > div { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.faq-section .faq-list article > div > p { overflow: hidden; margin: 0; color: var(--color-muted); }
.faq-section .faq-list article.is-open > div { grid-template-rows: 1fr; }
.faq-section .faq-list article.is-open > div > p { padding: 0 0 18px; }
.final-inquiry { position: relative; display: grid; min-height: 550px; align-items: center; isolation: isolate; overflow: hidden; color: #fff; background: var(--color-primary-dark); }
.final-inquiry > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.final-inquiry__content { display: grid; max-width: 1080px; padding: 76px 0; grid-template-columns: minmax(0, .9fr) minmax(350px, .75fr); gap: clamp(34px, 7vw, 88px); align-items: center; }
.final-inquiry__form { display: grid; gap: 13px; padding: 26px; border-radius: var(--radius-large); color: var(--color-text); background: #fff; }
.final-inquiry__form label { display: grid; gap: 7px; font-size: .8rem; font-weight: 800; }
.final-inquiry__form input,
.final-inquiry__form textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--color-line); border-radius: 8px; color: var(--color-text); background: #fff; font: inherit; resize: vertical; }
.final-inquiry__form .button { width: 100%; }

@media (max-width: 1020px) {
    .earbuds-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .six-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .process-timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 38px; }
    .process-timeline::before { display: none; }
}
@media (max-width: 900px) {
    .section-heading,
    .image-heading,
    .split-layout { grid-template-columns: 1fr; gap: 24px; }
    .image-heading > img { height: 280px; }
    .split-layout > img,
    .oem-section .split-layout > img,
    .quality-section .split-layout > img,
    .chooser .split-layout > img,
    .buyer-section .split-layout > img,
    .explain-section .split-layout > img { height: 360px; }
    .faq-section .split-layout > img { min-height: 0; height: 360px; }
    .final-inquiry__content { grid-template-columns: 1fr; max-width: 680px; }
}
@media (max-width: 560px) {
    .earbuds-grid,
    .mini-grid,
    .six-grid,
    .process-timeline { grid-template-columns: 1fr; }
    .earbud-card.card-anchor > img { height: 230px; }
    .process-timeline { gap: 24px; margin-top: 40px; }
    .process-timeline li { min-height: 82px; padding-top: 0; padding-left: 65px; }
    .process-timeline li > span { top: 0; }
    .final-inquiry { min-height: 0; }
    .final-inquiry__content { padding: 58px 0; }
    .final-inquiry__form { padding: 22px; }
}

/* Self-contained hero layout. The shared detail template contains an invalid
   width calculation in some local previews, so this page declares its own
   responsive stage instead of falling back to unstyled block flow. */
.tws-hero {
    padding: clamp(38px, 6vw, 72px) 0 clamp(54px, 7vw, 84px);
}
.tws-hero > .container {
    width: min(calc(100% - 64px), 1280px);
    max-width: none;
    margin-inline: auto;
}
.tws-hero__stage {
    display: grid;
    grid-template-columns: minmax(0, .94fr) minmax(360px, 1.06fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
}
.tws-hero__content {
    width: 100%;
    max-width: 620px;
    margin: 0;
}
.tws-hero h1 {
    max-width: 680px;
    margin: 0 0 18px;
    color: var(--color-text);
    font-size: clamp(2.85rem, 5.4vw, 4.8rem);
    line-height: .98;
    letter-spacing: -.055em;
}
.tws-hero .hero-subtitle {
    margin: 0 0 18px;
    color: var(--color-text);
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    font-weight: 700;
    line-height: 1.45;
}
.tws-hero__content > p:not(.eyebrow):not(.hero-subtitle) {
    max-width: 640px;
    color: var(--color-muted);
}
.tws-hero .button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

@media (max-width: 1020px) {
    .tws-hero > .container { width: min(calc(100% - 40px), 760px); }
    .tws-hero__stage { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    .product-gallery,
    .tws-hero__content { width: 100%; max-width: none; margin: 0; }
    .tws-hero h1 { max-width: 740px; font-size: clamp(2.7rem, 6.6vw, 3.65rem); }
}

@media (max-width: 560px) {
    .tws-hero > .container { width: min(calc(100% - 32px), 560px); }
    .tws-hero { padding: 28px 0 48px; }
    .tws-hero h1 { font-size: clamp(2.35rem, 10vw, 3.1rem); }
    .tws-hero .hero-points { margin: 18px 0; }
}

/* Align navigation, gallery, and secondary CTA states with the shared detail-page UI. */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    align-items: center;
    padding: 26px 0;
    color: var(--color-muted);
    font-size: clamp(1rem, 1.45vw, 1.3rem);
    line-height: 1.4;
}
.breadcrumb a {
    padding: 3px 0;
    color: var(--color-primary);
    font-weight: 800;
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: color .2s ease, text-decoration-color .2s ease;
}
.breadcrumb a:hover,
.breadcrumb a:focus-visible {
    color: var(--color-primary-dark);
    text-decoration-color: currentColor;
}
.breadcrumb > span:not([aria-current]) {
    margin: 0 13px;
    color: var(--color-muted);
    user-select: none;
}
.breadcrumb > span[aria-current] { color: var(--color-muted); font-weight: 500; }

.product-gallery__thumbs button {
    border: 2px solid transparent;
    background: rgba(255,255,255,.94);
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}
.product-gallery__thumbs button:hover,
.product-gallery__thumbs button:focus-visible {
    border-color: #fff;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--color-primary);
    transform: translateY(-2px);
}
.product-gallery__thumbs button.is-active,
.product-gallery__thumbs button[aria-selected="true"] {
    border-color: #fff;
    background: #fff;
    box-shadow: inset 0 0 0 2px var(--color-primary);
}
.product-gallery__thumbs button.is-active > span,
.product-gallery__thumbs button[aria-selected="true"] > span { color: var(--color-primary); font-weight: 800; }

.tws-hero .button--outline {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: transparent;
}
.tws-hero .button--outline:hover,
.tws-hero .button--outline:focus-visible {
    color: #fff;
    background: var(--color-primary);
    box-shadow: 0 10px 24px rgba(122,126,92,.28);
}

/* A horizontal product image stays intact; tabs sit below it like the other
   silicone-detail pages instead of forcing landscape imagery into a tall crop. */
.tws-hero .product-gallery {
    display: grid;
    width: min(100%, 570px);
    max-width: 570px;
    margin: 0;
    padding: 16px;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    border-radius: 16px;
}
.tws-hero__stage { align-items: start; }
.tws-hero .product-gallery__main {
    min-height: 0;
    aspect-ratio: 16 / 10;
    border-radius: 14px;
}
.tws-hero .product-gallery__main img {
    display: block;
    object-fit: cover;
    transition: transform .35s ease;
}
.tws-hero .product-gallery__main:hover img { transform: scale(1.02); }
.tws-hero .product-gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 10px;
}
.tws-hero .product-gallery__thumbs button {
    position: relative;
    display: block;
    width: 100%;
    height: 92px;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 10px;
    background: #dfe7ea;
    cursor: pointer;
    text-align: left;
    box-shadow: none;
}
.tws-hero .product-gallery__thumbs button img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.72);
    transition: filter .2s ease, transform .2s ease;
}
.tws-hero .product-gallery__thumbs button > span {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    gap: 6px;
    padding: 8px 9px;
    color: #fff;
    background: linear-gradient(0deg, rgba(51,51,51,.86), transparent);
    font-size: .67rem;
    font-weight: 700;
    line-height: 1.2;
}
.tws-hero .product-gallery__thumbs b { color: inherit; }
.tws-hero .product-gallery__thumbs button:hover,
.tws-hero .product-gallery__thumbs button:focus-visible {
    border-color: #fff;
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary);
    transform: translateY(-2px);
}
.tws-hero .product-gallery__thumbs button:hover img,
.tws-hero .product-gallery__thumbs button:focus-visible img,
.tws-hero .product-gallery__thumbs button.is-active img { filter: saturate(1); transform: scale(1.03); }
.tws-hero .product-gallery__thumbs button.is-active,
.tws-hero .product-gallery__thumbs button[aria-selected="true"] {
    border-color: #fff;
    box-shadow: 0 0 0 2px var(--color-primary);
}

@media (max-width: 1020px) {
    .tws-hero .product-gallery { margin-inline: auto; }
}
@media (max-width: 760px) {
    .tws-hero .product-gallery {
        width: 100%;
        padding: 12px;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
    .tws-hero .product-gallery__main {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }
    .tws-hero .product-gallery__thumbs { gap: 8px; }
    .tws-hero .product-gallery__thumbs button > span { padding: 7px; font-size: .62rem; }
}
@media (max-width: 390px) {
    .tws-hero .product-gallery { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px; }
    .tws-hero .product-gallery__thumbs { gap: 8px; }
    .tws-hero .product-gallery__thumbs button > span { padding: 6px; font-size: .58rem; }
}