.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.category-page { --header-background: #fff; --header-foreground: var(--ink); --header-border: var(--line); --header-logo-filter: none; --header-active: var(--blue); --header-cta-background: var(--blue); --header-cta-border: var(--blue); --header-cta-hover: var(--blue-hover); }
.category-page .site-header { position: relative; }
.category-page .section-kicker { letter-spacing: 0; font-size: var(--text-xs); }
.category-page .floating-contact span { display: none; }
.category-page .floating-contact { min-width: 46px; min-height: 46px; padding: 0; border-radius: 50%; }
.category-nav { background: #f7f8f8; border-bottom: 1px solid var(--line); }
.category-nav-inner { display: flex; justify-content: space-between; gap: 25px; overflow-x: auto; scrollbar-width: thin; }
.category-nav a { position: relative; display: flex; align-items: center; min-height: 58px; flex-shrink: 0; font-size: var(--text-sm); color: #6a716e; }
.category-nav a:hover, .category-nav a[aria-current="page"] { color: var(--ink); }
.category-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--blue); }
.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; padding-block: 28px; color: #828782; font-size: var(--text-sm); }
.breadcrumbs svg { width: 11px; height: 11px; }
.breadcrumbs a:hover { color: var(--blue); }
.breadcrumbs [aria-current] { color: var(--ink); }
.category-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: end; gap: 70px; padding-block: 22px 40px; }
.category-intro h1 { font-size: var(--text-page); font-weight: 400; line-height: 1.2; margin-top: 16px; overflow-wrap: anywhere; }
.category-line { font-size: var(--text-base); color: #6d756e; margin: 15px 0 0; line-height: 1.6; }
.category-intro-copy { max-width: 440px; justify-self: end; }
.category-intro-copy > p { font-size: var(--text-base); line-height: 1.65; margin: 0 0 19px; color: #6a726d; }
.category-intro-copy .button { min-height: 45px; padding-inline: 18px; font-size: var(--text-sm); }
.product-showcase { --product-visual-height: clamp(460px, calc(100svh - 240px), 620px); background: #f1f2f3; }
.product-layout { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: center; gap: 64px; padding-bottom: 32px; }
.product-copy { min-width: 0; padding-block: 24px; }
.product-intro { display: block; padding: 0; }
.product-intro h1 { font-size: var(--text-page); margin-top: 16px; }
.product-intro .category-line { margin-top: 12px; font-size: var(--text-base); }
.product-intro .category-intro-copy { margin-top: 22px; max-width: none; }
.product-intro .category-intro-copy > p { margin-bottom: 22px; }
.sample-stage { height: var(--product-visual-height); min-width: 0; position: relative; overflow: hidden; }
.sample-stage-top { position: relative; z-index: 1; display: flex; justify-content: space-between; padding-top: 24px; gap: 20px; pointer-events: none; }
.sample-stage .section-kicker { font-size: var(--text-xs); color: #747d79; }
.sample-index { color: #7b817d; font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.sample-image-wrap { position: absolute; top: 54px; left: 50%; width: min(100%, calc((var(--product-visual-height) - 130px) * .8)); aspect-ratio: 4 / 5; transform: translateX(-50%); perspective: 1000px; pointer-events: none; }
.sample-image-wrap::before { content: ""; position: absolute; top: 7.5%; left: 50%; width: 200vw; height: 2px; transform: translateX(-50%); background: #a6abaa; box-shadow: 0 2px 3px #00000012; }
.sample-image-wrap .garment-image { top: 0; width: 100%; height: 100%; }
.sample-garment.is-selected .garment-side { opacity: 0; transform: translateX(-50%) rotateY(55deg); }
.sample-garment.is-selected .garment-front { opacity: 1; transform: translateX(-50%) rotateY(0deg) scale(1.06); }
.sample-garment.is-resetting .garment-image { transition: none; }
.sample-view-tabs { display: flex; position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); gap: 22px; z-index: 2; }
.sample-view-tabs button { min-width: 42px; padding: 9px 3px; border-bottom: 1px solid transparent; background: transparent; color: #737b76; font-size: var(--text-sm); }
.sample-view-tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--ink); }
.sample-view-tabs button:hover { color: var(--blue); }
#sample-panel:focus-visible { outline-offset: -5px; }
#sample-panel { position: absolute; inset: 0 0 65px; }
.sample-caption { margin-top: 26px; padding-top: 22px; border-top: 1px solid #d8dddf; }
.sample-caption h2 { font-size: var(--text-lg); font-weight: 500; line-height: 1.4; margin: 8px 0 9px; }
.sample-caption p { font-size: var(--text-base); line-height: 1.65; color: #747c75; margin: 0; }
.sample-picker { display: grid; gap: 7px; color: #737973; font-size: var(--text-sm); width: 100%; margin-top: 16px; }
.sample-picker select { font-size: var(--text-base); padding-inline: 10px; height: 48px; }
.sample-enquire { margin-top: 18px; }
.sample-specs { display: grid; grid-template-columns: .7fr 1.8fr 1fr; gap: 30px; border-block: 1px solid var(--line); padding-block: 20px; }
.sample-specs > div { display: flex; flex-direction: column; gap: 8px; }
.sample-specs span { font-size: var(--text-xs); color: #7b817b; }
.sample-specs strong { font-size: var(--text-sm); line-height: 1.7; font-weight: 400; }
.sample-specs p { margin: 0; color: #838a83; font-size: var(--text-sm); line-height: 1.7; }
.development-photo { margin: 0; position: relative; min-width: 0; height: var(--product-visual-height); background: #e7ebe7; }
.development-photo > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 52%; }
.development-photo::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, #101b16a6); pointer-events: none; }
.development-photo figcaption { position: absolute; left: 24px; right: 24px; bottom: 25px; z-index: 1; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.development-photo figcaption span { font-size: var(--text-xs); }
.development-photo figcaption strong { font-size: var(--text-sm); font-weight: 500; }
.customization { padding-block: 58px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.category-page .section-heading h2 { margin: 13px 0 0; font-size: var(--text-section); font-weight: 400; line-height: 1.3; }
.customization-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 45px; margin-top: 32px; }
.customization-options > div { padding-top: 19px; border-top: 1px solid var(--line); }
.option-number { font-size: var(--text-xs); color: var(--blue); }
.customization-options h3 { font-size: var(--text-lg); line-height: 1.4; font-weight: 500; margin: 17px 0 10px; }
.customization-options p { max-width: 350px; font-size: var(--text-base); line-height: 1.65; color: #737b73; margin: 0; }
.development-process { background: #f6f7f4; border-block: 1px solid var(--line); padding-block: 50px; }
.development-steps { list-style: none; margin: 32px 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 45px; }
.development-steps > li { border-top: 1px solid #dce1d8; padding-top: 18px; }
.development-steps > li > span { font-size: var(--text-xs); color: #6a7864; }
.development-steps h3 { font-size: var(--text-lg); line-height: 1.4; font-weight: 500; margin: 17px 0 10px; }
.development-steps p { max-width: 350px; font-size: var(--text-base); color: #737b73; line-height: 1.65; margin: 0; }
.brief-checklist { display: grid; grid-template-columns: 1fr 2fr; gap: 30px; padding-top: 23px; border-top: 1px solid #dce1d8; }
.brief-checklist h3 { font-size: var(--text-base); font-weight: 500; margin: 0; }
.brief-checklist ul { display: flex; flex-wrap: wrap; gap: 12px 25px; margin: 0; padding: 0; list-style: none; }
.brief-checklist li { display: flex; align-items: flex-start; gap: 7px; font-size: var(--text-sm); line-height: 1.7; color: #737b73; }
.brief-checklist svg { width: 13px; height: 13px; color: #53744a; margin-top: 2px; }
.category-faq { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; padding-block: 65px; }
.category-faq h2 { font-size: var(--text-section); line-height: 1.3; font-weight: 400; margin: 13px 0 20px; }
.category-faq > div > p { color: #737b73; font-size: var(--text-base); }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; list-style: none; cursor: pointer; font-size: var(--text-base); line-height: 1.6; padding: 20px 0; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary svg { width: 16px; height: 16px; color: #737b73; transition: transform .2s; }
.faq-list details[open] summary svg { transform: rotate(45deg); }
.faq-list details p { max-width: 600px; font-size: var(--text-base); color: #737b73; line-height: 1.65; margin: 0 30px 21px 0; }
.category-cta { padding-block: 38px; background: #eef3f8; border-block: 1px solid #e2e9f0; }
.category-cta > div { display: flex; align-items: center; justify-content: space-between; gap: 35px; }
.category-cta h2 { font-size: var(--text-section); font-weight: 400; line-height: 1.3; margin: 12px 0 0; }
.category-cta .button { min-height: 48px; font-size: var(--text-sm); }
.related-categories { padding-block: 55px; }
.related-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 28px; }
.related-links a { display: flex; align-items: center; gap: 16px; padding-block: 24px; border-block: 1px solid var(--line); }
.related-links a > span { color: #859085; font-size: var(--text-xs); }
.related-links strong { font-size: var(--text-lg); font-weight: 400; line-height: 1.4; }
.related-links svg { margin-left: auto; width: 17px; height: 17px; }
.related-links a:hover { color: var(--blue); }
.sitemap-intro { padding-bottom: 38px; }
.sitemap-browser { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: start; gap: 32px; }
.sitemap-browser > .category-nav { background: transparent; border-bottom: 0; }
.sitemap-browser .category-nav-inner { width: 100%; margin: 0; display: flex; flex-direction: column; gap: 0; overflow: visible; padding: 0; }
.sitemap-browser .category-nav a { min-height: 49px; padding-block: 12px; border-bottom: 1px solid var(--line); font-size: var(--text-sm); flex-shrink: 1; }
.sitemap-browser .category-nav a:first-child { border-top: 1px solid var(--line); }
.sitemap-categories { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 35px 24px; padding-bottom: 55px; }
.sitemap-category { min-width: 0; }
.sitemap-category-image { aspect-ratio: 4 / 4.5; background: #f1f2f3; position: relative; overflow: hidden; }
.sitemap-category-image img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .35s; }
.sitemap-category.has-photo img { object-fit: cover; }
.sitemap-category:hover img { transform: scale(1.035); }
.sitemap-category-image > span { position: absolute; top: 12px; left: 12px; font-size: var(--text-xs); padding: 6px 7px; color: #667266; background: #ffffffed; }
.sitemap-category-title { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-top: 15px; }
.sitemap-category-title h2 { font-size: var(--text-lg); line-height: 1.4; font-weight: 500; margin: 0; }
.sitemap-category-title svg { width: 17px; height: 17px; }
.sitemap-category > p { color: #7c847b; font-size: var(--text-sm); line-height: 1.7; margin: 6px 0 0; }
.sitemap-category:hover .sitemap-category-title { color: var(--blue); }
.sitemap-pages { border-top: 1px solid var(--line); padding-block: 30px 45px; }
.sitemap-pages nav { display: flex; flex-wrap: wrap; gap: 25px 50px; margin-top: 20px; }
.sitemap-pages a, .sitemap-pages button { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: none; padding: 0; font-size: var(--text-sm); }
.sitemap-pages a:hover, .sitemap-pages button:hover { color: var(--blue); }
.sitemap-pages svg { width: 14px; height: 14px; }

@media (max-width: 1120px) {
  .sitemap-browser { grid-template-columns: 150px minmax(0, 1fr); gap: 24px; }
  .category-nav-inner { justify-content: flex-start; gap: 28px; }
  .category-intro { gap: 35px; }
  .product-layout { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 36px; }
  .sample-specs { grid-template-columns: .65fr 1.65fr 1fr; gap: 20px; }
  .customization-options, .development-steps { gap: 28px; }
  .category-faq { gap: 45px; }
  .sitemap-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .sitemap-browser { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .sitemap-browser > .category-nav { min-width: 0; border-block: 1px solid var(--line); }
  .sitemap-browser .category-nav-inner { flex-direction: row; gap: 25px; overflow-x: auto; }
  .sitemap-browser .category-nav a { flex-shrink: 0; border: 0; }
  .sitemap-browser .category-nav a:first-child { border-top: 0; }
  .category-nav a { min-height: 49px; }
  .category-nav-inner { width: 100%; padding-inline: 20px; gap: 25px; }
  .breadcrumbs { padding-block: 22px; gap: 8px; }
  .category-intro { grid-template-columns: 1fr; gap: 18px; padding-block: 10px 30px; }
  .category-intro h1 { margin-top: 13px; }
  .category-line { margin-top: 12px; }
  .category-intro-copy { max-width: none; justify-self: stretch; }
  .category-intro-copy > p { margin-bottom: 17px; }
  .category-intro-copy .button { min-height: 43px; }
  .product-showcase { --product-visual-height: 360px; }
  .product-layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding-bottom: 30px; }
  .product-copy { padding-block: 10px 0; }
  .product-intro { padding: 0; }
  .product-intro .category-intro-copy { margin-top: 18px; }
  .product-layout > .sample-stage, .product-layout > .development-photo { order: -1; }
  .sample-stage-top { padding-top: 18px; }
  .sample-image-wrap { top: 38px; width: min(100%, calc((var(--product-visual-height) - 90px) * .8)); }
  .sample-view-tabs { bottom: 12px; }
  .sample-caption { margin-top: 24px; padding-top: 20px; }
  .sample-specs { grid-template-columns: 1fr 2fr; padding-block: 18px; gap: 17px; }
  .sample-specs p { grid-column: 1 / -1; }
  .development-photo > img { object-position: 58% center; }
  .development-photo figcaption { align-items: flex-start; flex-direction: column; left: 18px; right: 18px; bottom: 20px; gap: 9px; }
  .customization { padding-block: 36px; }
  .customization-options { grid-template-columns: 1fr; gap: 23px; margin-top: 24px; }
  .customization-options > div { padding-top: 16px; display: grid; grid-template-columns: 25px 1fr; gap: 10px; }
  .option-number { padding-top: 3px; }
  .customization-options h3 { margin: 0; }
  .customization-options p { grid-column: 2; max-width: none; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 17px; }
  .development-process { padding-block: 35px; }
  .development-steps { grid-template-columns: 1fr; gap: 22px; margin-block: 25px; }
  .development-steps > li { padding-top: 15px; display: grid; grid-template-columns: 25px 1fr; gap: 10px; }
  .development-steps > li > span { padding-top: 3px; }
  .development-steps h3 { margin: 0; }
  .development-steps p { grid-column: 2; max-width: none; }
  .brief-checklist { grid-template-columns: 1fr; gap: 14px; padding-top: 20px; }
  .brief-checklist ul { flex-direction: column; gap: 10px; }
  .category-faq { grid-template-columns: 1fr; gap: 26px; padding-block: 39px; }
  .faq-list summary { padding-block: 18px; }
  .category-cta { padding-block: 30px; }
  .category-cta > div { align-items: flex-start; flex-direction: column; gap: 22px; }
  .category-cta .button { min-height: 45px; gap: 17px; }
  .related-categories { padding-block: 35px; }
  .related-links { grid-template-columns: 1fr; gap: 0; margin-top: 23px; }
  .related-links a { padding-block: 19px; }
  .related-links a + a { border-top: 0; }
  .sitemap-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px 15px; padding-bottom: 35px; }
  .sitemap-category-title { margin-top: 12px; gap: 8px; align-items: flex-start; }
  .sitemap-category-title svg { width: 14px; height: 14px; margin-top: 2px; }
  .sitemap-category-image > span { top: 8px; left: 8px; padding: 4px 5px; }
  .sitemap-pages { padding-block: 25px 35px; }
  .sitemap-pages nav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
}

@media (max-width: 370px) {
  .product-showcase { --product-visual-height: 320px; }
}