/* Product page v2 (Sept 2026), built to mockup 6623: the mockup's own grid, sizes and spacing.
   Loaded after main.css and kg_custom.css, on product pages only.
   Type: DIN Alternate throughout (the theme ships Light 300 and Bold 700). */

/* The page starts right under the fixed header: the theme's extra top margin is off,
   the padding follows the header's real height (apa-product.js). The two values here
   are the usual desktop heights, so the first paint is already in place. */
body.single-product .content-wrapper { background: #F7F6F3; margin-top: 0 !important; padding-top: 81px; }
body.single-product.topbar-enabled .content-wrapper { padding-top: 119px; }
.apa-pdp,
.apa-modal,
.apa-sticky { font-family: "DIN Alternate", "DIN 2014", "Helvetica Neue", Arial, sans-serif; font-weight: 300; font-size: 16px; line-height: 1.5; letter-spacing: normal; color: #111; }
.apa-pdp { background: #F7F6F3; padding: 0 0 100px; }
.apa-pdp *,
.apa-modal *,
.apa-sticky * { box-sizing: border-box; }
.apa-pdp p, .apa-pdp li, .apa-pdp a, .apa-pdp summary, .apa-pdp button,
.apa-modal p, .apa-modal a, .apa-modal button { font-family: inherit; font-weight: 300; letter-spacing: normal; color: inherit; }
.apa-pdp span, .apa-modal span, .apa-sticky span { font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; }
.apa-pdp a, .apa-modal a { line-height: inherit; }
.apa-pdp b, .apa-pdp strong, .apa-modal b, .apa-sticky b { font-weight: 700; }

/* ---------- Grid: gallery + buy column (mockup: 1320 wide, 1fr + 420, 48 between) ---------- */
.apa-wrap { max-width: 1320px; margin: 0 auto; padding: 36px 32px 0; display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; align-items: start; }
/* Gallery and buying column appear together: hidden until the first pictures have decoded and
   the Buy Button has rendered its colours and sizes (apa-product.js, never more than 1.2 s), then one fade. */
.js .apa-wrap { opacity: 0; }
.js .apa-wrap.is-ready { opacity: 1; transition: opacity .35s ease; }
.apa-pdp .apa-crumbs { grid-column: 1 / -1; margin: 0; font-size: 10px; line-height: 1.5; letter-spacing: .3em; text-transform: uppercase; opacity: .55; }
.apa-pdp .apa-crumbs a { text-decoration: none; letter-spacing: inherit; }
.apa-pdp .apa-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.apa-crumbs span { margin: 0 .55em; }

/* ---------- Gallery: two portraits, one wide, two portraits ----------
   Each portrait box has its own picture's proportions (set in the markup), so the picture
   is shown whole; a video takes the proportions of the picture beside it. Only the wide
   picture is a 4:3 crop, chosen per gallery in functions.php. */
.apa-gallery { min-width: 0; }
.apa-gal { display: none; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.apa-gal.active { display: grid; }
.apa-gal__item { overflow: hidden; background: #e9e7e2; }
.apa-gal__item--wide { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.apa-gal__item a,
.apa-gal__item img,
.apa-gal__item video { display: block; width: 100%; height: 100%; }
.apa-gal__item img,
.apa-gal__item video { object-fit: cover; }
.apa-gal__item a { cursor: zoom-in; }

/* ---------- Buy column ---------- */
.apa-buy { position: sticky; top: 130px; min-width: 0; }
.apa-buy .apa-ben, .apa-details details { scroll-margin-top: 140px; scroll-margin-bottom: 24px; }
.apa-pdp .apa-pdp__title { margin: 0; font-family: inherit; font-weight: 300; font-size: 34px; line-height: 1.1; letter-spacing: .02em; text-transform: none; color: #111; }
.apa-pdp .apa-pdp__title b { font-weight: 700; }
.apa-pdp .apa-pdp__kind { display: block; margin: 0 0 10px; font-size: 10px; line-height: 1.5; letter-spacing: .3em; text-transform: uppercase; opacity: .55; }
.apa-pdp details > p a { text-decoration: underline; text-underline-offset: 3px; }
.apa-pdp .apa-pdp__pos { margin: 6px 0 0; font-size: 13px; line-height: 1.5; opacity: .7; }

/* The Buy Button draws price, options and button in here once Shopify answers.
   The room is kept free from the start, so nothing below jumps when it arrives. */
.apa-pdp #product { margin: 18px 0 0; min-height: 380px; text-align: left; font-family: inherit; }
.apa-pdp--pouch #product { min-height: 300px; }
.apa-pdp #product .shopify-buy__product { margin: 0; padding: 0; }

.apa-pdp #product .shopify-buy__product__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; margin: 0; padding: 0 !important; text-align: left; }
.apa-pdp #product .shopify-buy__product__actual-price { font-family: inherit; font-weight: 700; font-size: 28px; line-height: 1.5; letter-spacing: normal; color: #111; }
.apa-pdp #product .shopify-buy__product__compare-price { font-family: inherit; font-weight: 300; font-size: 16px; line-height: 1.5; letter-spacing: normal; color: #111; opacity: .5; text-decoration: line-through; }
.apa-pdp .apa-pill { display: inline-block; background: #C8102E; color: #fff; font-family: inherit; font-weight: 700; font-size: 10px; line-height: 1.5; letter-spacing: .24em; text-transform: uppercase; padding: 5px 9px; white-space: nowrap; }
.apa-pdp #product .apa-price-floor { margin: 4px 0 0 !important; font-family: inherit !important; font-weight: 300; font-size: 12px; line-height: 1.5; letter-spacing: normal; color: #111 !important; opacity: .7; text-align: left; }

.apa-pdp #product .shopify-buy__product__variant-selectors { padding: 0 !important; margin: 0; }
.apa-pdp #product .shopify-buy__option-select-wrapper,
.apa-pdp #product .shopify-buy__option-select-wrapper.Size,
.apa-pdp #product .shopify-buy__option-select-wrapper.Laces { margin: 0; padding: 0 !important; border: 0; text-align: left; }
.apa-pdp #product .shopify-buy__option-select-wrapper .shopify-buy__option-select__label { display: flex !important; justify-content: space-between; align-items: baseline; margin: 26px 0 10px; padding: 0; font-family: inherit; font-weight: 300; font-size: 10px; line-height: 1.5; letter-spacing: .3em; text-transform: uppercase; color: #111; text-align: left !important; }
.apa-pdp .apa-option-meta { font-family: inherit; font-weight: 300; font-size: 10px; line-height: 1.5; letter-spacing: .1em; text-transform: none; color: #111; }
.apa-pdp .apa-colour-name { opacity: .55; }
.apa-pdp button.apa-option-meta { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.apa-pdp button.apa-option-meta:hover { color: #C8102E; }

.apa-pdp #product .shopify-buy__option-select-wrapper > div { display: flex; flex-wrap: wrap; justify-content: flex-start !important; align-items: center; margin: 0 !important; padding: 0; }

/* Colour (and laces): the mockup's circles, a touch bigger (32 instead of 28), ring on the selected one.
   The colour's name shows on hover (theme tooltip) and at the right of the label. */
.apa-pdp #product .Color .shopify-buy__option-select,
.apa-pdp #product .Laces .shopify-buy__option-select { width: 32px; height: 32px; min-width: 0; margin: 5px 15px 5px 5px !important; padding: 0; border: 0 !important; border-radius: 50%; box-shadow: none; outline: 0; cursor: pointer; }
.apa-pdp #product .Laces .shopify-buy__option-select { width: 24px; height: 24px; }
.apa-pdp #product .Color .shopify-buy__option-select:hover,
.apa-pdp #product .Laces .shopify-buy__option-select:hover { box-shadow: 0 0 0 3px #F7F6F3, 0 0 0 4px rgba(17, 17, 17, .35); }
.apa-pdp #product .Color .shopify-buy__option--selected,
.apa-pdp #product .Laces .shopify-buy__option--selected,
.apa-pdp #product .Color .shopify-buy__option--selected:hover,
.apa-pdp #product .Laces .shopify-buy__option--selected:hover { box-shadow: 0 0 0 3px #F7F6F3, 0 0 0 5px #111; }
.apa-pdp #product .Color .shopify-buy__option-select:focus-visible,
.apa-pdp #product .Laces .shopify-buy__option-select:focus-visible { box-shadow: 0 0 0 3px #F7F6F3, 0 0 0 5px #C8102E; }

/* Sizes: six equal boxes across the column, the selected one filled */
.apa-pdp #product .Size > div { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.apa-pdp #product .Size .shopify-buy__option-select { width: 100%; min-width: 0; height: 44px; margin: 0 !important; padding: 0; border: 1px solid rgba(17, 17, 17, .25) !important; border-radius: 0; background: #fff !important; color: #111 !important; font-family: inherit; font-weight: 300; font-size: 12px; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.apa-pdp #product .Size .shopify-buy__option-select:hover { border-color: #111 !important; }
.apa-pdp #product .Size .shopify-buy__option--selected,
.apa-pdp #product .Size .shopify-buy__option--selected:hover { background: #111 !important; color: #fff !important; border-color: #111 !important; }
.apa-pdp .apa-fit-note { margin: 10px 0 0; font-size: 12px; line-height: 1.5; opacity: .7; text-align: left; }

.apa-pdp #product .shopify-buy__info { display: none !important; } /* the old "Size Guide" image link: replaced by the link next to SIZE */

.apa-pdp #product .shopify-buy__btn { width: 100% !important; height: 58px; margin: 22px 0 0 !important; padding: 0 12px !important; background: #111 !important; color: #fff !important; border: 0 !important; border-radius: 0; font-family: inherit !important; font-weight: 700; font-size: 12px; line-height: 1.5; letter-spacing: .32em; text-transform: uppercase; cursor: pointer; }
.apa-pdp #product .shopify-buy__btn span { font: inherit; letter-spacing: inherit; color: inherit; }
.apa-pdp #product .shopify-buy__btn:hover { background: #000 !important; }
.apa-pdp #product .shopify-buy__btn[disabled] { background: #dedbd5 !important; color: #777 !important; cursor: default; }
.apa-pdp #product .show-form { text-align: left; }

.apa-pdp .apa-gift { margin: 12px 0 0; padding: 12px 14px; border: 1px solid #C8102E; font-size: 12px; line-height: 1.5; }
.apa-pdp .apa-gift b { color: #C8102E; }
.apa-pdp .apa-ship { margin: 14px 0 0; font-size: 12px; line-height: 1.9; opacity: .8; }
.apa-pdp .apa-trust { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid rgba(17, 17, 17, .15); border-bottom: 1px solid rgba(17, 17, 17, .15); }
.apa-pdp .apa-trust li { padding: 12px 6px; font-size: 10px; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; text-align: center; border-left: 1px solid rgba(17, 17, 17, .15); }
.apa-pdp .apa-trust li:first-child { border-left: 0; }

/* Feature lines: bold claim + one sentence, a small icon in front, hairlines between */
.apa-pdp .apa-ben { list-style: none; margin: 22px 0 0; padding: 0; }
.apa-pdp .apa-ben li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: 14px; line-height: 1.45; border-bottom: 1px solid rgba(17, 17, 17, .1); }
.apa-pdp .apa-ben img { flex: none; width: 20px; height: 20px; margin-top: 0; mix-blend-mode: multiply; } /* multiply: the icon files' white ground takes the page colour */
.apa-pdp .apa-ben[data-collapsed] .apa-ben__more { display: none; }
.apa-pdp .apa-more { display: inline-block; margin: 14px 0 0; padding: 0 0 3px; background: none; border: 0; border-bottom: 1px solid #111; font-size: 11px; line-height: 1.5; letter-spacing: .3em; text-transform: uppercase; cursor: pointer; }
.apa-pdp .apa-more:hover { color: #C8102E; border-color: #C8102E; }

/* Accordions (Details, Shipping & Returns, Care & Composition) and the questions below: same design */
.apa-details { max-width: 900px; margin: 90px auto 0; padding: 0 32px; }
.apa-details details:first-of-type { border-top: 1px solid rgba(17, 17, 17, .15); }
.apa-pdp details { border-bottom: 1px solid rgba(17, 17, 17, .15); overflow: hidden; }
.apa-pdp summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; font-size: 11px; line-height: 1.5; letter-spacing: .3em; text-transform: uppercase; list-style: none; cursor: pointer; }
.apa-pdp summary::-webkit-details-marker { display: none; }
.apa-pdp summary::after { content: "+"; flex: none; font-size: 16px; line-height: 1.5; letter-spacing: 0; }
.apa-pdp details[open] summary::after { content: "\2212"; }
.apa-pdp details > p,
.apa-pdp .apa-acc__body { margin: 0 0 14px; font-size: 13px; line-height: 1.6; letter-spacing: .4px; opacity: .8; }
.apa-pdp .apa-acc__body p,
.apa-pdp .apa-acc__body li { margin: 0 0 8px; font-size: 13px; line-height: 1.6; letter-spacing: .4px; color: #111; }
.apa-pdp .apa-acc__body > :last-child { margin-bottom: 0; }
.apa-pdp .apa-acc__body ul { margin: 0 0 8px; padding-left: 18px; }
.apa-pdp .apa-acc__body a { text-decoration: underline; text-underline-offset: 3px; }
.apa-pdp .apa-faq-link { margin: 14px 0 0; font-size: 12px; line-height: 1.5; opacity: .7; }
.apa-pdp .apa-faq-link a { text-decoration: underline; text-underline-offset: 3px; }
.apa-pdp .apa-faq-link a:hover { color: #C8102E; }

/* ---------- Sections below (mockup: 90 above "Why", 80 above the others) ---------- */
.apa-pdp .apa-h2,
.apa-modal .apa-h2 { margin: 0 0 26px; font-family: inherit; font-weight: 300; font-size: 30px; line-height: 1.5; letter-spacing: 0; text-transform: none; color: #111; }
.apa-pdp .apa-h2 b,
.apa-modal .apa-h2 b { font-weight: 700; }
.apa-pdp .apa-more-link { display: inline-block; margin-top: 18px; padding-bottom: 3px; border-bottom: 1px solid #111; font-size: 11px; line-height: 1.5; letter-spacing: .3em; text-transform: uppercase; text-decoration: none; }
.apa-pdp .apa-more-link:hover { color: #C8102E; border-color: #C8102E; }

.apa-why { max-width: 1320px; margin: 90px auto 0; padding: 0 32px; }
.apa-pdp .apa-strip { display: grid; grid-template-columns: repeat(6, 1fr); list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(17, 17, 17, .2); border-bottom: 1px solid rgba(17, 17, 17, .2); }
.apa-pdp .apa-strip li { padding: 22px 16px; border-left: 1px solid rgba(17, 17, 17, .12); font-size: 11px; line-height: 1.6; letter-spacing: .16em; text-transform: uppercase; }
.apa-pdp .apa-strip li:first-child { border-left: 0; }
.apa-pdp .apa-strip li span { display: block; margin-bottom: 6px; font-size: 24px; line-height: 1.6; font-weight: 300; letter-spacing: 0; text-transform: none; }
.apa-pdp .apa-strip li small { display: block; margin-top: 8px; font-size: 13px; line-height: 1.5; letter-spacing: normal; text-transform: none; opacity: .7; }

.apa-pouch { max-width: 1320px; margin: 80px auto 0; padding: 0 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.apa-pouch__media { display: block; background: #e9e7e2; }
.apa-pouch__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.apa-pdp .apa-pouch__text p { margin: 0; font-size: 15px; line-height: 1.6; letter-spacing: .4px; opacity: .85; }
.apa-pdp .apa-btn { display: inline-block; margin-top: 30px; padding: 14px 22px; border: 1px solid #111; font-weight: 700; font-size: 11px; line-height: 1.5; letter-spacing: .3em; text-transform: uppercase; text-decoration: none; }
.apa-pdp .apa-btn:hover { background: #111; color: #fff; }

.apa-faq { max-width: 900px; margin: 80px auto 0; padding: 0 32px; }
.apa-faq details:first-of-type { border-top: 1px solid rgba(17, 17, 17, .15); }

/* "There's more" (related products) follows on the same background */
body.single-product .apa-pdp ~ .text-section,
body.single-product .apa-pdp ~ .product-grid { background: #F7F6F3; }
body.single-product .apa-pdp ~ .product-grid { margin-bottom: 0 !important; padding-bottom: 60px; }
body.single-product .apa-pdp + .text-section { padding-top: 0 !important; }

/* ---------- Phone: bar with the price while the real button is out of sight ---------- */
.apa-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 990; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid rgba(17, 17, 17, .15); }
.apa-sticky .apa-sticky__price { font-size: 16px; }
.apa-sticky .apa-sticky__was { font-size: 12px; opacity: .5; text-decoration: line-through; }
.apa-sticky__btn { height: 48px; padding: 0 22px; background: #111; color: #fff; border: 0; font-family: inherit; font-weight: 700; font-size: 12px; letter-spacing: .32em; text-transform: uppercase; cursor: pointer; }

/* ---------- Size guide ---------- */
.apa-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity .15s ease; }
.apa-modal[hidden] { display: none; }
.apa-modal.is-open { opacity: 1; }
.apa-modal__backdrop { position: absolute; inset: 0; background: rgba(17, 17, 17, .55); }
.apa-modal__panel { position: relative; width: min(780px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: #F7F6F3; padding: 36px 40px 32px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.apa-modal__close { position: absolute; top: 12px; right: 14px; width: 44px; height: 44px; background: none; border: 0; font-size: 28px; line-height: 1; color: #111; cursor: pointer; }
.apa-modal .apa-kicker { margin: 0 0 6px; font-size: 10px; line-height: 1.5; letter-spacing: .3em; text-transform: uppercase; opacity: .55; }
.apa-modal .apa-h2 { margin-bottom: 8px; line-height: 1.2; }
.apa-modal .apa-modal__lede { margin: 0; font-size: 13px; line-height: 1.5; opacity: .7; }
.apa-modal__head { display: flex; justify-content: space-between; align-items: center; margin: 26px 0 10px; }
.apa-modal .apa-h3 { margin: 0; font-family: inherit; font-weight: 300; font-size: 10px; line-height: 1.5; letter-spacing: .3em; text-transform: uppercase; color: #111; }
.apa-units { display: inline-flex; border: 1px solid #111; }
.apa-modal .apa-units button { background: transparent; border: 0; padding: 5px 12px; font-size: 10px; line-height: 1.5; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
.apa-modal .apa-units button.is-on { background: #111; color: #fff; }
.apa-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 1px solid rgba(17, 17, 17, .2); }
.apa-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 13px; line-height: 1.5; }
.apa-table th, .apa-table td { padding: 10px 8px; text-align: center; border-bottom: 1px solid rgba(17, 17, 17, .12); white-space: nowrap; font-weight: 300; }
.apa-table thead th { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.apa-table th[scope="row"], .apa-table thead th:first-child { position: sticky; left: 0; padding-left: 0; text-align: left; background: #F7F6F3; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.apa-table .is-selected { background: #111; color: #fff; }
.apa-modal .apa-modal__note { margin: 14px 0 0; font-size: 12px; line-height: 1.5; opacity: .8; }
.apa-modal .apa-modal__chart { display: block; width: 100%; height: auto; margin: 0; border: 1px solid rgba(17, 17, 17, .12); }
.apa-modal .apa-modal__note a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Picture viewer: the whole picture, then a closer look where you click ---------- */
.apa-lb { position: fixed; inset: 0; z-index: 100000; font-family: "DIN Alternate", "Helvetica Neue", Arial, sans-serif; font-weight: 300; color: #111; opacity: 0; transition: opacity .18s ease; }
.apa-lb[hidden] { display: none; }
.apa-lb.is-open { opacity: 1; }
.apa-lb__backdrop { position: absolute; inset: 0; background: #F7F6F3; }
.apa-lb__stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: zoom-in; touch-action: none; -webkit-user-select: none; user-select: none; }
.apa-lb.is-zoomed .apa-lb__stage { cursor: zoom-out; }
.apa-lb__img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; transform-origin: 0 0; will-change: transform; -webkit-user-drag: none; }
.apa-lb.is-easing .apa-lb__img { transition: transform .3s ease; }
.apa-lb__close, .apa-lb__nav { position: absolute; z-index: 2; width: 48px; height: 48px; padding: 0; background: rgba(247, 246, 243, .85); border: 0; border-radius: 50%; color: #111; font-family: inherit; font-weight: 300; line-height: 1; cursor: pointer; }
.apa-lb__close { top: 16px; right: 16px; font-size: 30px; }
.apa-lb__nav { top: 50%; transform: translateY(-50%); font-size: 34px; }
.apa-lb__nav--prev { left: 16px; }
.apa-lb__nav--next { right: 16px; }
.apa-lb__nav[disabled] { opacity: .25; cursor: default; }
.apa-lb__close:hover, .apa-lb__nav:not([disabled]):hover { background: #fff; }
.apa-lb__hint, .apa-lb__count { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; font-size: 10px; line-height: 1.5; letter-spacing: .3em; text-transform: uppercase; opacity: .6; white-space: nowrap; pointer-events: none; }
.apa-lb__hint { top: 24px; }
.apa-lb.is-zoomed .apa-lb__hint { opacity: 0; }
.apa-lb__count { bottom: 20px; }

/* ---------- Comparison on staging (?font=work-sans): descriptions in the site's text font ---------- */
body.apa-font-text .apa-pdp__pos,
body.apa-font-text .apa-ben li span,
body.apa-font-text .apa-gift,
body.apa-font-text .apa-ship,
body.apa-font-text .apa-fit-note,
body.apa-font-text .apa-acc__body,
body.apa-font-text .apa-acc__body p,
body.apa-font-text .apa-acc__body li,
body.apa-font-text details > p,
body.apa-font-text .apa-strip li small,
body.apa-font-text .apa-pouch__text p,
body.apa-font-text .apa-modal__lede,
body.apa-font-text .apa-modal__note { font-family: "Work Sans", "Helvetica Neue", Arial, sans-serif; font-weight: 400; font-size: 15px; line-height: 1.6; letter-spacing: .3px; color: #5a6470; } /* the Help & FAQ page's text grey */
body.apa-font-text .apa-ben li b, body.apa-font-text .apa-acc__body b, body.apa-font-text .apa-acc__body strong, body.apa-font-text .apa-gift b { font-weight: 600; color: #3a475f; } /* the Help & FAQ page's bold navy */
body.apa-font-text .apa-ben li span { font-size: 15px; }
body.apa-font-text .apa-pouch__text p { font-size: 16px; }
/* the "why it costs" strip keeps DIN for its descriptions: Work Sans ran too big in six narrow columns */
body.apa-font-text .apa-pdp .apa-strip li small { font-family: "DIN Alternate", "DIN 2014", sans-serif; font-weight: 400; font-size: 13px; line-height: 1.55; letter-spacing: .01em; }
body.apa-font-text .apa-gift,
body.apa-font-text .apa-ship,
body.apa-font-text .apa-fit-note,
body.apa-font-text .apa-modal__note { font-size: 14px; }

/* ---------- Narrow screens (mockup: one column below 980) ---------- */
@media (max-width: 980px) {
	.apa-wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 24px 16px 0; }
	.apa-buy { position: static; }
	.apa-buy .apa-ben, .apa-details details { scroll-margin-top: 150px; }
	.apa-details { padding: 0 16px; margin-top: 60px; }
	.apa-lb__nav { display: none; }
	.apa-why, .apa-faq { padding: 0 16px; }
	.apa-pdp .apa-strip { grid-template-columns: repeat(2, 1fr); }
	.apa-pdp .apa-strip li:nth-child(odd) { border-left: 0; }
	.apa-pouch { grid-template-columns: 1fr; padding: 0 16px; }
	.apa-sticky.is-on { display: flex; }
	body.apa-has-sticky { padding-bottom: 68px; }
	.apa-modal { padding: 0; align-items: flex-end; }
	.apa-modal__panel { width: 100%; max-height: 92vh; padding: 28px 16px 24px; }
	/* On a phone the whole table fits the screen: no sideways scrolling */
	.apa-table { min-width: 0; table-layout: fixed; font-size: 12px; }
	.apa-table th, .apa-table td { padding: 10px 1px; }
	.apa-table thead th { font-size: 10px; letter-spacing: .06em; }
	.apa-table th[scope="row"], .apa-table thead th:first-child { width: 25%; font-size: 9px; letter-spacing: .08em; white-space: normal; }
}

/* ---------- Customer reviews, under the "why it costs" strip: hairline columns on the warm ground, thin arrows show the rest ---------- */
.apa-reviews { margin: 80px 0 0; padding: 72px 0 64px; background: #f4f1ea; text-align: center; }
.apa-reviews .apa-h2 { margin: 0; padding: 0 32px; }
.apa-car { position: relative; max-width: 1320px; margin: 44px auto 0; padding: 0 76px; }
.apa-car .g { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; list-style: none; margin: 0; padding: 0; }
.apa-car .g::-webkit-scrollbar { display: none; }
.apa-car .it { flex: 0 0 33.333%; scroll-snap-align: start; padding: 8px 36px; text-align: left; border-left: 1px solid rgba(17, 17, 17, .18); }
.apa-car .it:first-child { border-left: 0; }
.apa-car__arr { position: absolute; top: 50%; width: 36px; height: 36px; margin-top: -18px; padding: 0; border: 0; background: none; cursor: pointer; opacity: .55; transition: opacity .25s, transform .25s; }
.apa-car__arr::before { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; border: solid #111; border-width: 0 1px 1px 0; transform: translate(-65%, -50%) rotate(-45deg); }
.apa-car__arr.prev { left: 0; } .apa-car__arr.prev::before { transform: translate(-35%, -50%) rotate(135deg); }
.apa-car__arr.next { right: 0; }
.apa-car__arr:hover { opacity: 1; }
.apa-car__arr:hover.next { transform: translateX(3px); } .apa-car__arr:hover.prev { transform: translateX(-3px); }
.apa-car__arr:disabled { opacity: .15; cursor: default; }
.apa-reviews__stars { display: block; margin-bottom: 16px; font-size: 10px; letter-spacing: .3em; color: #212a40; }
.apa-reviews__list q { display: block; quotes: "“" "”"; font: 300 18px/1.55 "Work Sans", sans-serif; color: #212a40; }
.apa-reviews__list small { display: block; margin-top: 20px; font: 400 10px/1.4 "DIN Alternate", sans-serif; letter-spacing: .28em; text-transform: uppercase; color: #5a6470; }
.apa-car__dots { display: none; justify-content: center; gap: 6px; margin-top: 26px; }
.apa-car__dots button { width: 18px; height: 14px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.apa-car__dots button::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: #111; opacity: .25; transition: opacity .3s, transform .3s; }
.apa-car__dots button.on::before { opacity: 1; height: 2px; top: 5.5px; }
@media (max-width: 980px) {
	.apa-reviews { margin-top: 56px; padding: 52px 0 44px; }
	.apa-reviews .apa-h2 { padding: 0 16px; }
	.apa-car { padding: 0; margin-top: 30px; }
	.apa-car .g { scroll-snap-type: x mandatory; padding: 0; }
	.apa-car .it, .apa-car .it + .it { flex: 0 0 100%; padding: 4px 32px; border: 0; text-align: center; }
	.apa-reviews__stars { margin-bottom: 18px; font-size: 11px; letter-spacing: .34em; }
	.apa-reviews__list q { font-size: 19px; line-height: 1.5; }
	.apa-reviews__list small { margin-top: 18px; }
	.apa-car__arr { display: none; }
	.apa-car__dots { display: flex; }
}

/* ---------- Details: the content comes from the editor (icon column + text column, bullet lists); tidied here ---------- */
.apa-pdp .apa-acc__body .lgc-grid-20 { width: 64px !important; float: left; }
.apa-pdp .apa-acc__body .lgc-grid-80 { width: calc(100% - 64px) !important; float: left; }
.apa-pdp .apa-acc__body .lgc-column { padding: 0 !important; margin: 0 0 18px !important; }
.apa-pdp .apa-acc__body .lgc-clear { clear: both; }
.apa-pdp .apa-acc__body .lgc-grid-20 img { width: 34px; height: auto; margin-top: 2px; }
.apa-pdp .apa-acc__body .lgc-grid-20 p, .apa-pdp .apa-acc__body .lgc-grid-80 p:empty { margin: 0; }
.apa-pdp .apa-acc__body .lgc-grid-80 p:first-child { margin-bottom: 2px; }
.apa-pdp .apa-acc__body .lgc-grid-80 p:first-child strong { font: 700 11px/1.5 "DIN Alternate", "DIN 2014", sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #212529; }
.apa-pdp .apa-acc__body > p > strong:only-child { display: block; margin: 22px 0 14px; font: 400 10px/1.5 "DIN Alternate", "DIN 2014", sans-serif; letter-spacing: .3em; text-transform: uppercase; opacity: .55; }
.apa-pdp .apa-acc__body > p:first-child > strong:only-child { margin-top: 0; }
.apa-pdp .apa-acc__body ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid rgba(17, 17, 17, .12); }
.apa-pdp .apa-acc__body ul li { margin: 0; padding: 10px 0; border-bottom: 1px solid rgba(17, 17, 17, .12); }
/* the size & fit tab */
.apa-sizes { width: 100%; border-collapse: collapse; margin: 6px 0 16px; font-size: 13px; }
.apa-sizes th, .apa-sizes td { padding: 8px 6px; text-align: center; border-bottom: 1px solid rgba(17, 17, 17, .12); }
.apa-sizes thead th { font: 700 11px/1.4 "DIN Alternate", "DIN 2014", sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.apa-sizes tbody th { text-align: left; font-weight: 400; color: #4b5561; }
.apa-pdp .apa-acc__body--sizes button.apa-more-link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
@media (max-width: 600px) { .apa-sizes { font-size: 12px; } .apa-sizes th, .apa-sizes td { padding: 7px 3px; } }