/* =========================================================================== OG SCENTS — bundles.css The bundle layer. Extends the existing paper-white editorial system rather than introducing a second visual language: same Fraunces × Inter Tight, same hairlines, same roman-numeral discipline. One new token, --seal: the warm rose already living in the cursor mist trail, promoted to the bundle system's signal colour. Bundles are the only thing on this site that get colour. That's the point — when you see rose, something is being assembled. Signature element: THE TRAY. A slot rack that follows you down the page, fills as you add bottles, and stamps a wax seal each time a tier unlocks. Desktop = right drawer. Mobile = sticky bottom bar that expands upward. =========================================================================== */ :root { --seal: #E8788E; /* the one colour on the site */ --seal-deep: #C4506A; --seal-soft: rgba(232, 120, 142, 0.12); --seal-line: rgba(232, 120, 142, 0.32); --tray-w: clamp(320px, 27vw, 400px); --tray-bar: 58px; /* height of the mobile sticky bar */ --bundle-r: 2px; } /* =========================================================================== Shared bits =========================================================================== */ .ogs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--ff-body); font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; padding: 13px 22px; border: 1px solid var(--ink); border-radius: 9999px; background: transparent; color: var(--ink); cursor: pointer; transition: background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease), opacity .2s; text-align: center; } .ogs-btn--solid { background: var(--ink); color: var(--paper); } .ogs-btn--solid:hover { background: transparent; color: var(--ink); } .ogs-btn--ghost:hover { background: var(--ink); color: var(--paper); } .ogs-btn--seal { background: var(--seal); border-color: var(--seal); color: #fff; } .ogs-btn--seal:hover { background: transparent; color: var(--seal-deep); border-color: var(--seal-deep); } .ogs-btn[disabled] { opacity: 0.32; pointer-events: none; } .ogs-btn.is-working { opacity: 0.55; pointer-events: none; } .ogs-btn:focus-visible, .ogs-bundle-add:focus-visible, .ogs-tray__toggle:focus-visible { outline: 2px solid var(--seal); outline-offset: 3px; } .ogs-chapter--bundle .ogs-chapter__num { color: var(--seal); font-style: normal; } .ogs-chapter--bundle .ogs-chapter__rule { background: var(--seal-line); } .ogs-stars { display: inline-flex; gap: 4px; } .ogs-stars__s { font-size: 7px; color: var(--haze); line-height: 1; } .ogs-stars__s.is-filled { color: var(--seal); } /* =========================================================================== Promo ticker — the top-of-page banner =========================================================================== */ .ogs-ticker { position: relative; z-index: 120; background: var(--ink); color: var(--paper); overflow: hidden; height: 34px; display: flex; align-items: center; } .ogs-ticker__track { display: flex; gap: 0; white-space: nowrap; will-change: transform; animation: ogs-ticker-run 34s linear infinite; } .ogs-ticker__item { display: inline-flex; align-items: center; gap: 14px; padding: 0 26px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.24em; } .ogs-ticker__item::after { content: "✳"; color: var(--seal); font-size: 9px; letter-spacing: 0; } @keyframes ogs-ticker-run { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } .ogs-ticker:hover .ogs-ticker__track { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .ogs-ticker__track { animation: none; } } /* header sits below the ticker */ body.has-ticker .ogs-header { top: 34px; } /* =========================================================================== Inline "+ bundle" button injected onto every product card =========================================================================== */ .ogs-bundle-add { position: absolute; top: 10px; right: 10px; z-index: 4; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--rule); background: rgba(252, 251, 248, 0.92); font-size: 17px; line-height: 1; color: var(--ink); cursor: pointer; opacity: 0; transform: scale(0.85); transition: opacity .3s var(--ease), transform .3s var(--ease), background .25s, color .25s, border-color .25s; } .ogs-card:hover .ogs-bundle-add, .ogs-loop-card:hover .ogs-bundle-add, .ogs-bundle-add:focus-visible { opacity: 1; transform: scale(1); } .ogs-bundle-add:hover { background: var(--seal); border-color: var(--seal); color: #fff; } .ogs-bundle-add.is-in { opacity: 1; transform: scale(1); background: var(--seal); border-color: var(--seal); color: #fff; } .ogs-card__media, .ogs-loop-card__media { position: relative; } /* Touch devices get no hover, so the button is always visible. Sized up to a real tap target — 36px is under the 44px minimum and on a phone it sits right beside the product link, so a near miss opens the product page instead of adding the bottle. */ @media (hover: none) { .ogs-bundle-add { opacity: 1; transform: scale(1); width: 44px; height: 44px; font-size: 19px; top: 8px; right: 8px; } } /* =========================================================================== THE TRAY — signature element =========================================================================== */ .ogs-tray { position: fixed; top: 0; right: 0; bottom: 0; z-index: 9500; width: var(--tray-w); background: var(--paper); border-left: 1px solid var(--rule); transform: translate3d(100%, 0, 0); transition: transform .55s var(--ease-out); display: flex; flex-direction: column; box-shadow: -40px 0 80px -60px rgba(15, 14, 12, 0.5); } .ogs-tray.is-open { transform: translate3d(0, 0, 0); } .ogs-tray__head { padding: 26px 26px 18px; border-bottom: 1px solid var(--rule); display: grid; gap: 6px; flex: 0 0 auto; } .ogs-tray__eyebrow { display: flex; justify-content: space-between; align-items: center; font-size: 10px; text-transform: uppercase; letter-spacing: 0.24em; color: var(--ash); } .ogs-tray__close { font-size: 22px; line-height: 1; padding: 4px 6px; color: var(--ink); } .ogs-tray__title { font-family: var(--ff-display); font-size: 30px; font-weight: 300; letter-spacing: -0.02em; } .ogs-tray__title em { font-style: italic; color: var(--seal-deep); } /* --- the slot rack --- */ .ogs-tray__slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 20px 26px 16px; flex: 0 0 auto; } .ogs-slot { position: relative; aspect-ratio: 3/4; border: 1px dashed var(--haze); background: var(--paper-2); display: grid; place-items: center; overflow: hidden; transition: border-color .3s var(--ease), background .3s var(--ease); } .ogs-slot::after { content: attr(data-slot); font-family: var(--ff-display); font-style: italic; font-size: 13px; color: var(--haze); } .ogs-slot.is-filled { border-style: solid; border-color: var(--seal-line); background: transparent; } .ogs-slot.is-filled::after { display: none; } .ogs-slot img { width: 100%; height: 100%; object-fit: cover; } .ogs-slot__remove { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(15, 14, 12, 0.62); color: #fff; font-size: 15px; opacity: 0; transition: opacity .25s var(--ease); cursor: pointer; } .ogs-slot.is-filled:hover .ogs-slot__remove, .ogs-slot__remove:focus-visible { opacity: 1; } .ogs-slot.is-next { border-color: var(--seal); animation: ogs-slot-pulse 2s var(--ease) infinite; } @keyframes ogs-slot-pulse { 0%, 100% { border-color: var(--haze); } 50% { border-color: var(--seal); } } /* No hover on touch, so the remove overlay has to be permanently available or a filled slot is impossible to clear on a phone. */ @media (hover: none) { .ogs-slot.is-filled .ogs-slot__remove { opacity: 1; inset: auto 0 0 auto; width: 24px; height: 24px; background: rgba(15, 14, 12, 0.78); font-size: 13px; } } /* --- tier progress --- */ .ogs-tray__progress { padding: 0 26px 18px; flex: 0 0 auto; } .ogs-progress { position: relative; height: 2px; background: var(--haze); margin: 12px 0 14px; } .ogs-progress__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--seal); transition: width .6s var(--ease-out); } .ogs-progress__pip { position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--paper); border: 1px solid var(--haze); transform: translate(-50%, -50%); transition: background .3s, border-color .3s; } .ogs-progress__pip.is-hit { background: var(--seal); border-color: var(--seal); } .ogs-tray__status { font-family: var(--ff-display); font-size: 15px; line-height: 1.45; color: var(--ink-2); } .ogs-tray__status strong { font-style: italic; font-weight: 400; color: var(--seal-deep); } /* --- the ladder --- */ .ogs-ladder { display: grid; gap: 0; border-top: 1px solid var(--rule); } .ogs-ladder__step { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 12px; color: var(--ash); transition: color .3s var(--ease), padding-left .3s var(--ease); } .ogs-ladder__qty { font-family: var(--ff-display); font-style: italic; font-size: 16px; color: var(--ink); } .ogs-ladder__label { font-family: var(--ff-display); font-size: 15px; color: var(--ink-2); font-style: normal; } .ogs-ladder__pct { font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; } .ogs-ladder__step.is-unlocked { color: var(--seal-deep); padding-left: 8px; } .ogs-ladder__step.is-unlocked .ogs-ladder__qty, .ogs-ladder__step.is-unlocked .ogs-ladder__label { color: var(--seal-deep); } .ogs-ladder__step.is-unlocked .ogs-ladder__pct::after { content: " ✓"; } /* --- totals + actions --- */ /* min-height: 0 is load-bearing. A flex item defaults to min-height: auto and refuses to shrink below its content — without it the body grows to fit the ladder, pushes the footer past the bottom of the sheet, and Add to cart becomes unreachable on a short phone. */ .ogs-tray__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 26px 10px; -webkit-overflow-scrolling: touch; } .ogs-tray__foot { padding: 18px 26px 24px; border-top: 1px solid var(--rule); background: var(--paper); display: grid; gap: 12px; flex: 0 0 auto; } .ogs-tray__totals { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--ff-display); gap: 12px; flex-wrap: wrap; } .ogs-tray__total-now { font-size: 26px; color: var(--ink); } .ogs-tray__total-was { font-size: 15px; color: var(--ash); text-decoration: line-through; margin-left: 10px; } .ogs-tray__total-save { font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--seal-deep); font-family: var(--ff-body); } .ogs-tray__empty { font-family: var(--ff-display); font-style: italic; font-size: 15px; color: var(--ash); padding: 20px 0 8px; line-height: 1.5; } /* --- the wax seal stamp --- */ .ogs-seal { position: fixed; z-index: 9700; top: 50%; left: 50%; width: 150px; height: 150px; transform: translate(-50%, -50%) scale(0.4) rotate(-12deg); opacity: 0; pointer-events: none; display: grid; place-items: center; text-align: center; border-radius: 50%; background: radial-gradient(circle at 34% 30%, var(--seal) 0%, var(--seal-deep) 72%); color: #fff; font-family: var(--ff-display); font-style: italic; box-shadow: 0 20px 44px -18px rgba(196, 80, 106, 0.6); } .ogs-seal__qty { display: block; font-size: 34px; line-height: 1; } .ogs-seal__label { display: block; font-size: 12px; letter-spacing: 0.1em; margin-top: 5px; font-style: normal; text-transform: uppercase; } .ogs-seal.is-stamping { animation: ogs-seal-stamp 1.5s var(--ease-out) forwards; } @keyframes ogs-seal-stamp { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.7) rotate(-20deg); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(0.94) rotate(-6deg); } 28% { transform: translate(-50%, -50%) scale(1.03) rotate(-8deg); } 72% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-8deg); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.06) rotate(-8deg); } } @media (prefers-reduced-motion: reduce) { .ogs-seal.is-stamping { animation: none; } } /* --- desktop tray handle --- */ .ogs-tray__toggle { position: fixed; right: 0; top: 50%; z-index: 9400; transform: translateY(-50%); background: var(--ink); color: var(--paper); padding: 16px 12px; writing-mode: vertical-rl; font-size: 10px; text-transform: uppercase; letter-spacing: 0.22em; display: flex; align-items: center; gap: 12px; border-radius: 2px 0 0 2px; transition: background .3s var(--ease), transform .4s var(--ease-out); } .ogs-tray__toggle:hover { background: var(--seal-deep); } .ogs-tray__toggle-count { display: grid; place-items: center; min-width: 19px; height: 19px; border-radius: 9999px; background: var(--seal); color: #fff; font-size: 10px; writing-mode: horizontal-tb; letter-spacing: 0; } body.tray-open .ogs-tray__toggle { transform: translateY(-50%) translateX(110%); } .ogs-tray__scrim { position: fixed; inset: 0; z-index: 9300; background: rgba(15, 14, 12, 0.32); opacity: 0; pointer-events: none; transition: opacity .45s var(--ease); } body.tray-open .ogs-tray__scrim { opacity: 1; pointer-events: auto; } /* =========================================================================== Hero bundle strip — sits under the reveal =========================================================================== */ .ogs-herostrip { position: relative; z-index: 3; width: 100%; max-width: var(--max); margin-top: clamp(28px, 4vh, 44px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .ogs-herostrip__cell { background: rgba(252, 251, 248, 0.86); padding: 18px 20px; display: grid; gap: 6px; align-content: center; transition: background .3s var(--ease); } .ogs-herostrip__cell:hover { background: var(--paper); } .ogs-herostrip__n { font-family: var(--ff-display); font-style: italic; font-size: 13px; color: var(--seal-deep); } .ogs-herostrip__t { font-family: var(--ff-display); font-size: clamp(15px, 1.3vw, 19px); color: var(--ink); line-height: 1.2; } .ogs-herostrip__s { font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ash); } /* =========================================================================== Bundle card =========================================================================== */ .ogs-bundle { display: grid; gap: 20px; align-content: start; } .ogs-bundle__stack { position: relative; aspect-ratio: 4/3; background: var(--paper-2); overflow: hidden; display: flex; align-items: flex-end; justify-content: center; padding: 0 8%; } .ogs-bundle__bottle { position: relative; flex: 1 1 0; max-width: 27%; margin-left: -6%; transform: translateY(6%) rotate(calc((var(--i) - 1.5) * 2.2deg)); transform-origin: bottom center; transition: transform .5s var(--ease-out), filter .5s var(--ease-out); z-index: calc(4 - var(--i)); filter: drop-shadow(0 14px 22px rgba(15, 14, 12, 0.14)); } .ogs-bundle__bottle:first-child { margin-left: 0; } .ogs-bundle__bottle img { width: 100%; height: auto; object-fit: contain; } .ogs-bundle:hover .ogs-bundle__bottle { transform: translateY(0) rotate(calc((var(--i) - 1.5) * 5deg)) translateX(calc((var(--i) - 1.5) * 5%)); } .ogs-bundle__badge { position: absolute; top: 14px; left: 14px; z-index: 6; background: var(--seal); color: #fff; font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; padding: 5px 11px; border-radius: 9999px; } .ogs-bundle__count { position: absolute; top: 14px; right: 14px; z-index: 6; font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--ash); } .ogs-bundle__title { font-family: var(--ff-display); font-size: clamp(24px, 2.2vw, 34px); font-weight: 400; line-height: 1.1; } .ogs-bundle__title a:hover { font-style: italic; color: var(--seal-deep); } .ogs-bundle__desc { font-family: var(--ff-display); font-size: 16px; line-height: 1.5; color: var(--ink-2); margin-top: 10px; } .ogs-bundle__list { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 6px 10px; padding-top: 14px; border-top: 1px solid var(--rule); } .ogs-bundle__list li { font-size: 12px; color: var(--ash); } .ogs-bundle__list li + li::before { content: "·"; margin-right: 10px; color: var(--haze); } .ogs-bundle__list a:hover { color: var(--ink); } .ogs-bundle__price { margin-top: 18px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .ogs-bundle__now { font-family: var(--ff-display); font-size: 26px; color: var(--ink); } .ogs-bundle__was { font-size: 14px; color: var(--ash); text-decoration: line-through; } .ogs-bundle__save { font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--seal-deep); border: 1px solid var(--seal-line); padding: 4px 10px; border-radius: 9999px; } .ogs-bundle__actions { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; } .ogs-bundle__actions .ogs-btn { flex: 1 1 auto; min-width: 150px; } /* feature variant — one large bundle, side by side */ .ogs-bundle--feature { grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: center; } .ogs-bundle--feature .ogs-bundle__stack { aspect-ratio: 5/4; } .ogs-bundle--feature .ogs-bundle__title { font-size: clamp(34px, 4.4vw, 68px); font-weight: 300; letter-spacing: -0.025em; } .ogs-bundle--feature .ogs-bundle__desc { font-size: clamp(17px, 1.5vw, 21px); } @media (max-width: 860px) { .ogs-bundle--feature { grid-template-columns: 1fr; } } /* mini variant — inside other sections */ .ogs-bundle--mini .ogs-bundle__stack { aspect-ratio: 16/9; } .ogs-bundle--mini .ogs-bundle__title { font-size: 20px; } .ogs-bundle--mini .ogs-bundle__desc, .ogs-bundle--mini .ogs-bundle__list { display: none; } /* =========================================================================== Signature bundles section =========================================================================== */ .ogs-sets { padding-top: clamp(120px, 18vh, 220px); padding-bottom: clamp(120px, 18vh, 220px); } .ogs-sets__head { margin: 40px 0 20px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: end; } .ogs-sets__head h2 { font-size: clamp(44px, 7vw, 116px); font-weight: 300; letter-spacing: -0.03em; } .ogs-sets__head h2 em { font-style: italic; color: var(--seal-deep); } .ogs-sets__head p { font-family: var(--ff-display); font-size: 18px; color: var(--ink-2); line-height: 1.5; max-width: 400px; } .ogs-sets__feature { padding: 48px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-bottom: 56px; } .ogs-sets__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3.4vw, 56px); } @media (max-width: 1000px) { .ogs-sets__grid { grid-template-columns: repeat(2, 1fr); } } /* =========================================================================== Full-bleed bundle banner =========================================================================== */ .ogs-banner { position: relative; max-width: none; margin: 0; background: var(--ink); color: var(--paper); padding: clamp(72px, 11vh, 130px) var(--gutter); overflow: hidden; border-top: 0; } .ogs-banner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 78% 42%, rgba(232, 120, 142, 0.34) 0%, rgba(232, 120, 142, 0) 62%); pointer-events: none; } .ogs-banner__inner { position: relative; max-width: var(--max); margin: 0 auto; display: grid; gap: 28px; } .ogs-banner__eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.24em; color: var(--seal); } .ogs-banner__head { font-family: var(--ff-display); font-size: clamp(38px, 6.5vw, 104px); font-weight: 300; letter-spacing: -0.03em; line-height: 0.98; max-width: 15ch; } .ogs-banner__head em { font-style: italic; color: var(--seal); } .ogs-banner__row { display: flex; gap: 40px; flex-wrap: wrap; align-items: center; } /* This was a wrapping flex line, which left an orphaned border-left hanging off whichever tier dropped to a second row. A fixed grid can't produce that: the divider is applied per column position, not per sibling. */ .ogs-banner__tiers { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; } .ogs-banner__tier { padding: 0 22px; border-left: 1px solid rgba(252, 251, 248, 0.18); display: grid; gap: 3px; } .ogs-banner__tier:first-child { padding-left: 0; border-left: 0; } .ogs-banner__tier b { font-family: var(--ff-display); font-style: italic; font-weight: 400; font-size: 28px; color: var(--seal); } .ogs-banner__tier span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; opacity: 0.7; } .ogs-banner .ogs-btn { border-color: var(--paper); color: var(--paper); } .ogs-banner .ogs-btn:hover { background: var(--paper); color: var(--ink); } .ogs-banner .ogs-btn--seal { background: var(--seal); border-color: var(--seal); color: #fff; } .ogs-banner .ogs-btn--seal:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); } /* The button pair is a nested .ogs-banner__row inside the outer one; treat it as its own action group rather than inheriting the 40px gap meant for separating tiers from actions. */ .ogs-banner__row .ogs-banner__row { gap: 12px; } /* =========================================================================== BUILDER =========================================================================== */ .ogs-builder { padding-top: clamp(120px, 18vh, 220px); padding-bottom: clamp(120px, 18vh, 220px); } .ogs-builder__head { margin: 40px 0 44px; max-width: 900px; } .ogs-builder__head h2 { font-size: clamp(44px, 7vw, 116px); font-weight: 300; letter-spacing: -0.03em; } .ogs-builder__head h2 em { font-style: italic; color: var(--seal-deep); } .ogs-builder__head p { font-family: var(--ff-display); font-size: clamp(17px, 1.5vw, 21px); color: var(--ink-2); margin-top: 20px; line-height: 1.5; max-width: 620px; } .ogs-builder__layout { display: grid; grid-template-columns: 1fr 320px; gap: clamp(32px, 4vw, 72px); align-items: start; } .ogs-builder__filters { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 20px; margin-bottom: 28px; border-bottom: 1px solid var(--rule); } .ogs-builder__filter { font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; padding: 7px 15px; border: 1px solid var(--rule); border-radius: 9999px; color: var(--ash); transition: border-color .25s var(--ease), color .25s var(--ease), background .25s; white-space: nowrap; } .ogs-builder__filter:hover { color: var(--ink); border-color: var(--ink); } .ogs-builder__filter.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); } .ogs-builder__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 20px; } .ogs-pick { position: relative; display: grid; gap: 10px; cursor: pointer; text-align: left; padding: 0; } .ogs-pick__media { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--paper-2); border: 1px solid transparent; transition: border-color .3s var(--ease); } .ogs-pick__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); } .ogs-pick:hover .ogs-pick__media img { transform: scale(1.05); } .ogs-pick__mark { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; background: rgba(252, 251, 248, 0.9); border: 1px solid var(--rule); display: grid; place-items: center; font-size: 15px; line-height: 1; color: var(--ink); transition: background .25s, color .25s, border-color .25s; } .ogs-pick.is-picked .ogs-pick__media { border-color: var(--seal); } .ogs-pick.is-picked .ogs-pick__mark { background: var(--seal); border-color: var(--seal); color: #fff; } .ogs-pick__name { font-family: var(--ff-display); font-size: 15px; line-height: 1.25; color: var(--ink); } .ogs-pick__price { font-size: 12px; color: var(--ash); } .ogs-pick.is-hidden { display: none; } .ogs-builder__aside { position: sticky; top: 96px; border: 1px solid var(--rule); padding: 24px 22px; display: grid; gap: 16px; background: var(--paper); } .ogs-builder__aside h3 { font-family: var(--ff-display); font-size: 22px; font-weight: 400; } .ogs-builder__aside .ogs-tray__slots { padding: 0; grid-template-columns: repeat(5, 1fr); } .ogs-builder__aside .ogs-ladder { border-top: 0; } @media (max-width: 1100px) { .ogs-builder__grid { grid-template-columns: repeat(3, 1fr); } } /* =========================================================================== COMMUNITY BUNDLES + suggestion form =========================================================================== */ .ogs-community { padding-top: clamp(120px, 18vh, 220px); padding-bottom: clamp(120px, 18vh, 220px); } .ogs-community__head { margin: 40px 0 48px; display: grid; gap: 20px; max-width: 900px; } .ogs-community__head h2 { font-size: clamp(42px, 6.5vw, 104px); font-weight: 300; letter-spacing: -0.03em; } .ogs-community__head h2 em { font-style: italic; color: var(--seal-deep); } .ogs-community__head p { font-family: var(--ff-display); font-size: clamp(16px, 1.4vw, 20px); color: var(--ink-2); line-height: 1.5; max-width: 560px; } .ogs-community__layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(40px, 5vw, 88px); align-items: start; } .ogs-community__list { display: grid; gap: 0; border-top: 1px solid var(--rule); } .ogs-cbundle { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--rule); transition: padding-left .35s var(--ease); } .ogs-cbundle:hover { padding-left: 8px; } .ogs-cbundle__thumbs { display: flex; } .ogs-cbundle__thumbs img { width: 42px; height: 56px; object-fit: cover; margin-left: -12px; border: 2px solid var(--paper); background: var(--paper-2); } .ogs-cbundle__thumbs img:first-child { margin-left: 0; } .ogs-cbundle__name { font-family: var(--ff-display); font-size: 20px; line-height: 1.2; } .ogs-cbundle__why { font-family: var(--ff-display); font-size: 14px; color: var(--ink-2); margin-top: 5px; line-height: 1.45; } .ogs-cbundle__by { font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ash); margin-top: 8px; display: block; } .ogs-cbundle__right { display: grid; gap: 8px; justify-items: end; } .ogs-cbundle__vote { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; border: 1px solid var(--rule); border-radius: 9999px; padding: 7px 14px; color: var(--ash); transition: border-color .25s, color .25s; } .ogs-cbundle__vote:hover { border-color: var(--seal); color: var(--seal-deep); } .ogs-cbundle__vote.is-voted { border-color: var(--seal); color: var(--seal-deep); background: var(--seal-soft); pointer-events: none; } .ogs-cbundle__votes { font-family: var(--ff-display); font-style: italic; font-size: 14px; color: var(--ink); } .ogs-cbundle__price { font-size: 12px; color: var(--ash); white-space: nowrap; } .ogs-community__empty { font-family: var(--ff-display); font-style: italic; font-size: 18px; color: var(--ash); padding: 28px 0; border-bottom: 1px solid var(--rule); line-height: 1.5; } /* --- the form --- */ .ogs-suggest { border: 1px solid var(--rule); padding: 28px 26px; display: grid; gap: 18px; position: sticky; top: 96px; background: var(--paper); } .ogs-suggest h3 { font-family: var(--ff-display); font-size: 26px; font-weight: 400; line-height: 1.15; } .ogs-suggest h3 em { font-style: italic; color: var(--seal-deep); } .ogs-suggest__note { font-size: 13px; color: var(--ash); line-height: 1.5; } .ogs-field { display: grid; gap: 7px; } .ogs-field label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--ash); } .ogs-field input, .ogs-field textarea { font: inherit; font-size: 16px; /* under 16px iOS zooms the page on focus */ color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--rule); padding: 9px 0; outline: none; width: 100%; transition: border-color .25s var(--ease); border-radius: 0; } .ogs-field input:focus, .ogs-field textarea:focus { border-color: var(--seal); } .ogs-field textarea { resize: none; height: 78px; } .ogs-suggest__picked { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; padding-top: 4px; } .ogs-suggest__chip { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; padding: 5px 11px; border: 1px solid var(--seal-line); border-radius: 9999px; color: var(--seal-deep); background: var(--seal-soft); } .ogs-suggest__chip button { font-size: 13px; line-height: 1; color: inherit; } .ogs-suggest__hint { font-family: var(--ff-display); font-style: italic; font-size: 13px; color: var(--ash); } .ogs-suggest__msg { font-size: 13px; line-height: 1.5; min-height: 1px; } .ogs-suggest__msg.is-ok { color: var(--seal-deep); } .ogs-suggest__msg.is-err { color: #A03A3A; } /* =========================================================================== Reviews wall =========================================================================== */ .ogs-reviews-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 48px; } .ogs-review-cell { background: var(--paper); padding: 28px 26px; display: grid; gap: 12px; align-content: start; transition: background .35s var(--ease); } .ogs-review-cell:hover { background: var(--paper-2); } .ogs-review-cell__text { font-family: var(--ff-display); font-size: 17px; line-height: 1.45; color: var(--ink); } .ogs-review-cell__meta { font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ash); display: grid; gap: 4px; } .ogs-review-cell__meta a { color: var(--ink); } .ogs-review-cell__meta a:hover { color: var(--seal-deep); } /* =========================================================================== Section-level bundle CTAs dropped into existing sections =========================================================================== */ .ogs-inline-cta { margin-top: 40px; padding: 22px 26px; border: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; background: var(--seal-soft); } .ogs-inline-cta__text { font-family: var(--ff-display); font-size: clamp(17px, 1.6vw, 22px); color: var(--ink); line-height: 1.35; max-width: 46ch; } .ogs-inline-cta__text em { font-style: italic; color: var(--seal-deep); } /* toast */ .ogs-toast { position: fixed; left: 50%; bottom: 28px; z-index: 9800; transform: translate(-50%, 20px); background: var(--ink); color: var(--paper); padding: 13px 22px; border-radius: 9999px; font-size: 12px; letter-spacing: 0.06em; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease), transform .4s var(--ease-out); max-width: calc(100vw - 40px); text-align: center; } .ogs-toast.is-up { opacity: 1; transform: translate(-50%, 0); } /* =========================================================================== HEADER / NAV CORRECTIONS Not bundle code, but it belongs here because this stylesheet loads after main.css and these overrides need the later cascade position to win without !important. The bug: .ogs-header.is-stuck carries backdrop-filter, and any element with a backdrop-filter becomes the containing block for its position: fixed descendants. .ogs-nav is a fixed full-screen panel living inside the header — so the moment the header sticks on scroll, the nav stops being sized to the viewport and gets sized to the header box instead. Result: menu items right-aligned and clipped off-screen. Fix: drop backdrop-filter below 860px, where that panel is the only thing relying on fixed positioning inside the header. The frost is barely legible at that size anyway, and a solid paper bar reads the same while costing less to composite on a phone. =========================================================================== */ @media (max-width: 860px) { .ogs-header.is-stuck { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--paper); } .ogs-header { background: var(--paper); } .ogs-nav { left: 0; right: 0; width: 100%; max-width: 100%; } .ogs-nav__list { width: 100%; padding: 0 var(--gutter); text-align: center; } .ogs-nav__list a, .ogs-nav__list li > a { display: inline-block; max-width: 100%; white-space: normal; overflow-wrap: anywhere; } } /* =========================================================================== MOBILE — consolidated One block, descending by width, so there's a single place to look when something is off on a phone rather than nine scattered queries. =========================================================================== */ @media (max-width: 900px) { .ogs-builder__layout { grid-template-columns: 1fr; } /* The tray IS the aside on small screens. Two racks on a phone is two sources of truth the user has to reconcile. */ .ogs-builder__aside { display: none; } .ogs-community__layout { grid-template-columns: 1fr; } .ogs-suggest { position: static; } .ogs-cbundle { grid-template-columns: auto 1fr; gap: 16px; } .ogs-cbundle__right { grid-column: 1 / -1; justify-items: start; grid-auto-flow: column; align-items: center; gap: 14px; } .ogs-reviews-wall { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { /* --- tray becomes a bottom sheet --- */ .ogs-tray { top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: auto; max-height: 86dvh; border-left: 0; border-top: 1px solid var(--rule); border-radius: 14px 14px 0 0; transform: translate3d(0, 100%, 0); box-shadow: 0 -30px 60px -40px rgba(15, 14, 12, 0.5); } .ogs-tray.is-open { transform: translate3d(0, 0, 0); } .ogs-tray__head { padding: 20px 20px 14px; } .ogs-tray__head::before { content: ""; display: block; width: 40px; height: 3px; border-radius: 3px; background: var(--haze); margin: -8px auto 12px; } .ogs-tray__slots { padding: 14px 20px 10px; gap: 6px; } .ogs-tray__progress { padding: 0 20px 12px; } .ogs-tray__body { padding: 0 20px 8px; } .ogs-tray__foot { padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px)); } .ogs-tray__title { font-size: 24px; } .ogs-tray__status { font-size: 14px; } /* --- handle becomes a sticky bottom bar --- */ .ogs-tray__toggle { top: auto; bottom: 0; right: 0; left: 0; transform: none; writing-mode: horizontal-tb; border-radius: 0; min-height: var(--tray-bar); padding: 13px 20px calc(13px + env(safe-area-inset-bottom, 0px)); justify-content: space-between; font-size: 11px; } body.tray-open .ogs-tray__toggle { transform: translateY(110%); } .ogs-tray__toggle-mini { display: flex; gap: 4px; align-items: center; } .ogs-tray__toggle-mini span { width: 7px; height: 9px; border: 1px solid rgba(252, 251, 248, 0.4); } .ogs-tray__toggle-mini span.is-filled { background: var(--seal); border-color: var(--seal); } /* The bar is fixed, so nothing reserves space for it and it parks on top of the footer's last row. Reserve the height on the body. */ body { padding-bottom: calc(var(--tray-bar) + env(safe-area-inset-bottom, 0px)); } .ogs-toast { bottom: calc(var(--tray-bar) + 20px); } } @media (min-width: 861px) { .ogs-tray__toggle-mini { display: none; } } @media (max-width: 768px) { /* .ogs-reveal is min-height:100vh with overflow:hidden, so the strip was clipped rather than pushing the hero taller. The ticker states the ladder above the fold and the banner restates it immediately below, so the strip is redundant here — cut it rather than fight the hero's height. */ .ogs-herostrip { display: none; } } @media (max-width: 640px) { .ogs-sets__head { grid-template-columns: 1fr; gap: 20px; } .ogs-sets__grid { grid-template-columns: 1fr; gap: 48px; } .ogs-sets__feature { padding: 32px 0; margin-bottom: 40px; } /* Four across is unreadable at this width; 2x2 keeps the numbers large. Column 1 of each row loses its divider. */ .ogs-banner__tiers { grid-template-columns: repeat(2, 1fr); gap: 20px 0; } .ogs-banner__tier { padding: 0 18px; } .ogs-banner__tier:nth-child(2n + 1) { padding-left: 0; border-left: 0; } .ogs-banner__tier b { font-size: 24px; } .ogs-banner__row { gap: 24px; } .ogs-banner__row .ogs-banner__row { width: 100%; flex-direction: column; align-items: stretch; } .ogs-banner .ogs-btn { width: 100%; } .ogs-inline-cta { padding: 18px; gap: 16px; } .ogs-inline-cta .ogs-btn { width: 100%; } .ogs-bundle__actions { gap: 8px; } .ogs-bundle__actions .ogs-btn { flex: 1 1 100%; min-width: 0; } } @media (max-width: 620px) { .ogs-builder__grid { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; } /* Filters scroll sideways rather than stacking into four rows of pills that push the grid below the fold. Negative margins let the row bleed to the screen edge so it reads as scrollable. */ .ogs-builder__filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); } .ogs-builder__filters::-webkit-scrollbar { display: none; } .ogs-builder__filter { flex: 0 0 auto; } } @media (max-width: 600px) { .ogs-reviews-wall { grid-template-columns: 1fr; } .ogs-review-cell { padding: 22px 20px; } .ogs-sets, .ogs-builder, .ogs-community { padding-top: 88px; padding-bottom: 80px; } .ogs-banner { padding: 64px var(--gutter); } } @media (max-width: 520px) { .ogs-cbundle { grid-template-columns: 1fr; } .ogs-cbundle__thumbs img { width: 36px; height: 48px; } .ogs-suggest { padding: 22px 18px; } .ogs-tray__slots { gap: 5px; } } /* =========================================================================== Reduced motion =========================================================================== */ @media (prefers-reduced-motion: reduce) { .ogs-bundle__bottle, .ogs-tray, .ogs-progress__fill { transition: none !important; } .ogs-slot.is-next { animation: none; } } /* =========================================================================== OG SCENTS — promotion + OG Club (APPEND to assets/css/bundles.css) The client's $39 / $99 offer and the email-gated club, in the same paper + rose language as the rest of the bundle layer. =========================================================================== */ .ogs-promo{ padding-top:clamp(90px,14vh,180px); padding-bottom:clamp(90px,14vh,180px); } .ogs-promo__head{ margin-bottom:44px; max-width:900px; } .ogs-promo__eyebrow{ font-size:11px;text-transform:uppercase;letter-spacing:.24em;color:var(--seal-deep); } .ogs-promo__title{ font-family:var(--ff-display); font-weight:300; letter-spacing:-.03em; font-size:clamp(36px,6vw,88px); line-height:1.0; margin-top:18px; } .ogs-promo__title em{ font-style:italic; color:var(--seal-deep); } .ogs-promo__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); } .ogs-promo__card{ background:var(--paper); padding:34px 30px; display:flex; flex-direction:column; gap:14px; align-items:flex-start; } .ogs-promo__card--kit{ background:var(--seal-soft); } .ogs-promo__card--club{ background:var(--ink); color:var(--paper); } .ogs-promo__tag{ font-size:10px; text-transform:uppercase; letter-spacing:.2em; color:var(--ash); } .ogs-promo__card--club .ogs-promo__tag{ color:var(--seal); } .ogs-promo__tag--seal{ color:var(--seal-deep); } .ogs-promo__price{ display:flex; align-items:baseline; gap:12px; margin:6px 0; } .ogs-promo__price .now{ font-family:var(--ff-display); font-size:clamp(40px,4vw,58px); font-weight:300; letter-spacing:-.02em; } .ogs-promo__price .was{ font-size:20px; color:var(--ash); text-decoration:line-through; } .ogs-promo__card--kit .ogs-promo__price .now{ color:var(--seal-deep); } .ogs-promo__note{ font-family:var(--ff-display); font-size:16px; color:var(--ink-2); line-height:1.5; } .ogs-promo__card--club .ogs-promo__note{ color:rgba(252,251,248,.8); } .ogs-promo__card .ogs-btn{ margin-top:auto; } .ogs-promo__club-copy{ font-size:14px; line-height:1.55; color:rgba(252,251,248,.82); } .ogs-promo__club-copy strong{ color:var(--seal); font-family:var(--ff-display); font-style:italic; font-weight:400; } .ogs-promo__club-copy code{ font-family:var(--ff-body); background:rgba(232,120,142,.2); color:#fff; padding:1px 7px; border-radius:4px; letter-spacing:.06em; font-size:13px; } .ogs-club__form{ display:flex; gap:8px; width:100%; margin-top:4px; flex-wrap:wrap; } .ogs-club__form input{ flex:1; min-width:150px; font:inherit; font-size:16px; padding:12px 14px; border:1px solid rgba(252,251,248,.3); border-radius:9999px; background:rgba(252,251,248,.06); color:#fff; outline:none; } .ogs-club__form input::placeholder{ color:rgba(252,251,248,.5); } .ogs-club__form input:focus{ border-color:var(--seal); } .ogs-club__form .ogs-btn{ margin-top:0; } .ogs-club__msg{ font-size:13px; line-height:1.5; min-height:1px; margin-top:4px; } .ogs-club__msg.is-ok{ color:var(--seal); } .ogs-club__msg.is-err{ color:#ff9aa8; } .ogs-promo__fine{ font-size:11px; letter-spacing:.06em; color:rgba(252,251,248,.5); margin-top:2px; } @media (max-width:900px){ .ogs-promo__grid{ grid-template-columns:1fr; } } /* =========================================================================== OG SCENTS — "The Cabinet" collections (APPEND to assets/css/bundles.css) Mobile-first: the phone layout is the default; the pinned desktop stage is layered on at >=901px. New .ogs-cab prefix so nothing clashes with the old collections styles still sitting in main.css. =========================================================================== */ .ogs-cab{ position:relative; padding-top:clamp(70px,10vh,140px); padding-bottom:0; } .ogs-cab__intro{ padding:0 var(--gutter); max-width:var(--max); margin:0 auto 8px; } .ogs-cab__eyebrow{ display:inline-flex; align-items:center; gap:14px; font-size:11px; text-transform:uppercase; letter-spacing:.24em; color:var(--ash); } .ogs-cab__eyebrow::before{ content:""; width:44px; height:1px; background:var(--seal); } .ogs-cab__head{ font-family:var(--ff-display); font-weight:300; letter-spacing:-.04em; font-size:clamp(40px,10vw,120px); line-height:.95; margin-top:16px; } .ogs-cab__head em{ font-style:italic; } .ogs-cab__empty{ padding:40px var(--gutter); color:var(--ash); font-family:var(--ff-display); font-style:italic; } /* ---- MOBILE-FIRST: slides are stacked full-height panels ---- */ .ogs-cab__track{ position:relative; } .ogs-cab__stage{ position:relative; } .ogs-cab__num{ display:none; } .ogs-cab__mist{ display:none; } .ogs-cab__slide{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center; gap:22px; padding:88px var(--gutter) 44px; overflow:hidden; background:radial-gradient(72% 42% at 72% 20%, color-mix(in srgb, var(--aura) 34%, transparent), transparent 62%); } .ogs-cab__text{ position:relative; z-index:3; } .ogs-cab__roman{ font-family:var(--ff-display); font-style:italic; font-size:13px; color:var(--accent); } .ogs-cab__title{ font-family:var(--ff-display); font-weight:300; letter-spacing:-.04em; line-height:.95; font-size:clamp(40px,12vw,104px); margin:8px 0 14px; } .ogs-cab__title .w{ display:inline-block; overflow:hidden; vertical-align:top; } .ogs-cab__title .w i{ display:inline-block; font-style:normal; transform:translateY(110%); transition:transform .8s var(--ease-out); } .ogs-cab__slide.is-active .ogs-cab__title .w i, .ogs-cab__slide.m-in .ogs-cab__title .w i{ transform:translateY(0); } .ogs-cab__desc{ font-family:var(--ff-display); font-size:clamp(16px,4.4vw,20px); color:var(--ink-2); line-height:1.5; max-width:42ch; } .ogs-cab__actions{ display:flex; gap:14px; align-items:center; margin-top:22px; flex-wrap:wrap; } .ogs-cab__cta{ background:var(--accent); color:#fff; border-radius:9999px; padding:14px 24px; font-size:11px; text-transform:uppercase; letter-spacing:.18em; transition:transform .3s var(--ease), filter .3s; } .ogs-cab__cta:hover{ filter:brightness(1.08); transform:translateY(-2px); } .ogs-cab__link{ font-size:12px; text-transform:uppercase; letter-spacing:.16em; border-bottom:1px solid currentColor; padding-bottom:3px; color:var(--ink-2); } .ogs-cab__stagebox{ position:relative; display:grid; place-items:center; min-height:46vh; order:-1; } .ogs-cab__pedestal{ position:absolute; bottom:16%; width:min(60vw,320px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--aura) 76%, transparent), transparent 62%); filter:blur(6px); transform:scaleY(.34); } /* real product photo, framed as a print */ .ogs-cab__hero{ position:relative; z-index:2; display:block; width:min(64vw,300px); background:#fff; padding:12px 12px 34px; border-radius:3px; box-shadow:0 30px 50px -22px rgba(15,14,12,.4), 0 3px 10px rgba(15,14,12,.10); transform:perspective(1100px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)); will-change:transform; } .ogs-cab__hero img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:2px; transition:opacity .25s; } .ogs-cab__deck{ position:relative; z-index:4; display:flex; gap:8px; margin-top:20px; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .ogs-cab__deck::-webkit-scrollbar{ display:none; } .ogs-cab__chip{ flex:0 0 auto; width:58px; background:#fff; padding:4px; border-radius:3px; box-shadow:0 12px 22px -12px rgba(15,14,12,.4); transition:transform .35s var(--ease-out), box-shadow .3s; } .ogs-cab__chip img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:2px; } .ogs-cab__chip.on,.ogs-cab__chip:hover{ transform:translateY(-8px) scale(1.05); box-shadow:0 22px 30px -14px rgba(15,14,12,.5); } .ogs-cab__rail{ display:none; } /* ---- DESKTOP: pin the stage, one family fills the viewport ---- */ @media (min-width:901px){ .ogs-cab__stage{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:grid; place-items:center; background:radial-gradient(58% 78% at var(--aura-x,70%) var(--aura-y,42%), color-mix(in srgb, var(--aura) calc(var(--wash,.5)*40%), transparent) 0%, transparent 60%), var(--paper); } .ogs-cab__num{ display:block; position:absolute; left:2vw; bottom:-5vh; font-family:var(--ff-display); font-style:italic; font-weight:300; font-size:44vh; line-height:.7; pointer-events:none; user-select:none; color:color-mix(in srgb, var(--accent) 12%, transparent); } .ogs-cab__mist{ display:block; position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; } .ogs-cab__mist i{ position:absolute; bottom:-16px; width:7px; height:7px; border-radius:50%; background:color-mix(in srgb, var(--aura) 60%, transparent); filter:blur(1px); opacity:0; animation:ogsCabRise linear infinite; } .ogs-cab__mist i:nth-child(1){left:12%;animation-duration:8s;animation-delay:.2s} .ogs-cab__mist i:nth-child(2){left:24%;animation-duration:10s;animation-delay:1.4s} .ogs-cab__mist i:nth-child(3){left:38%;animation-duration:7s;animation-delay:2.1s} .ogs-cab__mist i:nth-child(4){left:52%;animation-duration:11s;animation-delay:.6s} .ogs-cab__mist i:nth-child(5){left:63%;animation-duration:9s;animation-delay:3s} .ogs-cab__mist i:nth-child(6){left:71%;animation-duration:8s;animation-delay:1.1s} .ogs-cab__mist i:nth-child(7){left:80%;animation-duration:12s;animation-delay:2.6s} .ogs-cab__mist i:nth-child(8){left:88%;animation-duration:9s;animation-delay:.9s} .ogs-cab__mist i:nth-child(9){left:44%;animation-duration:10s;animation-delay:4s} .ogs-cab__mist i:nth-child(10){left:32%;animation-duration:8s;animation-delay:3.4s} .ogs-cab__slide{ position:absolute; inset:0; min-height:0; display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:clamp(24px,4vw,80px); max-width:var(--max); margin:0 auto; padding:0 var(--gutter); opacity:0; pointer-events:none; background:none; transition:opacity .6s var(--ease); } .ogs-cab__slide.is-active{ opacity:1; pointer-events:auto; } .ogs-cab__title{ margin:10px 0 18px; font-size:clamp(48px,7vw,104px); } .ogs-cab__desc,.ogs-cab__actions{ opacity:0; transform:translateY(14px); } .ogs-cab__slide.is-active .ogs-cab__desc{ opacity:1; transform:none; transition:opacity .7s .25s, transform .7s .25s; } .ogs-cab__slide.is-active .ogs-cab__actions{ opacity:1; transform:none; transition:opacity .7s .38s, transform .7s .38s; } .ogs-cab__stagebox{ height:80vh; order:0; } .ogs-cab__hero{ width:auto; height:60vh; max-height:560px; padding:14px 14px 40px; animation:ogsCabFloat 6s var(--ease) infinite; } .ogs-cab__hero img{ height:calc(60vh - 54px); width:auto; aspect-ratio:auto; } .ogs-cab__pedestal{ bottom:12%; width:min(42vh,400px); } .ogs-cab__deck{ position:absolute; bottom:3vh; left:50%; transform:translateX(-50%); margin-top:0; overflow:visible; } .ogs-cab__chip{ width:64px; } .ogs-cab__rail{ display:flex; position:fixed; right:clamp(14px,2.4vw,34px); top:50%; transform:translateY(-50%); z-index:40; flex-direction:column; gap:16px; align-items:center; opacity:0; transition:opacity .4s; } .ogs-cab__rail.show{ opacity:1; } .ogs-cab__rail button{ font-family:var(--ff-display); font-style:italic; font-size:13px; color:var(--ash); writing-mode:vertical-rl; display:flex; align-items:center; gap:8px; transition:color .3s; } .ogs-cab__rail button::before{ content:""; width:1px; height:18px; background:var(--rule); transition:height .3s, background .3s; } .ogs-cab__rail button.on{ color:var(--ink); } .ogs-cab__rail button.on::before{ height:34px; background:var(--accent); } } @keyframes ogsCabRise{ 0%{transform:translateY(0) scale(.6);opacity:0} 20%{opacity:.55} 100%{transform:translateY(-88vh) scale(1.4);opacity:0} } @keyframes ogsCabFloat{ 0%,100%{translate:0 0} 50%{translate:0 -14px} } @media (prefers-reduced-motion:reduce){ .ogs-cab__hero{ animation:none; } .ogs-cab__mist{ display:none; } .ogs-cab__title .w i{ transition:none; transform:none; } .ogs-cab__desc,.ogs-cab__actions{ transition:none!important; opacity:1!important; transform:none!important; } } /* =========================================================================== OG SCENTS — bundle card imagery fix (APPEND to assets/css/bundles.css) The problem: product photos carry a marble background, so fanning them raw reads as rectangular photo tiles. The fix: frame each as a glossy "print" (white matte + layered shadow) and fan them like a spread of prints, with a satisfying hover spread. Turns the artefact into intent. Targets the existing .ogs-bundle__stack / .ogs-bundle__bottle markup — no template changes needed. =========================================================================== */ .ogs-bundle__stack{ position:relative; display:grid; place-items:center; isolation:isolate; min-height:clamp(160px,26vw,260px); } .ogs-bundle__bottle{ position:absolute; width:min(34%,120px); aspect-ratio:3/4; background:#fff; padding:6px 6px 16px; border-radius:3px; box-shadow:0 18px 34px -18px rgba(15,14,12,.45), 0 2px 6px rgba(15,14,12,.10); transform-origin:bottom center; transform:translateX(calc((var(--i,0) - 1) * 52%)) rotate(calc((var(--i,0) - 1) * 9deg)) translateY(calc(var(--i,0) * 1px)); transition:transform .6s var(--ease-out), box-shadow .3s; z-index:1; } .ogs-bundle__bottle:nth-child(2){ z-index:3; } /* centre print sits on top */ .ogs-bundle__bottle img{ width:100%; height:100%; object-fit:cover; border-radius:2px; display:block; } /* hover / focus: spread the prints apart */ .ogs-bundle:hover .ogs-bundle__bottle, .set:hover .ogs-bundle__bottle{ transform:translateX(calc((var(--i,0) - 1) * 82%)) rotate(calc((var(--i,0) - 1) * 14deg)) translateY(-6px); } .ogs-bundle:hover .ogs-bundle__bottle:nth-child(2){ transform:translateY(-12px) scale(1.04); } .ogs-bundle__badge{ position:absolute; top:12px; left:12px; z-index:9; background:var(--seal); color:#fff; font-size:10px; text-transform:uppercase; letter-spacing:.18em; padding:5px 11px; border-radius:9999px; } /* the feature card's larger stack gets a touch more spread */ .ogs-sets__feature .ogs-bundle__bottle{ width:min(30%,150px); } /* mobile: tighten the fan so prints never clip the card edge */ @media (max-width:600px){ .ogs-bundle__stack{ min-height:200px; } .ogs-bundle__bottle{ width:38%; padding:5px 5px 14px; } .ogs-bundle__bottle{ transform:translateX(calc((var(--i,0) - 1) * 42%)) rotate(calc((var(--i,0) - 1) * 8deg)); } /* on touch there's no hover — show a gentle resting spread instead */ .ogs-bundle__bottle:nth-child(2){ transform:translateY(-6px) scale(1.03); } } @media (hover:none){ .ogs-bundle__bottle{ transition:none; } } /* =========================================================================== OG SCENTS — mobile hardening (APPEND to assets/css/bundles.css, loads last) Targeted fixes for the real issues, not blanket guards. main.css already sets body{overflow-x:clip}, so this is about elements that DON'T fit and get clipped — chiefly the hero headline. =========================================================================== */ /* 1) THE HERO HEADLINE — the main culprit. Inside the centered column-flex hero, the

sizes to its full one-line width and never wraps, so it runs off the right and gets clipped. Capping it to the container forces the words to wrap. This is the single fix that stops the hero looking broken. */ .ogs-reveal__headline{ max-width:100%; } .ogs-reveal__headline .word{ white-space:nowrap; } /* keep each word whole; wrap between words */ /* align the hero's own mobile switch to the SAME 860px the nav uses, so there's no ugly in-between state (hamburger showing but hero still at desktop size). */ @media (max-width:860px){ .ogs-reveal__headline{ font-size:clamp(32px,9vw,54px); line-height:1.03; } .ogs-reveal__foot{ grid-template-columns:1fr; gap:16px; } .ogs-reveal__scroll{ display:none; } } @media (max-width:400px){ .ogs-reveal__headline{ font-size:clamp(28px,9vw,42px); } } /* 2) TOUCH DEVICES — no cursor, so the reveal never runs. Hide the hint and the reveal canvases, and show the bottle so the hero isn't empty. */ @media (hover:none){ .ogs-reveal__hint{ display:none !important; } .ogs-reveal__stencil, .ogs-reveal__spray{ display:none !important; } .ogs-reveal__bottle, .ogs-reveal__bottle-img{ opacity:1 !important; filter:none !important; transform:none !important; } } /* 3) PROMO TITLE — "$39 / 8-piece kit $99" was clipping on narrow phones. Smaller floor size so both lines fit. */ @media (max-width:600px){ .ogs-promo__title{ font-size:clamp(28px,8.5vw,44px); line-height:1.06; } .ogs-promo__price .now{ font-size:clamp(32px,10vw,46px); } } /* 4) HERO TIER STRIP — stack the cells instead of forcing a wide row. */ @media (max-width:860px){ .ogs-herostrip{ flex-wrap:wrap; gap:8px; } .ogs-herostrip__cell{ flex:1 1 100%; } } /* 5) belt-and-braces: no heading should ever push wider than its column */ @media (max-width:600px){ h1,h2,h3{ overflow-wrap:break-word; } } /* =========================================================================== OG SCENTS — THE MOBILE PASS (APPEND at the very END of assets/css/bundles.css) One consolidated fix for the rich homepage on phones. Replaces the earlier _mobile-hardening attempt — delete that block if you pasted it, then paste this instead. Ordered by section, top of page to bottom. =========================================================================== */ /* --------------------------------------------------------------------------- 0) THE CROP, KILLED AT THE ROOT overflow-x:clip on body alone still lets wide children crop the page on several mobile browsers. Hidden on BOTH html and body + a hard max-width means nothing can push the page sideways, full stop. --------------------------------------------------------------------------- */ html, body{ max-width:100% !important; overflow-x:hidden !important; } img, video, svg{ max-width:100%; height:auto; } @media (max-width:860px){ /* --------------------------------------------------------------------------- 1) HERO (the reveal section) — the main offender in your screenshots. The headline is split into per-character spans inside a centered flex column, so the h1 takes its full one-line width and clips. Force it to the container and let it wrap BETWEEN words (each word span stays whole). --------------------------------------------------------------------------- */ .ogs-reveal{ min-height:92svh; } .ogs-reveal__headline{ max-width:100% !important; font-size:clamp(34px,10.5vw,54px) !important; line-height:1.05 !important; display:flex; flex-wrap:wrap; justify-content:center; column-gap:.26em; row-gap:.05em; text-align:center; } .ogs-reveal__headline .word{ white-space:nowrap; display:inline-flex; } .ogs-reveal__headline .word-sp{ display:none; } /* flex gap replaces spacer spans */ .ogs-reveal__sub{ font-size:15px; max-width:34ch; text-align:center; } .ogs-reveal__cap{ text-align:center; } /* the hero footer row: stack, center, breathe */ .ogs-reveal__foot{ grid-template-columns:1fr; gap:14px; text-align:center; } .ogs-reveal__foot > *{ justify-self:center; } .ogs-reveal__scroll{ display:none; } /* --------------------------------------------------------------------------- 2) TOUCH: the cursor-reveal can't run (no cursor). Hide the hint and the stencil/spray canvases; show the bottle at full strength so the hero has its subject. Desktop keeps the reveal untouched. --------------------------------------------------------------------------- */ } @media (hover:none){ .ogs-reveal__hint{ display:none !important; } .ogs-reveal__stencil, .ogs-reveal__spray{ display:none !important; } .ogs-reveal__bottle, .ogs-reveal__bottle-img{ opacity:1 !important; visibility:visible !important; filter:none !important; transform:none !important; } } @media (max-width:860px){ /* --------------------------------------------------------------------------- 3) PROMO (the $39 / $99 offer) — title was clipping on narrow screens. --------------------------------------------------------------------------- */ .ogs-promo__title{ font-size:clamp(28px,8.6vw,44px); line-height:1.06; } .ogs-promo__price .now{ font-size:clamp(32px,10vw,46px); } .ogs-promo__card{ padding:26px 20px; } /* --------------------------------------------------------------------------- 4) MEMORY — big split-word pull quote: same wrap treatment as the hero. --------------------------------------------------------------------------- */ .ogs-memory__pull{ max-width:100%; font-size:clamp(24px,7.4vw,36px); line-height:1.18; } .ogs-memory__pull .word{ white-space:nowrap; } .ogs-memory__layout{ grid-template-columns:1fr; gap:28px; } .ogs-memory__media{ order:-1; } /* --------------------------------------------------------------------------- 5) SETS — cards stack; the fanned prints stay inside their card. --------------------------------------------------------------------------- */ .ogs-sets__grid{ grid-template-columns:1fr; gap:52px; } .ogs-bundle__stack{ min-height:200px; } /* --------------------------------------------------------------------------- 6) BESTSELLERS — the horizontal pinned scroller becomes a simple vertical stack on phones; pinning fights touch scrolling. --------------------------------------------------------------------------- */ .ogs-bestsellers__track{ display:grid !important; grid-template-columns:1fr 1fr; gap:18px; transform:none !important; width:auto !important; padding:0 var(--gutter); } .ogs-bestsellers__card{ width:auto !important; } .ogs-bestsellers__spacer{ display:none; } /* --------------------------------------------------------------------------- 7) MOOD + NOTES — tab rows scroll horizontally INSIDE their strip (contained, so they can't push the page wide). --------------------------------------------------------------------------- */ .ogs-mood__tabs, .ogs-notes__grid{ display:flex; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; gap:10px; padding-bottom:8px; margin-left:calc(var(--gutter) * -1); margin-right:calc(var(--gutter) * -1); padding-left:var(--gutter); padding-right:var(--gutter); } .ogs-mood__tabs::-webkit-scrollbar, .ogs-notes__grid::-webkit-scrollbar{ display:none; } .ogs-mood__tabs > *, .ogs-notes__grid > *{ flex:0 0 auto; } /* --------------------------------------------------------------------------- 8) COMMUNITY SHELF + REVIEWS WALL — single column. --------------------------------------------------------------------------- */ .ogs-community__grid{ grid-template-columns:1fr; gap:20px; } .ogs-reviews__wall{ grid-template-columns:1fr; } .ogs-reviews__cell{ padding:22px 18px; } /* --------------------------------------------------------------------------- 9) GLOBAL TYPE + TOUCH TARGETS at phone width --------------------------------------------------------------------------- */ h1,h2,h3{ overflow-wrap:break-word; } .ogs-btn{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; } input, select, textarea{ font-size:16px; } /* stops iOS auto-zoom */ /* --------------------------------------------------------------------------- 10) SECTION RHYTHM — desktop uses huge vertical padding; tighten so the page doesn't feel like endless empty scroll on a phone. --------------------------------------------------------------------------- */ .ogs-section{ padding-top:clamp(56px,9vh,90px); padding-bottom:clamp(56px,9vh,90px); } } /* end 860px */ /* --------------------------------------------------------------------------- 11) SMALL PHONES (<=400px) — one more notch down for the biggest type. --------------------------------------------------------------------------- */ @media (max-width:400px){ .ogs-reveal__headline{ font-size:clamp(30px,10vw,40px) !important; } .ogs-promo__title{ font-size:clamp(25px,8.4vw,34px); } .ogs-bestsellers__track{ grid-template-columns:1fr; } } /* --------------------------------------------------------------------------- 12) REDUCED MOTION — calm everything, everywhere. --------------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ *, *::before, *::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; } } /* =========================================================================== OG SCENTS — THE MOBILE PASS v2 (APPEND at the very END of bundles.css) Replaces BOTH earlier mobile blocks (_mobile-hardening and the first _mobile-pass) — delete those if pasted, then paste this one. Fixes, per your screenshots: bestsellers crop, notes layout, the one-letter-per-line shop headline, hero wrap, and the root overflow. =========================================================================== */ /* 0) THE CROP, KILLED AT THE ROOT */ html, body{ max-width:100% !important; overflow-x:hidden !important; } img, video, svg{ max-width:100%; } /* 1) SHOP HEADLINE — was rendering one letter per line. A narrow container plus word-breaking collapsed it into a single column of characters. Full width + normal wrapping fixes it at every screen size. */ .ogs-shop-entry__head{ display:block; } .ogs-shop-entry__head h2{ width:100% !important; max-width:100% !important; min-width:0 !important; white-space:normal !important; overflow-wrap:normal !important; word-break:normal !important; } @media (max-width:860px){ /* 2) HERO — headline wraps between words instead of clipping. */ .ogs-reveal__headline{ max-width:100% !important; font-size:clamp(34px,10.5vw,54px) !important; line-height:1.05 !important; display:flex; flex-wrap:wrap; justify-content:center; column-gap:.26em; row-gap:.05em; text-align:center; } .ogs-reveal__headline .word{ white-space:nowrap; display:inline-flex; } .ogs-reveal__headline .word-sp{ display:none; } .ogs-reveal__sub{ max-width:34ch; text-align:center; } .ogs-reveal__foot{ grid-template-columns:1fr; gap:14px; text-align:center; } .ogs-reveal__foot > *{ justify-self:center; } .ogs-reveal__scroll{ display:none; } /* 3) PROMO — the $39/$99 heading fits. */ .ogs-promo__title{ font-size:clamp(28px,8.6vw,44px); line-height:1.06; } .ogs-promo__price .now{ font-size:clamp(32px,10vw,46px); } .ogs-promo__card{ padding:26px 20px; } /* 4) MEMORY — pull quote wraps, media stacks on top. */ .ogs-memory__pull{ max-width:100%; font-size:clamp(24px,7.4vw,36px); line-height:1.18; } .ogs-memory__pull .word{ white-space:nowrap; } .ogs-memory__layout{ grid-template-columns:1fr; gap:28px; } .ogs-memory__media{ order:-1; } /* 5) SETS — stack. */ .ogs-sets__grid{ grid-template-columns:1fr; gap:52px; } /* 6) BESTSELLERS — this was your cropped screenshot. The desktop version is a pinned horizontal scroller; on a phone that leaves cards hanging off the right edge. Neutralise the pin and the transform entirely and lay the cards as a simple 2-up grid. */ .ogs-bestsellers{ height:auto !important; min-height:0 !important; } .ogs-bestsellers__pin{ position:static !important; height:auto !important; overflow:visible !important; } .ogs-bestsellers__track{ display:grid !important; grid-template-columns:1fr 1fr; gap:18px; transform:none !important; width:auto !important; min-width:0 !important; padding:0 !important; flex-wrap:wrap; } .ogs-bestsellers__track > .panel{ width:auto !important; min-width:0 !important; flex:none !important; } .ogs-bestsellers__intro, .ogs-bestsellers__outro{ grid-column:1 / -1; } .ogs-bestsellers__now{ display:none; } /* 7) NOTES — your third screenshot. Not a horizontal strip: each note is a clean full-width row (icon beside text), stacked vertically, text wrapping normally. */ .ogs-notes__grid{ display:grid !important; grid-template-columns:1fr !important; gap:0 !important; overflow:visible !important; margin-left:0; margin-right:0; padding-left:0; padding-right:0; } .ogs-note{ display:grid !important; grid-template-columns:56px 1fr; gap:16px; align-items:start; width:100% !important; min-width:0 !important; flex:none !important; padding:22px 0; border-top:1px solid var(--rule); } .ogs-note__art{ width:56px; } .ogs-note__meta{ min-width:0; } .ogs-note__meta p{ max-width:none; } /* 8) MOOD tabs — scroll inside their own strip, contained. */ .ogs-mood__tabs{ display:flex; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; gap:10px; padding-bottom:8px; margin-left:calc(var(--gutter) * -1); margin-right:calc(var(--gutter) * -1); padding-left:var(--gutter); padding-right:var(--gutter); } .ogs-mood__tabs::-webkit-scrollbar{ display:none; } .ogs-mood__tabs > *{ flex:0 0 auto; } /* 9) COMMUNITY + TESTIMONIALS — single column. */ .ogs-community__grid{ grid-template-columns:1fr; gap:20px; } .ogs-testimonials__grid{ grid-template-columns:1fr; } /* 10) RHYTHM + TOUCH TARGETS */ .ogs-section{ padding-top:clamp(56px,9vh,90px); padding-bottom:clamp(56px,9vh,90px); } .ogs-btn{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; } input, select, textarea{ font-size:16px; } } /* end 860px */ /* 11) TOUCH — the cursor reveal can't run; show the bottle outright. */ @media (hover:none){ .ogs-reveal__hint{ display:none !important; } .ogs-reveal__stencil, .ogs-reveal__spray{ display:none !important; } .ogs-reveal__bottle, .ogs-reveal__bottle-img{ opacity:1 !important; visibility:visible !important; filter:none !important; transform:none !important; } } /* 12) SMALL PHONES */ @media (max-width:400px){ .ogs-reveal__headline{ font-size:clamp(30px,10vw,40px) !important; } .ogs-promo__title{ font-size:clamp(25px,8.4vw,34px); } .ogs-bestsellers__track{ grid-template-columns:1fr; } } /* 13) REDUCED MOTION */ @media (prefers-reduced-motion:reduce){ *, *::before, *::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; } } /* =========================================================================== OG SCENTS — bundle imagery, frameless blend (REPLACES the earlier "photo prints" block — delete that from bundles.css if pasted, then paste this.) The photos' own light-beige background is close enough to the site's paper that multiply-blending melts it away — the bottles sit straight on the page, no white frames, no boxes. =========================================================================== */ .ogs-bundle__stack{ position:relative; display:grid; place-items:center; isolation:isolate; min-height:clamp(180px,26vw,280px); background:none; border:0; /* no box behind the fan */ } .ogs-bundle__bottle{ position:absolute; width:min(44%,150px); aspect-ratio:3/4; background:none; padding:0; border-radius:0; box-shadow:none; /* frameless */ transform-origin:bottom center; transform:translateX(calc((var(--i,0) - 1) * 46%)) rotate(calc((var(--i,0) - 1) * 7deg)); transition:transform .6s var(--ease-out); z-index:1; } .ogs-bundle__bottle:nth-child(2){ z-index:3; } .ogs-bundle__bottle img{ width:100%; height:100%; object-fit:cover; display:block; mix-blend-mode:multiply; /* beige photo bg melts into the paper */ } /* hover: gentle spread, no lift-shadow (shadows would redraw the rectangle) */ .ogs-bundle:hover .ogs-bundle__bottle, .set:hover .ogs-bundle__bottle{ transform:translateX(calc((var(--i,0) - 1) * 66%)) rotate(calc((var(--i,0) - 1) * 10deg)); } .ogs-bundle:hover .ogs-bundle__bottle:nth-child(2){ transform:translateY(-6px) scale(1.03); } .ogs-bundle__badge{ position:absolute; top:6px; left:0; z-index:9; background:var(--seal); color:#fff; font-size:10px; text-transform:uppercase; letter-spacing:.18em; padding:5px 11px; border-radius:9999px; } .ogs-sets__feature .ogs-bundle__bottle{ width:min(38%,190px); } @media (max-width:600px){ .ogs-bundle__stack{ min-height:200px; } .ogs-bundle__bottle{ width:48%; transform:translateX(calc((var(--i,0) - 1) * 38%)) rotate(calc((var(--i,0) - 1) * 6deg)); } .ogs-bundle__bottle:nth-child(2){ transform:translateY(-4px) scale(1.02); } } @media (hover:none){ .ogs-bundle__bottle{ transition:none; } } /* =========================================================================== OG SCENTS — mobile.css THE responsive layer. Loads last. One file, one place to look. This REPLACES four blocks previously appended to bundles.css: • "bundle card imagery fix" (white photo prints) • "mobile hardening" • "THE MOBILE PASS" • "THE MOBILE PASS v2" Delete all four from bundles.css before using this. KEEP the final "bundle imagery, frameless blend" block — that one is the good version. Ordering: foundations first, then one main @media (max-width:860px) walking the page top to bottom in the same order as front-page.php, then the small-phone pass. Nothing is duplicated across breakpoints. =========================================================================== */ /* =========================================================================== 0 — FOUNDATIONS =========================================================================== */ /* The old fix was html,body{ overflow-x:hidden !important }. That was the cause of half the mobile weirdness, not the cure: overflow:hidden on the root turns html into a scroll container, which silently kills every position:sticky in the theme — the Cabinet's pinned stage, the builder aside, the suggestion form. overflow-x:clip clips exactly the same way WITHOUT creating a scroll container, so sticky survives. */ html { overflow-x: clip; } body { overflow-x: clip; max-width: 100%; } @supports not (overflow: clip) { html { overflow-x: hidden; } body { overflow-x: hidden; } } img, video, svg, canvas, iframe { max-width: 100%; } /* Grid and flex children default to min-width:auto and refuse to shrink below their content — the single most common cause of a child pushing the page sideways. This lets them shrink. */ .ogs-section > *, .ogs-main > * { min-width: 0; } /* main.css sets h1,h2 { word-break: break-word } at 600px. In a column that has been squeezed narrow, break-word will happily break EVERY word, which is what produced the shop headline rendering one letter per line. overflow-wrap only breaks words that genuinely can't fit. */ h1, h2, h3, h4 { word-break: normal; overflow-wrap: break-word; hyphens: none; } /* Anchor links from the nav land under the fixed header without this. */ [id^="section-"] { scroll-margin-top: 84px; } /* =========================================================================== 1 — HEADER, TICKER, NAV =========================================================================== */ /* The ticker scrolls away with the page, but the header was pinned at top:34px forever — leaving a 34px window of content sliding past above it. Once the header is stuck it belongs at the very top. */ .ogs-header { transition: background .35s var(--ease), padding .35s var(--ease), top .3s var(--ease); } body.has-ticker .ogs-header.is-stuck { top: 0; } @media (max-width: 860px) { /* The nav panel is position:fixed and lives INSIDE the header. Any ancestor with backdrop-filter becomes the containing block for its fixed descendants, so the moment .is-stuck applied its blur, the full-screen menu got sized to the header bar instead of the viewport. Solid paper reads the same at this size and composites cheaper on a phone. (Also in bundles.css — kept here so this file stands alone if that block ever moves.) */ .ogs-header.is-stuck { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--paper); } .ogs-header { background: var(--paper); padding: 12px var(--gutter) 10px; } .ogs-nav { width: 100%; max-width: 100%; height: 100svh; left: 0; right: 0; } .ogs-nav__list { width: 100%; padding: 0 var(--gutter); text-align: center; gap: 22px; } .ogs-nav__list a, .ogs-nav__list li > a { display: inline-block; max-width: 100%; white-space: normal; overflow-wrap: anywhere; font-size: clamp(24px, 6.5vw, 34px); } .ogs-ticker { height: 30px; } .ogs-ticker__item { font-size: 9px; letter-spacing: .18em; padding: 0 18px; gap: 10px; } body.has-ticker .ogs-header { top: 30px; } } /* =========================================================================== 2 — THE HERO (I — Arrival) =========================================================================== */ @media (max-width: 860px) { /* 100vh on iOS Safari is the URL-bar-collapsed height, so the hero always overflows by ~60px. svh is the small viewport height. */ .ogs-reveal { min-height: 100svh; padding: clamp(96px, 15svh, 130px) var(--gutter) clamp(40px, 6svh, 64px); justify-content: center; } .ogs-reveal__overline { align-self: center; margin-bottom: clamp(14px, 3svh, 28px); font-size: 10px; } .ogs-reveal__stage { min-height: 30svh; max-width: 100%; } .ogs-reveal__bottle { width: clamp(150px, 46vw, 250px); } /* The headline is split into per-word spans. It doesn't need flex — inline-block words wrap between themselves natively, and leaving it as normal inline flow keeps the per-character GSAP reveal intact. */ .ogs-reveal__headline { max-width: 100%; font-size: clamp(34px, 10.5vw, 58px); line-height: 1.04; letter-spacing: -0.03em; margin-top: clamp(18px, 3svh, 32px); } .ogs-reveal__headline .word { white-space: nowrap; } .ogs-reveal__sub { max-width: 36ch; text-align: center; font-size: 15px; } .ogs-reveal__cap { text-align: center; } .ogs-reveal__foot { grid-template-columns: 1fr; gap: 14px; justify-items: center; text-align: center; } .ogs-reveal__scroll { display: none; } /* The tier strip can't live here: .ogs-reveal is min-height:100svh with overflow:hidden, so the strip gets clipped rather than pushing the hero taller. The ticker states the ladder above the fold and the promo section restates it immediately below. */ .ogs-herostrip { display: none; } } /* No cursor on touch, so the cursor-driven reveal never runs and the hero would sit empty. Show the bottle outright, hide the machinery. */ @media (hover: none) { .ogs-reveal__hint, .ogs-reveal__stencil, .ogs-reveal__spray { display: none !important; } .ogs-reveal__bottle, .ogs-reveal__bottle-img { opacity: 1 !important; visibility: visible !important; filter: none !important; transform: none !important; } } /* =========================================================================== 3 — THE OFFER (promo + OG Club) =========================================================================== */ @media (max-width: 860px) { .ogs-promo { padding-top: clamp(64px, 10svh, 96px); padding-bottom: clamp(64px, 10svh, 96px); } .ogs-promo__head { margin-bottom: 28px; } .ogs-promo__title { font-size: clamp(28px, 8.6vw, 46px); line-height: 1.06; } .ogs-promo__grid { grid-template-columns: 1fr; } .ogs-promo__card { padding: 26px 20px; gap: 12px; } .ogs-promo__price .now { font-size: clamp(32px, 10vw, 46px); } .ogs-promo__card .ogs-btn { width: 100%; margin-top: 8px; } .ogs-club__form { flex-direction: column; } .ogs-club__form input, .ogs-club__form .ogs-btn { width: 100%; min-width: 0; } } /* =========================================================================== 4 — MEMORY =========================================================================== */ @media (max-width: 860px) { .ogs-memory { padding-top: 76px; padding-bottom: 76px; } .ogs-memory__grid { gap: 32px; margin-top: 36px; } .ogs-memory__head { font-size: clamp(46px, 13vw, 76px); } .ogs-memory__col { gap: 26px; } .ogs-memory__pull { font-size: clamp(21px, 6.2vw, 28px); line-height: 1.28; } .ogs-memory__body p { padding-left: 34px; font-size: 15px; } .ogs-memory__plate-cap { font-size: 11px; } } /* =========================================================================== 5 — THE SETS (bundle cards) =========================================================================== */ @media (max-width: 860px) { .ogs-sets { padding-top: 76px; padding-bottom: 76px; } .ogs-sets__head { grid-template-columns: 1fr; gap: 16px; margin: 28px 0 16px; } .ogs-sets__head h2 { font-size: clamp(40px, 11vw, 62px); } .ogs-sets__head p { font-size: 16px; max-width: none; } .ogs-sets__feature { padding: 30px 0; margin-bottom: 36px; } .ogs-sets__grid { grid-template-columns: 1fr; gap: 46px; } .ogs-bundle { gap: 16px; } .ogs-bundle__title { font-size: clamp(24px, 7vw, 32px); } .ogs-bundle--feature .ogs-bundle__title { font-size: clamp(30px, 9vw, 44px); } .ogs-bundle__desc { font-size: 16px; } .ogs-bundle__actions { gap: 8px; } .ogs-bundle__actions .ogs-btn { flex: 1 1 100%; min-width: 0; } } /* =========================================================================== 6 — BESTSELLERS Desktop is a GSAP horizontal pin. On a phone that fights native touch scrolling and leaves cards hanging off the right edge. Neutralise the pin geometry AND the inline transform GSAP writes, then lay the panels out as an ordinary grid. assets/js/mobile.js kills the ScrollTrigger itself so no pin-spacer is left behind. =========================================================================== */ @media (max-width: 860px) { .ogs-bestsellers { overflow: visible; } .ogs-bestsellers > .ogs-chapter { position: static; padding: 72px var(--gutter) 0; display: flex; } .ogs-bestsellers__pin { position: static !important; height: auto !important; overflow: visible !important; } .ogs-bestsellers__track { display: grid !important; grid-template-columns: 1fr 1fr; gap: 30px 16px; width: auto !important; min-width: 0 !important; height: auto !important; padding: 28px var(--gutter) 76px; transform: none !important; /* beats GSAP's inline transform */ perspective: none; } .ogs-bestsellers__track .panel { width: auto !important; flex: none !important; } .ogs-bestsellers__intro, .ogs-bestsellers__outro { grid-column: 1 / -1; width: auto !important; } .ogs-bestsellers__intro { gap: 14px; } .ogs-bestsellers__head { font-size: clamp(34px, 9.5vw, 52px); } .ogs-bestsellers__intro p { font-size: 17px; max-width: none; } .ogs-bestsellers__now { display: none; } .ogs-bestseller { transform: none !important; } .ogs-bestseller__meta { flex-direction: column; align-items: flex-start; gap: 4px; } .ogs-bestseller__meta h3 { font-size: 17px; } .ogs-bestseller__price { text-align: left; min-width: 0; } .ogs-bestsellers__all { font-size: clamp(24px, 7vw, 34px); padding: 22px 26px; } } /* =========================================================================== 7 — BUILDERS (kit builder + bundle builder) =========================================================================== */ @media (max-width: 900px) { .ogs-builder__layout { grid-template-columns: 1fr; } /* The tray IS the aside on a phone. Two racks is two sources of truth the visitor has to reconcile. */ .ogs-builder__aside { display: none; } } @media (max-width: 860px) { .ogs-builder { padding-top: 76px; padding-bottom: 76px; } .ogs-builder__head { margin: 28px 0 28px; } .ogs-builder__head h2 { font-size: clamp(40px, 11vw, 62px); } .ogs-builder__head p { font-size: 16px; margin-top: 14px; } .ogs-builder__grid { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; } /* Filters scroll sideways rather than stacking into four rows of pills that push the grid below the fold. Negative margins let the row bleed to the screen edge so it reads as scrollable — and the matching padding keeps the first pill off the edge. */ .ogs-builder__filters { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); } .ogs-builder__filters::-webkit-scrollbar { display: none; } .ogs-builder__filter { flex: 0 0 auto; } .ogs-pick__name { font-size: 14px; } } /* =========================================================================== 8 — MOOD =========================================================================== */ @media (max-width: 860px) { .ogs-mood { padding-top: 76px; padding-bottom: 76px; } .ogs-mood__head { margin: 28px 0 26px; } .ogs-mood__head h2 { font-size: clamp(34px, 9.5vw, 54px); } .ogs-mood__inner { grid-template-columns: 1fr; gap: 24px; } .ogs-mood__nav { flex-direction: row; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; gap: 24px; border: 0; padding-bottom: 12px; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); } .ogs-mood__nav::-webkit-scrollbar { display: none; } .ogs-mood__btn { border: 0; padding: 6px 0; white-space: nowrap; flex: 0 0 auto; } .ogs-mood__btn:hover, .ogs-mood__btn.is-active { padding-left: 0; } .ogs-mood__btn-sub { display: none; } .ogs-mood__btn-label { font-size: 20px; } /* Panels are absolutely stacked; only .is-active goes back into flow. A 520px floor just adds dead space under short moods. */ .ogs-mood__stage { min-height: 0; } .ogs-mood__panel { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; } } /* =========================================================================== 9 — NOTES Not a horizontal strip. Each note is a full-width row: mark beside text, stacked, wrapping normally. =========================================================================== */ @media (max-width: 860px) { .ogs-notes { padding-top: 76px; padding-bottom: 76px; } .ogs-notes__head { margin: 28px 0 32px; font-size: clamp(42px, 12vw, 68px); } .ogs-notes__grid { grid-template-columns: 1fr; gap: 0; } .ogs-note { grid-template-columns: 62px 1fr; gap: 18px; width: 100%; min-width: 0; padding: 24px 0 0; } .ogs-note__art { width: 62px; height: 62px; } .ogs-note__meta { min-width: 0; } .ogs-note h3 { font-size: 24px; margin: 4px 0 8px; } .ogs-note p { font-size: 15px; } } /* =========================================================================== 10 — COLLECTIONS (legacy pin) + THE CABINET =========================================================================== */ @media (max-width: 900px) { /* The collections IIFE writes autoAlpha inline on every scroll frame. Inline styles beat normal stylesheet rules, so without !important the inactive collections stay invisible on mobile even though the pin is off — which is why this section looked blank on a phone. A stylesheet !important DOES beat an inline declaration. */ .ogs-collections__pin { height: auto !important; } .ogs-collection { position: relative !important; inset: auto !important; opacity: 1 !important; visibility: visible !important; transform: none !important; max-height: none; padding: 72px var(--gutter); } .ogs-collection__layout { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "caption" "plate" "row"; max-height: none; gap: 24px; } .ogs-collection__plate { max-width: 100%; max-height: none; margin-left: 0; } .ogs-collections__progress { display: none; } .ogs-collections__head { position: relative; top: auto; left: auto; right: auto; padding: 0 var(--gutter); margin: 88px 0 -32px; font-size: clamp(34px, 9.5vw, 54px); } .ogs-collections > .ogs-chapter { position: relative; top: auto; left: auto; padding: 88px var(--gutter) 0; display: flex; } .ogs-collection__row { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); scrollbar-width: none; } .ogs-collection__row::-webkit-scrollbar { display: none; } } @media (max-width: 860px) { /* Full-height stacked panels are the Cabinet's mobile design, but a true 100svh each makes six collections a very long scroll with a lot of air. 84svh keeps the one-at-a-time feel and tightens it. */ .ogs-cab { padding-top: 64px; } .ogs-cab__slide { min-height: 84svh; padding: 56px var(--gutter) 36px; gap: 18px; } .ogs-cab__head { font-size: clamp(38px, 11vw, 62px); } .ogs-cab__title { font-size: clamp(36px, 11vw, 62px); } .ogs-cab__desc { font-size: 16px; } .ogs-cab__stagebox { min-height: 40svh; } .ogs-cab__hero { width: min(58vw, 260px); } .ogs-cab__deck { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); } .ogs-cab__actions { gap: 10px; } .ogs-cab__cta { flex: 1 1 auto; text-align: center; } } /* =========================================================================== 11 — THE SHELF (community + suggestion form) =========================================================================== */ @media (max-width: 900px) { .ogs-community__layout { grid-template-columns: 1fr; gap: 36px; } .ogs-suggest { position: static; } } @media (max-width: 860px) { .ogs-community { padding-top: 76px; padding-bottom: 76px; } .ogs-community__head { margin: 28px 0 30px; gap: 14px; } .ogs-community__head h2 { font-size: clamp(38px, 10.5vw, 58px); } .ogs-community__head p { font-size: 16px; } .ogs-cbundle { grid-template-columns: auto 1fr; gap: 14px; padding: 18px 0; } .ogs-cbundle:hover { padding-left: 0; } .ogs-cbundle__name { font-size: 18px; } .ogs-cbundle__right { grid-column: 1 / -1; justify-items: start; grid-auto-flow: column; align-items: center; gap: 12px; } .ogs-suggest { padding: 24px 20px; } .ogs-suggest h3 { font-size: 23px; } } /* =========================================================================== 12 — IN THEIR WORDS =========================================================================== */ @media (max-width: 900px) { .ogs-testimonials__spread { gap: 52px; } .ogs-quote:nth-child(n) { grid-column: 1 / -1; margin-top: 0; } } @media (max-width: 860px) { .ogs-testimonials { padding-top: 76px; padding-bottom: 76px; } .ogs-testimonials__head { margin: 28px 0 44px; font-size: clamp(36px, 10vw, 56px); } .ogs-quote blockquote { font-size: clamp(19px, 5.4vw, 24px); } /* The quote mark is absolutely positioned above the block — at desktop size it collides with the quote above it once stacked. */ .ogs-quote__mark { font-size: 72px; top: -34px; left: -4px; } .ogs-quote figcaption { margin-top: 16px; } .ogs-reviews-wall { grid-template-columns: 1fr; margin-top: 36px; } .ogs-review-cell { padding: 22px 20px; } .ogs-review-cell__text { font-size: 16px; } } /* =========================================================================== 13 — SHOP ENTRY This head is grid-template-columns: 1fr auto with an italic 20px paragraph in the auto column. On a phone the paragraph claimed most of the row and squeezed the h2 to a sliver — which, combined with word-break:break-word, is what rendered it one letter per line. =========================================================================== */ @media (max-width: 900px) { .ogs-shop-entry__head { grid-template-columns: 1fr; align-items: start; gap: 12px; } } @media (max-width: 860px) { .ogs-shop-entry { padding-top: 76px; padding-bottom: 88px; } .ogs-shop-entry__head { margin: 28px 0 32px; } .ogs-shop-entry__head h2 { font-size: clamp(40px, 11.5vw, 66px); } .ogs-shop-entry__head p { font-size: 16px; } .ogs-shop-entry__grid { grid-template-columns: repeat(2, 1fr); gap: 24px 14px; } .ogs-shop-entry__foot { margin-top: 52px; } .ogs-shop-entry__all { font-size: clamp(28px, 8vw, 42px); gap: 16px; } .ogs-shop-entry__all svg { width: 34px; } } /* =========================================================================== 14 — SECTION RHYTHM, CARDS, TOUCH TARGETS =========================================================================== */ @media (max-width: 860px) { .ogs-section { padding-left: var(--gutter); padding-right: var(--gutter); } .ogs-card__title { font-size: 16px; } .ogs-card__foot { flex-wrap: wrap; gap: 8px; } /* 44px is the floor for a reliable tap. */ .ogs-btn, .ogs-card__cta, .ogs-cbundle__vote, .ogs-builder__filter { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .ogs-tray__close, .ogs-search-overlay__close, .ogs-nav-toggle { min-width: 44px; min-height: 44px; } /* Anything under 16px makes iOS zoom the whole page on focus and never zoom back out. */ input, select, textarea { font-size: 16px; } .ogs-inline-cta { padding: 18px; gap: 14px; } .ogs-inline-cta .ogs-btn { width: 100%; } .ogs-inline-cta__text { font-size: 17px; } .ogs-banner { padding: 60px var(--gutter); } .ogs-banner__head { font-size: clamp(34px, 9.5vw, 54px); } .ogs-banner__tiers { grid-template-columns: repeat(2, 1fr); gap: 20px 0; } .ogs-banner__tier { padding: 0 16px; } .ogs-banner__tier:nth-child(2n + 1) { padding-left: 0; border-left: 0; } .ogs-banner__tier b { font-size: 24px; } .ogs-banner__row { gap: 22px; } .ogs-banner__row .ogs-banner__row { width: 100%; flex-direction: column; align-items: stretch; } .ogs-banner .ogs-btn { width: 100%; } } /* =========================================================================== 15 — THE TRAY (bottom sheet + sticky bar) The sheet layout lives in bundles.css. These are the corrections. =========================================================================== */ @media (max-width: 860px) { .ogs-tray { max-height: 86dvh; } /* min-height:0 is load-bearing. A flex item defaults to min-height:auto and refuses to shrink below its content — without it the body grows to fit the ladder, pushes the footer past the bottom of the sheet, and "Add to cart" becomes unreachable. */ .ogs-tray__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; } /* The sticky bar is fixed, so nothing reserves space for it and it parks on top of the footer's last row. */ body { padding-bottom: calc(var(--tray-bar) + env(safe-area-inset-bottom, 0px)); } .ogs-toast { bottom: calc(var(--tray-bar) + 20px); } /* No hover on touch, so a filled slot would be impossible to clear without a permanently visible remove control. */ .ogs-slot.is-filled .ogs-slot__remove { opacity: 1; inset: auto 0 0 auto; width: 26px; height: 26px; background: rgba(15, 14, 12, .78); font-size: 13px; } } /* The card "+" button is hover-revealed on desktop. On touch it has to be permanent — and sized up, because at 36px it sits right beside the product link and a near miss opens the product page instead. */ @media (hover: none) { .ogs-bundle-add { opacity: 1; transform: scale(1); width: 44px; height: 44px; font-size: 19px; top: 8px; right: 8px; } } /* =========================================================================== 16 — SMALL PHONES (≤ 480px) One notch down for the biggest type, one column for the tightest grids. =========================================================================== */ @media (max-width: 480px) { .ogs-reveal__headline { font-size: clamp(30px, 10.5vw, 42px); } .ogs-promo__title { font-size: clamp(25px, 8.4vw, 36px); } .ogs-memory__head { font-size: clamp(40px, 13vw, 56px); } .ogs-shop-entry__grid, .ogs-bestsellers__track, .ogs-builder__grid, .ogs-mood__panel { grid-template-columns: 1fr; } .ogs-note { grid-template-columns: 48px 1fr; gap: 14px; } .ogs-note__art { width: 48px; height: 48px; } .ogs-cbundle { grid-template-columns: 1fr; } .ogs-cbundle__thumbs img { width: 36px; height: 48px; } .ogs-suggest { padding: 20px 16px; } .ogs-tray__slots { gap: 5px; } .ogs-tray__title { font-size: 22px; } .ogs-footer__legal-menu { flex-wrap: wrap; gap: 14px; } } /* =========================================================================== 17 — REDUCED MOTION Calm, not frozen. Blanket transition:none breaks anything that reveals by transitioning FROM a hidden state, so animations are collapsed to near-instant instead, and the elements that start hidden are forced visible explicitly. =========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .ogs-reveal__bottle, .ogs-reveal__headline .ch, .ogs-memory__pull, .ogs-memory__mark, .ogs-memory__line-text, .ogs-cab__desc, .ogs-cab__actions { opacity: 1 !important; transform: none !important; } .ogs-cab__title .w i { transform: none !important; } .ogs-cab__mist { display: none; } } /* =========================================================================== OG SCENTS — MOBILE CAROUSELS (APPEND to bundles.css AFTER _mobile-pass — order matters: this deliberately overrides a few of its stacking rules.) Desktop (>860px) is completely untouched. On phones, the long vertical stacks become swipeable snap carousels with a peek of the next card — the page gets dramatically shorter and every section becomes a moment. =========================================================================== */ @media (max-width:860px){ /* --------------------------------------------------------------------------- THE SHARED CAROUSEL LANGUAGE Edge-to-edge strip, cards snap to center, next card peeks in from the right so your thumb knows there's more. Scrollbars hidden; momentum on. --------------------------------------------------------------------------- */ .ogs-msnap{ display:flex !important; flex-wrap:nowrap !important; grid-template-columns:none !important; overflow-x:auto !important; overflow-y:visible !important; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; gap:14px !important; margin-left:calc(var(--gutter) * -1); margin-right:calc(var(--gutter) * -1); padding-left:var(--gutter) !important; padding-right:var(--gutter) !important; scroll-padding-left:var(--gutter); transform:none !important; width:auto !important; min-width:0 !important; } .ogs-msnap::-webkit-scrollbar{ display:none; } .ogs-msnap > *{ flex:0 0 84% !important; width:auto !important; min-width:0 !important; scroll-snap-align:center; margin:0 !important; } /* dots + progress, injected by JS */ .ogs-mdots{ display:flex; justify-content:center; gap:7px; margin-top:18px; } .ogs-mdots i{ width:6px; height:6px; border-radius:50%; background:var(--haze); transition:transform .3s var(--ease), background .3s; } .ogs-mdots i.on{ background:var(--seal); transform:scale(1.35); } .ogs-mbar{ height:2px; background:var(--haze); border-radius:2px; margin-top:16px; margin-left:var(--gutter); margin-right:var(--gutter); overflow:hidden; } .ogs-mbar i{ display:block; height:100%; width:20%; background:var(--seal); border-radius:2px; transition:transform .15s linear; transform-origin:left; } .ogs-mhint{ display:block; font-family:var(--ff-display); font-style:italic; font-size:13px; color:var(--ash); margin:10px 0 2px; } .ogs-mhint::after{ content:" →"; color:var(--seal-deep); } /* --------------------------------------------------------------------------- 1) SETS — one bundle per view, next one peeking. --------------------------------------------------------------------------- */ .ogs-sets__grid.ogs-msnap > *{ flex-basis:86% !important; } /* --------------------------------------------------------------------------- 2) PROMO — the three offer cards become three swipes. --------------------------------------------------------------------------- */ .ogs-promo__grid.ogs-msnap{ background:none !important; border:0 !important; gap:12px !important; } .ogs-promo__grid.ogs-msnap > *{ flex-basis:84% !important; border:1px solid var(--rule); border-radius:4px; } /* --------------------------------------------------------------------------- 3) BESTSELLERS — cards swipe with a 1.5-card view; intro stays wide. (Overrides the 2-up grid from _mobile-pass.) --------------------------------------------------------------------------- */ .ogs-bestsellers__track.ogs-msnap > *{ flex-basis:64% !important; } .ogs-bestsellers__track.ogs-msnap > .ogs-bestsellers__intro, .ogs-bestsellers__track.ogs-msnap > .ogs-bestsellers__outro{ flex-basis:86% !important; } /* --------------------------------------------------------------------------- 4) NOTES — from rows to pretty tinted cards, one note per swipe. Each card washes with its own note tint. --------------------------------------------------------------------------- */ .ogs-notes__grid.ogs-msnap{ gap:12px !important; } .ogs-notes__grid.ogs-msnap > .ogs-note{ flex-basis:78% !important; display:grid !important; grid-template-columns:1fr !important; gap:12px; padding:26px 22px !important; border:1px solid var(--rule) !important; border-radius:4px; background:color-mix(in srgb, var(--note-tint, var(--seal)) 12%, var(--paper)) !important; } .ogs-notes__grid.ogs-msnap .ogs-note__art{ width:64px; } /* --------------------------------------------------------------------------- 5) COMMUNITY + TESTIMONIALS — swipe decks. --------------------------------------------------------------------------- */ .ogs-community__list.ogs-msnap > *{ flex-basis:82% !important; } .ogs-testimonials__spread.ogs-msnap > *{ flex-basis:84% !important; } /* --------------------------------------------------------------------------- 6) KIT BUILDER — the big one. 60 bottles stacked was an endless scroll; now it's a two-row horizontal gallery you flick through sideways. The "Your kit" summary sticks to the top while you browse. --------------------------------------------------------------------------- */ .ogs-kitb__grid{ display:grid !important; grid-auto-flow:column !important; grid-template-rows:auto auto !important; grid-template-columns:none !important; grid-auto-columns:41% !important; gap:16px 12px !important; overflow-x:auto !important; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-left:calc(var(--gutter) * -1); margin-right:calc(var(--gutter) * -1); padding-left:var(--gutter); padding-right:var(--gutter); padding-bottom:8px; } .ogs-kitb__grid::-webkit-scrollbar{ display:none; } .ogs-kitb__grid .ogs-kpick{ scroll-snap-align:start; } .ogs-kitb__aside{ position:sticky !important; top:58px; z-index:20; background:var(--paper); border:0; border-bottom:1px solid var(--rule); padding:14px 0 12px; margin:0 0 6px; gap:10px; } .ogs-kitb__aside-title{ font-size:16px; } .ogs-kitb__slots{ grid-template-columns:repeat(4,1fr); gap:5px; } .ogs-kslot{ aspect-ratio:1; } .ogs-kitb__totals{ padding-top:8px; } .ogs-kitb__price .now{ font-size:24px; } .ogs-kitb__hint{ font-size:12px; margin-top:2px; } /* --------------------------------------------------------------------------- 7) SHOP ENTRY — two-row flick gallery instead of a tall grid. --------------------------------------------------------------------------- */ .ogs-shop-entry__grid{ display:grid !important; grid-auto-flow:column !important; grid-template-rows:auto auto !important; grid-template-columns:none !important; grid-auto-columns:44% !important; gap:18px 12px !important; overflow-x:auto !important; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-left:calc(var(--gutter) * -1); margin-right:calc(var(--gutter) * -1); padding-left:var(--gutter); padding-right:var(--gutter); padding-bottom:8px; } .ogs-shop-entry__grid::-webkit-scrollbar{ display:none; } .ogs-shop-entry__grid > *{ scroll-snap-align:start; } /* --------------------------------------------------------------------------- 8) BREATHING ROOM — with carousels doing the work, sections tighten up and the page stops feeling like a marathon. --------------------------------------------------------------------------- */ .ogs-section{ padding-top:clamp(48px,7vh,72px); padding-bottom:clamp(48px,7vh,72px); } } /* end 860px */ /* =========================================================================== OG SCENTS — bundle imagery, frameless blend (REPLACES the earlier "photo prints" block — delete that from bundles.css if pasted, then paste this.) The photos' own light-beige background is close enough to the site's paper that multiply-blending melts it away — the bottles sit straight on the page, no white frames, no boxes. =========================================================================== */ .ogs-bundle__stack{ position:relative; display:grid; place-items:center; isolation:isolate; min-height:clamp(180px,26vw,280px); background:none; border:0; /* no box behind the fan */ } .ogs-bundle__bottle{ position:absolute; width:min(44%,150px); aspect-ratio:3/4; background:none; padding:0; border-radius:0; box-shadow:none; /* frameless */ transform-origin:bottom center; transform:translateX(calc((var(--i,0) - 1) * 46%)) rotate(calc((var(--i,0) - 1) * 7deg)); transition:transform .6s var(--ease-out); z-index:1; } .ogs-bundle__bottle:nth-child(2){ z-index:3; } .ogs-bundle__bottle img{ width:100%; height:100%; object-fit:cover; display:block; mix-blend-mode:multiply; /* beige photo bg melts into the paper */ } /* hover: gentle spread, no lift-shadow (shadows would redraw the rectangle) */ .ogs-bundle:hover .ogs-bundle__bottle, .set:hover .ogs-bundle__bottle{ transform:translateX(calc((var(--i,0) - 1) * 66%)) rotate(calc((var(--i,0) - 1) * 10deg)); } .ogs-bundle:hover .ogs-bundle__bottle:nth-child(2){ transform:translateY(-6px) scale(1.03); } .ogs-bundle__badge{ position:absolute; top:6px; left:0; z-index:9; background:var(--seal); color:#fff; font-size:10px; text-transform:uppercase; letter-spacing:.18em; padding:5px 11px; border-radius:9999px; } .ogs-sets__feature .ogs-bundle__bottle{ width:min(38%,190px); } @media (max-width:600px){ .ogs-bundle__stack{ min-height:200px; } .ogs-bundle__bottle{ width:48%; transform:translateX(calc((var(--i,0) - 1) * 38%)) rotate(calc((var(--i,0) - 1) * 6deg)); } .ogs-bundle__bottle:nth-child(2){ transform:translateY(-4px) scale(1.02); } } @media (hover:none){ .ogs-bundle__bottle{ transition:none; } } /* HERO BOTTLE — same frameless treatment as the fans: the new product photo's light background multiply-blends into the paper, so no background removal is needed for the hero image. */ .ogs-reveal__bottle-img{ mix-blend-mode:multiply; } /* =========================================================================== OG SCENTS — MOBILE CAROUSELS (APPEND to bundles.css AFTER _mobile-pass — order matters: this deliberately overrides a few of its stacking rules.) Desktop (>860px) is completely untouched. On phones, the long vertical stacks become swipeable snap carousels with a peek of the next card — the page gets dramatically shorter and every section becomes a moment. =========================================================================== */ @media (max-width:860px){ /* --------------------------------------------------------------------------- THE SHARED CAROUSEL LANGUAGE Edge-to-edge strip, cards snap to center, next card peeks in from the right so your thumb knows there's more. Scrollbars hidden; momentum on. --------------------------------------------------------------------------- */ .ogs-msnap{ display:flex !important; flex-wrap:nowrap !important; grid-template-columns:none !important; overflow-x:auto !important; overflow-y:visible !important; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; gap:14px !important; margin-left:calc(var(--gutter) * -1); margin-right:calc(var(--gutter) * -1); padding-left:var(--gutter) !important; padding-right:var(--gutter) !important; scroll-padding-left:var(--gutter); transform:none !important; width:auto !important; min-width:0 !important; } .ogs-msnap::-webkit-scrollbar{ display:none; } .ogs-msnap{ overscroll-behavior-x:contain; } .ogs-kitb__grid, .ogs-shop-entry__grid{ overscroll-behavior-x:contain; } .ogs-msnap > *{ flex:0 0 84% !important; width:auto !important; min-width:0 !important; scroll-snap-align:center; margin:0 !important; } /* dots + progress, injected by JS */ .ogs-mdots{ display:flex; justify-content:center; gap:7px; margin-top:18px; } .ogs-mdots i{ width:6px; height:6px; border-radius:50%; background:var(--haze); transition:transform .3s var(--ease), background .3s; } .ogs-mdots i.on{ background:var(--seal); transform:scale(1.35); } .ogs-mbar{ height:2px; background:var(--haze); border-radius:2px; margin-top:16px; margin-left:var(--gutter); margin-right:var(--gutter); overflow:hidden; } .ogs-mbar i{ display:block; height:100%; width:20%; background:var(--seal); border-radius:2px; transition:transform .15s linear; transform-origin:left; } .ogs-mhint{ display:block; font-family:var(--ff-display); font-style:italic; font-size:13px; color:var(--ash); margin:10px 0 2px; } .ogs-mhint::after{ content:" →"; color:var(--seal-deep); } /* --------------------------------------------------------------------------- 1) SETS — one bundle per view, next one peeking. --------------------------------------------------------------------------- */ .ogs-sets__grid.ogs-msnap > *{ flex-basis:86% !important; } /* --------------------------------------------------------------------------- 2) PROMO — the three offer cards become three swipes. --------------------------------------------------------------------------- */ .ogs-promo__grid.ogs-msnap{ background:none !important; border:0 !important; gap:12px !important; } .ogs-promo__grid.ogs-msnap > *{ flex-basis:84% !important; border:1px solid var(--rule); border-radius:4px; } /* --------------------------------------------------------------------------- 3) BESTSELLERS — cards swipe with a 1.5-card view; intro stays wide. (Overrides the 2-up grid from _mobile-pass.) --------------------------------------------------------------------------- */ .ogs-bestsellers__track.ogs-msnap > *{ flex-basis:64% !important; } .ogs-bestsellers__track.ogs-msnap > .ogs-bestsellers__intro, .ogs-bestsellers__track.ogs-msnap > .ogs-bestsellers__outro{ flex-basis:86% !important; } /* --------------------------------------------------------------------------- 4) NOTES — from rows to pretty tinted cards, one note per swipe. Each card washes with its own note tint. --------------------------------------------------------------------------- */ .ogs-notes__grid.ogs-msnap{ gap:12px !important; } .ogs-notes__grid.ogs-msnap > .ogs-note{ flex-basis:78% !important; display:grid !important; grid-template-columns:1fr !important; gap:12px; padding:26px 22px !important; border:1px solid var(--rule) !important; border-radius:4px; background:color-mix(in srgb, var(--note-tint, var(--seal)) 12%, var(--paper)) !important; } .ogs-notes__grid.ogs-msnap .ogs-note__art{ width:64px; } /* --------------------------------------------------------------------------- 5) COMMUNITY + TESTIMONIALS — swipe decks. --------------------------------------------------------------------------- */ .ogs-community__list.ogs-msnap > *{ flex-basis:82% !important; } .ogs-testimonials__spread.ogs-msnap > *{ flex-basis:84% !important; } /* --------------------------------------------------------------------------- 6) KIT BUILDER — the big one. 60 bottles stacked was an endless scroll; now it's a two-row horizontal gallery you flick through sideways. The "Your kit" summary sticks to the top while you browse. --------------------------------------------------------------------------- */ .ogs-kitb__grid{ display:grid !important; grid-auto-flow:column !important; grid-template-rows:auto auto !important; grid-template-columns:none !important; grid-auto-columns:41% !important; gap:16px 12px !important; overflow-x:auto !important; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-left:calc(var(--gutter) * -1); margin-right:calc(var(--gutter) * -1); padding-left:var(--gutter); padding-right:var(--gutter); padding-bottom:8px; } .ogs-kitb__grid::-webkit-scrollbar{ display:none; } .ogs-kitb__grid .ogs-kpick{ scroll-snap-align:start; } .ogs-kitb__aside{ position:sticky !important; top:58px; z-index:20; background:var(--paper); border:0; border-bottom:1px solid var(--rule); padding:14px 0 12px; margin:0 0 6px; gap:10px; } .ogs-kitb__aside-title{ font-size:16px; } .ogs-kitb__slots{ grid-template-columns:repeat(4,1fr); gap:5px; } .ogs-kslot{ aspect-ratio:1; } .ogs-kitb__totals{ padding-top:8px; } .ogs-kitb__price .now{ font-size:24px; } .ogs-kitb__hint{ font-size:12px; margin-top:2px; } /* --------------------------------------------------------------------------- 7) SHOP ENTRY — two-row flick gallery instead of a tall grid. --------------------------------------------------------------------------- */ .ogs-shop-entry__grid{ display:grid !important; grid-auto-flow:column !important; grid-template-rows:auto auto !important; grid-template-columns:none !important; grid-auto-columns:44% !important; gap:18px 12px !important; overflow-x:auto !important; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-left:calc(var(--gutter) * -1); margin-right:calc(var(--gutter) * -1); padding-left:var(--gutter); padding-right:var(--gutter); padding-bottom:8px; } .ogs-shop-entry__grid::-webkit-scrollbar{ display:none; } .ogs-shop-entry__grid > *{ scroll-snap-align:start; } /* --------------------------------------------------------------------------- 8) BREATHING ROOM — with carousels doing the work, sections tighten up and the page stops feeling like a marathon. --------------------------------------------------------------------------- */ .ogs-section{ padding-top:clamp(48px,7vh,72px); padding-bottom:clamp(48px,7vh,72px); } } /* end 860px */ /* =========================================================================== OG SCENTS — cart drawer + tray retirement (APPEND to bundles.css) Desktop: paper panel slides from the right. Mobile: bottom sheet. Also removes every remaining trace of the old bundle tray, whose job the drawer now does properly. =========================================================================== */ /* ---- RETIRE THE TRAY, COMPLETELY ---- */ .ogs-tray__toggle, .ogs-tray, .ogs-tray__scrim, .ogs-seal, [data-bundle-tray], [data-tray-open]{ display:none !important; } body{ padding-bottom:0 !important; } /* ---- DRAWER ---- */ .ogs-cartd__scrim{ position:fixed; inset:0; z-index:90; background:rgba(15,14,12,.4); opacity:0; pointer-events:none; transition:opacity .35s var(--ease); backdrop-filter:blur(2px); } .ogs-cartd__scrim.is-open{ opacity:1; pointer-events:auto; } .ogs-cartd{ position:fixed; top:0; right:0; bottom:0; z-index:95; width:min(430px,94vw); background:var(--paper); border-left:1px solid var(--rule); display:flex; flex-direction:column; transform:translateX(105%); transition:transform .45s var(--ease-out); box-shadow:-30px 0 60px -30px rgba(15,14,12,.25); } .ogs-cartd.is-open{ transform:none; } html.ogs-cartd-lock{ overflow:hidden; } .ogs-cartd__head{ display:flex; justify-content:space-between; align-items:center; padding:20px 22px; border-bottom:1px solid var(--rule); } .ogs-cartd__eyebrow{ font-size:11px; text-transform:uppercase; letter-spacing:.2em; color:var(--ash); } .ogs-cartd__eyebrow span{ color:var(--seal-deep); font-family:var(--ff-display); font-style:italic; font-size:14px; } .ogs-cartd__close{ font-size:26px; line-height:1; color:var(--ash); transition:color .2s; } .ogs-cartd__close:hover{ color:var(--ink); } .ogs-cartd__body{ flex:1; min-height:0; overflow-y:auto; padding:8px 22px; } .ogs-cartd__empty{ font-family:var(--ff-display); font-size:16px; color:var(--ink-2); line-height:1.6; padding:26px 0; } .ogs-cartd__empty strong{ color:var(--seal-deep); font-style:italic; font-weight:400; } .ogs-cartd__item{ display:grid; grid-template-columns:60px 1fr auto; gap:14px; align-items:start; padding:16px 0; border-bottom:1px solid var(--rule); transition:opacity .25s; } .ogs-cartd__item.is-kit{ background:linear-gradient(90deg, var(--seal-soft), transparent 70%); margin:0 -22px; padding-left:22px; padding-right:22px; } .ogs-cartd__thumb{ width:60px; aspect-ratio:3/4; background:var(--paper-2); overflow:hidden; display:block; } .ogs-cartd__thumb img{ width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; } .ogs-cartd__meta{ min-width:0; display:grid; gap:6px; } .ogs-cartd__name{ font-family:var(--ff-display); font-size:16px; line-height:1.25; color:var(--ink); } .ogs-cartd__kitlist{ font-size:11px; line-height:1.5; color:var(--ash); } .ogs-cartd__kitqty{ font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--seal-deep); } .ogs-cartd__qty{ display:inline-flex; align-items:center; gap:2px; border:1px solid var(--rule); border-radius:9999px; overflow:hidden; width:max-content; } .ogs-cartd__qty button{ width:30px; height:30px; font-size:15px; color:var(--ash); transition:.2s; } .ogs-cartd__qty button:hover{ color:var(--seal-deep); } .ogs-cartd__qty b{ min-width:22px; text-align:center; font-size:13px; font-weight:500; } .ogs-cartd__side{ display:grid; gap:8px; justify-items:end; } .ogs-cartd__line{ font-family:var(--ff-display); font-size:15px; white-space:nowrap; } .ogs-cartd__line del{ color:var(--ash); font-size:12px; } .ogs-cartd__line ins{ text-decoration:none; } .ogs-cartd__rm{ font-size:18px; color:var(--ash); line-height:1; transition:color .2s; } .ogs-cartd__rm:hover{ color:var(--seal-deep); } .ogs-cartd__foot{ border-top:1px solid var(--rule); padding:16px 22px 20px; display:grid; gap:12px; background:var(--paper); } .ogs-cartd__row{ display:flex; justify-content:space-between; font-size:13px; color:var(--ink-2); } .ogs-cartd__row.is-total{ font-family:var(--ff-display); font-size:19px; color:var(--ink); padding-top:6px; border-top:1px solid var(--rule); } .ogs-cartd__row .woocommerce-Price-amount{ font-variant-numeric:tabular-nums; } .ogs-cartd__club{ font-size:12px; line-height:1.5; color:var(--ink-2); background:var(--seal-soft); padding:10px 12px; border-radius:6px; } .ogs-cartd__club code{ background:rgba(232,120,142,.25); padding:1px 6px; border-radius:4px; font-size:11px; } .ogs-cartd__club a{ color:var(--seal-deep); text-transform:uppercase; font-size:10px; letter-spacing:.14em; } .ogs-cartd__checkout{ width:100%; text-align:center; } .ogs-cartd__viewcart{ text-align:center; font-size:11px; text-transform:uppercase; letter-spacing:.18em; color:var(--ash); border-bottom:0; padding-bottom:2px; justify-self:center; } .ogs-cartd__viewcart:hover{ color:var(--ink); } /* ---- MOBILE: bottom sheet ---- */ @media (max-width:640px){ .ogs-cartd{ top:auto; left:0; right:0; width:auto; max-height:88dvh; height:auto; border-left:0; border-top:1px solid var(--rule); border-radius:16px 16px 0 0; transform:translateY(105%); box-shadow:0 -30px 60px -30px rgba(15,14,12,.3); } .ogs-cartd.is-open{ transform:none; } .ogs-cartd__head::before{ content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%); width:40px; height:4px; border-radius:2px; background:var(--haze); } .ogs-cartd__head{ position:relative; padding-top:24px; } .ogs-cartd__body{ overscroll-behavior:contain; } } @media (prefers-reduced-motion:reduce){ .ogs-cartd, .ogs-cartd__scrim{ transition:none; } } /* =========================================================================== OG SCENTS — cart & checkout pages (APPEND to bundles.css) Styles WooCommerce's classic cart + checkout into the paper editorial language. Mobile-first; covers the WooCommerce Blocks checkout basics too in case the pages use blocks. No template overrides needed. =========================================================================== */ /* ---- shared canvas ---- */ .woocommerce-cart .ogs-main > .woocommerce, .woocommerce-checkout .ogs-main > .woocommerce{ max-width:1140px; margin:0 auto; padding:clamp(32px,6vh,72px) var(--gutter) clamp(64px,10vh,120px); } .woocommerce-cart h1, .woocommerce-checkout h1{ font-family:var(--ff-display); font-weight:300; letter-spacing:-.03em; font-size:clamp(38px,6vw,72px); margin:0 0 34px; } /* every field speaks the same language */ .woocommerce input.input-text, .woocommerce textarea, .woocommerce select, .woocommerce .input-text, .woocommerce-page .qty{ font:inherit; font-size:16px; color:var(--ink); background:var(--paper); border:1px solid var(--rule); border-radius:8px; padding:12px 14px; outline:none; transition:border-color .2s; width:100%; } .woocommerce input.input-text:focus, .woocommerce textarea:focus, .woocommerce select:focus{ border-color:var(--seal); } .woocommerce form .form-row label{ font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--ash); margin-bottom:6px; display:block; } .woocommerce form .form-row{ margin-bottom:16px; padding:0; } .woocommerce form .form-row-first, .woocommerce form .form-row-last{ width:48.5%; } /* buttons — pills, ink and seal */ .woocommerce button.button, .woocommerce a.button, .woocommerce input.button, .woocommerce #place_order{ font:inherit; font-size:11px; text-transform:uppercase; letter-spacing:.18em; border-radius:9999px; padding:14px 26px; border:1px solid var(--ink); background:var(--ink); color:var(--paper); cursor:pointer; transition:.25s; line-height:1; } .woocommerce button.button:hover, .woocommerce a.button:hover{ background:transparent; color:var(--ink); } .woocommerce #place_order, .woocommerce .checkout-button{ background:var(--seal); border-color:var(--seal); color:#fff; width:100%; padding:17px 26px; font-size:12px; } .woocommerce #place_order:hover, .woocommerce .checkout-button:hover{ background:var(--seal-deep); border-color:var(--seal-deep); color:#fff; transform:translateY(-1px); } .woocommerce button.button:disabled{ opacity:.4; } /* ========================================================================= CART PAGE ========================================================================= */ .woocommerce-cart table.cart{ border:0; width:100%; } .woocommerce-cart table.cart th{ font-size:10px; text-transform:uppercase; letter-spacing:.18em; color:var(--ash); border-bottom:1px solid var(--rule); padding:0 10px 12px; text-align:left; background:none; } .woocommerce-cart table.cart td{ border:0; border-bottom:1px solid var(--rule); padding:18px 10px; background:none; vertical-align:middle; } .woocommerce-cart table.cart img{ width:64px; height:auto; mix-blend-mode:multiply; } .woocommerce-cart table.cart td.product-name a{ font-family:var(--ff-display); font-size:17px; color:var(--ink); } .woocommerce-cart table.cart td.product-name dl.variation, .woocommerce-cart table.cart td.product-name .wc-item-meta{ font-size:11px; color:var(--ash); margin-top:4px; } .woocommerce-cart .product-remove a{ font-size:20px; color:var(--ash) !important; text-decoration:none; display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; transition:.2s; background:none; } .woocommerce-cart .product-remove a:hover{ color:var(--seal-deep) !important; background:var(--seal-soft); } .woocommerce-cart .quantity .qty{ width:74px; text-align:center; padding:10px 6px; } .woocommerce-cart td.actions{ padding-top:22px; } .woocommerce-cart td.actions .coupon .input-text{ width:180px; display:inline-block; margin-right:8px; border-radius:9999px; padding:12px 18px; } .woocommerce .cart_totals{ width:100%; } .woocommerce .cart_totals h2{ font-family:var(--ff-display); font-weight:400; font-size:24px; margin-bottom:14px; } .woocommerce .cart_totals table{ border:0; } .woocommerce .cart_totals th, .woocommerce .cart_totals td{ border:0; border-top:1px solid var(--rule); padding:13px 0; font-size:14px; background:none; } .woocommerce .cart_totals .order-total td, .woocommerce .cart_totals .order-total th{ font-family:var(--ff-display); font-size:19px; } @media (min-width:901px){ .woocommerce-cart .woocommerce{ display:grid; grid-template-columns:1.5fr 1fr; gap:56px; align-items:start; } .woocommerce-cart .woocommerce > form{ grid-column:1; } .woocommerce-cart .cart-collaterals{ grid-column:2; position:sticky; top:100px; border:1px solid var(--rule); border-radius:4px; padding:26px; background:var(--paper-2); } .woocommerce-cart h1{ grid-column:1 / -1; } } @media (max-width:900px){ /* stack the classic table into cards */ .woocommerce-cart table.cart thead{ display:none; } .woocommerce-cart table.cart tr{ display:grid; grid-template-columns:64px 1fr auto; gap:4px 14px; padding:16px 0; border-bottom:1px solid var(--rule); align-items:center; } .woocommerce-cart table.cart td{ display:block; border:0; padding:2px 0; } .woocommerce-cart table.cart td.product-thumbnail{ grid-row:1 / 4; } .woocommerce-cart table.cart td.product-remove{ grid-column:3; grid-row:1; justify-self:end; } .woocommerce-cart table.cart td.product-price{ display:none; } .woocommerce-cart td.actions .coupon .input-text{ width:100%; margin:0 0 10px; } .woocommerce-cart td.actions .coupon button{ width:100%; } .woocommerce-cart .cart-collaterals{ border:1px solid var(--rule); border-radius:4px; padding:20px; margin-top:26px; background:var(--paper-2); } } /* ========================================================================= CHECKOUT PAGE ========================================================================= */ .woocommerce-checkout form.checkout{ display:block; } @media (min-width:901px){ .woocommerce-checkout form.checkout{ display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:start; } .woocommerce-checkout #customer_details{ grid-column:1; } .woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review{ grid-column:2; } .woocommerce-checkout #order_review{ position:sticky; top:100px; border:1px solid var(--rule); border-radius:4px; padding:26px; background:var(--paper-2); } } #order_review_heading{ font-family:var(--ff-display); font-weight:400; font-size:24px; margin:0 0 14px; } .woocommerce-checkout h3{ font-family:var(--ff-display); font-weight:400; font-size:22px; margin:0 0 18px; } .woocommerce-checkout table.shop_table{ border:0; width:100%; } .woocommerce-checkout table.shop_table th, .woocommerce-checkout table.shop_table td{ border:0; border-top:1px solid var(--rule); background:none; padding:12px 0; font-size:14px; text-align:left; } .woocommerce-checkout table.shop_table thead th{ border-top:0; font-size:10px; text-transform:uppercase; letter-spacing:.16em; color:var(--ash); } .woocommerce-checkout table.shop_table .order-total th, .woocommerce-checkout table.shop_table .order-total td{ font-family:var(--ff-display); font-size:19px; } .woocommerce-checkout .wc-item-meta, .woocommerce-checkout dl.variation{ font-size:11px; color:var(--ash); } /* payment box */ .woocommerce-checkout #payment{ background:none; border-radius:0; } .woocommerce-checkout #payment ul.payment_methods{ border-bottom:1px solid var(--rule); padding:0 0 16px; margin-bottom:16px; } .woocommerce-checkout #payment ul.payment_methods li{ list-style:none; padding:10px 0; } .woocommerce-checkout #payment div.payment_box{ background:var(--paper); border-radius:8px; font-size:13px; color:var(--ink-2); } .woocommerce-checkout #payment div.payment_box::before{ display:none; } /* notices in the house style */ .woocommerce-message, .woocommerce-info, .woocommerce-error{ border-top:0; border-left:3px solid var(--seal); background:var(--seal-soft); border-radius:6px; padding:14px 18px !important; color:var(--ink); font-size:14px; } .woocommerce-error{ border-left-color:#C0392B; background:#FBEDEB; } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before{ display:none; } /* coupon toggle row */ .woocommerce-form-coupon-toggle .woocommerce-info{ background:var(--paper-2); border-left-color:var(--haze); } /* ========================================================================= WOOCOMMERCE BLOCKS (if the pages use the block cart/checkout) ========================================================================= */ .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout{ --wc-primary:var(--seal); font-family:var(--ff-body); } .wc-block-components-button{ border-radius:9999px !important; text-transform:uppercase; letter-spacing:.16em; font-size:12px !important; background:var(--seal) !important; color:#fff !important; } .wc-block-components-button:hover{ background:var(--seal-deep) !important; } .wc-block-components-text-input input, .wc-block-components-combobox input, .wc-block-components-select select{ border:1px solid var(--rule) !important; border-radius:8px !important; font-size:16px !important; } .wc-block-components-product-name{ font-family:var(--ff-display); } .wc-block-components-order-summary{ background:var(--paper-2); border-radius:4px; } .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{ font-family:var(--ff-display); font-size:19px; } .wc-block-cart-item__image img{ mix-blend-mode:multiply; } /* =========================================================================== OG SCENTS — WooCommerce BLOCKS cart & checkout (APPEND to bundles.css, after _checkout-append. This supersedes the small "WOOCOMMERCE BLOCKS" section at the end of that file — you can delete that section or just leave it; these rules load later and win.) Styles the block-based Cart and Checkout pages into the paper editorial language. Blocks ship opinionated styles, so a few !importants are used deliberately where the plugin inlines its own. =========================================================================== */ /* ---------- shared canvas ---------- */ .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout{ font-family:var(--ff-body); color:var(--ink); } /* the page H1 ("Cart" / "Checkout") from the page template */ .woocommerce-cart .entry-title, .woocommerce-checkout .entry-title, .woocommerce-cart h1.wp-block-post-title, .woocommerce-checkout h1.wp-block-post-title{ font-family:var(--ff-display); font-weight:300; letter-spacing:-.03em; font-size:clamp(38px,6vw,72px); } /* ---------- typography inside blocks ---------- */ .wc-block-components-product-name{ font-family:var(--ff-display) !important; font-size:16px !important; color:var(--ink) !important; text-decoration:none !important; } .wc-block-components-checkout-step__title, .wc-block-components-title, .wc-block-components-totals-footer-item .wc-block-components-totals-item__label{ font-family:var(--ff-display) !important; font-weight:400 !important; letter-spacing:-.01em; } .wc-block-components-checkout-step__description{ color:var(--ash); font-size:13px; } /* ---------- product rows (cart table + checkout summary) ---------- */ .wc-block-cart-items__header{ font-size:10px !important; text-transform:uppercase; letter-spacing:.18em; color:var(--ash); } table.wc-block-cart-items, table.wc-block-cart-items th, table.wc-block-cart-items td{ border:0 !important; background:none; } .wc-block-cart-items__row{ border-bottom:1px solid var(--rule); } .wc-block-cart-item__image img, .wc-block-components-order-summary-item__image img{ mix-blend-mode:multiply; border-radius:2px; } /* the "Save $20.00" badge -> seal pill */ .wc-block-components-product-badge, .wc-block-components-sale-badge{ background:var(--seal-soft) !important; color:var(--seal-deep) !important; border:1px solid rgba(232,120,142,.4) !important; border-radius:9999px !important; font-size:10px !important; letter-spacing:.12em; text-transform:uppercase; padding:3px 10px !important; } .wc-block-components-product-price del{ color:var(--ash); } .wc-block-components-product-price ins{ text-decoration:none; } .wc-block-components-product-metadata, .wc-block-components-product-details{ font-size:11px !important; color:var(--ash) !important; } /* quantity stepper -> pill */ .wc-block-components-quantity-selector{ border:1px solid var(--rule) !important; border-radius:9999px !important; overflow:hidden; box-shadow:none !important; } .wc-block-components-quantity-selector input{ font:inherit; font-size:14px !important; border:0 !important; background:none; } .wc-block-components-quantity-selector__button{ color:var(--ash) !important; font-size:15px !important; border:0 !important; } .wc-block-components-quantity-selector__button:hover{ color:var(--seal-deep) !important; } .wc-block-cart-item__remove-link{ font-size:11px !important; text-transform:uppercase; letter-spacing:.12em; color:var(--ash) !important; text-decoration:none !important; border-bottom:1px solid var(--rule); } .wc-block-cart-item__remove-link:hover{ color:var(--seal-deep) !important; border-color:var(--seal); } /* ---------- sidebar / totals card ---------- */ .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block, .wc-block-checkout__sidebar .wc-block-components-order-summary, .wc-block-checkout__sidebar{ background:var(--paper-2); } .wc-block-cart__sidebar, .wc-block-checkout__sidebar{ border:1px solid var(--rule); border-radius:4px; padding:8px; } .wc-block-components-totals-wrapper{ border-color:var(--rule) !important; } .wc-block-components-totals-item{ font-size:14px; color:var(--ink-2); } .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{ font-family:var(--ff-display) !important; font-size:20px !important; color:var(--ink); } /* coupon panel */ .wc-block-components-panel__button{ font:inherit !important; font-size:13px !important; color:var(--ink) !important; } .wc-block-components-totals-coupon .wc-block-components-text-input input{ border-radius:9999px !important; } /* ---------- form fields (checkout) ---------- */ .wc-block-components-text-input input, .wc-block-components-combobox .components-combobox-control__suggestions-container input, .wc-block-components-combobox input, .wc-block-components-select select, .wc-block-components-textarea textarea{ font-size:16px !important; color:var(--ink) !important; background:var(--paper) !important; border:1px solid var(--rule) !important; border-radius:8px !important; box-shadow:none !important; } .wc-block-components-text-input input:focus, .wc-block-components-combobox input:focus, .wc-block-components-select select:focus, .wc-block-components-textarea textarea:focus{ border-color:var(--seal) !important; box-shadow:0 0 0 1px var(--seal) !important; } .wc-block-components-text-input label, .wc-block-components-combobox label, .wc-block-components-select label{ color:var(--ash) !important; } .wc-block-components-checkbox .wc-block-components-checkbox__input:checked{ background:var(--seal) !important; border-color:var(--seal) !important; } /* radio rows: shipping + payment */ .wc-block-components-radio-control__option{ border-color:var(--rule) !important; padding:14px 16px; } .wc-block-components-radio-control__input:checked{ border-color:var(--seal) !important; background:var(--seal) !important; } .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option{ border-color:var(--rule) !important; } .wc-block-components-payment-method-label{ font-size:14px; } /* ---------- buttons ---------- */ .wc-block-components-button{ font:inherit !important; font-size:12px !important; text-transform:uppercase; letter-spacing:.18em !important; border-radius:9999px !important; background:var(--ink) !important; color:var(--paper) !important; border:1px solid var(--ink) !important; box-shadow:none !important; padding:15px 26px !important; min-height:0 !important; transition:.25s !important; } .wc-block-components-button:hover{ background:transparent !important; color:var(--ink) !important; } /* the money buttons go seal */ .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button{ background:var(--seal) !important; border-color:var(--seal) !important; color:#fff !important; width:100%; } .wc-block-cart__submit-button:hover, .wc-block-components-checkout-place-order-button:hover{ background:var(--seal-deep) !important; border-color:var(--seal-deep) !important; color:#fff !important; transform:translateY(-1px); } /* the odd "+" express/secondary button under checkout */ .wc-block-components-express-payment-continue-rule{ color:var(--ash); } /* ---------- notices ---------- */ .wc-block-components-notice-banner{ border-radius:6px !important; border-left:3px solid var(--seal) !important; background:var(--seal-soft) !important; color:var(--ink) !important; } .wc-block-components-notice-banner.is-error{ border-left-color:#C0392B !important; background:#FBEDEB !important; } /* ---------- layout polish ---------- */ @media (min-width:901px){ .wc-block-cart{ gap:48px; } .wc-block-checkout__sidebar{ position:sticky; top:96px; } } @media (max-width:900px){ .wc-block-cart__sidebar, .wc-block-checkout__sidebar{ padding:4px; } .wc-block-components-sidebar-layout{ gap:26px; } } /* =========================================================================== OG SCENTS — CART & CHECKOUT, custom design (APPEND to bundles.css, at the very end. DELETE the old "_checkout-append" classic section — this replaces it. The blocks CSS sections are dead weight now; delete or keep.) Pairs with the template overrides in /woocommerce/. Mobile-first. =========================================================================== */ /* ---- ticker: full-bleed on every page, even inside narrow containers ---- */ .ogs-ticker{ width:100% !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important; overflow:hidden !important; box-sizing:border-box !important; } /* ---- shared page canvas ---- */ .woocommerce-cart .ogs-main, .woocommerce-checkout .ogs-main{ max-width:1200px; margin:0 auto; padding:clamp(28px,5vh,64px) var(--gutter) clamp(72px,10vh,140px); } .woocommerce-cart h1.entry-title, .woocommerce-checkout h1.entry-title, .woocommerce-cart .ogs-main > h1, .woocommerce-checkout .ogs-main > h1{ font-family:var(--ff-display); font-weight:300; letter-spacing:-.03em; font-size:clamp(44px,7vw,88px); margin:0 0 8px; } /* ---- FIELD RESET: kills the label/input gap and the underline look ---- */ .woocommerce form .form-row{ margin:0 0 16px !important; padding:0 !important; display:block; } .woocommerce form .form-row label{ position:static !important; display:block !important; margin:0 0 6px !important; font-size:10px !important; text-transform:uppercase; letter-spacing:.16em; color:var(--ash); transform:none !important; } .woocommerce form .form-row .woocommerce-input-wrapper{ display:block; } .woocommerce .form-row input.input-text, .woocommerce .form-row textarea, .woocommerce .form-row select, .woocommerce .form-row .select2-selection{ display:block; width:100% !important; font:inherit !important; font-size:16px !important; color:var(--ink) !important; background:#fff !important; border:1px solid var(--rule) !important; border-radius:10px !important; padding:13px 15px !important; min-height:0 !important; height:auto !important; box-shadow:none !important; outline:none; transition:border-color .2s, box-shadow .2s; } .woocommerce .form-row input.input-text:focus, .woocommerce .form-row textarea:focus, .woocommerce .form-row select:focus{ border-color:var(--seal) !important; box-shadow:0 0 0 1px var(--seal) !important; } .woocommerce .form-row .select2-selection{ padding:9px 15px !important; } .woocommerce form .form-row-first, .woocommerce form .form-row-last{ float:none !important; width:100% !important; } @media (min-width:641px){ .woocommerce form .form-row-first, .woocommerce form .form-row-last{ width:48.5% !important; float:left !important; } .woocommerce form .form-row-first{ margin-right:3% !important; } } .woocommerce form .form-row.woocommerce-validated input.input-text{ border-color:var(--rule) !important; } .woocommerce form .form-row.woocommerce-invalid input.input-text{ border-color:#C0392B !important; } /* ========================================================================= CART PAGE ========================================================================= */ .ogs-cartpg__layout{ display:grid; gap:40px; } @media (min-width:961px){ .ogs-cartpg__layout{ grid-template-columns:1.55fr 1fr; gap:56px; align-items:start; } } .ogs-cartpg__cols{ display:none; } @media (min-width:641px){ .ogs-cartpg__cols{ display:grid; grid-template-columns:1fr 130px 90px; gap:18px; font-size:10px; text-transform:uppercase; letter-spacing:.18em; color:var(--ash); padding-bottom:12px; border-bottom:1px solid var(--rule); } .ogs-cartpg__cols span:nth-child(2), .ogs-cartpg__cols span:nth-child(3){ text-align:center; } } .ogs-cartpg__item{ display:grid; grid-template-columns:84px 1fr; gap:6px 18px; padding:22px 0; border-bottom:1px solid var(--rule); align-items:center; } @media (min-width:641px){ .ogs-cartpg__item{ grid-template-columns:84px 1fr 130px 90px; } } .ogs-cartpg__item.is-kit{ background:linear-gradient(90deg, var(--seal-soft), transparent 75%); margin:0 calc(var(--gutter) * -1); padding-left:var(--gutter); padding-right:var(--gutter); } @media (min-width:961px){ .ogs-cartpg__item.is-kit{ margin:0; padding-left:14px; padding-right:14px; border-radius:8px; } } .ogs-cartpg__thumb{ grid-row:span 2; } @media (min-width:641px){ .ogs-cartpg__thumb{ grid-row:auto; } } .ogs-cartpg__thumb img{ width:84px; height:auto; aspect-ratio:3/4; object-fit:cover; mix-blend-mode:multiply; border-radius:3px; display:block; } .ogs-cartpg__meta{ min-width:0; display:grid; gap:5px; justify-items:start; } .ogs-cartpg__name{ font-family:var(--ff-display); font-size:19px; color:var(--ink); line-height:1.2; } .ogs-cartpg__unit{ font-size:13px; color:var(--ash); display:flex; gap:10px; align-items:center; } .ogs-cartpg__unit del{ opacity:.7; } .ogs-cartpg__unit ins{ text-decoration:none; color:var(--ink); } .ogs-cartpg__kitflag{ font-style:normal; font-size:9px; text-transform:uppercase; letter-spacing:.16em; background:var(--seal); color:#fff; padding:3px 9px; border-radius:9999px; } /* kit contents line from wc_get_formatted_cart_item_data */ .ogs-cartpg__meta dl.variation{ margin:2px 0 0; font-size:11.5px; color:var(--ash); line-height:1.5; } .ogs-cartpg__meta dl.variation dt{ display:none; } .ogs-cartpg__meta dl.variation dd{ margin:0; display:inline; } .ogs-cartpg__remove{ font-size:10px; text-transform:uppercase; letter-spacing:.14em; color:var(--ash); border-bottom:1px solid var(--rule); padding-bottom:2px; margin-top:4px; } .ogs-cartpg__remove:hover{ color:var(--seal-deep); border-color:var(--seal); } /* quantity pill */ .ogs-qty{ display:inline-flex; align-items:center; border:1px solid var(--rule); border-radius:9999px; overflow:hidden; justify-self:start; } @media (min-width:641px){ .ogs-qty{ justify-self:center; } } .ogs-qty__btn{ width:36px; height:38px; font-size:16px; color:var(--ash); transition:.2s; } .ogs-qty__btn:hover{ color:var(--seal-deep); background:var(--seal-soft); } .ogs-qty .qty, .ogs-qty input.qty{ width:40px !important; border:0 !important; text-align:center; font:inherit; font-size:14px !important; background:none !important; padding:0 !important; -moz-appearance:textfield; appearance:textfield; } .ogs-qty .qty::-webkit-inner-spin-button, .ogs-qty .qty::-webkit-outer-spin-button{ -webkit-appearance:none; } .ogs-qty__fixed{ min-width:40px; text-align:center; font-size:14px; } .ogs-cartpg__line{ font-family:var(--ff-display); font-size:18px; white-space:nowrap; justify-self:end; } @media (min-width:641px){ .ogs-cartpg__line{ justify-self:center; } } .ogs-cartpg__actions{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding-top:22px; } .ogs-cartpg__coupon{ display:flex; gap:10px; flex:1; min-width:240px; } .ogs-cartpg__coupon .input-text{ flex:1; font:inherit; font-size:16px; padding:12px 18px; border:1px solid var(--rule); border-radius:9999px; background:#fff; outline:none; } .ogs-cartpg__coupon .input-text:focus{ border-color:var(--seal); } .ogs-cartpg__update{ display:none; } /* JS auto-updates; button returns if JS is off */ .no-js .ogs-cartpg__update{ display:inline-flex; } /* totals card */ .ogs-cartpg__totals .cart_totals{ width:100% !important; float:none !important; border:1px solid var(--rule); border-radius:6px; background:var(--paper-2); padding:26px; } @media (min-width:961px){ .ogs-cartpg__totals{ position:sticky; top:96px; } } .ogs-cartpg__totals h2{ font-family:var(--ff-display); font-weight:400; font-size:24px; margin:0 0 12px; } .ogs-cartpg__totals table{ width:100%; border:0 !important; margin:0; } .ogs-cartpg__totals th, .ogs-cartpg__totals td{ border:0 !important; border-top:1px solid var(--rule) !important; padding:13px 0 !important; background:none !important; font-size:14px; text-align:left; } .ogs-cartpg__totals td{ text-align:right; } .ogs-cartpg__totals .order-total th, .ogs-cartpg__totals .order-total td{ font-family:var(--ff-display); font-size:21px; } .ogs-cartpg__totals .wc-proceed-to-checkout{ padding:18px 0 0 !important; } .ogs-cartpg__totals .checkout-button{ display:block; width:100%; text-align:center; background:var(--seal) !important; border:1px solid var(--seal) !important; color:#fff !important; border-radius:9999px !important; padding:17px 24px !important; font-size:12px !important; text-transform:uppercase; letter-spacing:.18em; transition:.25s; } .ogs-cartpg__totals .checkout-button:hover{ background:var(--seal-deep) !important; border-color:var(--seal-deep) !important; transform:translateY(-1px); } /* ========================================================================= CHECKOUT PAGE ========================================================================= */ .ogs-co__grid{ display:grid; gap:44px; } @media (min-width:961px){ .ogs-co__grid{ grid-template-columns:1.05fr .95fr; gap:64px; align-items:start; } .ogs-co__aside{ position:sticky; top:96px; } } .ogs-co__stephead{ display:flex; align-items:baseline; gap:14px; margin:0 0 20px; padding-bottom:12px; border-bottom:1px solid var(--rule); } .ogs-co__num{ font-family:var(--ff-display); font-style:italic; color:var(--seal-deep); font-size:15px; } .ogs-co__stephead h3{ font-family:var(--ff-display); font-weight:400; font-size:24px; margin:0; letter-spacing:-.01em; } .ogs-co__step{ margin-bottom:40px; } .woocommerce-billing-fields h3, .woocommerce-additional-fields h3{ font-family:var(--ff-display); font-weight:400; font-size:18px; margin:26px 0 14px; } .woocommerce-billing-fields > h3{ display:none; } /* replaced by "01 Your details" */ /* coupon toggle bar */ .woocommerce-form-coupon-toggle .woocommerce-info{ background:var(--paper-2); border:1px solid var(--rule); border-left:3px solid var(--seal); border-radius:8px; padding:14px 18px !important; color:var(--ink); font-size:14px; } .woocommerce-form-coupon-toggle .woocommerce-info::before{ display:none; } .woocommerce form.checkout_coupon{ border:1px solid var(--rule) !important; border-radius:8px; padding:18px !important; margin-bottom:26px; } /* the order card */ .ogs-co__step--order{ border:1px solid var(--rule); border-radius:6px; background:var(--paper-2); padding:26px; margin-bottom:0; } .ogs-review{ width:100%; border:0 !important; margin:0 0 6px; } .ogs-review th, .ogs-review td{ border:0 !important; background:none !important; padding:10px 0 !important; font-size:14px; text-align:left; vertical-align:middle; } .ogs-review tbody tr{ border-bottom:1px solid var(--rule); } .ogs-review__thumb{ width:56px; } .ogs-review__imgwrap{ position:relative; display:inline-block; } .ogs-review__imgwrap img{ width:48px; height:64px; object-fit:cover; border-radius:3px; mix-blend-mode:multiply; display:block; } .ogs-review__qtybubble{ position:absolute; top:-7px; right:-7px; width:20px; height:20px; background:var(--ink); color:var(--paper); border-radius:50%; font-size:10px; display:grid; place-items:center; font-weight:500; } .ogs-review__name span{ font-family:var(--ff-display); font-size:15px; display:block; line-height:1.3; } .ogs-review__kitflag{ font-style:normal; font-size:9px; text-transform:uppercase; letter-spacing:.14em; background:var(--seal); color:#fff; padding:2px 8px; border-radius:9999px; display:inline-block; margin-top:3px; } .ogs-review__name dl.variation{ margin:4px 0 0; font-size:10.5px; color:var(--ash); line-height:1.45; } .ogs-review__name dl.variation dt{ display:none; } .ogs-review__name dl.variation dd{ margin:0; display:inline; } .ogs-review__total{ text-align:right !important; font-family:var(--ff-display); font-size:15px; white-space:nowrap; } .ogs-review tfoot th{ font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--ash); font-weight:400; } .ogs-review tfoot td{ text-align:right !important; } .ogs-review tfoot .order-total th, .ogs-review tfoot .order-total td{ font-family:var(--ff-display); font-size:21px; color:var(--ink); text-transform:none; letter-spacing:0; } .ogs-review .cart-discount td{ color:var(--seal-deep); } /* payment */ #payment{ background:none !important; border-radius:0 !important; margin-top:14px; } #payment ul.payment_methods{ border:0 !important; padding:0 !important; margin:0 0 16px; } #payment ul.payment_methods li{ list-style:none; border:1px solid var(--rule); border-radius:10px; padding:14px 16px; margin-bottom:10px; background:#fff; } #payment ul.payment_methods li label{ font-size:14px; font-weight:500; } #payment div.payment_box{ background:var(--paper-2) !important; border-radius:8px; font-size:13px; color:var(--ink-2); margin-top:10px !important; } #payment div.payment_box::before{ display:none !important; } #payment .place-order{ padding:0 !important; } #place_order{ display:block; width:100%; background:var(--seal) !important; border:1px solid var(--seal) !important; color:#fff !important; border-radius:9999px !important; padding:18px 24px !important; font:inherit !important; font-size:12px !important; text-transform:uppercase; letter-spacing:.18em; transition:.25s; cursor:pointer; } #place_order:hover{ background:var(--seal-deep) !important; border-color:var(--seal-deep) !important; transform:translateY(-1px); } .woocommerce-privacy-policy-text{ font-size:11.5px; color:var(--ash); line-height:1.5; } .ogs-co__trust{ margin:16px 0 0; text-align:center; font-size:10px; text-transform:uppercase; letter-spacing:.16em; color:var(--ash); } /* notices */ .woocommerce-message, .woocommerce-info{ border-top:0 !important; border-left:3px solid var(--seal) !important; background:var(--seal-soft) !important; border-radius:8px; padding:14px 18px !important; color:var(--ink) !important; font-size:14px; } .woocommerce-error{ border-top:0 !important; border-left:3px solid #C0392B !important; background:#FBEDEB !important; border-radius:8px; padding:14px 18px !important; font-size:14px; } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before{ display:none !important; } .woocommerce-message .button{ float:right; } /* mobile order: order card first so people see what they're paying for */ @media (max-width:960px){ .ogs-co__aside{ order:-1; } } /* =========================================================================== OG SCENTS — cart page steppers (APPEND to bundles.js) +/- buttons drive the quantity input and auto-submit the cart form, so the "Update cart" button never needs pressing (it returns if JS is off). =========================================================================== */ (function () { 'use strict'; var form = document.querySelector('.woocommerce-cart-form'); if (!form) return; var t = null; function scheduleUpdate() { clearTimeout(t); t = setTimeout(function () { var btn = form.querySelector('[name="update_cart"]'); if (btn) { btn.disabled = false; btn.click(); } else form.submit(); }, 600); } form.addEventListener('click', function (e) { var b = e.target.closest('.ogs-qty__btn'); if (!b) return; var wrap = b.closest('[data-qty]'); var input = wrap && wrap.querySelector('input.qty'); if (!input) return; // fixed-qty (kit) rows have no stepper input var step = parseInt(b.getAttribute('data-q'), 10) || 0; var min = parseFloat(input.min || '0'); var max = input.max ? parseFloat(input.max) : Infinity; var val = (parseFloat(input.value) || 0) + step; val = Math.max(min, Math.min(max, val)); input.value = val; input.dispatchEvent(new Event('change', { bubbles: true })); scheduleUpdate(); }); form.addEventListener('change', function (e) { if (e.target.matches('input.qty')) scheduleUpdate(); }); })(); /* =========================================================================== OG SCENTS — cart/checkout layout fixes (APPEND to bundles.css, AFTER _shop-pages-append — this corrects the narrow-container and the cart price/qty collision.) =========================================================================== */ /* 1) USE THE WHOLE PAGE. The theme's main wrapper is a narrow reading column; checkout needs the full width. Widen the WooCommerce pages' container and neutralise any inner max-width the theme imposes. */ .woocommerce-cart .ogs-main, .woocommerce-checkout .ogs-main{ max-width:1280px !important; width:100% !important; margin:0 auto !important; padding-left:var(--gutter) !important; padding-right:var(--gutter) !important; } .woocommerce-cart .ogs-main > *, .woocommerce-checkout .ogs-main > *, .woocommerce-cart .woocommerce, .woocommerce-checkout .woocommerce{ max-width:none !important; width:100% !important; float:none !important; } /* make the two-column grids kick in a bit wider and actually fill */ @media (min-width:901px){ .ogs-co__grid{ grid-template-columns:1.15fr .85fr !important; gap:72px !important; } .ogs-cartpg__layout{ grid-template-columns:1.6fr 1fr !important; gap:64px !important; } } /* 2) CART ROW — give price / qty / total their own columns so nothing overlaps. Explicit track widths, everything centered in its cell. */ @media (min-width:641px){ .ogs-cartpg__cols{ grid-template-columns:1fr 120px 150px 110px !important; } .ogs-cartpg__cols span:nth-child(1){ text-align:left; } .ogs-cartpg__cols span:nth-child(2){ text-align:left; } /* price */ .ogs-cartpg__cols span:nth-child(3){ text-align:center; } /* qty */ .ogs-cartpg__cols span:nth-child(4){ text-align:right; } /* total */ .ogs-cartpg__item{ grid-template-columns:84px 1fr 150px 110px !important; align-items:center; column-gap:20px !important; } } /* the unit price lives under the name in the meta column, so pull it OUT of the meta stack and let the row's own columns carry qty + total. On desktop we hide the inline unit price (shown in a dedicated column via the meta) — simplest robust fix: keep unit price small under the name, and ensure qty/total sit in their own columns with no overlap. */ .ogs-cartpg__unit{ flex-wrap:wrap; } .ogs-cartpg__qty{ justify-self:center !important; } .ogs-cartpg__line{ justify-self:end !important; text-align:right; } /* stepper: solid pill, comfortable hit areas, no overlap with siblings */ .ogs-qty{ background:#fff; } .ogs-qty__btn{ width:38px; height:40px; } .ogs-qty .qty, .ogs-qty input.qty{ width:44px !important; } /* 3) CHECKOUT — the coupon bar and order card shouldn't look like tiny floating boxes; give them real presence and stop the card being narrow. */ .ogs-co__step--order{ padding:30px !important; } .woocommerce-form-coupon-toggle{ margin-bottom:30px; } /* select2 country box: don't truncate "Canada" */ .woocommerce .form-row .select2-container, .woocommerce .form-row .select2-selection{ width:100% !important; } .woocommerce .form-row .select2-selection__rendered{ padding-left:0 !important; line-height:1.4 !important; } /* the name/last-name pair shouldn't be pinched — full inputs */ .woocommerce-billing-fields__field-wrapper{ display:block; } /* mobile: single column, order first, full width */ @media (max-width:900px){ .ogs-co__grid, .ogs-cartpg__layout{ grid-template-columns:1fr !important; gap:32px !important; } .ogs-cartpg__item{ grid-template-columns:84px 1fr !important; } .ogs-cartpg__qty{ justify-self:start !important; } .ogs-cartpg__line{ justify-self:start !important; text-align:left; grid-column:2; } } /* =========================================================================== OG SCENTS — LIVE MOBILE FIXES Append at the VERY END of your main stylesheet (or Appearance → Customize → Additional CSS). Fixes, in order: 1. Header hamburger alignment 2. "Build a Kit" + "Kit $99" floating buttons colliding 3. Cart drawer CTA colliding with those buttons 4. Product images all the same size (no more big/small mix) 5. 2×2 grid everywhere on mobile 6. Star rating widget rendered properly =========================================================================== */ @media (max-width: 900px) { /* --------------------------------------------------------------------------- 1) HEADER — logo left, icons right, hamburger tucked in line. The stray floating lines were the burger's bars sitting outside the bar. --------------------------------------------------------------------------- */ .ogs-header__inner, .site-header .header-inner, header .ogs-header__bar { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 14px; padding: 12px 16px !important; min-height: 60px; } .ogs-logo, .ogs-logo--img { flex: 0 0 auto; margin: 0 !important; } .ogs-logo__img { height: 30px !important; width: auto; display: block; } /* the burger: a proper 3-line button, vertically centred, no stray bars */ .ogs-burger, .ogs-nav-toggle, .menu-toggle, [data-nav-toggle] { position: static !important; display: inline-flex !important; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; padding: 0 !important; margin: 0 !important; background: none; border: 0; cursor: pointer; order: 2; /* sits with the right-side icons */ } .ogs-burger span, .ogs-nav-toggle span, .menu-toggle span, [data-nav-toggle] span, [data-nav-toggle] i { display: block !important; width: 22px !important; height: 1.5px !important; background: currentColor !important; margin: 0 !important; position: static !important; transform: none !important; } /* right-side cluster: search + cart + burger together */ .ogs-header__actions, .ogs-header__right { display: flex !important; align-items: center; gap: 16px; flex: 0 0 auto; } /* --------------------------------------------------------------------------- 2 + 3) THE FLOATING BUTTONS — stop the pile-up. "Build a Kit" (left) and "Kit $99" (right) now sit on one row with a real gap, and they hide while the cart drawer is open so nothing overlaps Checkout. --------------------------------------------------------------------------- */ .ogsbk-launch, .ogslive-offer { bottom: 16px !important; z-index: 9990 !important; transition: opacity .25s ease, transform .25s ease; } .ogsbk-launch { left: 12px !important; right: auto !important; transform: none !important; max-width: 46vw; padding: 12px 16px !important; font-size: 11px !important; white-space: nowrap; } .ogsbk-launch:hover { transform: translateY(-2px) !important; } .ogslive-offer { right: 12px !important; left: auto !important; } .ogslive-offer__btn { padding: 12px 16px !important; font-size: 11px !important; white-space: nowrap; } .ogslive-offer__btn b { font-size: 13px !important; } /* while the cart drawer / kit tray / any modal is open, get them out of the way */ html.ogs-cartd-lock .ogsbk-launch, html.ogs-cartd-lock .ogslive-offer, html.ogsbk-lock .ogsbk-launch, html.ogsbk-lock .ogslive-offer, body.ogs-cart-open .ogsbk-launch, body.ogs-cart-open .ogslive-offer { opacity: 0 !important; pointer-events: none !important; transform: translateY(120%) !important; } /* give the cart drawer's checkout button clear air at the bottom */ .ogs-cartd__foot, .ogs-cartd__checkout { position: relative; z-index: 2; } .ogs-cartd__foot { padding-bottom: 22px !important; } /* --------------------------------------------------------------------------- 4 + 5) PRODUCTS — identical image sizes, 2×2 grid everywhere. The size mismatch was images sizing to their natural ratio; a fixed aspect-ratio + object-fit makes every card identical. --------------------------------------------------------------------------- */ .woocommerce ul.products, .ogs-shop-entry__grid, .ogs-bestsellers__track, .ogs-best2__grid, .ogs-products-grid, .related.products ul.products, .up-sells ul.products { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; grid-auto-flow: row !important; gap: 14px !important; overflow: visible !important; width: auto !important; transform: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } .woocommerce ul.products::before, .woocommerce ul.products::after { content: none !important; display: none !important; } .woocommerce ul.products li.product, .ogs-shop-entry__grid > *, .ogs-bestsellers__track > *, .ogs-product-card { width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; float: none !important; flex: none !important; } /* EVERY product image the same shape and size */ .woocommerce ul.products li.product a img, .woocommerce ul.products li.product img, .ogs-product-card img, .ogs-shop-entry__grid img, .ogs-bestsellers__track img, .ogs-pcard__media img { width: 100% !important; aspect-ratio: 3 / 4 !important; height: auto !important; object-fit: cover !important; object-position: center !important; display: block !important; margin: 0 0 10px !important; background: #F5F2EC; border-radius: 4px; } /* if a card wraps the image, lock that too */ .ogs-pcard__media, .woocommerce ul.products li.product a.woocommerce-LoopProduct-link { display: block; width: 100%; } /* card text sized for 2-up */ .woocommerce ul.products li.product .woocommerce-loop-product__title, .ogs-product-card h3, .ogs-product-card h4 { font-size: 15px !important; line-height: 1.25 !important; margin: 0 0 4px !important; } .woocommerce ul.products li.product .price, .ogs-product-card .price { font-size: 13px !important; } .woocommerce ul.products li.product .button, .woocommerce ul.products li.product .added_to_cart { width: 100%; text-align: center; font-size: 10px !important; letter-spacing: .1em; padding: 9px 10px !important; margin-top: 6px !important; } /* the numbered index (01, 02…) shouldn't push layout around */ .ogs-product-card__index, .ogs-bestsellers__num { font-size: 11px !important; } /* --------------------------------------------------------------------------- 6) STAR RATING — the review form's stars were rendering as raw text ("1 of 5 stars 2 of 5 stars…"). This restores real clickable stars. --------------------------------------------------------------------------- */ .woocommerce #review_form #respond p.stars { display: flex !important; gap: 6px; margin: 6px 0 18px !important; } .woocommerce p.stars a { position: relative !important; width: 30px !important; height: 30px !important; display: inline-grid !important; place-items: center; text-indent: 0 !important; overflow: visible !important; font-size: 0 !important; box-sizing: border-box; } /* hide the plain-text label, draw a star glyph instead */ .woocommerce p.stars a::before { content: "\2605" !important; font-size: 26px !important; line-height: 1; color: #E8E4DC !important; position: static !important; width: auto !important; height: auto !important; text-indent: 0 !important; } .woocommerce p.stars a:hover::before, .woocommerce p.stars a.active::before, .woocommerce p.stars:hover a::before { color: #E8788E !important; } /* on hover, un-highlight the ones after the hovered star */ .woocommerce p.stars a:hover ~ a::before { color: #E8E4DC !important; } /* displayed ratings on product cards */ .woocommerce .star-rating { font-size: 13px !important; margin: 4px 0 !important; } .woocommerce .star-rating span::before { color: #E8788E !important; } /* review form fields, comfortable on mobile */ .woocommerce #review_form #respond input[type="text"], .woocommerce #review_form #respond input[type="email"], .woocommerce #review_form #respond textarea { width: 100% !important; font-size: 16px !important; padding: 12px 14px !important; border: 1px solid rgba(15,14,12,.16) !important; border-radius: 8px !important; background: #fff !important; } .woocommerce #review_form #respond label { font-size: 11px !important; letter-spacing: .12em; } /* --------------------------------------------------------------------------- 7) BREATHING ROOM so the floating buttons never cover content --------------------------------------------------------------------------- */ body { padding-bottom: 74px !important; } .site-footer, footer { padding-bottom: 84px !important; } } /* end 900px */ /* very small phones: keep 2-up but tighten */ @media (max-width: 380px) { .woocommerce ul.products, .ogs-shop-entry__grid, .ogs-bestsellers__track { gap: 10px !important; } .ogsbk-launch, .ogslive-offer__btn { font-size: 10px !important; padding: 11px 13px !important; } .ogsbk-launch { max-width: 44vw; } } /* =========================================================================== OG SCENTS — LIVE MOBILE FIXES, ROUND 2 Append AFTER _mobile-live-fixes.css. 1. Header height cut (stops it covering the "I — ARRIVAL" label) 2. Kit tray: Add-to-cart button ALWAYS visible + a View Cart button =========================================================================== */ @media (max-width: 900px) { /* --------------------------------------------------------------------------- 1) HEADER — shorter, tighter, so the hero label isn't hidden underneath. --------------------------------------------------------------------------- */ .ogs-header, .site-header, header.ogs-header { min-height: 0 !important; } .ogs-header__inner, .site-header .header-inner, header .ogs-header__bar { padding: 8px 16px !important; min-height: 48px !important; } .ogs-logo__img { height: 26px !important; } .ogs-header__actions, .ogs-header__right { gap: 14px !important; } .ogs-burger, .ogs-nav-toggle, .menu-toggle, [data-nav-toggle] { width: 34px !important; height: 34px !important; gap: 4px !important; } .ogs-burger span, .ogs-nav-toggle span, .menu-toggle span, [data-nav-toggle] span { width: 20px !important; } /* ticker slimmer too — it stacks on top of the header */ .ogs-ticker, .ogs-ticker__track { font-size: 9px !important; } .ogs-ticker__track, .ogs-ticker__t { padding: 6px 0 !important; } /* push hero content clear of the (now shorter) sticky header */ #section-arrival, .ogs-reveal { padding-top: 18px !important; } .ogs-reveal__cap, .ogs-section__label, .ogs-eyebrow { position: relative; z-index: 1; } /* --------------------------------------------------------------------------- 2) KIT TRAY — the money buttons. The Add button was scrolling out of reach inside the summary. Now the price + Add + View Cart sit in a fixed footer bar at the bottom of the sheet, always visible. --------------------------------------------------------------------------- */ .ogsbk-tray { display: flex !important; flex-direction: column !important; } /* the summary area scrolls, the action bar doesn't */ .ogsbk-side__inner { max-height: 46dvh; overflow-y: auto; padding-bottom: 8px !important; } /* price row + buttons pinned to the bottom of the sheet */ .ogsbk-summary__foot, .ogsbk-side .ogsbk-price, .ogsbk-side .ogsbk-add { position: relative; z-index: 3; } .ogsbk-side { position: sticky; bottom: 0; background: var(--os-paper2, #F5F2EC); border-top: 1px solid rgba(15,14,12,.12); box-shadow: 0 -10px 26px -18px rgba(15,14,12,.4); } .ogsbk-price { display: flex !important; align-items: center; gap: 10px; padding: 12px 18px 6px !important; margin: 0 !important; border-top: 0 !important; } .ogsbk-price b { font-size: 30px !important; } /* THE ADD BUTTON — full width, always on screen */ .ogsbk-add { display: block !important; width: calc(100% - 36px) !important; margin: 0 18px 10px !important; padding: 16px !important; font-size: 12px !important; position: relative !important; opacity: 1 !important; visibility: visible !important; } .ogsbk-add:disabled { opacity: .45 !important; } /* View cart link under it — appears once something's in the cart */ .ogsbk-viewcart { display: block; text-align: center; margin: 0 18px 16px; padding: 13px; border: 1px solid rgba(15,14,12,.2); border-radius: 9999px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #0F0E0C; text-decoration: none; background: #fff; } .ogsbk-viewcart:active { background: #F5F2EC; } .ogsbk-note { padding-bottom: 10px !important; } } /* =========================================================================== OG SCENTS — DESKTOP FIXES (live) Append at the very END of your stylesheet / Additional CSS. 1. Full-bleed: kill the dead space left + right 2. Checkout: proper two-column, wide, readable 3. Order summary: fix the one-word-per-line names + overlapping thumbs 4. Cart page polish =========================================================================== */ /* --------------------------------------------------------------------------- 1) FULL WIDTH — the page was capped and floating in the middle. Root-level containers go edge to edge; inner content keeps a sane max. --------------------------------------------------------------------------- */ html, body { width: 100% !important; max-width: 100% !important; overflow-x: hidden; } #page, .site, #content, .site-content, .ogs-main, main { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* the header + ticker span the full viewport */ .ogs-header, .site-header, .ogs-ticker { width: 100% !important; max-width: 100% !important; } .ogs-header__inner, .site-header .header-inner { max-width: 1680px !important; margin: 0 auto !important; padding-left: clamp(24px, 3vw, 56px) !important; padding-right: clamp(24px, 3vw, 56px) !important; } /* hero + full-bleed sections truly full width */ #section-arrival, .ogs-reveal, .ogs-hero, .ogs-section--bleed { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } @media (min-width: 1200px) { /* content sections: wider than before, centred, generous gutters */ .ogs-section, .ogs-container, .container { max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; padding-left: clamp(28px, 3vw, 64px) !important; padding-right: clamp(28px, 3vw, 64px) !important; } /* shop grid uses the extra room */ .woocommerce ul.products { grid-template-columns: repeat(4, 1fr) !important; } } @media (min-width: 1700px) { .woocommerce ul.products { grid-template-columns: repeat(5, 1fr) !important; } } /* --------------------------------------------------------------------------- 2) CHECKOUT — real two-column, using the width. --------------------------------------------------------------------------- */ @media (min-width: 1000px) { .woocommerce-checkout .ogs-main, .woocommerce-cart .ogs-main { max-width: 1400px !important; margin: 0 auto !important; padding: 40px clamp(28px, 3vw, 56px) 100px !important; } .ogs-co__grid { display: grid !important; grid-template-columns: minmax(0, 1.25fr) minmax(400px, .75fr) !important; gap: 70px !important; align-items: start !important; } .ogs-co__details { min-width: 0; } .ogs-co__aside { position: sticky; top: 100px; } .ogs-co__step--order { padding: 30px !important; } /* form fields side by side properly, not pinched */ .woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 48.5% !important; float: left !important; } .woocommerce form .form-row-first { margin-right: 3% !important; } .woocommerce form .form-row-wide { width: 100% !important; float: none !important; clear: both; } } /* --------------------------------------------------------------------------- 3) ORDER SUMMARY — the broken bit in your screenshot. Names were wrapping one word per line because the text column collapsed, and the thumbnail was overlapping the text. --------------------------------------------------------------------------- */ .ogs-review, .woocommerce-checkout-review-order-table { width: 100% !important; table-layout: auto !important; } .ogs-review tbody tr, .woocommerce-checkout-review-order-table tbody tr { display: grid !important; grid-template-columns: 60px minmax(0, 1fr) auto !important; gap: 14px !important; align-items: start !important; padding: 14px 0 !important; border-bottom: 1px solid rgba(15,14,12,.1); } .ogs-review__thumb, .woocommerce-checkout-review-order-table .product-thumbnail { width: 60px !important; padding: 0 !important; position: relative !important; } .ogs-review__imgwrap { position: relative; display: block; width: 56px; } .ogs-review__imgwrap img, .woocommerce-checkout-review-order-table img { width: 56px !important; height: 74px !important; object-fit: cover !important; border-radius: 4px; display: block !important; margin: 0 !important; mix-blend-mode: multiply; } .ogs-review__qtybubble { position: absolute !important; top: -8px !important; right: -8px !important; width: 22px !important; height: 22px !important; display: grid !important; place-items: center !important; background: #0F0E0C !important; color: #fff !important; border-radius: 50% !important; font-size: 11px !important; z-index: 2; } /* THE FIX: text column can actually breathe */ .ogs-review__name, .woocommerce-checkout-review-order-table .product-name { min-width: 0 !important; padding: 0 !important; text-align: left !important; overflow-wrap: break-word; word-break: normal !important; hyphens: none !important; } .ogs-review__name span, .woocommerce-checkout-review-order-table .product-name > span:first-child { display: block !important; font-family: "Fraunces", Georgia, serif; font-size: 15px !important; line-height: 1.35 !important; white-space: normal !important; word-break: normal !important; } /* the 8-scent list under a kit: compact, readable, not a tower */ .ogs-review__name dl.variation, .ogs-review__name .wc-item-meta, .woocommerce-checkout-review-order-table dl.variation { margin: 6px 0 0 !important; font-size: 11px !important; line-height: 1.55 !important; color: #6B665E !important; display: block !important; } .ogs-review__name dl.variation dt, .woocommerce-checkout-review-order-table dl.variation dt { display: none !important; } .ogs-review__name dl.variation dd, .woocommerce-checkout-review-order-table dl.variation dd { margin: 0 !important; display: inline !important; } .ogs-review__name dl.variation dd p { margin: 0 !important; display: inline !important; } .ogs-review__total, .woocommerce-checkout-review-order-table .product-total { text-align: right !important; white-space: nowrap !important; font-family: "Fraunces", Georgia, serif; font-size: 15px !important; padding: 0 !important; align-self: center; } /* totals rows line up */ .ogs-review tfoot tr, .woocommerce-checkout-review-order-table tfoot tr { display: flex !important; justify-content: space-between !important; align-items: baseline; padding: 12px 0 !important; border-bottom: 1px solid rgba(15,14,12,.08); } .ogs-review tfoot th, .ogs-review tfoot td { border: 0 !important; padding: 0 !important; } .ogs-review tfoot .order-total { border-bottom: 0 !important; padding-top: 16px !important; } .ogs-review tfoot .order-total th, .ogs-review tfoot .order-total td { font-family: "Fraunces", Georgia, serif; font-size: 22px !important; text-transform: none !important; letter-spacing: 0 !important; color: #0F0E0C !important; } /* --------------------------------------------------------------------------- 4) CART PAGE — same treatment --------------------------------------------------------------------------- */ @media (min-width: 1000px) { .ogs-cartpg__layout { grid-template-columns: minmax(0, 1.6fr) minmax(360px, .9fr) !important; gap: 60px !important; } .ogs-cartpg__item { grid-template-columns: 90px minmax(0, 1fr) 150px 120px !important; column-gap: 24px !important; align-items: center !important; } .ogs-cartpg__name { font-size: 19px !important; } .ogs-cartpg__meta { min-width: 0 !important; } .ogs-cartpg__meta dl.variation { font-size: 11.5px !important; line-height: 1.5; } .ogs-cartpg__totals { position: sticky; top: 100px; } } /* --------------------------------------------------------------------------- 5) FLOATING BUTTONS — keep them off the checkout form on desktop --------------------------------------------------------------------------- */ @media (min-width: 1000px) { .woocommerce-checkout .ogsbk-launch, .woocommerce-checkout .ogslive-offer, .woocommerce-cart .ogsbk-launch, .woocommerce-cart .ogslive-offer { display: none !important; } } /* =========================================================================== OG SCENTS — OVERLAP FIX (paste at the VERY END, after everything else) The totals / order cards were floating over the items. This removes the sticky/absolute behaviour and forces a real two-column grid. =========================================================================== */ /* --- 1) NOTHING floats or sticks on cart/checkout --- */ .woocommerce-cart .cart-collaterals, .woocommerce-cart .ogs-cartpg__totals, .woocommerce-cart .cart_totals, .woocommerce-checkout .ogs-co__aside, .woocommerce-checkout #order_review, .woocommerce-checkout .ogs-co__step--order { position: static !important; top: auto !important; left: auto !important; right: auto !important; float: none !important; transform: none !important; z-index: auto !important; width: auto !important; max-width: none !important; } /* --- 2) CART PAGE: items left, totals right, real grid --- */ .woocommerce-cart .woocommerce { display: block !important; width: 100% !important; max-width: 1400px !important; margin: 0 auto !important; } .ogs-cartpg__layout { display: grid !important; grid-template-columns: 1fr !important; gap: 40px !important; align-items: start !important; width: 100% !important; } @media (min-width: 1000px) { .ogs-cartpg__layout { grid-template-columns: minmax(0, 1.7fr) minmax(340px, 1fr) !important; gap: 56px !important; } .ogs-cartpg__items { grid-column: 1 !important; min-width: 0 !important; } .ogs-cartpg__totals { grid-column: 2 !important; } /* re-enable sticky ONLY inside its own column, safely */ .ogs-cartpg__totals .cart_totals { position: sticky; top: 110px; } } /* if the theme's default cart markup is in play, grid it the same way */ @media (min-width: 1000px) { .woocommerce-cart .woocommerce > form.woocommerce-cart-form { width: 100% !important; float: none !important; margin: 0 !important; } .woocommerce-cart .cart-collaterals { width: 100% !important; float: none !important; margin-top: 40px !important; } .woocommerce-cart .cart-collaterals .cart_totals { width: 100% !important; float: none !important; } } /* --- 3) CHECKOUT: form left, order right, no overlap --- */ .woocommerce-checkout form.checkout, .ogs-co__grid { display: grid !important; grid-template-columns: 1fr !important; gap: 40px !important; align-items: start !important; width: 100% !important; } @media (min-width: 1000px) { .ogs-co__grid { grid-template-columns: minmax(0, 1.2fr) minmax(380px, .8fr) !important; gap: 60px !important; } .ogs-co__details { grid-column: 1 !important; min-width: 0 !important; } .ogs-co__aside { grid-column: 2 !important; min-width: 0 !important; } .ogs-co__aside .ogs-co__step--order { position: sticky; top: 110px; } /* if it's classic Woo markup instead of my template */ .woocommerce-checkout #customer_details { grid-column: 1 !important; width: 100% !important; float: none !important; } .woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review { grid-column: 2 !important; width: 100% !important; float: none !important; } .woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2 { width: 100% !important; float: none !important; } } /* --- 4) coupon bar full width above the grid --- */ .woocommerce-form-coupon-toggle, .woocommerce-checkout .woocommerce-info { grid-column: 1 / -1 !important; width: 100% !important; margin-bottom: 26px !important; } .woocommerce form.checkout_coupon { grid-column: 1 / -1 !important; width: 100% !important; } /* --- 5) page title not overlapped by the sticky header --- */ .woocommerce-cart .entry-title, .woocommerce-checkout .entry-title, .woocommerce-cart h1, .woocommerce-checkout h1 { position: relative; z-index: 1; margin: 0 0 30px !important; padding-top: 20px !important; } .woocommerce-cart .ogs-main, .woocommerce-checkout .ogs-main { padding-top: 40px !important; } /* =========================================================================== OG SCENTS — CART & CHECKOUT REBUILD Structure modelled on Ferm Living (cart) + Perfume Online (checkout), in the OG paper/seal palette. Desktop + mobile. PASTE THIS AT THE VERY END of your stylesheet / Additional CSS. You can DELETE these earlier blocks — this replaces them: _checkout-append, _shop-pages-append, _shop-pages-fix, _blocks-checkout-append, _blocks-fix-append, _desktop-live-fixes (cart/checkout parts), _desktop-fix-overlap =========================================================================== */ :root{ --og-paper:#FCFBF8; --og-paper2:#F5F2EC; --og-ink:#0F0E0C; --og-ink2:#2A2723; --og-ash:#6B665E; --og-rule:rgba(15,14,12,.12); --og-seal:#E8788E; --og-seal2:#C4506A; --og-fd:"Fraunces",Georgia,serif; --og-fb:"Inter Tight",system-ui,sans-serif; } /* --------------------------------------------------------------------------- 0) RESET — nothing floats, sticks or overlaps. Clean slate. --------------------------------------------------------------------------- */ .woocommerce-cart .cart-collaterals, .woocommerce-cart .cart_totals, .woocommerce-cart .ogs-cartpg__totals, .woocommerce-checkout .ogs-co__aside, .woocommerce-checkout #order_review, .woocommerce-checkout #customer_details, .woocommerce-checkout .ogs-co__step--order, .woocommerce-checkout .ogs-co__details{ float:none !important; position:static !important; transform:none !important; width:auto !important; max-width:none !important; z-index:auto !important; } /* --------------------------------------------------------------------------- 1) PAGE CANVAS — use the screen. --------------------------------------------------------------------------- */ .woocommerce-cart .ogs-main, .woocommerce-checkout .ogs-main, .woocommerce-cart #content, .woocommerce-checkout #content{ width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; background:var(--og-paper); } .woocommerce-cart .woocommerce, .woocommerce-checkout .woocommerce{ width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; } /* page title band */ .woocommerce-cart .entry-title, .woocommerce-checkout .entry-title, .woocommerce-cart h1.page-title, .woocommerce-checkout h1.page-title{ font-family:var(--og-fd); font-weight:300; letter-spacing:-.03em; font-size:clamp(40px,5vw,76px); line-height:1; max-width:1500px; margin:0 auto !important; padding:clamp(28px,4vh,56px) clamp(20px,4vw,64px) clamp(20px,3vh,36px) !important; } /* ========================================================================= 2) CART — Ferm Living structure: wide item list left, summary panel right ========================================================================= */ .ogs-cartpg__layout, .woocommerce-cart form.woocommerce-cart-form{ width:100%; } .ogs-cartpg{ width:100%; } .ogs-cartpg__layout{ display:grid !important; grid-template-columns:1fr !important; gap:36px !important; align-items:start !important; max-width:1500px; margin:0 auto !important; padding:0 clamp(20px,4vw,64px) 90px !important; } @media (min-width:1000px){ .ogs-cartpg__layout{ grid-template-columns:minmax(0,1fr) 400px !important; gap:clamp(40px,5vw,90px) !important; } .ogs-cartpg__items{ grid-column:1; min-width:0; } .ogs-cartpg__totals{ grid-column:2; } } /* column header row */ .ogs-cartpg__cols{ display:grid !important; grid-template-columns:110px minmax(0,1fr) 150px 120px !important; gap:24px !important; align-items:end; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--og-ash); padding-bottom:14px; border-bottom:1px solid var(--og-rule); } .ogs-cartpg__cols span:nth-child(1){ grid-column:1 / 3; } .ogs-cartpg__cols span:nth-child(2){ text-align:center; } .ogs-cartpg__cols span:nth-child(3){ text-align:right; } @media (max-width:999px){ .ogs-cartpg__cols{ display:none !important; } } /* the item row */ .ogs-cartpg__item{ display:grid !important; grid-template-columns:110px minmax(0,1fr) 150px 120px !important; gap:24px !important; align-items:center !important; padding:26px 0 !important; border-bottom:1px solid var(--og-rule) !important; margin:0 !important; } .ogs-cartpg__thumb{ grid-column:1; width:110px; } .ogs-cartpg__thumb img{ width:110px !important; height:auto !important; aspect-ratio:3/4; object-fit:cover; border-radius:4px; display:block; mix-blend-mode:multiply; background:var(--og-paper2); } .ogs-cartpg__meta{ grid-column:2; min-width:0 !important; display:flex !important; flex-direction:column; align-items:flex-start; gap:6px; } .ogs-cartpg__name{ font-family:var(--og-fd) !important; font-size:20px !important; line-height:1.25 !important; color:var(--og-ink) !important; white-space:normal !important; word-break:normal !important; overflow-wrap:normal !important; text-decoration:none; } .ogs-cartpg__unit{ font-size:13px !important; color:var(--og-ash) !important; } .ogs-cartpg__unit del{ opacity:.65; margin-right:6px; } .ogs-cartpg__unit ins{ text-decoration:none; color:var(--og-ink2); } .ogs-cartpg__kitflag{ font-style:normal; font-size:9px; letter-spacing:.16em; text-transform:uppercase; background:var(--og-seal); color:#fff; padding:3px 10px; border-radius:9999px; } .ogs-cartpg__meta dl.variation, .ogs-cartpg__meta .wc-item-meta{ margin:2px 0 0 !important; font-size:11.5px !important; line-height:1.55 !important; color:var(--og-ash) !important; } .ogs-cartpg__meta dl.variation dt{ display:none !important; } .ogs-cartpg__meta dl.variation dd{ margin:0 !important; display:inline !important; } .ogs-cartpg__meta dl.variation dd p{ margin:0 !important; display:inline !important; } .ogs-cartpg__remove{ font-size:10px !important; letter-spacing:.14em; text-transform:uppercase; color:var(--og-ash) !important; border-bottom:1px solid var(--og-rule); padding-bottom:2px; margin-top:4px; text-decoration:none; } .ogs-cartpg__remove:hover{ color:var(--og-seal2) !important; border-color:var(--og-seal); } /* quantity — own column, centred, never overlapping */ .ogs-cartpg__qty, .ogs-qty{ grid-column:3; justify-self:center !important; display:inline-flex !important; align-items:center; border:1px solid var(--og-rule); border-radius:9999px; background:#fff; overflow:hidden; margin:0 !important; } .ogs-qty__btn{ width:38px; height:40px; font-size:16px; color:var(--og-ash); background:none; border:0; cursor:pointer; } .ogs-qty__btn:hover{ color:var(--og-seal2); background:rgba(232,120,142,.08); } .ogs-qty .qty, .ogs-qty input.qty{ width:44px !important; border:0 !important; background:none !important; text-align:center; font:inherit; font-size:14px !important; padding:0 !important; -moz-appearance:textfield; appearance:textfield; } .ogs-qty .qty::-webkit-inner-spin-button,.ogs-qty .qty::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; } .ogs-qty__fixed{ min-width:44px; text-align:center; font-size:14px; } /* line total — own column, right aligned */ .ogs-cartpg__line{ grid-column:4; justify-self:end !important; text-align:right !important; font-family:var(--og-fd) !important; font-size:19px !important; white-space:nowrap; } /* coupon row */ .ogs-cartpg__actions{ display:flex !important; gap:12px; align-items:center; flex-wrap:wrap; padding-top:28px !important; } .ogs-cartpg__coupon{ display:flex; gap:10px; flex:1; min-width:260px; } .ogs-cartpg__coupon .input-text{ flex:1; font:inherit; font-size:15px; padding:13px 20px; border:1px solid var(--og-rule); border-radius:9999px; background:#fff; outline:none; } .ogs-cartpg__coupon .input-text:focus{ border-color:var(--og-seal); } /* SUMMARY PANEL — single clean card (no nested double box) */ .ogs-cartpg__totals .cart-collaterals{ padding:0 !important; margin:0 !important; background:none !important; border:0 !important; } .ogs-cartpg__totals .cart_totals{ background:var(--og-paper2) !important; border:1px solid var(--og-rule) !important; border-radius:8px !important; padding:30px !important; margin:0 !important; width:100% !important; } @media (min-width:1000px){ .ogs-cartpg__totals .cart_totals{ position:sticky; top:110px; } } .ogs-cartpg__totals h2{ font-family:var(--og-fd) !important; font-weight:400 !important; font-size:24px !important; margin:0 0 18px !important; } .ogs-cartpg__totals table, .ogs-cartpg__totals table.shop_table{ width:100% !important; border:0 !important; margin:0 !important; background:none !important; } .ogs-cartpg__totals tr{ display:flex !important; justify-content:space-between; align-items:baseline; } .ogs-cartpg__totals th, .ogs-cartpg__totals td{ border:0 !important; background:none !important; padding:12px 0 !important; font-size:14px !important; font-weight:400 !important; text-align:left !important; } .ogs-cartpg__totals tr:not(:last-child){ border-bottom:1px solid var(--og-rule); } .ogs-cartpg__totals .order-total th, .ogs-cartpg__totals .order-total td{ font-family:var(--og-fd) !important; font-size:24px !important; padding-top:16px !important; } .ogs-cartpg__totals .wc-proceed-to-checkout{ padding:20px 0 0 !important; } .ogs-cartpg__totals .checkout-button, .woocommerce .cart_totals .checkout-button{ display:block !important; width:100% !important; text-align:center !important; background:var(--og-seal) !important; border:1px solid var(--og-seal) !important; color:#fff !important; border-radius:9999px !important; padding:18px 24px !important; font-size:12px !important; letter-spacing:.18em; text-transform:uppercase; white-space:nowrap; transition:.25s; } .ogs-cartpg__totals .checkout-button:hover{ background:var(--og-seal2) !important; border-color:var(--og-seal2) !important; transform:translateY(-1px); } /* ========================================================================= 3) CHECKOUT — Perfume Online structure: form left, tinted summary right, the summary column runs the full height of the page. ========================================================================= */ .woocommerce-checkout form.checkout, .ogs-co{ width:100%; } .ogs-co__grid{ display:grid !important; grid-template-columns:1fr !important; gap:36px !important; align-items:start !important; max-width:1500px; margin:0 auto !important; padding:0 clamp(20px,4vw,64px) 90px !important; } @media (min-width:1000px){ .ogs-co__grid{ grid-template-columns:minmax(0,1fr) 460px !important; gap:clamp(40px,5vw,90px) !important; } .ogs-co__details{ grid-column:1; min-width:0; } .ogs-co__aside{ grid-column:2; min-width:0; } .ogs-co__aside .ogs-co__step--order{ position:sticky; top:110px; } } /* mobile: order summary FIRST so people see what they're buying */ @media (max-width:999px){ .ogs-co__aside{ order:-1; } } /* coupon bar spans the top */ .woocommerce-form-coupon-toggle{ max-width:1500px; margin:0 auto 30px !important; padding:0 clamp(20px,4vw,64px) !important; } .woocommerce-form-coupon-toggle .woocommerce-info{ background:var(--og-paper2) !important; border:1px solid var(--og-rule) !important; border-left:3px solid var(--og-seal) !important; border-radius:8px !important; padding:16px 22px !important; color:var(--og-ink) !important; font-size:14px !important; margin:0 !important; } .woocommerce form.checkout_coupon{ max-width:1500px; margin:0 auto 26px !important; border:1px solid var(--og-rule) !important; border-radius:8px; padding:20px !important; } /* step headers */ .ogs-co__stephead{ display:flex; align-items:baseline; gap:14px; margin:0 0 24px !important; padding-bottom:14px; border-bottom:1px solid var(--og-rule); } .ogs-co__num{ font-family:var(--og-fd); font-style:italic; color:var(--og-seal2); font-size:16px; } .ogs-co__stephead h3{ font-family:var(--og-fd) !important; font-weight:400 !important; font-size:26px !important; margin:0 !important; } .ogs-co__step{ margin-bottom:44px; } .woocommerce-billing-fields > h3{ display:none; } /* FIELDS — clean boxes, label above, no gap weirdness */ .woocommerce form .form-row{ margin:0 0 18px !important; padding:0 !important; display:block !important; } .woocommerce form .form-row label{ display:block !important; position:static !important; transform:none !important; margin:0 0 7px !important; font-size:10px !important; letter-spacing:.16em; text-transform:uppercase; color:var(--og-ash) !important; } .woocommerce .form-row input.input-text, .woocommerce .form-row textarea, .woocommerce .form-row select, .woocommerce .form-row .select2-selection{ display:block !important; width:100% !important; font:inherit !important; font-size:16px !important; color:var(--og-ink) !important; background:#fff !important; border:1px solid var(--og-rule) !important; border-radius:10px !important; padding:14px 16px !important; height:auto !important; min-height:0 !important; box-shadow:none !important; outline:none; transition:border-color .2s, box-shadow .2s; } .woocommerce .form-row input.input-text:focus, .woocommerce .form-row textarea:focus, .woocommerce .form-row select:focus{ border-color:var(--og-seal) !important; box-shadow:0 0 0 3px rgba(232,120,142,.15) !important; } .woocommerce .form-row .select2-selection{ padding:10px 16px !important; } .woocommerce .form-row .select2-selection__rendered{ padding-left:0 !important; line-height:1.5 !important; } .woocommerce .form-row .select2-selection__arrow{ top:50% !important; transform:translateY(-50%); } /* two-up name fields */ .woocommerce form .form-row-first, .woocommerce form .form-row-last{ width:100% !important; float:none !important; } @media (min-width:640px){ .woocommerce form .form-row-first, .woocommerce form .form-row-last{ width:48.5% !important; float:left !important; } .woocommerce form .form-row-first{ margin-right:3% !important; } .woocommerce form .form-row-wide{ clear:both; } } /* THE ORDER PANEL */ .ogs-co__step--order{ background:var(--og-paper2) !important; border:1px solid var(--og-rule) !important; border-radius:8px !important; padding:32px !important; margin:0 !important; } .ogs-co__step--order .ogs-co__stephead{ border-bottom-color:rgba(15,14,12,.14); } /* order rows: thumb | name (flexible) | price */ .ogs-review, .woocommerce-checkout-review-order-table{ width:100% !important; border:0 !important; margin:0 0 8px !important; background:none !important; table-layout:auto !important; } .ogs-review thead, .woocommerce-checkout-review-order-table thead{ display:none !important; } .ogs-review tbody tr, .woocommerce-checkout-review-order-table tbody tr{ display:grid !important; grid-template-columns:64px minmax(0,1fr) auto !important; gap:16px !important; align-items:start !important; padding:16px 0 !important; border-bottom:1px solid var(--og-rule) !important; } .ogs-review td, .woocommerce-checkout-review-order-table td{ border:0 !important; background:none !important; padding:0 !important; } .ogs-review__thumb{ width:64px !important; } .ogs-review__imgwrap{ position:relative; display:block; width:60px; } .ogs-review__imgwrap img, .woocommerce-checkout-review-order-table img{ width:60px !important; height:78px !important; object-fit:cover !important; border-radius:5px; display:block !important; margin:0 !important; mix-blend-mode:multiply; background:#fff; } .ogs-review__qtybubble{ position:absolute !important; top:-8px !important; right:-8px !important; width:23px !important; height:23px !important; display:grid !important; place-items:center !important; background:var(--og-ink) !important; color:#fff !important; border-radius:50% !important; font-size:11px !important; font-weight:500; z-index:2; } .ogs-review__name{ min-width:0 !important; } .ogs-review__name > span{ display:block !important; font-family:var(--og-fd) !important; font-size:16px !important; line-height:1.35 !important; color:var(--og-ink) !important; white-space:normal !important; word-break:normal !important; overflow-wrap:break-word; } .ogs-review__kitflag{ font-style:normal; display:inline-block; margin-top:5px; font-size:9px; letter-spacing:.14em; text-transform:uppercase; background:var(--og-seal); color:#fff; padding:2px 9px; border-radius:9999px; } .ogs-review__name dl.variation, .ogs-review__name .wc-item-meta{ margin:7px 0 0 !important; font-size:11px !important; line-height:1.6 !important; color:var(--og-ash) !important; } .ogs-review__name dl.variation dt{ display:none !important; } .ogs-review__name dl.variation dd{ margin:0 !important; display:inline !important; } .ogs-review__name dl.variation dd p{ margin:0 !important; display:inline !important; } .ogs-review__total{ text-align:right !important; white-space:nowrap !important; align-self:center; font-family:var(--og-fd) !important; font-size:16px !important; } /* totals */ .ogs-review tfoot tr, .woocommerce-checkout-review-order-table tfoot tr{ display:flex !important; justify-content:space-between !important; align-items:baseline; padding:13px 0 !important; border-bottom:1px solid var(--og-rule) !important; } .ogs-review tfoot th, .ogs-review tfoot td{ border:0 !important; padding:0 !important; background:none !important; font-size:14px !important; font-weight:400 !important; text-transform:none !important; letter-spacing:0 !important; color:var(--og-ink2) !important; } .ogs-review tfoot .cart-discount td{ color:var(--og-seal2) !important; } .ogs-review tfoot .order-total{ border-bottom:0 !important; padding-top:18px !important; } .ogs-review tfoot .order-total th, .ogs-review tfoot .order-total td{ font-family:var(--og-fd) !important; font-size:26px !important; color:var(--og-ink) !important; } /* payment */ #payment{ background:none !important; margin-top:20px; } #payment ul.payment_methods{ border:0 !important; padding:0 !important; margin:0 0 18px !important; } #payment ul.payment_methods li{ list-style:none; background:#fff; border:1px solid var(--og-rule); border-radius:10px; padding:16px 18px; margin:0 0 10px !important; } #payment ul.payment_methods li label{ font-size:14px; font-weight:500; } #payment div.payment_box{ background:var(--og-paper2) !important; border-radius:8px; margin-top:12px !important; font-size:13px; color:var(--og-ink2); } #payment div.payment_box::before{ display:none !important; } #payment .place-order{ padding:0 !important; } #place_order{ display:block !important; width:100% !important; background:var(--og-seal) !important; border:1px solid var(--og-seal) !important; color:#fff !important; border-radius:9999px !important; padding:20px !important; font:inherit !important; font-size:13px !important; letter-spacing:.18em; text-transform:uppercase; cursor:pointer; transition:.25s; } #place_order:hover{ background:var(--og-seal2) !important; border-color:var(--og-seal2) !important; transform:translateY(-1px); } .woocommerce-privacy-policy-text{ font-size:11.5px; color:var(--og-ash); line-height:1.55; margin-top:14px; } .ogs-co__trust{ margin:18px 0 0 !important; text-align:center; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--og-ash); } /* notices */ .woocommerce-message, .woocommerce-info{ border-top:0 !important; border-left:3px solid var(--og-seal) !important; background:rgba(232,120,142,.09) !important; border-radius:8px; padding:16px 22px !important; color:var(--og-ink) !important; font-size:14px; } .woocommerce-error{ border-top:0 !important; border-left:3px solid #C0392B !important; background:#FBEDEB !important; border-radius:8px; padding:16px 22px !important; font-size:14px; } .woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{ display:none !important; } /* ========================================================================= 4) MOBILE — cart rows restack cleanly ========================================================================= */ @media (max-width:999px){ .ogs-cartpg__item{ grid-template-columns:92px minmax(0,1fr) !important; grid-template-areas:"thumb meta" "thumb qty" "line line" !important; gap:6px 16px !important; padding:20px 0 !important; } .ogs-cartpg__thumb{ grid-area:thumb; width:92px; align-self:start; } .ogs-cartpg__thumb img{ width:92px !important; } .ogs-cartpg__meta{ grid-area:meta; } .ogs-cartpg__name{ font-size:17px !important; } .ogs-cartpg__qty, .ogs-qty{ grid-area:qty; justify-self:start !important; margin-top:6px !important; } .ogs-cartpg__line{ grid-area:line; justify-self:start !important; text-align:left !important; font-size:17px !important; margin-top:8px; padding-top:8px; border-top:1px dashed var(--og-rule); width:100%; } .ogs-cartpg__coupon{ min-width:0; width:100%; flex-direction:column; } .ogs-cartpg__coupon .input-text, .ogs-cartpg__actions .ogs-btn{ width:100%; } .ogs-cartpg__totals .cart_totals, .ogs-co__step--order{ padding:24px !important; } .ogs-co__step--order{ padding:22px !important; } .ogs-review tbody tr{ grid-template-columns:56px minmax(0,1fr) auto !important; gap:12px !important; } .ogs-review__imgwrap img{ width:52px !important; height:68px !important; } .ogs-review__name > span{ font-size:15px !important; } .ogs-review tfoot .order-total th, .ogs-review tfoot .order-total td{ font-size:22px !important; } } /* =========================================================================== OG SCENTS — structure guards for the rebuilt templates. Paste AFTER _cart-checkout-rebuild.css. Small but important: these are the rules that actually stop the overlap. =========================================================================== */ /* 1) THE REAL CAUSE — WooCommerce floats inside #customer_details never cleared, so the left column had no height and the right panel rode over it. */ .woocommerce-checkout .ogs-co__fields, .woocommerce-checkout .ogs-co__fieldwrap, .woocommerce-checkout .col2-set, .woocommerce-checkout #customer_details{ display:block !important; width:100% !important; float:none !important; } .woocommerce-checkout .ogs-co__fields::after, .woocommerce-checkout .ogs-co__fieldwrap::after, .woocommerce-checkout .col2-set::after, .woocommerce form .form-row::after{ content:"" !important; display:table !important; clear:both !important; } /* Woo's own two-column set inside billing: make it stack, we handle columns */ .woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2{ width:100% !important; float:none !important; margin:0 0 26px !important; padding:0 !important; } /* 2) grid children must be allowed to shrink, or long words blow the layout */ .ogs-co__grid > *, .ogs-cartpg__layout > *{ min-width:0 !important; } /* 3) sticky only where it's safe, and never on small screens */ @media (max-width:999px){ .ogs-co__aside .ogs-co__step--order, .ogs-cartpg__totals .cart_totals{ position:static !important; top:auto !important; } } /* 4) hidden shipping wrapper (when no shipping address is needed) */ .ogs-co__hidden-shipping{ display:none; } /* 5) cross-sells sit below the grid, full width */ .ogs-cartpg__crosssell{ max-width:1500px; margin:0 auto; padding:0 clamp(20px,4vw,64px) 80px; } .ogs-cartpg__crosssell .cross-sells{ width:100% !important; float:none !important; } /* 6) JS-off safety: keep Update cart usable if the stepper script isn't loaded */ .ogs-cartpg__update{ display:none; } .no-js .ogs-cartpg__update{ display:inline-flex; } /* =========================================================================== OG SCENTS — CART & CHECKOUT, definitive. Appended last so it wins. Nothing inside these two pages may exceed its container; the shipping-calculator fields were the overflow source. =========================================================================== */ .woocommerce-cart *, .woocommerce-checkout * { box-sizing: border-box !important; max-width: 100% !important; } .woocommerce-cart, .woocommerce-checkout, .woocommerce-cart #page, .woocommerce-checkout #page, .woocommerce-cart .ogs-page, .woocommerce-checkout .ogs-page, .woocommerce-cart .ogs-page__wrap, .woocommerce-checkout .ogs-page__wrap { overflow-x: clip !important; max-width: 100% !important; } /* --- the shipping calculator: the actual culprit --- */ .woocommerce-shipping-calculator, .shipping-calculator-form, .shipping-calculator-form p, .shipping-calculator-form .form-row, .shipping-calculator-form select, .shipping-calculator-form input, .shipping-calculator-form .select2, .shipping-calculator-form .select2-container, .shipping-calculator-form .select2-selection { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; float: none !important; } .shipping-calculator-form { display: block !important; padding: 14px 0 0 !important; margin: 10px 0 0 !important; border-top: 1px solid var(--rule); } .shipping-calculator-form .form-row { margin: 0 0 10px !important; } .shipping-calculator-form label { display: block !important; margin: 0 0 6px !important; font-size: 10px !important; letter-spacing: .14em; text-transform: uppercase; color: var(--ash) !important; } .shipping-calculator-form select, .shipping-calculator-form input, .shipping-calculator-form .select2-selection { font-size: 15px !important; padding: 12px 14px !important; height: auto !important; border: 1px solid var(--rule) !important; border-radius: 9px !important; background: #fff !important; } .shipping-calculator-form button { width: 100% !important; margin-top: 4px !important; padding: 13px !important; border-radius: 9999px !important; font-size: 11px !important; letter-spacing: .14em; text-transform: uppercase; background: var(--ink) !important; color: var(--paper) !important; border: 0 !important; } /* --- every field on these pages stays in its box --- */ .woocommerce-cart input, .woocommerce-cart select, .woocommerce-cart textarea, .woocommerce-checkout input, .woocommerce-checkout select, .woocommerce-checkout textarea, .woocommerce-cart .select2-container, .woocommerce-checkout .select2-container { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } /* --- your details first, order second, on mobile --- */ @media (max-width: 999px) { .ogs-co__grid { display: flex !important; flex-direction: column !important; gap: 26px !important; } .ogs-co__details { order: 1 !important; } .ogs-co__aside { order: 2 !important; } } /* --- panels --- */ .ogs-co__step--order, .ogs-cartpg__totals .cart_totals { width: 100% !important; background: var(--paper-2) !important; border: 1px solid var(--rule) !important; border-radius: 12px !important; padding: 24px 20px !important; margin: 0 !important; overflow: hidden !important; } @media (min-width: 1000px) { .ogs-co__step--order, .ogs-cartpg__totals .cart_totals { padding: 30px !important; } } /* --- totals rows --- */ .ogs-cartpg__totals table, .ogs-cartpg__totals tbody, .ogs-cartpg__totals tr, .ogs-review, .ogs-review tbody, .ogs-review tfoot { width: 100% !important; } .ogs-cartpg__totals tr, .ogs-review tfoot tr { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; gap: 14px !important; padding: 13px 0 !important; } .ogs-cartpg__totals th, .ogs-cartpg__totals td, .ogs-review tfoot th, .ogs-review tfoot td { border: 0 !important; padding: 0 !important; background: none !important; font-size: 14px !important; font-weight: 400 !important; text-align: left !important; min-width: 0 !important; } .ogs-cartpg__totals td, .ogs-review tfoot td { text-align: right !important; } /* shipping row holds a form, so it stacks */ .ogs-cartpg__totals tr.woocommerce-shipping-totals, .ogs-cartpg__totals tr.shipping { display: block !important; width: 100% !important; } .ogs-cartpg__totals tr.woocommerce-shipping-totals th, .ogs-cartpg__totals tr.shipping th { display: block !important; width: 100% !important; margin-bottom: 6px !important; } .ogs-cartpg__totals tr.woocommerce-shipping-totals td, .ogs-cartpg__totals tr.shipping td { display: block !important; width: 100% !important; text-align: left !important; } .ogs-cartpg__totals ul#shipping_method { list-style: none !important; margin: 0 !important; padding: 0 !important; } .ogs-cartpg__totals .woocommerce-shipping-destination { display: block !important; font-size: 12.5px !important; color: var(--ash) !important; margin-top: 5px !important; } .ogs-cartpg__totals .shipping-calculator-button { display: inline-block !important; margin-top: 8px !important; font-size: 11px !important; letter-spacing: .1em; text-transform: uppercase; color: var(--seal-deep) !important; } .ogs-cartpg__totals .order-total { border-bottom: 0 !important; padding-top: 16px !important; } .ogs-cartpg__totals .order-total th, .ogs-cartpg__totals .order-total td, .ogs-review tfoot .order-total th, .ogs-review tfoot .order-total td { font-family: var(--ff-display) !important; font-size: 23px !important; } /* --- buttons --- */ .ogs-cartpg__totals .checkout-button, #place_order, .woocommerce .cart_totals .checkout-button { display: block !important; width: 100% !important; margin: 18px 0 0 !important; padding: 18px 14px !important; border-radius: 9999px !important; background: var(--seal) !important; border: 1px solid var(--seal) !important; color: #fff !important; font-size: 11.5px !important; letter-spacing: .14em !important; text-transform: uppercase; white-space: normal !important; line-height: 1.3 !important; position: relative !important; z-index: 3 !important; } [class*="afterpay"], [id*="afterpay"], [class*="affirm"], .klarna-placement { display: block !important; position: static !important; clear: both !important; width: 100% !important; margin: 8px 0 12px !important; float: none !important; z-index: 1 !important; } /* --- offer popup: one price, one member line --- */ .ogslive-offer__price s, .ogslive-kcap__price s, .ogsbk-price s, .ogs-heroffer__price s, .ogs-promo__card--kit .was { display: none !important; } .ogs-codechip { display: none !important; } .ogs-memberline ~ .ogs-memberline { display: none !important; } .ogs-memberline { display: block !important; margin-top: 8px !important; font-size: 10.5px !important; letter-spacing: .12em !important; text-transform: uppercase; line-height: 1.5 !important; color: var(--seal-deep); } .ogs-memberline a { color: inherit; text-decoration: underline; cursor: pointer; }