/* ============================================================================
   FurFam design 2026 (pass B). One stylesheet for header, drawer, footer, home
   and order. Loaded only when $design_2026 is on (index.php). Legacy pages load
   this AFTER the legacy stylesheet, so header/drawer/footer rules here must win on
   specificity, not on order: keep body.design-2026 on those selectors.
   Spec: docs/superpowers/specs/2026-09-16-furfam-redesign-pass-b-design.md
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --ff-font:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ff-terracotta:#E8734A;
  --ff-terracotta-dark:#D4602F;
  --ff-terracotta-soft:#FFF3EE;
  --ff-navy:#1B2233;
  --ff-ink:#2B3140;
  --ff-muted:#5B6270;
  --ff-line:#D9DDE4;
  --ff-paper:#FFFFFF;
  --ff-cream:#F7F3EE;
  --ff-cool:#F3F6F9;
  --ff-green:#22C55E;
  --ff-green-dark:#16A34A;
  --ff-green-soft:#E9F9EF;
  --ff-gold:#F5B301;
  --ff-radius:12px;
  --ff-radius-sm:20px;
  --ff-shadow:0 1px 2px rgba(27,34,51,.06), 0 8px 24px rgba(27,34,51,.08);
  --ff-nav-h:64px;
  --ff-bar-h:72px;
  /* Task 7b: read by the design-canvas rules ported into css/furfam-mockup.css */
  --alert-progress:#22C55E;--alert:#FBB517;              /* the canvas progress bar reads it; legacy defined it in furfam.css :root */
  --product-color:255,255,255;           /* legacy defaults before the first swatch click (furfam.js then sets both on #order-page-2) */
  --mockup-contrast-color:255,255,255;
}

/* ---------- 2. Fonts ---------- */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-400.woff2) format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/inter-600.woff2) format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/inter-800.woff2) format("woff2");}

/* ---------- 3. Base ---------- */
body.design-2026{
  font-family:var(--ff-font);
  font-size:17px;
  line-height:1.5;
  color:var(--ff-ink);
  background:var(--ff-paper);
  -webkit-font-smoothing:antialiased;
}
body.design-2026 h1, body.design-2026 h2, body.design-2026 h3, body.design-2026 h4{
  font-family:var(--ff-font);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.05;
  color:var(--ff-navy);
}
body.design-2026 h1{font-size:clamp(2.25rem, 5.5vw, 3.75rem);}
body.design-2026 h2{font-size:clamp(1.75rem, 3.6vw, 2.5rem);}
body.design-2026 h3{font-size:1.25rem;}
body.design-2026 a:not(.ff-btn){color:var(--ff-navy);}   /* buttons keep their own (white) text */
body.design-2026 .container{max-width:1200px;}
body.design-2026 img{max-width:100%;height:auto;}
body.design-2026 .template{display:none!important;}

/* Section title pair used by every home section and the order reviews block */
.ff-section-head{text-align:center;margin:0 auto 2rem;max-width:44rem;}
.ff-section-head p{color:var(--ff-muted);font-size:1.05rem;margin:.5rem 0 0;}
.ff-section{padding:4rem 0;}
@media (max-width:767.98px){.ff-section{padding:2.75rem 0;}}

/* ---------- 4. Buttons ---------- */
.ff-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;min-height:56px;padding:.9rem 1.25rem;
  border:0;border-radius:var(--ff-radius);
  font:700 1.15rem/1.2 var(--ff-font);letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ff-btn:focus-visible{outline:3px solid var(--ff-navy);outline-offset:2px;}
