.package-header { background:#fff; border-bottom-color:rgba(23,23,23,.16); }.catalog-back { justify-self:end; color:#171717; font-size:13px; text-decoration:none; transition:color .2s; }.catalog-back:hover { color:#6f222a; }.catalog-page { background:#f7f7f4; min-height:100vh; }.catalog-intro { padding:clamp(40px,7vw,90px) 7vw 70px; max-width:850px; }.catalog-intro .eyebrow { color:#6f222a; }.catalog-intro h1 { margin:0 0 28px; font-size:clamp(62px,9vw,140px); line-height:.8; }.catalog-intro h1 em { color:#6f222a; }.catalog-intro > p:not(.eyebrow) { max-width:470px; color:#59635d; line-height:1.7; }.package-catalog { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }.package-card { position:relative; min-height:62vh; padding:38px 7vw; display:flex; align-items:end; color:#fff; text-decoration:none; overflow:hidden; background-size:cover; background-position:center; }.package-card::before { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(10,20,18,.72),rgba(10,20,18,.13)); transition:background .3s; }.package-card:hover::before { background:linear-gradient(0deg,rgba(111,34,42,.78),rgba(10,20,18,.15)); }.package-card > * { position:relative; z-index:1; }.package-card > span { position:absolute; top:32px; left:7vw; font:10px "DM Mono",monospace; letter-spacing:.15em; }.package-card h2 { margin:14px 0; font-size:clamp(40px,5vw,75px); line-height:.88; letter-spacing:-.06em; }.package-card p:not(.eyebrow) { max-width:320px; margin:0 0 25px; font-size:14px; line-height:1.55; }.package-card strong { font-size:12px; font-weight:500; }
.package-page { background:#f7f7f4; }.package-topbar { position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center; padding:15px 7vw; color:#fff; background:#0c4444; }.package-topbar a { color:#fff; font-size:12px; text-decoration:none; }.package-total { font:500 14px "DM Sans",sans-serif; }.package-total small { margin-right:12px; color:#d0b28e; font:10px "DM Mono",monospace; letter-spacing:.12em; }.package-hero { padding:clamp(70px,10vw,130px) 7vw; background:#ecece8; }.package-hero .eyebrow { color:#6f222a; }.package-hero h1 { margin:0 0 24px; font-size:clamp(54px,8vw,115px); line-height:.85; }.package-hero h1 em { color:#6f222a; }.package-hero > p:last-child { max-width:500px; color:#59635d; line-height:1.7; }
.products-wrap { max-width:1200px; margin:0 auto; padding:80px 7vw 30px; }.products-heading { margin-bottom:42px; }.products-heading h2 { margin:0; font-size:clamp(38px,5vw,70px); letter-spacing:-.06em; }.product-block { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,6vw,80px); padding:64px 0; border-top:1px solid rgba(23,23,23,.16); }.product-gallery { position:relative; aspect-ratio:5/4; background:#ddd; overflow:hidden; }.product-gallery img { width:100%; height:100%; object-fit:contain; transition:opacity .25s; }.product-number { position:absolute; top:17px; left:18px; z-index:2; padding:7px 9px; color:#fff; background:rgba(12,68,68,.74); font:10px "DM Mono",monospace; }.product-info { align-self:center; }.product-type { margin:0 0 16px; color:#6f222a; font:10px "DM Mono",monospace; letter-spacing:.15em; }.product-info h2 { margin:0 0 17px; font-size:clamp(34px,4vw,58px); line-height:.9; letter-spacing:-.055em; }.product-description { max-width:400px; color:#59635d; line-height:1.65; }.color-options { display:flex; gap:11px; margin:27px 0 25px; }.color-option { width:30px; height:30px; padding:0; border:2px solid transparent; border-radius:50%; cursor:pointer; }.color-option.active { outline:2px solid #0c4444; outline-offset:3px; }.color-option[data-color="Sand"] { background:#d0b28e; }.color-option[data-color="Teal"] { background:#0c4444; }.color-option[data-color="Burgundy"] { background:#6f222a; }.specs { display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:1px solid rgba(23,23,23,.16); }.specs div { padding:13px 0; border-bottom:1px solid rgba(23,23,23,.16); font-size:12px; }.specs span { display:block; margin-bottom:4px; color:#777; font:9px "DM Mono",monospace; letter-spacing:.12em; }.specs strong { font-weight:500; }
.addons-section { padding:70px 7vw 85px; background:#e8eee8; }.addons-inner { max-width:1200px; margin:0 auto; }.addons-title { margin:0 0 35px; font-size:clamp(42px,5vw,70px); letter-spacing:-.06em; }.addon-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.addon-card { padding-bottom:22px; background:#fff; }.addon-card img { width:100%; aspect-ratio:5/4; object-fit:contain; background:#f2f2ef; }.addon-copy { padding:20px 20px 0; }.addon-copy h3 { margin:0 0 8px; font-size:23px; font-weight:500; letter-spacing:-.04em; }.addon-copy p { min-height:43px; margin:0 0 18px; color:#59635d; font-size:13px; line-height:1.5; }.addon-bottom { display:flex; justify-content:space-between; align-items:center; }.addon-price { font-size:13px; font-weight:600; }.addon-toggle { padding:9px 12px; border:1px solid #0c4444; background:transparent; color:#0c4444; font:11px "DM Sans",sans-serif; cursor:pointer; }.addon-toggle.selected { color:#fff; background:#0c4444; }.package-actions { display:flex; justify-content:center; align-items:center; gap:12px; padding:55px 7vw 90px; background:#f7f7f4; }/* Explicit height so the <a> ("Add package") and the <button>s render at the
   same size — align-items alone does not reconcile their intrinsic heights. */
/* margin:0 is load-bearing — the <button>s otherwise pick up a 9px margin-top
   that the <a> does not, which nudged 'Add package' above the other two. */
.package-actions button,.package-actions a { box-sizing:border-box; height:50px; margin:0; display:inline-flex; align-items:center; justify-content:center; padding:0 20px; border:1px solid #6f222a; color:#6f222a; background:transparent; font:12px "DM Sans",sans-serif; line-height:1.2; white-space:nowrap; text-decoration:none; cursor:pointer; }.package-actions .primary { color:#fff; background:#6f222a; }
.package-actions button.is-loading { color:transparent; position:relative; pointer-events:none; }
.package-actions button.is-loading::after { content:""; position:absolute; top:50%; left:50%; width:16px; height:16px; margin:-8px 0 0 -8px; border:2px solid rgba(111,34,42,.3); border-top-color:#6f222a; border-radius:50%; animation:sc-btn-spin .7s linear infinite; }
@keyframes sc-btn-spin { to { transform:rotate(360deg); } }.save-message { min-height:18px; margin:0; text-align:center; color:#0c4444; font-size:13px; }
@media (max-width:720px) { .package-catalog,.addon-grid { grid-template-columns:1fr; }.package-card { min-height:68vh; }.product-block { grid-template-columns:1fr; }.products-wrap { padding:60px 24px 20px; }.addons-section { padding:60px 24px; }.package-actions { flex-direction:column; align-items:stretch; padding:42px 24px 65px; text-align:center; }.package-actions button,.package-actions a { text-align:center; }.package-topbar { padding:14px 24px; }.package-hero { padding:75px 24px; }.catalog-intro { padding:110px 24px 65px; } }
@media (max-width:460px) {
  .catalog-intro h1, .package-hero h1 { font-size:clamp(52px,16vw,78px); }
  .product-block { padding:44px 0; gap:30px; }
  .addon-copy { padding:17px 16px 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .package-card::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.12),transparent 65%); transform:translateX(-100%); transition:transform .7s ease; }
  .package-card:hover::after { transform:translateX(100%); }
}
 .save-message { position:fixed; z-index:60; left:50%; bottom:28px; width:min(calc(100% - 32px),360px); margin:0; padding:16px 20px; border:1px solid rgba(12,68,68,.18); background:#fff; box-shadow:0 16px 40px rgba(23,23,23,.16); opacity:0; pointer-events:none; transform:translate(-50%,18px); transition:opacity .28s ease, transform .28s ease; }
 .save-message.is-visible { opacity:1; transform:translate(-50%,0); }
 .cart-confirm-overlay { position:fixed; z-index:70; inset:0; display:grid; place-items:center; padding:20px; background:rgba(12,68,68,.35); backdrop-filter:blur(5px); animation:confirmFade .2s ease both; }
 .cart-confirm-card { width:min(100%,480px); padding:32px; background:#fff; box-shadow:0 22px 60px rgba(23,23,23,.2); animation:confirmCardIn .28s cubic-bezier(.2,.7,.2,1) both; }
 .cart-confirm-card .eyebrow { margin-bottom:15px; color:#6f222a; }
 .cart-confirm-card h2 { margin:0 0 17px; font-size:clamp(32px,5vw,48px); line-height:.95; letter-spacing:-.05em; }
 .cart-confirm-card > p:not(.eyebrow) { margin:0; color:#59635d; font-size:14px; line-height:1.65; }
 .cart-confirm-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:28px; }
 .cart-confirm-actions button { margin:0; padding:12px 15px; border:1px solid #6f222a; font:12px "DM Sans",sans-serif; cursor:pointer; }
 .cart-confirm-cancel { color:#6f222a; background:transparent; }
 .cart-confirm-save { color:#fff; background:#6f222a; }
 .cart-confirm-actions button:hover { color:#171717; border-color:#d0b28e; background:#d0b28e; }
 @keyframes confirmFade { from { opacity:0; } to { opacity:1; } }
 @keyframes confirmCardIn { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }

/* Option groups (Size, Colour, and anything added later) */
.option-groups { margin:27px 0 25px; }
.option-group { margin-bottom:20px; }
.option-group:last-child { margin-bottom:0; }
.option-group-label { margin:0 0 9px; color:#777; font:9px "DM Mono",monospace; letter-spacing:.12em; text-transform:uppercase; }
.option-group .color-options { margin:0; }
.chip-options { display:flex; flex-wrap:wrap; gap:8px; }
.chip-option { padding:9px 13px; border:1px solid rgba(23,23,23,.25); background:transparent; color:#171717; font:12px "DM Sans",sans-serif; cursor:pointer; transition:border-color .15s, background .15s; }
.chip-option:hover { border-color:#0c4444; }
.chip-option.active { border-color:#0c4444; background:#0c4444; color:#fff; }
.option-select { width:100%; max-width:340px; padding:10px 12px; border:1px solid rgba(23,23,23,.25); background:#fff; font:13px "DM Sans",sans-serif; cursor:pointer; }
.option-select:focus { outline:2px solid #0c4444; outline-offset:1px; }

/* Product image gallery (4 photos per colour) */
.product-media { display:flex; flex-direction:column; gap:10px; }
.gallery-thumbs { display:flex; gap:8px; }
.gallery-thumb { width:64px; height:64px; padding:0; border:1px solid rgba(23,23,23,.2); background:#ddd; overflow:hidden; cursor:pointer; }
.gallery-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.gallery-thumb.active { outline:2px solid #0c4444; outline-offset:2px; }

/* ---------------------------------------------------------------------------
   Sticky package topbar
   Was flex + space-between with two children. auth.js appends the account
   button as a third, which pushed the total into the middle and let the
   dropdown overlap it. An explicit 3-column grid gives each element its own
   lane regardless of how many are present.
   ------------------------------------------------------------------------ */
.package-topbar { display:grid; grid-template-columns:1fr auto 1fr; gap:16px; }
.package-topbar > a:first-child { justify-self:start; }
.package-total { justify-self:center; display:flex; align-items:baseline; gap:8px; white-space:nowrap; }
.package-total small { opacity:.72; font:9px "DM Mono",monospace; letter-spacing:.12em; }
.package-topbar .account-link { justify-self:end; width:30px; height:30px; }
.package-topbar .header-actions--floating { top:8px; right:7vw; }
.package-topbar .cart-link { width:30px; height:30px; }
.package-topbar .cart-link svg { width:19px; height:19px; }
.package-topbar .account-link svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.5; }

/* ---------------------------------------------------------------------------
   Alignment and responsive fixes
   ------------------------------------------------------------------------ */
.product-block { align-items:start; }
.product-info { min-width:0; }              /* stops long text forcing overflow */
.product-subheading { max-width:46ch; margin:2px 0 10px; color:#6f6357;
  font-family:"Playfair Display",Georgia,serif; font-size:16px; font-style:italic;
  line-height:1.35; }
.product-description { max-width:46ch; }
.addon-card { display:flex; flex-direction:column; }
.addon-copy { display:flex; flex-direction:column; flex:1; }
.addon-bottom { margin-top:auto; }          /* prices line up across cards */
.addon-copy p { min-height:0; }             /* fixed height caused ragged cards */

@media (max-width:980px) {
  .addon-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .package-catalog { grid-template-columns:1fr; }
}

@media (max-width:720px) {
  /* Keep the symmetric 1fr·auto·1fr grid so the price stays centred between the
     back link (left) and the profile icon (right) — the old auto·1fr·auto with
     justify-self:end pushed the price into the profile icon. */
  .package-topbar { padding:12px 20px; gap:12px; }
  .package-total { font-size:13px; }
  .package-total small { display:none; }
  .product-media { gap:8px; }
  .gallery-thumbs { flex-wrap:wrap; }
  .gallery-thumb { width:54px; height:54px; }
  .chip-options { gap:6px; }
  .chip-option { padding:8px 11px; font-size:11px; }
  .addon-grid { grid-template-columns:1fr; }
  .specs { grid-template-columns:1fr; }
}

@media (max-width:420px) {
  .package-topbar > a:first-child { font-size:11px; }
  .gallery-thumb { width:46px; height:46px; }
}

.catalog-empty { grid-column:1/-1; padding:60px 7vw; color:#59635d; font-size:14px; line-height:1.6; }

/* Package prices are quoted exclusive of GST; say so where the number is. */
.total-gst { font-style:normal; font-size:10px; opacity:.72; letter-spacing:.06em; }

/* ---------------------------------------------------------------------------
   UI refinement layer — soft radii on the shop surfaces, pill CTAs, rounded
   media. Appended last; shape only, no copy or layout-role changes.
   ------------------------------------------------------------------------ */
.package-catalog { gap:16px; padding:16px clamp(16px,4vw,40px) 0; }
.package-card { border-radius:22px; }
.package-card .package-meta { max-width:340px; margin:0 0 18px; color:rgba(255,255,255,.9); font:12px "DM Sans",sans-serif; line-height:1.5; letter-spacing:.02em; }
.package-card p:not(.eyebrow):not(.package-meta) { margin-bottom:13px; }
.addon-card { border-radius:16px; }
.product-gallery { border-radius:16px; }
.gallery-thumb { border-radius:10px; }
.option-select { border-radius:10px; }
.chip-option { border-radius:999px; }
.addon-toggle { border-radius:999px; }
.package-actions button, .package-actions a { border-radius:999px; }

/* ---------------------------------------------------------------------------
   Sticky "price + reserve" bar (product pages)
   The running total and the primary action stay in reach at all times, with a
   line of reassurance right beside the button. Keeps the #package-total,
   #save-package and #review-order ids the configurator already binds to, so no
   JS wiring changes — this bar simply relocates them into a fixed footer.
   ------------------------------------------------------------------------ */
.package-page { padding-bottom:104px; }
.reserve-bar { position:fixed; left:0; right:0; bottom:0; z-index:38; background:rgba(255,255,255,.86); backdrop-filter:blur(14px) saturate(1.2); border-top:1px solid rgba(23,23,23,.12); box-shadow:0 -10px 34px rgba(12,68,68,.09); }
.reserve-bar-inner { max-width:1200px; margin:0 auto; padding:12px 7vw; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.reserve-price { display:flex; flex-direction:column; gap:1px; min-width:0; }
.reserve-price small { color:#7a7f78; font:9px "DM Mono",monospace; letter-spacing:.14em; }
.reserve-amount { display:flex; align-items:baseline; gap:8px; font-family:"Playfair Display",Georgia,serif; font-size:clamp(20px,2.4vw,26px); font-weight:500; letter-spacing:-.02em; color:#171717; }
.reserve-amount .total-gst { font-family:"DM Sans",sans-serif; font-style:normal; font-size:10px; opacity:.7; letter-spacing:.06em; }
.reserve-reassure { max-width:44ch; margin:3px 0 0; color:#59635d; font-size:11.5px; line-height:1.4; }
.reserve-actions { display:flex; gap:10px; flex:none; }
.reserve-actions button { box-sizing:border-box; height:48px; margin:0; padding:0 22px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #6f222a; border-radius:999px; background:transparent; color:#6f222a; font:12px "DM Sans",sans-serif; white-space:nowrap; cursor:pointer; transition:background .2s, color .2s, transform .2s; }
.reserve-actions button.primary { background:#6f222a; color:#fff; }
@media (prefers-reduced-motion:no-preference) { .reserve-actions button:hover { transform:translateY(-1px); } }
.reserve-actions button:hover { background:#d0b28e; color:#171717; border-color:#d0b28e; }
/* Loading spinner while a save is in flight (mirrors .package-actions). */
.reserve-actions button.is-loading { color:transparent; position:relative; pointer-events:none; }
.reserve-actions button.is-loading::after { content:""; position:absolute; top:50%; left:50%; width:16px; height:16px; margin:-8px 0 0 -8px; border:2px solid rgba(111,34,42,.3); border-top-color:#6f222a; border-radius:50%; animation:sc-btn-spin .7s linear infinite; }
/* Keep the save toast and WhatsApp button clear of the fixed bar. */
.package-page .save-message { bottom:116px; }
.package-page .whatsapp-float { bottom:92px; }
@media (max-width:640px) {
  .reserve-bar-inner { flex-direction:column; align-items:stretch; gap:9px; padding:11px 20px; }
  .reserve-price { flex-direction:row; align-items:baseline; justify-content:space-between; gap:10px; }
  .reserve-reassure { display:none; }
  .reserve-actions button { flex:1; padding:0 14px; }
  .package-page { padding-bottom:132px; }
  .package-page .save-message { bottom:150px; }
  .package-page .whatsapp-float { bottom:150px; }
}
.cart-confirm-card { border-radius:18px; }
.save-message { border-radius:14px; }