/* Homepage, version 3 (Oct 2026): changes to the existing blocks, shown only with ?home=v3
   on the front page (functions.php adds the body class apa-home-v3). Nothing here touches
   the page without the parameter.
   The phone hero, the sale pill, the pouch block and the type of the new sections are copied
   from the mockup pages 6714 (home v3) and 6708 (home v1), measure for measure. */

/* ---------- Shared pieces from the mockup: kicker, link, button ---------- */
.apa-eb { font: 900 12px/1.4 "Avenir Black", "Avenir", sans-serif; letter-spacing: 2.5px; text-transform: uppercase; color: #d0021b; }
.apa-eb.g { color: #8a929c; }
.apa-ul { display: inline-block; font: 900 11px/1 "Avenir Black", "Avenir", sans-serif; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; padding-bottom: 8px; color: #212a40; background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat; transition: background-size .45s ease; }
.apa-ul:hover { background-size: 35% 1px; color: inherit; }
.apa-cta { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 35px; font: 900 12px/1 "Avenir Black", "Avenir", sans-serif; letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none; border: 1.5px solid currentColor; transition: background .35s, color .35s, border-color .35s; }
.apa-cta.w { color: #fff; }
.apa-cta.w:hover { background: #fff; color: #212a40; border-color: #fff; }

/* ---------- Hero: desktop and tablet keep the theme's hero, spacing only ---------- */
.apa-hero-m { display: none; }
@media (min-width: 768px) {
	.apa-home-v3 .hero__content h2.text--14 { margin-bottom: 18px !important; }
	.apa-home-v3 .hero__title { margin-bottom: 18px !important; }
	.apa-home-v3 .hero__description { margin-bottom: 34px; max-width: 460px; line-height: 1.55; }
	.apa-home-v3 .hero__buttons div:not(:last-child) { margin-right: 14px; }
}

/* ---------- Hero: phone, the mockup's hero (page 6714) as built ---------- */
@media (max-width: 767px) {
	.apa-home-v3 .hero, .apa-home-v3 .hero + .wp-block-spacer { display: none !important; }
	.apa-hero-m { position: relative; display: flex; align-items: flex-end; aspect-ratio: 2 / 3; overflow: hidden; color: #fff; font-family: "Work Sans", sans-serif; }
	.apa-hero-m img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 20%; }
	.apa-hero-m::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15, 19, 31, .75) 0%, rgba(15, 19, 31, .2) 55%, rgba(15, 19, 31, 0) 75%); }
	.apa-hero-m .in { position: relative; z-index: 1; width: 100%; padding: 0 22px 34px; }
	.apa-hero-m .t { margin: 0; font: 300 42px/1 "DIN Alternate", sans-serif; letter-spacing: .05em; text-transform: uppercase; color: #fff; }
	.apa-hero-m .t b { font-weight: 700; letter-spacing: .04em; }
	.apa-hero-m .rule { width: 40px; height: 2px; background: #fff; margin: 20px 0 16px; }
	.apa-hero-m .sub { max-width: 420px; font: 500 14px/1.6 "Work Sans", sans-serif; letter-spacing: .4px; color: #fff; }
	.apa-hero-m .ctas { margin-top: 24px; display: flex; gap: 8px; }
	.apa-hero-m .apa-cta { flex: 1; padding: 0 10px; height: 48px; }
}

/* ---------- The sale in the hero, while it runs: one clear line above the title ---------- */
.apa-hero-deal { margin: 0 0 18px; font: 400 18px/1.3 "DIN Alternate", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.apa-hero-deal b { font-weight: 700; padding: 3px 8px; margin: 0 2px; background: #d0021b; color: #fff; }
.apa-hero-m .apa-hero-deal { margin: 0 0 14px; font-size: 12px; letter-spacing: .16em; }
.apa-hero-m .apa-hero-deal b { padding: 2px 6px; }

/* ---------- The scroll cue in the hero: the word in small caps over a hairline with a travelling light.
   It sits one screen down from the top, so it is in view on load even when the hero is taller
   than the screen (the hero on a 16-inch MacBook runs past the fold). ---------- */
.apa-home-v3 .hero { position: relative; }
.apa-hero-arrow { position: absolute; left: 50%; top: min(calc(100vh - 100px), calc(100% - 80px)); z-index: 5; width: 40px; height: 48px; margin-left: -20px; display: block; text-decoration: none; color: #fff; opacity: 0; animation: apa-cue-in 1s ease 2.5s forwards; } /* appears after a couple of seconds, then stays still */
.apa-hero-arrow span { position: absolute; left: 50%; top: 0; width: 1px; height: 30px; margin-left: -0.5px; background: rgba(255, 255, 255, .75); } /* a hairline … */
.apa-hero-arrow svg { position: absolute; left: 50%; top: 32px; margin-left: -13px; display: block; opacity: .9; } /* … ending in a shallow, open chevron, one pixel thin */
@keyframes apa-cue-in { to { opacity: .9; } }
.apa-hero-arrow:hover { opacity: 1; }
.apa-hero-m .apa-hero-arrow { display: none; }

/* ---------- "From the meeting to the downpour" and the icon row on a phone ---------- */
@media (max-width: 767px) {
	.apa-home-v3 .text-section { padding-top: 56px !important; }
	.apa-home-v3 .text-section h2.text--14 { font-size: 11px; letter-spacing: .3em; margin-bottom: 10px !important; }
	.apa-home-v3 .text-section .text--40 { font-size: 30px !important; line-height: 1.15 !important; letter-spacing: .06em !important; margin-bottom: 14px !important; }
	.apa-home-v3 .text-section p { font-size: 16px; line-height: 1.6; padding: 0 8px; }
	.apa-home-v3 .icon-row .features__icons { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 20px 8px; margin: 8px 0 20px !important; }
	.apa-home-v3 .icon-row .features__icons > div { padding: 0 !important; margin: 0 !important; }
	.apa-home-v3 .icon-row img { width: 34px; height: 34px; margin-bottom: 8px !important; }
	.apa-home-v3 .icon-row h4 { font-size: 11px; line-height: 1.3; letter-spacing: .02em; }
}

/* ---------- Product grids: the sale pill from page 6708; swipe rows on a phone as on 6714 ---------- */
.apa-home-v3 .product-grid__image-wrapper { position: relative; }
.apa-home-v3 .apa-sale-badge { position: absolute; z-index: 2; top: 12px; left: 12px; background: #fff; color: #212a40; font: 400 10px/1 "DIN Alternate", sans-serif; letter-spacing: .2em; text-transform: uppercase; padding: 7px 9px; pointer-events: none; }
@media (max-width: 767px) {
	.apa-home-v3 .apa-sale-badge { top: 8px; left: 8px; font-size: 9px; padding: 6px 7px; }
	.apa-home-v3 .product-grid { margin: 32px 0 0 !important; }
	.apa-home-v3 .product-grid .container { padding-left: 0; padding-right: 0; max-width: none; }
	.apa-home-v3 .product-grid .fadeUp, .apa-home-v3 .product-grid [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
	.apa-home-v3 .product-grid .row { display: flex; flex-wrap: nowrap; justify-content: flex-start !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 16px; gap: 12px; margin: 0; padding: 0 16px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.apa-home-v3 .product-grid .row::-webkit-scrollbar { display: none; }
	.apa-home-v3 .product-grid__column { flex: 0 0 46%; max-width: none; padding: 0; margin: 0 !important; scroll-snap-align: start; }
	.apa-home-v3 .product-grid__information h3 { font-size: 12px; letter-spacing: 1px; margin-bottom: 2px; }
	.apa-home-v3 .product-grid__colour-name { font-size: 13px !important; margin-bottom: 2px !important; }
	.apa-home-v3 .product-grid__column .text--14 { font-size: 12px; }
}

/* ---------- The travel pouch: the mockup's block (page 6714) as built; the live block stays under it to compare ---------- */
.apa-ed { display: grid; grid-template-columns: 1fr 1fr; align-items: center; max-width: 1320px; margin: 0 auto; padding: 48px 32px; font-family: "Work Sans", sans-serif; color: #212529; }
.apa-ed .im { aspect-ratio: 4 / 5; overflow: hidden; background: #efede8; }
.apa-ed .im img { display: block; width: 100%; height: 100%; object-fit: cover; }
.apa-ed .tx { padding: 0 9%; }
.apa-ed h2 { margin: 16px 0 22px; font: 300 42px/1.12 "DIN Alternate", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #212a40; }
.apa-ed p { margin: 0 0 18px; font-size: 16px; line-height: 1.75; letter-spacing: normal; color: #5a6470; max-width: 480px; }
.apa-ed .apa-ul { margin-top: 12px; }
.apa-home-v3 .features { display: none !important; } /* the theme's pouch block, replaced by the one above */
@media (max-width: 1100px) { .apa-ed h2 { font-size: 32px; } }
@media (max-width: 767px) {
	.apa-ed { display: block; padding: 6px; }
	.apa-ed .tx { padding: 30px 16px 52px; }
	.apa-ed h2 { font-size: 28px; margin: 12px 0 14px; }
	.apa-ed p { font-size: 15px; }
}

/* ---------- Customer reviews: the product page's strip (hairline columns on the warm ground), four per line, thin arrows ---------- */
.apa-rev { background: #f4f1ea; margin-top: 88px; padding: 80px 32px 72px; text-align: center; font-family: "Work Sans", sans-serif; color: #212529; }
.apa-rev h2 { margin: 14px auto 0; font: 300 40px/1.1 "DIN Alternate", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #212a40; }
.apa-rev h2 b { font-weight: 700; }
.apa-car { position: relative; max-width: 1256px; margin: 48px 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; }
.apa-car .g::-webkit-scrollbar { display: none; }
.apa-car .it { flex: 0 0 25%; scroll-snap-align: start; padding: 8px 32px; text-align: left; border-left: 1px solid rgba(33, 42, 64, .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 #212a40; 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-rev .st { display: block; margin-bottom: 16px; font-size: 10px; letter-spacing: .3em; color: #212a40; }
.apa-rev q { display: block; quotes: "“" "”"; font: 300 17px/1.55 "Work Sans", sans-serif; color: #212a40; }
.apa-rev 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: #212a40; opacity: .25; transition: opacity .3s, transform .3s; }
.apa-car__dots button.on::before { opacity: 1; height: 2px; top: 5.5px; }
@media (max-width: 1100px) { .apa-car .it { flex-basis: 33.333%; padding: 8px 22px; } .apa-rev q { font-size: 16px; } }
@media (max-width: 767px) {
	.apa-rev { margin-top: 56px; padding: 56px 0 44px; }
	.apa-rev h2 { font-size: 28px; }
	.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-rev .st { margin-bottom: 18px; font-size: 11px; letter-spacing: .34em; }
	.apa-rev q { font-size: 19px; line-height: 1.5; }
	.apa-rev small { margin-top: 18px; }
	.apa-car__arr { display: none; }
	.apa-car__dots { display: flex; }
}

/* ---------- Seen and awarded: a band in the site's navy, like the mockup's numbers band ---------- */
.apa-home-v3 .suggestions, .apa-home-v3 .featured-blog-post { display: none !important; }
.apa-awards { background: #212a40; color: #fff; padding: 72px 32px 68px; margin-top: 0; text-align: center; font-family: "Work Sans", sans-serif; }
.apa-awards .apa-eb { color: rgba(255, 255, 255, .55); }
.apa-awards h2 { margin: 14px 0 44px; font: 300 40px/1.1 "DIN Alternate", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.apa-awards h2 b { font-weight: 700; }
.apa-awards .g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 1100px; margin: 0 auto; }
.apa-awards .it { padding: 4px 16px; border-left: 1px solid rgba(255, 255, 255, .14); }
.apa-awards .it:first-child { border-left: 0; }
.apa-awards .it b { display: block; font: 700 15px/1.3 "DIN Alternate", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.apa-awards .it span { display: block; margin: 10px auto 0; max-width: 240px; font-size: 13px; line-height: 1.55; opacity: .7; }
.apa-awards .it .apa-ul { margin-top: 14px; color: #fff; font-size: 10px; }
.apa-awards .it.hub b { font-size: 16px; }
/* the service strip: a light, compact row under the band, nothing like it */
.apa-svc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1100px; margin: 0 auto; padding: 36px 32px; border-bottom: 1px solid rgba(33, 42, 64, .12); font-family: "Work Sans", sans-serif; color: #212a40; }
.apa-svc div { display: flex; flex-direction: column; align-items: center; text-align: center; }
.apa-svc b { display: block; font: 400 11px/1.4 "DIN Alternate", sans-serif; letter-spacing: .28em; text-transform: uppercase; color: #212a40; }
.apa-svc span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.5; color: #5a6470; }
.apa-svc a { color: #212a40; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(33, 42, 64, .35); }
.apa-svc a:hover { text-decoration-color: #212a40; }
@media (max-width: 991px) {
	.apa-awards .g { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
	.apa-awards .it:nth-child(odd) { border-left: 0; }
	.apa-svc { grid-template-columns: 1fr 1fr; gap: 24px 12px; }
}
@media (max-width: 767px) {
	.apa-awards { padding: 56px 20px 48px; }
	.apa-svc { padding: 28px 16px; }
	.apa-awards h2 { font-size: 28px; margin-bottom: 40px; }
	.apa-awards .g { grid-template-columns: 1fr 1fr; gap: 40px 12px; }
	.apa-awards .it { padding: 0; border-left: 0; }
}

/* The topbar's close cross sat 13px outside the screen on tablets and let the page wobble sideways */
.apa-home-v3 .topbar { overflow: hidden; }
.apa-home-v3 .topbar__close { right: 16px; }

/* The cart link must never leave the header (the Buy Button's sticky tab) */
.apa-home-v3 .header .shopify-buy-frame--toggle.is-sticky { position: static !important; transform: none !important; display: inline-block !important; }