/* GetDetails namespaced CSS — safe to use alongside anything else Only applies inside to avoid clashes. */ /* ========== Variables & Base ========== */ .gd:root {} .gd, .gd * { box-sizing: border-box; } .gd html, .gd body { margin: 0; padding: 0; } .gd, .gd body { color:#0f172a; background:#f7faf9; font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Inter,"Helvetica Neue",Arial,"Noto Sans"; } .gd img { max-width: 100%; display: block; } .gd .container { max-width: 1200px; margin: 0 auto; padding: 0 16px; } /* CSS variables used site-wide */ .gd { --brand:#ffd64a; --brand-dark:#001113; --gold:#FFD700; --ink:#0f172a; --muted:#f3f4f6; --card:#ffffff; --accent:#0ea5e9; --shadow:0 10px 30px rgba(2,6,23,.08); --radius:14px; --takeaway-bg:#B5FFA7 !important; /* moved here from :root */ } /* === Base Text Rules (Global) === */ body, .gd, p, h1, h2, h3, h4, h5, h6, li, a, strong { color: var(--brand-dark); /* your dark text color (#001113) */ } p { color: var(--brand-dark); line-height: 1.5; margin-bottom: 1em; } /* === Footer and dark section overrides === */ footer, .page-footer, footer p, footer li, footer a, footer small { color: var(--brand); /* your yellow #FFD64A */ } /* ========== Global visibility rules for category strips ========== */ /* Mobile scroller component present in DOM on all pages */ .catstrip-mob{ display:none; } /* default hidden */ @media (max-width:980px){ .catstrip-mob{ display:block; } /* show on phones/tablets */ } /* Hide desktop category strips on mobile/tablet */ @media (max-width:980px){ .categories-row-wrap, .categories-strip, .cat-overflow, .gd .catsmod-wrap, .gd .catsmod-strip, .gd .catsmod-overflow { display:none !important; } } /* ========== Header ========== */ .gd .header { background: var(--brand-dark); color:#fff; border-bottom:5px solid var(--gold); margin-top:0; } .gd .nav { display:grid; grid-template-columns:1fr auto minmax(240px,400px) auto; gap:16px; align-items:center; padding:6px 0; } .gd .brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:#fff; } .gd .brand .owl { width:60px; height:60px; display:block; border:0; } @media (max-width:560px){ .gd .brand .owl { width:48px; height:48px; } } .gd .brand .wordmark { font-weight:800; font-size:1.15rem; } .gd .brand .tagline { font-size:.8rem; opacity:.85; } .gd .primary-links { display:flex; gap:16px; justify-content:center; } .gd .primary-links a { color:#fff; text-decoration:none; font-weight:600; } .gd .primary-links a:hover { opacity:.9; } .gd .search { display:flex; gap:6px; justify-content:center; } .gd .search input { width:100%; padding:6px 10px; border-radius:8px; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.12); color:#fff; font-size:.9rem; } .gd .search input::placeholder { color:#e5e7eb; } .gd .search button { padding:6px 10px; border-radius:8px; border:1px solid #0b5cab; background:#0b5cab; color:#fff; cursor:pointer; font-weight:700; } .gd .auth { display:flex; gap:10px; justify-content:flex-end; align-items:center; } .gd .auth a { color:#fff; text-decoration:none; } .gd .auth .pill { padding:6px 10px; border:1px solid rgba(255,255,255,.28); border-radius:999px; } /* --- Prevent logo–nav collision zone (1100 → 981 px) --- */ @media (max-width:1120px) and (min-width:981px) { /* Slightly tighten nav spacing */ .gd header nav a { padding: 0 8px; font-size: 0.95em; } /* Trim logo margin to gain a few pixels of room */ .gd header .logo { margin-right: 6px; } /* Optional: keep search box from stretching too far */ .gd header .search-box { max-width: 280px; } } @media (max-width:980px){ .gd .nav{ grid-template-columns:1fr auto; grid-template-areas:"brand auth" "search search" "links links"; row-gap:10px; } .gd .brand{grid-area:brand;justify-self:start} .gd .auth{grid-area:auth;justify-self:end} .gd .search{grid-area:search} .gd .primary-links{grid-area:links;justify-content:center} } /* === Canonical Grid System (from homepage logic) === */ .grid-products { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } @media (max-width:1200px) { .grid-products { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width:980px) { .grid-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width:720px) { .grid-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:480px) { .grid-products { grid-template-columns: minmax(0, 1fr); } } /* === End Canonical Grid System === */ /* ========== Generic Page Layout ========== */ .gd .page { max-width:1100px; margin:0 auto; padding:20px 16px 40px; } .gd .title { font-size:34px; line-height:1.15; margin:18px 0 14px; text-align:center; } .gd .wrap { display:grid; grid-template-columns:1.05fr .95fr; gap:18px; } @media (max-width:900px){ .gd .wrap{ grid-template-columns:1fr } } /* Cards grid */ .gd .cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } @media (max-width:900px){ .gd .cards{ grid-template-columns:repeat(2,1fr) } } @media (max-width:640px){ .gd .cards{ grid-template-columns:1fr } } .gd .card{ background:var(--card); border:1px solid #e5e7eb; border-radius:16px; box-shadow:var(--shadow); padding:12px; min-height:100px; cursor:pointer; transition:transform .08s ease, box-shadow .2s ease; display:flex; flex-direction:column; justify-content:flex-start; } .gd .card:hover{ transform:translateY(-1px); box-shadow:0 14px 34px rgba(2,6,23,.12); } .gd .card h3{ margin:0 0 6px; font-size:16px; display:flex; align-items:center; gap:8px; } .gd .card p{ margin:0; font-size:14px; opacity:.9; } .gd .c1{background:#eaffef} .gd .c2{background:#fff6dc} .gd .c3{background:#eef5ff} .gd .c4{background:#ffecef} .gd .c5{background:#fff8e7} .gd .c6{background:#f2fff2} .gd .c7{background:#e8fbff} .gd .c8{background:#fff0e8} .gd .c9{background:#f0f0ff} /* Form panel */ .gd .panel{ background:var(--card); border:1px solid #e5e7eb; border-radius:16px; box-shadow:var(--shadow); padding:16px; } .gd .panel h2{ margin:0 0 8px; font-size:18px; } .gd .sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,1px,1px); white-space:nowrap; border:0; } .gd form.contact{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .gd form.contact .full{ grid-column:1 / -1; } .gd input, .gd select{ width:100%; height:42px; padding:10px 12px; border:1px solid #d1d5db; border-radius:10px; background:#fff; font-size:15px; } .gd textarea{ width:100%; min-height:160px; height:auto; resize:vertical; line-height:1.35; border:1px solid #d1d5db; border-radius:10px; padding:10px 12px; transition:min-height .2s ease; } .gd textarea:focus{ min-height:220px; outline:none; border-color:#28A745; box-shadow:0 0 0 3px rgba(40,167,69,.25); } .gd .actions{ display:flex; justify-content:flex-end; gap:10px; } .gd .btn{ display:inline-block; border-radius:10px; padding:8px 12px; font-weight:600; border:1px solid transparent; cursor:pointer; } .gd .btn-primary{ background:#28A745; color:#fff; } .gd .note{ font-size:13px; opacity:.85; margin-top:8px; } /* Footer (generic) */ .gd footer { border-top:1px solid #e5e7eb; background:#fff; margin-top:28px; } .gd .footer-inner{ max-width:1100px; margin:0 auto; padding:22px 16px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; } .gd .footer-links a{ color:#0b5cab; text-decoration:none; } /* ========== Category / Page Scopes ========== */ /* --- Apparel category --- */ .gd.page-apparel { color: var(--ink); background: #f7faf9; } .gd.page-apparel .container { max-width: 1200px; padding: 0 16px; } @media (max-width:560px){ .gd.page-apparel .container{ padding:0 22px } } .gd.page-apparel .hero-wrap{background:linear-gradient(180deg,#ffffff 0%,#f2f7f5 100%);border-bottom:1px solid #e5e7eb} .gd.page-apparel .hero{display:grid;grid-template-columns:1fr;gap:12px;align-items:center;padding:22px 0 26px} .gd.page-apparel .hero .lede{max-width:820px;margin:0 auto;text-align:center} .gd.page-apparel .hero h1{margin:0;font-size:2.1rem;font-weight:900;line-height:1.15} .gd.page-apparel .hero p{margin:10px 0 0;font-weight:500;opacity:.9} .gd.page-apparel .section{margin:22px 0 10px} .gd.page-apparel .section h2{margin:0 0 8px;font-size:1.35rem;font-weight:900} .gd.page-apparel .card{background:var(--card);border:1px solid #e5e7eb;border-radius:var(--radius);box-shadow:var(--shadow)} .gd.page-apparel .grid-4{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px} @media (max-width:1200px){ .gd.page-apparel .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))} } @media (max-width:980px){ .gd.page-apparel .grid-4{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:720px){ .gd.page-apparel .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:480px){ .gd.page-apparel .grid-4{grid-template-columns:1fr} } .gd.page-apparel .p-tile{display:flex;flex-direction:column;overflow:hidden} .gd.page-apparel .p-tile .img{background:#fafafa;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:center} .gd.page-apparel .p-tile .img a{display:block;width:100%} .gd.page-apparel .p-tile .img a img{width:100%;aspect-ratio:1/1;object-fit:contain;padding:12px} .gd.page-apparel .p-tile .meta{padding:8px} .gd.page-apparel .p-tile .name{ margin:0 0 4px;font-weight:600;font-size:1.1rem;line-height:1.1;letter-spacing:.1px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font-family:"SF Pro Rounded","Avenir Next",Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans"; } .gd.page-apparel .p-tile .row{display:flex;justify-content:space-between;align-items:baseline;gap:6px} .gd.page-apparel .p-tile .price{font-size:1.15rem;font-weight:900;color:#111827;text-decoration:none} .gd.page-apparel .p-tile .store{font-size:.9rem;color:#0b5cab;text-decoration:none;font-weight:600} .gd.page-apparel .slim-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} @media (max-width:900px){ .gd.page-apparel .slim-list{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:560px){ .gd.page-apparel .slim-list{grid-template-columns:1fr} } .gd.page-apparel .slim-list li a.price-link{ display:flex;justify-content:space-between;align-items:center;width:100%; padding:10px 12px;border:1px solid #9ccfb0;border-radius:10px; background:#AEE2C3;color:#111827;text-decoration:none;transition:background .2s ease; } .gd.page-apparel .slim-list li a.price-link:hover{ text-decoration:underline; background:#9fd9b7 } .gd.page-apparel .slim-list li strong{font-weight:600;font-size:.95rem} .gd.page-apparel .slim-list li .price{font-size:.95rem;font-weight:700;color:#111827;margin-left:8px} .gd.page-apparel .badge{display:inline-block;border-radius:999px;padding:2px 8px;border:1px solid #16a34a;font-size:.75rem;line-height:1.1;margin-left:8px} .gd.page-apparel .lowest{background:#ecfdf5;color:#166534;border-color:#16a34a} /* --- Product page helpers --- */ .gd.page-product .video-wrap{ display:flex; flex-direction:column; height:100%; } /* ========================================================= PRODUCT PAGE STRUCTURAL LAYOUT — MOBILE-FIRST FOUNDATION Universal across all /pages/products/... pages ========================================================= */ .page-product .product-columns { display: flex; flex-direction: column; /* mobile: stack vertically */ align-items: stretch; width: 100%; } .page-product .product-main, .page-product .product-sidebar { width: 100%; box-sizing: border-box; } /* Desktop: side-by-side columns */ @media (min-width: 980px) { .page-product .product-columns { flex-direction: row; align-items: flex-start; gap: 2rem; } .page-product .product-main { flex: 3; } .page-product .product-sidebar { flex: 1; } } .gd.page-product .promos{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:16px 12px 6px; flex:1 1 auto; align-content:stretch; grid-auto-rows:1fr; } .gd.page-product .promo{ display:block; height:100%; } .gd.page-product .related{ margin:16px 12px 6px; margin-top:auto; } /* Product: “You May Also Like” row (3 → 2 → 1) */ .gd.page-product section.related #relatedGrid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; } @media (max-width:900px){ .gd.page-product section.related #relatedGrid{ grid-template-columns:repeat(2, minmax(0,1fr)); } } @media (max-width:560px){ .gd.page-product section.related #relatedGrid{ grid-template-columns:1fr; } } /* Tiles */ .gd.page-product section.related #relatedGrid .tile{ border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; background:#fff; cursor:pointer; transition:box-shadow .15s ease, border-color .15s ease; } .gd.page-product section.related #relatedGrid .tile:hover{ box-shadow:var(--shadow); border-color:#d1d5db; } .gd.page-product section.related #relatedGrid .tile .vid img{ width:100%; aspect-ratio:16/9; display:block; } .gd.page-product section.related #relatedGrid .tile .label{ padding:10px; font-weight:600; font-size:.95rem; } /* Flex fallback (older UAs) */ @supports not (display:grid){ .gd.page-product section.related #relatedGrid{ display:flex; flex-wrap:wrap; gap:12px; } .gd.page-product section.related #relatedGrid .tile{ width:calc(33.333% - 8px); } } /* --- Product page: promos with images --- */ @media (max-width:800px){ .gd.page-product .promos { grid-template-columns:1fr; } } .gd.page-product .promo { display:flex; flex-direction:column; border-radius:16px; border:1px solid #cde7d8; background:#dff8e8; overflow:hidden; color:#064e3b; text-decoration:none; transition:transform .12s ease, box-shadow .2s ease, background .2s ease; } .gd.page-product .promo:hover { background:#c9f0d8; box-shadow:0 10px 28px rgba(0,0,0,.08); transform:translateY(-2px); } .gd.page-product .promo-img img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; } .gd.page-product .promo-text { padding:18px; } .gd.page-product .promo-text h3 { margin:0 0 10px; font-size:1.35rem; font-weight:900; color:#064e3b; } .gd.page-product .promo-text p { margin:0; font-size:1.05rem; line-height:1.55; font-weight:500; } /* ===== Product Page: Takeaway block (scoped) ===== */ .gd.page-product .block.takeaway h3{ color: #111827; /* heading stays dark slate */ } .gd.page-product .block.takeaway p{ color:#0f172a; /* body copy = standard ink (#0f172a) */ font-size:1rem; /* avoid the pale 14px global tint */ line-height:1.5; margin:0; } /* Keep promo body copy readable on product page */ .gd.page-product .promo-text p{ color:#064e3b; } /* --- Product page: video/hero block (SCOPED) --- */ .gd.page-product .section { padding:16px 16px 12px 16px; } .gd.page-product #videos-h.section { padding:0; margin:8px 0 6px; } .gd.page-product .hero { border-radius:12px; overflow:hidden; background:#000; } .gd.page-product .hero iframe { width:100%; aspect-ratio:16/9; border:0; display:block; } .gd.page-product .thumb-row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px; } @media (max-width:900px){ .gd.page-product .thumb-row { grid-template-columns:1fr; } } .gd.page-product .thumb{ display:flex; gap:10px; border:1px solid #e5e7eb; border-radius:12px; background:#fff; overflow:hidden; cursor:pointer; transition:box-shadow .15s ease, border-color .15s ease; } .gd.page-product .thumb:hover { box-shadow:var(--shadow); border-color:#d1d5db; } .gd.page-product .thumb.active { border-color:var(--accent); } .gd.page-product .thumb .preview { flex:0 0 40%; } .gd.page-product .thumb .preview img { width:100%; height:100%; object-fit:cover; } .gd.page-product .thumb .meta { padding:10px 10px 12px; } .gd.page-product .thumb .title { font-weight:700; font-size:.95rem; margin:0 0 4px; } .gd.page-product .thumb .channel { font-size:.82rem; color:#6b7280; } /* Mobile-only product image inside video section */ .gd.page-product .img-mobile{ display:none; border:1px solid #e5e7eb; border-radius:12px; background:#fafafa; position:relative; overflow:hidden; margin:0 16px 12px; } .gd.page-product .img-mobile .img-box{ position:relative; width:100%; } .gd.page-product .img-mobile .img-box::before{ content:""; display:block; padding-top:80%; } .gd.page-product .img-mobile .img-box > a{ position:absolute; inset:0; display:block; } .gd.page-product .img-mobile .img-box img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; } @media (max-width:980px){ .gd.page-product .img-mobile{ display:block; } .gd.page-product .product .img-wrap{ display:none; } } /* --- Electronics category --- */ .gd.page-electronics { color: var(--ink); background: #f7faf9; } .gd.page-electronics .container { max-width: 1200px; padding: 0 16px; } @media (max-width:560px){ .gd.page-electronics .container{ padding:0 22px } } .gd.page-electronics .hero-wrap{background:linear-gradient(180deg,#ffffff 0%,#f2f7f5 100%);border-bottom:1px solid #e5e7eb} .gd.page-electronics .hero{display:grid;grid-template-columns:1fr;gap:12px;align-items:center;padding:22px 0 26px} .gd.page-electronics .hero .lede{max-width:820px;margin:0 auto;text-align:center} .gd.page-electronics .hero h1{margin:0;font-size:2.1rem;font-weight:900;line-height:1.15} .gd.page-electronics .hero p{margin:10px 0 0;font-weight:500;opacity:.9} .gd.page-electronics .section{margin:22px 0 10px} .gd.page-electronics .section h2{margin:0 0 8px;font-size:1.35rem;font-weight:900} .gd.page-electronics .card{background:var(--card);border:1px solid #e5e7eb;border-radius:var(--radius);box-shadow:var(--shadow)} .gd.page-electronics .grid-4{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px} @media (max-width:1200px){ .gd.page-electronics .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))} } @media (max-width:980px){ .gd.page-electronics .grid-4{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:720px){ .gd.page-electronics .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:480px){ .gd.page-electronics .grid-4{grid-template-columns:1fr} } .gd.page-electronics .p-tile{display:flex;flex-direction:column;overflow:hidden} .gd.page-electronics .p-tile .img{background:#fafafa;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:center} .gd.page-electronics .p-tile .img a{display:block;width:100%} .gd.page-electronics .p-tile .img a img{width:100%;aspect-ratio:1/1;object-fit:contain;padding:12px} .gd.page-electronics .p-tile .meta{padding:8px} .gd.page-electronics .p-tile .name{ margin:0 0 4px;font-weight:600;font-size:1.1rem;line-height:1.1;letter-spacing:.1px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font-family:"SF Pro Rounded","Avenir Next",Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans"; } .gd.page-electronics .p-tile .row{display:flex;justify-content:space-between;align-items:baseline;gap:6px} .gd.page-electronics .p-tile .price{font-size:1.15rem;font-weight:900;color:#111827;text-decoration:none} .gd.page-electronics .p-tile .store{font-size:.9rem;color:#0b5cab;text-decoration:none;font-weight:600} .gd.page-electronics .slim-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} @media (max-width:900px){ .gd.page-electronics .slim-list{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:560px){ .gd.page-electronics .slim-list{grid-template-columns:1fr} } .gd.page-electronics .slim-list li a.price-link{ display:flex;justify-content:space-between;align-items:center;width:100%; padding:10px 12px;border:1px solid #9ccfb0;border-radius:10px; background:#AEE2C3;color:#111827;text-decoration:none;transition:background .2s ease; } .gd.page-electronics .slim-list li a.price-link:hover{ text-decoration:underline; background:#9fd9b7 } .gd.page-electronics .slim-list li strong{font-weight:600;font-size:.95rem} .gd.page-electronics .slim-list li .price{font-size:.95rem;font-weight:700;color:#111827;margin-left:8px} .gd.page-electronics .badge{display:inline-block;border-radius:999px;padding:2px 8px;border:1px solid #16a34a;font-size:.75rem;line-height:1.1;margin-left:8px} .gd.page-electronics .lowest{background:#ecfdf5;color:#166534;border-color:#16a34a} .gd.page-electronics .site-footer{background:var(--muted);padding:26px 0;color:#374151;margin-top:32px;border-top:1px solid #e5e7eb} .gd.page-electronics .site-footer .legal{text-align:center;margin:6px 0;font-weight:400;font-size:.94rem} .gd.page-electronics .site-footer .small{font-size:.88rem;opacity:.9;font-weight:400} .gd.page-electronics .mobile-bottom-tools{display:none} @media (max-width:560px){ .gd.page-electronics .mobile-bottom-tools{display:block;margin:14px 0 0} .gd.page-electronics .mobile-bottom-tools .big-search{display:flex;gap:8px;max-width:600px;margin:0 auto 8px} .gd.page-electronics .big-search input{ flex:1;padding:12px 14px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;font-size:1rem } .gd.page-electronics .big-search input::placeholder{color:#6b7280} .gd.page-electronics .big-search button{ padding:12px 14px;border:1px solid #0b5cab;border-radius:10px;background:#0b5cab;color:#fff;font-weight:600;cursor:pointer;font-size:1rem } .gd.page-electronics .mobile-bottom-tools .back-to-top{ display:inline-block;margin-top:6px;font-weight:700;color:#0b5cab;text-decoration:none } .gd.page-electronics .mobile-bottom-tools .back-to-top:hover{ text-decoration:underline } } @media (max-width:560px){ .gd.page-electronics .section{margin:18px 0 8px} .gd.page-electronics .grid-4{gap:10px} .gd.page-electronics .slim-list{gap:10px} } /* --- FAQ page --- */ .gd.page-faq .container { max-width:1200px; padding:0 16px; } @media (max-width:560px){ .gd.page-faq .container{ padding:0 22px } } .gd.page-faq .hero-wrap{ background: radial-gradient(80% 50% at 10% -10%, rgba(14,165,233,.08), transparent 60%), radial-gradient(80% 50% at 90% -10%, rgba(2,132,199,.08), transparent 60%), linear-gradient(180deg,#ffffff 0%,#f4f8f6 100%); } .gd.page-faq .hero{ padding:16px 0 18px; text-align:center; } .gd.page-faq .hero h1{ font-size:1.95rem; font-weight:900; margin:0 0 8px; letter-spacing:.2px; } .gd.page-faq .hero p{ margin:0; opacity:.95; } .gd.page-faq main{ padding:22px 0 40px; } .gd.page-faq .section{ margin:18px 0 10px; } .gd.page-faq .section h2{ margin:0 0 6px; font-size:1.25rem; font-weight:900; } .gd.page-faq .card{ background:var(--card); border:1px solid #e5e7eb; border-radius:var(--radius); box-shadow:var(--shadow); } .gd.page-faq .faq{ padding:10px; } .gd.page-faq .faq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } @media (max-width:980px){ .gd.page-faq .faq-grid{ grid-template-columns:1fr } } .gd.page-faq .qa{ border:1px solid #e5e7eb; border-radius:12px; background:#fff; margin:10px 0; overflow:hidden; } .gd.page-faq .qa summary{ list-style:none; cursor:pointer; padding:12px 14px; font-weight:800; display:flex; align-items:center; justify-content:space-between; } .gd.page-faq .qa summary::-webkit-details-marker{ display:none; } .gd.page-faq .qa summary span{ flex:1; } .gd.page-faq .qa .chev{ transition:transform .15s ease; margin-left:12px; } .gd.page-faq details[open] .chev{ transform:rotate(180deg); } .gd.page-faq .qa .answer{ padding:0 14px 14px 14px; border-top:1px dashed #e5e7eb; line-height:1.55; } .gd.page-faq .qa .answer p{ margin:10px 0 0; } .gd.page-faq .qa a{ color:#0b5cab; text-decoration:none; font-weight:700; } .gd.page-faq .quick-links{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:8px; } @media (max-width:980px){ .gd.page-faq .quick-links{ grid-template-columns:repeat(2,1fr) } } @media (max-width:560px){ .gd.page-faq .quick-links{ grid-template-columns:1fr } } .gd.page-faq .qk{ padding:12px; border:1px solid #e5e7eb; border-radius:12px; background:#fff; font-weight:700; text-decoration:none; color:#0f172a; text-align:center; } .gd.page-faq .qk:hover{ background:#f6fbff; border-color:#cfe4fb; } .gd.page-faq .site-footer{ background:var(--muted); padding:26px 0; color:#374151; margin-top:32px; border-top:1px solid #e5e7eb; } .gd.page-faq .site-footer .legal{ text-align:center; margin:6px 0; font-weight:400; font-size:.94rem; } .gd.page-faq .site-footer .small{ font-size:.88rem; opacity:.9; font-weight:400; } /* --- Home & Kitchen --- */ .gd.page-home-kitchen { color: var(--ink); background:#f7faf9; } .gd.page-home-kitchen .container { max-width:1200px; padding:0 16px; } @media (max-width:560px){ .gd.page-home-kitchen .container{ padding:0 22px } } .gd.page-home-kitchen .hero-wrap{ background:linear-gradient(180deg,#ffffff 0%,#f2f7f5 100%); border-bottom:1px solid #e5e7eb; } .gd.page-home-kitchen .hero{ display:grid; grid-template-columns:1fr; gap:12px; align-items:center; padding:22px 0 26px; } .gd.page-home-kitchen .hero .lede{ max-width:820px; margin:0 auto; text-align:center; } .gd.page-home-kitchen .hero h1{ margin:0; font-size:2.1rem; font-weight:900; line-height:1.15; } .gd.page-home-kitchen .hero p{ margin:10px 0 0; font-weight:500; opacity:.9; } .gd.page-home-kitchen .section{ margin:22px 0 10px; } .gd.page-home-kitchen .section h2{ margin:0 0 8px; font-size:1.35rem; font-weight:900; } .gd.page-home-kitchen .card{ background:var(--card); border:1px solid #e5e7eb; border-radius:var(--radius); box-shadow:var(--shadow); } .gd.page-home-kitchen .grid-4{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; } @media (max-width:1200px){ .gd.page-home-kitchen .grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)) } } @media (max-width:980px){ .gd.page-home-kitchen .grid-4{ grid-template-columns:repeat(3,minmax(0,1fr)) } } @media (max-width:720px){ .gd.page-home-kitchen .grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)) } } @media (max-width:480px){ .gd.page-home-kitchen .grid-4{ grid-template-columns:1fr } } .gd.page-home-kitchen .p-tile{ display:flex; flex-direction:column; overflow:hidden; } .gd.page-home-kitchen .p-tile .img{ background:#fafafa; border-bottom:1px solid #e5e7eb; display:flex; align-items:center; justify-content:center; } .gd.page-home-kitchen .p-tile .img a{ display:block; width:100%; } .gd.page-home-kitchen .p-tile .img a img{ width:100%; aspect-ratio:1/1; object-fit:contain; padding:12px; } .gd.page-home-kitchen .p-tile .meta{ padding:8px; } .gd.page-home-kitchen .p-tile .name{ margin:0 0 4px; font-weight:600; font-size:1.1rem; line-height:1.1; letter-spacing:.1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:"SF Pro Rounded","Avenir Next",Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans"; } .gd.page-home-kitchen .p-tile .row{ display:flex; justify-content:space-between; align-items:baseline; gap:6px; } .gd.page-home-kitchen .p-tile .price{ font-size:1.15rem; font-weight:900; color:#111827; text-decoration:none; } .gd.page-home-kitchen .p-tile .store{ font-size:.9rem; color:#0b5cab; text-decoration:none; font-weight:600; } .gd.page-home-kitchen .slim-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } @media (max-width:900px){ .gd.page-home-kitchen .slim-list{ grid-template-columns:repeat(2,minmax(0,1fr)) } } @media (max-width:560px){ .gd.page-home-kitchen .slim-list{ grid-template-columns:1fr } } .gd.page-home-kitchen .slim-list li a.price-link{ display:flex; justify-content:space-between; align-items:center; width:100%; padding:10px 12px; border:1px solid #9ccfb0; border-radius:10px; background:#AEE2C3; color:#111827; text-decoration:none; transition:background .2s ease; } .gd.page-home-kitchen .slim-list li a.price-link:hover{ text-decoration:underline; background:#9fd9b7; } .gd.page-home-kitchen .slim-list li strong{ font-weight:600; font-size:.95rem; } .gd.page-home-kitchen .slim-list li .price{ font size:.95rem; font-weight:700; color:#111827; margin-left:8px; } .gd.page-home-kitchen .badge{ display:inline-block; border-radius:999px; padding:2px 8px; border:1px solid #16a34a; font-size:.75rem; line-height:1.1; margin-left:8px; } .gd.page-home-kitchen .lowest{ background:#ecfdf5; color:#166534; border-color:#16a34a; } .gd.page-home-kitchen .site-footer{ background:var(--muted); padding:26px 0; color:#374151; margin-top:32px; border-top:1px solid #e5e7eb; } .gd.page-home-kitchen .site-footer .legal{ text-align:center; margin:6px 0; font-weight:400; font-size:.94rem; } .gd.page-home-kitchen .site-footer .small{ font-size:.88rem; opacity:.9; font-weight:400; } .gd.page-home-kitchen .mobile-bottom-tools{ display:none; } @media (max-width:560px){ .gd.page-home-kitchen .mobile-bottom-tools{ display:block; margin:14px 0 0; } .gd.page-home-kitchen .big-search{ display:flex; gap:8px; max-width:600px; margin:0 auto 8px; } .gd.page-home-kitchen .big-search input{ flex:1; padding:12px 14px; border:1px solid #cbd5e1; border-radius:10px; background:#fff; font-size:1rem; } .gd.page-home-kitchen .big-search input::placeholder{ color:#6b7280; } .gd.page-home-kitchen .big-search button{ padding:12px 14px; border:1px solid #0b5cab; border-radius:10px; background:#0b5cab; color:#fff; font-weight:600; cursor:pointer; font-size:1rem; } .gd.page-home-kitchen .back-to-top{ display:inline-block; margin-top:6px; font-weight:700; color:#0b5cab; text-decoration:none; } .gd.page-home-kitchen .back-to-top:hover{ text-decoration:underline; } } @media (max-width:560px){ .gd.page-home-kitchen .section{ margin:18px 0 8px; } .gd.page-home-kitchen .grid-4{ gap:10px; } .gd.page-home-kitchen .slim-list{ gap:10px; } } /* --- Hot Deals --- */ .gd.page-hot-deals .container { max-width:1200px; padding:0 16px; } @media (max-width:560px){ .gd.page-hot-deals .container{ padding:0 22px } } .gd.page-hot-deals .hero-wrap{ background: radial-gradient(80% 50% at 10% -10%, rgba(14,165,233,.08), transparent 60%), radial-gradient(80% 50% at 90% -10%, rgba(2,132,199,.08), transparent 60%), linear-gradient(180deg,#ffffff 0%,#f4f8f6 100%); } .gd.page-hot-deals .hero{ padding:16px 0 12px; text-align:center; } .gd.page-hot-deals .hero h1{ font-size:1.95rem; font-weight:900; margin:0 0 6px; } .gd.page-hot-deals .hero p{ margin:0; opacity:.95; } .gd.page-hot-deals .filters{ margin:14px 0; } .gd.page-hot-deals .filters .row{ display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:10px; } .gd.page-hot-deals .filters input, .gd.page-hot-deals .filters select{ padding:8px 10px; border:1px solid #cbd5e1; border-radius:10px; } .gd.page-hot-deals .filters .btn{ padding:8px 12px; border-radius:10px; border:1px solid #0b5cab; background:#0b5cab; color:#fff; font-weight:700; cursor:pointer; } @media (max-width:780px){ .gd.page-hot-deals .filters .row{ grid-template-columns:1fr 1fr } } .gd.page-hot-deals .slim-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } @media (max-width:900px){ .gd.page-hot-deals .slim-list{ grid-template-columns:repeat(2,1fr) } } @media (max-width:560px){ .gd.page-hot-deals .slim-list{ grid-template-columns:1fr } } .gd.page-hot-deals .slim-list li{ display:flex; justify-content:space-between; gap:10px; padding:12px; border:1px solid #d1fae5; border-radius:12px; background:#AEE2C3; } .gd.page-hot-deals .slim-list .left{ display:flex; gap:10px; align-items:center; } .gd.page-hot-deals .slim-list .title{ font-weight:800; } .gd.page-hot-deals .badge{ display:inline-block; border-radius:999px; padding:2px 8px; border:1px solid #16a34a; font-size:.75rem; line-height:1.1; margin-left:8px; background:#ecfdf5; color:#166534; } .gd.page-hot-deals .price-link{ text-decoration:none; color:#111827; font-weight:900; font-size:1.1rem; } .gd.page-hot-deals .price-link:hover{ text-decoration:underline; } .gd.page-hot-deals .store{ font-size:.92rem; font-weight:700; color:#0b5cab; text-decoration:none; } .gd.page-hot-deals .site-footer{ background:var(--muted); padding:26px 0; color:#374151; margin-top:32px; border-top:1px solid #e5e7eb; } .gd.page-hot-deals .site-footer .legal{ text-align:center; margin:6px 0; font-weight:400; font-size:.94rem; } .gd.page-hot-deals .site-footer .small{ font-size:.88rem; opacity:.9; font-weight:400; } /* ========== Generic footer typography helpers ========== */ .gd .site-footer { text-align: center; font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 0.9rem; color: #374151; } .gd .site-footer .footer-links { display: inline-block; margin-bottom: 8px; font-weight: 500; } .gd .site-footer .legal.small { opacity: 0.8; font-size: 0.85rem; font-weight: 400; } /* ===== Safety guard: never apply black hero outside product pages ===== */ .gd:not(.page-product) .hero { background: transparent; } /* Homepage presenter avatars */ .gd .reviewer-thumbs{ display:flex;justify-content:center;align-items:center; gap:16px;margin:10px 0 14px; } .gd .reviewer-thumbs .avatar{ width:84px;height:84px;border-radius:50%; object-fit:cover; border:1px solid #e5e7eb;box-shadow:var(--shadow);background:#fff; } .gd .reviewer-thumbs .avatar--owl{ border:2px solid var(--gold); box-shadow:0 0 0 3px rgba(255,214,74,.25), var(--shadow); } /* Clickable mascot focus ring */ .gd .reviewer-thumbs .avatar-link:focus-visible{ outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 50%; } /* Background images */ .gift-guru-hero{ background: radial-gradient(100% 120% at 60% 50%, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 60%), url("/images/cave-bg.webp"); background-size: cover; background-position: center; padding: 40px 0; } @media (max-width: 720px){ .gift-guru-hero{ background: radial-gradient(100% 120% at 60% 50%, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 60%), url("/images/cave-bg-mobile.webp"); padding: 24px 0; } } /* Grid layout */ .guru-wrap{ display: grid; grid-template-columns: 1fr 1fr; /* desktop: form + art */ gap: 24px; max-width: 1200px; margin: 0 auto; padding: 0 16px; } .form-col{ display: flex; align-items: center; } .art-col{ display: flex; align-items: end; justify-content: center; } @media (max-width: 720px){ .guru-wrap{ grid-template-columns: 1fr; gap: 16px; } .art-col{ order: 3; align-items: center; } .form-col{ order: 2; } } /* Mobile brand strip (hidden on desktop) */ .mobile-brand{ display: none; } @media (max-width: 720px){ .mobile-brand{ display: flex; align-items: center; gap: 12px; margin: 0 auto 8px auto; padding: 8px 12px; max-width: 680px; background: rgba(0,17,19,0.6); border-radius: 12px; backdrop-filter: blur(2px); } .mobile-brand-logo{ width: 56px; height: 56px; object-fit: contain; } .mobile-brand-text{ line-height: 1.1; } .mobile-brand-title{ font-size: 22px; font-weight: 700; color: #FFD600; margin: 0; } .mobile-brand-tag{ font-size: 13px; color: #E9F7EF; margin: 2px 0 0 0; } } .gift-guru-hero{ background: url("/images/cave-bg.webp"), radial-gradient(100% 120% at 60% 50%, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 60%); background-size: cover, cover; background-position: center, center; padding: 40px 0; } @media (max-width: 720px){ .gift-guru-hero{ background: url("/images/cave-bg-mobile.webp"), radial-gradient(100% 120% at 60% 50%, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 60%); background-size: cover, cover; background-position: center, center; padding: 24px 0; } } .gift-guru-hero{ background: url("/images/cave-bg.png"), radial-gradient(100% 120% at 60% 50%, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 60%); background-size: cover, cover; background-position: center, center; padding: 40px 0; } /* EXACT native ratio of your art; this is what locks things together */ .guru-canvas{ position: relative; aspect-ratio: 1429 / 953; width: min(1200px, 95vw); margin: 0 auto; } /* Base and overlay fill the same box 1:1 */ .guru-canvas .cave, .guru-canvas .guru{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; } .guru-canvas .guru{ pointer-events: none; z-index: 2; } /* Form above both images */ .guru-canvas .form-card{ position: absolute; z-index: 3; left: 4%; top: 6%; background:#fff; border-radius:16px; padding:16px; box-shadow: 0 8px 30px rgba(0,0,0,.2); } /* Mobile: scale the whole canvas, not the layers independently */ @media (max-width: 720px){ .guru-canvas{ width: 96vw; } .guru-canvas .form-card{ left: 5%; top: 6%; right: 5%; } } /* ============================ About Page (page-about) ============================ */ body.page-about { margin: 0; font-family: Helvetica, Arial, sans-serif; } /* Tables on About page */ .page-about table { border-collapse: separate; border-spacing: 2px; width: 100%; } .page-about table table { border-spacing: 6px; } .page-about table table td { padding: 8px; } /* Typography spacing (text container only) */ .page-about .about-text h1 { margin: 0 0 2px; } .page-about .about-text h2 { margin: 6px 0 4px; } .page-about .about-text p { margin: 0 0 6px; line-height: 1.25; } .page-about .about-text ul { margin: 4px 0 6px 18px; } .page-about .about-text li { margin: 1px 0; line-height: 1.25; } /* Column adjustments */ .page-about .about-text td:last-child { padding-right: 20px; padding-top: 10px; } /* Tighten the last paragraph before the HR */ .page-about .about-text p:last-of-type { margin-bottom: 2px; } /* Remove stray
below table */ .page-about .about-text table + br { display: none; } /* Ensure Guru/Hunt image hugs right edge */ .page-about td[align="right"] img { display: block; margin-left: auto; } body.gd { margin: 0; padding: 0; } @media (max-width: 768px) { body.gd.page-registry-index .container { padding-left: 0; padding-right: 0; } } /* ========================================= Gift Guru — Welcome Mobile override: toggle position File: /css/site.css Last updated: 2025-09-06 BB ========================================= */ @media (max-width: 768px) { .hero .toggle-wrap { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); } } /* Gift Guru — mobile fixes */ @media (max-width: 520px){ .hero, .art-frame { position: relative; } .toggle-wrap{ position: absolute; left: 8%; right: 8%; bottom: 14%; z-index: 3; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,0.55); backdrop-filter: saturate(110%) blur(0.5px); } .toggle-copy{ margin: 0 0 8px; font-size: 16px; line-height: 1.25; color: #fff; } .toggle-copy strong{ display:block; font-size: 17px; } .toggle-sub{ display:block; opacity: 0.9; } .toggle-buttons{ display: flex; flex-wrap: wrap; gap: 8px; } .toggle-buttons .btn{ flex: 1 1 48%; min-width: 140px; text-align: center; white-space: nowrap; } .art-frame{ overflow: hidden; } } .checkbox { display: flex; align-items: center; gap: 0.5em; } .checkbox input[type="checkbox"] { margin: 0; position: relative; } /* Product page layout */ .page-product .grid { display: grid; grid-template-columns: 2fr 1.2fr; gap: 22px; } @media (max-width:980px) { .page-product .grid { grid-template-columns: 1fr; } } /* ============================= Categories image strip (7 boxes @120px) + optional narrow arrow Canonical block • 2025-09-12 ============================= */ /* Base grid */ .categories-row { --tileW: 120px; --tileH: 160px; --arrowW: 50px; display: grid; grid-template-columns: repeat(7, var(--tileW)); gap: max(10px, calc((100% - 840px) / 6)); width: 100%; margin: 16px auto 8px; justify-content: start; align-items: start; justify-items: center; } /* If the arrow is present, add its column and recompute gap */ .categories-row.with-arrow { grid-template-columns: repeat(7, var(--tileW)) var(--arrowW); gap: max(10px, calc((100% - 890px) / 7)); } /* Tile visuals */ .category-box { max-width: var(--tileW); text-align: center; } .category-box img { width: var(--tileW); height: 120px; object-fit: contain; border-radius: 8px; background: #f9f9f9; display: block; } .category-box p { margin-top: 6px; font-size: 0.85rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Narrow 50 px “More Categories” arrow tile */ .category-more { position: relative; width: var(--arrowW); justify-self: end; } .category-more .more-btn{ width: var(--arrowW); height: var(--tileH); display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; cursor: pointer; box-shadow: 0 8px 20px rgba(2,6,23,.06); color: #0ea5e9; } .category-more .more-btn svg{ width: 22px; height: 22px; } .category-more .more-btn .label{ font-size: 10px; margin-top: 6px; color: #0f172a; } /* Dropdown menu for overflow categories */ .category-more .more-menu{ position: absolute; top: calc(var(--tileH) + 6px); right: 0; list-style: none; margin: 0; padding: 8px; min-width: 220px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 10px 30px rgba(2,6,23,.14); display: none; } .category-more .more-menu.open{ display: block; } .category-more .more-menu li a{ display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: #0f172a; font-size: 14px; } .category-more .more-menu li a:hover{ background: #f3f4f6; } /* Full-bleed variant */ .categories-row.categories-row--bleed{ width: 100vw; margin: 16px 0 8px; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0 16px; overflow: clip; } /* Responsive breakpoints */ @media (max-width: 1100px) { .categories-row { grid-template-columns: repeat(4, 120px); gap: max(10px, calc((100% - 480px) / 3)); } .category-more{ display:none; } } @media (max-width: 768px) { .categories-row { grid-template-columns: repeat(2, 120px); gap: max(10px, calc((100% - 240px) / 1)); } } @media (max-width: 480px) { .categories-row { grid-template-columns: 120px; gap: 12px; justify-content: center; } } /* ===== End Categories strip ===== */ /* Mobile: make select + input look like one control */ @media (max-width: 560px){ .big-search.with-cat .cat { display:block; position:relative; } .big-search.with-cat .cat select{ height:44px; border-top-right-radius:0; border-bottom-right-radius:0; border-right:0; font-weight:700; } .big-search.with-cat input{ height:44px; border-top-left-radius:0; border-bottom-left-radius:0; border-left:0; } .big-search.with-cat .cat::after{ content:""; position:absolute; right:-1px; top:6px; bottom:6px; width:1px; background:#cbd5e1; pointer-events:none; } } /* Show the category selector on phones/tablets */ @media (max-width: 768px){ .big-search.with-cat .cat { display:block; } } /* Prevent iOS zoom on focus */ @media (max-width: 768px){ .big-search.with-cat input, .big-search.with-cat .cat select { font-size:16px; } } /* ========== Categories Strip MODULE (parallel) — namespaced .catsmod-* ========== */ /* Safe alongside your existing .categories-strip. Matches the 7×120 + 50 arrow spec. */ .gd .catsmod-wrap { margin: 8px 0; } .gd .catsmod-strip{ display:grid; grid-template-columns: repeat(7, 120px) 50px; align-items:center; column-gap: 12px; justify-content: space-between; padding: 8px 0; } .gd .catsmod-tiles{ display: contents; } .gd .catsmod-cat120{ width:120px; display:flex; flex-direction:column; align-items:center; text-decoration:none; color: var(--ink); } .gd .catsmod-cat120 img{ width:120px; height:120px; object-fit:contain; display:block; background:#f9f9f9; border-radius:10px; border:1px solid #e5e7eb; } .gd .catsmod-cat120 span{ font-size:.85rem; font-weight:700; margin-top:6px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gd .catsmod-arrow{ width:50px; height:120px; display:flex; align-items:center; justify-content:center; border:1px solid #e5e7eb; border-radius:10px; background:#fff; cursor:pointer; color:#0b5cab; justify-self:end; } .gd .catsmod-arrow:focus-visible{ outline:2px solid #0b5cab; outline-offset:2px; } .gd .catsmod-arrow[aria-expanded="true"] svg{ transform: rotate(180deg); transition: transform .15s ease; } .gd .catsmod-overflow{ position:relative; margin-top:8px; } .gd .catsmod-overflow ul{ list-style:none; margin:0; padding:10px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:8px; } .gd .catsmod-overflow a{ display:block; padding:8px 10px; border:1px solid #e5e7eb; border-radius:8px; text-decoration:none; color:var(--ink); font-weight:700; text-align:center; } .gd .catsmod-overflow a:hover{ background:#f7faf9; } /* Desktop-only for the catsmod strip and overflow (updated to 980px) */ @media (max-width:980px){ .gd .catsmod-wrap, .gd .catsmod-strip, .gd .catsmod-overflow { display:none !important; } } :root{ --icon-size: 28px; --icon-gap: 14px; --icon-stroke: 3; --icon-color: #2f3b4a; --icon-saved: #28A745; --icon-added: #E11D48; } @media (max-width:980px){ :root{ --icon-size: 26px; --icon-gap: 12px; } } @media (prefers-color-scheme: dark){ :root{ --icon-color: #E5E7EB; } } /* Global icon buttons for product tiles */ .p-actions{ margin:8px 0 16px; display:flex; justify-content:center; align-items:center; gap:var(--icon-gap); } .icon-btn{ appearance:none; background:transparent; border:0; cursor:pointer; padding:10px; border-radius:12px; line-height:0; min-width:44px; min-height:44px; color:var(--icon-color); transition:transform .15s ease, color .15s ease; } .icon-btn:hover{ transform:translateY(-1px); } .icon-btn:focus-visible{ outline:2px solid var(--icon-saved); outline-offset:2px; } .icon-btn .icon{ width:var(--icon-size); height:var(--icon-size); display:block; } .icon-btn .icon use[href="#icon-plus"]{ stroke-width:var(--icon-stroke); } .icon-btn.is-saved{ color:var(--icon-saved); } .icon-btn.is-added{ color:var(--icon-added); } @media (prefers-reduced-motion: reduce){ .icon-btn{ transition:none; } .icon-btn:hover{ transform:none; } } /* =========================== GetDetails CSS (continuation) Everything below assumes .gd namespace on =========================== */ /* -------- Utilities -------- */ .gd .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0} .gd .container{max-width:1200px;margin:0 auto;padding:0 16px} .gd .wrap{padding:24px} .gd .grid{display:grid;gap:16px} .gd .grid-center{place-items:center} .gd .flex{display:flex} .gd .items-center{align-items:center} .gd .justify-between{justify-content:space-between} .gd .gap-8{gap:8px} .gd .gap-12{gap:12px} .gd .mt-16{margin-top:16px} .gd .mt-24{margin-top:24px} .gd .mt-32{margin-top:32px} .gd .hidden{display:none} /* Typography */ .gd h1{font-size:clamp(1.8rem,2.8vw,2.4rem);line-height:1.2;margin:0 0 12px;color:#0f172a} .gd h2{font-size:clamp(1.4rem,2vw,1.8rem);line-height:1.25;margin:0 0 10px;color:#0f172a} .gd h3{font-size:1.1rem;margin:0 0 8px;color:#111827} .gd p{margin:0 0 12px} .gd a{color:#0b5cab;text-decoration:none} .gd a:hover{text-decoration:underline} /* Buttons */ .gd .btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:12px;border:1px solid #cbd5e1;background:#fff;color:#0f172a;font-weight:600;cursor:pointer;transition:transform .08s ease,background .2s ease} .gd .btn:hover{background:#f3f4f6} .gd .btn:active{transform:translateY(1px)} .gd .btn-primary{background:#28A745;border-color:#23913d;color:#fff} .gd .btn-primary:hover{filter:brightness(.98)} /* Cards */ .gd .card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.03)} .gd .card .card-body{padding:16px} /* Images */ .gd img{max-width:100%;height:auto;display:block} .gd .img-1x1{aspect-ratio:1/1;object-fit:contain} /* ------------- Layout: Header / Footer ------------- */ .gd .site-header{background:#001113;color:#fff} .gd .site-header .inner{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;gap:12px} .gd .site-header .brand{display:flex;align-items:center;gap:10px} .gd .site-header .brand .logo{width:60px;height:60px;display:block} .gd .site-header nav a{color:#dbeafe;font-weight:600;padding:8px 10px;border-radius:8px} .gd .site-header nav a:hover{background:rgba(255,255,255,.08)} .gd .site-footer{background:#0b1220;color:#cbd5e1;padding:24px} .gd .site-footer a{color:#e2e8f0} /* ------------- Hero ------------- */ .gd .hero{position:relative} .gd .hero .hero-media{width:100%;min-height:280px;background:#FFEDCD;display:grid;place-items:center} .gd .hero .caption{position:absolute;left:16px;bottom:16px;background:rgba(0,0,0,.55);color:#fff;padding:8px 10px;border-radius:10px;font-weight:600} /* ------------- Category Strip: Desktop 7 tiles + arrow ------------- */ .gd .categories-row-wrap{background:#fff;border-bottom:1px solid #e5e7eb} .gd .categories-strip{display:grid;grid-auto-flow:column;grid-auto-columns:120px;gap:12px;align-items:center;padding:12px 16px} .gd .categories-strip .tile{height:120px;border:1px solid #e5e7eb;border-radius:16px;background:#fff;display:grid;place-items:center;text-align:center;padding:8px} .gd .categories-strip .tile .label{margin-top:8px;font-size:.9rem;color:#111827} .gd .categories-strip .arrow{width:50px;display:grid;place-items:center;border:1px dashed #cbd5e1;border-radius:16px;color:#334155} /* Hide desktop strip on mobile/tablet per locked rule */ @media (max-width:980px){ .gd .categories-row-wrap, .gd .categories-strip, .gd .cat-overflow, .gd .gd .catsmod-*{display:none !important} } /* ------------- Category Scroller: Mobile only ------------- */ .gd .catstrip-mob{display:none} @media (max-width:980px){ .gd .catstrip-mob{display:block} .gd .mob-cats{display:flex;gap:12px;overflow-x:auto;padding:10px 16px;scroll-snap-type:x mandatory} .gd .mob-cats .tile{flex:0 0 auto;width:120px;height:120px;border:1px solid #e5e7eb;border-radius:16px;background:#fff;display:grid;place-items:center;scroll-snap-align:start} } /* ------------- Grid helpers ------------- */ .gd .grid-4{display:grid;gap:16px;grid-template-columns:repeat(5,minmax(0,1fr))} @media (max-width:1200px){.gd .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}} @media (max-width:980px){.gd .grid-4{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:720px){.gd .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:480px){.gd .grid-4{grid-template-columns:repeat(2,minmax(150px,1fr))}} .gd .grid-3{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))} @media (max-width:980px){.gd .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){.gd .grid-3{grid-template-columns:repeat(1,minmax(0,1fr))}} /* ------------- Split Tile Bundle (locked) ------------- */ .gd .card-tile{display:grid;grid-template-rows:auto 1fr;gap:10px;border:1px solid #e5e7eb;border-radius:16px;background:#fff;padding:12px} .gd .card-tile .thumb{aspect-ratio:1/1;display:grid;place-items:center} .gd .card-tile .meta{display:grid;gap:6px} .gd .card-tile .title{font-weight:700;font-size:.98rem;color:#0f172a} .gd .card-tile .price{font-weight:700;color:#0b5cab} .gd .card-tile .cta{margin-top:auto} /* ------------- Product Page media slots ------------- */ .gd .media-hero{width:100%;aspect-ratio:5/3;display:grid;place-items:center;background:#f8fafc;border:1px solid #e5e7eb;border-radius:18px} .gd .media-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} @media (max-width:720px){.gd .media-row{grid-template-columns:repeat(2,minmax(0,1fr))}} /* ------------- Hot Deals page ------------- */ .gd.page-hot-deals .lead{font-size:1.05rem;color:#334155} .gd.page-hot-deals .deal-grid{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr))} @media (max-width:1200px){.gd.page-hot-deals .deal-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:900px){.gd.page-hot-deals .deal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){.gd.page-hot-deals .deal-grid{grid-template-columns:1fr}} /* ------------- Categories Hub (15 tiles) ------------- */ .gd.page-categories .hub-grid{display:grid;gap:16px;grid-template-columns:repeat(5,minmax(0,1fr))} @media (max-width:1200px){.gd.page-categories .hub-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} @media (max-width:980px){.gd.page-categories .hub-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:720px){.gd.page-categories .hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:480px){.gd.page-categories .hub-grid{grid-template-columns:1fr}} .gd.page-categories .hub-tile{border:1px solid #e5e7eb;border-radius:16px;background:#fff;display:grid;place-items:center;padding:12px;text-align:center} .gd.page-categories .hub-tile .name{margin-top:8px;font-weight:700;color:#111827} /* ------------- Forms ------------- */ .gd .form{display:grid;gap:12px} .gd .field{display:grid;gap:6px} .gd .field input, .gd .field select, .gd .field textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid #cbd5e1;background:#fff;color:#0f172a} .gd .field input:focus, .gd .field select:focus, .gd .field textarea:focus{outline:2px solid #9fc6ff;outline-offset:2px} /* ------------- Tables ------------- */ .gd table{width:100%;border-collapse:separate;border-spacing:0} .gd th, .gd td{padding:10px;border-bottom:1px solid #e5e7eb;text-align:left} .gd thead th{background:#f8fafc;color:#0f172a;font-weight:700} /* ------------- Alerts ------------- */ .gd .alert{border-radius:12px;padding:12px} .gd .alert.info{background:#e0f2fe;border:1px solid #bae6fd;color:#0c4a6e} .gd .alert.success{background:#e7f7ee;border:1px solid #b7e4c7;color:#14532d} .gd .alert.warn{background:#fff7ed;border:1px solid #fed7aa;color:#7c2d12} /* ------------- Accessibility and Motion ------------- */ @media (prefers-reduced-motion: reduce){ .gd *{transition:none !important;animation:none !important} } /* ------------- Kitchen page continuation safety close ------------- */ /* If your pasted first-half left an open brace around .page-home-kitchen blocks, the following keeps file integrity safe without doubling styles. */ .gd ._integrity-sentinel{display:none} /* ------------- Utilities: spacing, color helpers ------------- */ .gd .text-muted{color:#6b7280} .gd .text-ink{color:#0f172a} .gd .bg-paper{background:#f8fafc} .gd .bg-white{background:#fff} .gd .ring{box-shadow:0 0 0 1px #e5e7eb inset} /* ------------- Footer credits ------------- */ .gd .credits{font-size:.9rem;color:#64748b} /* === Scroller Unification: force the pretty mobile scroller sitewide === */ /* Mobile: hide every legacy scroller variant except .catstrip-mob */ @media (max-width:980px){ .gd .categories-row-wrap, .gd .categories-strip, .gd .cat-overflow, .gd [class*="catstrip"]:not(.catstrip-mob), .gd [class*="cat-strip"]:not(.catstrip-mob), .gd [class*="categories-scroll"], .gd .catsmod-*, .gd .legacy-cats, .gd .old-cats, .gd .cats-ugly { display:none !important; } /* Show the pretty scroller */ .gd .catstrip-mob { display:block !important; } } /* Fix: correctly hide legacy module strip on mobile */ @media (max-width:980px){ .gd [class^="catsmod-"], .gd [class*=" catsmod-"], .gd .categories-strip, .gd .categories-row, .gd .cat-overflow { display:none !important; } .gd .catstrip-mob { display:flex !important; } } /* =========================== Product Scroller (unified) =========================== */ .gd .mob-scroller { display:none; position:relative; overflow:hidden; margin:8px 0; } @media (max-width:980px){ .gd .mob-scroller{ display:block; } } .gd .mob-scroller .scroll-btn{ position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border:1px solid #e5e7eb; border-radius:9999px; background:#fff; box-shadow:0 6px 18px rgba(2,6,23,.12); cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:2; } .gd .mob-scroller .scroll-btn.prev{ left:6px; } .gd .mob-scroller .scroll-btn.next{ right:6px; } .gd .mob-scroller .scroll-btn[disabled]{ opacity:.35; cursor:default; } .gd .mob-scroller .scroll-wrap{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:2px 52px; scroll-behavior:smooth; } .gd .mob-scroller .scroll-wrap::-webkit-scrollbar{ display:none; } .gd .mob-scroller .snap{ min-width:97%; scroll-snap-align:start; } @media (max-width:360px){ .gd .mob-scroller .snap{ min-width:98.5% !important; } } @media (prefers-reduced-motion:reduce){ .gd .mob-scroller .scroll-wrap{ scroll-behavior:auto !important; } } /* ========================================================= FACTORY PRODUCT PAGE BASELINE Source: /pages/products/[brand]/[slug]/index.php Locked: Sony WH-1000XM5 baseline — 2025-10-12 ========================================================= */ .page-product main.container{max-width:1200px;margin:0 auto;padding:8px 14px} .page-product .grid{display:grid;grid-template-columns:2fr 1.1fr;gap:22px} @media(max-width:980px){.page-product .grid{grid-template-columns:1fr}} /* Shared Card Styles */ .page-product .card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.04);padding:16px} .page-product .block{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;margin-top:12px} /* ===== Isolated Variant: Takeaway Block ===== */ .page-product .block.takeaway-box { all: unset; /* clears inherited .block styles */ display: flex; justify-content: space-between; align-items: center; gap: 18px; background: #B5FFA7; /* GetDetails light green */ border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px 18px; margin-top: 14px; position: relative; z-index: 1; box-sizing: border-box; /* restore standard sizing */ font-family: inherit; /* preserve font family */ } /* Left text section */ .page-product .block.takeaway-box .takeaway-text { flex: 3; text-align: justify; font-size: 1.03rem; /* breaks global var(--ink) */ line-height: 1.45; color: #111827; /* readable dark slate */ } .page-product .block.takeaway-box .takeaway-text p { margin: 4px; font-size: 1rem; line-height: 1.45; color: #111827; } /* Right indicator section */ .page-product .block.takeaway-box .indicator-wrap { flex: 1; text-align: center; margin-top: 2px; } /* Orb animation */ .page-product .block.takeaway-box .indicator-orb { width: 34px; height: 34px; margin: 0 auto 4px; border-radius: 50%; animation: pulse-strong 2.4s infinite cubic-bezier(0.45, 0, 0.55, 1); will-change: transform, box-shadow; } @keyframes pulse-strong { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(0,0,0,0); } 40% { transform: scale(1.18); box-shadow: 0 0 16px rgba(59,130,246,0.45); /* soft glow matching orb color */ } 60% { transform: scale(1.12); box-shadow: 0 0 10px rgba(59,130,246,0.25); } /* Orb colors (engine-fed) */ .page-product .block.takeaway-box .indicator-orb.green { background: #22c55e; } /* New Discovery */ .page-product .block.takeaway-box .indicator-orb.blue { background: #3b82f6; } /* Price Drop! */ .page-product .block.takeaway-box .indicator-orb.yellow { background: #FFD700; } /* Now Trending! */ .page-product .block.takeaway-box .indicator-orb.red { background: #e60000; } /* Red Hot! Buy Now! */ /* Caption under orb */ .page-product .block.takeaway-box .indicator-caption { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.2px; text-align: center; color: #111827; } .page-product h1,h2,h3{margin:0 0 10px;font-weight:800} .page-product h1{text-align:center;font-size:1.6rem} .page-product h2.section-title{font-size:1.4rem} /* Hero + Video Section */ .page-product .hero{border-radius:12px;overflow:hidden;background:#000;margin-bottom:10px} .page-product .hero iframe{width:100%;aspect-ratio:16/9;border:0} .page-product .creator-credit{font-size:.8rem;margin-top:4px;color:#555} .page-product .creator-credit a{color:#0b5cab;text-decoration:none} .page-product .creator-credit a:hover{text-decoration:underline} /* Product Photo */ .page-product .product-photo{border-radius:12px;overflow:hidden;background:#fafafa;border:1px solid #e5e7eb;margin-bottom:12px} .page-product .product-photo img{width:100%;height:auto;display:block;object-fit:contain} /* Store / Price Section */ .page-product .price-title{text-align:center;font-weight:700;color:#e60000;margin:6px 0 8px} .page-product .store-list{list-style:none;margin:0;padding:0;display:grid;gap:6px} .page-product .store-list li{display:flex;justify-content:space-between;align-items:center} .page-product .store-list .store{color:#0b5cab;font-weight:600;text-decoration:none} .page-product .store-list .price{font-weight:800} .page-product .badge.lowest{background:#ecfdf5;color:#166534;border:1px solid #16a34a;border-radius:999px;padding:2px 8px;font-size:.75rem;margin-right:6px} /* Specs / Pros-Cons / Takeaway */ .page-product .list{margin-left:18px;font-size:.9rem;line-height:1.25} .page-product .pros-cons .pc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:700px){.page-product .pros-cons .pc-grid{grid-template-columns:1fr}} .page-product .pc-toggle{margin-top:8px;background:#0ea5e9;color:#fff;border:0;border-radius:8px;padding:8px 12px;font-weight:700;cursor:pointer} .page-product .pros-cons.collapsed .list li:nth-child(n+3){display:none} /* Tagline */ .page-product .tagline-card{background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;padding:14px 16px;margin-top:12px;text-align:center;box-shadow:0 4px 14px rgba(0,0,0,.06)} .page-product .tagline-card a{font-size:.95rem;color:#0b5cab;font-weight:600;text-decoration:none} .page-product .tagline-card a:hover{text-decoration:underline} /* Thumbnails + Related */ .page-product .thumb-row{display:flex;gap:8px;overflow-x:auto;margin-top:8px;padding-bottom:4px} .page-product .thumb{flex:0 0 46%;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden;cursor:pointer;background:#fff} .page-product .thumb img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover} .page-product .meta{padding:6px 8px} .page-product .title{font-size:.85rem;font-weight:700} .page-product .channel{font-size:.75rem;color:#555} .page-product .related-grid{display:grid;gap:10px;margin-top:8px} .page-product .related-grid .tile{border:1px solid #e5e7eb;border-radius:10px;overflow:hidden;cursor:pointer;background:#fff} .page-product .related-grid .vid img{width:100%;aspect-ratio:16/9;object-fit:cover} .page-product .related-grid .label{padding:6px 8px;font-weight:600;font-size:.9rem} /* Promo Rotators */ .page-product .rotators-wrap{margin-top:12px} .page-product .rotator{position:relative;width:100%;margin:10px auto;text-align:center} .page-product .rotator .frame{border-radius:12px;overflow:hidden;background:#f2f4f7;position:relative} .page-product .rotator .frame::before{content:"";display:block;aspect-ratio:16/9} .page-product .rotator img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .4s ease} .hidden{display:none!important} /* Responsive Image Swap */ .page-product .img-mobile{display:none;margin-bottom:12px} .page-product .mobile-cta{display:none;text-align:center;font-weight:900;margin-bottom:10px} @media(max-width:980px){ .page-product .img-mobile{display:block} .page-product .mobile-cta{display:block} } /* === Gift Guy Page Styles === */ .gg-page { display: flex; flex-direction: column; align-items: center; text-align: center; background: #fdfaf4; min-height: 100vh; padding-bottom: 2rem; } .gg-hero img { max-width: 100%; height: auto; margin-top: 1rem; } .gg-form-wrap { margin-top: 1.5rem; } .did-you-mean { background: var(--muted); border-left: 4px solid var(--brand); padding: 10px 15px; margin: 10px 0 20px 0; border-radius: 6px; font-size: 0.95rem; color: var(--ink); } .did-you-mean strong { color: var(--brand-dark); } .did-you-mean em { color: #555; } /* === Global safety override: normal text vs footer === */ /* All site paragraphs: use dark body text */ .gd p { color: var(--brand-dark); } /* Footer (dark band) keeps yellow text */ .gd footer p, .gd footer li, .gd footer a, .gd footer small { color: var(--brand); /* your yellow */ }