/* Clear shopping decisions within Playmoji's bold, colourful visual identity. */
.skip-shop { position:fixed; left:12px; top:8px; z-index:150; padding:12px 18px; background:#111; color:#fff; transform:translateY(-160%); border:2px solid var(--yellow); }
.skip-shop:focus { transform:none; }
.hero-trust { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin-top:22px; font-family:'DM Sans',sans-serif; }
.hero-trust span,.hero-trust button { font-size:.875rem; font-weight:700; line-height:1.45; }
.hero-trust button { padding:8px 0; min-height:44px; border:0; background:transparent; text-decoration:underline; text-underline-offset:4px; }
.hero-trust span::before { content:'✓'; margin-right:6px; }
.punch-explainer { border:2px solid #111; border-radius:6px; background:var(--yellow); margin:0 0 24px; box-shadow:3px 3px #111; }
.punch-explainer summary { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 18px; min-height:48px; font-weight:800; cursor:pointer; list-style:none; }
.punch-explainer summary::-webkit-details-marker { display:none; }
.punch-explainer[open] summary > span { transform:rotate(45deg); }
.punch-explainer ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:4px 18px 14px; margin:0; gap:24px; list-style:none; }
.punch-explainer li b { display:block; font-size:1rem; line-height:1.5; }
.punch-explainer li p { margin-top:6px; font-size:1rem; line-height:1.5; }
.punch-explainer > small { display:block; padding:0 18px 16px; font-size:.875rem; line-height:1.5; }
.shop .shortlist-link { gap:14px; align-items:center; }
.shop .shortlist-link button { font-size:.875rem; min-height:44px; text-align:left; }
.shop .shortlist-link button:first-child { font-weight:900; text-decoration:underline; text-underline-offset:5px; }
.product-info .card-gift-fit { display:block; margin:10px 0 0; font-size:.875rem; line-height:1.45; color:#373743; font-weight:600; }
.product-info .card-description { display:none; }
.product-details-link { background:none; border:0; padding:9px 0; margin:4px 0 12px; min-height:44px; font-size:.875rem; font-weight:800; text-align:left; text-decoration:underline; text-underline-offset:4px; }
.product-price > span { font-size:.8125rem; }
.product-info .add-button { min-height:48px; }
.product-card { overflow:hidden; }
.product-card:hover { transform:translateY(-3px); }
@media (min-width:1100px) {
  .shop .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
  .shop .product-info { padding:22px; }
  .shop .product-info h3 { font-size:clamp(1.25rem,1.85vw,1.75rem); line-height:1.2; }
  .shop .product-kicker { font-size:.75rem; line-height:1.5; }
  .shop .product-buy { grid-template-columns:minmax(0,1fr); gap:12px; }
  .shop .product-price { display:flex; gap:8px; align-items:baseline; }
  .shop .product-price strong { font-size:1.625rem; }
  .shop .product-info .add-button { width:100%; }
}
#modal[data-view="product"] .modal-title { font-size:clamp(1.75rem,3vw,2.4rem); line-height:1.13; letter-spacing:-.025em; margin-bottom:16px; }
.photo-note { display:block; margin-top:12px; font-size:.875rem; line-height:1.5; color:#51515a; }
.detail-gallery { align-self:start; }
.detail-price { flex-wrap:wrap; margin-bottom:20px; }
.detail-price > strong { font-size:2rem; }
.gift-fit { border-left:4px solid var(--blue-deep); padding:2px 0 2px 14px; margin:20px 0 16px; }
.gift-fit > span { display:block; font-size:.75rem; letter-spacing:.06em; font-weight:900; margin-bottom:5px; }
.gift-fit > strong { font-size:1rem; line-height:1.5; }
.detail-copy .product-short { font-size:1rem; line-height:1.6; margin:0 0 18px; }
.box-facts { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 16px; }
.box-facts span { font-size:.875rem; padding:9px 11px; border:1px solid #111; background:#d9f3ff; line-height:1.4; }
.product-story { border-top:1px solid #1113; border-bottom:1px solid #1113; margin-bottom:20px; }
.product-story summary { display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; min-height:48px; padding:10px 0; font-size:.875rem; font-weight:800; }
.product-story p { font-size:1rem; line-height:1.6; margin:0 0 16px; }
.delivery-estimate { border:2px solid #111; border-radius:6px; background:#fff; padding:18px; margin:18px 0; }
.delivery-estimate > label { display:block; margin:0 0 10px; font-size:.875rem; font-weight:900; }
.delivery-estimate select { display:block; width:100%; max-width:100%; min-height:48px; border:1px solid #111; border-radius:3px; background:#fff; color:#111; padding:10px 8px; font:inherit; font-size:1rem; }
.delivery-estimate select:focus-visible { outline:3px solid var(--blue-deep); outline-offset:2px; }
.quote-totals { display:grid; gap:10px; margin:18px 0 12px; }
.quote-totals > div { display:flex; align-items:baseline; justify-content:space-between; gap:18px; font-size:.875rem; line-height:1.4; }
.quote-totals strong { flex-shrink:0; }
.quote-totals .quote-saved { color:#126d44; }
.quote-totals .quote-total { border-top:2px dashed #1115; padding-top:12px; font-weight:800; }
.quote-total strong { font-size:1.5rem; color:#111; }
.delivery-estimate > small { display:block; font-size:.8125rem; color:#51515a; line-height:1.5; }
.suburb-help { margin-top:4px; }
.suburb-help summary { font-size:.875rem; font-weight:600; text-decoration:underline; text-underline-offset:3px; padding:10px 0; min-height:44px; cursor:pointer; }
.suburb-help p { margin:4px 0; font-size:.875rem; line-height:1.6; }
.product-assurance { display:flex; flex-wrap:wrap; gap:10px 16px; font-size:.875rem; font-weight:700; }
.product-assurance span::before { content:'✓ '; }
.product-purchase-bar { border-radius:6px; }
.product-purchase-bar small { font-size:.8125rem; font-weight:500; }
.product-purchase-bar .add-button { min-width:150px; }
.bag-heading { display:flex; justify-content:space-between; align-items:start; gap:18px; margin-bottom:24px; }
.bag-heading .modal-title { font-size:clamp(1.75rem,3.8vw,2.7rem); line-height:1.13; letter-spacing:-.025em; margin:0; }
.bag-count { border:1px solid #111; background:var(--yellow); border-radius:4px; padding:8px 10px; font-size:.875rem; font-weight:800; white-space:nowrap; }
.bag-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr); gap:28px; align-items:start; }
.bag-items .cart-row { display:grid; grid-template-columns:76px minmax(0,1fr) auto; gap:14px; align-items:start; padding:20px 0; border-bottom:1px solid #1113; }
.bag-items .cart-row:first-child { padding-top:0; }
.cart-photo { border:1px solid #1112; background:#f3f3f6; padding:3px; width:76px; }
.cart-photo img { width:100%; height:auto; aspect-ratio:1; object-fit:contain; }
.bag-items .cart-row h3 { font-family:'DM Sans',sans-serif; font-weight:800; font-size:1rem; line-height:1.4; }
.bag-items .cart-row p { font-size:.875rem; line-height:1.5; margin:5px 0 9px; }
.bag-items .quantity-control { display:flex; align-items:center; width:max-content; max-width:100%; }
.bag-items .quantity-control button { min-width:44px; min-height:44px; }
.bag-items .quantity-control span { min-width:28px; text-align:center; }
.bag-line-end { display:grid; justify-items:end; gap:7px; }
.bag-line-end > strong { font-size:1rem; line-height:1.5; }
.bag-line-end .remove { font-size:.8125rem; padding:4px 0; min-height:44px; margin:0; background:none; }
.bag-items .bag-stock-warning { color:#a51f19; font-weight:700; }
.bag-items > .save-text { min-height:44px; margin-top:12px; font-size:.875rem; }
.bag-gift-note { border-left:4px solid var(--purple); padding:4px 0 4px 14px; margin:22px 0; }
.bag-gift-note b { font-size:.875rem; }
.bag-gift-note p { font-size:.875rem; line-height:1.55; margin-top:6px; }
.bag-summary { background:var(--yellow); border:2px solid #111; padding:18px; border-radius:8px; box-shadow:4px 4px #111; }
.bag-summary .delivery-estimate { border:0; padding:0; background:transparent; margin:0; }
.bag-summary .reward-bag { margin:12px 0 18px; padding:12px 0; border:0; border-block:1px solid #1114; background:transparent; }
.bag-summary .reward-bag span,.bag-summary .reward-bag summary { font-size:.875rem; line-height:1.5; font-weight:800; }
.bag-summary .reward-bag p { font-size:.875rem; margin:7px 0 0; line-height:1.5; }
.reward-option summary { cursor:pointer; min-height:44px; display:flex; align-items:center; }
.reward-option .save-text { margin-top:10px; }
.bag-order-actions { display:flex; flex-direction:column; align-items:stretch; gap:8px; }
.bag-order-actions .pixel-button { justify-content:center; width:100%; min-height:52px; padding:14px 12px; font-size:.875rem; line-height:1.4; white-space:normal; background:#111; color:var(--yellow); border-radius:4px; box-shadow:3px 3px #0878ff; }
.bag-order-actions > small { font-size:.8125rem; line-height:1.5; text-align:center; }
.bag-order-actions > a { font-size:.875rem; text-transform:none; line-height:1.4; min-height:44px; margin-top:5px; padding:10px 0; text-align:center; }
.bag-empty { text-align:center; padding:20px 0; }
.bag-empty h3 { font-size:1.4rem; line-height:1.4; margin-bottom:8px; }
.empty-bag-picks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:24px 0; }
.empty-bag-picks > button { display:flex; flex-direction:column; gap:8px; align-items:center; min-width:0; padding:10px; border:2px solid #111; background:#fff; text-align:center; border-radius:5px; }
.empty-bag-picks img { width:100%; height:auto; aspect-ratio:1; object-fit:contain; }
.empty-bag-picks span { font-size:.875rem; font-family:'DM Sans',sans-serif; line-height:1.4; }
.empty-bag-picks b { font-size:1rem; }
.compare-swipe { font-size:.875rem; margin:0 0 12px; font-weight:700; }
.comparison-wrap { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; border:2px solid #111; border-radius:8px; scrollbar-width:thin; }
.gift-comparison { width:100%; min-width:680px; table-layout:fixed; border-collapse:separate; border-spacing:0; background:#fff; }
.gift-comparison th,.gift-comparison td { padding:16px; text-align:left; font-size:.875rem; line-height:1.5; border-right:1px solid #1112; border-bottom:1px solid #1112; vertical-align:top; overflow-wrap:anywhere; }
.gift-comparison tr > :first-child { position:sticky; left:0; width:100px; background:#171721; color:#fff; z-index:1; }
.gift-comparison th[scope=col]:not(:first-child) { width:190px; background:#e0f4ff; }
.gift-comparison th > button { display:grid; gap:12px; background:none; border:0; padding:0; text-align:left; width:100%; }
.gift-comparison th img { width:100%; height:auto; aspect-ratio:1; object-fit:contain; border:1px solid #1113; }
.gift-comparison th span { font-family:'DM Sans',sans-serif; font-size:1rem; font-weight:800; }
.gift-comparison td small { display:block; font-size:.8125rem; margin-top:5px; }
.gift-comparison td strong { font-size:1.25rem; }
.compare-view { border:2px solid #111; background:var(--yellow); min-height:44px; padding:10px 12px; font-size:.875rem; font-weight:800; border-radius:4px; width:100%; }
.compare-help { margin-top:18px; font-size:.875rem; min-height:44px; }
.delivery-rate-list { border:2px solid #111; border-radius:6px; overflow:hidden; background:var(--yellow); margin:20px 0; }
.delivery-rate-list > div { padding:16px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.delivery-rate-list > div + div { border-top:1px solid #1114; }
.delivery-rate-list strong { font-size:1.3rem; }
.help-copy,.delivery-payment p { font-size:1rem; line-height:1.65; }
.delivery-payment { margin:24px 0; }
.delivery-payment h3 { font-size:1.1rem; margin-bottom:8px; }
.footer-help { display:grid; gap:4px; }
.footer-help button,.footer-help a { display:flex; align-items:center; min-height:44px; text-align:left; font-size:.875rem; color:inherit; padding:6px 0; }
#toast:has(button),.dialog-feedback:has(button) { display:flex; align-items:center; justify-content:space-between; gap:16px; }
#toast > button,.dialog-feedback > button { background:var(--yellow); color:#111; border:1px solid #111; min-height:44px; padding:10px 12px; font-size:.875rem; font-weight:800; white-space:nowrap; }
body:has(#toast.show) #reward-dock { visibility:hidden; }
.checkout-layout .checkout-account { padding:12px 0; margin-bottom:18px; border:0; border-bottom:1px solid #1113; background:transparent; box-shadow:none; }
.checkout-account strong,.checkout-account .save-text { font-size:.875rem; line-height:1.4; }
.checkout-account p { font-size:.875rem; line-height:1.5; }
.checkout-layout .checkout-account .save-text { min-height:44px; display:flex; align-items:center; }
.checkout-title { font-size:clamp(1.75rem,4vw,2.7rem); line-height:1.1; }
.checkout-head { margin-bottom:18px; }
.checkout-layout .order-ticket { transform:none; }
.checkout-fields > label { margin-top:8px; }
.checkout-progress-label { font-family:'DM Sans',sans-serif; line-height:1.4; }
@media(max-width:900px) {
  .bag-layout { grid-template-columns:minmax(0,1fr); gap:16px; }
  .bag-summary { margin-right:4px; }
}
@media(max-width:720px) {
  .hero-actions { grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:12px; }
  .hero-actions .pixel-button { font-family:'DM Sans',sans-serif; font-weight:900; justify-content:center; padding:11px 8px; }
  .hero-trust { display:flex; gap:4px 12px; margin-top:14px; }
  .hero-trust span { font-size:.8125rem; }
  .hero-trust button { font-size:.8125rem; padding:5px 0; min-height:32px; }
  .hero-copy > .phone-intro { margin:14px 0 18px; line-height:1.5; }
  .hero .micro-label { margin-bottom:14px; }
  .punch-explainer { margin-bottom:20px; }
  .punch-explainer summary { padding:12px; font-size:.875rem; line-height:1.5; }
  .punch-explainer ol { grid-template-columns:minmax(0,1fr); padding:4px 14px 14px; gap:16px; }
  .punch-explainer > small { padding-inline:14px; }
  .product-info .card-gift-fit { display:block; font-size:.875rem; margin:8px 0 0; line-height:1.4; }
  .product-info .product-details-link { margin:3px 0 8px; min-height:44px; padding:8px 0; font-size:.875rem; }
  #modal[data-view="product"] .modal-title { font-size:1.7rem; line-height:1.2; }
  #modal[data-view="product"] .detail-layout { gap:20px; }
  .detail-price > strong { font-size:1.75rem; }
  .detail-gallery .gallery-canvas .detail-photo { max-height:300px; }
  .photo-note { font-size:.8125rem; }
  .delivery-estimate { padding:14px; }
  .product-purchase-bar { bottom:-20px; padding:12px; gap:12px; }
  .product-purchase-bar .add-button { flex:1; min-width:0; font-size:.875rem; }
  .bag-heading { gap:12px; margin-bottom:18px; }
  .bag-heading .modal-title { font-size:1.7rem; line-height:1.2; }
  .bag-count { font-size:.8125rem; padding:6px 8px; }
  .bag-items .cart-row { grid-template-columns:64px minmax(0,1fr); gap:12px; }
  .cart-photo { width:64px; }
  .bag-line-end { grid-column:2; display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:-6px; }
  .bag-items .cart-row h3 { font-size:1rem; }
  .bag-summary { padding:16px; }
  .bag-gift-note { margin:14px 0; }
  .comparison-wrap { margin:0; }
  .gift-comparison { min-width:640px; }
  .gift-comparison th,.gift-comparison td { padding:12px; }
  .gift-comparison tr > :first-child { width:88px; }
  .gift-comparison th[scope=col]:not(:first-child) { width:184px; }
  .empty-bag-picks { gap:8px; }
  .empty-bag-picks > button { padding:7px; }
  .footer-help { margin:12px 0; }
  #toast { width:calc(100% - 24px); max-width:400px; padding:10px 12px; bottom:calc(10px + env(safe-area-inset-bottom)); font-size:.875rem; border-radius:8px; }
  .checkout-title { font-size:1.8rem; line-height:1.15; }
  .checkout-head .checkout-tag { display:none; }
  .checkout-layout .checkout-account { gap:8px; }
}
@media(prefers-reduced-motion:reduce) { .product-card:hover { transform:none; } }

/* Separate the message, action and reassurance without changing desktop layout. */
.hero-message,.hero-decision { display:contents; }
.hero-message > .desktop-copy { font-size:18px; line-height:1.55; max-width:540px; margin:32px 0 27px; font-weight:600; }
@media(max-width:720px) {
  .hero .hero-copy { display:grid; gap:22px; }
  .hero-message,.hero-decision { display:block; min-width:0; }
  .hero .micro-label { border:0; margin:0 0 12px; padding:0; font-size:.75rem; font-weight:600; letter-spacing:.025em; color:#183747; }
  .hero h1 { font-size:clamp(1.9rem,8.6vw,2.5rem); line-height:1.05; letter-spacing:-.025em; margin:0; }
  .hero .hero-message .phone-intro { display:grid; gap:5px; margin:16px 0 0; padding:0 0 0 12px; border-left:3px solid #111; max-width:none; }
  .hero .phone-intro strong { font-family:'DM Sans',sans-serif; font-size:1rem; line-height:1.5; font-weight:700; }
  .hero .phone-intro p { font-size:.875rem; line-height:1.5; font-weight:400; color:#153647; margin:0; }
  .hero .hero-actions { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:14px; align-items:center; }
  .hero .hero-actions .pixel-button { min-height:48px; padding:12px; font-size:.9375rem; font-weight:800; line-height:1.3; justify-content:center; border-width:2px; border-radius:4px; box-shadow:3px 3px #111; }
  .hero .hero-actions .under-button { min-height:48px; padding:10px 0; font-size:.875rem; line-height:1.4; font-weight:500; border:0; box-shadow:none; background:none; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; text-align:center; }
  .hero .hero-trust { display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; gap:0; margin:18px 0 0; padding:9px 0; background:#ffffff45; border:1px solid #1113; border-radius:6px; }
  .hero .hero-trust > span,.hero .hero-trust > button { min-width:0; font-family:'DM Sans',sans-serif; font-size:.8125rem; line-height:1.45; font-weight:500; color:#173442; padding:0 11px; text-align:left; }
  .hero .hero-trust > span::before { content:none; }
  .hero .hero-trust > span + span,.hero .hero-trust > button { border-left:1px solid #1113; }
  .hero .hero-trust > button { min-height:44px; margin:0; font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
  .hero .hero-stage { margin-top:0; }
}
@media(max-width:360px) {
  .hero .hero-actions { gap:10px; }
  .hero .hero-trust > span,.hero .hero-trust > button { padding-inline:8px; }
}