.ff-btn-primary{background:var(--ff-terracotta);color:#fff;box-shadow:0 6px 18px rgba(232,115,74,.35);}
.ff-btn-primary:hover{background:var(--ff-terracotta-dark);color:#fff;transform:translateY(-1px);}
.ff-btn-green{background:var(--ff-green);color:#fff;box-shadow:0 6px 18px rgba(34,197,94,.3);}
.ff-btn-green:hover{background:var(--ff-green-dark);color:#fff;}
.ff-btn-ghost{background:#fff;color:var(--ff-navy);border:1.5px solid var(--ff-line);}
.ff-btn-ghost:hover{border-color:var(--ff-navy);}
.ff-note{font-size:.9rem;color:var(--ff-muted);text-align:center;margin:.6rem 0 0;}
.ff-note strong{color:var(--ff-ink);}
/* Font Awesome arrives after first paint: give every icon its box up front so nothing shifts when the font lands. */
body.design-2026 i[class^="fa-"], body.design-2026 i[class*=" fa-"]{display:inline-block;min-width:1em;text-align:center;}

/* ---------- 5. Trust row + stars ---------- */
.ff-trust{display:flex;flex-wrap:wrap;gap:1rem 1.75rem;list-style:none;margin:1.5rem 0 0;padding:0;}
.ff-trust li{display:flex;align-items:flex-start;gap:.6rem;font-size:.95rem;color:var(--ff-muted);}
.ff-trust li i{color:var(--ff-gold);font-size:1.25rem;line-height:1.3;}
.ff-trust li b{display:block;color:var(--ff-navy);font-weight:700;}
.ff-stars{color:var(--ff-gold);letter-spacing:.05em;white-space:nowrap;}

/* ---------- 6. Utilities ---------- */
.ff-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.ff-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .75rem;border-radius:999px;font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
.ff-pill-soft{background:var(--ff-terracotta-soft);color:var(--ff-terracotta-dark);}
.ff-pill-green{background:var(--ff-green-soft);color:var(--ff-green-dark);text-transform:none;letter-spacing:0;font-size:.85rem;}

/* ==== HEADER (Task 4) ==== */
body.design-2026 .ff-topbar{background:var(--ff-green-dark);color:#fff;font-size:.85rem;font-weight:600;text-align:center;padding:.4rem 0;}
body.design-2026 .ff-topbar strong{font-weight:800;}
body.design-2026 nav#mainNav.ff-nav{
  position:sticky;top:0;z-index:1030;min-height:var(--ff-nav-h);
  background:#fff;border-bottom:1px solid var(--ff-line);padding:.5rem 0;
}
@supports (animation-timeline: scroll()){
  body.design-2026 nav#mainNav.ff-nav{animation:ff-nav-shadow linear both;animation-timeline:scroll();animation-range:0 80px;}
  @keyframes ff-nav-shadow{from{box-shadow:none}to{box-shadow:0 6px 20px rgba(27,34,51,.10)}}
}
body.design-2026 .ff-brand img{height:32px;width:auto;}
body.design-2026 .ff-nav-links .nav-link{font-weight:600;color:var(--ff-ink);padding:.5rem .9rem;}
body.design-2026 .ff-nav-links .nav-link.active, body.design-2026 .ff-nav-links .nav-link:hover{color:var(--ff-terracotta-dark);}
body.design-2026 .ff-nav-secondary{flex-direction:row;align-items:center;gap:.5rem;}
body.design-2026 .ff-ship-pill{align-items:center;gap:.6rem;background:var(--ff-green-soft);color:var(--ff-green-dark);border-radius:999px;padding:.35rem .9rem;font-size:.8rem;line-height:1.15;}
body.design-2026 .ff-ship-pill i{font-size:1rem;}
body.design-2026 .ff-ship-pill b{display:block;font-weight:800;}
body.design-2026 .ff-ship-pill small{display:block;font-size:.72rem;color:var(--ff-ink);opacity:.8;}
/* Cart link + badge: anchored on the ids so they beat furfam.css (body.has-shopping-cart-items a#view-cart..., body a#view-cart span#cart-count) on legacy pages */
body.design-2026 a#view-cart.ff-cart-link{position:relative;color:var(--ff-navy);font-size:1.3rem;padding:.4rem .6rem;width:auto;background:none;border:0;border-radius:0;}
body.design-2026 a#view-cart.ff-cart-link:hover{background:none;box-shadow:none;border-radius:0;}
body.design-2026 a#view-cart i{position:static;top:auto;}
body.design-2026 a#view-cart span#cart-count{display:block;position:absolute;top:0;right:0;bottom:auto;min-width:1.25rem;height:1.25rem;padding:0;border-radius:999px;background:var(--ff-terracotta);color:#fff;font:700 .7rem/1.25rem var(--ff-font);text-align:center;white-space:nowrap;}
body.design-2026 a#view-cart span#cart-count::before{content:none;}
/* furfam.js never clears the badge text on an empty cart (it calls .html() as a getter), so :empty alone is not enough */
body.design-2026:not(.has-shopping-cart-items) a#view-cart span#cart-count, body.design-2026 a#view-cart span#cart-count:empty{display:none;}
body.design-2026 .toggle-navigation .nav-link{color:var(--ff-navy);font-size:1.3rem;}
@media (max-width:991.98px){
  body.design-2026 #navbar{padding:.5rem 0 1rem;}
  body.design-2026 .ff-nav-links .nav-link{font-size:1.1rem;padding:.6rem 0;}
}

/* ==== DRAWER (Task 5) ==== */
/* Legacy pages load furfam.css before this file; its div#offcanvasCart... rules out-specify class-only
   selectors, so the shell, footer, checkout button and cart-item rules are anchored on the ids
   (#offcanvasCart, #shopping-cart, #shopping-cart-subtotal, #shopping-cart-shipping) and reset the
   legacy properties that would otherwise leak (gradient, radius, .8rem font, z-index 3005, etc.). */
body.design-2026 #offcanvasCart.ff-drawer{width:420px;max-width:100vw;display:flex;flex-direction:column;background:#fff;background-image:none;border-radius:0;padding:0;font-size:1rem;color:var(--ff-ink);z-index:3005;} /* above the legacy .modal-backdrop (z 3000 in furfam.css) that Bootstrap 5.0.2 reuses for the offcanvas */
body.design-2026 #offcanvasCart .ff-drawer-head{padding:1rem 1.25rem;margin:0;background:#fff;border:0;border-bottom:1px solid var(--ff-line);text-align:left;}
body.design-2026 #offcanvasCart .ff-drawer-head .offcanvas-title{font-family:var(--ff-font);font-weight:800;font-size:1.35rem;color:var(--ff-navy);display:flex;align-items:center;gap:.5rem;width:auto;text-align:left;}
body.design-2026 #offcanvasCart .ff-drawer-body{padding:1rem 1.25rem;overflow-y:auto;background:#fff;}
/* Legacy empty-cart pseudo-elements ('Your cart is empty', the 200px heart, the pet image) and the hidden footer */
body.design-2026 #offcanvasCart.empty-cart::after, body.design-2026 #offcanvasCart.empty-cart .offcanvas-body::before, body.design-2026 #offcanvasCart.empty-cart .offcanvas-body::after{content:none;display:none;}
body.design-2026 #offcanvasCart.empty-cart .offcanvas-footer{display:block;}
body.design-2026 .ff-guarantee{display:flex;gap:.75rem;align-items:flex-start;background:var(--ff-green-soft);border-radius:var(--ff-radius-sm);padding:.75rem .9rem;font-size:.9rem;color:var(--ff-ink);margin:0 0 1rem;}
body.design-2026 .ff-guarantee i{color:var(--ff-green-dark);font-size:1.4rem;margin-top:.1rem;}
body.design-2026 .ff-guarantee b{display:block;color:var(--ff-green-dark);font-weight:800;}
body.design-2026 .ff-cart-items{margin:0;padding:0;}
body.design-2026 #shopping-cart li.order.ff-cart-item{display:grid;grid-template-columns:40% 1fr;gap:1rem;margin:0;padding:1rem 0;border-bottom:1px solid var(--ff-line);}
body.design-2026 .ff-cart-image{display:block;position:relative;border-radius:var(--ff-radius-sm);overflow:hidden;background:var(--ff-cool);}
body.design-2026 #shopping-cart li.order a.order-image.ff-cart-image{border-radius:var(--ff-radius-sm);background:var(--ff-cool);}
body.design-2026 .ff-cart-image img.order-image{display:block;width:100%;height:auto;}
body.design-2026 .ff-cart-title{display:block;font-weight:800;font-size:1.05rem;line-height:1.2;color:var(--ff-navy);text-decoration:none;margin:0 0 .25rem;}
body.design-2026 .ff-cart-options{margin:0 0 .5rem;font-size:.85rem;color:var(--ff-muted);}
body.design-2026 #shopping-cart .order ul.view-product_options.ff-cart-options{display:block;margin:0 0 .5rem;}
body.design-2026 .ff-cart-options li{margin-right:.5rem;}
body.design-2026 #shopping-cart .ff-cart-options li.template-copy{display:inline-block;margin:0 .5rem 0 0;}
body.design-2026 #shopping-cart .ff-cart-options li.template-copy::after{content:none;}
body.design-2026 #shopping-cart .ff-cart-options li:not(.template):not(:last-child)::after{content:"\2022";display:inline;margin-left:.5rem;color:var(--ff-line);}   /* Baby 30x40 (bullet) Spotlight (bullet) Sage */
body.design-2026 .ff-cart-price{font-weight:800;font-size:1.25rem;color:var(--ff-navy);}
body.design-2026 #shopping-cart li.order div.price.ff-cart-price{font-weight:800;font-size:1.25rem;color:var(--ff-navy);margin:0;text-align:left;}
body.design-2026 .ff-cart-price .cents{font-size:.7em;vertical-align:top;}
/* The cart loader sends price/subtotal as bare integers; legacy furfam.css adds the "$" with ::before and is not loaded on the new pages. */
body.design-2026 .ff-cart-price::before, body.design-2026 #shopping-cart li.order div.price.ff-cart-price::before{content:"$";}
body.design-2026 #shopping-cart-subtotal.ff-total-row span.subtotal::before, body.design-2026 #shopping-cart-subtotal.ff-total-row span.non-discount-subtotal:not(:empty)::before{content:"$";}
body.design-2026 #shopping-cart li.order div.price.ff-cart-price span.cents{display:inline;font-size:.6em;vertical-align:top;opacity:0.5;}
body.design-2026 .ff-cart-qty-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:.6rem;}
body.design-2026 #shopping-cart div.quantity.ff-cart-qty-row{display:flex;margin:.6rem 0 0;min-width:0;width:100%;}
body.design-2026 .ff-qty{display:inline-flex;align-items:stretch;border:1.5px solid var(--ff-line);border-radius:var(--ff-radius-sm);overflow:hidden;}
body.design-2026 .ff-qty-step{width:40px;border:0;background:#fff;color:var(--ff-navy);font-size:.85rem;cursor:pointer;}
body.design-2026 .ff-qty-step:hover{background:var(--ff-cool);}
body.design-2026 .ff-qty-select select{border:0;border-left:1.5px solid var(--ff-line);border-right:1.5px solid var(--ff-line);border-radius:0;width:56px;height:40px;text-align:center;font-weight:700;appearance:none;-webkit-appearance:none;background:#fff;padding:0;}
body.design-2026 #shopping-cart div.quantity div.select-container.ff-qty-select{display:block;width:auto;margin:0;}
body.design-2026 #shopping-cart div.quantity div.select-container.ff-qty-select::after{content:none;}
body.design-2026 #shopping-cart .ff-qty-select select.select-element{box-shadow:none;font-size:inherit;color:var(--ff-ink);padding:0;width:56px;border-radius:0;}
body.design-2026 .ff-cart-delete{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--ff-line);border-radius:var(--ff-radius-sm);color:var(--ff-muted);}
body.design-2026 #shopping-cart div.quantity a.delete-order.ff-cart-delete{width:40px;height:40px;line-height:normal;margin:0;display:inline-flex;vertical-align:middle;border:1.5px solid var(--ff-line);border-radius:var(--ff-radius-sm);color:var(--ff-muted);background:none;}
body.design-2026 .ff-cart-delete:hover, body.design-2026 #shopping-cart div.quantity a.delete-order.ff-cart-delete:hover{color:#B91C1C;border-color:#B91C1C;background:none;}
body.design-2026 .admin-cart-image-iframe{display:none;}
body.design-2026 #shopping-cart li.order.ff-cart-item:last-child{border-bottom:0;}   /* the drawer foot's border-top is the line under the last item */
/* Quantity-discount card (#cart-savings-tracker): emoji + headline + second line, written by furfam.js updateSavingsBar()
   from the server's numbers (DS_Cart::quantity_discount_tiers(): 2 blankets 10%, 3+ 15%). Three looks: no discount yet =
   warm nudge; .tier-1 / .tier-2 = green "you're saving". With no headline (no server numbers) it is just the tier sentence. */
body.design-2026 .ff-savings{display:flex;align-items:center;gap:.75rem;margin:.75rem 0 0;padding:.7rem .9rem;border-radius:var(--ff-radius-sm);background:var(--ff-terracotta-soft);color:var(--ff-navy);line-height:1.3;}
body.design-2026 .ff-savings-emoji{flex:none;width:42px;height:42px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:1.35rem;}
body.design-2026 .ff-savings-copy{min-width:0;display:flex;flex-direction:column;gap:.1rem;}
body.design-2026 .ff-savings-copy b{font-weight:800;font-size:1.05rem;}
body.design-2026 .ff-savings-copy b:empty{display:none;}
body.design-2026 .ff-savings-copy span{font-size:.85rem;color:var(--ff-muted);}
body.design-2026 .ff-savings-copy b:empty + span{font-size:.9rem;color:var(--ff-navy);}
body.design-2026 .ff-savings.tier-1, body.design-2026 .ff-savings.tier-2{background:var(--ff-green-soft);}
body.design-2026 .ff-savings.tier-1 .ff-savings-copy b, body.design-2026 .ff-savings.tier-2 .ff-savings-copy b{color:var(--ff-green-dark);font-size:1.2rem;}
body.design-2026 .ff-savings.tier-1 .ff-savings-copy span{color:var(--ff-navy);font-weight:600;}   /* the "add 1 more" line is the upsell: make it read */
body.design-2026 .ff-cart-items[data-count="0"] ~ .ff-savings, body.design-2026 .ff-cart-items[data-count=""] ~ .ff-savings, body.design-2026 .ff-cart-items[data-count="{count}"] ~ .ff-savings{display:none;}
/* Cart is loading (furfam.js puts loading-cart on <body> for add / remove / quantity; adding-to-cart only while an
   item is being added): sweep under the drawer head, contents dimmed and locked, and a skeleton row for the new item. */
body.design-2026.loading-cart #offcanvasCart .ff-drawer-head{position:relative;overflow:hidden;}
body.design-2026.loading-cart #offcanvasCart .ff-drawer-head::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:35%;background:var(--ff-terracotta);border-radius:999px;animation:ff-sweep 1.2s linear infinite;}
body.design-2026.loading-cart #offcanvasCart .ff-drawer-body, body.design-2026.loading-cart #offcanvasCart .ff-drawer-foot{pointer-events:none;}
body.design-2026.loading-cart #offcanvasCart li.ff-cart-item, body.design-2026.loading-cart #offcanvasCart .ff-savings, body.design-2026.loading-cart #offcanvasCart .ff-total-row, body.design-2026.loading-cart #offcanvasCart a#checkout-button{opacity:.45;transition:opacity .2s;}
body.design-2026.loading-cart #offcanvasCart .ff-cart-empty{display:none!important;}
body.design-2026.adding-to-cart #offcanvasCart .ff-cart-items::before{content:"Adding to your cart\2026";display:flex;align-items:center;height:132px;margin:1rem 0 0;padding-left:calc(40% + 1rem);border-radius:var(--ff-radius-sm);font-weight:700;font-size:.95rem;color:var(--ff-muted);
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%) 0 0/200% 100% no-repeat, linear-gradient(var(--ff-cool),var(--ff-cool)) 0 0/40% 100% no-repeat;animation:ff-shimmer 1.4s linear infinite;}
@keyframes ff-shimmer{from{background-position:150% 0, 0 0}to{background-position:-50% 0, 0 0}}
body.design-2026 .ff-cart-empty{display:none;text-align:center;padding:2.5rem 0;color:var(--ff-muted);}
body.design-2026 .ff-cart-empty i{font-size:2.5rem;color:var(--ff-line);}
body.design-2026 .ff-cart-items[data-count="0"] + .ff-cart-empty, body.design-2026 .ff-cart-items[data-count=""] + .ff-cart-empty{display:block;}
body.design-2026 #offcanvasCart .ff-drawer-foot{padding:1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));border-top:1px solid var(--ff-line);background:#fff;}
/* Empty cart: no totals and no Stripe/PayPal buttons. furfam.js sets .empty-cart after each cart load; the :has() pair covers the same state straight from the markup. */
body.design-2026 #offcanvasCart.empty-cart .ff-drawer-foot{display:none;}
body.design-2026 #offcanvasCart:has(.ff-cart-items[data-count="0"]) .ff-drawer-foot, body.design-2026 #offcanvasCart:has(.ff-cart-items[data-count=""]) .ff-drawer-foot{display:none;}
body.design-2026 .ff-total-row{font-size:1rem;color:var(--ff-ink);margin:0 0 .35rem;}
body.design-2026 #shopping-cart-subtotal.ff-total-row, body.design-2026 #shopping-cart-shipping.ff-total-row{font-family:var(--ff-font);font-weight:400;font-size:1rem;line-height:inherit;color:var(--ff-ink);border:0;padding:0;margin:0 0 .35rem;}
body.design-2026 .ff-total-row .subtotal-container, body.design-2026 .ff-total-row .shipping{text-align:right;display:block;font-weight:800;font-size:1.25rem;color:var(--ff-navy);}
body.design-2026 #shopping-cart-subtotal.ff-total-row span.subtotal{display:inline;clear:none;font-size:inherit;vertical-align:baseline;}
body.design-2026 .ff-total-row .subtotal-container .cents{font-size:.7em;vertical-align:top;}
body.design-2026 #shopping-cart-subtotal.ff-total-row span.cents{display:inline;font-size:.6em;font-weight:inherit;vertical-align:top;opacity:0.7;}
body.design-2026 .ff-total-row .discount:empty{display:none;}
/* Coupon rows: furfam.js adds has-discount to #offcanvasCart when the cart has one; otherwise the spans hold "55.00" and "0". */
body.design-2026 #shopping-cart-subtotal .discount{display:none;}
body.design-2026 #offcanvasCart.has-discount #shopping-cart-subtotal .discount{display:inline;margin-right:.4rem;}
body.design-2026 #offcanvasCart.has-discount #shopping-cart-subtotal .discount-amount::before{content:"-$";}
body.design-2026 #offcanvasCart.has-discount #shopping-cart-subtotal .discount-amount{color:var(--ff-green-dark);font-weight:700;font-size:.9rem;}
body.design-2026 .ff-total-row .non-discount-subtotal:not(:empty){text-decoration:line-through;color:var(--ff-muted);font-weight:400;font-size:.9rem;margin-right:.4rem;}
body.design-2026 .free-shipping-badge{color:var(--ff-green-dark);font-weight:800;font-size:1rem;}
body.design-2026 #shopping-cart-shipping.ff-total-row span.shipping span.free-shipping-badge{background:none;color:var(--ff-green-dark);font-weight:800;font-size:1rem;height:auto;line-height:inherit;padding:0;border-radius:0;}
body.design-2026 .ff-arrival{background:var(--ff-cool);border-radius:var(--ff-radius-sm);padding:.6rem .75rem;font-size:.9rem;margin:.5rem 0 1rem;text-align:center;}
body.design-2026 #shopping-cart-shipping.ff-total-row div.shipping-estimate.ff-arrival{margin:.5rem 0 1rem;font-weight:400;}
body.design-2026 #shopping-cart-shipping.ff-total-row div.shipping-estimate.ff-arrival::before{content:none;}
body.design-2026 #offcanvasCart a#checkout-button{height:auto;min-height:56px;line-height:1.2;padding:.9rem 1.25rem;border-radius:var(--ff-radius);margin:0 0 .5rem;}
/* furfam.js adds .loading on click and the redirect to Stripe takes a second or two: label swaps for a spinner, no second click. */
body.design-2026 #offcanvasCart a#checkout-button.loading{font-size:0;gap:.6rem;pointer-events:none;background:var(--ff-green-dark);box-shadow:none;}
body.design-2026 #offcanvasCart a#checkout-button.loading::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;animation:ff-spin .8s linear infinite;}
body.design-2026 #offcanvasCart a#checkout-button.loading::after{content:"Opening secure checkout\2026";font-size:1.05rem;}
body.design-2026 .ff-or{display:flex;align-items:center;gap:.75rem;color:var(--ff-muted);font-size:.85rem;margin:.25rem 0;}
body.design-2026 .ff-or::before, body.design-2026 .ff-or::after{content:"";flex:1;height:1px;background:var(--ff-line);}
body.design-2026 #offcanvasCart div#paypal-button-container{border-radius:0;}
body.design-2026 #offcanvasCart div#paypal-button-container::before, body.design-2026 #offcanvasCart div#paypal-button-container::after{content:none;display:none;}
body.design-2026 #paypal-payment-error{color:#B91C1C;font-size:.85rem;}
body.design-2026 #paypal-payment-error:empty{display:none;}
@media (max-width:575.98px){
  body.design-2026 #offcanvasCart.ff-drawer{width:100vw;}
  body.design-2026 #offcanvasCart .ff-drawer-foot{position:sticky;bottom:0;}
}

/* ==== FOOTER (Task 6) ==== */
body.design-2026 .ff-footer{background:var(--ff-navy);color:#C9CFDA;padding:3.5rem 0 2rem;font-size:.95rem;}
body.design-2026 .ff-footer a{color:#fff;text-decoration:none;}
body.design-2026 .ff-footer a:hover{color:var(--ff-terracotta);}
body.design-2026 .ff-footer-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr 1.4fr;gap:2rem;}
body.design-2026 .ff-footer-logo{display:inline-flex;align-items:center;gap:.5rem;font-size:1.5rem;font-weight:800;color:#fff;margin-bottom:.75rem;}
body.design-2026 .ff-footer-social{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.25);border-radius:50%;font-size:1.1rem;}
body.design-2026 .ff-footer h6{color:#fff;font-weight:800;font-size:.95rem;margin:0 0 .9rem;letter-spacing:.02em;}
body.design-2026 .ff-footer ul{list-style:none;margin:0;padding:0;}
body.design-2026 .ff-footer li{margin:0 0 .5rem;}
body.design-2026 .ff-footer-news p{margin:0 0 .75rem;}
body.design-2026 .ff-footer-news small{display:block;margin-top:.5rem;font-size:.75rem;opacity:.8;}
body.design-2026 .ff-footer-news .quick_form_8_css{background:transparent!important;}
body.design-2026 .ff-footer-news .SIGNUP_FLD input[type="text"]{border-radius:8px!important;height:44px!important;}
body.design-2026 .ff-footer-news .SIGNUP_FLD input[type="button"]{border-radius:8px!important;height:44px!important;background:var(--ff-terracotta)!important;color:#fff!important;font-weight:700!important;}
body.design-2026 .ff-footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem;border-top:1px solid rgba(255,255,255,.12);margin-top:2.5rem;padding-top:1.25rem;font-size:.85rem;}
body.design-2026 .ff-footer-bottom nav{display:flex;gap:1.25rem;}
@media (max-width:991.98px){body.design-2026 .ff-footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:575.98px){body.design-2026 .ff-footer-grid{grid-template-columns:1fr;gap:1.75rem;}}

/* ==== HOME (Task 7) ==== */
/* Hero: the photo is a full-bleed background layer (as on the previous home page); the copy column sits on a
   cream scrim that fades out to the right so the blanket stays vivid. */
.ff-hero{position:relative;min-height:600px;padding:2.5rem 0 3rem;overflow:hidden;background:var(--ff-cream);display:flex;align-items:center;}
/* The layer is the photo's own box (hero height x 1088:608), pinned to the right, so the photo is never cropped
   or blown up on wide screens; its left edge is masked to fade into the cream, and the scrim tints what the copy
   column overlaps on narrower desktops. */
.ff-hero-bg{position:absolute;top:0;bottom:0;right:0;left:auto;z-index:0;height:100%;max-width:100%;aspect-ratio:1088/608;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%);mask-image:linear-gradient(90deg,transparent 0%,#000 38%);}
.ff-hero-img{display:block;width:100%;height:100%;object-fit:cover;object-position:right center;}
.ff-hero-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(247,243,238,.9) 0%,rgba(247,243,238,.6) 22%,rgba(247,243,238,0) 48%);}
.ff-hero-inner{position:relative;z-index:2;width:100%;}
.ff-hero-copy{max-width:32rem;}
.ff-hero-h1 span{display:block;}
.ff-hero-h1 .ff-accent{color:var(--ff-terracotta);font-size:.66em;letter-spacing:-.01em;margin-top:.15em;}
.ff-hero-lede{font-size:1.2rem;color:var(--ff-muted);margin:1rem 0 1.5rem;max-width:34rem;}
.ff-hero-lede em{font-style:normal;color:var(--ff-ink);font-weight:600;}
.ff-hero-cta{font-size:1.25rem;}
.ff-badge-instant{position:absolute;top:3rem;right:13%;z-index:3;width:140px;height:140px;border-radius:50%;background:var(--ff-terracotta);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font:800 1rem/1.05 var(--ff-font);text-transform:uppercase;letter-spacing:.04em;transform:rotate(8deg);box-shadow:0 8px 20px rgba(232,115,74,.4);}
.ff-badge-instant i{margin-top:.3rem;font-size:1.25rem;}
.ff-hero-thumb{position:absolute;right:13%;bottom:3rem;z-index:3;width:150px;height:150px;background:#fff;padding:5px;border-radius:10px;box-shadow:var(--ff-shadow);transform:rotate(-6deg);}
.ff-hero-thumb img{display:block;width:100%;height:100%;object-fit:cover;border-radius:6px;}
.ff-hero-thumb i{position:absolute;left:-2rem;top:.75rem;font-size:2rem;color:#fff;transform:rotate(-45deg);text-shadow:0 1px 3px rgba(0,0,0,.35);}

/* Upload zone (hooks unchanged; visuals new) */
.ff-drop{display:block;margin-top:1.5rem;border:2px dashed var(--ff-terracotta);border-radius:var(--ff-radius);background:var(--ff-terracotta-soft);padding:1rem 1.1rem;cursor:pointer;transition:background .15s;}
.ff-drop:hover, .ff-drop.drag-over{background:#FFE7DD;}
.ff-drop .home-drop-zone-text{display:flex;align-items:center;gap:.9rem;}
.ff-drop .drop-zone-icon{flex:none;width:52px;height:52px;border-radius:50%;background:var(--ff-terracotta);color:#fff;display:grid;place-items:center;font-size:1.4rem;}
.ff-drop .home-drop-zone-line-1{display:block;font-weight:800;color:var(--ff-navy);font-size:1.05rem;}
.ff-drop .home-drop-zone-line-2{display:block;color:var(--ff-terracotta-dark);font-weight:600;font-size:.9rem;}
.ff-drop .home-drop-zone-line-3{display:block;color:var(--ff-muted);font-size:.8rem;}
.ff-drop .home-drop-zone-progress{display:block;position:relative;height:12px;border-radius:999px;background:#fff;overflow:hidden;}
.ff-drop .home-drop-zone-progress::before{content:"";position:absolute;inset:0;width:0;background:var(--ff-terracotta);animation:ff-fill 21s linear forwards;}
.ff-drop .home-drop-zone-progress .progress-label{display:block;margin-top:1rem;font-size:.85rem;color:var(--ff-muted);text-align:center;}
@keyframes ff-fill{to{width:96%;}}
.home-drop-zone-error{margin-top:.5rem;color:#B91C1C;font-size:.9rem;}
.home-name-step{margin-top:1rem;background:#fff;border:1px solid var(--ff-line);border-radius:var(--ff-radius);padding:1rem;}
.home-name-step-title{font-size:1.25rem;margin:0 0 .75rem;}
.home-name-step-input{width:100%;height:52px;border:1.5px solid var(--ff-line);border-radius:var(--ff-radius-sm);padding:0 1rem;font:600 1.1rem var(--ff-font);margin-bottom:.75rem;}
.home-name-step-progress{position:relative;height:10px;border-radius:999px;background:var(--ff-cool);overflow:hidden;margin-bottom:.75rem;}
.home-name-step-progress-bar{position:absolute;inset:0;width:0;background:var(--ff-terracotta);transition:width .5s;}
.home-name-step-progress-label{font-size:.8rem;color:var(--ff-muted);margin-top:.9rem;}
.home-name-step-button[disabled]{opacity:.5;}
.home-hero-content:not(.moderation-pending) .home-name-step-progress{display:none;}   /* track only while the photo is being checked, as before */
/* State classes furfam.js sets on .home-hero-content (showHomeNameStep / handleHomeModerationFailure):
   the revealed name step replaces the drop zone, and the 21 s bar runs while moderation is pending. */
.home-hero-content.show-name-step .home-drop-zone, .home-hero-content.show-name-step .home-drop-zone-error{display:none;}
.home-hero-content.moderation-pending .home-name-step-progress-bar{animation:ff-fill 21s linear forwards;}

/* Make it yours */
.ff-make-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.ff-make-card{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--ff-line);border-radius:var(--ff-radius);overflow:hidden;transition:transform .15s, box-shadow .15s;}
.ff-make-card:hover{transform:translateY(-3px);box-shadow:var(--ff-shadow);}
.ff-make-card img{display:block;width:100%;aspect-ratio:1;object-fit:cover;}
.ff-make-card h3{margin:1rem 1.1rem .35rem;}
.ff-make-card p{margin:0 1.1rem 1.1rem;color:var(--ff-muted);font-size:.95rem;}

/* How it works (shared with the order page) */
.ff-steps-section{background:var(--ff-cool);}
.ff-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;counter-reset:step;}
.ff-step{position:relative;background:#fff;border-radius:var(--ff-radius);padding:1.1rem;text-align:center;}
.ff-step img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--ff-radius-sm);}
.ff-step-n{position:absolute;top:.6rem;left:.6rem;width:40px;height:40px;border-radius:50%;background:var(--ff-terracotta);color:#fff;font:800 1.1rem/40px var(--ff-font);}
.ff-step h3{margin:1rem 0 .2rem;}
.ff-step-kicker{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ff-muted);margin:0 0 .6rem;}
.ff-step p{font-size:.95rem;color:var(--ff-ink);margin:0;}

/* Reviews carousel (Flickity options live in furfam.js) */
.ff-reviews{overflow:hidden;}   /* the viewport below is overflow:visible so neighbouring cards peek; clip at the section so they never widen the page */
.ff-review-carousel .flickity-viewport{overflow:visible;}
.ff-review-card{width:calc(50% - .75rem);margin-right:1.5rem;display:flex;gap:1rem;background:#fff;border:1px solid var(--ff-line);border-radius:var(--ff-radius);padding:1.1rem;}
.ff-review-photo{flex:none;width:112px;}
body.design-2026 .ff-review-photo img{width:112px;height:112px;object-fit:cover;object-position:center top;border-radius:var(--ff-radius-sm);}
.ff-review-body .stars{color:var(--ff-gold);margin-bottom:.4rem;}
.ff-review-quote{font-size:1.05rem;font-weight:600;color:var(--ff-navy);margin:0 0 .5rem;}
.ff-review-name{font-size:.9rem;color:var(--ff-muted);margin:0;}
.ff-review-carousel .flickity-page-dots{bottom:-2rem;}
.ff-review-carousel .flickity-page-dots .dot.is-selected{background:var(--ff-terracotta);}
.ff-review-carousel .flickity-prev-next-button{background:#fff;box-shadow:var(--ff-shadow);}

/* Final CTA band */
.ff-cta-band{background:var(--ff-terracotta);color:#fff;text-align:center;padding:3.5rem 0;}
section.ff-cta-band h2{color:#fff;}
.ff-cta-band > .container > p{color:#fff;opacity:.95;margin:.5rem 0 1.25rem;}
.ff-cta-band-btn{max-width:28rem;margin:0 auto;background:#fff;color:var(--ff-terracotta-dark);box-shadow:0 6px 18px rgba(0,0,0,.15);}
.ff-cta-band-btn:hover{background:#fff;color:var(--ff-terracotta-dark);}
.ff-cta-band .ff-note, .ff-cta-band .ff-note strong{color:#fff;}
.ff-cta-guarantee{margin:1.25rem 0 0;font-weight:600;}

@media (max-width:991.98px){
  /* The background layer becomes an edge-to-edge band above the copy (photo first, as before). */
  .ff-hero{display:block;min-height:0;padding:0 0 2rem;}
  .ff-hero-bg{position:relative;inset:auto;height:auto;width:100%;aspect-ratio:1088/608;-webkit-mask-image:none;mask-image:none;}
  .ff-hero-scrim{display:none;}
  .ff-hero-inner{padding-top:1.5rem;}
  .ff-hero-copy{max-width:none;}
  .ff-badge-instant{top:.75rem;right:.75rem;width:116px;height:116px;font-size:.85rem;}
  .ff-hero-thumb{right:1rem;bottom:-1.25rem;width:110px;height:110px;}
  .ff-make-grid, .ff-steps{grid-template-columns:1fr;}
  .ff-review-card{width:100%;margin-right:1rem;}
}
@media (max-width:575.98px){
  .ff-badge-instant{width:88px;height:88px;font-size:.68rem;top:.5rem;right:.5rem;}
  .ff-hero-thumb{width:72px;height:72px;bottom:-.75rem;}
  .ff-review-card{flex-direction:column;}
  /* body.design-2026 prefix: has to outrank the 112px desktop rule above */
  .ff-review-photo, body.design-2026 .ff-review-photo img{width:100%;height:auto;aspect-ratio:1;}
}

/* ==== ORDER (Task 8) ==== */
.ff-order-grid{display:grid;grid-template-columns:58fr 42fr;gap:2.5rem;align-items:start;padding-top:1.5rem;padding-bottom:3rem;}
.ff-order-right{position:sticky;top:calc(var(--ff-nav-h) + 1rem);}

/* Gallery: keep Bootstrap's .row columns, restyle the rail + main image */
.ff-gallery{--bs-gutter-x:1rem;}
.ff-thumb-col .thumbnails-container{max-height:560px;overflow-y:auto;overflow-x:hidden;}
.ff-thumb-col .thumbnail-cell{border:2px solid transparent;border-radius:var(--ff-radius-sm);overflow:hidden;margin-bottom:.5rem;cursor:pointer;}
.ff-thumb-col .thumbnail-cell.is-selected, .ff-thumb-col .thumbnail-cell:hover{border-color:var(--ff-terracotta);}
.ff-main-col .gallery-wrapper{position:relative;}
.ff-main-col .product-image-container{border-radius:16px;overflow:hidden;background:var(--ff-cool);box-shadow:var(--ff-shadow);}
.ff-main-col .carousel-cell{width:100%;}
.ff-main-col .carousel-cell > div.image > img:not(.copyright){display:block;width:100%;height:auto;}   /* the gallery photo only, never the canvas images inside div.design-canvas */
.ff-badge-order{top:1rem;right:1rem;z-index:5;}
form#order-info.has-pets .ff-badge-order{display:none;}   /* only over the sample blankets; the manager adds has-pets once the visitor's pet is in the mockup */
.ff-gallery .flickity-prev-next-button{background:#fff;box-shadow:var(--ff-shadow);width:44px;height:44px;}

.ff-order-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;list-style:none;margin:1.5rem 0;padding:1rem 0;border-top:1px solid var(--ff-line);border-bottom:1px solid var(--ff-line);}
.ff-order-trust li{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:var(--ff-muted);}
.ff-order-trust i{font-size:1.4rem;color:var(--ff-navy);}
.ff-order-trust b{display:block;color:var(--ff-navy);}

/* Reviews block */
.ff-order-reviews{background:var(--ff-cool);border-radius:16px;padding:1.5rem;margin:1.5rem 0;}
.ff-reviews-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.25rem;}
.ff-reviews-head h2{font-size:1.75rem;margin:0 0 .25rem;}
.ff-reviews-head p{margin:0;color:var(--ff-muted);}
.ff-reviews-head .view-all-reviews-container{width:auto;}
.ff-reviews-head .view-all-reviews-btn{width:auto;min-height:44px;font-size:.95rem;padding:.5rem 1rem;}
.ff-review-list .no-reviews, .ff-review-list .similar-designs{display:none;}
.ff-review-list.total-reviews-0 .total-rating{display:none;}
.ff-review-list.total-reviews-0.showing-related-reviews-1 .similar-designs{display:block;}
.ff-review-list.total-reviews-0.showing-related-reviews- .no-reviews{display:block;}
.ff-review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;}
.ff-review-item{background:#fff;border-radius:var(--ff-radius);padding:1rem;}
.ff-review-item:nth-child(n+4){display:none;}          /* first three; "View all" opens the modal */
.ff-review-item-img{width:100%;aspect-ratio:1;object-fit:cover;object-position:center top;border-radius:var(--ff-radius-sm);cursor:zoom-in;}
.ff-review-item-head{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;margin:.75rem 0 .5rem;}   /* stars on one line, name + date on the next: three cards abreast are too narrow for a side-by-side row */
.ff-review-item-head .stars{color:var(--ff-gold);white-space:nowrap;}
.ff-review-item-who{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem;font-size:.85rem;}
.ff-review-item-text{font-size:.95rem;color:var(--ff-ink);margin:0;}
.ff-review-item .related-review-link{display:none;font-size:.8rem;color:var(--ff-muted);margin:.5rem 0 0;}
.ff-review-list.showing-related-reviews-1 .related-review-link{display:block;}

.ff-promise{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;background:var(--ff-terracotta-soft);border-radius:16px;padding:1.5rem;}
.ff-promise > div{display:flex;gap:.9rem;align-items:flex-start;font-size:.95rem;}
.ff-promise i{font-size:2rem;color:var(--ff-terracotta);}
.ff-promise b{display:block;font-size:1.1rem;color:var(--ff-navy);margin-bottom:.15rem;}

/* Right column */
.ff-product-info .ff-pill{margin-bottom:.75rem;}
.ff-order-title{font-size:clamp(2rem, 3.4vw, 2.75rem);margin:0 0 .5rem;}
.ff-order-headline{font-size:1.1rem;color:var(--ff-muted);margin:0 0 1rem;}
.ff-order-meta{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.25rem;}   /* price first (left), rating right */
#product-rating .review-stars{color:var(--ff-gold);font-size:1rem;}
#product-rating .ff-rating-num{color:var(--ff-navy);font-weight:800;margin-left:.25rem;}
#product-rating .total-reviews{color:var(--ff-muted);font-weight:400;}
#product-rating:not(.total-reviews-1) .total-reviews::after{content:"s";}
#product-rating .no-reviews{display:none;}
#product-rating.total-reviews-0 .review-stars{display:none;}
#product-rating.total-reviews-0 .no-reviews{display:block;}
.ff-order-pricebox{text-align:left;}
.ff-order-price{font-size:2.25rem;font-weight:800;margin:0;line-height:1;}
.ff-order-price::before, #add-to-cart .item-price::before{content:"$";}   /* the loader sends bare integers; legacy furfam.css added the sign the same way */
.ff-order-ship{display:block;color:var(--ff-terracotta-dark);font-weight:800;font-size:.8rem;letter-spacing:.06em;}
.ff-share{display:none;}   /* parked 2026-09-16: bring it back beneath the gallery with working share before the flip */

/* Saved-pet gallery (div#pet-gallery, rendered by class.pet_photo_upload_manager.js renderUI/createPetRow into the
   form; the legacy rules live in furfam.css 1512-1760, which the redesign pages do not load). Compact tiles. */
form#order-info:not(.has-pets) div#pet-gallery{display:none;}
div#pet-gallery{margin-left:2.5rem;}   /* lines up with the step labels and fields (.product-option padding-left) */
div#pet-gallery .pet-list-container{background:#fff;border:1.5px solid var(--ff-line);border-radius:var(--ff-radius-sm);padding:.9rem 1rem;margin:0 0 1.25rem;}
div#pet-gallery .pet-list-header{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.6rem;}
div#pet-gallery .pet-list-title{font-weight:800;color:var(--ff-navy);}
div#pet-gallery .pet-cancel-btn, div#pet-gallery .pet-add-btn{border:1.5px solid var(--ff-line);background:#fff;color:var(--ff-navy);border-radius:999px;padding:.35rem .85rem;font:600 .85rem/1.2 var(--ff-font);cursor:pointer;}
div#pet-gallery .pet-cancel-btn:hover, div#pet-gallery .pet-add-btn:hover{border-color:var(--ff-navy);}
/* Add New = the form's secondary action: navy outline pill with a terracotta plus; fills navy on hover. */
div#pet-gallery .pet-add-btn{margin-top:.75rem;display:inline-flex;align-items:center;gap:.5rem;min-height:40px;padding:.45rem 1.1rem .45rem .5rem;border:1.5px solid var(--ff-navy);color:var(--ff-navy);font-weight:800;font-size:.9rem;transition:background .15s, color .15s;}
div#pet-gallery .pet-add-btn i{flex:none;width:26px;height:26px;border-radius:50%;background:var(--ff-terracotta);color:#fff;display:grid;place-items:center;font-size:.8rem;}
div#pet-gallery .pet-add-btn:hover{background:var(--ff-navy);color:#fff;}
div#pet-gallery .pet-cancel-btn{display:none;}   /* #cancel-add-pet (the pill on the Pet Name step) is the one Cancel; legacy hides this one too */
div#pet-gallery .pet-list{display:flex;flex-wrap:wrap;gap:.6rem;}
div#pet-gallery .pet-row{position:relative;display:flex;flex-direction:column;align-items:center;gap:.3rem;width:96px;padding:.6rem .3rem .5rem;border:1.5px solid var(--ff-line);border-radius:var(--ff-radius-sm);background:#fff;cursor:pointer;transition:border-color .15s, box-shadow .15s;}
div#pet-gallery .pet-row:hover{border-color:var(--ff-navy);}
div#pet-gallery .pet-row.selected{border-color:var(--ff-navy);box-shadow:inset 0 0 0 1px var(--ff-navy);}
div#pet-gallery .pet-row.dimmed{opacity:.5;pointer-events:none;}
div#pet-gallery .pet-row-thumbnail{width:64px;height:64px;border-radius:50%;overflow:hidden;background:var(--ff-cool);flex:none;}
div#pet-gallery .pet-row-thumbnail img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;}
div#pet-gallery .pet-row-info{min-width:0;width:100%;text-align:center;}
div#pet-gallery .pet-row-name{display:block;font-weight:700;font-size:.85rem;color:var(--ff-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
div#pet-gallery .pet-row-status{display:block;font-size:.7rem;color:var(--ff-muted);}
div#pet-gallery .pet-row.selected .pet-row-status{color:var(--ff-green-dark);}
div#pet-gallery .pet-row-delete{position:absolute;top:-.45rem;right:-.45rem;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--ff-line);background:#fff;color:var(--ff-muted);font-size:.7rem;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
div#pet-gallery .pet-row-delete:hover{color:#B91C1C;border-color:#B91C1C;}
form#order-info.mode-add div#pet-gallery .pet-list-container{pointer-events:none;opacity:.75;filter:grayscale(1);}

/* Configurator card with numbered steps (counter = CSS, no JS) */
.ff-steps-form{background:var(--ff-cool);border-radius:16px;padding:1.25rem;counter-reset:ffstep;}
.ff-steps-form .product-option{position:relative;padding:0 0 1.25rem 2.5rem;}
.ff-steps-form .product-option::before{counter-increment:ffstep;content:counter(ffstep);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--ff-navy);color:#fff;font:800 .9rem/30px var(--ff-font);text-align:center;}
.ff-steps-form .product-option > .label{display:block;font-weight:800;color:var(--ff-navy);margin:0 0 .6rem;line-height:30px;}
.ff-steps-form .product-option > .value{display:none;}
.ff-steps-form .view-options{display:flex;flex-wrap:wrap;gap:.6rem;}
/* Quantity always starts at 1 and is changed in the drawer; the hidden select still submits its value. */
.ff-steps-form .product-option.type-quantity_select{display:none;}
/* generic option chip: size, background, design, font */
.ff-steps-form a.btn-option{flex:1 1 30%;min-width:90px;display:flex;flex-direction:column;justify-content:center;text-align:center;border:1.5px solid var(--ff-line);border-radius:var(--ff-radius-sm)!important;background:#fff;color:var(--ff-navy);padding:.7rem .5rem;font:600 .95rem/1.2 var(--ff-font);text-decoration:none;transition:border-color .15s, box-shadow .15s;}
.ff-steps-form a.btn-option:hover{border-color:var(--ff-navy);}
.ff-steps-form a.btn-option.active, .ff-steps-form a.btn-option.selected{border-color:var(--ff-navy);box-shadow:inset 0 0 0 1px var(--ff-navy);font-weight:800;}
.ff-steps-form a.btn-option[data-price]:not([data-price=""])::after{content:"$" attr(data-price);display:block;color:var(--ff-muted);font-weight:400;font-size:.85rem;margin-top:.15rem;}
/* furfam.js appends <span class="price"> to these buttons in admin cache mode (the legacy design styles it), so a cached
   section carries it. The line above already prints the price from data-price: hide the span or it shows twice. */
.ff-steps-form a.btn-option span.price{display:none;}
/* background style tiles */
.ff-steps-form .type-style_select a.btn-option{padding:.4rem .4rem .6rem;}
.ff-steps-form .type-style_select a.btn-option img.stylized-image{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;margin-bottom:.4rem;background:var(--ff-line);}
/* color dots */
.ff-steps-form .type-color_select .view-options, .ff-steps-form .type-product_color_select .view-options{gap:.75rem;}
.ff-steps-form a.color-button, .ff-steps-form a.product-color-button{width:44px;height:44px;border-radius:50%;padding:3px;border:2px solid transparent;display:block;}
.ff-steps-form a.color-button.active, .ff-steps-form a.color-button.selected, .ff-steps-form a.product-color-button.active{border-color:var(--ff-navy);}
.ff-steps-form a.color-button span.swatch, .ff-steps-form a.product-color-button span.swatch{display:block;width:100%;height:100%;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);}
/* font samples: the manager sets --name-image-modern / --name-image-classic on section#order-page-2 */
.ff-steps-form a.text-style-button{min-height:74px;display:flex;flex-direction:column;justify-content:flex-end;gap:.35rem;}
.ff-steps-form a.text-style-button::before{content:"";display:block;height:34px;background:center/contain no-repeat;}
.ff-steps-form a.text-style-button.style-modern::before{background-image:var(--name-image-modern);}
.ff-steps-form a.text-style-button.style-classic::before{background-image:var(--name-image-classic);}
.ff-steps-form a.text-style-button.style-signature::before{background-image:var(--name-image-signature);}
.ff-steps-form a.text-style-button.style-no-name::before{content:"\f05e";font:400 1.4rem/34px "Font Awesome 7 Pro";color:var(--ff-muted);}
/* pet name */
.ff-steps-form .type-text{position:relative;}
.ff-steps-form .type-text input.option{height:56px;border:1.5px solid var(--ff-line);border-radius:var(--ff-radius-sm);font:600 1.1rem var(--ff-font);padding:0 1rem;}
.ff-steps-form .type-text label{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;padding:0;}   /* the numbered step title is the visible label */
.ff-steps-form #edit-photos-btn{display:none!important;}   /* the manager injects it; live hides it too (section.pet-list-style) */
/* Cancel (add-another-pet mode): a floating pill on the step's title row, as in the legacy design. The manager
   inserts it into .product-option-pets-name (position:relative) and toggles its inline display. */
.ff-steps-form #cancel-add-pet{position:absolute;top:0;right:0;height:30px;padding:0 .95rem;border:0;border-radius:999px;background:var(--ff-terracotta);color:#fff;font:700 .8rem/30px var(--ff-font);box-shadow:0 2px 8px rgba(27,34,51,.18);cursor:pointer;transition:background .15s;}
.ff-steps-form #cancel-add-pet:hover{background:var(--ff-terracotta-dark);}
.ff-steps-form .edit-details{display:none;position:absolute;right:.75rem;top:1rem;font-size:.8rem;}
/* Once the design is complete the form stays simple: no "Edit details" / "Make changes" (the saved-pet gallery's
   Add New starts a new pet), and the photo step folds away with them (the manager takes the form out of
   status-complete when a new pet is added, so the step comes back). */
form#order-info.status-complete .ff-steps-form .edit-details{display:none;}
form#order-info.status-complete .ff-steps-form .product-option.type-upload_photos{display:none;}
/* Once the photo is on its way the name is settled: the step folds away (it comes back on status-error and
   when a new pet is added). display:none also takes it out of the step counter, so the photo step renumbers. */
form#order-info.status-uploading .ff-steps-form .product-option-pets-name, form#order-info.status-pregenerating .ff-steps-form .product-option-pets-name, form#order-info.status-generating .ff-steps-form .product-option-pets-name, form#order-info.status-complete .ff-steps-form .product-option-pets-name{display:none;}
/* upload zone (hooks unchanged) */
.ff-steps-form .ff-drop{margin-top:0;}
.ff-steps-form .ff-drop .drop-zone-text{display:flex;align-items:center;gap:.9rem;}
.ff-steps-form .ff-drop .drop-zone-icon{flex:none;width:52px;height:52px;border-radius:50%;background:var(--ff-terracotta);color:#fff;display:grid;place-items:center;font-size:1.4rem;}
.ff-steps-form .ff-drop .drop-zone-line-1{display:block;font-weight:800;color:var(--ff-navy);font-size:1.05rem;}
.ff-steps-form .ff-drop .drop-zone-line-2{display:block;color:var(--ff-terracotta-dark);font-weight:600;font-size:.9rem;}
.ff-steps-form .ff-drop .drop-zone-line-3{display:block;color:var(--ff-muted);font-size:.8rem;}
.ff-steps-form .ff-drop .desktop{display:none;}
@media (hover:hover){.ff-steps-form .ff-drop .desktop{display:inline;}}
form#order-info:not(.no-photo) .ff-steps-form .ff-drop{display:none;}
/* Reading / resizing the chosen photo (the manager sets .processing until renderUI swaps in the thumbnail; a HEIC
   conversion can take a few seconds): same box, spinner instead of the prompt. */
.ff-steps-form .ff-drop.processing{display:flex;align-items:center;justify-content:center;gap:.75rem;min-height:102px;pointer-events:none;cursor:progress;}
.ff-steps-form .ff-drop.processing .drop-zone-text{display:none;}
.ff-steps-form .ff-drop.processing::before{content:"";flex:none;width:28px;height:28px;border-radius:50%;border:3px solid #fff;border-top-color:var(--ff-terracotta);animation:ff-spin .8s linear infinite;}
.ff-steps-form .ff-drop.processing::after{content:"Preparing your photo\2026";font-weight:800;color:var(--ff-navy);}
@keyframes ff-spin{to{transform:rotate(360deg)}}
#preview-area{margin:0;}
#preview-area:empty, #preview-area .active-upload-container:empty{display:none;}
/* chosen-photo tile (createPreviewItem / createModeratedPreview; !important beats the manager's legacy inline styles) */
#preview-area .active-upload-container{display:flex;flex-wrap:wrap;gap:.6rem;}
#preview-area .pet-photo-preview{position:relative;flex:none;width:96px;height:96px;margin:0!important;padding:3px;background:#fff;border:1.5px solid var(--ff-line);border-radius:var(--ff-radius-sm);}
#preview-area .pet-photo-preview img{display:block;width:100%;height:100%;max-width:none!important;max-height:none!important;object-fit:cover;border-radius:calc(var(--ff-radius-sm) - 4px)!important;}
#preview-area .pet-photo-preview img.undecodable{display:grid;place-items:center;background:var(--ff-cool);color:var(--ff-muted);font-size:.75rem;}
#preview-area .pet-photo-remove{position:absolute!important;top:-.45rem!important;right:-.45rem!important;width:26px;height:26px;padding:0;border-radius:50%!important;border:1.5px solid var(--ff-line)!important;background:#fff!important;color:var(--ff-muted);font:700 1rem/1 var(--ff-font);display:flex;align-items:center;justify-content:center;cursor:pointer;}
#preview-area .pet-photo-remove:hover{color:#B91C1C;border-color:#B91C1C!important;}
form#order-info.status-uploading #preview-area .pet-photo-remove, form#order-info.status-pregenerating #preview-area .pet-photo-remove, form#order-info.status-generating #preview-area .pet-photo-remove{display:none;}   /* nothing to remove mid-flight */
/* generate button and its states (classes set by the manager) */
#generate-preview-wrapper{margin-top:1rem;}
#generate-preview-wrapper .incomplete-message{display:none;font-size:.85rem;color:#B91C1C;text-align:center;margin-top:.5rem;}   /* sits under the button so showing it never moves the button */
form#order-info.generate-preview-incomplete #generate-preview-wrapper .incomplete-message{display:block;}
form#order-info.no-photo #generate-preview-wrapper .incomplete-message span::after{content:"Please add a photo of your pet first.";}
form#order-info.no-name:not(.no-photo) #generate-preview-wrapper .incomplete-message span::after{content:"Please add your pet\'s name.";}
#generate-preview-btn{font-size:1.2rem;}
#generate-preview-btn.is-disabled{background:#fff;color:var(--ff-muted);border:1.5px solid var(--ff-line);box-shadow:none;cursor:not-allowed;}
.ff-generate-note i{color:var(--ff-gold);}
form#order-info.status-uploading #generate-preview-wrapper, form#order-info.status-pregenerating #generate-preview-wrapper, form#order-info.status-generating #generate-preview-wrapper, form#order-info.status-complete #generate-preview-wrapper{display:none;}
/* status message + animated bar */
#design-status-message{position:relative;margin:1rem 0 0;}
#design-status-message > div{display:none;padding:.9rem 0;font-weight:700;color:var(--ff-navy);position:relative;z-index:2;}
#design-status-message .status-bar{display:none;position:absolute;inset:0;border-radius:var(--ff-radius-sm);background:#fff;border:1.5px solid var(--ff-line);overflow:hidden;z-index:1;padding:0;}
/* Classic filling bar (legacy progressAnimation: upload 17s linear, generating 25s ease-in; generating runs 40s
   here). The animation restarts whenever the form's status-* class changes; pregenerating (~.5s) sits empty. */
#design-status-message .status-bar .progress{position:absolute;left:0;top:0;bottom:0;width:0;height:auto;border-radius:0;background:var(--alert-progress);}   /* same green as the gallery's canvas bar */
/* The label pulses white <-> green over the bar: white reads on the green fill, green on the white track. */
form#order-info.status-uploading #design-status-message .uploading, form#order-info.status-pregenerating #design-status-message .generating, form#order-info.status-generating #design-status-message .generating{animation:ff-status-text 1.6s ease-in-out infinite alternate;}
@keyframes ff-status-text{from{color:#fff}to{color:var(--ff-green-dark)}}
form#order-info.status-uploading #design-status-message .status-bar .progress{animation:ff-progress 17s linear forwards;}
form#order-info.status-generating #design-status-message .status-bar .progress{animation:ff-progress 40s ease-in forwards;}
@keyframes ff-progress{from{width:0}to{width:100%}}
@keyframes ff-sweep{from{transform:translateX(-100%)}to{transform:translateX(300%)}}
form#order-info.status-uploading #design-status-message .status-bar, form#order-info.status-uploading #design-status-message .uploading,
form#order-info.status-pregenerating #design-status-message .status-bar, form#order-info.status-pregenerating #design-status-message .generating,
form#order-info.status-generating #design-status-message .status-bar, form#order-info.status-generating #design-status-message .generating,
form#order-info.status-error #design-status-message .error{display:block;}
form#order-info.status-error #design-status-message .error{color:#B91C1C;}
form#order-info.not-safe-alert #design-status-message .not-safe-alert{display:block;color:#B91C1C;}   /* the manager adds not-safe-alert to the form for 30s */
/* lock option groups while working (mirrors the legacy lock-after-generated rules) */
/* Not the upload group: it holds #design-status-message (and the mobile strip); opacity would create a stacking context and dim it. */
form#order-info.status-uploading .product-option.lock-after-generated-1:not(.type-upload_photos), form#order-info.status-pregenerating .product-option.lock-after-generated-1:not(.type-upload_photos), form#order-info.status-generating .product-option.lock-after-generated-1:not(.type-upload_photos){opacity:.5;pointer-events:none;}
form#order-info.status-complete .product-option.lock-after-generated-1 .view-options{pointer-events:none;opacity:.7;}
#change-design-button{display:none;margin-top:.75rem;min-height:48px;font-size:1rem;}
form#order-info.status-complete #change-design-button{display:none;}
/* add to cart */
#add-to-cart-container{position:relative;margin-top:1rem;}
#add-to-cart-container .incomplete-message{display:none;}
#add-to-cart{display:none;font-size:1.2rem;}
#add-to-cart .item-price{margin-left:.5rem;opacity:.9;}
#add-to-cart{flex-wrap:wrap;row-gap:0;}
#add-to-cart .item-description{flex-basis:100%;width:100%;text-align:center;font-size:.8rem;font-weight:400;opacity:.85;line-height:1.2;}   /* furfam.js appends the chosen size after the price */
form#order-info.status-complete #add-to-cart{display:inline-flex;}
form#order-info.status-complete #add-to-cart-container .incomplete-message{display:none;}
#mobile-preview{display:none;}
form#order-info:not(.status-complete) #mobile-preview{display:none!important;}   /* furfam.js clones the gallery cell into it with an inline display:block at <=576px; legacy kept it off-screen until the design was complete */
.ff-guarantee-line{font-size:.85rem;color:var(--ff-muted);margin:.75rem 0 1.25rem;text-align:center;}
/* accordions + payment */
.ff-accordion .accordion-item{border:0;border-top:1px solid var(--ff-line);background:transparent;}
.ff-accordion .accordion-button{background:transparent;font-weight:700;color:var(--ff-navy);padding:1rem 0;box-shadow:none;}
.ff-accordion .accordion-button:not(.collapsed){color:var(--ff-terracotta-dark);}
.ff-accordion .accordion-body{padding:0 0 1rem;color:var(--ff-ink);}
.ff-accordion .shipping-info{list-style:none;padding:0;margin:0;}
.ff-payment-methods{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:1rem 0 0;opacity:.8;}
body.design-2026 .ff-payment-methods img{height:24px;width:auto;}
#unstick-trigger{height:1px;}

@media (max-width:991.98px){
  .ff-order-grid{grid-template-columns:1fr;gap:1.5rem;padding-top:0;}
  .ff-order-right{position:static;}
  /* Spec §6.2 order: gallery, title + configurator, trust, reviews, promise, accordions. Both columns and the
     right column's two wrappers become display:contents so every block is a grid item; default order 0 keeps
     the title and configurator in source order. */
  .ff-order-left, .ff-order-right, #product-order-options, .ff-product-info{display:contents;}
  .ff-gallery{order:-1;} .ff-order-trust{order:1;} .ff-order-reviews{order:2;} .ff-promise{order:3;} .ff-accordion{order:4;} .ff-payment-methods{order:5;}
  .ff-thumb-col{display:none!important;}
  .ff-main-col{flex:0 0 100%;max-width:100%;}
  .ff-main-col .product-image-container{border-radius:0;box-shadow:none;margin:0 -12px;}
  .ff-order-trust, .ff-review-grid, .ff-promise{grid-template-columns:1fr;}
  .ff-review-item:nth-child(n+3){display:none;}
}
@media (max-width:575.98px){
  .ff-order-title{font-size:1.9rem;}
  .ff-steps-form{padding:1rem;border-radius:12px;}
  .ff-steps-form a.btn-option{flex-basis:45%;}
}

/* ==== ORDER MOBILE BAR (Task 9) ==== */
@media (max-width:576px){
  body.design-2026.page-order{padding-bottom:calc(var(--ff-bar-h) + 1rem + env(safe-area-inset-bottom));}

  /* One fixed strip; the three elements take turns (spec §6.2 table). */
  #generate-preview-wrapper, #design-status-message, #add-to-cart-container{
    position:fixed;left:0;right:0;bottom:0;z-index:1030;margin:0;   /* below Bootstrap's modal backdrop (1040) so open modals dim the strip */
    background:#fff;border-top:1px solid var(--ff-line);box-shadow:0 -6px 20px rgba(27,34,51,.12);
    padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
    display:flex;align-items:center;gap:.75rem;min-height:var(--ff-bar-h);
  }

  /* Left slot: price before a photo exists, paw afterwards. */
  /* {price} does not resolve inside the option-group template, so form#order-info carries data-price and paints it
     into the slot with a fixed pseudo-element; the wrapper's own ::before only reserves the space. */
  #generate-preview-wrapper::before{content:"";flex:none;width:3.25rem;}
  form#order-info.no-photo::before{content:attr(data-price);position:fixed;left:.9rem;bottom:calc(.6rem + env(safe-area-inset-bottom));z-index:1031;width:3.25rem;height:52px;font:800 1.15rem/52px var(--ff-font);color:var(--ff-navy);}
  form#order-info:not(.no-photo) #generate-preview-wrapper::before{content:"\f1b0";font:900 1.4rem/1 "Font Awesome 7 Pro";color:var(--ff-terracotta);}
  #design-status-message::before{content:"\f1b0";font:900 1.4rem/1 "Font Awesome 7 Pro";color:var(--ff-terracotta);flex:none;position:relative;z-index:3;}

  /* Right slot: the generate button, label swapped by form state. */
  #generate-preview-wrapper .incomplete-message, .ff-generate-note{display:none!important;}
  #generate-preview-btn{flex:1;min-height:52px;font-size:0;gap:0;}
  #generate-preview-btn::after{font-size:1.05rem;content:"Create My Design Now \2192";}
  form#order-info.no-photo #generate-preview-btn::after{content:"Upload a Photo to Continue";}
  form#order-info.no-name:not(.no-photo) #generate-preview-btn::after{content:"Add Your Pet's Name";}
  form#order-info.status-error #generate-preview-btn::after{content:"Try again";}

  /* Uploading / generating: the animated bar fills the right slot. */
  #design-status-message{display:none;}
  form#order-info.status-uploading #design-status-message, form#order-info.status-pregenerating #design-status-message, form#order-info.status-generating #design-status-message{display:flex;}
  #design-status-message > div{flex:1;text-align:center;padding:.9rem 0;}
  #design-status-message .status-bar{inset:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom)) 3.25rem;}

  /* Error: the strip shows the button again; the error line sits just above it. */
  form#order-info.status-error #generate-preview-wrapper{display:flex;}
  form#order-info.status-error #design-status-message{display:block;bottom:calc(var(--ff-bar-h) + env(safe-area-inset-bottom));min-height:0;padding:.5rem .9rem;background:#FEF2F2;border-top:0;box-shadow:none;}
  form#order-info.status-error #design-status-message::before{content:none;}
  form#order-info.status-error #design-status-message .status-bar{display:none;}
  form#order-info.status-error #design-status-message .error{padding:0;font-size:.9rem;}
  /* Not-safe alert (form.not-safe-alert, no status-* class): same treatment as the error line. */
  form#order-info.not-safe-alert #design-status-message{display:block;bottom:calc(var(--ff-bar-h) + env(safe-area-inset-bottom));min-height:0;padding:.5rem .9rem;background:#FEF2F2;border-top:0;box-shadow:none;}
  form#order-info.not-safe-alert #design-status-message::before{content:none;}
  form#order-info.not-safe-alert #design-status-message .status-bar{display:none;}
  form#order-info.not-safe-alert #design-status-message .not-safe-alert{padding:0;font-size:.9rem;}
  #add-to-cart .item-description{display:none;}

  /* Complete: the design thumbnail (JS clone) + Add to cart. */
  #add-to-cart-container{display:none!important;}   /* !important: the container keeps Bootstrap's .d-grid (display:grid!important) */
  form#order-info.status-complete #add-to-cart-container{display:flex!important;}
  #add-to-cart-container #mobile-preview{flex:none;width:52px;height:52px;border-radius:8px;overflow:hidden;background:var(--ff-cool);position:relative;}   /* containing block for the cloned canvas (furfam-mockup.css makes div.design absolute) */
  #add-to-cart-container #mobile-preview .image, #add-to-cart-container #mobile-preview img:not(.copyright){width:100%;height:100%;min-height:0;object-fit:cover;display:block;}
  #add-to-cart-container #add-to-cart{flex:1;min-height:52px;font-size:1.05rem;}
  #confetti-container{position:fixed;inset:0;pointer-events:none;}
  #change-design-button{width:100%;}
}

/* ==== MOCKUP PORT GLUE (Task 7b) ==== */
/* css/furfam-mockup.css (loaded before this file on home + order) carries the design-canvas rules verbatim
   from furfam.css; these are the few rules the new markup needs on top of it. Delete with that file. */
/* Thumbnail rail: the ported div.image.has-design-1 div.design is position:absolute (furfam.css 4051-4061), and
   the legacy rail rule that gave div.image its position:relative (3628-3639) was not ported because it also
   sized the 60px cells. */
.ff-thumb-col .thumbnail-cell div.image{position:relative;overflow:hidden;}
/* The colour caption belongs to the big carousel cell only; furfam.css 8588-8594 (ported) forces it on for the
   studio blanket with !important, so this needs the id + !important too. */
body.design-2026 section#order-page-2 .ff-thumb-col .thumbnail-cell div.image div.color-title{display:none!important;}
/* The legacy "customize" badge (furfam.css 3791-3808, ::after on the sample-photo cells while the form has no
   pets) would double .ff-badge-instant. Same selectors with body.design-2026 in front so this wins. The
   polaroid ::before (3735-3762) is left in place. */
body.design-2026 section#order-page-2 form:not(.has-pets) div#product-image-gallery div.carousel-cell div.image.has-design-1::after,
body.design-2026 section#order-page-2 form:not(.has-pets) div#product-image-gallery div.carousel-cell div.image.image-mockup::after,
body.design-2026 section#order-page-2 form:not(.has-pets) div#product-image-gallery div.carousel-cell div.image.image-design-detail-small::after,
body.design-2026 section#order-page-2 form:not(.has-pets) div#product-image-gallery div.carousel-cell div.image.image-design-detail::after{content:none;}
/* The ported "Preparing the magic!" / step-N text (furfam.css 2365-2418, form#order-info.status-generating
   div.status-bar::before) is for the canvas bar; the card's #design-status-message bar (section ORDER) has its
   own copy in the .generating div. */
#design-status-message .status-bar::before{content:none!important;}

/* ==== ADMIN CACHE TOOLBAR (?cache=...) ==== */
/* Copied from furfam.css, which the redesigned home and order pages do not load; without it the "Cache this page"
   button is an unstyled line under the footer. */
#cache-toolbar{position:fixed;bottom:0;left:0;right:0;background:#333;color:#fff;padding:.75rem 1.5rem;display:flex;align-items:center;gap:1rem;font-size:.9rem;z-index:9999;}
#cache-toolbar button{background:#4CAF50;color:#fff;border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer;}
#cache-toolbar button:hover{background:#45a049;}
#cache-toolbar .status{margin-left:auto;}

/* ADMIN GALLERY SCREENSHOT */



body.admin-gallery-screenshot section#order-page-2:not(.product-doodle-dreams) div#product-image-gallery div.carousel-cell div div.color-title,
body.admin-gallery-screenshot section#order-page-2 div#product-image-gallery a#openShareModalBtn,
body.admin-gallery-screenshot section#order-page-2 div#product-image-gallery button.flickity-button,

body.admin-gallery-screenshot section#order-page-2 div#product-image-gallery div.carousel-cell div.image.image-mockup::before,

body.admin-gallery-screenshot section#order-page-2 div#product-image-gallery div.carousel-cell div.image.image-mockup::after{
     display:none !important;
}
body.admin-gallery-screenshot section#order-page-2 div#product-image-gallery div.carousel-cell div.image > img{
     border-radius:0 !important;
  overflow: visible !important;

}