.sp-card{--paper:#fff;--ink:#0c1a36;--ink-2:#2a3a5f;--muted:rgba(12,26,54,.45);--line:rgba(12,26,54,.10);--bg-2:#f4f6f9;--accent:#5eead4;--accent-dark:#0fc4a8;--page:#ebeef2; background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:all .2s;list-style:none;margin:0;font-family:'DM Sans',-apple-system,sans-serif;} ul.products:has(.sp-card){display:grid;grid-template-columns:repeat(4,1fr);gap:14px;list-style:none;margin:0;padding:0;} .related ul.products:has(.sp-card),.up-sells ul.products:has(.sp-card){grid-template-columns:repeat(4,1fr);} .sp-card:hover{transform:translateY(-2px);border-color:rgba(12,26,54,.25);box-shadow:0 16px 32px -16px rgba(12,26,54,.15);} .sp-card a{text-decoration:none;color:inherit;} /* --- vis area: fixed-height white container, no pseudo-element overlays --- */ .sp-card-vis{height:150px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff;} .sp-card-vis::before,.sp-card-vis::after,.sp-card-vis.has-img::before{display:none;} .sp-card-img{position:relative;width:auto;height:100%;max-width:100%;max-height:130px;object-fit:contain;padding:10px;z-index:1;filter:none;transition:transform .25s ease;} .sp-card:hover .sp-card-img{transform:scale(1.045);} /* All tone vis areas stay white (teas-tea-type-theme.php handles body gradients) */ .sp-tone-cyan .sp-card-vis,.sp-tone-sky .sp-card-vis,.sp-tone-plum .sp-card-vis, .sp-tone-mint .sp-card-vis,.sp-tone-rose .sp-card-vis,.sp-tone-sage .sp-card-vis, .sp-tone-amber .sp-card-vis,.sp-tone-rust .sp-card-vis{background:#fff;} /* --- tags: pill, absolute top-left --- */ .sp-card-tag{position:absolute;top:10px;left:10px;z-index:2;padding:4px 10px;border-radius:8px;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;font-weight:700;} .sp-card-tag-sale{background:#0c1a36;color:#5eead4;} .sp-card-tag-rare{background:#5eead4;color:#0c1a36;} /* letterbox badge: absolute top-right */ .sp-card-lb{position:absolute!important;top:10px;right:10px;z-index:2;padding:3px 9px;background:rgba(12,26,54,.75);color:#fff;border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.10em;font-weight:700;text-decoration:none;} /* sp-card-name hidden in V3 (product name is in card body) */ .sp-card-name{display:none;} /* --- card body --- */ .sp-card-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:7px;flex:1;} /* type + caffeine pill row */ .sp-card-pills{display:flex;flex-wrap:wrap;gap:5px;align-items:center;} .sp-card-type{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;background:rgba(12,26,54,.06);border:1px solid rgba(12,26,54,.10);font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;font-weight:700;color:var(--ink);} .sp-card-type-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;} .sp-card-caf{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;font-weight:700;} .sp-caf-caf{background:rgba(14,138,62,.10);color:#0e6b32;border:1px solid rgba(14,138,62,.22);} .sp-caf-caf-free{background:rgba(94,234,212,.12);color:var(--accent-dark);border:1px solid rgba(94,234,212,.30);} .sp-caf-dot{width:6px;height:6px;border-radius:50%;background:currentColor;} .sp-card-brand{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;color:var(--muted);font-weight:700;} .sp-card-h{font-family:'DM Sans',-apple-system,sans-serif;font-weight:500;font-size:15px;line-height:1.3;color:var(--ink);margin:0;} .sp-card-h a{color:inherit;} .sp-card-tags{display:flex;flex-wrap:wrap;gap:4px;} .sp-card-tags span{padding:3px 10px;background:#fff;border:1px solid rgba(12,26,54,.12);border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--ink-2);font-weight:700;letter-spacing:.06em;} .sp-card-rule{height:1px;background:rgba(12,26,54,.08);margin:2px 0;flex-shrink:0;} .sp-card-foot{display:flex;justify-content:space-between;align-items:baseline;padding-top:8px;gap:8px;margin-top:auto;} .sp-card-pp{display:flex;flex-direction:column;gap:1px;min-width:0;} .sp-card-cup{font-family:'DM Sans',-apple-system,sans-serif;font-weight:500;font-size:26px;color:var(--ink);letter-spacing:-.02em;line-height:1;} .sp-card-cup span{font-family:'JetBrains Mono',monospace;font-weight:400;font-size:10px;color:var(--muted);} .sp-card-cups{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);font-weight:600;} .sp-card-price{font-family:'DM Sans',-apple-system,sans-serif;font-weight:500;font-size:18px;letter-spacing:-.01em;color:var(--ink);} .sp-card-price .woocommerce-Price-amount{font-weight:500;} .sp-card-price del{opacity:.5;font-size:14px;font-weight:400;} /* add-to-basket: pill shape, navy bg */ .sp-card a.sp-card-add{padding:10px 18px;background:var(--ink);color:#fff!important;border-radius:999px;font-family:'DM Sans',-apple-system,sans-serif;font-weight:600;font-size:13px;transition:all .15s;display:block;text-align:center;margin-top:8px;} .sp-card a.sp-card-add:hover{background:var(--ink-2);color:#fff!important;} .sp-card a.sp-card-sub{display:block;text-align:center;margin-top:6px;font-size:11.5px;font-weight:600;color:var(--accent-dark)!important;text-decoration:none;letter-spacing:.01em;font-family:'DM Sans',-apple-system,sans-serif;} .sp-card a.sp-card-sub:hover{color:var(--ink)!important;text-decoration:underline;} @media(max-width:1100px){ul.products:has(.sp-card){grid-template-columns:repeat(2,1fr);}} .sp-card .sp-card-vis, ul.products .sp-card .sp-card-vis { background: #fff !important; background-image: none !important; } .sp-card .sp-card-vis::before, .sp-card .sp-card-vis::after { display: none !important; } /* Title text inside image area no longer needs to be white (image area is now white). */ .sp-card .sp-card-name { color: var(--ink, #0c1a36) !important; text-shadow: none !important; } .sp-card[data-tea-type="black"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#c9a888 100%);position:relative;}.sp-card[data-tea-type="black"] .teas-pip::before{background:#c9a888;}.sp-card[data-tea-type="green"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#b3cba1 100%);position:relative;}.sp-card[data-tea-type="green"] .teas-pip::before{background:#b3cba1;}.sp-card[data-tea-type="white"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#ece6d8 100%);position:relative;}.sp-card[data-tea-type="white"] .teas-pip::before{background:#ece6d8;}.sp-card[data-tea-type="oolong"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#d4a06a 100%);position:relative;}.sp-card[data-tea-type="oolong"] .teas-pip::before{background:#d4a06a;}.sp-card[data-tea-type="herbal"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#e3a8c0 100%);position:relative;}.sp-card[data-tea-type="herbal"] .teas-pip::before{background:#e3a8c0;}.sp-card[data-tea-type="fruit"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#ecabb6 100%);position:relative;}.sp-card[data-tea-type="fruit"] .teas-pip::before{background:#ecabb6;}.sp-card[data-tea-type="chai"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#d8b96f 100%);position:relative;}.sp-card[data-tea-type="chai"] .teas-pip::before{background:#d8b96f;}.sp-card[data-tea-type="rooibos"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#d6826f 100%);position:relative;}.sp-card[data-tea-type="rooibos"] .teas-pip::before{background:#d6826f;}.sp-card[data-tea-type="matcha"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#9bc278 100%);position:relative;}.sp-card[data-tea-type="matcha"] .teas-pip::before{background:#9bc278;}.sp-card[data-tea-type="coffee"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#c9a896 100%);position:relative;}.sp-card[data-tea-type="coffee"] .teas-pip::before{background:#c9a896;}.sp-card[data-tea-type="biscuits"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#c9a673 100%);position:relative;}.sp-card[data-tea-type="biscuits"] .teas-pip::before{background:#c9a673;}.sp-card[data-tea-type="cocoa"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#a07a5e 100%);position:relative;}.sp-card[data-tea-type="cocoa"] .teas-pip::before{background:#a07a5e;}.sp-card[data-tea-type="other"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#d6c8b8 100%);position:relative;}.sp-card[data-tea-type="other"] .teas-pip::before{background:#d6c8b8;} .sp-card-body { display: flex; flex-direction: column; gap: 7px; padding: 14px 16px 16px; flex: 1; } .teas-pip-row { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; width: 100%; min-width: 0; } .teas-pip-row > * { flex-shrink: 0; } .teas-pip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-family: "JetBrains Mono", monospace; font-size: 8.5px; letter-spacing: 0.14em; font-weight: 700; text-transform: uppercase; background: rgba(255,255,255,.78); color: #131c30; border: 1px solid rgba(0,0,0,.10); box-shadow: 0 1px 2px rgba(31,44,71,.08), 0 1px 0 rgba(255,255,255,.85) inset; white-space: nowrap; } .teas-pip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 1px 1px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.30); } /* Caffeinated vs Caffeine-free — visually differentiated. Caffeinated = warm amber (energy / strong-brew association) Caffeine-free = cool navy (rest / calm association) Both have a clear glass-pill background so they read on any tea-tint. */ .sp-card-caf { font-size: 8px !important; padding: 2px 7px !important; letter-spacing: 0.10em !important; white-space: nowrap !important; } .sp-card-caf.sp-caf-caf { background: rgba(184,85,30,.12) !important; color: #8a4318 !important; border-color: rgba(184,85,30,.28) !important; } .sp-card-caf.sp-caf-caf-free { background: rgba(35,55,110,.10) !important; color: #2c3e7a !important; border-color: rgba(35,55,110,.26) !important; } /* 2026-05-21 Lee: subscribe link removed from shop tile — dilutes the clean design. Subscribe & save story is fully covered on the product detail page. */ body .sp-card a.sp-card-sub, body ul.products .sp-card a.sp-card-sub { display: none !important; } /* Polish: price-per-cup hierarchy (drunk-grandma rule v2). Per-cup is THE selling point — make it MASSIVE, deep dark, instantly readable from across the room. Total price becomes a tiny caption. No pill chrome — the number itself is the visual weight. */ .sp-card .sp-card-pp { flex: 1 !important; min-width: 0 !important; } .sp-card .sp-card-cup { display: flex !important; align-items: baseline !important; gap: 4px !important; font-family: "DM Sans", -apple-system, sans-serif !important; font-size: 28px !important; font-weight: 600 !important; letter-spacing: -0.02em !important; color: #0c1a36 !important; line-height: 1 !important; background: none !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .sp-card .sp-card-cup > span { font-family: "JetBrains Mono", monospace !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: 0.10em !important; color: rgba(12,26,54,.70) !important; text-transform: uppercase !important; } .sp-card .sp-card-cups { font-family: "JetBrains Mono", monospace !important; font-size: 10px !important; color: rgba(12,26,54,.55) !important; font-weight: 700 !important; margin-top: 4px !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; } .sp-card .sp-card-price { font-family: "JetBrains Mono", monospace !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.06em !important; color: rgba(12,26,54,.55) !important; text-transform: uppercase !important; white-space: nowrap !important; align-self: flex-end !important; } .sp-card .sp-card-price::before { content: "TOTAL "; font-size: 9px; letter-spacing: 0.14em; color: rgba(12,26,54,.40); } .sp-card .sp-card-price .woocommerce-Price-amount { font-family: "DM Sans", -apple-system, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; text-transform: none !important; color: rgba(12,26,54,.75) !important; } .sp-card .sp-card-foot { align-items: flex-end !important; padding-top: 10px !important; border-top-color: rgba(0,0,0,.10) !important; gap: 10px !important; } /* Product detail page main image — keep drop-shadow for edge definition. */ .tpp .main-img img { filter: drop-shadow(0 6px 14px rgba(0,0,0,.12)) drop-shadow(0 2px 4px rgba(0,0,0,.07)) !important; } /* Shop card images — no drop-shadow; white-background shots look cleaner without it. */ .sp-card .sp-card-vis img, .sp-card .sp-card-img { filter: none !important; } /* Polish: card depth + lift */ .sp-card { box-shadow: 0 1px 0 rgba(255,255,255,.90) inset, 0 -1px 0 rgba(30,42,82,.04) inset, 0 8px 20px -10px rgba(31,44,71,.18), 0 2px 4px -2px rgba(31,44,71,.10); } .sp-card:hover { box-shadow: 0 1px 0 rgba(255,255,255,.90) inset, 0 -1px 0 rgba(30,42,82,.04) inset, 0 18px 36px -14px rgba(31,44,71,.30), 0 3px 6px -2px rgba(31,44,71,.12); } /* Image highlight */ .sp-card .sp-card-vis { position: relative; } .sp-card .sp-card-vis::after { content: ""; display: block !important; position: absolute; inset: 0; background: radial-gradient(circle at 30% 18%, rgba(255,255,255,.45), transparent 55%); pointer-events: none; } .sp-fam[href*="filter_cat=black-tea"] .sp-fam-dot,a.sp-fam[href*="/black-tea/"] .sp-fam-dot{background:#c9a888 !important;}.sp-fam.on[href*="filter_cat=black-tea"],a.sp-fam.on[href*="/black-tea/"]{background:linear-gradient(180deg,#fff 0%,#c9a888 100%) !important;color:#0c1a36 !important;border-color:rgba(0,0,0,.18) !important;}.sp-fam.on[href*="filter_cat=black-tea"] .sp-fam-ct,a.sp-fam.on[href*="/black-tea/"] .sp-fam-ct{color:#0c1a36 !important;opacity:.7 !important;}.sp-fam[href*="filter_cat=green-tea"] .sp-fam-dot,a.sp-fam[href*="/green-tea/"] .sp-fam-dot{background:#b3cba1 !important;}.sp-fam.on[href*="filter_cat=green-tea"],a.sp-fam.on[href*="/green-tea/"]{background:linear-gradient(180deg,#fff 0%,#b3cba1 100%) !important;color:#0c1a36 !important;border-color:rgba(0,0,0,.18) !important;}.sp-fam.on[href*="filter_cat=green-tea"] .sp-fam-ct,a.sp-fam.on[href*="/green-tea/"] .sp-fam-ct{color:#0c1a36 !important;opacity:.7 !important;}.sp-fam[href*="filter_cat=white-tea"] .sp-fam-dot,a.sp-fam[href*="/white-tea/"] .sp-fam-dot{background:#ece6d8 !important;}.sp-fam.on[href*="filter_cat=white-tea"],a.sp-fam.on[href*="/white-tea/"]{background:linear-gradient(180deg,#fff 0%,#ece6d8 100%) !important;color:#0c1a36 !important;border-color:rgba(0,0,0,.18) !important;}.sp-fam.on[href*="filter_cat=white-tea"] .sp-fam-ct,a.sp-fam.on[href*="/white-tea/"] .sp-fam-ct{color:#0c1a36 !important;opacity:.7 !important;}.sp-fam[href*="filter_cat=fruit-herbal-tea"] .sp-fam-dot,a.sp-fam[href*="/fruit-herbal-tea/"] .sp-fam-dot{background:#e3a8c0 !important;}.sp-fam.on[href*="filter_cat=fruit-herbal-tea"],a.sp-fam.on[href*="/fruit-herbal-tea/"]{background:linear-gradient(180deg,#fff 0%,#e3a8c0 100%) !important;color:#0c1a36 !important;border-color:rgba(0,0,0,.18) !important;}.sp-fam.on[href*="filter_cat=fruit-herbal-tea"] .sp-fam-ct,a.sp-fam.on[href*="/fruit-herbal-tea/"] .sp-fam-ct{color:#0c1a36 !important;opacity:.7 !important;}.sp-fam[href*="filter_cat=rooibos-tea"] .sp-fam-dot,a.sp-fam[href*="/rooibos-tea/"] .sp-fam-dot{background:#d6826f !important;}.sp-fam.on[href*="filter_cat=rooibos-tea"],a.sp-fam.on[href*="/rooibos-tea/"]{background:linear-gradient(180deg,#fff 0%,#d6826f 100%) !important;color:#0c1a36 !important;border-color:rgba(0,0,0,.18) !important;}.sp-fam.on[href*="filter_cat=rooibos-tea"] .sp-fam-ct,a.sp-fam.on[href*="/rooibos-tea/"] .sp-fam-ct{color:#0c1a36 !important;opacity:.7 !important;}.sp-fam[href*="filter_cat=chai-tea"] .sp-fam-dot,a.sp-fam[href*="/chai-tea/"] .sp-fam-dot{background:#d8b96f !important;}.sp-fam.on[href*="filter_cat=chai-tea"],a.sp-fam.on[href*="/chai-tea/"]{background:linear-gradient(180deg,#fff 0%,#d8b96f 100%) !important;color:#0c1a36 !important;border-color:rgba(0,0,0,.18) !important;}.sp-fam.on[href*="filter_cat=chai-tea"] .sp-fam-ct,a.sp-fam.on[href*="/chai-tea/"] .sp-fam-ct{color:#0c1a36 !important;opacity:.7 !important;}.sp-fam[href*="filter_cat=matcha-tea"] .sp-fam-dot,a.sp-fam[href*="/matcha-tea/"] .sp-fam-dot{background:#9bc278 !important;}.sp-fam.on[href*="filter_cat=matcha-tea"],a.sp-fam.on[href*="/matcha-tea/"]{background:linear-gradient(180deg,#fff 0%,#9bc278 100%) !important;color:#0c1a36 !important;border-color:rgba(0,0,0,.18) !important;}.sp-fam.on[href*="filter_cat=matcha-tea"] .sp-fam-ct,a.sp-fam.on[href*="/matcha-tea/"] .sp-fam-ct{color:#0c1a36 !important;opacity:.7 !important;}.sp-fam[href*="filter_cat=coffee"] .sp-fam-dot,a.sp-fam[href*="/coffee/"] .sp-fam-dot{background:#c9a896 !important;}.sp-fam.on[href*="filter_cat=coffee"],a.sp-fam.on[href*="/coffee/"]{background:linear-gradient(180deg,#fff 0%,#c9a896 100%) !important;color:#0c1a36 !important;border-color:rgba(0,0,0,.18) !important;}.sp-fam.on[href*="filter_cat=coffee"] .sp-fam-ct,a.sp-fam.on[href*="/coffee/"] .sp-fam-ct{color:#0c1a36 !important;opacity:.7 !important;}.sp-fam[href*="filter_cat=biscuits"] .sp-fam-dot,a.sp-fam[href*="/biscuits/"] .sp-fam-dot{background:#c9a673 !important;}.sp-fam.on[href*="filter_cat=biscuits"],a.sp-fam.on[href*="/biscuits/"]{background:linear-gradient(180deg,#fff 0%,#c9a673 100%) !important;color:#0c1a36 !important;border-color:rgba(0,0,0,.18) !important;}.sp-fam.on[href*="filter_cat=biscuits"] .sp-fam-ct,a.sp-fam.on[href*="/biscuits/"] .sp-fam-ct{color:#0c1a36 !important;opacity:.7 !important;}.sp-fam[href*="filter_cat=decaffeinated-speciality-teas"] .sp-fam-dot,a.sp-fam[href*="/decaffeinated-speciality-teas/"] .sp-fam-dot{background:#d6c8b8 !important;}.sp-fam.on[href*="filter_cat=decaffeinated-speciality-teas"],a.sp-fam.on[href*="/decaffeinated-speciality-teas/"]{background:linear-gradient(180deg,#fff 0%,#d6c8b8 100%) !important;color:#0c1a36 !important;border-color:rgba(0,0,0,.18) !important;}.sp-fam.on[href*="filter_cat=decaffeinated-speciality-teas"] .sp-fam-ct,a.sp-fam.on[href*="/decaffeinated-speciality-teas/"] .sp-fam-ct{color:#0c1a36 !important;opacity:.7 !important;} .tpp .main-img { background: #ffffff !important; background-image: none !important; border: 1px solid rgba(0,0,0,.06); } .tpp .gallery .main-img { position: relative; } .teas-hero-pip { position: absolute; top: 16px; right: 16px; z-index: 5; display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.18em; font-weight: 700; text-transform: uppercase; background: rgba(255,255,255,.92); color: #131c30; border: 1px solid rgba(0,0,0,.10); box-shadow: 0 4px 12px -4px rgba(31,44,71,.18), 0 1px 0 rgba(255,255,255,.85) inset; backdrop-filter: blur(6px); } .teas-hero-pip::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--teas-pip-color, #d6c8b8); box-shadow: 0 1px 2px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.30); }