/* ============================================================================= * SwiGift — Design system "Confetti Navy" * ----------------------------------------------------------------------------- * Ported from the approved Claude Design handoff (direction A · Confetti Navy). * Deep navy + cream paper with vivid confetti accents (coral/yellow/mint/blue/ * violet). Display = Bricolage Grotesque, body = Hanken Grotesk. * * Plugin templates render standalone documents with , so * tokens live on :root and base styles target .swigift. * ========================================================================== */ :root { --navy: #0B1B3F; --navy-deep: #081026; --navy-700: #16264f; --navy-600: #25386b; --cream: #FFF8EF; --paper: #FFFFFF; --ink: #14193a; --muted: #6A7196; --line: #E7E3D8; --coral: #FF5C8A; --yellow: #FFC93C; --mint: #2FD18C; --blue: #4DA8FF; --violet: #7C5CFF; --r-lg: 28px; --r-md: 18px; --r-sm: 12px; --shadow-soft: 0 18px 40px -18px rgba(11, 27, 63, 0.28); --shadow-pop: 0 22px 50px -16px rgba(255, 92, 138, 0.40); --font-display: "Bricolage Grotesque", system-ui, sans-serif; --font-body: "Hanken Grotesk", system-ui, sans-serif; --container: 1280px; } /* Base ---------------------------------------------------------------------- */ .swigift * { box-sizing: border-box; } .swigift { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; line-height: 1.45; } .swigift h1, .swigift h2, .swigift h3, .swigift h4 { font-family: var(--font-display); line-height: 1.05; letter-spacing: -0.02em; font-weight: 700; margin: 0; } .swigift p { margin: 0; } .swigift img { max-width: 100%; display: block; } .swigift a { color: inherit; text-decoration: none; } .swigift button { font-family: var(--font-body); } .sg-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 40px; } .sg-muted { color: var(--muted); } .sg-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .sg-prose { line-height: 1.65; } .sg-prose p { margin-block: 0.85rem; } /* Top nav ------------------------------------------------------------------- */ .sg-nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 40px; background: var(--navy); color: #fff; } .sg-nav__inner { display: flex; align-items: center; gap: 0; } .sg-logo { font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -0.03em; display: inline-flex; align-items: center; gap: 9px; color: #fff; } .sg-logo .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--coral); box-shadow: 16px 0 0 var(--yellow), 32px 0 0 var(--mint); margin-right: 34px; } .sg-navlinks { display: flex; gap: 30px; font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, 0.82); } .sg-navlinks a:hover { color: #fff; } .sg-navlinks a.active { color: #fff; } .sg-navright { display: flex; align-items: center; gap: 16px; font-size: 15px; color: rgba(255, 255, 255, 0.82); } .sg-cart { display: inline-flex; align-items: center; gap: 7px; background: rgba(255, 255, 255, 0.12); padding: 9px 15px; border-radius: 999px; color: #fff; } /* Buttons ------------------------------------------------------------------- */ .sg-btn { font-family: var(--font-body); font-weight: 700; font-size: 16px; border: none; border-radius: 999px; padding: 14px 26px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 9px; white-space: nowrap; transition: transform 0.05s ease, filter 0.15s ease; } .sg-btn:active { transform: translateY(1px); } .sg-btn--primary { background: var(--coral); color: #fff; box-shadow: var(--shadow-pop); } .sg-btn--primary:hover { filter: brightness(1.04); color: #fff; } .sg-btn--dark { background: var(--navy); color: #fff; } .sg-btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); } .sg-btn--ghost:hover { background: #fff; } .sg-btn--yellow { background: var(--yellow); color: var(--navy); } .sg-btn--sm { padding: 10px 18px; font-size: 14px; } .sg-btn--block { width: 100%; } /* Chips / filters ----------------------------------------------------------- */ .sg-chip { font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: 999px; background: #fff; border: 1.5px solid var(--line); color: var(--ink); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; } .sg-chip.is-on { background: var(--navy); color: #fff; border-color: var(--navy); } .sg-chip--coral.is-on { background: var(--coral); border-color: var(--coral); } /* Cards & bits -------------------------------------------------------------- */ .sg-card { background: var(--paper); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-soft); } .sg-tag { font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; letter-spacing: 0.01em; display: inline-block; } .sg-photo { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--violet), var(--coral)); } .sg-photo__label { position: absolute; left: 14px; bottom: 12px; color: rgba(255, 255, 255, 0.9); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; } .sg-stars { display: inline-flex; gap: 2px; vertical-align: middle; } /* Page shell ---------------------------------------------------------------- */ .sg-main { display: block; } .sg-hero { padding: 52px 40px 38px; position: relative; overflow: hidden; } .sg-hero__title { font-size: clamp(34px, 5vw, 54px); color: var(--navy); margin-top: 14px; max-width: 760px; } .sg-hero__lead { font-size: 19px; color: var(--muted); margin-top: 16px; max-width: 560px; } .sg-dot { position: absolute; border-radius: 50%; pointer-events: none; } /* Search field (hero) ------------------------------------------------------- */ .sg-search { display: flex; gap: 12px; margin-top: 28px; max-width: 620px; } .sg-search__box { flex: 1; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; display: flex; align-items: center; gap: 10px; padding: 0 20px; color: var(--muted); font-size: 16px; height: 52px; } .sg-search__box input { border: none; outline: none; background: transparent; font: inherit; color: var(--ink); width: 100%; } /* Filters bar --------------------------------------------------------------- */ .sg-filters-bar { padding: 0 40px 28px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .sg-filters-bar__chips { display: flex; gap: 10px; flex-wrap: wrap; } .sg-toggle-pill { display: inline-flex; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 4px; } .sg-toggle-pill span { padding: 7px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; } .sg-toggle-pill span.is-on { background: var(--coral); color: #fff; font-weight: 700; } /* Grids --------------------------------------------------------------------- */ .sg-grid-3 { padding: 0 40px 50px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } /* Partner card -------------------------------------------------------------- */ .sg-partner-card { cursor: pointer; } .sg-partner-card .sg-photo { height: 188px; } .sg-partner-card__body { padding: 18px 20px 20px; } .sg-partner-card__name { font-size: 21px; color: var(--ink); } .sg-meta-row { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; margin-top: 7px; } .sg-rating-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; } .sg-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); } .sg-price { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--navy); } .sg-heart-btn { position: absolute; right: 14px; bottom: 14px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); display: flex; align-items: center; justify-content: center; } /* Partner single ------------------------------------------------------------ */ .sg-partner-hero { height: 340px; display: flex; align-items: flex-end; } .sg-partner-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(11, 27, 63, 0.55)); } .sg-partner-hero__inner { position: relative; padding: 0 40px 30px; color: #fff; } .sg-partner-hero__title { font-size: clamp(34px, 5vw, 50px); margin-top: 14px; color: #fff; } .sg-twocol { display: grid; grid-template-columns: 1fr 360px; gap: 40px; padding: 40px 40px 50px; align-items: start; } .sg-section-title { font-size: 28px; color: var(--navy); } .sg-gallery { display: flex; gap: 14px; margin-top: 22px; flex-wrap: wrap; } .sg-gallery .sg-photo { width: 200px; height: 120px; border-radius: 16px; } .sg-bons-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; } .sg-bon { background: #fff; border: 1.5px solid var(--line); border-radius: 18px; padding: 20px 22px; position: relative; } .sg-bon.is-pop { border: 2px solid var(--coral); } .sg-bon__v { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--navy); } .sg-bon__d { color: var(--muted); font-size: 15px; margin-top: 6px; } .sg-bon__pop { position: absolute; right: 16px; top: -11px; background: var(--coral); color: #fff; } .sg-reviews { display: grid; gap: 14px; margin-top: 18px; } .sg-review { background: #fff; border: 1.5px solid var(--line); border-radius: 18px; padding: 18px 22px; } .sg-review__head { display: flex; justify-content: space-between; align-items: center; } .sg-offer-card { padding: 26px; position: sticky; top: 20px; } .sg-secure { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--muted); font-size: 13px; justify-content: center; } /* Exclusive offer ----------------------------------------------------------- */ .sg-excl-hero { position: relative; background: var(--navy); overflow: hidden; } .sg-excl-hero .sg-photo { position: absolute; inset: 0; height: 520px; } .sg-excl-hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 16, 38, 0.82) 30%, transparent); } .sg-excl-hero__inner { position: relative; padding: 70px 40px; max-width: 660px; } .sg-excl-hero__title { font-size: clamp(36px, 6vw, 56px); color: #fff; margin-top: 18px; line-height: 1.0; } .sg-timer { display: flex; gap: 16px; margin-top: 30px; } .sg-time { text-align: center; } .sg-time__v { font-family: var(--font-display); font-weight: 800; font-size: 40px; color: #fff; background: rgba(255, 255, 255, 0.12); border-radius: 14px; padding: 12px 0; width: 84px; } .sg-time__l { font-size: 12px; color: rgba(255, 255, 255, 0.65); margin-top: 8px; letter-spacing: 0.1em; text-transform: uppercase; } .sg-excl-cta { display: flex; align-items: center; gap: 20px; margin-top: 34px; } .sg-play { position: absolute; right: 48px; bottom: 48px; width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); display: flex; align-items: center; justify-content: center; } .sg-details { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; padding: 46px 40px 50px; } .sg-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; } .sg-feature { background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 18px 20px; } .sg-feature__t { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--navy); } /* Tunnel -------------------------------------------------------------------- */ .sg-stepbar { display: flex; align-items: center; padding: 22px 40px; background: #fff; border-bottom: 1px solid var(--line); } .sg-step { display: flex; align-items: center; gap: 10px; } .sg-step__num { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; background: #fff; color: var(--muted); border: 1.5px solid var(--line); } .sg-step.is-done .sg-step__num { background: var(--mint); color: #fff; border: none; } .sg-step.is-active .sg-step__num { background: var(--coral); color: #fff; border: none; } .sg-step__label { font-size: 15px; font-weight: 600; color: var(--muted); } .sg-step.is-active .sg-step__label { font-weight: 700; color: var(--ink); } .sg-step__bar { flex: 1; height: 2px; background: var(--line); margin: 0 16px; } .sg-step__bar.is-done { background: var(--mint); } .sg-tunnel { display: grid; grid-template-columns: 1fr 440px; min-height: 760px; } .sg-tunnel__controls { padding: 36px 40px 50px; } .sg-field { margin-bottom: 26px; } .sg-field__label { font-weight: 700; font-size: 16px; color: var(--ink); margin-bottom: 12px; } .sg-option-row { display: flex; gap: 14px; } .sg-option { flex: 1; border: 1.5px solid var(--line); background: #fff; border-radius: 16px; padding: 16px 18px; cursor: pointer; } .sg-option.is-on { border: 2px solid var(--coral); background: #FFF1F5; } .sg-option__head { display: flex; align-items: center; justify-content: space-between; } .sg-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); } .sg-option.is-on .sg-radio { border: 6px solid var(--coral); } .sg-uploader { flex: 1; border: 1.5px dashed var(--line); border-radius: 14px; padding: 18px 20px; display: flex; align-items: center; gap: 12px; color: var(--muted); } .sg-textarea { border: 1.5px solid var(--line); border-radius: 14px; padding: 16px 18px; background: #fff; } .sg-textarea__count { display: flex; justify-content: flex-end; color: var(--muted); font-size: 13px; margin-top: 8px; } .sg-delivery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .sg-delivery { border: 1.5px solid var(--line); background: #fff; border-radius: 16px; padding: 16px; } .sg-delivery.is-on { border: 2px solid var(--coral); background: #FFF1F5; } .sg-delivery__t { font-weight: 700; font-size: 15px; margin-top: 10px; } .sg-delivery__p { font-family: var(--font-display); font-weight: 700; color: var(--navy); margin-top: 8px; } .sg-amounts { display: flex; gap: 12px; flex-wrap: wrap; } .sg-switch-row { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 16px 20px; } .sg-switch { width: 54px; height: 30px; border-radius: 999px; background: var(--line); position: relative; cursor: pointer; transition: background 0.15s ease; flex: none; } .sg-switch.is-on { background: var(--mint); } .sg-switch__knob { position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: left 0.15s ease; } .sg-switch.is-on .sg-switch__knob { left: 27px; } /* Live preview panel (navy) ------------------------------------------------- */ .sg-preview-panel { background: var(--navy); padding: 40px 36px; position: relative; overflow: hidden; } .sg-preview-panel__title { text-align: center; color: rgba(255, 255, 255, 0.6); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 24px; } .sg-summary { background: rgba(255, 255, 255, 0.07); border-radius: 18px; padding: 20px 22px; margin-top: 28px; } .sg-summary__row { display: flex; justify-content: space-between; color: rgba(255, 255, 255, 0.82); font-size: 15px; margin-bottom: 10px; } .sg-summary__total { display: flex; justify-content: space-between; border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 12px; margin-top: 4px; } .sg-summary__total .lbl { color: #fff; font-weight: 700; font-size: 17px; } .sg-summary__total .val { color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 22px; } /* Gift card ----------------------------------------------------------------- */ .sg-giftcard { width: 340px; border-radius: 24px; background: var(--cream); box-shadow: 0 30px 60px -22px rgba(11, 27, 63, 0.45); overflow: hidden; margin: 0 auto; } .sg-giftcard .sg-photo { height: 176px; } .sg-giftcard__amount { position: absolute; right: 16px; top: 16px; background: var(--navy); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 20px; padding: 7px 16px; border-radius: 999px; } .sg-giftcard__photochip { position: absolute; left: 16px; bottom: 14px; background: rgba(255, 255, 255, 0.9); color: var(--coral); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; } .sg-giftcard__body { padding: 20px 22px 24px; } .sg-giftcard__from { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral); font-weight: 800; } .sg-giftcard__title { font-family: var(--font-display); font-weight: 700; font-size: 25px; color: var(--ink); margin-top: 8px; } .sg-giftcard__msg { font-size: 15px; color: var(--muted); margin-top: 8px; line-height: 1.5; } .sg-giftcard__foot { display: flex; align-items: center; gap: 7px; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--muted); } /* Checkout ------------------------------------------------------------------ */ .sg-checkout { display: grid; grid-template-columns: 1fr 420px; gap: 40px; padding: 40px 40px 56px; } .sg-express { display: flex; gap: 12px; margin-bottom: 18px; } .sg-express__btn { flex: 1; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; } .sg-express__btn--apple { background: #111; color: #fff; } .sg-express__btn--google { background: #fff; border: 1.5px solid var(--line); color: #000; } .sg-express__btn--twint { background: #3DBEAC; color: #fff; } .sg-divider { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 13px; margin: 18px 0; } .sg-divider::before, .sg-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } .sg-pay-field { margin-bottom: 14px; } .sg-pay-field__label { font-size: 14px; font-weight: 600; color: var(--muted); margin-bottom: 7px; } .sg-pay-field__box { border: 1.5px solid var(--line); border-radius: 12px; padding: 15px 16px; background: #fff; color: var(--ink); font-size: 15px; } .sg-recap__head { background: var(--navy); padding: 22px 24px; color: #fff; } .sg-recap__body { padding: 20px 24px; } .sg-recap__line { display: flex; gap: 14px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .sg-recap__row { display: flex; justify-content: space-between; font-size: 15px; color: var(--muted); margin-top: 12px; } .sg-recap__total { display: flex; justify-content: space-between; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); } /* Confirmation -------------------------------------------------------------- */ .sg-success { background: var(--navy); padding: 50px 40px 56px; position: relative; overflow: hidden; text-align: center; } .sg-success__check { width: 64px; height: 64px; border-radius: 50%; background: var(--mint); display: flex; align-items: center; justify-content: center; margin: 0 auto; } .sg-success__title { font-size: clamp(30px, 5vw, 42px); color: #fff; margin-top: 20px; } .sg-conf-grid { display: grid; grid-template-columns: 380px 1fr; gap: 40px; padding: 42px 40px 50px; align-items: start; } .sg-conf-grid__card { margin-top: -90px; } .sg-voucher-meta { display: flex; gap: 24px; margin-top: 18px; flex-wrap: wrap; } .sg-voucher-meta__k { font-size: 13px; color: var(--muted); font-weight: 600; } .sg-voucher-meta__v { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--navy); margin-top: 4px; } .sg-conf-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } /* Forms (become partner) ---------------------------------------------------- */ .sg-form { display: grid; grid-template-columns: 1fr 420px; gap: 40px; padding: 14px 40px 50px; align-items: start; } .sg-input { margin-bottom: 16px; flex: 1; } .sg-input__label { font-size: 14px; font-weight: 600; color: var(--muted); margin-bottom: 7px; } .sg-input__box, .sg-input input, .sg-input textarea, .sg-input select { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 15px; background: #fff; font: inherit; font-size: 15px; color: var(--ink); } .sg-input textarea { resize: vertical; min-height: 70px; } .sg-row { display: flex; gap: 16px; } .sg-note-secure { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mint); font-weight: 600; margin-top: -4px; margin-bottom: 8px; } .sg-signature { display: grid; grid-template-columns: 1fr 240px; gap: 20px; align-items: stretch; } .sg-contract { border: 1.5px solid var(--line); border-radius: 14px; background: #FCFAF5; padding: 18px 20px; font-size: 13px; color: var(--muted); line-height: 1.55; max-height: 150px; overflow: auto; } .sg-sign-pad { border: 2px dashed var(--coral); border-radius: 14px; background: #fff; height: 110px; position: relative; display: flex; align-items: center; justify-content: center; cursor: crosshair; } .sg-sign-pad canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .sg-sign-pad__hint { position: absolute; bottom: 8px; left: 12px; font-size: 11px; color: var(--muted); } .sg-sign-meta { font-size: 11px; color: var(--muted); margin-top: 8px; line-height: 1.5; } .sg-live-preview { position: sticky; top: 20px; } .sg-live-preview__label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; } .sg-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); } .sg-live-note { background: #FFF1F5; border: 1px solid #FFD7E3; border-radius: 14px; padding: 14px 16px; margin-top: 14px; font-size: 13px; color: #B23A66; } /* Footer -------------------------------------------------------------------- */ .sg-footer { background: var(--navy-deep); color: rgba(255, 255, 255, 0.7); padding: 46px 40px 40px; } .sg-footer__top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 30px; max-width: var(--container); margin-inline: auto; } .sg-footer__about { max-width: 280px; font-size: 14px; line-height: 1.6; } .sg-footer__cols { display: flex; gap: 56px; font-size: 14px; } .sg-footer__col h4 { color: #fff; font-weight: 700; margin-bottom: 12px; font-family: var(--font-body); font-size: 14px; } .sg-footer__col a { display: block; margin-bottom: 9px; color: rgba(255, 255, 255, 0.7); } .sg-footer__col a:hover { color: #fff; } .sg-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 34px auto 0; padding-top: 20px; font-size: 13px; display: flex; justify-content: space-between; max-width: var(--container); flex-wrap: wrap; gap: 10px; } /* Responsive ---------------------------------------------------------------- */ @media (max-width: 1080px) { .sg-grid-3 { grid-template-columns: repeat(2, 1fr); } .sg-tunnel, .sg-checkout, .sg-twocol, .sg-details, .sg-form, .sg-conf-grid, .sg-conf-cards { grid-template-columns: 1fr; } .sg-conf-grid__card { margin-top: 0; } .sg-preview-panel, .sg-live-preview, .sg-offer-card { position: static; } } @media (max-width: 720px) { .sg-container, .sg-hero, .sg-filters-bar, .sg-grid-3, .sg-twocol, .sg-details, .sg-checkout, .sg-tunnel__controls, .sg-form, .sg-conf-grid { padding-inline: 20px; } .sg-nav { padding: 16px 20px; } .sg-navlinks { display: none; } .sg-bons-grid, .sg-feature-grid, .sg-delivery-grid { grid-template-columns: 1fr; } .sg-grid-3 { grid-template-columns: 1fr; } .sg-row { flex-direction: column; gap: 0; } }