/* Tshirtgang Shops — layout 1 Colours come from CSS variables set per-shop in : --primary, --secondary, --bg, --text */ * { box-sizing: border-box; } /* Always reserve the scrollbar gutter so page width doesn't shift between short and tall pages (e.g. stepping through bundle items with different numbers of colour/size options). */ html { scrollbar-gutter: stable; } body { margin: 0; font-family: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; /* sticky footer: fill the viewport, footer pinned to the bottom */ min-height: 100vh; display: flex; flex-direction: column; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } h1, h2, h3 { line-height: 1.2; } .muted { opacity: .65; } /* screen-reader-only (keeps a semantic h1/label without affecting layout) */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .small { font-size: .85rem; } /* ---- top bar ---- */ .topbar { background: var(--primary); color: var(--on-primary); display: flex; justify-content: center; align-items: center; padding: .4rem 1.5rem; font-size: .85rem; font-weight: 600; } .topbar-cart:hover { text-decoration: underline; } /* ---- header ---- App-style bar: hamburger (left) · logo + shop name (centred) · cart (right), with a full-width pill search on its own row below. The nav lives in a slide-out drawer on every breakpoint, opened by the hamburger. */ .header { /* solid secondary fill (no gradient) */ background-color: var(--secondary); color: var(--on-secondary); display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "menu logo cart" "search search search"; align-items: center; column-gap: .75rem; row-gap: .8rem; padding: .9rem 1rem; /* sticky shrink-on-scroll: pins to the top once scrolled past (#header-sentinel). The header creates its own stacking context, and the nav drawer (1001) + backdrop (1000) live INSIDE it (see header.php), so their z-indexes only order within this context. To let the open drawer cover the root-level sticky add-to-cart bar (z-index 999), the header context itself must sit above it — hence 1000, not the old 80 (which let the cart bar paint over the whole header, drawer included). */ position: sticky; top: 0; z-index: 1000; transition: padding .2s ease, box-shadow .2s ease; } /* hamburger (left) — visible on every breakpoint, all-icon header */ .nav-toggle { grid-area: menu; justify-self: start; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; color: var(--on-secondary); /* auto-contrast on the secondary bg */ font-size: 1.4rem; cursor: pointer; padding: .25rem .45rem; } /* logo + shop name, centred together */ .logo { grid-area: logo; justify-self: center; display: inline-flex; align-items: center; gap: .6rem; color: var(--on-secondary); min-width: 0; text-align: left; } .logo-img { /* free-form logo: natural aspect ratio, no circle crop — wide logos work */ height: 54px; width: auto; max-width: 210px; border-radius: 6px; object-fit: contain; flex: none; transition: height .2s ease, width .2s ease; } .logo-text { font-size: 1.4rem; font-weight: 800; letter-spacing: .02em; } .header .logo-text { font-size: 1.05rem; line-height: 1.15; letter-spacing: .01em; transition: font-size .2s ease; } /* nav drawer (all breakpoints). visibility:hidden keeps the off-canvas drawer from ever painting unless .open is set — prevents the brief flash seen when the sticky header re-layouts on scroll. visibility flips instantly on open, and is delayed until the slide-out finishes on close so the closing animation stays visible. */ .nav { /* z-index above the sticky mobile add-to-cart bar (999) so the open drawer covers it instead of the cart bar floating over the drawer */ position: fixed; top: 0; left: 0; bottom: 0; z-index: 1001; width: min(300px, 85vw); display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 3.6rem 1.5rem 1.5rem; background: var(--secondary); color: var(--on-secondary); transform: translateX(-105%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; box-shadow: 4px 0 24px rgba(0,0,0,.35); overflow-y: auto; } .nav.open { transform: translateX(0); visibility: visible; transition: transform .25s ease, visibility 0s; } .nav a { display: block; width: 100%; padding: .8rem 0; font-size: 1rem; font-weight: 600; /* neutral divider stays visible on both light and dark drawer backgrounds */ border-bottom: 1px solid rgba(128,128,128,.28); /* auto-contrast text: dark on a light/white secondary, white on a dark one, so the drawer is legible whatever the shop's palette resolves to */ color: var(--on-secondary); opacity: 1; } /* hover keeps the link's own colour (palette-safe) and underlines instead */ .nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; } /* current top category reads as selected via a persistent underline (matches hover) */ .nav a.active { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; } /* sub-categories sit indented beneath their parent in the mobile drawer: lighter, smaller, no own border so each parent + its subs read as one group */ .nav a.nav-sub { padding: .55rem 0 .55rem 1.4rem; font-size: .9rem; font-weight: 500; color: var(--on-secondary); color: color-mix(in srgb, var(--on-secondary) 78%, transparent); border-bottom: 1px solid rgba(128,128,128,.16); } .nav a.nav-sub:hover { color: var(--on-secondary); } .nav-close { display: block; position: absolute; top: .6rem; right: .9rem; background: none; border: none; color: var(--on-secondary); font-size: 1.8rem; cursor: pointer; line-height: 1; } /* grouped account/help links inside the drawer. Muted auto-contrast: a softened tint of --on-secondary so secondary links read on either a light or dark drawer, one step down from the main links. */ .nav-extra { display: block; width: 100%; margin-top: .5rem; } .nav-extra a { text-transform: none; letter-spacing: 0; font-size: .85rem; font-weight: 500; padding: .55rem 0; border-bottom: none; color: var(--on-secondary); color: color-mix(in srgb, var(--on-secondary) 75%, transparent); opacity: 1; } .nav-extra a:hover { color: var(--on-secondary); } .nav-extra a i { width: 1.1rem; margin-right: .55rem; text-align: center; opacity: .85; } .nav-heading { display: block; width: 100%; margin-top: 1.1rem; padding-bottom: .25rem; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; /* section headings stay muted, adapting to the drawer background */ color: var(--on-secondary); color: color-mix(in srgb, var(--on-secondary) 55%, transparent); opacity: 1; } /* full-width pill search on its own row, icon on the left */ .header-search { grid-area: search; display: flex; align-items: center; gap: .35rem; background: #f1f1f4; border-radius: 999px; padding: 0 .6rem 0 .9rem; max-width: 100%; /* never spill past its grid cell / the viewport */ } .header-search button { border: none; background: none; cursor: pointer; /* dark glyph: the pill is a fixed light surface, so --on-secondary would vanish here */ color: #5b6470; font-size: 1rem; padding: .55rem .15rem; display: inline-flex; } .header-search input { /* width:0 + flex-grow: the field grows to fill the pill, but its default intrinsic size (the ~20-char search box) no longer feeds the parent's max-content and pushes the header past the viewport on mobile. */ flex: 1; min-width: 0; width: 0; border: none; background: none; padding: .7rem .25rem; font-size: .95rem; color: #1a1a1a; font-family: inherit; } .header-search input::placeholder { color: #8a909b; } .header-search input:focus { outline: none; } .header-search:focus-within { box-shadow: 0 0 0 2px var(--primary); } /* cart: clean outline-style icon (right) with a small gold count badge */ .header-cart { grid-area: cart; justify-self: end; display: inline-flex; align-items: center; color: var(--on-secondary); /* auto-contrast on the secondary bg */ padding: .25rem .35rem; } .header-cart-icon { position: relative; display: inline-flex; font-size: 1.5rem; line-height: 1; } .header-cart-count { position: absolute; top: -7px; right: -9px; background: #f4c542; color: #1a1a1a; /* gold badge, dark text */ min-width: 17px; height: 17px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: .66rem; font-weight: 800; padding: 0 4px; line-height: 1; border: 2px solid var(--secondary); box-sizing: content-box; } /* backdrop behind the open drawer */ .nav-backdrop { display: none; position: fixed; inset: 0; /* sits below the drawer (1001) but above the sticky cart bar (999) */ background: rgba(0,0,0,.5); z-index: 1000; } .nav-backdrop.show { display: block; } /* slim sticky header once scrolled past #header-sentinel (toggled by JS). The sticky box reserves its full-size space up-page, so shrinking = no jump. */ .header.shrink { padding-top: .5rem; padding-bottom: .5rem; box-shadow: 0 2px 14px rgba(0,0,0,.28); } .header.shrink .logo-img { height: 32px; width: auto; } .header.shrink .logo-text { font-size: .95rem; } .header.shrink .header-search { display: none; } /* ---- desktop header (≥861px): big header, logo left, centred inline links, pill search + cart on the right. The drawer/hamburger pattern above stays for mobile only. ---- */ @media (min-width: 861px) { .header { grid-template-columns: auto 1fr minmax(220px, 300px) auto; grid-template-areas: "logo nav search cart"; row-gap: 0; padding: 1rem 1.5rem; } .nav-toggle, .nav-close, .nav-heading, .nav-extra { display: none; } /* sub-category links are a mobile-drawer feature only; the inline desktop nav has no room for them and the Shop page shows them as quick-filter chips */ .nav a.nav-sub { display: none; } /* desktop nav drops the "Shop " prefix (e.g. "Shop Apparel" → "Apparel"); the word stays in the mobile drawer where it reads as an action. "Shop All" has no span, so it keeps its full label. */ .nav a .nav-shop-word { display: none; } .logo { justify-self: start; } .logo-img { height: 60px; max-width: 260px; } .header .logo-text { font-size: 1.25rem; } /* drawer becomes a centred inline link row */ .nav { grid-area: nav; position: static; width: auto; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2.25rem; padding: 0; background: none; box-shadow: none; overflow: visible; transform: none; visibility: visible; transition: none; } .nav a { display: inline-block; width: auto; padding: 0; border-bottom: none; font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--on-secondary); opacity: .9; white-space: nowrap; } .nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; } } /* mid-width desktops: drop the shop name beside the logo first (it repeats throughout the page) and tighten link spacing, so the nav stays one row */ @media (min-width: 861px) and (max-width: 1300px) { .header .logo-text { display: none; } .nav { gap: 1.4rem; } .header-search { grid-area: search; } /* keep the search available in the slim scrolled header on desktop */ .header.shrink .header-search { display: flex; } } /* mobile: drop the shop-name text beside the logo so the logo image can stand on its own, larger and uncluttered */ @media (max-width: 860px) { .header .logo-text { display: none; } .logo-img { height: 62px; max-width: 220px; } .header.shrink .logo-img { height: 40px; } } /* ---- hero ---- */ .hero { background: var(--secondary) center / cover no-repeat; color: #fff; min-height: 420px; display: flex; align-items: center; } .hero-content { padding: 3rem 1.5rem; max-width: 560px; margin-left: 3vw; } .hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 900; text-transform: uppercase; margin: 0 0 1rem; text-shadow: 0 2px 12px rgba(0,0,0,.55); } .hero p { font-size: 1.1rem; margin: 0 0 1.5rem; text-shadow: 0 1px 8px rgba(0,0,0,.55); } .hero-buttons { display: flex; gap: 1rem; flex-wrap: wrap; } /* Banner-image hero: full-width natural height, capped + cover when wide */ .hero-banner { display: block; min-height: 0; position: relative; } .hero-img { display: block; width: 100%; height: auto; } @media (min-width: 1600px) { .hero-img { height: 480px; object-fit: cover; object-position: center; } } .hero-overlay { position: absolute; left: 4vw; bottom: 9%; } @media (max-width: 560px) { .hero-overlay .btn-lg { padding: .6rem 1.3rem; font-size: .85rem; } } /* ---- buttons ---- */ .btn { display: inline-block; padding: .65rem 1.4rem; border: 2px solid transparent; border-radius: 4px; font-weight: 700; font-size: .9rem; text-transform: uppercase; letter-spacing: .03em; cursor: pointer; text-align: center; } .btn-primary { background: var(--primary); color: var(--on-primary); } .btn-primary:hover { filter: brightness(.92); } .btn-outline { border-color: #fff; color: #fff; background: transparent; } .btn-outline:hover { background: rgba(255,255,255,.12); } .page .btn-outline, .cart-actions .btn-outline { border-color: var(--secondary); color: var(--secondary); } .page .btn-outline:hover { background: rgba(0,0,0,.05); } .btn-lg { padding: .85rem 2rem; font-size: 1rem; } .btn-block { display: block; width: 100%; } /* ---- categories ---- */ .categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; padding: 1.5rem; } .category-card { background: #f4f4f4; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; transition: transform .15s; } .category-card:hover { transform: translateY(-3px); } .category-card img { height: 140px; width: 100%; object-fit: cover; } .category-card-body { padding: .9rem 1rem; } .category-card h3 { margin: 0 0 .3rem; font-size: 1rem; text-transform: uppercase; } .shop-now { font-size: .8rem; font-weight: 700; } /* ---- products ---- */ /* width: 100% is required — these are direct flex items of the column-flex body, and auto cross-axis margins otherwise suppress stretch, shrinking the box to its content width (e.g. a 1-product search collapsing to the search bar). An explicit width makes it a definite 1280px so the auto margins simply centre it. */ .page, .featured, .bundles-strip { width: 100%; box-sizing: border-box; padding: 1.5rem; max-width: 1280px; margin: 0 auto; } /* when the strip is nested inside an already-centered .page (products listing), don't double up the padding/width — inherit the page container instead */ .page .bundles-strip { padding: 0; max-width: none; margin: 0 0 1.5rem; } .section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; } .section-head h1, .section-head h2 { text-transform: uppercase; margin: 0; } .section-head a { font-weight: 700; font-size: .9rem; color: var(--primary); white-space: nowrap; } .section-head a:hover { text-decoration: underline; } .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.25rem; } .product-card { border: 1px solid #e4e4e4; border-radius: 6px; padding: 1rem; display: flex; flex-direction: column; gap: .5rem; background: #fff; } .product-card img { height: 180px; width: 100%; object-fit: contain; } .product-card h3 { font-size: .95rem; margin: 0; font-weight: 600; } .sku { opacity: .55; font-weight: 400; font-size: .85em; } .price { font-weight: 800; font-size: 1.05rem; } .price-lg { font-size: 1.6rem; margin: .5rem 0; } /* large persistent search bar on the products listing */ .shop-search { display: flex; align-items: center; gap: .6rem; background: #fff; border: 2px solid #e2e2e2; border-radius: 12px; padding: .35rem .5rem .35rem 1rem; margin: 0 0 1.5rem; /* Hard-contain the input + SEARCH button so the bar can never push the page wider than the viewport on mobile: cap to the container width and clip any residual sub-pixel spill. The :focus-within state only changes border colour (inset), so overflow:hidden won't swallow a focus ring here. */ max-width: 100%; width: 100%; box-sizing: border-box; overflow: hidden; } .shop-search:focus-within { border-color: var(--secondary); } .shop-search > i { font-size: 1.05rem; opacity: .5; flex-shrink: 0; } .shop-search input[type="search"] { /* width:0 + flex-grow: the field still fills the bar, but its default intrinsic (~20-char) width no longer inflates the page's max-content and force horizontal overflow/scroll on mobile. */ flex: 1; min-width: 0; width: 0; border: none; outline: none; background: transparent; font-size: 1.05rem; padding: .55rem .25rem; color: var(--text); } .shop-search .btn { flex-shrink: 0; padding: .65rem 1.5rem; } @media (max-width: 520px) { .shop-search .btn { padding: .65rem 1rem; } } /* apparel quick-filter chips */ .quick-cats { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; } .quick-cat { display: inline-block; padding: .4rem .9rem; border-radius: 999px; border: 1px solid #d8d8d8; background: #fff; color: var(--text); font-size: .85rem; font-weight: 600; white-space: nowrap; } .quick-cat:hover { border-color: var(--secondary); } .quick-cat.active { background: var(--secondary); color: var(--on-secondary); border-color: var(--secondary); } /* size measurements + size chart */ .size-chart-toggle { background: none; border: none; padding: 0; margin: .6rem 0 0; cursor: pointer; color: var(--secondary); font-weight: 600; font-size: .9rem; } .size-chart-toggle:hover { text-decoration: underline; } .size-chart-toggle i { margin-right: .35rem; } .size-measure { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .6rem; background: #f7f7f7; border: 1px solid #ececec; border-radius: 8px; padding: .85rem 1.25rem; font-size: 1.05rem; } .size-measure:empty { display: none; } .size-measure span { flex: 1 1 0; min-width: 80px; text-align: center; } .size-measure span + span { border-left: 1px solid #e2e2e2; } .size-measure b { display: block; font-weight: 700; text-transform: uppercase; font-size: .68rem; opacity: .55; } .size-chart-table { margin-top: .8rem; } .size-chart-scroll { overflow-x: auto; } /* Flex/div size grid (no ): each row is a flex row, cells share width fluidly (flex:1) and shrink with the viewport down to a min, after which the .size-chart-scroll wrapper scrolls horizontally. */ .size-flex { border: 1px solid #e4e4e4; border-radius: 10px; overflow: hidden; font-size: .9rem; min-width: max-content; } .sf-row { display: flex; } .sf-row + .sf-row { border-top: 1px solid #ececec; } .sf-cell { flex: 1 1 0; min-width: 2.9rem; padding: .55rem .5rem; display: flex; align-items: center; justify-content: center; text-align: center; } .sf-cell + .sf-cell { border-left: 1px solid #f0f0f0; } .sf-label { flex: 0 0 6.5rem; justify-content: flex-start; text-align: left; font-weight: 700; background: #fafafa; } .sf-head { background: #f3f3f3; font-weight: 700; } .sf-head .sf-label { background: #f3f3f3; } /* Two orientations of the same data: pivot (sizes across the top) on desktop, stacked (sizes down the left) on mobile. Only one is shown at a time. */ .size-flex.is-stacked { display: none; } @media (max-width: 600px) { .size-flex.is-pivot { display: none; } .size-flex.is-stacked { display: block; } .size-flex { font-size: .85rem; } .sf-label { flex-basis: 4.5rem; } .sf-cell { min-width: 2.6rem; padding: .5rem .4rem; } } .size-chart-block { margin: 1.75rem 0; } .size-chart-block h2 { font-size: 1.05rem; margin: 0 0 .2rem; } .size-chart-items { font-size: .82rem; margin: 0 0 .6rem; line-height: 1.4; } /* swatches + price + button stick together at the bottom of every card */ .card-foot { margin-top: auto; display: flex; flex-direction: column; gap: .5rem; } /* product-card colour swatches */ .card-swatches { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .card-swatch { width: 20px; height: 20px; border-radius: 50%; padding: 0; cursor: pointer; border: 1px solid rgba(0, 0, 0, .2); background-clip: padding-box; transition: transform .1s ease; } .card-swatch:hover { transform: scale(1.15); } .card-swatch.active { outline: 2px solid var(--secondary); outline-offset: 1px; } .card-swatch-more { font-size: .78rem; font-weight: 700; opacity: .6; margin-left: 2px; } /* ---- pagination ---- */ .pagination { display: flex; gap: .4rem; justify-content: center; margin: 2rem 0; flex-wrap: wrap; } .pagination a, .page-current { padding: .45rem .8rem; border: 1px solid #ddd; border-radius: 4px; font-weight: 600; } .page-current { background: var(--secondary); color: var(--on-secondary); border-color: var(--secondary); } /* ---- product detail ---- */ .product-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; } @media (max-width: 760px) { .product-detail-grid { grid-template-columns: 1fr; } } .product-detail-image { border: 1px solid #e4e4e4; border-radius: 6px; padding: 1rem; background: #fff; align-self: start; } .option-group { margin: 1.1rem 0; } .option-group > label { display: block; font-weight: 700; font-size: .85rem; text-transform: uppercase; margin-bottom: .45rem; } .swatches, .sizes { display: flex; gap: .5rem; flex-wrap: wrap; } .swatch input, .size-pill input { display: none; } .swatch span { display: block; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #ccc; cursor: pointer; } .swatch input:checked + span { border-color: var(--secondary); outline: 2px solid var(--secondary); outline-offset: 1px; } .size-pill span { display: block; padding: .4rem .8rem; border: 1px solid #ccc; border-radius: 4px; font-size: .85rem; font-weight: 600; cursor: pointer; } .size-pill input:checked + span { background: var(--secondary); color: var(--on-secondary); border-color: var(--secondary); } /* Out of stock for the selected colour: greyed, struck through, not selectable. */ .size-pill.out-of-stock span { color: #b0b0b0; border-color: #e4e4e4; background: #f6f6f6; cursor: not-allowed; text-decoration: line-through; opacity: .8; } .qty-input { width: 75px; padding: .45rem; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; } /* ---- cart ---- */ .cart-table { width: 100%; border-collapse: collapse; margin: 1rem 0; } .cart-table th { text-align: left; font-size: .78rem; text-transform: uppercase; border-bottom: 2px solid var(--secondary); padding: .55rem .5rem; } .cart-table td { padding: .7rem .5rem; border-bottom: 1px solid #e7e7e7; vertical-align: middle; } .cart-product { display: flex; align-items: center; gap: .75rem; font-weight: 600; } .cart-product img { width: 54px; height: 54px; object-fit: contain; border: 1px solid #eee; border-radius: 4px; } .link-danger { background: none; border: none; color: #c0392b; font-size: 1.3rem; cursor: pointer; line-height: 1; } .cart-actions { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; } .cart-summary { text-align: right; } .cart-subtotal { font-size: 1.1rem; margin-bottom: .7rem; } /* ---- checkout ---- */ .checkout-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.5rem; align-items: start; } @media (max-width: 820px) { .checkout-grid { grid-template-columns: 1fr; } } .checkout-form h2 { font-size: 1.05rem; text-transform: uppercase; margin: 1.4rem 0 .6rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form-field { margin-bottom: .9rem; } .form-field label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .3rem; } .form-field input { width: 100%; padding: .55rem .7rem; border: 1px solid #ccc; border-radius: 4px; font-size: .95rem; } .form-field.has-error input { border-color: #c0392b; } .error { color: #c0392b; font-weight: 400; } .order-summary { border: 1px solid #e4e4e4; border-radius: 6px; padding: 1.25rem; background: #fafafa; } .order-summary h2 { margin-top: 0; font-size: 1.05rem; text-transform: uppercase; } .summary-line { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid #eee; font-size: .92rem; } .summary-line small { display: block; } .summary-total { display: flex; justify-content: space-between; font-weight: 800; font-size: 1.15rem; padding-top: .8rem; } /* ---- product page v2 ---- */ .product-title-block { margin-bottom: 1.5rem; } .product-eyebrow { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--secondary); opacity: .8; margin-bottom: .35rem; } .product-title { margin: 0; font-size: clamp(1.5rem, 3.5vw, 2.3rem); font-weight: 800; } .gallery { display: flex; gap: 1rem; align-items: flex-start; } .gallery-main { flex: 1; border: 1px solid #e4e4e4; border-radius: 8px; padding: 1rem; background: #fff; } .gallery-main img { width: 100%; object-fit: contain; } .gallery-thumbs { display: flex; flex-direction: column; gap: .6rem; width: 72px; flex-shrink: 0; } .gallery-thumbs button { border: 1px solid #ddd; border-radius: 6px; background: #fff; padding: 4px; cursor: pointer; } .gallery-thumbs button.active { border-color: var(--secondary); outline: 2px solid var(--secondary); } .gallery-thumbs img { width: 100%; height: 56px; object-fit: contain; } .gallery-view[hidden] { display: none; } .gallery-thumb { position: relative; display: block; } /* Additional product photos (not colour-swappable mockups). */ .gallery-photo { display: block; } .gallery-photo img { width: 100%; display: block; } .gallery-thumb-label { display: block; text-align: center; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-top: 3px; color: var(--text); } /* On mobile, stack the main image on top and lay the FRONT/BACK thumbnails in a horizontal row across the bottom instead of a left-hand column. */ @media (max-width: 760px) { .gallery { flex-direction: column-reverse; } .gallery-thumbs { flex-direction: row; flex-wrap: wrap; justify-content: center; width: 100%; gap: .8rem; } .gallery-thumbs button { width: 72px; flex: 0 0 auto; } } .option-label-value { font-weight: 400; text-transform: none; } /* crisp square-ish swatches */ .swatches .swatch span { width: 40px; height: 34px; border: 1px solid rgba(0,0,0,.25); border-radius: 6px; } .swatch input:checked + span { border-color: #fff; outline: 2px solid var(--secondary); outline-offset: 0; } .size-pill span { border-radius: 8px; padding: .55rem 1.1rem; } .qty-stepper { display: inline-flex; align-items: stretch; border: 1px solid #ccc; border-radius: 8px; overflow: hidden; background: #fff; } .qty-stepper button { width: 44px; border: none; background: #fff; font-size: 1.25rem; cursor: pointer; line-height: 1; } .qty-stepper button:hover { background: #f2f2f2; } .qty-stepper input { width: 56px; border: none; border-left: 1px solid #eee; border-right: 1px solid #eee; text-align: center; font-size: 1rem; padding: .55rem 0; -moz-appearance: textfield; appearance: textfield; } .qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .purchase-actions { display: flex; flex-direction: column; gap: .7rem; margin-top: 1.5rem; max-width: 480px; } .btn-dark { background: var(--secondary); color: var(--on-secondary); border-radius: 10px; } .btn-dark:hover { filter: brightness(1.15); } .product-description { margin-top: 2.5rem; max-width: 70ch; } .product-description h2 { font-size: 1.15rem; margin: 0 0 .5rem; } .product-description p { margin: 0; line-height: 1.6; color: #333; } /* style-level product details: free-form HTML from the main site. Collapsible accordion on mobile; always expanded on desktop. */ .style-details-toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; margin: 0; padding: 0; background: none; border: 0; cursor: default; font: inherit; color: inherit; text-align: left; } .style-details-toggle h2 { margin: 0; } .style-details-chevron { display: none; } .product-style-details .style-details-body { margin-top: .5rem; line-height: 1.6; color: #333; } .product-style-details .style-details-body > :first-child { margin-top: 0; } .product-style-details .style-details-body > :last-child { margin-bottom: 0; } .product-style-details .style-details-body p { margin: 0 0 .75rem; } .product-style-details .style-details-body ul, .product-style-details .style-details-body ol { margin: 0 0 .75rem; padding-left: 1.25rem; } .product-style-details .style-details-body li { margin: .2rem 0; } @media (max-width: 768px) { .style-details-toggle { cursor: pointer; } .style-details-chevron { display: inline-block; flex: none; color: #666; transition: transform .2s ease; } .product-style-details .style-details-body { display: none; } .product-style-details.is-open .style-details-body { display: block; } .product-style-details.is-open .style-details-chevron { transform: rotate(180deg); } } /* product trust bar (print method · ships-in · est. delivery) + share */ .product-trust { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: 2.25rem; } .trust-bar { display: flex; flex-wrap: wrap; flex: 1; min-width: 280px; background: #fff; border: 1px solid #e8e8e8; border-radius: 12px; } .trust-item { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.5rem; flex: 1; min-width: 200px; } .trust-item + .trust-item { border-left: 1px solid #eee; } .trust-item > i { font-size: 1.5rem; color: var(--secondary); flex-shrink: 0; } .trust-item strong { display: block; font-size: .95rem; } .trust-item span { display: block; font-size: .82rem; opacity: .6; } .trust-deliv { color: #2e7d32; opacity: 1; font-weight: 700; } .product-share { display: flex; align-items: center; gap: .55rem; } .share-label { font-weight: 700; opacity: .55; font-size: .9rem; } .share-btn { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #ddd; background: #fff; color: var(--text); cursor: pointer; text-decoration: none; font-size: 1rem; transition: background .12s, border-color .12s, color .12s; } .share-btn:hover { border-color: var(--secondary); } .share-btn.copied { background: #2e7d32; border-color: #2e7d32; color: #fff; } @media (max-width: 760px) { .trust-bar { flex-direction: column; } .trust-item + .trust-item { border-left: none; border-top: 1px solid #eee; } } /* ---- sticky mobile add-to-cart bar ---- */ /* Hidden on desktop; on mobile it slides up from the bottom once the in-page Add to cart scrolls out of view (.visible toggled by JS). */ .sticky-cart { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; align-items: center; gap: 1rem; padding: .65rem 1rem; padding-bottom: calc(.65rem + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #e4e4e4; box-shadow: 0 -4px 16px rgba(0,0,0,.12); transform: translateY(110%); transition: transform .25s ease; } .sticky-cart-price { display: flex; flex-direction: column; line-height: 1.15; } .sticky-cart-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; opacity: .6; } #sticky-cart-total { font-size: 1.1rem; font-weight: 700; } .sticky-cart-btn { flex: 1; margin: 0; } @media (max-width: 768px) { .sticky-cart { display: flex; } .sticky-cart.visible { transform: translateY(0); } /* Compact colour swatches on mobile — same tap target intent, far less vertical space than the 40×34 desktop squares. Desktop is untouched. */ .swatches { gap: .4rem; } .swatches .swatch span { width: 32px; height: 28px; } } /* ---- confirmation ---- */ .confirmation-v2 { max-width: 900px; min-width: min(820px, 100%); } .confirm-head { text-align: center; margin: 1rem 0 2rem; } .confirm-head h1 { margin: 0 0 .6rem; } .confirm-head p { margin: .2rem 0; } .confirm-check { width: 64px; height: 64px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 1.7rem; margin-bottom: 1rem; box-shadow: 0 6px 18px rgba(0,0,0,.12); } /* Order-status tracker: three-step path with a connecting line */ .order-track { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; justify-content: space-between; position: relative; max-width: 640px; margin-left: auto; margin-right: auto; } .order-track-step { flex: 1 1 0; text-align: center; position: relative; display: flex; flex-direction: column; align-items: center; gap: .5rem; } /* connector line runs from the centre of one dot to the next */ .order-track-step::before { content: ""; position: absolute; top: 17px; left: -50%; width: 100%; height: 3px; background: #e0e0e0; z-index: 0; } .order-track-step:first-child::before { display: none; } .order-track-dot { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; font-weight: 700; background: #fff; color: #9a9a9a; border: 3px solid #e0e0e0; } .order-track-label { font-size: .82rem; line-height: 1.25; color: #777; max-width: 9rem; } /* completed steps: filled primary, connector into them is primary too */ .order-track-step.is-done .order-track-dot, .order-track-step.is-current .order-track-dot { background: var(--primary); color: var(--on-primary); border-color: var(--primary); } .order-track-step.is-done::before, .order-track-step.is-current::before { background: var(--primary); } .order-track-step.is-current .order-track-dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent); } .order-track-step.is-done .order-track-label, .order-track-step.is-current .order-track-label { color: #333; font-weight: 600; } .order-status-banner { max-width: 640px; margin: 0 auto 2rem; padding: .9rem 1.1rem; border-radius: 10px; text-align: center; font-size: .95rem; border: 1px solid #e4c200; background: #fff8dc; } .order-status-banner.order-status-cancelled { border-color: #e0b4b4; background: #fdecec; } .order-tracking { text-align: center; margin: -1rem auto 2rem; font-size: .95rem; color: #444; } .order-tracking a { color: var(--secondary); } @media (max-width: 520px) { .order-track-label { font-size: .72rem; } .order-track-dot { width: 32px; height: 32px; } .order-track-step::before { top: 15px; } } .confirm-card { background: #fafafa; border: 1px solid #e4e4e4; border-radius: 12px; padding: 1.5rem 1.75rem; } .confirm-card .aside-line { border-bottom: 1px solid #ececec; } .confirm-card .aside-line:last-of-type { border-bottom: none; } .confirm-actions { text-align: center; margin-top: 2rem; } .confirm-check-muted { background: #ececec; color: #555; } .order-lookup { display: flex; gap: .7rem; justify-content: center; max-width: 620px; margin: 0 auto; flex-wrap: wrap; } .order-lookup input { flex: 1; min-width: 200px; padding: .8rem 1rem; font-size: .95rem; border: 1px solid #ccc; border-radius: 6px; } .order-lookup input:focus { outline: 2px solid var(--secondary); outline-offset: -1px; } /* ---- product mockups (garment + design overlay) ---- */ .mockup { position: relative; width: 100%; } .mockup > img { width: 100%; height: auto; display: block; } /* Designs that aren't the full 2200x3000 print ratio anchor to the TOP of the canvas box (not vertically centred). */ .mockup-overlay { position: absolute; object-fit: contain; object-position: center top; } /* Jersey number drawn in the place-it box (live preview + cart/order render). font-size is fit to the box height by fitJerseyNumbers() in footer.php. */ .mockup-number { /* Centred in the box by default (front + sleeves). The back is the exception: its number sits high up, just under the collar (see override below). */ position: absolute; display: flex; align-items: center; justify-content: center; overflow: hidden; line-height: 1; pointer-events: none; color: var(--jersey-color, #15233b); } .mockup-number[data-surface="back"] { align-items: flex-start; } .mockup-number span { display: block; white-space: nowrap; } /* Jersey fonts. Add more @font-face + .jersey-font-{name} pairs as new fonts are dropped in /fonts/ (the name matches Shops_Products.jersey_font). */ @font-face { font-family: 'JerseyBasketball'; src: url('/fonts/Basketball.otf') format('opentype'); font-display: swap; } .jersey-font-basketball { font-family: 'JerseyBasketball', 'Arial Narrow', Impact, sans-serif; font-weight: 800; } @font-face { font-family: 'JerseyUniversNextProHeavy'; src: url('/fonts/UniversNextProHeavy.ttf') format('truetype'); font-display: swap; } .jersey-font-universnextproheavy { font-family: 'JerseyUniversNextProHeavy', 'Arial Narrow', Impact, sans-serif; font-weight: 800; } /* Jersey number entry on the product page — a titled group of per-position number fields, so it's clear each input maps to a print location. */ .jersey-fields { border: 1px solid #e3e3e3; border-radius: 12px; padding: .55rem 1rem 1rem; margin: 1rem 0 0; background: #fcfcfc; } .jersey-legend { font-weight: 700; font-size: .92rem; padding: 0 .45rem; display: inline-flex; align-items: center; gap: .45rem; } .jersey-legend i { color: var(--primary); } .jersey-optional { font-weight: 500; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: #b9b9b9; border-radius: 999px; padding: .1rem .5rem; } .jersey-required { font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: #c0392b; border-radius: 999px; padding: .1rem .5rem; } .req-star { color: #c0392b; } .jersey-warning { margin: .8rem 0 0; font-size: .82rem; color: #c0392b; font-weight: 600; display: flex; align-items: center; gap: .4rem; } /* keep the warning hidden until JS reveals it (the display:flex above would otherwise override the `hidden` attribute) */ .jersey-warning[hidden] { display: none; } /* a required field left empty on add-to-cart: 2px red border + light red fill */ .jersey-field-box.is-missing { border: 2px solid #c0392b; background: #fdecec; } .form-flash { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; border-radius: 9px; margin: 0 0 1rem; font-size: .9rem; } .form-flash-error { background: #fdecec; border: 1px solid #e0b4b4; color: #a5281b; } .jersey-hint { margin: 0 0 .8rem; font-size: .82rem; color: #777; } .jersey-grid { display: flex; flex-wrap: wrap; gap: .7rem; } .jersey-field { flex: 1 1 8rem; min-width: 7rem; display: flex; flex-direction: column; gap: .3rem; cursor: text; } .jersey-field-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #555; /* Reserve two lines so short ("Front") and long ("Right Sleeve") labels occupy the same height and every input box below stays aligned. */ line-height: 1.1; min-height: 2.2em; } .jersey-fee { color: #888; font-weight: 600; text-transform: none; letter-spacing: 0; } .jersey-field-box { display: flex; align-items: center; gap: .1rem; border: 1.5px solid #d6d6d6; border-radius: 9px; padding: 0 .65rem; background: #fff; transition: border-color .15s, box-shadow .15s; } .jersey-field-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); } .jersey-hash { color: #b3b3b3; font-weight: 700; font-size: 1.05rem; } .jersey-input, .sleeve-text-input { flex: 1; width: 100%; border: 0; outline: 0; background: transparent; padding: .55rem .15rem; font-size: 1.15rem; font-weight: 700; letter-spacing: .05em; text-align: left; color: #1a1a1a; } /* sleeve text is free text, not a big 3-char number — ease the size/spacing */ .sleeve-text-input { font-size: 1rem; letter-spacing: .01em; } /* Nameplate name input — a single full-width text field in the same card. */ .nameplate-field { display: block; } .nameplate-input { width: 100%; box-sizing: border-box; border: 1px solid #d5d5d8; border-radius: 8px; background: #fff; padding: .6rem .75rem; font-size: 1rem; font-weight: 600; letter-spacing: .02em; color: #1a1a1a; outline: 0; } .nameplate-input:focus { border-color: #1a1a1a; } /* Card images: garment mockups are square PNGs. Frame the uploaded photo in a matching square box (contain, letterboxed if it isn't square) so a photo-led card is the same size as a mockup-led card in the grid. */ .product-card .mockup > img { height: auto; width: 100%; object-fit: contain; } .product-card .gallery-photo { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; overflow: hidden; } .product-card .gallery-photo > img { width: 100%; height: 100%; object-fit: contain; } /* Photo-led card toggles between the photo and the front mockup on colour pick. Explicit [hidden] rules because the display:flex above would otherwise beat the hidden attribute. */ .product-card .gallery-photo[hidden] { display: none; } .card-mockup-lead { display: block; } .card-mockup-lead[hidden] { display: none; } /* mockup debug (?debug=1) */ .mockup-debug-box { position: absolute; pointer-events: none; border: 2px dashed #ff00ff; background: rgba(255,0,255,.08); } .mockup-debug { font-size: .75rem; margin: .75rem 0 0; text-align: left; width: 100%; } .mockup-debug summary { cursor: pointer; font-weight: 700; color: #c026d3; } .mockup-debug pre { background: #16161a; color: #7fff7f; padding: .6rem; border-radius: 6px; overflow: auto; max-height: 420px; font-size: .72rem; white-space: pre-wrap; word-break: break-word; /* wrap long URLs instead of scrolling */ } .mockup-debug-note { font-size: .75rem; color: #c026d3; } /* ---- cart (Shopify-style) ---- */ .cart-page { max-width: 1100px; min-width: min(1000px, 100%); } .cart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } .cart-head h1 { margin-bottom: .5rem; } .cart-continue { font-size: .9rem; font-weight: 600; text-decoration: underline; } .cart-columns { display: grid; grid-template-columns: 1fr 220px 110px; gap: 1rem; padding: .9rem 0 .5rem; border-bottom: 1px solid #e4e4e4; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; opacity: .6; } .cart-col-total { text-align: right; } .cart-line { display: grid; grid-template-columns: 1fr 220px 110px; gap: 1rem; align-items: center; padding: 1.25rem 0; border-bottom: 1px solid #ececec; } .cart-line-product { display: flex; gap: 1rem; align-items: center; } .cart-line-image { width: 90px; flex-shrink: 0; } .cart-line-image .mockup { border: 1px solid #eee; border-radius: 8px; background: #fff; overflow: hidden; } .cart-line-name { font-weight: 700; } .cart-line-name:hover { text-decoration: underline; } .cart-line-variant, .cart-line-unit { font-size: .88rem; } .cart-line-variant { display: flex; gap: .4rem; margin: .25rem 0; flex-wrap: wrap; align-items: center; } .cart-edit-toggle { background: none; border: none; padding: 0; color: var(--secondary); font-size: .82rem; font-weight: 700; text-decoration: underline; cursor: pointer; } .cart-line-editor { display: flex; gap: .6rem; margin: .4rem 0; flex-wrap: wrap; } .cart-line-editor[hidden] { display: none; } /* styled dropdowns */ .dd { position: relative; } .dd-toggle { display: inline-flex; align-items: center; justify-content: space-between; gap: .6rem; min-width: 150px; padding: .5rem .8rem; border: 1px solid #ccc; border-radius: 3px; background: #fff; font-size: .88rem; font-weight: 600; cursor: pointer; } .dd-toggle:focus { outline: 2px solid var(--secondary); outline-offset: -1px; } .dd-toggle b { font-weight: 400; opacity: .55; } .dd-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; width: 250px; padding: .6rem; background: #fff; border: 1px solid #e2e2e2; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.16); } .dd-search { width: 100%; padding: .5rem .65rem; margin-bottom: .45rem; border: 1px solid #ddd; border-radius: 6px; font-size: .88rem; } .dd-list { list-style: none; margin: 0; padding: 0; max-height: 250px; overflow: auto; } .dd-list li { padding: .45rem .55rem; border-radius: 4px; cursor: pointer; font-size: .9rem; } .dd-list li:hover { background: #f3f3f3; } .dd-list li.selected { font-weight: 700; } .cart-line-qty { display: flex; align-items: center; gap: .75rem; } .cart-line-qty .qty-stepper input { width: 48px; } .cart-line-remove { background: none; border: none; cursor: pointer; font-size: 1.1rem; opacity: .55; } .cart-line-remove:hover { opacity: 1; } .cart-line-total { text-align: right; font-weight: 700; } .cart-footer { display: flex; justify-content: flex-end; padding-top: 1.5rem; } .cart-totals { width: 100%; max-width: 360px; text-align: right; } .cart-subtotal { display: flex; justify-content: space-between; font-size: 1.15rem; margin-bottom: .35rem; } .cart-totals .btn { margin-top: .9rem; } @media (max-width: 700px) { .cart-columns { display: none; } .cart-line { grid-template-columns: 1fr; } .cart-line-total { text-align: left; } } /* ---- checkout (Shopify-style) ---- */ .checkout-v2 { display: grid; /* minmax(0, fr) kills the implicit min-content sizing, so the column ratio stays FIXED no matter which sections are shown/hidden */ grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); width: 100%; max-width: 1280px; margin: 0 auto; align-items: start; } /* hard minimums so toggling shipping/address sections can never reflow */ .checkout-main { min-width: min(560px, 100%); } .checkout-aside { min-width: min(380px, 100%); } @media (max-width: 880px) { .checkout-main, .checkout-aside { min-width: 0; } } @media (max-width: 880px) { .checkout-v2 { grid-template-columns: 1fr; } } .checkout-main { padding: 2rem 3rem 3rem 1.5rem; } .checkout-crumbs { font-size: .85rem; margin-bottom: 1.25rem; } .checkout-crumbs a { color: var(--secondary); font-weight: 600; } .checkout-crumbs span { opacity: .6; } .checkout-section-title { font-size: 1.05rem; font-weight: 700; margin: 1.75rem 0 .9rem; text-transform: uppercase; letter-spacing: .03em; } .cfield { margin-bottom: .85rem; } .cfield input, .cfield select { width: 100%; padding: .85rem 1rem; border: 1px solid #d4d4d4; border-radius: 6px; font-size: .95rem; background: #fff; } .cfield select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23666' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 10px; padding-right: 2.4rem; } .cfield input:focus, .cfield select:focus { outline: 2px solid var(--secondary); outline-offset: -1px; } .cfield.has-error input, .cfield.has-error select { border-color: #c0392b; } .cfield-error { color: #c0392b; font-size: .82rem; display: block; margin-top: .25rem; } .cfield-row { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; } .cfield-row-3 { grid-template-columns: 1fr 1fr 1fr; } @media (max-width: 560px) { .cfield-row, .cfield-row-3 { grid-template-columns: 1fr; } } .ship-options { border: 1px solid #d4d4d4; border-radius: 6px; overflow: hidden; } .ship-option { display: flex; align-items: center; gap: .9rem; padding: .95rem 1rem; cursor: pointer; border-bottom: 1px solid #e4e4e4; background: #fff; } .ship-option:last-child { border-bottom: none; } .ship-option:has(input:checked) { background: rgba(0,0,0,.03); outline: 2px solid var(--secondary); outline-offset: -2px; } .ship-option input { accent-color: var(--secondary); width: 18px; height: 18px; } .ship-option-body { flex: 1; display: flex; flex-direction: column; } .ship-option-label { font-weight: 600; font-size: .95rem; } .ship-option-address { font-size: .85rem; } .ship-option-price { font-weight: 700; } .payment-page { max-width: 560px; } .payment-box { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1.1rem; } .checkout-main form { width: 100%; } /* the hidden attribute must win over display:flex */ .address-locked[hidden] { display: none; } .address-locked { display: flex; flex-direction: column; gap: .25rem; border: 1px solid #d4d4d4; border-radius: 6px; background: #f5f5f5; padding: .9rem 1rem; font-weight: 600; } .checkout-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.75rem; flex-wrap: wrap; } .checkout-return { font-size: .9rem; font-weight: 600; color: var(--secondary); } .checkout-aside { background: #fafafa; border-left: 1px solid #e4e4e4; padding: 2rem 1.5rem; position: sticky; top: 0; min-height: 100%; } @media (max-width: 880px) { .checkout-aside { border-left: none; border-top: 1px solid #e4e4e4; position: static; } } .aside-line { display: flex; align-items: center; gap: 1rem; padding: .6rem 0; } .aside-thumb { position: relative; width: 64px; flex-shrink: 0; border: 1px solid #ddd; border-radius: 8px; background: #fff; } .aside-qty { position: absolute; top: -8px; right: -8px; background: var(--secondary); color: var(--on-secondary); font-size: .72rem; font-weight: 700; min-width: 20px; height: 20px; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 0 5px; } .aside-info { flex: 1; display: flex; flex-direction: column; } .aside-name { font-weight: 700; font-size: .92rem; } .aside-price { font-weight: 600; font-size: .92rem; } .aside-totals { border-top: 1px solid #e4e4e4; margin-top: 1rem; padding-top: 1rem; } .aside-row { display: flex; justify-content: space-between; padding: .3rem 0; font-size: .95rem; } .aside-row[hidden] { display: none; } .aside-total { font-size: 1.1rem; padding-top: .7rem; } .aside-total strong { font-size: 1.35rem; } #aside-discount-row, .aside-discount { color: #2e7d32; } /* Coupon entry in the order summary */ .coupon-box { border-top: 1px solid #e4e4e4; margin-top: 1rem; padding-top: 1rem; } .coupon-label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .4rem; } .coupon-row { display: flex; gap: .5rem; } .coupon-row input { flex: 1; min-width: 0; padding: .55rem .7rem; border: 1.5px solid #d6d6d6; border-radius: 8px; font-size: .95rem; text-transform: uppercase; } .coupon-row input:focus { outline: 0; border-color: var(--primary); } .coupon-apply { padding: .55rem 1.1rem; white-space: nowrap; } .coupon-error { margin: .5rem 0 0; font-size: .82rem; color: #c0392b; } .coupon-applied { display: flex; align-items: center; justify-content: space-between; gap: .6rem; background: #eef7ee; border: 1px solid #cfe6cf; border-radius: 8px; padding: .55rem .8rem; font-size: .9rem; } .coupon-applied i { color: #2e7d32; margin-right: .15rem; } .coupon-remove { background: none; border: 0; color: #c0392b; font-size: .82rem; cursor: pointer; text-decoration: underline; } /* ---- checkout test-mode coupon debug panel (admin-only, DEBUG only) ---- Deliberately loud (dashed amber) so it can never be mistaken for a customer feature. Gated server-side in partials/checkout_debug_coupons.php. */ .coupon-debug { margin-bottom: 1rem; padding: .75rem .85rem; border: 1.5px dashed #e0a800; border-radius: 8px; background: #fffbea; color: #5b4a00; font-size: .85rem; } .coupon-debug-head { display: flex; align-items: center; gap: .4rem; margin-bottom: .55rem; } .coupon-debug-head i { color: #b8860b; } .coupon-debug-title { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: .78rem; } .coupon-debug-badge { margin-left: auto; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: #e0a800; color: #fff; padding: .1rem .4rem; border-radius: 4px; } .coupon-debug-empty { margin: 0; font-style: italic; opacity: .8; } .coupon-debug-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; } .coupon-debug-item { display: flex; flex-direction: row; align-items: center; gap: .5rem; padding-bottom: .5rem; border-bottom: 1px solid #f0e3a8; } .coupon-debug-item:last-child { padding-bottom: 0; border-bottom: 0; } .coupon-debug-code { font-weight: 700; font-size: .85rem; background: #fff; border: 1px solid #e0c84d; border-radius: 4px; padding: .1rem .35rem; user-select: all; } .coupon-debug-summary { font-weight: 600; margin-left: auto; text-align: right; } .coupon-debug-note { margin: .6rem 0 0; font-size: .72rem; font-style: italic; opacity: .75; } /* ---- info pages ---- */ .static-page { max-width: 800px; } .static-page h1 { margin-bottom: 1.25rem; } .static-page p { max-width: 65ch; } .static-page a { color: var(--secondary); font-weight: 600; text-decoration: underline; } .static-page ul { max-width: 65ch; margin: .5rem 0; padding-left: 1.25rem; } .static-page li { margin: 0 0 .35rem; } .faq-item { margin-bottom: 1.5rem; } .faq-item h3 { margin: 0 0 .35rem; font-size: 1.05rem; } .faq-item p { margin: 0; } /* Admin-authored override body (Shops_Pages.content, nl2br plain text) */ .static-content { max-width: 65ch; line-height: 1.65; white-space: normal; } .static-content a { color: var(--secondary); font-weight: 600; text-decoration: underline; } .contact-email { font-size: 1.05rem; margin: 1rem 0; } .confirm-help { text-align: center; margin-top: 1.25rem; font-size: .9rem; } /* ---- above-footer banner (its own image) ---- */ .footer-banner { display: flex; justify-content: center; padding: 1.5rem 1rem; } .footer-banner img { display: block; max-height: 300px; max-width: 100%; width: auto; height: auto; } /* on phones: edge-to-edge, no padding, sitting flush against the footer */ @media (max-width: 600px) { .footer-banner { padding: 0; } .footer-banner img { width: 100%; max-height: none; } } /* ---- footer ---- */ .footer { background: var(--footer-bg, var(--secondary)); /* always the opposite of the footer background (auto-contrast) */ color: var(--on-footer, #fff); margin-top: auto; padding-top: 1rem; } .footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; padding: 2.5rem 1.5rem; max-width: 1280px; margin: 0 auto; } /* minmax(0,...) lets the tracks shrink below their content's min-content so a wide brand logo / long link label can't force the footer past a narrow phone viewport (was a fixed-240px brand column → horizontal scroll under ~378px). */ @media (max-width: 760px) { .footer-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } /* min(240px, 100%): keep the 240px cap on wide screens, but never exceed the (now shrinkable) column on mobile. */ .footer-brand img { max-height: 80px; max-width: min(240px, 100%); margin-bottom: .7rem; } .footer-brand-name { display: block; font-size: 1.2rem; font-weight: 800; margin-bottom: .35rem; } .footer-brand p { opacity: .7; font-size: .9rem; } .footer-col h4 { text-transform: uppercase; font-size: .85rem; margin: 0 0 .7rem; /* contrast-safe on any footer colour */ color: var(--on-footer, #fff); opacity: .9; } .footer-col a { display: block; font-size: .88rem; opacity: .8; padding: .18rem 0; } .footer-col a:hover { opacity: 1; } .footer-base { border-top: 1px solid rgba(255,255,255,.15); text-align: center; padding: 1rem; font-size: .8rem; opacity: .7; } /* ---- bundles: promo strip + cards ---- */ .bundles-strip { margin-bottom: 2rem; } .bundle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; } .bundle-card { border: 1px solid #e4e4e4; border-radius: 10px; background: #fff; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s ease, transform .15s ease; } .bundle-card:hover { box-shadow: 0 10px 26px rgba(0,0,0,.12); transform: translateY(-2px); } .bundle-card-media { position: relative; background: #f7f7f7; padding: .4rem; min-height: 200px; display: flex; align-items: center; justify-content: center; } .bundle-card-media > img { height: 200px; width: 100%; object-fit: contain; } .bundle-card-badge { position: absolute; top: .6rem; left: .6rem; background: var(--primary); color: var(--on-primary); font-size: .72rem; font-weight: 800; text-transform: uppercase; padding: .25rem .55rem; border-radius: 20px; } .bundle-card-body { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .3rem; } .bundle-card-tag { font-size: .72rem; font-weight: 700; text-transform: uppercase; opacity: .55; } .bundle-card-body h3 { margin: 0; font-size: 1rem; font-weight: 700; } .bundle-card-price { display: flex; align-items: baseline; gap: .5rem; margin-top: .15rem; } .bundle-card-price .was { text-decoration: line-through; opacity: .5; font-size: .9rem; } .bundle-card-price .now { font-weight: 800; font-size: 1.15rem; } /* ---- bundle wizard ---- */ .bundle-page { max-width: 1280px; } /* match the product page width */ .bundle-head { display: flex; gap: 1.5rem; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; } .bundle-head-image { width: 160px; flex-shrink: 0; border: 1px solid #e4e4e4; border-radius: 10px; background: #f7f7f7; overflow: hidden; } .bundle-head-image > img { width: 100%; height: 160px; object-fit: contain; } .bundle-head-info { flex: 1; min-width: 240px; } .bundle-price-summary { display: flex; align-items: baseline; gap: .8rem; margin-top: .6rem; flex-wrap: wrap; } .bundle-was { text-decoration: line-through; opacity: .5; font-size: 1.1rem; } .bundle-now { font-weight: 800; font-size: 1.7rem; } .bundle-save-badge { background: var(--primary); color: var(--on-primary); font-weight: 800; font-size: .8rem; text-transform: uppercase; padding: .25rem .6rem; border-radius: 20px; } .bundle-steps-bar { display: flex; gap: .5rem; margin: 1rem 0 1.5rem; flex-wrap: wrap; } .bundle-step-dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; cursor: pointer; background: #ececec; color: #888; border: 2px solid transparent; } .bundle-step-dot.active { background: var(--secondary); color: var(--on-secondary); } .bundle-step { display: none; } .bundle-step.active { display: block; } .bundle-step-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; } .bundle-step-media { position: relative; border: 1px solid #e8e8e8; border-radius: 10px; background: #f7f7f7; padding: 1rem; display: flex; align-items: center; justify-content: center; } .bundle-step-media .mockup > img { width: 100%; height: auto; object-fit: contain; } /* the per-item front/back gallery sits flush inside the media box */ .bundle-step-media .gallery { width: 100%; } .bundle-step-media .gallery-main { border: none; padding: 0; background: transparent; } .two-sided-badge { position: absolute; top: .6rem; right: .6rem; z-index: 2; background: var(--secondary); color: var(--on-secondary); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: .25rem .55rem; border-radius: 20px; } .two-sided-badge i { margin-right: .3rem; } .two-sided-tag { color: var(--secondary); font-weight: 800; } .bundle-step-eyebrow { font-size: .78rem; font-weight: 700; text-transform: uppercase; opacity: .55; } .bundle-step-name { margin: .2rem 0 .4rem; font-size: 1.4rem; } /* per-step action buttons live in the right column, under the options. Stack them full-width so the primary CTA dominates; Back becomes a quiet link tucked underneath instead of crowding the Add/Buy buttons. */ .bundle-step-actions { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.75rem; } .bundle-step-actions .btn { width: 100%; } .bundle-step-actions .bundle-back { order: 10; /* always last, under the primary CTA(s) */ width: auto; align-self: center; background: #ededed; color: #666; font-weight: 600; opacity: 1; padding: .5rem 1.4rem; border-radius: 4px; } .bundle-step-actions .bundle-back:hover { background: #e2e2e2; color: var(--secondary); filter: none; text-decoration: none; } /* "Buy it now" is the express path — outline it so two stacked CTAs read as a primary + secondary pair rather than a wall of identical buttons. */ .bundle-step-actions .btn-buy-now { background: none; color: var(--secondary); border: 2px solid var(--secondary); } .bundle-step-actions .btn-buy-now:hover { background: var(--secondary); color: #fff; } .btn-light { background: #ededed; color: var(--secondary); } .btn-light:hover { filter: brightness(.95); } /* Confirmation modal (e.g. removing a bundle from the cart) */ .modal-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .modal-overlay[hidden] { display: none; } .modal { background: #fff; border-radius: 12px; max-width: 420px; width: 100%; padding: 1.6rem 1.6rem 1.3rem; box-shadow: 0 12px 40px rgba(0,0,0,.25); text-align: center; } .modal h3 { margin: 0 0 .5rem; font-size: 1.2rem; } .modal p { margin: 0 0 1.2rem; color: #555; } .modal-actions { display: flex; gap: .6rem; justify-content: center; } .btn-danger { background: #c0392b; color: #fff; } .btn-danger:hover { background: #a93226; } @media (max-width: 760px) { .bundle-step-grid { grid-template-columns: 1fr; } } /* ---- cart: bundle grouping ---- */ .cart-bundle { border: 1px solid #e4e4e4; border-left: 3px solid var(--secondary); border-radius: 8px; padding: .25rem 1rem .5rem; margin: .5rem 0; } .cart-bundle-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .65rem 0 .4rem; border-bottom: 1px dashed #e0e0e0; margin-bottom: .25rem; flex-wrap: wrap; } .cart-bundle-label { font-weight: 800; text-transform: uppercase; font-size: .85rem; } .cart-bundle-saving { font-weight: 700; font-size: .85rem; color: #2e7d32; } .cart-bundle-discount .cart-line-total { color: #2e7d32; } .cart-bundle-discount .cart-line-name { font-weight: 600; opacity: .85; } .cart-savings { color: #2e7d32; font-size: 1rem; } /* ---- bundle layered preview: one item full size + smaller items on top ---- */ .bundle-stack { position: relative; width: 100%; } .bundle-stack-base { width: 88%; margin: 0 auto; } .bundle-stack-base .mockup > img { width: 100%; height: auto; display: block; } .bundle-stack-overlay { position: absolute; width: 42%; background: #fff; border: 2px solid #fff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.18); overflow: hidden; } .bundle-stack-overlay .mockup { width: 100%; } .bundle-stack-overlay .mockup > img { width: 100%; height: auto; display: block; } .bundle-stack-o1 { right: 2%; bottom: 2%; } .bundle-stack-o2 { left: 2%; bottom: 2%; } .bundle-stack-o3 { right: 2%; top: 2%; } .bundle-stack-more { position: absolute; left: 4%; top: 4%; z-index: 2; min-width: 30px; height: 30px; padding: 0 6px; background: var(--secondary); color: var(--on-secondary); font-weight: 800; font-size: .8rem; border-radius: 16px; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(0,0,0,.22); } /* keep the small layers small even though the design overlay shares .mockup */ .bundle-head-image .bundle-stack-base .mockup > img { height: auto; } /* ---- 404 page ---- */ .error-page .error-hero { text-align: center; padding: 2.5rem 1rem 2rem; margin-bottom: 1rem; } .error-hero .error-code { font-size: 4.5rem; font-weight: 800; line-height: 1; color: var(--primary); letter-spacing: .02em; } .error-hero h1 { margin: .5rem 0 .4rem; font-size: 1.6rem; } .error-hero p { max-width: 46ch; margin: 0 auto; } .error-actions { margin-top: 1.4rem; display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; } /* ---- button loading spinner (Stripe pay button, etc.) ---- */ .btn-spin { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; margin-right: .5em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btn-spin .6s linear infinite; } @keyframes btn-spin { to { transform: rotate(360deg); } } .btn.is-loading { cursor: progress; opacity: .9; } .btn:disabled { cursor: not-allowed; } /* ---- active-window: status banner + live countdown ---- */ .shop-status-banner { text-align: center; padding: .6rem 1rem; font-size: .9rem; font-weight: 600; line-height: 1.4; } .shop-status-banner.is-before { background: var(--primary); color: var(--on-primary); } .shop-status-banner.is-after { background: #3a3a3a; color: #fff; } .shop-status-banner i { margin-right: .4rem; } .shop-countdown { width: 100%; margin: 0 0 1.25rem; padding: 1.1rem 1.25rem; display: flex; flex-direction: column; align-items: center; gap: .25rem; border: 1px solid #e4e4e4; border-left: none; border-right: none; border-radius: 0; background: #fafafa; text-align: center; } .shop-countdown.is-closing { background: #fff7ed; border-color: #fed7aa; } .shop-countdown-label { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; opacity: .85; } .shop-countdown-label i { margin-right: .35rem; } .shop-countdown-clock { font-size: 2.1rem; font-weight: 800; font-variant-numeric: tabular-nums; } .shop-countdown-sub { font-size: .85rem; opacity: .7; } .purchase-closed { margin-top: 1rem; } /* ---- admin bar (product pages, Level >= 8 only) ---- Dark utility strip with a purple admin shield and quick links to the main site's control-panel pages for editing the current product. */ .admin-bar { background: #16161a; color: #e9e9ee; border-bottom: 2px solid #7c3aed; font-size: .85rem; } .admin-bar-inner { max-width: 1200px; margin: 0 auto; padding: .55rem 1.25rem; display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; } .admin-bar-brand { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; letter-spacing: .02em; } .admin-bar-icon { color: #a855f7; font-size: 1.05rem; } .admin-bar-pid { font-weight: 600; color: #a1a1aa; font-variant-numeric: tabular-nums; } .admin-bar-style { font-weight: 700; color: #e4e4e7; margin-left: .4rem; padding-left: .5rem; border-left: 1px solid #3f3f46; } .admin-bar-label { color: #a1a1aa; font-weight: 600; } .admin-bar-links { display: flex; flex-wrap: wrap; gap: .4rem; margin-left: auto; } .admin-bar-link { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 6px; background: #26262e; color: #e9e9ee; font-weight: 600; border: 1px solid #34343e; transition: background .15s ease, border-color .15s ease; } .admin-bar-link:hover { background: #7c3aed; border-color: #7c3aed; color: #fff; } .admin-bar-link i { color: #c4b5fd; } .admin-bar-link:hover i { color: #fff; } /* level-9 developer link — amber accent to set it apart */ .admin-bar-dev { border-color: #b45309; } .admin-bar-dev i { color: #fbbf24; } .admin-bar-dev:hover { background: #b45309; border-color: #b45309; } @media (max-width: 768px) { /* Icon-only admin bar on small screens: hide every text label, keeping just the shield + product id and tappable icon buttons for each CP link. The buttons WRAP to a second row when they don't fit, rather than forcing one row — a non-wrapping row overflowed the viewport once a 6th button (Invoices) was added, dragging the whole page sideways. Wrapping keeps every button visible and can never push the page wider than the screen. */ .admin-bar-title, .admin-bar-label, .admin-bar-link span { display: none; } .admin-bar { overflow-x: hidden; } .admin-bar-inner { flex-wrap: wrap; } .admin-bar-links { flex-wrap: wrap; margin-left: auto; gap: .5rem; row-gap: .5rem; } .admin-bar-link { width: 40px; height: 40px; /* comfortable tap target */ flex: 0 0 auto; padding: 0; gap: 0; justify-content: center; } .admin-bar-link i { font-size: 1.05rem; } } /* ---- footer query timer (admin only) ---- Collapsible per-request DB query breakdown shown beneath the footer. */ .site-version { max-width: 1200px; margin: 0 auto; padding: .5rem 1.25rem 0; color: #8b8b93; font-size: .75rem; text-align: center; letter-spacing: .02em; } .query-timer { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem 1rem; color: #cfcfd6; font-size: .8rem; } /* On mobile the sticky add-to-cart bar (fixed, bottom:0, z-index 999) overlaps whatever sits at the very bottom of the page. For signed-in staff that's the version stamp + SQL profiler, so give the footer extra bottom clearance only when those admin-only elements are present. Shoppers never see this. */ @media (max-width: 768px) { .footer:has(.site-version, .query-timer) { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); } } .query-timer-summary { display: flex; align-items: center; gap: .6rem; cursor: pointer; padding: .5rem .75rem; background: #1f1f25; border: 1px solid #34343e; border-radius: 6px; font-weight: 700; list-style: none; } .query-timer-summary::-webkit-details-marker { display: none; } .query-timer-summary i { color: #a855f7; } .query-timer-total { margin-left: auto; color: #fde047; font-variant-numeric: tabular-nums; } .query-timer-actions { margin: .6rem 0 0; } .query-timer-copy { background: #2b2b34; color: #e7e7ea; border: 1px solid #44444f; border-radius: 6px; padding: .35rem .8rem; font-size: .8rem; font-weight: 600; cursor: pointer; } .query-timer-copy:hover { background: #34343e; } .query-timer-list { margin: .5rem 0 0; padding: 0; list-style: none; max-height: 320px; overflow: auto; border: 1px solid #34343e; border-radius: 6px; } .query-timer-row { display: flex; gap: .75rem; padding: .4rem .75rem; border-bottom: 1px solid #2a2a32; } .query-timer-row:last-child { border-bottom: none; } .query-timer-row:nth-child(odd) { background: #1c1c22; } .query-timer-time { flex: 0 0 auto; min-width: 4.5rem; color: #fde047; font-variant-numeric: tabular-nums; text-align: right; } .query-timer-sql { flex: 1 1 auto; white-space: pre-wrap; word-break: break-word; color: #d4d4dc; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: .76rem; } /* Slow query (>= 1s): red/orange highlight that wins over the zebra striping. */ .query-timer-row.is-slow, .query-timer-row.is-slow:nth-child(odd) { background: #5a1e1e; border-left: 3px solid #f97316; } .query-timer-row.is-slow .query-timer-time { color: #fca5a5; font-weight: 700; } .query-timer-row.is-slow .query-timer-sql { color: #fde2e2; } /* Diagnostic line when the profiler can't read a query log. */ .query-timer-note { margin: .5rem 0 0; padding: .6rem .75rem; background: #1c1c22; border: 1px solid #34343e; border-radius: 6px; color: #d4d4dc; line-height: 1.5; } .query-timer-note code { color: #fde047; } /* =========================================================================== Invoices — customer invoice page + admin builder/manage. Uses the shared design tokens (--secondary etc.) and the existing .btn/.muted helpers. =========================================================================== */ .ta-r { text-align: right; white-space: nowrap; } /* ---- shared invoice document (customer view + admin preview) ---- */ .invoice-page { max-width: 820px; margin: 0 auto; } .invoice-doc { background: #fff; border: 1px solid #ececec; border-radius: 14px; padding: 1.75rem 1.9rem; box-shadow: 0 6px 24px rgba(0,0,0,.05); } .invoice-doc--flat { box-shadow: none; } .invoice-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .invoice-head h1 { margin: 0; font-size: 1.7rem; } .invoice-ref { margin: .2rem 0 0; color: #6b7280; font-size: .9rem; } .invoice-h2 { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #8a909b; margin: 0 0 .35rem; } .invoice-status { display: inline-block; padding: .28rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: #eef0f3; color: #475569; } .invoice-status--sent { background: #e0edff; color: #1d4ed8; } .invoice-status--paid { background: #dcfce7; color: #15803d; } .invoice-status--void { background: #fee2e2; color: #b91c1c; } .invoice-status--draft { background: #f1f5f9; color: #64748b; } .invoice-banner { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 1.1rem 0; padding: .8rem 1rem; border-radius: 10px; font-size: .92rem; } .invoice-banner a { font-weight: 700; text-decoration: underline; } .invoice-banner--ok { background: #ecfdf3; color: #15803d; border: 1px solid #bbf7d0; } .invoice-banner--void { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; } .invoice-banner--err { background: #fff7ed; color: #b45309; border: 1px solid #fed7aa; } .invoice-parties { display: flex; gap: 2.5rem; flex-wrap: wrap; margin: 1.4rem 0; } .invoice-parties p { margin: 0; line-height: 1.55; font-size: .95rem; } .invoice-table { width: 100%; border-collapse: collapse; margin: .4rem 0 1rem; } .invoice-table thead th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: #8a909b; border-bottom: 1px solid #ececec; padding: .5rem .4rem; } .invoice-table tbody td { padding: .75rem .4rem; border-bottom: 1px solid #f2f2f4; vertical-align: top; } .invoice-item-name { display: block; font-weight: 600; } .invoice-item-meta { display: block; font-size: .84rem; color: #6b7280; margin-top: .12rem; } .invoice-item-sizes { display: block; font-size: .84rem; color: #374151; margin-top: .12rem; } .invoice-totals { margin-left: auto; max-width: 320px; } .invoice-total-row { display: flex; justify-content: space-between; gap: 1rem; padding: .32rem 0; font-size: .95rem; } .invoice-total-row--grand { border-top: 2px solid #1f2937; margin-top: .35rem; padding-top: .6rem; font-size: 1.15rem; font-weight: 800; } .invoice-notes { margin-top: 1.6rem; } .invoice-notes p { margin: 0; line-height: 1.55; font-size: .95rem; } /* ---- customer pay box ---- */ .invoice-pay { margin-top: 1.8rem; border-top: 1px solid #ececec; padding-top: 1.4rem; } .invoice-pay-methods { border: 0; padding: 0; margin: 0 0 1rem; display: flex; gap: .6rem; flex-wrap: wrap; } .invoice-pay-methods legend { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #8a909b; margin-bottom: .4rem; } .invoice-pay-method { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; border: 1px solid #d7dbe0; border-radius: 10px; padding: .55rem 1rem; font-weight: 600; } .invoice-pay-method input { accent-color: var(--secondary); } .invoice-pay-fine { font-size: .8rem; color: #8a909b; margin: .7rem 0 0; text-align: center; } .invoice-pay-unavailable { margin-top: 1.5rem; color: #b45309; font-weight: 600; } /* ---- admin pages (list / builder / manage) ---- */ .admin-page { max-width: 1040px; margin: 0 auto; } .admin-page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; } .admin-page-head h1 { margin: 0; font-size: 1.6rem; } .admin-head-actions { display: flex; align-items: center; gap: 1rem; } .admin-link { font-weight: 600; color: var(--secondary); text-decoration: none; } .admin-link:hover { text-decoration: underline; } .admin-table-wrap { overflow-x: auto; } .admin-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #ececec; border-radius: 12px; overflow: hidden; } .admin-table thead th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: #8a909b; background: #fafafa; padding: .7rem .8rem; } .admin-table tbody td { padding: .8rem; border-top: 1px solid #f2f2f4; vertical-align: middle; } .admin-cust-name { display: block; font-weight: 600; } .admin-cust-email { display: block; font-size: .82rem; color: #6b7280; } .admin-grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem; align-items: start; } @media (min-width: 861px) { .admin-grid { grid-template-columns: 1fr 340px; } } .admin-card { background: #fff; border: 1px solid #ececec; border-radius: 12px; padding: 1.2rem 1.3rem; margin-bottom: 1.2rem; } .admin-card-hint { font-size: .82rem; margin: 0 0 .6rem; } .admin-link-field { width: 100%; font-size: .82rem; padding: .55rem .6rem; border: 1px solid #d7dbe0; border-radius: 8px; margin-bottom: .6rem; background: #f9fafb; color: #374151; } .admin-btn-warn { color: #b45309; border-color: #fed7aa; } .admin-btn-danger { color: #b91c1c; border-color: #fecaca; } .admin-side .btn { margin-bottom: .55rem; } /* ---- builder controls ---- */ .inv-builder { background: #fafafa; border: 1px solid #eee; border-radius: 10px; padding: 1rem 1.1rem; margin-bottom: 1rem; } .inv-builder-row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: .8rem; } .inv-field { display: flex; flex-direction: column; gap: .3rem; flex: 1 1 160px; min-width: 0; } .inv-field--grow { flex: 3 1 240px; } .inv-field--sm { flex: 0 1 130px; } .inv-field--full { flex: 1 1 100%; } .inv-field > span { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #8a909b; } .inv-field input, .inv-field select, .inv-field textarea { width: 100%; padding: .55rem .6rem; border: 1px solid #d7dbe0; border-radius: 8px; font: inherit; font-size: .92rem; background: #fff; box-sizing: border-box; } .inv-field input:focus, .inv-field select:focus, .inv-field textarea:focus { outline: none; border-color: var(--secondary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--secondary) 25%, transparent); } .inv-add-wrap { justify-content: flex-end; align-items: flex-end; } .inv-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: 1rem; } @media (max-width: 600px) { .inv-grid-2 { grid-template-columns: 1fr; } } .inv-field-row { display: flex; gap: .6rem; } .inv-sizes { margin: 0 0 .8rem; } .inv-sizes-label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #8a909b; margin-bottom: .4rem; } .inv-sizes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .5rem; } .inv-size-cell { display: flex; flex-direction: column; gap: .2rem; } .inv-size-cell span { font-size: .8rem; font-weight: 700; text-align: center; } .inv-size-cell input { width: 100%; padding: .45rem; border: 1px solid #d7dbe0; border-radius: 8px; text-align: center; font: inherit; box-sizing: border-box; } .inv-msg { color: #b45309; font-size: .88rem; font-weight: 600; margin: .3rem 0 0; } .inv-lines-table { margin-top: .4rem; } .inv-line-del { background: none; border: none; color: #b91c1c; font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 .3rem; } .inv-line-del:hover { color: #7f1d1d; } /* invoice builder: product preview + one-per-row size table */ .inv-builder-top { display: flex; gap: 1.1rem; align-items: flex-start; } .inv-builder-controls { flex: 1 1 auto; min-width: 0; } .inv-builder-preview { flex: 0 0 132px; width: 132px; height: 156px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; } .inv-builder-preview img { max-width: 100%; max-height: 100%; object-fit: contain; } .inv-preview-empty { color: #cbd0d8; font-size: 1.7rem; } @media (max-width: 560px) { .inv-builder-top { flex-direction: column; align-items: stretch; } .inv-builder-preview { align-self: center; } } .inv-size-table { border-collapse: collapse; margin-top: .1rem; } .inv-size-table th { text-align: left; font-weight: 700; font-size: .9rem; padding: .3rem .8rem .3rem 0; white-space: nowrap; color: #374151; } .inv-size-table td { padding: .22rem 0; } .inv-size-table input { width: 110px; padding: .42rem .55rem; border: 1px solid #d7dbe0; border-radius: 8px; font: inherit; text-align: center; box-sizing: border-box; } .inv-size-table input:focus { outline: none; border-color: var(--secondary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--secondary) 25%, transparent); } /* invoice line-item thumbnail (customer invoice + admin manage) */ .invoice-item { display: flex; gap: .7rem; align-items: flex-start; } .invoice-item-thumb { position: relative; flex: 0 0 56px; width: 56px; align-self: flex-start; border: 1px solid #eee; border-radius: 6px; background: #fff; overflow: hidden; } .invoice-item-thumb .mockup { width: 100%; } .invoice-item-body { min-width: 0; } /* invoice document: never overflow its container; long emails/words wrap */ .invoice-doc { box-sizing: border-box; max-width: 100%; overflow-wrap: break-word; } /* invoice line-items → stacked, labelled rows on phones (no sideways scroll) */ @media (max-width: 560px) { .invoice-doc { padding: 1.1rem 1.15rem; } .invoice-parties { gap: 1.2rem; } .invoice-totals { max-width: none; } .invoice-table thead { display: none; } .invoice-table, .invoice-table tbody, .invoice-table tr, .invoice-table td { display: block; width: 100%; } .invoice-table tr { border-bottom: 1px solid #ececec; padding: .55rem 0; } .invoice-table tbody td { border: 0; padding: .1rem 0; } .invoice-table td:first-child { padding-bottom: .35rem; } .invoice-table td.ta-r { display: flex; align-items: baseline; justify-content: space-between; white-space: normal; margin-top: .1rem; } .invoice-table td.ta-r::before { content: attr(data-label); color: #8a909b; font-weight: 600; text-transform: uppercase; font-size: .68rem; letter-spacing: .05em; } } /* ---- Admin: info-page editor (Shops_Pages) ---- */ .page-editor .field { display:block; margin:0 0 1rem; } .page-editor .field-label { display:flex; align-items:center; justify-content:space-between; gap:.5rem; font-weight:700; font-size:.8rem; margin-bottom:.35rem; text-transform:uppercase; letter-spacing:.02em; } .page-editor input[type=text], .page-editor textarea { width:100%; box-sizing:border-box; padding:.6rem .7rem; border:1px solid var(--border,#d0d0d7); border-radius:8px; font:inherit; background:#fff; color:inherit; } .page-editor textarea { font:13px/1.55 Consolas,Menlo,monospace; resize:vertical; min-height:340px; } .page-editor .field-check { display:flex; align-items:center; gap:.5rem; } .page-editor .field-check input { width:auto; } .editor-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; align-items:start; } .editor-preview { border:1px dashed var(--border,#d0d0d7); border-radius:8px; padding:1rem 1.1rem; min-height:340px; max-height:70vh; overflow:auto; background:#fff; } .editor-restore { font-size:.72rem; text-transform:none; letter-spacing:0; font-weight:600; background:none; border:none; cursor:pointer; padding:0; } .editor-actions { display:flex; align-items:center; gap:1.5rem; margin-top:.75rem; } .pill-yes, .pill-no { display:inline-block; padding:.15rem .55rem; border-radius:999px; font-size:.72rem; font-weight:700; } .pill-yes { background:#e6f7ec; color:#137a3a; } .pill-no { background:#f3f3f5; color:#8a8a94; } @media (max-width:760px){ .editor-grid { grid-template-columns:1fr; } } /* Customizable info pages: match the narrow default-page measure and wrap at word boundaries. Non-breaking spaces are normalized server-side, so normal text never breaks mid-word; break-word only saves a genuinely long URL. */ .page.static-page .static-content { max-width: 65ch; } .static-content { overflow-wrap: break-word; } .static-content img, .static-content table { max-width: 100%; height: auto; } /* Quill rich-text editor in the page editor (self-hosted under /assets/vendor/quill) */ .page-editor .ql-toolbar { border-top-left-radius:8px; border-top-right-radius:8px; border-color:var(--border,#d0d0d7); } .page-editor .ql-container { border-bottom-left-radius:8px; border-bottom-right-radius:8px; border-color:var(--border,#d0d0d7); font:inherit; } .page-editor .ql-editor { min-height:340px; } .page-editor .editor-tools { display:inline-flex; gap:1rem; } /* Render Quill alignment / indent classes on the storefront info pages */ .static-content .ql-align-center { text-align:center; } .static-content .ql-align-right { text-align:right; } .static-content .ql-align-justify { text-align:justify; } .static-content .ql-indent-1 { padding-left:3em; } .static-content .ql-indent-2 { padding-left:6em; } .static-content .ql-indent-3 { padding-left:9em; }