/* ========================================================= Coleção de Afetos — Design System Site de venda de polaroides e ímãs personalizados ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Poppins:wght@400;500;600;700&family=Caveat:wght@600;700&family=Kalam:wght@400;700&family=Shadows+Into+Light&family=Dancing+Script:wght@600;700&display=swap'); :root{ /* Paleta */ --cream:#faf3ea; --cream-2:#f2e6d6; --paper:#fffaf2; --ink:#2b241d; --ink-soft:#5c5246; --terracotta:#d96b3f; --terracotta-dark:#b8532c; --sage:#7c8f6e; --gold:#e0a940; --line:#e4d7c3; --white:#ffffff; --shadow-sm: 0 2px 8px rgba(43,36,29,.08); --shadow-md: 0 8px 24px rgba(43,36,29,.12); --shadow-lg: 0 20px 50px rgba(43,36,29,.18); --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --font-display: 'Fraunces', serif; --font-body: 'Poppins', sans-serif; --font-hand: 'Caveat', cursive; --container: 1180px; } /* Temas sazonais — troca só a cor de destaque por enquanto (ponto de partida, o visual completo de cada tema ainda vai ser refinado). Ativado via data-theme no , definido em js/theme.js a partir do painel do dono. */ :root[data-theme="natalino"]{ --terracotta:#b8352f; --terracotta-dark:#8f2822; --gold:#3c6e47; } :root[data-theme="ano_novo"]{ --terracotta:#a9822b; --terracotta-dark:#7c5f1c; --gold:#2b2b2b; } *,*::before,*::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin:0; font-family: var(--font-body); color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; } img{ max-width:100%; display:block; } a{ color: inherit; text-decoration:none; } ul{ margin:0; padding:0; list-style:none; } button{ font-family: inherit; cursor:pointer; } input,textarea,select{ font-family: inherit; } h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; } p{ margin:0 0 1em; color: var(--ink-soft); line-height:1.65; } .container{ max-width: var(--container); margin: 0 auto; padding: 0 24px; } .bg-texture{ background-image: radial-gradient(rgba(43,36,29,.06) 1px, transparent 1px); background-size: 16px 16px; } /* ---------- Botões ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding: 14px 28px; border-radius: 100px; font-weight: 600; font-size: 15px; border: 2px solid transparent; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease; white-space: nowrap; } .btn:active{ transform: translateY(1px); } .btn-primary{ background-color: var(--terracotta); color: var(--white); box-shadow: var(--shadow-sm); } .btn-primary:hover{ background-color: var(--terracotta-dark); box-shadow: var(--shadow-md); } .btn-secondary{ background: transparent; color: var(--ink); border-color: var(--ink); } .btn-secondary:hover{ background: var(--ink); color: var(--white); } .btn-light{ background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm); } .btn-light:hover{ box-shadow: var(--shadow-md); transform: translateY(-1px); } .btn-block{ width:100%; } .btn-sm{ padding: 9px 18px; font-size:13px; } .btn[disabled]{ opacity:.5; pointer-events:none; } .btn-icon{ width:40px; height:40px; padding:0; border-radius:50%; background: var(--white); box-shadow: var(--shadow-sm); } /* ---------- Header ---------- */ .site-header{ position: sticky; top:0; z-index: 100; background: rgba(250,243,234,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .header-inner{ display:flex; align-items:center; justify-content:space-between; padding: 16px 24px; } .logo{ font-family: var(--font-display); font-size: 20px; font-weight: 700; display:flex; align-items:center; gap:8px; white-space: nowrap; flex-shrink: 0; } .logo span{ color: var(--terracotta); } .nav-links{ display:flex; gap:26px; font-weight:500; font-size:15px; } .nav-links a{ position:relative; padding: 4px 0; } .nav-links a::after{ content:''; position:absolute; left:0; bottom:-2px; height:2px; width:0; background: var(--terracotta); transition: width .2s ease; } .nav-links a:hover::after, .nav-links a.active::after{ width:100%; } .header-actions{ display:flex; align-items:center; gap:12px; } .cart-btn{ position:relative; } .cart-count{ position:absolute; top:-6px; right:-6px; background: var(--terracotta); color:#fff; font-size:11px; font-weight:700; width:19px; height:19px; border-radius:50%; display:flex; align-items:center; justify-content:center; } .nav-toggle{ display:none; } /* ---------- Trust bar ---------- */ .trust-bar{ background: var(--ink); color: var(--cream); font-size: 13px; } .trust-bar .container{ display:flex; gap:28px; justify-content:center; flex-wrap:wrap; padding: 9px 24px; } .trust-bar span{ display:flex; align-items:center; gap:6px; opacity:.9; } /* ---------- Hero ---------- */ .hero{ padding: 72px 0 40px; position:relative; overflow:hidden; } .hero-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items:center; } .eyebrow{ display:inline-flex; align-items:center; gap:8px; background: var(--cream-2); color: var(--terracotta-dark); padding:6px 14px; border-radius:100px; font-size:13px; font-weight:600; margin-bottom:18px; } .hero h1{ font-size: 52px; } .hero h1 em{ font-style: normal; color: var(--terracotta); font-family: var(--font-hand); font-size: 1.15em; } .hero-sub{ font-size:17px; max-width: 480px; } .hero-actions{ display:flex; gap:14px; margin-top: 28px; flex-wrap:wrap; } .hero-stats{ display:flex; gap:32px; margin-top:40px; } .hero-stats div strong{ display:block; font-family:var(--font-display); font-size:26px; } .hero-stats div span{ font-size:13px; color:var(--ink-soft); } /* Polaroid stack illustration */ .polaroid-stage{ position: relative; height: 460px; } .polaroid{ position:absolute; background: var(--white); padding: 14px 14px 46px; border-radius: 4px; box-shadow: var(--shadow-lg); } .polaroid .photo{ width:100%; aspect-ratio: 1/1; border-radius: 2px; background: linear-gradient(135deg,var(--sage),var(--gold) 60%, var(--terracotta)); position:relative; overflow:hidden; } .polaroid .photo svg{ position:absolute; inset:0; margin:auto; width:38%; height:38%; opacity:.85; } .polaroid .cap{ font-family: var(--font-hand); font-size: 22px; text-align:center; margin-top:10px; color: var(--ink); } .p1{ width: 230px; top: 10px; left: 40px; transform: rotate(-9deg); z-index:2; } .p2{ width: 210px; top: 90px; right: 10px; transform: rotate(7deg); z-index:1; } .p3{ width: 195px; bottom: 10px; left: 100px; transform: rotate(4deg); z-index:3; } .tape{ position:absolute; width:90px; height:30px; background: rgba(224,169,64,.55); box-shadow: 0 2px 6px rgba(0,0,0,.08); } /* ---------- Section heading ---------- */ .section{ padding: 88px 0; } .section-tight{ padding: 56px 0; } .section-head{ text-align:center; max-width: 620px; margin: 0 auto 48px; } .section-head .eyebrow{ margin-left:auto; margin-right:auto; } .section-head h2{ font-size: 38px; } /* ---------- Steps (Como funciona) ---------- */ .steps{ display:grid; grid-template-columns: repeat(4,1fr); gap:28px; } .step-card{ background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 24px; position:relative; } .step-num{ font-family: var(--font-display); font-size: 44px; color: var(--cream-2); -webkit-text-stroke: 1.5px var(--terracotta); color: transparent; margin-bottom: 10px; } .step-card h3{ font-size:19px; } .step-card p{ font-size: 14px; margin:0; } /* ---------- Product cards / grid ---------- */ .cat-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; } .cat-card{ border-radius: var(--radius-lg); overflow:hidden; position:relative; height: 320px; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; } .cat-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); } .cat-media{ height:100%; width:100%; display:flex; align-items:center; justify-content:center; position:relative; } .cat-media svg{ width:34%; opacity:.9; } .cat-1 .cat-media{ background: linear-gradient(160deg,#e7c08a,#d96b3f); } .cat-2 .cat-media{ background: linear-gradient(160deg,#9db38a,#5f7a52); } .cat-3 .cat-media{ background: linear-gradient(160deg,#e0a940,#b8532c); } .cat-label{ position:absolute; left:20px; bottom:20px; color:#fff; } .cat-label span{ font-size:13px; opacity:.85; } .cat-label h3{ margin:0; font-size:22px; color:#fff; } .product-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:28px; } .plan-card{ background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; display:flex; flex-direction:column; position:relative; transition: transform .2s ease, box-shadow .2s ease; } .plan-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); } .plan-card.popular{ border-color: var(--terracotta); } .badge-popular{ position:absolute; top:-13px; left:28px; background: var(--terracotta); color:#fff; font-size:12px; font-weight:700; padding:5px 14px; border-radius:100px; } .plan-thumb{ height: 170px; border-radius: var(--radius-md); margin-bottom:20px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; } .plan-thumb svg{ width:30%; opacity:.9; } .thumb-a{ background: linear-gradient(150deg,#f0c88a,#d96b3f); } .thumb-b{ background: linear-gradient(150deg,#c9d6b8,#7c8f6e); } .thumb-c{ background: linear-gradient(150deg,#f0d99a,#e0a940); } .thumb-d{ background: linear-gradient(150deg,#e7b3a0,#b8532c); } .thumb-e{ background: linear-gradient(150deg,#b9c9e0,#5c7a9e); } .plan-card h3{ font-size:21px; margin-bottom:4px; } .plan-meta{ font-size:13px; color: var(--ink-soft); margin-bottom:14px; } .plan-feats{ margin: 0 0 20px; flex:1; } .plan-feats li{ font-size:14px; color: var(--ink-soft); display:flex; align-items:flex-start; gap:8px; margin-bottom:8px; } .plan-feats li svg{ flex-shrink:0; margin-top:2px; } .plan-price{ display:flex; align-items:baseline; gap:8px; margin-bottom:18px; } .plan-price .old{ font-size:14px; color:var(--ink-soft); text-decoration:line-through; } .plan-price .now{ font-family: var(--font-display); font-size:30px; font-weight:700; } .plan-price .now small{ font-size:14px; font-weight:500; } /* ---------- Testimonials ---------- */ .testi-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; } .testi-card{ background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-lg); padding:26px; } .stars{ color: var(--gold); font-size:15px; margin-bottom:10px; letter-spacing:2px; } .testi-who{ display:flex; align-items:center; gap:10px; margin-top:16px; } .avatar{ width:38px; height:38px; border-radius:50%; background: linear-gradient(135deg,var(--terracotta),var(--gold)); flex-shrink:0; } .testi-who strong{ font-size:14px; display:block; } .testi-who span{ font-size:12px; color:var(--ink-soft); } /* ---------- CTA band ---------- */ .cta-band{ background: var(--ink); color:#fff; border-radius: var(--radius-lg); padding: 56px; text-align:center; margin: 0 24px; } .cta-band h2{ color:#fff; font-size:32px; } .cta-band p{ color: #d8d0c4; max-width:480px; margin:0 auto 24px; } /* ---------- Footer ---------- */ .site-footer{ background: var(--ink-2,#241f19); background:#241f19; color:#cfc6b8; padding: 64px 0 24px; margin-top: 40px; } .footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px; } .footer-logo{ font-family: var(--font-display); font-size:22px; color:#fff; margin-bottom:12px; } .footer-logo span{ color: var(--terracotta); } .footer-col h4{ color:#fff; font-size:14px; margin-bottom:14px; } .footer-col ul li{ margin-bottom:9px; font-size:14px; } .footer-col ul li a:hover{ color:#fff; } .footer-bottom{ border-top: 1px solid #3a3229; padding-top:20px; font-size:13px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; color:#9c9284; } .footer-badges{ display:flex; gap:14px; } /* ---------- Breadcrumb / page header ---------- */ .page-head{ padding: 40px 0 8px; } .breadcrumb{ font-size:13px; color:var(--ink-soft); margin-bottom:10px; } .breadcrumb a:hover{ color: var(--terracotta); } .page-head h1{ font-size:34px; } /* ---------- Filters bar ---------- */ .filters-bar{ display:flex; gap:10px; flex-wrap:wrap; margin: 20px 0 40px; } .chip{ padding:9px 18px; border-radius:100px; background: var(--paper); border:1px solid var(--line); font-size:14px; font-weight:500; } .chip.active{ background: var(--ink); color:#fff; border-color:var(--ink); } /* ---------- Steps indicator (checkout) ---------- */ .progress-steps{ display:flex; align-items:center; justify-content:center; gap:0; margin: 8px 0 48px; } .progress-step{ display:flex; align-items:center; gap:10px; } .progress-step .dot{ width:34px; height:34px; border-radius:50%; background: var(--paper); border:2px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color: var(--ink-soft); } .progress-step.done .dot{ background: var(--sage); border-color:var(--sage); color:#fff; } .progress-step.current .dot{ background: var(--terracotta); border-color:var(--terracotta); color:#fff; } .progress-step span{ font-size:14px; font-weight:600; color: var(--ink-soft); } .progress-step.current span{ color: var(--ink); } .progress-line{ width:60px; height:2px; background: var(--line); margin:0 10px; } /* ---------- Forms ---------- */ .form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-bottom:16px; } .field{ margin-bottom:16px; } .field label{ display:block; font-size:13px; font-weight:600; margin-bottom:7px; } .field input, .field select, .field textarea{ width:100%; padding: 13px 15px; border:1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); font-size:14px; color: var(--ink); transition: border-color .15s ease; } .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--terracotta); } .field-hint{ font-size:12px; color:var(--ink-soft); margin-top:5px; } .pay-methods{ display:grid; grid-template-columns: repeat(3,1fr); gap:12px; margin-bottom:20px; } .pay-opt{ border:1.5px solid var(--line); border-radius: var(--radius-sm); padding: 14px; text-align:center; font-size:13px; font-weight:600; display:flex; flex-direction:column; align-items:center; gap:8px; } .pay-opt.selected{ border-color: var(--terracotta); background: var(--cream-2); } .pay-opt input{ display:none; } /* ---------- Layout: two columns (checkout/cart) ---------- */ .two-col{ display:grid; grid-template-columns: 1.6fr 1fr; gap:40px; align-items:start; } .panel{ background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-lg); padding:28px; } .panel h2{ font-size:20px; margin-bottom:20px; } .summary-sticky{ position:sticky; top: 96px; } /* ---------- Cart ---------- */ .cart-item{ display:flex; gap:16px; padding: 18px 0; border-bottom: 1px solid var(--line); } .cart-item:last-child{ border-bottom:none; } .cart-thumb{ width:76px; height:76px; border-radius:10px; flex-shrink:0; background: linear-gradient(150deg,#e7c08a,#d96b3f); display:flex; align-items:center; justify-content:center; } .cart-thumb svg{ width:40%; opacity:.9; } .cart-info{ flex:1; } .cart-info h4{ font-size:15px; margin:0 0 4px; font-family:var(--font-body); font-weight:600; } .cart-info span{ font-size:13px; color:var(--ink-soft); display:block; } .cart-qty{ display:flex; align-items:center; gap:10px; margin-top:8px; } .qty-btn{ width:26px; height:26px; border-radius:50%; border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; } .cart-price{ font-weight:700; font-family: var(--font-display); font-size:16px; text-align:right; white-space:nowrap; } .remove-link{ font-size:12px; color: var(--terracotta-dark); margin-top:6px; display:inline-block; } .sum-row{ display:flex; justify-content:space-between; font-size:14px; margin-bottom:12px; color: var(--ink-soft); } .sum-row.total{ font-size:18px; font-weight:700; color:var(--ink); border-top:1px solid var(--line); padding-top:14px; margin-top:6px; } .sum-row.total span:last-child{ font-family: var(--font-display); } .coupon-row{ display:flex; gap:8px; margin: 18px 0; } .coupon-row input{ flex:1; padding:11px 13px; border:1.5px solid var(--line); border-radius:var(--radius-sm); } .empty-state{ text-align:center; padding: 60px 20px; } .empty-state svg{ width:70px; margin:0 auto 18px; opacity:.5; } /* ---------- Editor ---------- */ .editor-layout{ display:grid; grid-template-columns: 300px 1fr; gap:32px; } .editor-side{ position:sticky; top:96px; } .order-note textarea{ min-height:100px; resize:vertical; } .slots-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; } .slot{ background: var(--paper); border:1.5px dashed var(--line); border-radius: var(--radius-md); padding:16px; text-align:center; } .slot.filled{ border-style:solid; border-color: var(--line); } .slot-type{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color: var(--terracotta-dark); margin-bottom:8px; display:block; } .slot-canvas-wrap{ position:relative; width:100%; aspect-ratio:1/1; border-radius:4px; overflow:hidden; background:#eee2d0; cursor: grab; margin-bottom:10px; } .slot-canvas-wrap:active{ cursor:grabbing; } .slot-canvas-wrap canvas{ position:absolute; inset:0; width:100%; height:100%; } .slot-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; height:100%; color: var(--ink-soft); font-size:13px; } .slot-empty svg{ width:30px; opacity:.6; } .slot input[type=file]{ display:none; } .slot-zoom{ width:100%; margin: 6px 0; } .slot-caption input{ width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:6px; font-family: var(--font-hand); font-size:16px; text-align:center; } .slot-actions{ display:flex; gap:6px; margin-top:8px; } .slot-actions button{ flex:1; } .slot-ima-toggle{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-soft); margin-top:8px; } .slot-ima-toggle input{ width:auto; } .slot-font-select{ width:100%; margin-top:6px; padding:6px 8px; border:1px solid var(--line); border-radius:6px; font-size:12px; background:var(--paper); } .size-select-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; } .size-select-row select{ padding:7px 9px; border:1.5px solid var(--line); border-radius:8px; font-size:13px; background:var(--paper); } /* ---------- Production panel (demo) ---------- */ .order-row{ display:grid; grid-template-columns: 90px 1.4fr 1fr 1fr 120px 140px; gap:16px; align-items:center; padding: 16px; border-bottom:1px solid var(--line); font-size:14px; } .order-row.head{ font-weight:700; color: var(--ink-soft); font-size:12px; text-transform:uppercase; letter-spacing:.04em; } .status-pill{ padding:5px 12px; border-radius:100px; font-size:12px; font-weight:700; display:inline-block; } .status-novo{ background:#fde3d0; color:#b8532c; } .status-producao{ background:#fdeec2; color:#a67a12; } .status-pronto{ background:#dcead2; color:#4c6b3c; } .order-thumbs{ display:flex; gap:-6px; } .order-thumbs .mini{ width:32px; height:32px; border-radius:6px; margin-left:-8px; border:2px solid #fff; background: linear-gradient(150deg,#e7c08a,#d96b3f); } .order-thumbs .mini:first-child{ margin-left:0; } /* ---------- Confirmation ---------- */ .confirm-box{ max-width: 620px; margin: 0 auto; text-align:center; padding: 60px 0; } .confirm-icon{ width:88px; height:88px; border-radius:50%; background: var(--sage); color:#fff; display:flex; align-items:center; justify-content:center; margin: 0 auto 24px; } .order-number{ font-family: var(--font-display); font-size:26px; background: var(--paper); border:1px dashed var(--line); border-radius: var(--radius-md); padding:16px; display:inline-block; margin: 18px 0 30px; } .timeline{ display:flex; justify-content:space-between; margin: 40px 0; text-align:left; gap:10px; } .timeline .t-item{ flex:1; } .timeline .t-dot{ width:12px; height:12px; border-radius:50%; background: var(--terracotta); margin-bottom:8px; } .timeline .t-item span{ font-size:12px; color:var(--ink-soft); display:block; margin-top:2px; } /* ---------- Toast ---------- */ .toast{ position: fixed; bottom:24px; right:24px; z-index:999; background: var(--ink); color:#fff; padding: 14px 22px; border-radius: 100px; font-size:14px; font-weight:600; box-shadow: var(--shadow-lg); display:flex; align-items:center; gap:10px; transform: translateY(120%); opacity:0; transition: transform .3s ease, opacity .3s ease; } .toast.show{ transform: translateY(0); opacity:1; } /* ---------- Utilities ---------- */ .text-center{ text-align:center; } .mt-0{ margin-top:0; } .small{ font-size:13px; } .muted{ color: var(--ink-soft); } /* ---------- Dashboard (dono da loja) ---------- */ .stats-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; margin-bottom:28px; } .stat-card{ background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-lg); padding:22px 24px; } .stat-label{ font-size:13px; color:var(--ink-soft); display:block; margin-bottom:8px; } .stat-value{ font-family:var(--font-display); font-size:30px; display:block; } .period-tabs{ display:flex; gap:8px; margin-bottom:20px; } .simple-table{ width:100%; border-collapse:collapse; font-size:14px; } .simple-table th{ text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft); padding:8px 10px; border-bottom:1px solid var(--line); } .simple-table td{ padding:10px 10px; border-bottom:1px solid var(--line); } .simple-table tr:last-child td{ border-bottom:none; } .dash-grid{ display:grid; grid-template-columns: 1.3fr 1fr; gap:24px; margin-bottom:28px; align-items:start; } .status-select{ padding:8px 10px; border:1.5px solid var(--line); border-radius:var(--radius-sm); font-size:13px; background:var(--paper); } /* ---------- Responsive ---------- */ @media (max-width: 980px){ .hero-grid{ grid-template-columns:1fr; } .polaroid-stage{ height:340px; margin-top:20px; } .steps{ grid-template-columns: repeat(2,1fr); } .cat-grid, .product-grid, .testi-grid{ grid-template-columns: repeat(2,1fr); } .footer-grid{ grid-template-columns: repeat(2,1fr); } .two-col{ grid-template-columns:1fr; } .dash-grid{ grid-template-columns:1fr; } .stats-grid{ grid-template-columns:1fr; } .editor-layout{ grid-template-columns:1fr; } .editor-side{ position:static; } .order-row{ grid-template-columns: 60px 1fr 1fr; } .order-row span:nth-child(4), .order-row span:nth-child(5){ display:none; } } @media (max-width: 680px){ .nav-links{ position:fixed; top:70px; left:0; right:0; bottom:0; background: var(--cream); flex-direction:column; padding: 30px 24px; gap:20px; font-size:18px; transform: translateX(100%); transition: transform .25s ease; } .nav-links.open{ transform: translateX(0); } .nav-toggle{ display:flex; width:40px;height:40px;align-items:center;justify-content:center; background:none; border:none; } .hero h1{ font-size:36px; } .cat-grid, .product-grid, .testi-grid, .form-row, .steps{ grid-template-columns: 1fr; } .footer-grid{ grid-template-columns: 1fr 1fr; } .slots-grid{ grid-template-columns: repeat(2,1fr); } .cta-band{ padding:40px 24px; } .order-row{ grid-template-columns: 50px 1fr; } }