/* TND Creative: storefront styles. Navy #09435B, green #8CC540. Outfit (headings) + Manrope (body), self-hosted. */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/outfit-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/outfit-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/outfit-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/outfit-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/manrope-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/manrope-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/manrope-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/manrope-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/manrope-latin-800-normal.woff2') format('woff2'); }

:root {
  --navy: #09435B; --navy-dark: #062f41; --navy-deep: #04222f; --navy-light: #0f5a79; --navy-soft: #e6eef2;
  --green: #8CC540; --green-dark: #74a833; --green-tint: #eef7e3;
  --ink: #16232b; --text: #2c3a43; --muted: #66757e; --line: #e6ebef; --line-soft: #eef2f5; --bg: #f6f8fa; --white: #fff;
  --danger: #c0392b; --danger-bg: #fdecea; --ok-bg: #e8f5e9; --info-bg: #e8f1f7;
  --radius: 14px; --radius-sm: 10px; --shadow: 0 14px 40px -18px rgba(9,67,91,.28); --shadow-soft: 0 6px 20px -12px rgba(9,67,91,.18);
  --font-head: 'Outfit', 'Segoe UI', system-ui, sans-serif; --font-body: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); color: var(--text); background: var(--white); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-decoration: none; transition: color .15s; }
a:hover { color: var(--green-dark); }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); line-height: 1.12; margin: 0 0 .5em; font-weight: 600; letter-spacing: -.015em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
.wrap { width: min(1200px, 100% - 2.5rem); margin-inline: auto; }
.eyebrow { font-family: var(--font-body); text-transform: uppercase; letter-spacing: .16em; color: var(--green-dark); font-weight: 800; font-size: .72rem; margin-bottom: .6rem; display: block; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Buttons: rounded-corner rectangles, outline by default, solid on hover */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1.5rem; border-radius: 10px; font-family: var(--font-body); font-weight: 700; font-size: .95rem; letter-spacing: .01em; border: 2px solid currentColor; background: transparent; cursor: pointer; transition: .18s; line-height: 1.2; }
.btn-primary { color: var(--green-dark); border-color: var(--green); }
.btn-primary:hover { background: var(--green); border-color: var(--green); color: var(--navy-deep); }
.btn-navy { color: var(--navy); border-color: var(--navy); }
.btn-navy:hover { background: var(--navy); color: #fff; }
.btn-outline { color: var(--navy); border-color: #b8c7d0; }
.btn-outline:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-light { color: #fff; border-color: #fff; background: transparent; }
.btn-light:hover { background: #fff; border-color: #fff; color: var(--navy-deep); }
.btn-ghost { color: #d4e5ee; border-color: rgba(255,255,255,.35); }
.btn-ghost:hover { background: var(--green); border-color: var(--green); color: var(--navy-deep); }
.on-dark .btn-primary, .hero .btn-primary, .cta-band .btn-primary, .mega-feature .btn-primary { color: var(--green); }
.on-dark .btn-primary:hover, .hero .btn-primary:hover, .cta-band .btn-primary:hover, .mega-feature .btn-primary:hover { color: var(--navy-deep); }
.btn-sm { padding: .55rem 1.05rem; font-size: .85rem; border-width: 2px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* Announcement bar + header */
.topbar { background: var(--navy-deep); color: #b9cdd8; font-size: .78rem; text-align: center; padding: .45rem 1rem; letter-spacing: .02em; font-weight: 600; }
.header { background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-soft); position: sticky; top: 0; z-index: 50; }
.header-inner { display: flex; align-items: center; gap: 1rem; min-height: 92px; }
.logo { display: flex; align-items: center; flex: none; }
.logo img { height: 64px; width: auto; }
.nav { display: none; gap: .1rem; margin-left: 1.25rem; }
.nav a { padding: .55rem .7rem; border-radius: 8px; font-weight: 600; font-size: .9rem; color: var(--text); position: relative; white-space: nowrap; }
.nav a::after { content: ''; position: absolute; left: .7rem; right: .7rem; bottom: .25rem; height: 2px; background: var(--green); border-radius: 2px; transform: scaleX(0); transition: .2s; transform-origin: left; }
.nav a:hover, .nav a.active { color: var(--navy); }
.nav a:hover::after, .nav a.active::after { transform: scaleX(1); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: .15rem; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 0; background: transparent; color: var(--navy); cursor: pointer; position: relative; transition: .15s; }
.icon-btn:hover { background: var(--navy-soft); }
.icon-btn svg { width: 21px; height: 21px; }
.badge { position: absolute; top: 3px; right: 1px; background: var(--green); color: var(--navy-deep); font-size: .66rem; font-weight: 800; min-width: 17px; height: 17px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.search-form { display: none; align-items: center; background: var(--bg); border: 1px solid var(--line-soft); border-radius: 999px; padding: .2rem .25rem .2rem 1rem; margin-left: .5rem; }
.search-form input { border: 0; background: transparent; font: inherit; font-size: .9rem; width: 120px; outline: none; color: var(--ink); }
.search-form button { border: 0; background: var(--navy); color: #fff; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.search-form button svg { width: 15px; height: 15px; }
.menu-btn { display: inline-flex; }
/* the nav's own auto margins centre it between the logo and the basket/account icons,
   so the icons must not claim any of the spare room as well */
@media (min-width: 1060px) { .nav { display: flex; } .search-form { display: flex; } .menu-btn { display: none; } .header-actions { margin-left: 0; } }
@media (min-width: 1060px) and (max-width: 1260px) { .nav-link { font-size: .86rem; padding: .5rem .55rem; } .logo img { height: 52px; } }
@media (max-width: 1059px) { .logo img { height: 48px; } .header-inner { min-height: 76px; } }

/* Mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 100; display: none; }
.drawer.open { display: block; }
.drawer-bg { position: absolute; inset: 0; background: rgba(4,34,47,.55); }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 88%); background: #fff; padding: 1.25rem; overflow-y: auto; box-shadow: -10px 0 30px rgba(0,0,0,.2); display: flex; flex-direction: column; gap: 0; }
.drawer-panel .search-form { display: flex; margin: 0 0 1rem; }
.drawer-panel .search-form input { width: 100%; }
.drawer-panel a.dl { padding: .85rem .35rem; border-bottom: 1px solid var(--line-soft); font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; color: var(--ink); }
.drawer-panel a.dl.sub { font-family: var(--font-body); font-weight: 500; font-size: .95rem; padding-left: 1.25rem; color: var(--muted); }
.drawer-close { align-self: flex-end; }

/* Flash messages */
.flash { padding: .85rem 1.1rem; border-radius: var(--radius-sm); margin: 1rem 0; font-size: .92rem; font-weight: 500; border: 1px solid transparent; }
.flash-success { background: var(--ok-bg); color: #1e6b2b; border-color: #cfe8d2; }
.flash-error { background: var(--danger-bg); color: var(--danger); border-color: #f5d3cf; }
.flash-info { background: var(--info-bg); color: var(--navy); border-color: #d2e1ea; }

/* Hero */
.hero { background: var(--navy-deep); color: #fff; padding: 4rem 0 3.5rem; position: relative; overflow: hidden; }
.hero .facets { position: absolute; right: -6%; top: 50%; transform: translateY(-50%); width: 62%; max-width: 760px; opacity: .9; pointer-events: none; display: none; }
@media (min-width: 900px) { .hero .facets { display: block; } }
@media (max-width: 899px) { .hero { background: linear-gradient(160deg, var(--navy-deep) 0%, #073a4f 100%); } }
.hero-grid { display: grid; gap: 2rem; align-items: center; position: relative; z-index: 1; }
.hero h1 { color: #fff; margin-bottom: 1rem; font-weight: 600; letter-spacing: -.025em; max-width: 14ch; }
.hero h1 em { font-style: normal; color: var(--green); }
.hero p { color: #b7cad5; font-size: 1.08rem; max-width: 48ch; line-height: 1.65; }
.hero .eyebrow { color: var(--green); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.hero-meta { display: flex; gap: 2rem; margin-top: 2.5rem; flex-wrap: wrap; }
.hero-meta div { font-size: .8rem; color: #8ea9b8; }
.hero-meta strong { display: block; font-family: var(--font-head); font-size: 1.35rem; color: #fff; font-weight: 600; }
.hero-art { position: relative; min-height: 300px; display: none; }
.hero-card { position: absolute; background: #fff; color: var(--ink); border-radius: var(--radius); padding: 1rem 1.15rem; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); display: flex; align-items: center; gap: .85rem; min-width: 250px; }
.hero-card .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--green-tint); color: var(--green-dark); display: grid; place-items: center; flex: none; }
.hero-card .ic svg { width: 22px; height: 22px; }
.hero-card b { font-family: var(--font-head); font-weight: 600; font-size: 1rem; display: block; }
.hero-card span { font-size: .8rem; color: var(--muted); }
.hero-card.c1 { top: 8%; left: 8%; }
.hero-card.c2 { top: 40%; right: 0; }
.hero-card.c3 { bottom: 4%; left: 18%; }
@media (min-width: 900px) { .hero { padding: 6rem 0 5.5rem; } .hero-grid { grid-template-columns: 1.1fr .9fr; } .hero-art { display: block; min-height: 360px; } }

/* Sections */
.section { padding: 4.5rem 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.section-head p { color: var(--muted); margin: .35rem 0 0; max-width: 52ch; }
.section-alt { background: var(--bg); }

/* Category tiles */
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 700px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .cat-grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }
.cat-tile { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; background: var(--navy); display: block; }
.cat-tile img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: .4s; }
.cat-tile:hover img { transform: scale(1.05); opacity: 1; }
.cat-tile .label { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.1rem 1.15rem; background: linear-gradient(to top, rgba(4,34,47,.92), rgba(4,34,47,0)); color: #fff; font-family: var(--font-head); font-weight: 600; font-size: 1.2rem; }
.cat-tile .label small { display: block; font-family: var(--font-body); font-weight: 500; font-size: .76rem; color: #b7cad5; margin-top: .1rem; }

/* Product grid */
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 700px) { .product-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
@media (min-width: 1000px) { .product-grid { grid-template-columns: repeat(4, 1fr); gap: 1.75rem 1.5rem; } }
.product-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .product-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.card { background: #fff; border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: .25s; position: relative; }
.card:hover { transform: translateY(-4px); }
.card-img { aspect-ratio: 1; background: var(--bg); overflow: hidden; border-radius: var(--radius); transition: .25s; }
.card:hover .card-img { box-shadow: var(--shadow); }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: .5s; }
.card:hover .card-img img { transform: scale(1.04); }
.card-body { padding: .95rem .2rem .5rem; display: flex; flex-direction: column; gap: .2rem; flex: 1; }
.card-title { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; color: var(--ink); line-height: 1.25; }
.card-cat { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.card-price { margin-top: auto; padding-top: .35rem; font-weight: 700; color: var(--navy); display: flex; gap: .5rem; align-items: baseline; font-size: .98rem; }
.card-price del { color: var(--muted); font-weight: 400; font-size: .85rem; }
.card .tag { position: absolute; top: .8rem; left: .8rem; background: #fff; color: var(--navy); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: .3rem .6rem; border-radius: 999px; box-shadow: var(--shadow-soft); z-index: 1; }
.card .tag.sale { background: var(--danger); color: #fff; }
.card .tag.soldout { background: var(--ink); color: #fff; }
.card .tag.right { left: auto; right: .8rem; }
.tag.popular { position: absolute; top: .7rem; left: .7rem; z-index: 1; background: var(--green); color: #fff; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; line-height: 1; padding: .48rem .85rem; border-radius: 999px; box-shadow: 0 4px 12px rgba(4, 34, 47, .18); }
.card .tag.popular { top: .7rem; left: .7rem; font-size: .72rem; padding: .48rem .85rem; }
.gallery-main { position: relative; }
.gallery-main .tag.popular { top: 1rem; left: 1rem; font-size: .8rem; padding: .55rem 1rem; }
.card a.overlay { position: absolute; inset: 0; z-index: 2; }

/* Listing layout */
.listing { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
.listing > * { min-width: 0; }
@media (min-width: 900px) { .listing { grid-template-columns: 240px minmax(0, 1fr); } }
.sidebar h3 { font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; margin-bottom: .6rem; color: var(--muted); font-family: var(--font-body); font-weight: 800; }
.sidebar ul { list-style: none; margin: 0 0 2rem; padding: 0; }
.sidebar li a { display: flex; justify-content: space-between; padding: .5rem .6rem; border-radius: 8px; font-size: .93rem; font-weight: 500; color: var(--text); }
.sidebar li a:hover, .sidebar li a.active { background: var(--navy-soft); color: var(--navy); font-weight: 700; }
.sidebar li a span { color: var(--muted); font-size: .78rem; font-weight: 500; }
.sidebar li a.cat-featured { color: var(--navy); font-weight: 700; }
.sidebar li a.cat-featured::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin: auto .5rem auto 0; flex: none; }
.sidebar li a.cat-featured span { margin-left: auto; }
.mobile-cats a.cat-featured { border-color: var(--green); color: var(--navy); }
.mobile-cats a.cat-featured.active { background: var(--green); border-color: var(--green); color: #fff; }
.mobile-cats { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; margin-bottom: 1rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.mobile-cats a { flex: none; padding: .5rem 1rem; border: 1px solid var(--line); border-radius: 8px; font-size: .86rem; font-weight: 600; white-space: nowrap; color: var(--text); }
.mobile-cats a.active { background: var(--navy); color: #fff; border-color: var(--navy); }
@media (min-width: 900px) { .mobile-cats { display: none; } }
.listing-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.listing-bar select { padding: .55rem 2rem .55rem .85rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: .88rem; font-weight: 600; background: #fff; color: var(--text); }
.page-head { background: var(--bg); padding: 2.75rem 0 2.25rem; }
.page-head h1 { margin-bottom: .3rem; }
.breadcrumb { font-size: .8rem; color: var(--muted); margin-bottom: .6rem; font-weight: 500; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--navy); }
.pagination { display: flex; gap: .35rem; justify-content: center; margin: 2.5rem 0 0; flex-wrap: wrap; }
.pagination a, .pagination span { padding: .5rem .9rem; border: 1px solid var(--line); border-radius: 8px; font-weight: 600; font-size: .9rem; }
.pagination span.cur { background: var(--navy); color: #fff; border-color: var(--navy); }
.empty { text-align: center; padding: 3.5rem 1rem; color: var(--muted); }

/* Product page */
.product { display: grid; gap: 2rem; padding-top: 1.5rem; }
/* A grid column will not shrink below its content's minimum unless it is told it may. The row of
   photo thumbnails is as wide as all the thumbnails put together, so a product with a lot of
   photos (a PenCarrie style in six colours has nineteen) forced the picture column to that width
   and pushed the details column down to nothing. It scrolls sideways instead. */
.product > * { min-width: 0; }
@media (min-width: 900px) { .product { grid-template-columns: 1.05fr 1fr; gap: 4rem; padding-top: 2rem; } }
.gallery-main { border-radius: var(--radius); overflow: hidden; background: var(--bg); aspect-ratio: 1; }
.gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.gallery-thumbs { display: flex; gap: .6rem; margin-top: .75rem; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } /* update 69: no scroll bar under the pictures, the strip still slides */
.gallery-thumbs::-webkit-scrollbar { display: none; }
.gallery-thumbs button { flex: none; width: 76px; height: 76px; border: 2px solid transparent; border-radius: 12px; overflow: hidden; padding: 0; background: var(--bg); cursor: pointer; transition: .15s; }
.gallery-thumbs button.active { border-color: var(--green); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.product-info h1 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); margin-bottom: .35rem; }
.price { font-family: var(--font-head); font-size: 1.8rem; font-weight: 600; color: var(--navy); display: flex; align-items: baseline; gap: .75rem; margin: .6rem 0 1rem; }
.price del { font-size: 1.05rem; color: var(--muted); font-weight: 400; font-family: var(--font-body); }
.price .vat { font-family: var(--font-body); font-size: .75rem; color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.stock { display: inline-flex; align-items: center; gap: .45rem; font-size: .86rem; font-weight: 700; color: var(--green-dark); }
.stock::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.stock.out { color: var(--danger); } .stock.out::before { background: var(--danger); }
.stock.low { color: #b7791f; } .stock.low::before { background: #f0a92e; }
.option, .bundle-option { margin-bottom: 1.1rem; }
.option label, .bundle-option label, .field label { display: block; font-weight: 700; margin-bottom: .5rem; font-size: .88rem; color: var(--ink); }
.option label span, .bundle-option label span, .field label span { color: var(--muted); font-weight: 500; }

/* A bundle of several garments: one size question per garment, boxed so it reads as one group */
.bundle-picks { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem 1.1rem .35rem; margin-bottom: 1.2rem; background: var(--bg); }
.bundle-lead { margin: 0 0 .9rem; font-size: .85rem; font-weight: 700; color: var(--navy); }
.bundle-picks .swatches label { background: #fff; }
.bundle-fixed { display: flex; align-items: center; gap: .45rem; font-size: .88rem; font-weight: 700; color: var(--ink); margin-bottom: 1.1rem; }
.bundle-fixed span { color: var(--muted); font-weight: 500; }
.bundle-fixed svg { width: 14px; height: 14px; color: var(--green-dark); flex: none; }
.swatches { display: flex; flex-wrap: wrap; gap: .5rem; }
.swatches input { position: absolute; opacity: 0; }
.swatches label { padding: .55rem 1rem; border: 1.5px solid var(--line); border-radius: 8px; cursor: pointer; font-weight: 600; font-size: .9rem; margin: 0; transition: .15s; color: var(--text); }
.swatches label:hover { border-color: var(--navy); }
.swatches input:checked + label { border-color: var(--navy); background: var(--navy); color: #fff; }
.swatches label.unavailable { opacity: .4; text-decoration: line-through; }
/* a size of one garment in a bundle that PenCarrie has run out of: struck through and not clickable */
.swatches label.is-gone { opacity: .45; text-decoration: line-through; cursor: not-allowed; background: var(--bg); }
.swatches label.is-gone:hover { border-color: var(--line); }
.bundle-gone { margin: .45rem 0 1.1rem; font-size: .78rem; color: var(--muted); }
.bundle-gone-all { margin: .1rem 0 .9rem; }
.field { margin-bottom: 1.1rem; }
.field input[type=text], .field textarea, .field select, .form input[type=text], .form input[type=email], .form input[type=password], .form input[type=tel], .form input[type=number], .form select, .form textarea, .option select {
  width: 100%; padding: .8rem 1rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm); font: inherit; font-size: .95rem; background: #fff; color: var(--ink); transition: .15s; }
.field input:focus, .form input:focus, .form select:focus, .form textarea:focus, .option select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(9,67,91,.08); }
/* Example wording in a box reads as a hint, never as something already typed: faded, and gone
   the moment they start. Light enough to be obviously not their words, dark enough to read. */
.field input::placeholder, .field textarea::placeholder, .form input::placeholder, .form textarea::placeholder { color: #93a4ae; opacity: 1; }
.field input:focus::placeholder, .field textarea:focus::placeholder, .form input:focus::placeholder, .form textarea:focus::placeholder { color: transparent; }
.field .help { font-size: .8rem; color: var(--muted); margin-top: .35rem; }
.field input[type=file] { font-size: .88rem; }
.qty { display: inline-flex; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; height: 50px; }
.qty button { width: 44px; border: 0; background: transparent; font-size: 1.15rem; cursor: pointer; color: var(--navy); }
.qty button:hover { background: var(--navy-soft); }
.qty input { width: 52px; text-align: center; border: 0; font: inherit; font-weight: 700; color: var(--ink); }
.buy-row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin: 1.5rem 0 .9rem; }
.buy-row .btn { flex: 1; min-width: 200px; height: 50px; font-size: 1rem; }
/* update 70: the Apple Pay / Google Pay button beside Add to basket. Hidden until Stripe says this browser
   has a wallet, so a customer without one sees the page exactly as before. */
.buy-row .express-buy { flex: 1 1 180px; min-width: 160px; height: 50px; }
.buy-row .express-buy > div { height: 50px; }
@media (max-width: 640px) {
  /* quantity on its own line, then Add to basket and the wallet button side by side */
  .buy-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .buy-row .qty { grid-column: 1 / -1; justify-self: start; }
  .buy-row .btn { min-width: 0; grid-column: 1 / -1; }
  .buy-row:has(.express-buy:not([hidden])) .btn { grid-column: 1; }
  .buy-row .express-buy { grid-column: 2; min-width: 0; }
}
.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: 1.75rem 0; }
/* update 69: the four trust boxes as a full width row between the product and the accordion; two by two on a phone */
.trust.trust-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin: 2.25rem 0 0; }
.trust.trust-row div { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.1rem .9rem; font-size: .84rem; }
.trust.trust-row svg { width: 26px; height: 26px; margin-bottom: .5rem; }
.trust.trust-row .trust-lead { display: block; margin-bottom: .2rem; }
@media (max-width: 700px) { .trust.trust-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: 1.5rem; } .trust.trust-row div { padding: .95rem .6rem; font-size: .78rem; } }
.trust div { background: var(--bg); border-radius: var(--radius-sm); padding: .85rem .6rem; text-align: center; font-size: .74rem; color: var(--muted); font-weight: 600; line-height: 1.35; }
.trust svg { width: 22px; height: 22px; color: var(--navy); margin: 0 auto .35rem; display: block; }
/* Description, specification and size guide sit under the photos and the buy box, full width */
/* update 69: Description, Specification and Size guide fold into an accordion under the pictures and
   the buy box. Native <details>, so no script: a row is the heading with a plus on the right, the plus
   turns into a minus when the row is open, and Description starts open. Each garment in a bundle is
   a row of its own. The rows sit straight on the page, no white boxes. */
.product-details { margin-top: 2rem; padding: 0 0 3rem; }
.acc { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 0; -webkit-tap-highlight-color: transparent; user-select: none; }
.acc-item > summary::-webkit-details-marker { display: none; }
.acc-item > summary h3 { margin: 0; font-family: var(--font-head); font-size: 1.15rem; font-weight: 700; color: var(--navy); text-transform: none; letter-spacing: 0; display: flex; align-items: center; gap: .5rem; line-height: 1.2; }
.acc-item > summary h3 svg { width: 18px; height: 18px; color: var(--navy); flex: none; }
.acc-item > summary:hover h3, .acc-item > summary:hover .acc-ico { color: var(--navy-dark); }
.acc-ico { position: relative; width: 22px; height: 22px; flex: none; color: var(--navy); }
.acc-ico::before, .acc-ico::after { content: ''; position: absolute; background: currentColor; border-radius: 2px; transition: transform .2s ease; }
.acc-ico::before { left: 3px; right: 3px; top: 10px; height: 2px; }
.acc-ico::after { top: 3px; bottom: 3px; left: 10px; width: 2px; }
.acc-item[open] > summary .acc-ico::after { transform: scaleY(0); }
.acc-body { padding: 0 0 1.5rem; animation: acc-in .22s ease; }
@keyframes acc-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.acc-body .prose { max-width: 72ch; }
.acc-item.spec .spec-list { max-width: 640px; }
.acc-item.bundle-spec h4 { font-family: var(--font-head); font-size: .95rem; font-weight: 700; color: var(--navy); margin: 1.25rem 0 .6rem; display: flex; align-items: center; gap: .4rem; }
.acc-item.bundle-spec h4 svg { width: 15px; height: 15px; }
.bundle-spec-colour { font-family: var(--font-body); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-left: .5rem; }
@media (min-width: 900px) {
  /* room for the size tables on a wide screen */
  .product-details .size-guide table, .product-details .bundle-spec table { font-size: .95rem; }
  .product-details .size-guide th, .product-details .size-guide td, .product-details .bundle-spec th, .product-details .bundle-spec td { padding: .65rem 1rem; }
  .product-details .size-guide th:first-child, .product-details .size-guide td:first-child, .product-details .bundle-spec th:first-child, .product-details .bundle-spec td:first-child { width: 1%; white-space: nowrap; padding-right: 3rem; }
  .acc-item > summary { padding: 1.2rem 0; }
  .acc-item > summary h3 { font-size: 1.25rem; }
}
.desc { border-top: 1px solid var(--line); padding-top: 1.5rem; margin-top: 1.5rem; }
.desc h3 { font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); font-family: var(--font-body); font-weight: 800; margin-bottom: .75rem; }
.desc .prose, .acc-body .prose { font-size: .95rem; color: var(--text); }
.desc .prose ul, .acc-body .prose ul { padding-left: 1.2rem; }
.lead-time { background: var(--green-tint); border-radius: var(--radius-sm); padding: .65rem .95rem; font-size: .88rem; margin-bottom: 1rem; font-weight: 600; color: #3e6a12; display: inline-flex; align-items: center; gap: .45rem; }
.lead-time svg { width: 15px; height: 15px; }

/* Basket */
.basket-layout { display: grid; gap: 2.5rem; padding: 2rem 0; }
@media (min-width: 900px) { .basket-layout { grid-template-columns: 1fr 380px; align-items: start; } }
.basket-line { display: grid; grid-template-columns: 92px 1fr; gap: 1.1rem; padding: 1.15rem 0; border-bottom: 1px solid var(--line-soft); }
.basket-line img { width: 92px; height: 92px; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg); }
.basket-line .name { font-family: var(--font-head); font-weight: 600; color: var(--ink); font-size: 1.05rem; }
.basket-line .opts { font-size: .82rem; color: var(--muted); }
.basket-line .line-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: .6rem; flex-wrap: wrap; }
.basket-line .remove { font-size: .8rem; color: var(--muted); background: none; border: 0; cursor: pointer; text-decoration: underline; padding: 0; font-family: inherit; }
.basket-line .total { font-weight: 800; color: var(--navy); }
.basket-line .qty { height: 42px; } .basket-line .qty button { width: 38px; } .basket-line .qty input { width: 44px; }
.summary { background: var(--bg); border-radius: var(--radius); padding: 1.5rem; position: sticky; top: 100px; }
.summary h3 { font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); font-family: var(--font-body); font-weight: 800; margin-bottom: .75rem; }
.summary .row { display: flex; justify-content: space-between; padding: .4rem 0; font-size: .93rem; }
body.shop-page .summary { background: #fff; border: 1px solid var(--line-soft); box-shadow: 0 10px 30px -22px rgba(4,34,47,.35); }
.summary .row.total { border-top: 1.5px solid var(--navy); margin-top: .5rem; padding-top: .85rem; font-family: var(--font-head); font-size: 1.45rem; font-weight: 600; color: var(--navy); }
.summary .row.vat { font-size: .78rem; color: var(--muted); }
.summary .discount { color: var(--green-dark); font-weight: 600; }
.discount-form { display: flex; gap: .5rem; margin: .85rem 0; }
.discount-form input { flex: 1; padding: .65rem .9rem; border: 1.5px solid var(--line); border-radius: 10px; font: inherit; font-size: .9rem; text-transform: uppercase; min-width: 0; background: #fff; }
.pay-icons { display: flex; flex-direction: column; gap: .4rem; align-items: center; margin-top: .9rem; }
.pay-icons .pay-row { display: flex; gap: .35rem; justify-content: center; }
.pay-icons img { width: 40px; height: 25px; border-radius: 4px; display: block; object-fit: cover; }
.pay-icons img.wallet { background: #fff; border: 1px solid var(--line); object-fit: contain; padding: 3px 6px; }
.mini-cart { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92%); background: #fff; z-index: 120; transform: translateX(105%); transition: .28s cubic-bezier(.2,.8,.2,1); box-shadow: -20px 0 50px rgba(4,34,47,.2); display: flex; flex-direction: column; }
.mini-cart.open { transform: none; }
.mini-cart-head { display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--line-soft); }
.mini-cart-head h3 { font-size: 1.2rem; display: flex; align-items: center; gap: .55rem; color: var(--ink); }
.mini-cart-head .ap-ico { width: 22px; height: 22px; flex: none; }
.mini-cart-body { flex: 1; overflow-y: auto; padding: 0 1.5rem; }
.mini-cart-foot { padding: 1.1rem 1.5rem 1.5rem; border-top: 1px solid var(--line-soft); }
.mini-cart-foot .row { display: flex; justify-content: space-between; font-weight: 800; margin-bottom: .5rem; font-size: 1.05rem; }

/* Account panel: slides out from the right like the basket, brand green, sign in / account in one place */
.account-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 92%); background: #fff; color: var(--text); z-index: 120; transform: translateX(105%); transition: .28s cubic-bezier(.2,.8,.2,1); box-shadow: -20px 0 50px rgba(4,34,47,.25); display: flex; flex-direction: column; }
.account-panel.open { transform: none; }
.ap-head { display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--line-soft); }
.ap-head h3 { font-size: 1.2rem; color: var(--ink); display: flex; align-items: center; gap: .55rem; }
.ap-head .ap-ico { width: 22px; height: 22px; flex: none; }
.ap-light { color: var(--muted); }
.ap-head .icon-btn { color: var(--ink); }
.ap-head .icon-btn:hover { background: var(--line-soft); }
#account-panel-content { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem 2rem; transition: opacity .15s; }
#account-panel-content.busy { opacity: .55; pointer-events: none; }
.ap-title { font-size: 1.45rem; color: var(--ink); margin: 0 0 .9rem; }
.ap-hello { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.ap-hello .status { flex: none; }
.ap-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; margin-bottom: 1rem; color: var(--text); }
.ap-card h4 { font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); font-family: var(--font-body); font-weight: 800; margin: 0 0 .75rem; }
.ap-card p { color: var(--text); }
.ap-form label { display: block; font-weight: 700; font-size: .85rem; margin: .8rem 0 .3rem; color: var(--ink); }
.ap-form input:not([type=checkbox]) { width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .75rem .9rem; font: inherit; color: var(--ink); }
.ap-form input:focus { outline: 2px solid var(--navy); outline-offset: 1px; }
.ap-form input[disabled] { background: var(--bg); color: var(--muted); }
.ap-form .btn { margin-top: 1rem; }
.ap-form .ap-two { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.ap-check { display: flex; align-items: center; gap: .5rem; font-weight: 500 !important; font-size: .9rem !important; margin-top: .9rem !important; }
.ap-check input { width: 18px; height: 18px; accent-color: var(--navy); }
.ap-error { background: #fdecea; color: #b8321f; border-radius: 10px; padding: .6rem .8rem; margin-top: .85rem; font-size: .9rem; font-weight: 600; }
.ap-note { background: var(--green-tint); border-radius: 10px; padding: .65rem .85rem; margin-bottom: 1rem; font-size: .92rem; font-weight: 600; color: var(--navy-deep); }
.ap-divider { text-align: center; margin: 1.35rem 0 .75rem; font-size: .85rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.ap-muted { color: var(--muted); }
.ap-a { color: var(--navy); text-decoration: underline; font-weight: 600; }
.ap-card .ap-a { color: var(--navy); }
.ap-link { background: none; border: 0; text-decoration: underline; color: var(--navy); cursor: pointer; font: inherit; font-weight: 700; padding: 0; }
.ap-back { display: inline-flex; align-items: center; gap: .35rem; font: inherit; font-weight: 700; color: var(--navy); background: none; border: 0; padding: 0; cursor: pointer; margin-bottom: 1rem; }
.ap-back:hover { text-decoration: underline; }
.ap-order { display: grid; grid-template-columns: 1fr auto; gap: .15rem .75rem; padding: .7rem 0; border-top: 1px solid var(--line); align-items: center; color: var(--text); text-decoration: none; }
.ap-order:first-of-type { border-top: 0; padding-top: 0; }
.ap-order:hover .ref { text-decoration: underline; }
.ap-order .ref { font-weight: 800; color: var(--navy); }
.ap-order .meta { font-size: .82rem; color: var(--muted); }
.ap-order .amt { font-weight: 800; text-align: right; color: var(--ink); }
.ap-order .status { justify-self: end; }
.ap-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.ap-items .item { display: flex; gap: .7rem; align-items: center; padding: .55rem 0; border-top: 1px solid var(--line); font-size: .92rem; }
.ap-items .item:first-child { border-top: 0; padding-top: 0; }
.ap-items img { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; background: #fff; flex: none; }
.ap-totals { border-top: 1px solid var(--line); margin-top: .75rem; padding-top: .6rem; font-size: .92rem; }
.ap-totals > div { display: flex; justify-content: space-between; padding: .15rem 0; }
.ap-totals .total { font-weight: 800; font-size: 1.05rem; color: var(--navy); margin-top: .25rem; }
.account-panel .tracker { margin: .25rem 0 0; }
.btn-navy-solid { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-navy-solid:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }
.btn-outline-navy { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-outline-navy:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.icon-btn .badge-dot { min-width: 10px; width: 10px; height: 10px; padding: 0; border-radius: 50%; top: 7px; right: 7px; border: 2px solid #fff; box-sizing: content-box; }
.header-navy .icon-btn .badge-dot, .home .icon-btn .badge-dot { border-color: var(--navy-deep); }
@media (max-width: 420px) { .ap-form .ap-two { grid-template-columns: 1fr; } }
.overlay-bg { position: fixed; inset: 0; background: rgba(4,34,47,.5); z-index: 110; display: none; }
.overlay-bg.open { display: block; }

/* Checkout */
.checkout-page .header { position: static; }
.checkout-layout { display: grid; gap: 2.5rem; padding: 2rem 0 4rem; }
@media (min-width: 960px) { .checkout-layout { grid-template-columns: 1fr 400px; align-items: start; } }
/* One-click wallet buttons above the checkout form. No card of their own: the wallet buttons
   carry their own branding, and a box around them competes with it. */
.express-pay { margin-bottom: 1.25rem; }
/* The repeat inside the Payment section sits tighter, under a heading rather than at the top */
.express-pay-inline { margin-bottom: 1.1rem; }
.express-pay-inline .express-or { margin: 1rem 0 0; }
.express-or { display: flex; align-items: center; gap: 1rem; margin: 1.15rem 0 .25rem; color: var(--muted); font-size: .85rem; }
.express-or::before, .express-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.form-section { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.25rem; }
.form-section h2 { font-size: 1.25rem; display: flex; align-items: center; gap: .65rem; margin-bottom: 1.1rem; }
.form-section h2 .num { width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: var(--navy-deep); display: inline-grid; place-items: center; font-size: .85rem; font-family: var(--font-body); font-weight: 800; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; }
.grid-2 .full { grid-column: 1 / -1; }
.form label { display: block; font-size: .82rem; font-weight: 700; margin-bottom: .35rem; color: var(--ink); }
.form .fld { margin-bottom: .8rem; }
.form .err { color: var(--danger); font-size: .78rem; margin-top: .3rem; display: none; font-weight: 600; }
.form .fld.invalid input { border-color: var(--danger); }
.form .fld.invalid .err { display: block; }
.check, .form label.check { display: flex; gap: .55rem; align-items: flex-start; font-size: .88rem; font-weight: 500 !important; color: var(--text); }
.check input { margin-top: .2rem; accent-color: var(--navy); }
.ship-option, .form label.ship-option { display: flex; gap: .8rem; align-items: center; padding: .85rem 1rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm); margin-bottom: .5rem; cursor: pointer; font-weight: 500 !important; transition: .15s; }
.ship-option:hover { border-color: #b8c7d0; }
.ship-option:has(input:checked) { border-color: var(--green); background: var(--green-tint); }
.ship-option input { accent-color: var(--navy); }
.ship-option .sname { font-weight: 700; color: var(--ink); }
.ship-option .sdesc { font-size: .8rem; color: var(--muted); }
.ship-option .sprice { margin-left: auto; font-weight: 800; color: var(--navy); }
/* Choosing between Stripe and PayPal. A quiet chooser, not a solid navy slab: the payment
   methods inside it carry their own colour, and two strong blocks on top of them competed. */
.pay-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1.1rem; }
.pay-tab { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem .9rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; font-weight: 700; background: #fff; font-family: var(--font-body); font-size: .92rem; color: var(--muted); transition: .15s; }
.pay-tab svg { flex: none; }
.pay-tab:hover { border-color: #c3ced5; color: var(--ink); }
.pay-tab.active { border-color: var(--navy); background: #f7fbfd; color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
/* Side by side the longer label wraps onto three lines on a phone and the two boxes end up
   different shapes, so below this width they stack and read left to right like the rest. */
@media (max-width: 560px) { .pay-tabs { grid-template-columns: 1fr; gap: .5rem; } .pay-tab { justify-content: flex-start; padding-left: 1.1rem; } }
.pay-panel { display: none; } .pay-panel.active { display: block; }
#payment-element { margin-bottom: 1rem; }
.pay-error { color: var(--danger); background: var(--danger-bg); padding: .7rem .9rem; border-radius: var(--radius-sm); margin: .75rem 0; display: none; font-size: .88rem; font-weight: 600; }
.secure-note { font-size: .78rem; color: var(--muted); display: flex; gap: .45rem; align-items: center; margin-top: .85rem; }
.secure-note svg { width: 16px; height: 16px; color: var(--green-dark); flex: none; }
/* update 82: "Would you like SMS updates on your order?" at the foot of the details, just above Payment.
   The same green tint as a chosen delivery option, so it reads as part of the checkout, not an advert. */
.sms-opt { margin-top: 1.1rem; padding: 1rem 1.1rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff; transition: .15s; }
.sms-opt:has(input[type=checkbox]:checked) { border-color: var(--green); background: var(--green-tint); }
.sms-opt .check strong { display: block; font-size: .95rem; color: var(--ink); font-weight: 700; }
.sms-opt .check input { width: 18px; height: 18px; margin-top: .15rem; }
.sms-opt-sub { display: block; font-size: .8rem; color: var(--muted); margin-top: .15rem; }
.form .sms-opt .fld { margin: .85rem 0 0; max-width: 320px; }
.sms-opt .fld input { background: #fff; }
.summary-items .item { display: flex; gap: .8rem; padding: .6rem 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.summary-items img { width: 54px; height: 54px; border-radius: 8px; object-fit: cover; background: #fff; flex: none; }
.summary-items .qtyb { color: var(--muted); }
.summary-items .opts { color: var(--muted); font-size: .76rem; }
.summary-items .lt { margin-left: auto; font-weight: 700; white-space: nowrap; }
.processing { position: fixed; inset: 0; background: rgba(255,255,255,.88); backdrop-filter: blur(4px); z-index: 200; display: none; place-items: center; font-family: var(--font-head); font-size: 1.4rem; color: var(--navy); }
.processing.show { display: grid; }

/* Order complete / account */
.thanks { text-align: center; padding: 3.5rem 0 2rem; }
.thanks .tick { width: 76px; height: 76px; border-radius: 50%; background: var(--green); color: var(--navy-deep); display: grid; place-items: center; margin: 0 auto 1.25rem; box-shadow: 0 16px 30px -14px rgba(140,197,64,.8); }
.thanks .tick svg { width: 38px; height: 38px; }
.order-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.35rem; margin: 1rem 0; background: #fff; }
.order-box h3 { font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); font-family: var(--font-body); font-weight: 800; margin-bottom: .85rem; }
.order-grid { display: grid; gap: 1rem; }
@media (min-width: 700px) { .order-grid { grid-template-columns: 1fr 1fr; } }
.account-layout { display: grid; gap: 2.5rem; padding: 2rem 0 4rem; }
@media (min-width: 900px) { .account-layout { grid-template-columns: 240px 1fr; } }
.account-nav { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.account-nav a { display: block; padding: .85rem 1.1rem; border-bottom: 1px solid var(--line-soft); font-weight: 600; font-size: .92rem; color: var(--text); }
.account-nav a.active { background: var(--navy-soft); color: var(--navy); font-weight: 800; }
.account-nav form { border-top: 1px solid var(--line-soft); }
.account-nav button { width: 100%; text-align: left; padding: .85rem 1.1rem; border: 0; background: none; font: inherit; font-size: .92rem; color: var(--muted); cursor: pointer; }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th, .table td { text-align: left; padding: .75rem .6rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.table th { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 800; }
.table-wrap { overflow-x: auto; }
.status { display: inline-block; padding: .22rem .65rem; border-radius: 999px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; background: var(--bg); color: var(--muted); }
.status-paid { background: #fdecea; color: #b8321f; }
.status-processing, .status-ready { background: #fff1dc; color: #b35c00; }
.status-dispatched, .status-completed { background: var(--ok-bg); color: #1e6b2b; }
.status-pending { background: var(--info-bg); color: var(--navy); }
.status-cancelled, .status-refunded { background: var(--danger-bg); color: var(--danger); }
.auth-box { max-width: 460px; margin: 3.5rem auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 2.25rem; box-shadow: var(--shadow-soft); }
.auth-box h1 { font-size: 1.9rem; }
.address-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; font-size: .92rem; }
.address-card .actions { margin-top: .75rem; display: flex; gap: .85rem; font-size: .85rem; }

/* Order progress tracker */
.tracker { display: flex; justify-content: space-between; position: relative; margin: 1rem 0 1.5rem; }
.tracker::before { content: ''; position: absolute; left: 6%; right: 6%; top: 17px; height: 3px; background: var(--line); border-radius: 2px; }
.tracker .step { position: relative; flex: 1; text-align: center; font-size: .76rem; color: var(--muted); font-weight: 600; }
.tracker .step .dot { width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 3px solid var(--line); margin: 0 auto .45rem; display: grid; place-items: center; font-weight: 800; color: var(--muted); font-size: .8rem; }
.tracker .step.done .dot { background: var(--green); border-color: var(--green); color: var(--navy-deep); }
.tracker .step.current .dot { border-color: var(--green); color: var(--navy); box-shadow: 0 0 0 5px var(--green-tint); }
.tracker .step.done, .tracker .step.current { color: var(--navy); font-weight: 800; }
.tracker .step .dot svg { width: 18px; height: 18px; }
.tracker-line { position: absolute; left: 6%; top: 17px; height: 3px; background: var(--green); border-radius: 2px; }

/* Content pages / contact */
.prose { max-width: 720px; font-size: 1.02rem; color: var(--text); }
/* reference pages (terms, privacy, the size guide) read better across the full width */
.prose-wide { max-width: none; }
.prose-wide table { width: 100%; }
.prose img { border-radius: var(--radius); }
.contact-grid { display: grid; gap: 2.5rem; padding: 2.5rem 0 4rem; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1.25fr; } }
.contact-card { background: var(--navy-deep); color: #fff; border-radius: var(--radius); padding: 1.75rem; }
.contact-card p { margin-bottom: 1rem; }
.contact-card a { color: #fff; font-family: var(--font-head); font-size: 1.15rem; font-weight: 500; }
.contact-card a:hover { color: var(--green); }
.contact-card strong { font-family: var(--font-body); text-transform: uppercase; letter-spacing: .14em; color: var(--green); display: block; font-size: .7rem; font-weight: 800; margin-bottom: .15rem; }

/* Services strip */
.services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; grid-auto-rows: 1fr; }
@media (min-width: 900px) { .services { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }
.service { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.4rem; transition: .25s; display: flex; flex-direction: column; }
.service:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.service .ico { width: 50px; height: 50px; border-radius: 14px; background: var(--navy-deep); color: var(--green); display: grid; place-items: center; margin-bottom: 1rem; }
.service .ico svg { width: 24px; height: 24px; }
.service h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.service p { font-size: .88rem; color: var(--muted); margin: 0; line-height: 1.55; }
.service a.more { display: inline-block; margin-top: .75rem; font-size: .85rem; font-weight: 700; }

/* Enquiry band (navy) */
.cta-band { background: var(--navy-deep); color: #fff; padding: 4.5rem 0; position: relative; overflow: hidden; text-align: left; }
.cta-band::before { content: ''; position: absolute; left: -120px; bottom: -160px; width: 360px; height: 360px; border-radius: 50%; background: rgba(140,197,64,.12); }
.cta-band h2 { color: #fff; }
.cta-band p { color: #b7cad5; max-width: 52ch; }
.cta-band .eyebrow { color: var(--green); }
.cta-grid { display: grid; gap: 2.5rem; position: relative; z-index: 1; }
@media (min-width: 900px) { .cta-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.cta-contact { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.5rem; }
.cta-contact a { color: #fff; display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-head); font-size: 1.1rem; font-weight: 500; }
.cta-contact a svg { color: var(--green); }
.cta-contact a:hover { color: var(--green); }
.cta-form { background: #fff; border-radius: var(--radius); padding: 1.5rem; color: var(--ink); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.cta-form .btn-primary { color: var(--green-dark); }
.cta-form .btn-primary:hover { color: var(--navy-deep); }

/* Footer (matches the existing site: connect / services / information + brand column) */
.footer { background: var(--navy); color: #cfe0ea; padding: 3.5rem 0 1.5rem; font-size: .92rem; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.1fr 1fr 1fr 1.2fr; gap: 2.5rem; } }
.footer h4 { color: #fff; text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; margin-bottom: .9rem; font-family: var(--font-body); font-weight: 800; }
.footer a { color: #e2edf3; display: block; padding: .22rem 0; font-weight: 500; }
.footer a:hover { color: var(--green); }
.footer .social { display: flex; gap: .5rem; margin-top: .75rem; }
.footer .social a { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1.5px solid rgba(255,255,255,.25); padding: 0; }
.footer .social a:hover { border-color: var(--green); color: var(--green); }
.footer-brand img { height: 56px; width: auto; margin-bottom: .9rem; }
.footer-brand p { color: #9fb5c1; font-size: .85rem; margin-bottom: 1rem; }
.footer-brand .btn { display: inline-flex; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 2.5rem; padding-top: 1.25rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: .78rem; color: #8fa9b7; }
.toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%) translateY(20px); background: var(--navy-deep); color: #fff; padding: .85rem 1.35rem; border-radius: 999px; box-shadow: var(--shadow); opacity: 0; transition: .25s; z-index: 300; font-size: .92rem; font-weight: 600; pointer-events: none; max-width: 92%; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { background: var(--danger); }

/* ---- Mega menu navigation (Ramp-style dropdown cards) ---- */
.nav { align-items: center; margin-left: auto; margin-right: auto; gap: .15rem; }
.nav-item { position: relative; }
.nav-link { display: inline-flex; align-items: center; gap: .3rem; padding: .6rem .8rem; border-radius: 8px; font-weight: 600; font-size: .92rem; color: var(--text); background: none; border: 0; cursor: pointer; font-family: inherit; white-space: nowrap; transition: .15s; }
.nav-link .chev { width: 14px; height: 14px; transition: transform .2s; opacity: .7; }
.nav-link:hover, .nav-link.active, .nav-item.open > .nav-link { color: var(--navy); background: var(--navy-soft); }
.nav-item.open > .nav-link .chev { transform: rotate(180deg); }
.nav a.nav-link::after { display: none; }
.mega { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px); background: #fff; border-radius: 18px; box-shadow: 0 30px 70px -30px rgba(4,34,47,.45), 0 0 0 1px var(--line-soft); padding: 1.1rem; width: 840px; max-width: calc(100vw - 2rem); opacity: 0; visibility: hidden; transition: .18s; z-index: 60; }
.mega-shop { width: 760px; }
.mega::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 12px; }
.nav-item.open > .mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.mega-grid { display: grid; grid-template-columns: 1fr 250px; gap: 1rem; }
/* every card in the menu is the same height, whatever the length of its description, so the
   grid reads as one tidy block rather than a ragged one */
.mega-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem; min-width: 0; grid-auto-rows: 1fr; }
.mega-cards.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mega-card > span:last-child { min-width: 0; }
.mega-card { display: flex; gap: .85rem; align-items: flex-start; padding: .7rem .75rem; border-radius: 12px; transition: .15s; color: var(--text); height: 100%; }
.mega-card:hover { background: var(--bg); color: var(--navy); }
.mega-card .mi { flex: none; width: 40px; height: 40px; border-radius: 11px; background: var(--navy-soft); color: var(--navy); display: grid; place-items: center; transition: .15s; }
.mega-card:hover .mi { background: var(--navy); color: var(--green); }
.mega-card b { display: block; font-family: var(--font-head); font-weight: 600; font-size: .98rem; color: var(--ink); line-height: 1.2; margin-bottom: .15rem; }
.mega-card small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .78rem; color: var(--muted); line-height: 1.4; white-space: normal; }
.mega-feature { background: var(--navy-deep); color: #fff; border-radius: 14px; padding: 1.25rem; display: flex; flex-direction: column; gap: .6rem; }
.mega-feature .eyebrow { color: var(--green); margin: 0; }
.mega-feature b { font-family: var(--font-head); font-weight: 500; font-size: 1.05rem; line-height: 1.3; }
.mega-feature .btn { align-self: flex-start; margin-top: .25rem; }
.nav .mega-feature a.mega-phone { color: #fff; font-size: .95rem; font-weight: 700; }
.nav .mega-feature a.mega-phone:hover { color: var(--green); }
.nav .mega-feature a.btn { color: var(--navy-deep); }
.quote-btn { display: none; margin-left: .5rem; }
@media (min-width: 1060px) { .quote-btn { display: inline-flex; } }
.header-actions .icon-btn[aria-label="My account"] { display: inline-flex; }

/* Drawer accordions */
.drawer-panel button.dl.acc { display: flex; justify-content: space-between; align-items: center; width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line-soft); text-align: left; cursor: pointer; font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; color: var(--ink); padding: .85rem .35rem; }
.drawer-panel .acc .chev { width: 18px; height: 18px; transition: .2s; }
.drawer-panel .acc.open .chev { transform: rotate(180deg); }
.acc-panel { display: none; background: var(--bg); border-radius: 10px; margin: .25rem 0 .5rem; padding: .25rem .5rem; }
.acc-panel.open { display: block; }
.acc-panel a.dl.sub { display: flex; align-items: center; gap: .6rem; border: 0; padding: .6rem .5rem; color: var(--text); }

/* Dark header over the home hero (Ramp-style) */
.home .header { background: var(--navy-deep); border-bottom-color: rgba(255,255,255,.06); }
.home .nav-link { color: #d4e5ee; }
.home .nav-link:hover, .home .nav-link.active, .home .nav-item.open > .nav-link { color: #fff; background: rgba(255,255,255,.08); }
.home .icon-btn { color: #fff; }
.home .icon-btn:hover { background: rgba(255,255,255,.1); }
.home .search-form { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.1); }
.home .search-form input { color: #fff; } .home .search-form input::placeholder { color: #8ea9b8; }
.home .search-form button { background: var(--green); color: var(--navy-deep); }
.home .topbar { background: #031a24; }

.side-search { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 10px; padding: .2rem .25rem .2rem 1rem; margin-bottom: 1.5rem; background: #fff; }
.side-search input { border: 0; background: none; font: inherit; font-size: .9rem; flex: 1; min-width: 0; outline: none; color: var(--ink); }
.side-search button { border: 0; background: var(--navy); color: #fff; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex: none; }
.side-search button svg { width: 15px; height: 15px; }

/* Nav: FREE Merchandise Shop link in green */
.nav-link.nav-merch { color: var(--green-dark); font-weight: 800; }
.nav-link.nav-merch:hover, .nav-link.nav-merch.active { color: var(--navy-deep); background: var(--green); }
.home .nav-link.nav-merch { color: var(--green); }
.home .nav-link.nav-merch:hover, .home .nav-link.nav-merch.active { background: var(--green); color: var(--navy-deep); }
.drawer-panel a.dl-merch { color: var(--green-dark); font-weight: 700; }
.mega-cards { grid-template-columns: repeat(3, minmax(210px, 1fr)); }
.mega { max-width: min(1100px, calc(100vw - 2rem)); }
.mega-grid { grid-template-columns: 1fr 240px; }
.mega-card.is-merch .mi { background: var(--green-tint); color: var(--green-dark); }
.mega-card.is-merch b { color: var(--green-dark); }
.mega-feature .btn-primary { color: var(--green); }
.mega-feature .btn-primary:hover { color: var(--navy-deep); }
.mega-feature a.mega-phone { color: #fff; }
.drawer-panel .btn-primary { color: var(--green-dark); }

/* ---- Photo hero (home + merch) ---- */
.hero-photo { background: var(--navy-deep); position: relative; padding: 5.5rem 0 4.5rem; }
.hero-photo::before { content: ''; position: absolute; inset: 0; background-image: var(--hero-img); background-size: cover; background-position: center 30%; }
.hero-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,34,47,.94) 0%, rgba(4,34,47,.85) 42%, rgba(4,34,47,.35) 100%); }
.hero-photo .wrap { position: relative; z-index: 1; }
.hero-photo .hero-grid { grid-template-columns: 1fr; }
.hero-copy { max-width: 620px; }
.hero-copy h1 { max-width: 16ch; }
.hero-meta { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2.5rem; }
.hero-meta > div { display: flex; gap: .85rem; align-items: center; font-size: .8rem; color: #9fb5c1; }
.hero-meta strong { display: block; font-family: var(--font-head); font-size: 1.15rem; color: #fff; font-weight: 600; line-height: 1.2; }
.hm-ico { flex: none; width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: var(--green); display: grid; place-items: center; }
@media (min-width: 640px) { .hero-meta { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
@media (min-width: 900px) { .hero-photo { padding: 7rem 0 6rem; min-height: 620px; display: flex; align-items: center; } .hero-photo::before { background-position: center; } }
@media (max-width: 899px) { .hero-photo::after { background: linear-gradient(180deg, rgba(4,34,47,.92) 0%, rgba(4,34,47,.86) 100%); } .hero-photo { padding: 3.5rem 0 3rem; } }
.hero-merch::after { background: linear-gradient(90deg, rgba(4,34,47,.96) 0%, rgba(9,67,91,.9) 60%, rgba(140,197,64,.25) 100%); }
.hero-merch { background: linear-gradient(120deg, var(--navy-deep), #0b4c66 70%, #1c6079); }

/* ---- Reviews band under the hero ---- */
.reviews-band { background: var(--bg); border-bottom: 1px solid var(--line-soft); padding: 2rem 0 2.25rem; }
.reviews-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.stars { display: inline-flex; gap: 2px; color: #f5b301; }
.stars svg { fill: currentColor; stroke: none; }
.reviews-summary { font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; color: var(--ink); }
.reviews-row { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 800px) { .reviews-row { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.review { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.35rem; position: relative; display: flex; flex-direction: column; gap: .5rem; }
.review .q { color: var(--green); display: inline-flex; }
.review .stars { margin-top: -.2rem; }
.review .stars svg { width: 15px; height: 15px; }
.review p { margin: 0; font-size: .97rem; color: var(--ink); line-height: 1.55; flex: 1; }
.review footer { font-size: .8rem; color: var(--muted); font-weight: 700; }
.reviews-track .review .review-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 0 0 auto; }
.reviews-track .review .review-more { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 800; text-decoration: none; color: #fff; align-self: flex-start; margin-top: -.15rem; }
.reviews-track .review .review-more svg { transition: transform .15s; }
.reviews-track .review .review-more:hover { text-decoration: underline; } .reviews-track .review .review-more:hover svg { transform: translateX(3px); }
.reviews-track .review footer { margin-top: auto; }
.reviews-links { display: inline-flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.reviews-green .reviews-track .review .review-more, .reviews-light .reviews-track .review .review-more { color: #fff; }
/* all reviews page */
.reviews-page-head { text-align: center; max-width: 720px; margin: 0 auto 2rem; }
.reviews-page-head .stars { display: inline-flex; gap: .15rem; color: var(--green); margin-bottom: .5rem; }
.reviews-page-head .stars svg { fill: var(--green); }
.reviews-grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .reviews-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.reviews-grid .review { scroll-margin-top: 110px; }
.reviews-grid .review .stars { color: var(--green); } .reviews-grid .review .stars svg { fill: var(--green); }
.reviews-grid .review:target { outline: 3px solid var(--green); outline-offset: 2px; }
.section-alt .reviews-row { grid-template-columns: 1fr; }
@media (min-width: 800px) { .section-alt .reviews-row { grid-template-columns: repeat(3, 1fr); } }

/* ---- Services cards (3 across) ---- */
.services { grid-template-columns: 1fr; }
@media (min-width: 640px) { .services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .services { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } .services.cols-3 { grid-template-columns: repeat(3, 1fr); } .services.cols-2 { grid-template-columns: repeat(2, 1fr); } }
a.service { display: flex; flex-direction: column; color: var(--text); }
a.service h3 { color: var(--ink); }
a.service .more { display: inline-block; margin-top: auto; padding-top: .9rem; font-size: .85rem; font-weight: 700; color: var(--navy); }
a.service:hover .more { color: var(--green-dark); }
a.service.is-merch { border-color: #cfe6b0; background: linear-gradient(180deg, #fff, var(--green-tint)); }
a.service.is-merch .ico { background: var(--green); color: var(--navy-deep); }

/* ---- Free merch band + steps ---- */
.merch-band { background: var(--green-tint); }
.merch-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .merch-grid { grid-template-columns: 1fr 1fr; } }
.merch-grid h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; counter-reset: step; }
.steps li { display: flex; gap: 1rem; align-items: flex-start; background: #fff; border-radius: var(--radius-sm); padding: 1rem 1.1rem; border: 1px solid #d9e9c4; font-size: .95rem; color: var(--ink); }
.steps .num { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--navy-deep); color: var(--green); display: grid; place-items: center; font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; }
.steps li b { display: block; font-family: var(--font-head); font-weight: 600; margin-bottom: .15rem; }
.steps-4 { grid-template-columns: 1fr; }
@media (min-width: 700px) { .steps-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .steps-4 { grid-template-columns: repeat(4, 1fr); } .steps-4 li { flex-direction: column; gap: .8rem; padding: 1.35rem; border-color: var(--line); } }
.ticks { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .5rem; }
.ticks li { padding-left: 1.9rem; position: relative; font-weight: 500; }
.ticks li::before { content: ''; position: absolute; left: 0; top: .2rem; width: 20px; height: 20px; border-radius: 50%; background: var(--green); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304222f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E"); background-size: 13px; background-repeat: no-repeat; background-position: center; }

/* ---- Klarna band ---- */
.klarna-band { background: #FFB3C7; color: #17120f; padding: 2rem 0; }
.klarna-inner { display: grid; gap: 1.25rem; align-items: center; }
@media (min-width: 900px) { .klarna-inner { grid-template-columns: auto 1fr auto; gap: 2.5rem; } }
.klarna-badge { display: inline-flex; flex-direction: column; background: #17120f; color: #FFB3C7; border-radius: 12px; padding: .8rem 1.2rem; line-height: 1.1; width: max-content; }
.klarna-badge span { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; opacity: .8; }
.klarna-badge strong { font-family: var(--font-head); font-size: 1.6rem; font-weight: 700; }
.klarna-band h3 { color: #17120f; margin-bottom: .25rem; font-size: 1.3rem; }
.klarna-band p { margin: 0; font-size: .95rem; max-width: 62ch; }
.klarna-points { display: flex; gap: .5rem; flex-wrap: wrap; }
.klarna-points span { background: rgba(255,255,255,.55); border-radius: 8px; padding: .45rem .8rem; font-size: .8rem; font-weight: 700; white-space: nowrap; }

/* ---- Work / portfolio grid ---- */
.work-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .work-grid { grid-template-columns: repeat(3, 1fr); } .work-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .work-grid.cols-4 { grid-template-columns: repeat(4, 1fr); gap: 1.1rem; } }
.work { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: .25s; }
.work:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.work-img { aspect-ratio: 4/3; background: var(--bg); overflow: hidden; }
.work-img img { width: 100%; height: 100%; object-fit: cover; }
.work-ph { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(135deg, var(--navy-deep), var(--navy-light)); }
.work-ph span { font-family: var(--font-head); font-size: 2.4rem; font-weight: 600; color: var(--green); letter-spacing: .04em; }
.work-body { padding: 1rem 1.15rem 1.15rem; }
.work-body h3 { font-size: 1.1rem; margin-bottom: .15rem; }
.work-grid.cols-4 .work-body { padding: .85rem 1rem 1rem; }
.work-grid.cols-4 .work-body h3 { font-size: 1rem; }
.work-body p { margin: 0; font-size: .85rem; color: var(--muted); }
.work-tags { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .5rem; }
.work-tags span { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--green-dark); background: var(--green-tint); padding: .2rem .5rem; border-radius: 6px; }
.work a.overlay { position: absolute; inset: 0; }

/* ---- Page hero + service layout ---- */
.page-hero { background: var(--navy-deep); color: #fff; padding: 3rem 0 3.25rem; position: relative; overflow: hidden; }
.page-hero.has-img::before { content: ''; position: absolute; inset: 0; background-image: var(--hero-img); background-size: cover; background-position: center; }
.page-hero.has-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,34,47,.95), rgba(4,34,47,.6)); }
.page-hero:not(.has-img)::after { content: ''; position: absolute; right: -80px; top: -120px; width: 380px; height: 380px; border-radius: 50%; background: rgba(140,197,64,.12); }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero .breadcrumb, .page-hero .breadcrumb a { color: #8ea9b8; }
.page-hero h1 { color: #fff; margin-bottom: .35rem; }
.page-hero-inner { display: flex; gap: 1.25rem; align-items: flex-start; }
.page-hero-icon { flex: none; width: 64px; height: 64px; border-radius: 16px; background: var(--green); color: var(--navy-deep); display: grid; place-items: center; margin-top: .35rem; }
.page-hero-sub { color: #b7cad5; font-family: var(--font-head); font-size: 1.25rem; font-weight: 500; margin: 0; max-width: 64ch; }
.page-hero .eyebrow { color: var(--green); }
.service-layout { display: grid; gap: 2.5rem; padding: 2.75rem 0 3rem; }
@media (min-width: 960px) { .service-layout { grid-template-columns: 1fr 380px; align-items: start; } }
.service-main .lead { font-size: 1.4rem; color: var(--ink); line-height: 1.5; max-width: 60ch; margin-bottom: 1.5rem; font-weight: 500; }
.service-main .prose h3 { font-size: 1.25rem; margin-top: 1.5rem; }
.service-main .prose ul, .service-main .prose ol { padding-left: 1.3rem; }
.service-main .prose li { margin-bottom: .35rem; }
.service-side { position: sticky; top: 110px; }
.quote-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); }
.quote-card h3 { margin-bottom: .25rem; }
.quote-card .form .fld { margin-bottom: .7rem; }
.quote-card .btn-primary { color: var(--green-dark); }
.quote-card .btn-primary:hover { color: var(--navy-deep); }

/* ---- Partner band ---- */
.partner-band { background: var(--bg); }
.partner-grid { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 900px) { .partner-grid { grid-template-columns: 1fr auto; } }
.partner-grid p { margin: 0; color: var(--muted); max-width: 60ch; }

.footer a.btn { display: inline-flex; padding: .55rem 1.05rem; margin-top: .25rem; }
.hero-merch .facets { display: none; }
@media (min-width: 900px) { .hero-merch .facets { display: block; right: -4%; width: 48%; opacity: .55; } }

/* =====================================================================
   Round 3: white header everywhere, wider Services menu, solid buttons,
   navy review carousel, image split bands, contact page, service banners
   ===================================================================== */
.home .header { background: rgba(255,255,255,.96); border-bottom-color: var(--line-soft); }
.home .nav-link { color: var(--text); }
.home .nav-link:hover, .home .nav-link.active, .home .nav-item.open > .nav-link { color: var(--navy); background: var(--navy-soft); }
.home .icon-btn { color: var(--navy); }
.home .icon-btn:hover { background: var(--navy-soft); }
.home .nav-link.nav-merch { color: var(--green-dark); }
.home .nav-link.nav-merch:hover, .home .nav-link.nav-merch.active { background: var(--green); color: var(--navy-deep); }
.header-inner { min-height: 112px; position: relative; }
.logo img { height: 72px; width: auto; display: block; }
@media (max-width: 640px) { .header-inner { min-height: 80px; } .logo img { height: 52px; } }
.header-actions { gap: .3rem; }
.header-actions .icon-btn:not(.menu-btn) { display: inline-flex; }
@media (min-width: 1060px) { .header-actions .menu-btn { display: none; } }
.quote-btn { margin-left: .6rem; }

/* Solid green button (hero, enquiry, menu) and square variant for the enquiry form */
.btn-solid { background: var(--green); border-color: var(--green); color: var(--navy-deep); }
.btn-solid:hover { background: var(--green-dark); border-color: var(--green-dark); color: var(--navy-deep); }
.hero .btn-solid, .on-dark .btn-solid, .cta-band .btn-solid, .mega-feature .btn-solid, .nav .mega-feature a.btn-solid { color: var(--navy-deep); }
.btn-square { border-radius: 0; }
/* Any button that fills green on hover uses navy text, wherever it sits */
.btn-primary:hover, .btn-ghost:hover, .btn-solid:hover, .footer a.btn:hover, .nav a.btn:hover, .mega-feature a.btn:hover, .cta-band a.btn-primary:hover, .cta-band a.btn-ghost:hover, .contact-card a.btn:hover, .cta-contact a.btn:hover, .drawer-panel a.btn-primary:hover, .hero a.btn-primary:hover { color: var(--navy-deep); }

/* Form fields: clearer borders */
.field input[type=text], .field textarea, .field select, .form input[type=text], .form input[type=email], .form input[type=password], .form input[type=tel], .form input[type=number], .form select, .form textarea, .option select { border-color: #b9c6ce; }
.cta-form .form input, .cta-form .form select, .cta-form .form textarea, .quote-card .form input, .quote-card .form select, .quote-card .form textarea { border-color: #aebcc5; background: #fbfcfd; }
.cta-form .btn { background: var(--green); border-color: var(--green); color: var(--navy-deep); }
.cta-form .btn:hover { background: var(--green-dark); border-color: var(--green-dark); color: var(--navy-deep); }

/* Services mega menu: spans the header, cards never touch the help panel */
.nav-item.has-menu { position: static; }
.mega { left: 0; right: 0; width: auto; max-width: none; transform: translateY(6px); padding: 1.25rem; border-radius: 16px; }
.nav-item.open > .mega { transform: translateY(0); }
.mega-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 1.25rem; }
.mega-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; }
.mega-card b { white-space: normal; }
.mega-feature { background: var(--bg); color: var(--ink); border: 1px solid var(--line-soft); border-radius: 14px; padding: 1.5rem; gap: .55rem; justify-content: center; }
.mega-feature .mf-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--navy-deep); color: var(--green); display: grid; place-items: center; margin-bottom: .25rem; }
.mega-feature b { color: var(--navy-deep); font-weight: 600; font-size: 1.15rem; line-height: 1.2; }
.mega-feature p { margin: 0 0 .35rem; font-size: .88rem; color: var(--muted); line-height: 1.5; }
.mega-feature .btn { align-self: flex-start; }
.nav .mega-feature a.mega-phone { color: var(--navy); font-size: .92rem; font-weight: 700; display: inline-flex; align-items: center; gap: .45rem; }
.nav .mega-feature a.mega-phone svg { color: var(--green-dark); }
.nav .mega-feature a.mega-phone:hover { color: var(--green-dark); }

/* Hero: heading on two lines, meta points on one line each */
.hero-copy { max-width: 900px; }
.hero-copy h1 { max-width: 30ch; }
.hero-copy.copy-medium { max-width: 780px; } .hero-copy.copy-medium h1 { max-width: 24ch; }
.hero-copy.copy-small { max-width: 620px; } .hero-copy.copy-small h1 { max-width: 17ch; }
.hero-meta, .hero-photo .hero-meta { display: flex; flex-wrap: wrap; gap: 1.25rem 2.75rem; margin-top: 2.5rem; }
.hero-meta > div { display: flex; gap: .85rem; align-items: center; }
.hero-meta strong { white-space: nowrap; font-size: 1.1rem; }
.hero-meta > div > span:last-child { white-space: nowrap; }
@media (max-width: 480px) { .hero-meta > div > span:last-child { white-space: normal; } }

/* Reviews: navy band with a scrollable carousel */
.reviews-band { background: var(--navy-deep); border-bottom: 0; color: #fff; padding: 2.75rem 0 3rem; }
.reviews-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.reviews-band .reviews-summary { color: #fff; }
.reviews-band .reviews-head a.small { color: var(--green); font-weight: 700; }
.reviews-band .reviews-head a.small:hover { color: #fff; }
.reviews-carousel { position: relative; padding: 0 3.6rem; }
.reviews-track { display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.reviews-track::-webkit-scrollbar { display: none; }
.reviews-track .review { flex: 0 0 100%; scroll-snap-align: start; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
@media (min-width: 700px) { .reviews-track .review { flex-basis: calc((100% - 1.25rem) / 2); } }
@media (min-width: 1000px) { .reviews-track .review { flex-basis: calc((100% - 2.5rem) / 3); } }
.reviews-track .review p { color: #fff; }
.reviews-track .review .q { color: var(--green); }
.reviews-track .review footer { color: var(--green); font-size: .9rem; }
.reviews-track .review footer span { display: block; font-weight: 600; opacity: .9; }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; transition: .15s; z-index: 2; }
.carousel-btn svg { width: 20px; height: 20px; }
.carousel-btn.prev { left: 0; } .carousel-btn.next { right: 0; }
.carousel-btn:hover { background: var(--green); border-color: var(--green); color: var(--navy-deep); }
.carousel-btn[disabled] { opacity: .3; cursor: default; }
.carousel-btn[disabled]:hover { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
@media (max-width: 640px) { .reviews-carousel { padding: 0 2.9rem; } .carousel-btn { width: 40px; height: 40px; } }

/* Split bands: copy on one side, full-bleed photo on the other */
.split { display: grid; grid-template-columns: 1fr; position: relative; overflow: hidden; }
.split-copy { padding: 3rem 1.25rem; }
.split-copy h2 { max-width: 22ch; }
.split-copy > p { color: var(--muted); max-width: 56ch; font-size: 1.02rem; }
.split-copy .eyebrow { margin-bottom: .8rem; }
.split-media { position: relative; min-height: 280px; }
.split-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.split-steps { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .7rem; }
.split-steps li { display: flex; gap: .85rem; align-items: center; font-size: .95rem; color: var(--ink); }
.split-steps .num { flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--navy-deep); color: var(--green); display: grid; place-items: center; font-family: var(--font-head); font-weight: 600; font-size: .95rem; }
.split-merch { background: var(--green-tint); }
.split-partner { background: var(--bg); }
.split-contact { background: #fff; }
@media (min-width: 640px) { .split-steps { grid-template-columns: 1fr 1fr; gap: .8rem 1.5rem; } }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; min-height: 560px; }
  .split-copy { padding: 5rem 3.5rem 5rem max(1.25rem, calc((100vw - 1200px) / 2 + 1.25rem)); display: flex; flex-direction: column; justify-content: center; }
  .split-media { min-height: 100%; }
  .split.media-left .split-media { order: -1; }
  .split.media-left .split-copy { padding: 5rem max(1.25rem, calc((100vw - 1200px) / 2 + 1.25rem)) 5rem 3.5rem; }
}
@media (max-width: 899px) { .split-media { order: -1; } }

/* Contact page */
.contact-split h1 { margin-bottom: .35rem; }
.contact-split .lead { font-size: 1.15rem; color: var(--muted); max-width: 40ch; margin-bottom: 1.75rem; }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.contact-list li { display: flex; gap: 1rem; align-items: flex-start; }
.contact-list .ci { flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--navy-deep); color: var(--green); display: grid; place-items: center; }
.contact-list strong { display: block; font-family: var(--font-body); text-transform: uppercase; letter-spacing: .14em; color: var(--green-dark); font-size: .68rem; font-weight: 800; margin-bottom: .1rem; }
.contact-list a, .contact-list span.v { color: var(--navy-deep); font-family: var(--font-head); font-size: 1.15rem; font-weight: 500; }
.contact-list a:hover { color: var(--green-dark); }
.contact-social { display: flex; gap: .6rem; margin-top: 1.75rem; }
.contact-social a { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; color: var(--navy); }
.contact-social a:hover { border-color: var(--green); background: var(--green); color: var(--navy-deep); }

/* Page banners: icon in line with the heading, no breadcrumbs */
.page-hero .breadcrumb { display: none; }
.page-hero-inner { align-items: center; gap: 1.5rem; }
.page-hero-icon { margin-top: 0; width: 72px; height: 72px; }
.page-hero h1 { margin-bottom: .2rem; }
.page-hero-sub { margin: 0; }

/* Other services: navy band */
.other-band { background: var(--navy-deep); color: #fff; }
.other-band .eyebrow { color: var(--green); }
.other-band h2 { color: #fff; }
.other-band .section-head p { color: #b7cad5; }
.other-band a.service { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #fff; }
.other-band a.service:hover { background: rgba(255,255,255,.1); border-color: var(--green); transform: none; }
.other-band a.service h3 { color: #fff; }
.other-band a.service p { color: #b7cad5; }
.other-band a.service .more { color: var(--green); }
.other-band a.service .ico { background: var(--green); color: var(--navy-deep); }

/* Portfolio page: intro on one line, filter toggles */
.portfolio-intro { max-width: none !important; }
/* Portfolio cards: square images */
.work-img { aspect-ratio: 1 / 1; }
/* Footer: services, information, then Connect with us + logo on the far right; staff login bottom right */
.footer-grid { grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr 1.3fr; gap: 3rem; } .footer-brand { justify-self: end; text-align: right; } .footer-brand .social { justify-content: flex-end; } }
.footer-brand img { height: 56px; width: auto; margin: 1.75rem 0 .75rem; display: inline-block; }
.footer-brand p { margin-bottom: 0; }
.footer-bottom { align-items: center; }
.footer a.btn.staff-login { padding: .65rem 2.4rem; min-width: 200px; justify-content: center; margin: 0; }
.footer-logins { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; }
/* Shop banner (per client shop: own colour, logo, heading and text) */
.shop-hero { background: var(--shop-bg, var(--navy-deep)); color: var(--shop-fg, #fff); padding: 3rem 0 3.25rem; position: relative; overflow: hidden; }
.shop-hero::after { content: ''; position: absolute; right: -80px; top: -120px; width: 380px; height: 380px; border-radius: 50%; background: rgba(255,255,255,.07); pointer-events: none; }
.shop-hero.is-light::after { background: rgba(0,0,0,.05); }
.shop-hero .wrap { position: relative; z-index: 1; }
.shop-hero-grid { display: grid; gap: 1.5rem; align-items: center; }
.shop-hero h1 { color: var(--shop-h1, var(--shop-fg, #fff)); margin-bottom: .35rem; }
.shop-hero p { margin: 0; max-width: 60ch; opacity: .85; font-size: 1.05rem; color: var(--shop-body, var(--shop-fg, #fff)); }
.shop-hero .eyebrow { color: var(--shop-body, var(--shop-fg, #fff)); opacity: .75; }
/* a colour picked by hand is meant to be seen, so it is not faded */
.shop-hero.has-body-colour p, .shop-hero.has-body-colour .eyebrow { opacity: 1; }
.shop-hero-logo { display: flex; justify-content: flex-start; }
.shop-hero-logo img { max-height: 170px; max-width: 320px; width: auto; height: auto; object-fit: contain; background: transparent; border-radius: 0; padding: 0; box-shadow: none; }
@media (min-width: 800px) { .shop-hero { padding: 3.5rem 0; } .shop-hero-grid { grid-template-columns: 1fr auto; gap: 3rem; } .shop-hero-logo { justify-content: flex-end; } }
.back-link { font-size: .85rem; font-weight: 700; color: var(--muted); }
.back-link:hover { color: var(--navy); }
/* Shop pages: help line instead of the main navigation */
.nav.shop-help { display: none; align-items: center; justify-content: center; gap: .6rem; margin: 0 auto; font-weight: 600; font-size: .95rem; color: var(--navy); flex-wrap: wrap; text-align: center; }
.nav.shop-help .need { color: var(--green-dark); font-weight: 800; }
.nav.shop-help a { color: var(--navy); font-weight: 800; padding: 0; border-radius: 0; }
.nav.shop-help a::after { display: none; }
.nav.shop-help a:hover { color: var(--green-dark); }
@media (min-width: 1060px) { .nav.shop-help { display: flex; } }
.drawer-help { padding: .5rem .35rem 1rem; border-bottom: 1px solid var(--line-soft); margin-bottom: .5rem; color: var(--navy); font-weight: 600; line-height: 1.7; }
.drawer-help .need { color: var(--green-dark); font-weight: 800; font-family: var(--font-head); font-size: 1.1rem; }
.drawer-help a { color: var(--navy); font-weight: 800; }
/* Shop pages: free merchandise shop promo instead of the enquiry band */
.shop-promo { background: var(--navy-deep); color: #fff; padding: 4rem 0; position: relative; overflow: hidden; }
.shop-promo::before { content: ''; position: absolute; left: -120px; bottom: -160px; width: 360px; height: 360px; border-radius: 50%; background: rgba(140,197,64,.12); }
.shop-promo .wrap { position: relative; z-index: 1; }
.shop-promo .eyebrow { color: var(--green); }
.shop-promo h2 { color: #fff; max-width: 24ch; }
.shop-promo p { color: #b7cad5; max-width: 56ch; margin-bottom: 1.5rem; }
.shop-promo-grid { display: grid; gap: 2rem; align-items: center; }
.shop-promo-media img { width: 100%; border-radius: var(--radius); display: block; box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 900px) { .shop-promo-grid { grid-template-columns: 1.15fr .85fr; gap: 4rem; } }

/* ===== Section system (site editor) ===== */
.section-green { background: var(--green-tint); }
.section-navy { background: var(--navy-deep); color: #fff; }
.section-navy h2, .section-navy h3, .section-navy .eyebrow { color: #fff; }
.section-navy .eyebrow { color: var(--green); }
.section-navy p { color: #b7cad5; }
.section-navy .prose, .section-navy .prose p, .section-navy .prose li { color: #d4e5ee; }
.wrap-narrow { max-width: 760px; }
.align-center { text-align: center; }
.align-center .section-head { justify-content: center; text-align: center; }
.align-center .section-head > div { margin: 0 auto; }
.align-center .section-head p, .align-center .hero-copy, .align-center .hero-copy h1, .align-center .hero-copy p, .align-center .split-copy h2, .align-center .split-copy > p, .align-center .wrap-narrow, .align-center .page-hero-sub { margin-left: auto; margin-right: auto; }
.align-center .hero-actions, .align-center .split-actions, .align-center .hero-meta, .align-center .page-hero-inner { justify-content: center; }
.align-center .split-steps { text-align: left; }
.align-center .prose { text-align: center; }
.hero-navy { background: var(--navy-deep); }
.hero-navy .facets { display: block; right: -4%; width: 48%; opacity: .55; }
@media (max-width: 899px) { .hero-navy .facets { display: none; } }
.hero-tall { min-height: 720px; }
.hero-short { min-height: 0; padding-top: 3.5rem; padding-bottom: 3rem; }
.hero-short.hero-photo { min-height: 0; }
.hero-small { color: #8ea9b8; margin-top: 1rem; }
.hs-small h1, .hs-small h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.hs-large h1, .hs-large h2 { font-size: clamp(2.3rem, 4.6vw, 3.4rem); }
.hs-xl h1, .hs-xl h2 { font-size: clamp(2.6rem, 5.6vw, 4.2rem); }
.hc-navy h1, .hc-navy h2, .hc-navy h3 { color: var(--navy) !important; }
.hc-green h1, .hc-green h2, .hc-green h3 { color: var(--green) !important; }
.hc-white h1, .hc-white h2, .hc-white h3 { color: #fff !important; }
.hc-dark h1, .hc-dark h2, .hc-dark h3 { color: var(--ink) !important; }
.tc-navy p, .tc-navy li, .tc-navy .lead { color: var(--navy) !important; }
.tc-green p, .tc-green li, .tc-green .lead { color: var(--green) !important; }
.tc-white p, .tc-white li, .tc-white .lead { color: #fff !important; }
.tc-dark p, .tc-dark li, .tc-dark .lead { color: var(--ink) !important; }
.tc-muted p, .tc-muted li, .tc-muted .lead { color: var(--muted) !important; }
.sp-compact { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.sp-compact .split-copy { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.sp-roomy { padding-top: 7rem !important; padding-bottom: 7rem !important; }
.sp-none { padding-top: 0 !important; padding-bottom: 0 !important; }
.split-white { background: #fff; } .split-light { background: var(--bg); } .split-green { background: var(--green-tint); }
.split-navy { background: var(--navy-deep); color: #fff; } .split-navy h2 { color: #fff; } .split-navy .split-copy > p { color: #b7cad5; } .split-navy .split-steps li { color: #fff; } .split-navy .split-steps .num { background: var(--green); color: var(--navy-deep); }
.split-ph { position: absolute; inset: 0; display: grid; place-items: center; gap: .5rem; color: #8ea9b8; background: repeating-linear-gradient(45deg, #e9eef2 0 12px, #f3f6f8 12px 24px); font-weight: 700; font-size: .9rem; text-align: center; }
.split-ph span { display: block; }
.services.cols-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1000px) { .services.cols-4 { grid-template-columns: repeat(4, 1fr); } }
.work-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1000px) { .work-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }
.steps-2 { grid-template-columns: 1fr; }
@media (min-width: 700px) { .steps-2 { grid-template-columns: repeat(2, 1fr); } }
.image-band figure { margin: 0; }
.image-band img { width: 100%; display: block; border-radius: var(--radius); }
.image-band.width-full img { border-radius: 0; }
.image-band figcaption { text-align: center; color: var(--muted); font-size: .85rem; margin-top: .75rem; }
.content-form .service-layout.form-left .service-side { order: -1; }
@media (min-width: 960px) { .content-form .service-layout.form-left { grid-template-columns: 380px 1fr; } }
.reviews-band.reviews-light { background: var(--bg); color: var(--ink); border-bottom: 1px solid var(--line-soft); }
.reviews-light .reviews-summary { color: var(--ink) !important; }
.reviews-light .reviews-track .review { background: #fff; border-color: var(--line); }
.reviews-light .reviews-track .review p { color: var(--ink); }
.reviews-light .reviews-track .review footer { color: var(--green-dark); }
.reviews-light .carousel-btn { border-color: var(--line); color: var(--navy); }
.reviews-light .reviews-head a.small { color: var(--green-dark); }
.cta-grid.cta-no-form { grid-template-columns: 1fr; }
/* Footer columns from the editor */
.footer-grid.cols-1 { grid-template-columns: 1fr; } .footer-grid.cols-2 { grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .footer-grid.cols-3 { grid-template-columns: 1fr 1fr 1.3fr; } .footer-grid.cols-4 { grid-template-columns: 1fr 1fr 1fr 1.2fr; } .footer-grid.cols-5 { grid-template-columns: repeat(5, 1fr); } .footer-grid.cols-6 { grid-template-columns: repeat(6, 1fr); } }
.fcol.align-center { text-align: center; } .fcol.align-center .social { justify-content: center; }
@media (min-width: 900px) { .fcol.align-right { text-align: right; } .fcol.align-right .social { justify-content: flex-end; } }
.fbrand img { width: auto; margin: 1.5rem 0 .75rem; display: inline-block; }
.faddr { color: #9fb5c1; font-size: .85rem; margin: 0; }
.ftext { color: #b7cad5; font-size: .9rem; margin: 0; }
.fcol h4:first-child { margin-top: 0; }


/* ===== Round 5: global bands, green reviews, footer layout, glass enquiry form ===== */
.section-brand { background: var(--green); color: var(--navy-deep); }
.section-brand h2, .section-brand h3 { color: var(--navy-deep); }
.section-brand .eyebrow { color: var(--navy-deep); opacity: .8; }
.section-brand p { color: var(--navy-deep); }
.split-brand { background: var(--green); color: var(--navy-deep); }
.split-brand h2 { color: var(--navy-deep); } .split-brand .eyebrow { color: var(--navy-deep); opacity: .8; } .split-brand .split-copy > p { color: var(--navy-deep); }
.split-brand .split-steps li { color: var(--navy-deep); } .split-brand .split-steps .num { background: var(--navy-deep); color: var(--green); }
.split-brand .btn-navy { color: var(--navy-deep); border-color: var(--navy-deep); } .split-brand .btn-navy:hover { background: var(--navy-deep); color: #fff; }
.split-brand .btn-solid { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; } .split-brand .btn-solid:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.split-steps .num svg { width: 18px; height: 18px; }
.split-navy .split-steps .num { background: rgba(255,255,255,.1); color: var(--green); }

/* Klarna badge matches the height of the wording beside it */
.klarna-inner { align-items: stretch; }
.klarna-badge { align-self: stretch; justify-content: center; min-width: 150px; text-align: center; height: auto; }
.klarna-inner > div:nth-child(2) { display: flex; flex-direction: column; justify-content: center; }
.klarna-points { align-self: center; }

/* Enquiry band: wording centred beside the form, glass form */
.cta-grid { align-items: center; }
.cta-form { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; box-shadow: 0 30px 60px -40px rgba(0,0,0,.6); }
.form.cta-form label { color: #d4e5ee; }
.form.cta-form input[type=text], .form.cta-form input[type=email], .form.cta-form input[type=tel], .form.cta-form select, .form.cta-form textarea { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color: #fff; }
.form.cta-form input::placeholder, .form.cta-form textarea::placeholder { color: rgba(255,255,255,.45); }
.form.cta-form input:focus, .form.cta-form textarea:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(140,197,64,.18); background: rgba(255,255,255,.12); }
.form.cta-form .err { color: #ffb3b3; }

/* Reviews carousel: brand green, dividers instead of cards, title centred above */
.reviews-band .reviews-head { flex-direction: column; align-items: center; text-align: center; gap: .5rem; margin-bottom: 1.75rem; }
.reviews-band .reviews-summary { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0; }
.reviews-band .reviews-head .stars svg { width: 22px; height: 22px; }
.reviews-track .review { border-radius: 0; background: transparent; border: 0; border-left: 1px solid rgba(255,255,255,.25); padding: .5rem 1.75rem; gap: .65rem; }
.reviews-track .review:first-child { border-left: 0; padding-left: 0; }
.reviews-track .review footer span { display: inline; opacity: 1; }
.reviews-green { background: var(--green); color: var(--navy-deep); }
.reviews-green .reviews-summary { color: var(--navy-deep) !important; }
.reviews-green .reviews-head .stars svg, .reviews-green .review .stars svg { color: #fff; fill: #fff; }
.reviews-green .reviews-track .review { border-left-color: rgba(4,34,47,.25); }
.reviews-green .reviews-track .review p { color: var(--navy-deep); }
.reviews-green .reviews-track .review footer { color: var(--navy-deep); font-weight: 800; }
.reviews-green .carousel-btn { border-color: rgba(4,34,47,.4); color: var(--navy-deep); }
.reviews-green .carousel-btn:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }
.reviews-green .carousel-btn[disabled]:hover { background: transparent; border-color: rgba(4,34,47,.4); color: var(--navy-deep); }
.reviews-green .reviews-head a.small { color: var(--navy-deep); }
.reviews-navy .reviews-head .stars svg, .reviews-navy .review .stars svg { color: #fff; fill: #fff; }
.reviews-light .reviews-track .review { border-left-color: var(--line); background: transparent; }
.reviews-light .review .stars svg { color: var(--green); fill: var(--green); }
@media (max-width: 699px) { .reviews-track .review { border-left: 0; padding-left: 0; } }

/* Footer: green headings, four columns with the logo top right, white circle social icons */
.footer h4 { color: var(--green); }
@media (min-width: 900px) { .footer-grid.cols-4 { grid-template-columns: 1.3fr 1.1fr 1.1fr auto; gap: 3rem; } .fcol-brand { justify-self: end; } }
.fbrand img { margin: 0 0 .75rem; }
.fcol-brand .fbrand img { margin-top: .2rem; }
.footer .social a { background: #fff; color: var(--navy-deep); border: 0; border-radius: 50%; width: 38px; height: 38px; }
.footer .social a:hover { background: var(--green); color: var(--navy-deep); }
.footer .social a svg { width: 20px; height: 20px; }
.footer .social { gap: .8rem; margin-top: 1.1rem; }
.footer .social a { width: 42px; height: 42px; }
.footer .faddr { color: #fff; font-size: .95rem; margin: .25rem 0 0; opacity: .92; }
.footer .fcol > a { font-size: .95rem; }
.footer-bottom { margin-top: 3rem; padding-top: 1.5rem; font-size: .85rem; }
.footer-bottom > span { color: #9fb5c1; }
.footer a.btn.staff-login { padding: .75rem 2rem; min-width: 0; font-size: .92rem; border-color: rgba(255,255,255,.8); color: #fff; }
.footer a.btn.staff-login:hover, .footer a.btn.staff-login:focus-visible { background: var(--green); border-color: var(--green); color: var(--navy-deep); }

/* ===== Round 6: navy home header, green service icons, contact columns, photo row ===== */
/* Header: taller, navy with the light logo on the home page, white everywhere else */
.header-inner { min-height: 128px; padding: .6rem 0; }
@media (max-width: 640px) { .header-inner { min-height: 96px; padding: .4rem 0; } }
.header.header-navy { background: var(--navy-deep); border-bottom-color: rgba(255,255,255,.06); backdrop-filter: none; }
.header-navy .nav-link { color: #d4e5ee; }
.header-navy .nav-link:hover, .header-navy .nav-link.active, .header-navy .nav-item.open > .nav-link { color: #fff; background: rgba(255,255,255,.08); }
.header-navy .nav-link.nav-merch { color: var(--green); }
.header-navy .nav-link.nav-merch:hover, .header-navy .nav-link.nav-merch.active { background: var(--green); color: var(--navy-deep); }
.header-navy .icon-btn { color: #fff; }
.header-navy .icon-btn:hover { background: rgba(255,255,255,.1); }
.header-navy .icon-btn .badge { border-color: var(--navy-deep); }
.header-navy .shop-help, .header-navy .shop-help a { color: #fff; }
.header .quote-btn.btn-solid { background: var(--green); border-color: var(--green); color: var(--navy-deep); }
.header .quote-btn.btn-solid:hover { background: var(--green-dark); border-color: var(--green-dark); color: var(--navy-deep); }
.header-navy .quote-btn.btn-solid:hover { background: #fff; border-color: #fff; color: var(--navy-deep); }
.drawer-panel a.btn-solid { color: var(--navy-deep); }

/* Service cards: green icon square, navy on hover */
.service .ico { background: var(--green); color: var(--navy-deep); transition: .2s; }
.service:hover .ico { background: var(--navy-deep); color: var(--green); }
a.service.is-merch .ico { background: var(--green); color: var(--navy-deep); }
a.service.is-merch:hover .ico { background: var(--navy-deep); color: var(--green); }
.other-band a.service:hover .ico { background: #fff; color: var(--navy-deep); }

/* Contact page: plain navy icons, phones on the left, email and studio on the right, more room above and below */
.contact-cols { display: grid; gap: 1.25rem 2.5rem; margin-bottom: 2rem; }
@media (min-width: 640px) { .contact-cols { grid-template-columns: max-content 1fr; } }
.contact-list a, .contact-list span.v { white-space: nowrap; }
.contact-list .ci { width: auto; height: auto; border-radius: 0; background: transparent; color: var(--navy); padding-top: .15rem; }
.contact-list .ci svg { width: 24px; height: 24px; }
.contact-list li { gap: .8rem; }
.contact-cols .contact-list { align-content: start; }
.contact-cols .contact-list a, .contact-cols .contact-list span.v { font-size: 1.08rem; }
.header-navy .logo img { height: 72px; }
@media (max-width: 640px) { .header-navy .logo img { height: 52px; } }
@media (min-width: 900px) { .contact-split .split-copy { padding-top: 7rem; padding-bottom: 7rem; } }
@media (max-width: 899px) { .contact-split .split-copy { padding-top: 4rem; padding-bottom: 4rem; } }

/* Pages without the side form (terms, privacy, returns) keep their spacing */
.content-form .wrap:not(.service-layout) { padding: 2.75rem 0 3rem; }

/* Photo row (two to four photos side by side) */
.photo-row { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .photo-row.cols-2, .photo-row.cols-3, .photo-row.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .photo-row.cols-3 { grid-template-columns: repeat(3, 1fr); } .photo-row.cols-4 { grid-template-columns: repeat(4, 1fr); } }
.photo-item { margin: 0; }
/* a linked photo puts an <a> around the picture, so these match the picture at either depth */
.photo-item img, .photo-item .split-ph { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); position: relative; inset: auto; }
.photo-row.shape-square .photo-item img, .photo-row.shape-square .photo-item .split-ph { aspect-ratio: 1 / 1; }
.photo-row.shape-portrait .photo-item img, .photo-row.shape-portrait .photo-item .split-ph { aspect-ratio: 4 / 5; }
.photo-item figcaption { text-align: center; color: var(--muted); font-size: .85rem; margin-top: .6rem; }
.photo-item.ed-imgwrap { position: relative; }
.photo-item .split-ph { display: grid; place-content: center; justify-items: center; }
/* clickable photos lift very slightly, the same idea as the portfolio cards */
.photo-item > a { display: block; border-radius: var(--radius); overflow: hidden; transition: transform .18s, box-shadow .18s; }
.photo-item.is-link > a:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -20px rgba(4,34,47,.45); }
.photo-item.is-link > a:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

/* Photo-and-text bands: "Space above and below" grows the band itself, so the photo always fills the full height edge to edge */
.split.sp-roomy, .split.sp-compact, .split.sp-none { padding-top: 0 !important; padding-bottom: 0 !important; }
.split.sp-roomy .split-copy { padding-top: 5rem; padding-bottom: 5rem; }
.split.sp-compact .split-copy { padding-top: 2rem; padding-bottom: 2rem; }
.split.sp-none .split-copy { padding-top: 1.5rem; padding-bottom: 1.5rem; }
@media (min-width: 900px) {
  .split.sp-roomy { min-height: 700px; } .split.sp-roomy .split-copy { padding-top: 8rem; padding-bottom: 8rem; }
  .split.sp-compact { min-height: 0; } .split.sp-compact .split-copy { padding-top: 3rem; padding-bottom: 3rem; }
  .split.sp-none { min-height: 0; } .split.sp-none .split-copy { padding-top: 2rem; padding-bottom: 2rem; }
}

/* ===== Round 7: header shadow, shop pages on light grey, centred product cards, product page spacing ===== */
.header { box-shadow: 0 8px 28px -16px rgba(4,34,47,.35); }
.header.header-navy { box-shadow: 0 10px 30px -14px rgba(0,0,0,.55); }

/* Shop pages: light grey page so white product photos sit in white cards */
body.shop-page main { background: var(--bg); }
/* A card's own top and bottom margin used to escape through main, leaving a white
   strip between the grey and whatever band comes next. flow-root keeps it inside. */
main { display: flow-root; }

body.shop-page .listing { padding-bottom: 3.5rem; }
body.shop-page .card { border: 1px solid var(--line-soft); box-shadow: 0 10px 30px -22px rgba(4,34,47,.35); }
body.shop-page .card-img { background: #fff; border-radius: var(--radius) var(--radius) 0 0; }
body.shop-page .card:hover { box-shadow: 0 22px 40px -22px rgba(4,34,47,.4); }
body.shop-page .card-body { padding: 1rem .9rem 1.1rem; }
body.shop-page .sidebar h3 { margin-top: .25rem; }
body.shop-page .sidebar ul a { background: #fff; border: 1px solid var(--line-soft); }
body.shop-page .listing-bar select, body.shop-page .mobile-cats a { background: #fff; }
body.shop-page .mobile-cats a.active { background: var(--navy); color: #fff; border-color: var(--navy); }
body.shop-page .mobile-cats a.cat-featured.active { background: var(--green); border-color: var(--green); }
body.shop-page .gallery-main, body.shop-page .gallery-thumbs button { background: #fff; border: 1px solid var(--line-soft); }
body.shop-page .product-info { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 1.75rem; }
body.shop-page .trust div { background: var(--bg); }
body.shop-page .trust.trust-row div { background: #fff; border: 1px solid var(--line-soft); } /* update 69: on the grey shop pages the boxes stay boxes */
body.shop-page .empty { background: #fff; }
.listing-title { font-size: 1.45rem; margin: 0 0 .1rem; }

/* Product cards: title centred with the price underneath in brand green */
.card-body { text-align: center; align-items: center; }
.card-cat { order: -1; }
.card-title { font-size: 1.08rem; }
.card-price { margin-top: .15rem; padding-top: 0; justify-content: center; color: var(--green); font-weight: 800; font-size: 1.08rem; }
.card-desc { margin-top: .35rem; }
.card-body > :last-child { margin-bottom: 0; }

/* Shop banner: strapline on one line, wider copy column */
.shop-hero-copy { max-width: none; }
.shop-hero p { max-width: none; font-size: 1.08rem; }
@media (min-width: 800px) { .shop-hero-grid { grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; } .shop-hero-logo img { max-width: 260px; } }
@media (min-width: 1300px) { .shop-hero p { white-space: nowrap; } }

/* Product page: room under the description and before the related products */
.product { padding-bottom: 1rem; }
.desc { padding-bottom: 1rem; margin-bottom: .5rem; }
.desc .prose h3, .acc-body .prose h3 { font-size: 1.05rem; text-transform: none; letter-spacing: 0; color: var(--ink); font-family: var(--font-head); margin: 1rem 0 .4rem; }
.desc .prose ul, .desc .prose ol, .acc-body .prose ul, .acc-body .prose ol { padding-left: 1.3rem; margin: 0 0 .9rem; } .desc .prose li, .acc-body .prose li { margin-bottom: .3rem; }
.desc .prose p, .acc-body .prose p { margin: 0 0 .9rem; }
.product + .section, .wrap > .section:has(.product-grid) { padding-top: 4rem; margin-top: 2.5rem; border-top: 1px solid var(--line); }
body.shop-page .wrap > .section:has(.product-grid) { border-top: 0; }

/* Photos under the text inside a content section (About page) */
.service-main .photo-row { margin-top: 2rem; }
.service-main .photo-row .photo-item > img, .service-main .photo-row .photo-item > .split-ph { aspect-ratio: 4 / 3; }
/* the shape chosen in the editor has to win inside a page body too, or every picture there is forced back to 4/3 */
.service-main .photo-row.shape-square .photo-item > img, .service-main .photo-row.shape-square .photo-item > .split-ph { aspect-ratio: 1 / 1; }
.service-main .photo-row.shape-portrait .photo-item > img, .service-main .photo-row.shape-portrait .photo-item > .split-ph { aspect-ratio: 4 / 5; }

/* ===== Round 8: product page heading and price, pill breadcrumbs, spec and size guide, no white box ===== */
body.shop-page .product-info { background: transparent; border: 0; border-radius: 0; padding: 0; }
.product-info h1 { color: var(--navy); }
.price { color: var(--green); }
.price del, .price .vat { color: var(--muted); }
.crumb-pills { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: 1.5rem; }
.crumb-pills a { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1rem .5rem .8rem; border-radius: 999px; background: #fff; border: 1.5px solid var(--line); color: var(--navy); font-weight: 700; font-size: .85rem; transition: .15s; }
.crumb-pills a svg { width: 16px; height: 16px; }
.crumb-pills a:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.spec-list { display: grid; grid-template-columns: 1fr; gap: .35rem .5rem; margin: 0; }
.spec-list > div { display: grid; grid-template-columns: 130px 1fr; gap: .5rem; font-size: .92rem; padding: .35rem 0; border-bottom: 1px solid var(--line-soft); }
.spec-list dt { color: var(--muted); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; padding-top: .1rem; }
.spec-list dd { margin: 0; color: var(--ink); }
.size-guide h3 { display: flex; align-items: center; gap: .4rem; }
.size-guide h3 svg { color: var(--navy); }
.size-guide table { width: 100%; border-collapse: collapse; font-size: .9rem; background: #fff; border-radius: 10px; overflow: hidden; }
.size-guide th, .size-guide td { padding: .5rem .7rem; text-align: left; border-bottom: 1px solid var(--line-soft); }
.size-guide th { background: var(--navy); color: #fff; font-family: var(--font-body); font-weight: 700; font-size: .78rem; letter-spacing: .04em; }
.size-guide tr:last-child td { border-bottom: 0; }
.size-guide .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }

/* Zero-rated children's sizes */
.no-vat-note { display: inline-flex; align-items: center; gap: .4rem; background: var(--green-tint); color: var(--green-dark); border-radius: 8px; padding: .4rem .7rem; font-size: .82rem; font-weight: 700; margin: -.4rem 0 .9rem; }
.no-vat-note svg { width: 14px; height: 14px; }
/* an advertised discount code, printed under the price on a product page */
.offer-note { display: inline-flex; align-items: center; gap: .45rem; background: var(--navy); color: #fff; border-radius: 8px; padding: .45rem .75rem; font-size: .85rem; margin: -.2rem 0 .9rem; }
.offer-note strong { color: var(--green-bright); font-weight: 800; letter-spacing: .01em; }
.offer-note svg { width: 15px; height: 15px; flex: none; color: var(--green-bright); }

/* Shop owner area (Shop login in the footer) */
.owner-area { padding: 2.5rem 0 4rem; }
.owner-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.owner-head h1 { margin-bottom: .3rem; }
/* "keep your shop on your phone": shown to shop owners until they install it or hide it */
.owner-install { display: flex; align-items: center; gap: 1.1rem; background: #eef7e3; border: 1px solid #cde3ab; border-radius: 14px; padding: 1rem 1.15rem; margin-bottom: 1.25rem; }
.owner-install[hidden] { display: none; }
.owner-install img { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 12px; }
.owner-install-text { flex: 1; min-width: 0; }
.owner-install-text h2 { margin: 0 0 .2rem; font-size: 1.05rem; }
.owner-install-text p { margin: 0; font-size: .88rem; }
.owner-install-do { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
.owner-install-x { background: none; border: 0; font-size: 1.6rem; line-height: 1; color: #6b7d88; cursor: pointer; padding: 0 .25rem; }
.owner-install-x:hover { color: var(--navy); }
@media (max-width: 640px) { .owner-install { flex-wrap: wrap; gap: .8rem; } .owner-install-do { width: 100%; justify-content: space-between; } .owner-install-do .btn { flex: 1; } }
.auth-box + .owner-install { max-width: 460px; margin: 1.25rem auto 0; }

.owner-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1.25rem; }
@media (min-width: 900px) { .owner-stats { grid-template-columns: repeat(4, 1fr); } }
.owner-stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; display: flex; flex-direction: column; }
.owner-stat .lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 700; }
.owner-stat .val { font-size: 1.8rem; font-weight: 800; color: var(--navy-deep); line-height: 1.2; margin: .2rem 0; font-family: var(--font-head); }
.owner-stat .sub { font-size: .8rem; color: var(--muted); }
.owner-stat.pot { background: var(--navy-deep); border-color: var(--navy-deep); }
.owner-stat.pot .lbl, .owner-stat.pot .sub { color: #b7cad5; } .owner-stat.pot .val { color: var(--green); }
.owner-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 1.25rem; }
@media (min-width: 900px) { .owner-grid { grid-template-columns: 1fr 1fr; } }
.owner-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.6rem; margin-bottom: 1.25rem; }
.owner-card h2 { font-size: 1.15rem; margin-bottom: .75rem; } .owner-card h3 { font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-family: var(--font-body); font-weight: 800; margin: 1.25rem 0 .5rem; }
.owner-card.payout { background: var(--green-tint); border-color: #d6e8bf; }
.owner-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.owner-table td, .owner-table th { padding: .5rem 0; border-bottom: 1px solid var(--line); text-align: left; }
.owner-table td:last-child, .owner-table th:last-child { text-align: right; }
.owner-table.wide th { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.owner-list { list-style: none; margin: 0; padding: 0; }
.owner-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.tag { font-size: .72rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; background: var(--bg); color: var(--muted); }
.tag-paid { background: var(--green-tint); color: #3e6a12; } .tag-pending { background: #fff4d6; color: #8a5b00; }
.owner-card .choice { display: flex; gap: .7rem; align-items: flex-start; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; margin: 0 0 .6rem; cursor: pointer; font-size: .95rem; }
.owner-card .choice input { margin-top: .3rem; }
.owner-card .choice small { color: var(--muted); font-size: .8rem; }
.owner-card .choice.small { padding: .5rem .8rem; align-items: center; margin-bottom: .4rem; }
.owner-card .choice-body { padding: .25rem 0 .5rem .5rem; margin-bottom: .5rem; }
.owner-card .notice-line { background: #fff4d6; color: #8a5b00; border-radius: 10px; padding: .7rem .9rem; font-size: .9rem; }
.owner-preview { background: var(--navy-deep); color: #fff; border-radius: 10px; padding: .7rem 1rem; margin-bottom: 1.25rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; font-size: .9rem; }
.owner-preview a { color: var(--green); font-weight: 700; }
.owner-stats-na { grid-template-columns: 1fr; max-width: 360px; }
.kb-form .kb-row { display: flex; align-items: center; gap: .5rem; }
.kb-form .kb-currency { font-weight: 700; color: var(--navy); }
.kb-form input { max-width: 140px; }
.owner-rule { border: 0; border-top: 1px solid var(--line); margin: 1.25rem 0; }

/* ---------------------------------------------------------------------------
   Phone: the website. Update 31.
   The shop banner stacks logo-first and centred, the Popular ribbon shrinks so
   it stops covering the picture, and the footer stacks in the middle of the page
   with a solid green Shop Login so it is clearly not the staff one.
   --------------------------------------------------------------------------- */
/* the phone-only copy of the social icons under the logo: hidden until the columns stack */
.footer-social-under { display: none; }

@media (max-width: 767px) {
  /* shop banner: logo at the top, then the name and the line under it, all centred */
  .shop-hero-grid { text-align: center; justify-items: center; }
  .shop-hero-logo { order: -1; justify-content: center; margin-bottom: .25rem; }
  .shop-hero-logo img { max-height: 120px; max-width: 74vw; }
  .shop-hero-copy { max-width: 100%; }
  .shop-hero p { margin-left: auto; margin-right: auto; max-width: 42ch; }

  /* the Popular ribbon on a list of items: small enough to leave the garment visible */
  .card .tag.popular { top: .45rem; left: .45rem; font-size: .58rem; letter-spacing: .06em; padding: .26rem .5rem; box-shadow: 0 2px 6px rgba(4, 34, 47, .18); }

  /* footer: everything stacked and centred */
  .footer-grid { grid-template-columns: 1fr; gap: 1.6rem; text-align: center; }
  .footer-grid .fcol, .footer-grid .fcol.align-left, .footer-grid .fcol.align-right { text-align: center; align-items: center; }
  .footer-grid .fcol a, .footer-grid .fcol p { text-align: center; }
  .footer .fbrand, .footer .social { justify-content: center; display: flex; }
  /* the icons come out of Connect and sit under the logo */
  .footer-grid .fcol .social { display: none; }
  .footer-social-under { display: flex; justify-content: center; margin: 1.4rem 0 0; }
  .footer-social-under .social { margin: 0; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: .9rem; padding-bottom: 0; }
  /* one login button above the other, each the full width */
  .footer-logins { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; gap: .6rem; }
  .footer a.btn.staff-login { width: 100%; min-width: 0; }
  /* room under the buttons so they are not against the bottom of the screen */
  .footer { padding-bottom: calc(2.25rem + env(safe-area-inset-bottom, 0px)); }
}

/* Shop Login is solid green so it reads differently from the outlined Staff Login */
.footer a.btn.staff-login.shop-login { background: var(--green); border-color: var(--green); color: var(--navy-deep); font-weight: 700; }
.footer a.btn.staff-login.shop-login:hover, .footer a.btn.staff-login.shop-login:focus-visible { background: #7cb232; border-color: #7cb232; color: var(--navy-deep); }

/* ---------------------------------------------------------------------------
   Shop landing page: one address for a client with more than one shop.
   --------------------------------------------------------------------------- */
.group-wrap { padding: 3rem 1rem 4rem; }
.group-intro { max-width: 70ch; margin: 0 auto 2rem; text-align: center; }
.group-heading { text-align: center; margin: 0 0 1.75rem; }
.group-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; max-width: 900px; margin: 0 auto; }
@media (min-width: 700px) { .group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* squares per row, set on the landing page section. Three or four need more room than two. */
.group-grid.cols-3, .group-grid.cols-4 { max-width: 1100px; }
@media (min-width: 960px) {
  .group-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .group-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
}
/* inside an editable section the wrap already provides the padding the old group-wrap gave */
.section > .wrap > .group-grid { margin-top: 1.5rem; }
.group-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .18s, transform .18s; }
.group-card:hover { box-shadow: 0 22px 40px -22px rgba(4,34,47,.4); transform: translateY(-2px); }
.group-card.is-off { opacity: .55; }
.group-card-img { position: relative; display: block; aspect-ratio: 1 / 1; background: #fff; overflow: hidden; }
.group-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 1.25rem; }
.group-card-body { display: flex; flex-direction: column; gap: .5rem; padding: 1.35rem; text-align: center; flex: 1; }
.group-card-name { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; color: var(--navy); line-height: 1.25; }
.group-card-tag { color: var(--muted); font-size: .92rem; }
.group-card-lock { color: var(--muted); font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }
.group-card-btn { margin: auto auto 0; }

/* ---- Portfolio: click a project to see it bigger ---- */
.work[data-zoom] { cursor: zoom-in; }
.work-zoom { position: absolute; top: .7rem; right: .7rem; z-index: 2; width: 36px; height: 36px;
  display: grid; place-items: center; border: 0; border-radius: 50%; padding: 0; cursor: zoom-in;
  background: rgba(255,255,255,.92); color: var(--navy); box-shadow: 0 4px 14px -6px rgba(4,34,47,.55);
  opacity: 0; transform: scale(.9); transition: opacity .16s, transform .16s; }
.work-zoom svg { width: 18px; height: 18px; }
.work:hover .work-zoom, .work:focus-within .work-zoom { opacity: 1; transform: scale(1); }
.work-zoom:hover { background: var(--green); color: var(--navy-deep); }
.work-zoom:focus-visible { opacity: 1; transform: scale(1); outline: 3px solid var(--green); outline-offset: 2px; }

body.zoom-open { overflow: hidden; }
.zoom { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 1.25rem; }
.zoom[hidden] { display: none; }
.zoom-back { position: absolute; inset: 0; background: rgba(4,34,47,.72); backdrop-filter: blur(3px); }
.zoom-panel { position: relative; z-index: 1; width: min(900px, 100%); max-height: 92vh; overflow: auto;
  background: #fff; border-radius: var(--radius); box-shadow: 0 40px 90px -30px rgba(4,34,47,.75);
  animation: zoom-in .18s ease-out; }
@keyframes zoom-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.zoom-close { position: absolute; top: .75rem; right: .75rem; z-index: 2; width: 40px; height: 40px;
  display: grid; place-items: center; border: 0; border-radius: 50%; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.94); color: var(--navy); box-shadow: 0 4px 14px -6px rgba(4,34,47,.55); }
.zoom-close svg { width: 20px; height: 20px; }
.zoom-close:hover { background: var(--navy); color: #fff; }
.zoom-close:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
/* the picture in the pop-up is square, like the artwork itself */
.zoom-img { position: relative; background: #fff; aspect-ratio: 1 / 1; }
.zoom-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.zoom-img .work-ph { width: 100%; height: 100%; }
.zoom-body { padding: 1.5rem 1.75rem 1.75rem; }
/* on a wide screen the wording sits beside the picture, so the square never pushes it off screen */
@media (min-width: 860px) {
  .zoom-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, .68fr); align-items: stretch; }
  .zoom-body { align-self: center; max-height: 100%; overflow: auto; }
}
.zoom-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.zoom-tags:empty { display: none; }
.zoom-tags span { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--navy-deep); background: var(--green); border-radius: 999px; padding: .25rem .6rem; }
.zoom-title { font-family: var(--font-head); font-size: 1.7rem; color: var(--navy); margin: 0 0 .3rem; }
.zoom-industry { color: var(--muted); margin: 0 0 .8rem; font-size: 1rem; }
.zoom-desc { margin: 0 0 1.1rem; line-height: 1.7; white-space: pre-line; }
.zoom-desc[hidden], .zoom-industry[hidden], .zoom-link[hidden] { display: none; }
@media (max-width: 640px) {
  .zoom { padding: .6rem; }
  .zoom-body { padding: 1.15rem 1.15rem 1.35rem; }
  .zoom-title { font-size: 1.35rem; }

}

/* ---------------------------------------------------------------------------
   Update 33: the red Important note, payment badges, gallery dots, thank you page
   --------------------------------------------------------------------------- */

/* The optional red line a product can carry, between the short description and the lead time */
.product-note {
  display: flex; align-items: flex-start; gap: .5rem;
  background: var(--danger-bg); border-left: 3px solid var(--danger); border-radius: var(--radius-sm);
  padding: .7rem .95rem; margin: 0 0 1rem; font-size: .9rem; font-weight: 600; color: var(--danger); line-height: 1.45;
}
.product-note svg { width: 16px; height: 16px; flex: none; margin-top: .12rem; }

/* Payment badges under the three trust icons. The same icon files as the basket, kept on one
   line at every width: the tiles share the row evenly and shrink together, never wrap. */
.pay-methods { display: flex; flex-wrap: nowrap; align-items: center; gap: .3rem; margin: 1.1rem 0 1.75rem; max-width: 420px; } /* update 69: the trust boxes no longer sit above this row, so it keeps its own air below the stock line */
.pay-methods .pm {
  flex: 1 1 0; min-width: 0; width: auto; height: auto; aspect-ratio: 40 / 25;
  border-radius: 4px; display: block; object-fit: cover;
}
.pay-methods .pm.wallet { background: #fff; border: 1px solid var(--line); object-fit: contain; padding: 3px 5px; }

/* Dots under the main product picture (update 73: below it, not on it), so it is clear there are more to see.
   Plain navy rounds: the one you are on is solid, the rest are faint. */
.gallery-dots { display: flex; justify-content: center; align-items: center; gap: .5rem; margin-top: .8rem; }
.gallery-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: var(--navy); opacity: .25; cursor: pointer; transition: .15s; flex: none; }
.gallery-dots button:hover { opacity: .5; }
.gallery-dots button.active { opacity: 1; }
.gallery-main { touch-action: pan-y; }

/* Thank you page */
.thanks { padding: 3.5rem 0 4.5rem; background: var(--bg); }
.thanks-card {
  max-width: 720px; margin-inline: auto; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 2.75rem 2.25rem 2.25rem; text-align: center;
}
.thanks-tick {
  width: 66px; height: 66px; border-radius: 50%; background: var(--green-tint); color: var(--green-dark);
  display: grid; place-items: center; margin: 0 auto 1.1rem;
}
.thanks-tick svg { width: 32px; height: 32px; }
.thanks-card h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin-bottom: .5rem; }
.thanks-card .lead { color: var(--muted); font-size: 1.05rem; max-width: 48ch; margin-inline: auto; }
.thanks-sub { font-size: .9rem; color: var(--muted); margin: 0 0 1.5rem; }
.thanks-steps { text-align: left; margin: 1.75rem 0 1.5rem; }
.thanks-steps li { border-color: var(--line); background: var(--bg); }
.thanks-contact { border-top: 1px solid var(--line); padding-top: 1.35rem; margin-top: .5rem; }
.thanks-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .9rem; }
.thanks-links a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .92rem; }
.thanks-links svg { width: 18px; height: 18px; color: var(--green-dark); }
.thanks-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.6rem; }

@media (max-width: 600px) {
  .thanks { padding: 2rem 0 3rem; }
  .thanks-card { padding: 2rem 1.25rem 1.75rem; }
  .thanks-actions .btn { width: 100%; }
  .pay-methods { gap: .22rem; max-width: none; }
  .pay-methods .pm.wallet { padding: 2px 3px; }
}

/* Colour circles under a product card, so a hoodie in six colours reads as one product */
.card-colours { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; justify-content: center; margin-top: .45rem; }
.cdot { display: block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .18); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.cdot.pale { border-color: rgba(0, 0, 0, .32); }
.cdot.unknown { background: repeating-linear-gradient(45deg, #fff, #fff 3px, #dfe5e9 3px, #dfe5e9 6px); }
.cmore { font-size: .72rem; font-weight: 700; color: var(--muted); letter-spacing: .01em; }
@media (max-width: 480px) { .cdot { width: 12px; height: 12px; } }

/* The same circles as the colour choice on a product page */
.swatches.colours { gap: .55rem; }
.swatches.colours label { padding: 0; border: 0; background: none; border-radius: 50%; line-height: 0; }
.swatches.colours label .cdot { width: 34px; height: 34px; border-width: 1px; }
.swatches.colours label:hover .cdot { border-color: var(--navy); }
.swatches.colours label .ring { display: block; padding: 3px; border: 2px solid transparent; border-radius: 50%; transition: .15s; }
.swatches.colours label:hover .ring { border-color: var(--line); }
.swatches.colours input:checked + label .ring { border-color: var(--navy); }
.swatches.colours input:focus-visible + label .ring { outline: 3px solid var(--green); outline-offset: 2px; }
.swatches.colours label.unavailable { opacity: .35; }
.swatches.colours label.unavailable .ring { position: relative; }
.swatches.colours label.unavailable .ring::after { content: ""; position: absolute; inset: 50% 2px auto; height: 2px; background: var(--ink); transform: rotate(-45deg); }
.option label[data-colour-name] b { font-weight: 700; }

/* Shop owner: the note explaining a pot that came across from the old website */
.owner-note { background: #eef7e3; border: 1px solid #cfe6ae; border-left: 5px solid var(--green); border-radius: 10px; padding: .95rem 1.15rem; margin: 0 0 1.25rem; }
.owner-note strong { display: block; color: var(--navy); font-size: 1rem; margin-bottom: .3rem; }
.owner-note p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--text); }

/* ---- Scroll animations ----
   Everything here is switched on by the "rv-on" class that the small script in the page head
   puts on <html>, and only when the Animations setting is on and the visitor has not asked
   their device to reduce motion. Without that class none of this applies and the page is the
   plain, always-visible one it was before. */
:root { --rv-rise: 30px; --rv-slide: 44px; --rv-time: .62s; --rv-scale: 1; }
html.rv-subtle { --rv-rise: 12px; --rv-slide: 16px; --rv-time: .42s; }
html.rv-bold   { --rv-rise: 60px; --rv-slide: 90px; --rv-time: .78s; --rv-scale: .965; }
html.rv-fast   { --rv-time: .3s; }

html.rv-on [data-rv] {
  opacity: 0;
  transition: opacity var(--rv-time) ease, transform var(--rv-time) cubic-bezier(.22, .72, .28, 1);
  transition-delay: var(--rv-delay, 0s);
  will-change: opacity, transform;
}
html.rv-on [data-rv="up"]    { transform: translate3d(0, var(--rv-rise), 0) scale(var(--rv-scale)); }
html.rv-on [data-rv="left"]  { transform: translate3d(calc(-1 * var(--rv-slide)), 0, 0); }
html.rv-on [data-rv="right"] { transform: translate3d(var(--rv-slide), 0, 0); }
html.rv-on [data-rv].rv-in   { opacity: 1; transform: none; will-change: auto; }

/* A phone is narrow enough that a sideways slide causes a wobble, so everything rises instead */
@media (max-width: 700px) {
  html.rv-on [data-rv="left"], html.rv-on [data-rv="right"] { transform: translate3d(0, var(--rv-rise), 0); }
}

/* Belt and braces: if a visitor turns motion down after the page has loaded, nothing stays hidden */
@media (prefers-reduced-motion: reduce) {
  html.rv-on [data-rv] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------------------
   update 76: a shop under construction. The banner stays, and this note sits where the
   products would be: a white card in the middle of the grey shop page, an amber barrier icon in a
   green-tinted round, the heading in navy. On a phone it fills the width with a little less room
   inside. The staff line under it is amber, so it reads as "not for customers".
   --------------------------------------------------------------------------- */
.construction-wrap { padding: 3.5rem 0 4.5rem; }
.construction { max-width: 640px; margin: 0 auto; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: 0 10px 30px -22px rgba(4,34,47,.35); padding: 2.75rem 2.25rem 2.5rem; text-align: center; }
.construction-ico { width: 72px; height: 72px; border-radius: 50%; background: var(--green-tint); color: var(--green-dark); display: grid; place-items: center; margin: 0 auto 1.25rem; }
.construction-ico svg { width: 36px; height: 36px; }
.construction h2 { color: var(--navy); font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: .6rem; }
.construction-text { color: var(--text); font-size: 1.05rem; max-width: 46ch; margin: 0 auto; }
.construction-staff { display: flex; align-items: flex-start; gap: .6rem; max-width: 640px; margin: 1rem auto 0; background: #fff7e6; border: 1px solid #f3dfb0; color: #8a5b00; border-radius: var(--radius-sm); padding: .8rem 1rem; font-size: .88rem; font-weight: 600; line-height: 1.5; }
.construction-staff svg { flex: none; margin-top: .2rem; }
.construction-staff-product { max-width: none; margin: 1.5rem 0 0; }
/* staff preview: the note and its line sit above the products with less room underneath */
.construction-wrap-staff { padding-bottom: 0; }
.construction-wrap-staff + .listing { padding-top: 2.5rem !important; }
/* update 77: an old shop address that has closed down (store/shop_closed.php) */
.closed-shop h1 { color: var(--navy); font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-bottom: .6rem; }
.closed-shop-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin: 1.75rem 0 1.5rem; }
.closed-shop-more { color: var(--muted); font-size: .95rem; margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--line-soft); }
.closed-shop-more a { color: var(--navy); font-weight: 700; }
@media (max-width: 560px) { .closed-shop-actions .btn { width: 100%; justify-content: center; } }
@media (max-width: 640px) {
  .construction-wrap { padding: 2rem 0 3rem; }
  .construction { padding: 2.1rem 1.35rem 1.9rem; }
  .construction-ico { width: 62px; height: 62px; margin-bottom: 1rem; }
  .construction-ico svg { width: 31px; height: 31px; }
  .construction-text { font-size: 1rem; }
}

/* ==========================================================================
   update 78: sections for the Club & School Shops pages (usable on any page)
   ========================================================================== */
/* Cards with icons */
.info-cards { display: grid; gap: 1.1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.info-cards.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.info-cards.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.info-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.4rem 1.4rem; display: flex; flex-direction: column; color: var(--text); transition: border-color .2s, box-shadow .2s, transform .2s; }
.info-card h3 { font-size: 1.15rem; color: var(--navy); margin: 0 0 .4rem; }
.info-card p { margin: 0; font-size: .97rem; }
.ic-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--green-tint); color: var(--green-dark); display: grid; place-items: center; margin-bottom: 1rem; }
.ic-num { width: 38px; height: 38px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; margin-bottom: 1rem; }
.ic-more { margin-top: auto; padding-top: .9rem; display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; color: var(--navy); font-size: .92rem; }
a.info-card:hover { border-color: var(--green); box-shadow: var(--shadow-soft); transform: translateY(-2px); color: var(--text); }
a.info-card:hover .ic-more { color: var(--green-dark); }
.section-alt .info-card, .section-green .info-card { border-color: transparent; }
.section-navy .info-card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.section-navy .info-card h3 { color: #fff; }
.section-navy .info-card p { color: #c9dae3; }
.section-navy .ic-num { background: var(--green); color: var(--navy-deep); }
.section-navy .ic-ico { background: rgba(140,197,64,.16); color: var(--green); }
.section-navy .ic-more { color: var(--green); }
@media (max-width: 1100px) { .info-cards.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .info-cards.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .info-cards, .info-cards.cols-3, .info-cards.cols-4 { grid-template-columns: 1fr; } }

/* Earnings example */
.money-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 3rem; align-items: center; }
.money-copy h2 { margin-bottom: .7rem; }
.money-copy p { max-width: 54ch; font-size: 1.05rem; margin: 0 0 1rem; }
.money-copy .money-after { color: var(--muted); font-size: .98rem; }
.money-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.4rem 1.5rem; font-variant-numeric: tabular-nums; }
.money-row { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px dashed var(--line); }
.money-row strong { color: var(--ink); }
.money-total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: .9rem; padding: 1rem 1.1rem; border-radius: var(--radius-sm); background: var(--green-tint); font-family: var(--font-head); color: var(--navy); font-weight: 600; }
.money-total strong { font-size: 1.35rem; color: var(--navy); }
.section-navy .money-card { color: var(--text); }
@media (max-width: 860px) { .money-grid { grid-template-columns: 1fr; gap: 1.75rem; } }

/* Questions and answers */
.faq-list { display: grid; gap: .7rem; max-width: 900px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.section-alt .faq-item, .section-green .faq-item { border-color: transparent; }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.2rem; font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; color: var(--navy); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-chev { flex: none; color: var(--green-dark); transition: transform .2s; }
.faq-item[open] .faq-chev { transform: rotate(180deg); }
.faq-item p { margin: 0; padding: 0 1.2rem 1.1rem; color: var(--text); }
.faq-item summary:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: var(--radius-sm); }
.ic-list { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: .55rem; }
.ic-list li { position: relative; padding-left: 1.7rem; font-size: .97rem; line-height: 1.5; }
.ic-list li::before { content: ""; position: absolute; left: 0; top: .2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--green-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2374a833' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / .72rem no-repeat; }
.section-navy .ic-list li { color: #d4e5ee; }
/* update 78: demo shop line */
.demo-bar { background: var(--navy); color: #fff; font-size: .92rem; }
.demo-bar .wrap { display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap; padding-top: .7rem; padding-bottom: .7rem; text-align: center; }
.demo-bar svg { color: var(--green); flex: none; }
.demo-bar a { color: var(--green); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.demo-bar a:hover { color: #fff; }
#add-btn[disabled][title] { opacity: .75; cursor: not-allowed; }

/* update 78: one-line callout strip */
.strip-band { padding: 1.4rem 0; }
.strip-band.section-green { background: var(--green-tint); }
.strip-inner { display: flex; align-items: center; justify-content: center; gap: 1.1rem; flex-wrap: wrap; text-align: center; }
.strip-inner p { margin: 0; font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; color: var(--navy); }
.strip-ico { width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--green-dark); display: grid; place-items: center; flex: none; }
.section-navy .strip-inner p { color: #fff; }
.section-brand .strip-inner p { color: var(--navy-deep); }
@media (max-width: 640px) { .strip-inner .btn { width: 100%; justify-content: center; } }

/* update 79: shop owner page: square logo top right */
.owner-head-right { display: flex; align-items: flex-start; gap: 1rem; }
.owner-logo { width: 96px; height: 96px; object-fit: contain; border-radius: 16px; background: #fff; border: 1px solid var(--line); padding: 6px; box-shadow: var(--shadow-soft); }
@media (max-width: 640px) { .owner-logo { width: 72px; height: 72px; border-radius: 12px; } }

/* ==========================================================================
   update 80: payment links: /pay/<token>
   ========================================================================== */
.pay-wrap { padding: 3rem 0 4.5rem; display: flex; justify-content: center; }
.pay-card { width: 100%; max-width: 640px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2.25rem 2.25rem 2rem; }
.pay-head h1 { font-size: clamp(1.6rem, 3.4vw, 2.1rem); margin-bottom: 1.25rem; color: var(--navy); }
.pay-details { margin: 0 0 1.5rem; padding: 0; border-top: 1px solid var(--line-soft); }
.pay-details > div { display: flex; justify-content: space-between; gap: 1.5rem; padding: .8rem 0; border-bottom: 1px solid var(--line-soft); }
.pay-details dt { color: var(--muted); font-size: .9rem; font-weight: 600; flex: none; }
.pay-details dd { margin: 0; text-align: right; color: var(--ink); font-weight: 600; }
.pay-details .pay-amount { background: var(--green-tint); border-radius: var(--radius-sm); padding: .9rem 1rem; border-bottom: 0; margin-top: .5rem; align-items: baseline; }
.pay-details .pay-amount dt { color: var(--navy); font-family: var(--font-head); font-size: 1rem; }
.pay-details .pay-amount dd { font-family: var(--font-head); font-size: 1.7rem; color: var(--navy); font-weight: 700; }
.pay-form .btn-block { width: 100%; margin-top: .5rem; font-size: 1.05rem; padding: 1rem 1.5rem; }
.pay-error { background: var(--danger-bg); color: var(--danger); border-radius: var(--radius-sm); padding: .75rem 1rem; margin: .75rem 0; font-weight: 600; }
.pay-processing { color: var(--muted); text-align: center; margin: .75rem 0 0; }
/* on the pay page the badges run the full width of the Pay button (Terry); on a phone, two rows of four */
.pay-card .pay-methods { max-width: none; width: 100%; margin: 1rem 0 0; gap: .5rem; }
.pay-card .pay-methods .pm { aspect-ratio: 40 / 25; border-radius: 6px; }
@media (max-width: 640px) {
  .pay-card .pay-methods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
  .pay-card .pay-methods .pm { width: 100%; }
}
.pay-secure { display: flex; align-items: center; justify-content: center; gap: .45rem; color: var(--muted); font-size: .85rem; margin: 1rem 0 0; }
.pay-done { display: flex; gap: 1rem; align-items: flex-start; background: var(--green-tint); border-radius: var(--radius-sm); padding: 1.1rem 1.2rem; }
.pay-done p { margin: .25rem 0 0; color: var(--text); }
.pay-tick { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--green); color: var(--navy-deep); display: grid; place-items: center; }
.pay-tick svg { width: 24px; height: 24px; }
.pay-closed { background: #fff7e6; border: 1px solid #f3dfb0; color: #6b4600; border-radius: var(--radius-sm); padding: 1rem 1.1rem; }
.pay-help { margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: .9rem; text-align: center; }
@media (max-width: 640px) { .pay-wrap { padding: 1.5rem 0 3rem; } .pay-card { padding: 1.5rem 1.15rem; border-radius: var(--radius-sm); } .pay-details > div { flex-direction: column; gap: .15rem; } .pay-details dd { text-align: left; } .pay-details .pay-amount { flex-direction: row; align-items: baseline; } }

.pay-or { display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: .85rem; margin: 1rem 0 .75rem; }
.pay-or::before, .pay-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.pay-paypal { min-height: 48px; }

/* update 81: the "Get started" section on the Club & School Shops pages: text left, form right, half and half, same height */
@media (min-width: 960px) {
  .content-form .service-layout.form-half { grid-template-columns: 1fr 1fr; align-items: stretch; gap: 3rem; }
  .content-form .service-layout.form-half.form-left { grid-template-columns: 1fr 1fr; }
}
.service-layout.form-half .service-main { display: flex; flex-direction: column; justify-content: center; }
.service-layout.form-half .service-side { position: static; display: flex; }
.service-layout.form-half .quote-card { width: 100%; display: flex; flex-direction: column; justify-content: center; padding: 2rem; }
/* update 81: questions and answers run the full width of the page */
.faq-list { max-width: none; }

/* =========================================================================
   Update 83: every button on the website sits in the page.
   Slightly bigger, a soft shadow that falls downwards (y 8, blur 24), a 1px lit top edge, a lift on
   hover and a press on click. The colours and the outline-to-solid hover stay as they were.
   ========================================================================= */
.btn { padding: .92rem 1.75rem; font-size: 1rem; border-radius: 11px;
  box-shadow: 0 8px 24px -10px rgba(9, 67, 91, .38), inset 0 1px 0 rgba(255, 255, 255, .16);
  transition: background .18s, color .18s, border-color .18s, box-shadow .22s, transform .22s cubic-bezier(.22, 1, .36, 1); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(9, 67, 91, .45), inset 0 1px 0 rgba(255, 255, 255, .2); }
.btn:active { transform: translateY(1px); box-shadow: 0 4px 12px -8px rgba(9, 67, 91, .45), inset 0 1px 0 rgba(255, 255, 255, .1); transition-duration: .08s; }
.btn-sm { padding: .62rem 1.2rem; font-size: .88rem; border-radius: 9px; }
/* solid green buttons throw a green-tinted shadow, solid navy a deeper one, white outline buttons on dark bands a dark one */
.btn-solid, .btn-primary:hover, .btn-ghost:hover, .nav a.btn:hover, .hero a.btn-primary:hover { box-shadow: 0 8px 24px -10px rgba(116, 168, 51, .6), inset 0 1px 0 rgba(255, 255, 255, .22); }
.btn-solid:hover, .btn-primary:hover, .btn-ghost:hover { box-shadow: 0 14px 30px -12px rgba(116, 168, 51, .65), inset 0 1px 0 rgba(255, 255, 255, .22); }
.btn-navy-solid, .btn-navy:hover, .btn-outline:hover, .btn-outline-navy:hover { box-shadow: 0 8px 24px -10px rgba(6, 47, 65, .5), inset 0 1px 0 rgba(255, 255, 255, .14); }
.btn-navy-solid:hover { box-shadow: 0 14px 30px -12px rgba(6, 47, 65, .55), inset 0 1px 0 rgba(255, 255, 255, .14); }
.btn-light, .btn-ghost { box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .16); }
.btn[disabled], .btn[disabled]:hover, .btn[disabled]:active { transform: none; box-shadow: none; }
.btn-square { border-radius: 0; }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover, .btn:active { transform: none; transition: none; } }