/* ========================================================================== LA GRADA — main.css (mobile-first) 1 Tokens · 2 Base · 3 Primitives · 4 Header · 5 Home · 6 Product card 7 Archive + filters · 8 Product page · 9 Overlays · 10 Footer · 11 WC defaults Breakpoints: 720px (tablet) · 1080px (desktop) ========================================================================== */ /* 1 · TOKENS ------------------------------------------------------------- */ :root { /* Palette (LA GRADA Design System) */ --lg-green-50: #F0FCF4; --lg-green-100: #DDF8E6; --lg-green-500: #18D860; --lg-green-700: #0B6B36; --lg-white: #FFFFFF; --lg-offwhite: #F5F4EF; --lg-neutral-200: #E4E2DB; --lg-neutral-300: #CFCCC3; --lg-neutral-500: #8E8B82; --lg-neutral-600: #5E5C56; --lg-neutral-800: #262622; --lg-black: #0A0A0A; --lg-red-500: #E0352B; --lg-red-50: #FDEDEC; --lg-yellow-50: #FEF8E1; /* Semantic */ --color-primary: var(--lg-green-500); --color-primary-dark: var(--lg-green-700); --color-primary-soft: var(--lg-green-100); --color-black: var(--lg-black); --color-white: var(--lg-white); --color-green: var(--lg-green-500); --color-gray: var(--lg-neutral-600); --surface-alt: var(--lg-offwhite); --text: var(--lg-black); --text-muted: var(--lg-neutral-600); --text-accent: var(--lg-green-700); --border-subtle: var(--lg-neutral-200); --border-default: var(--lg-neutral-300); --border-strong: var(--lg-black); --error: var(--lg-red-500); /* Type */ --font-display: 'Poppins', Arial, sans-serif; --font-body: 'Lato', Arial, sans-serif; --font-mono: 'Poppins', Arial, sans-serif; --fs-display: clamp(44px, 9vw, 96px); --fs-display-md: clamp(44px, 7vw, 96px); --fs-display-sm: clamp(36px, 5.5vw, 64px); --fs-h2: clamp(28px, 4vw, 48px); --fs-h3: 22px; --fs-body: 15px; --fs-small: 13px; --fs-micro: 11px; /* Spacing (4px base) */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 48px; --spacing-2xl: 80px; --page-margin: 16px; --gutter: 12px; --section-y: 48px; --container-max: 1440px; --header-h: 56px; --announce-h: 32px; /* Shape, elevation, motion */ --radius-0: 0; --radius-xs: 2px; --shadow-overlay: 0 24px 64px -16px rgba(10, 10, 10, .28); --ease: cubic-bezier(.2, .7, .2, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 320ms; --z-header: 50; --z-sticky: 40; --z-scrim: 80; --z-overlay: 90; } @media (min-width: 720px) { :root { --page-margin: 24px; --gutter: 24px; --section-y: 64px; --header-h: 72px; } } @media (min-width: 1080px) { :root { --page-margin: 40px; --section-y: 80px; } } /* 2 · BASE --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--announce-h) + 16px); } body { margin: 0; background: var(--color-white); color: var(--text); font: 400 var(--fs-body)/1.5 var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.lg-lock { overflow: hidden; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: var(--text); text-underline-offset: 3px; } a:hover { color: var(--text-accent); } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; line-height: 1.05; } p { margin: 0; text-wrap: pretty; } ul, ol { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 2px solid var(--color-green); outline-offset: 2px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .lg-skip { position: absolute; left: 8px; top: -60px; z-index: 200; background: var(--color-black); color: #fff; padding: 12px 16px; } .lg-skip:focus { top: 8px; color: #fff; } .lg-container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding-inline: var(--page-margin); } .lg-main { padding-block: 16px var(--section-y); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* 3 · PRIMITIVES --------------------------------------------------------- */ .lg-label { font: 500 var(--fs-micro)/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); } .lg-label--accent { color: var(--text-accent); } .lg-display { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-display); line-height: .88; letter-spacing: -.045em; text-transform: uppercase; text-wrap: balance; } .lg-display--md { font-size: var(--fs-display-md); line-height: .9; letter-spacing: -.04em; } .lg-display--sm { font-size: var(--fs-display-sm); line-height: .92; letter-spacing: -.04em; } .lg-h2 { font-size: var(--fs-h2); line-height: 1; letter-spacing: -.03em; text-transform: uppercase; text-wrap: balance; } .lg-h3 { font: 600 var(--fs-h3)/1.1 var(--font-display); letter-spacing: -.02em; } .lg-muted { color: var(--text-muted); font-size: var(--fs-small); } .lg-stack { display: flex; flex-direction: column; gap: 16px; } .lg-stack--end { align-items: flex-start; } .lg-split { display: grid; gap: 24px; align-items: end; } @media (min-width: 720px) { .lg-split { grid-template-columns: 1.2fr 1fr; } } .lg-link-arrow { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; padding: 10px 0; white-space: nowrap; } .lg-link-arrow .lg-icon { transition: transform var(--dur-base) var(--ease); } .lg-link-arrow:hover .lg-icon { transform: translateX(3px); } /* Buttons */ .lg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: 0; font: 600 13px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); } .lg-btn:active { transform: translateY(1px); } .lg-btn[disabled], .lg-btn.disabled { opacity: .4; pointer-events: none; } .lg-btn--primary { background: var(--color-green); color: var(--color-black); } .lg-btn--primary:hover { background: var(--color-black); color: var(--color-green); } .lg-btn--secondary { background: var(--color-black); color: #fff; } .lg-btn--secondary:hover { background: var(--color-green); color: var(--color-black); } .lg-btn--outline { background: transparent; color: var(--color-black); border-color: var(--color-black); } .lg-btn--outline:hover { background: var(--color-black); color: #fff; } .lg-btn--inverse { background: #fff; color: var(--color-black); } .lg-btn--inverse:hover { background: var(--color-green); color: var(--color-black); } .lg-btn--sm { min-height: 36px; padding: 0 14px; font-size: 12px; } .lg-btn--lg { min-height: 56px; padding: 0 28px; font-size: 14px; } .lg-btn--block { display: flex; width: 100%; } .lg-iconbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: inherit; transition: background var(--dur-fast) var(--ease); } .lg-iconbtn:hover { background: var(--lg-green-50); color: inherit; } /* Inputs */ .lg-input, .woocommerce-ordering select { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--border-default); border-radius: var(--radius-xs); background: #fff; font-size: 16px; /* 16px avoids iOS zoom */ } .lg-input:focus, .woocommerce-ordering select:focus { outline: none; border-color: var(--color-black); box-shadow: inset 0 -2px 0 var(--color-green); } .lg-field--icon { position: relative; display: block; flex: 1; } .lg-field--icon .lg-field__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; } .lg-field--icon .lg-input { padding-left: 42px; } /* Badges */ .lg-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 7px; margin: 0; font: 500 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; background: #fff; color: var(--color-black); border: 1px solid var(--color-black); } .lg-badge--drop { background: var(--color-green); border-color: var(--color-green); } .lg-badge--sale { background: var(--color-black); color: var(--color-green); } .lg-badge--new { background: #fff; } .lg-badge--neutral { background: var(--surface-alt); border-color: var(--surface-alt); } .lg-badge--stock { background: var(--color-primary-soft); border-color: var(--color-primary-soft); color: var(--text-accent); } .lg-badge--soldout { background: var(--lg-neutral-200); border-color: var(--lg-neutral-200); color: var(--text-muted); } .lg-badge--dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .lg-count { min-width: 20px; height: 20px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-green); color: var(--color-black); font: 500 11px/1 var(--font-mono); } .lg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .lg-chip, .lg-pill { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid var(--border-default); background: #fff; font-size: 14px; text-decoration: none; white-space: nowrap; } .lg-chip:hover { border-color: var(--color-black); background: var(--lg-green-50); color: inherit; } .lg-pill { font: 600 12px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; } .lg-pill:hover { border-color: var(--color-black); color: inherit; } .lg-pill.is-active { background: var(--color-black); border-color: var(--color-black); color: #fff; } /* Horizontal rail (mobile) */ .lg-rail { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--page-margin) * -1); padding-inline: var(--page-margin); scroll-padding-inline: var(--page-margin); } .lg-rail::-webkit-scrollbar { display: none; } .lg-rail > * { scroll-snap-align: start; flex: none; } .lg-ph { display: block; width: 100%; height: 100%; background: var(--surface-alt) repeating-linear-gradient(0deg, rgba(10,10,10,.06) 0 1px, transparent 1px 24px); } .lg-ph--dark { background: var(--lg-neutral-800) repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 24px); } .lg-bullets { display: flex; flex-direction: column; gap: 10px; } .lg-bullets li { display: flex; gap: 10px; font-size: 14px; } .lg-bullets li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 8px; background: var(--color-green); } .lg-empty { border: 1px dashed var(--border-default); padding: 28px 20px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .lg-empty p:not(.lg-h3) { color: var(--text-muted); max-width: 520px; } /* 4 · HEADER ------------------------------------------------------------- */ .lg-announce { height: var(--announce-h); overflow: hidden; display: flex; align-items: center; background: var(--color-black); color: #fff; } .lg-announce--green { background: var(--color-green); color: var(--color-black); } .lg-announce--light { background: var(--surface-alt); color: var(--color-black); } .lg-announce__track { display: flex; width: max-content; animation: lg-ticker 40s linear infinite; } .lg-announce:hover .lg-announce__track { animation-play-state: paused; } .lg-announce__list { display: flex; } .lg-announce__list li { display: inline-flex; align-items: center; gap: 20px; padding-right: 20px; font: 500 var(--fs-micro)/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; } .lg-announce__list li::after { content: ''; width: 5px; height: 5px; background: var(--color-green); } .lg-announce--green .lg-announce__list li::after { background: var(--color-black); } @keyframes lg-ticker { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .lg-announce__track { animation: none; } } .lg-header { position: sticky; top: 0; z-index: var(--z-header); background: #fff; } .lg-header__bar { height: var(--header-h); display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: 'menu logo actions'; align-items: center; border-bottom: 1px solid var(--border-subtle); } .lg-header__menu { grid-area: menu; margin-left: -10px; } .lg-header__logo { grid-area: logo; display: flex; text-decoration: none; color: var(--color-black); font-size: 20px; } .lg-header__logo:hover { color: var(--color-black); } .lg-header__actions { grid-area: actions; display: flex; justify-content: flex-end; margin-right: -10px; } .lg-header__account, .lg-nav { display: none; } .lg-header.is-scrolled .lg-header__bar { border-bottom-color: var(--color-black); } .lg-logo { display: inline-flex; align-items: baseline; gap: .16em; font: 500 1em/1 var(--font-display); letter-spacing: .01em; text-transform: uppercase; white-space: nowrap; } .lg-mark { width: .72em; height: .72em; flex: none; } .lg-logo__img { height: 22px; width: auto; } .lg-cart-count { position: absolute; top: 6px; right: 4px; min-width: 18px; height: 18px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-green); color: var(--color-black); font: 500 10px/1 var(--font-mono); } .lg-cart-count:empty { display: none; } @media (min-width: 1080px) { .lg-header__bar { grid-template-columns: auto 1fr auto; grid-template-areas: 'logo nav actions'; gap: 24px; } .lg-header__menu { display: none; } .lg-header__logo { font-size: 24px; } .lg-header__account { display: inline-flex; } .lg-nav { display: block; grid-area: nav; height: 100%; } .lg-nav__list { display: flex; justify-content: center; gap: 32px; height: 100%; } .lg-nav__list > li { display: flex; } .lg-nav__list a { display: flex; align-items: center; gap: 6px; height: 100%; border-block: 2px solid transparent; font: 600 13px/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; transition: color var(--dur-fast) var(--ease); } .lg-nav__list .current-menu-item > a, .lg-nav__list .current-menu-ancestor > a { border-bottom-color: var(--color-green); } .lg-nav__list .lg-dot > a::after { content: ''; width: 6px; height: 6px; background: var(--color-green); } } /* 5 · HOME --------------------------------------------------------------- */ .lg-section { padding-block: var(--section-y); } .lg-section--tight-top { padding-top: 0; } .lg-section--trust { padding-block: 0; } .lg-shead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .lg-shead__text { display: flex; flex-direction: column; gap: 8px; } @media (min-width: 720px) { .lg-shead { margin-bottom: 28px; } } /* Hero */ .lg-hero { display: grid; border-bottom: 1px solid var(--border-subtle); } .lg-hero__media { position: relative; aspect-ratio: 4 / 5; background: var(--lg-neutral-800); overflow: hidden; } .lg-hero__media picture, .lg-hero__media img { width: 100%; height: 100%; object-fit: cover; } .lg-hero__tag { position: absolute; top: 16px; left: 16px; background: var(--color-green); color: var(--color-black); padding: 4px 8px; font: 500 var(--fs-micro)/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; } .lg-hero__content { padding: 24px var(--page-margin) 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; } .lg-hero__foot { display: flex; flex-direction: column; gap: 20px; } .lg-hero__text { font-size: 17px; line-height: 1.45; max-width: 420px; color: var(--lg-neutral-800); } .lg-hero__ctas { display: flex; flex-direction: column; gap: 8px; } .lg-hero__product { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; border-top: 1px solid var(--color-black); padding-top: 14px; text-decoration: none; } .lg-hero__product > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .lg-hero__product img { width: 56px; aspect-ratio: 4 / 5; object-fit: cover; background: var(--surface-alt); } .lg-hero__pname { font-weight: 500; } .lg-hero__pprice { font: 600 15px/1.2 var(--font-display); } @media (min-width: 720px) { .lg-hero { grid-template-columns: 1fr 1fr; } .lg-hero__media { aspect-ratio: auto; min-height: 560px; } .lg-hero__content { padding: 32px var(--page-margin); } .lg-hero__ctas { flex-direction: row; flex-wrap: wrap; } } @media (min-width: 1080px) { .lg-hero { grid-template-columns: 1.3fr 1fr; } .lg-hero__media { min-height: min(680px, calc(100svh - 104px)); } .lg-hero__content { padding: 40px; } } /* Collections */ .lg-collection { width: 72%; } .lg-collection a { display: flex; flex-direction: column; gap: 10px; text-decoration: none; } .lg-collection__media { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--lg-neutral-800); } .lg-collection__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); } .lg-collection__row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--color-black); } .lg-collection__name { font: 600 18px/1 var(--font-display); letter-spacing: -.02em; text-transform: uppercase; } .lg-collection__count { display: inline-flex; align-items: center; gap: 8px; font: 500 var(--fs-micro)/1 var(--font-mono); color: var(--text-accent); } .lg-collection__count .lg-icon { color: var(--color-black); transition: transform var(--dur-base) var(--ease); } @media (hover: hover) { .lg-collection a:hover .lg-collection__media img { transform: scale(1.03); } .lg-collection a:hover .lg-collection__count .lg-icon { transform: translate(3px, -3px); } } @media (min-width: 720px) { .lg-collections { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gutter); overflow: visible; margin: 0; padding: 0; } .lg-collection { width: auto; grid-column: span 2; } .lg-collection--wide { grid-column: span 3; } .lg-collection--wide .lg-collection__media { aspect-ratio: 16 / 10; } .lg-collection:not(.lg-collection--wide) .lg-collection__media { aspect-ratio: 4 / 5; } .lg-collection__name { font-size: 22px; } } /* Promo · editorial · newsletter bands */ .lg-promo { background: var(--color-green); color: var(--color-black); padding-block: var(--section-y); } .lg-promo .lg-label { color: var(--color-black); } .lg-promo p { max-width: 380px; } .lg-editorial { background: var(--color-black); color: #fff; padding-block: var(--section-y); } .lg-editorial p { color: var(--lg-neutral-200); max-width: 420px; } .lg-editorial .lg-label--accent { color: var(--color-green); } .lg-editorial__head { margin-bottom: 32px; } .lg-stories { display: grid; gap: var(--gutter); } @media (min-width: 720px) { .lg-stories { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg-editorial__head { margin-bottom: 48px; } } .lg-story { display: flex; flex-direction: column; gap: 12px; color: inherit; text-decoration: none; } .lg-editorial .lg-story, .lg-editorial .lg-story:hover { color: #fff; } .lg-story__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--lg-neutral-800); } @media (min-width: 720px) { .lg-story__media { aspect-ratio: 4 / 5; } } .lg-story__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); } .lg-story__title { font: 600 22px/1.1 var(--font-display); letter-spacing: -.015em; text-wrap: pretty; } .lg-editorial .lg-label { color: var(--lg-neutral-500); } @media (hover: hover) { .lg-story:hover .lg-story__media img { transform: scale(1.03); } .lg-story:hover .lg-story__title { color: var(--color-green); } .lg-stories--light .lg-story:hover .lg-story__title { color: var(--text-accent); } } .lg-stories--light { margin-top: 24px; } .lg-stories--light .lg-story__media { background: var(--surface-alt); } /* Trust strip */ .lg-trust { display: grid; grid-template-columns: 1fr; border-block: 1px solid var(--border-subtle); } .lg-trust__item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; } .lg-trust__item + .lg-trust__item { border-top: 1px solid var(--border-subtle); } .lg-trust__text { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--text-muted); } .lg-trust__text strong { font-size: 14px; font-weight: 600; color: var(--text); } @media (min-width: 720px) { .lg-trust--row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg-trust--row .lg-trust__item { padding: 20px 24px 20px 0; border-top: 0 !important; } } @media (min-width: 1080px) { .lg-trust--row { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; } .lg-trust--row .lg-trust__item { padding: 20px 24px; } .lg-trust--row .lg-trust__item + .lg-trust__item { border-left: 1px solid var(--border-subtle); } .lg-trust--row .lg-trust__item:first-child { padding-left: 0; } } .lg-trust--compact .lg-trust__item { align-items: center; padding: 10px 0; } .lg-trust--compact .lg-trust__text { flex-direction: row; flex-wrap: wrap; gap: 0 8px; } /* Social */ .lg-social { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } @media (min-width: 720px) { .lg-social { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .lg-social__item { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface-alt); } .lg-social__item img { width: 100%; height: 100%; object-fit: cover; } .lg-social__handle { position: absolute; left: 0; bottom: 0; background: #fff; padding: 4px 8px; font: 500 10px/1.2 var(--font-mono); letter-spacing: .08em; } /* Newsletter */ .lg-newsletter { background: var(--surface-alt); padding-block: var(--section-y); } .lg-nl-form { display: flex; flex-direction: column; gap: 8px; width: 100%; } @media (min-width: 720px) { .lg-nl-form { flex-direction: row; } } /* 6 · PRODUCT CARD + GRID ------------------------------------------------ */ ul.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px var(--gutter); margin: 0; padding: 0; } ul.products::before, ul.products::after { display: none !important; } @media (min-width: 720px) { ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px var(--gutter); } } @media (min-width: 1080px) { ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* 3-up on tablet home rails shows 3, hide the 4th to keep rows full */ @media (min-width: 720px) and (max-width: 1079px) { .lg-home ul.products.columns-4 > li:nth-child(n+4) { display: none; } } /* Mobile swipe rail variant (Novidades) */ @media (max-width: 719px) { .lg-rail-scroll ul.products { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--page-margin) * -1); padding-inline: var(--page-margin); scroll-padding-inline: var(--page-margin); } .lg-rail-scroll ul.products::-webkit-scrollbar { display: none; } .lg-rail-scroll ul.products > li { flex: 0 0 46%; scroll-snap-align: start; } } .lg-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0 !important; width: auto !important; float: none !important; } .lg-card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface-alt); } .lg-card__imglink { position: absolute; inset: 0; display: block; } .lg-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); } .lg-card__img--hover { opacity: 0; } .lg-card.outofstock .lg-card__img { opacity: .55; } .lg-card__media > .lg-badge { position: absolute; top: 10px; left: 10px; pointer-events: none; } .lg-card__body { display: flex; flex-direction: column; gap: 4px; } .lg-card__title { font: 500 15px/1.3 var(--font-body); letter-spacing: 0; } .lg-card__title a { text-decoration: none; } .lg-card__title a::after { content: ''; position: absolute; inset: 0; } /* whole card is the link on touch */ .lg-card { position: relative; } .lg-card__price { margin-top: 4px; } .lg-installments { font-size: var(--fs-small); color: var(--text-muted); } .lg-installments .amount { font-weight: 400; } /* Prices (native WooCommerce markup) */ .price { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; font: 600 16px/1.2 var(--font-display); color: var(--text); } .price del { order: 2; font: 400 13px/1 var(--font-body); color: var(--text-muted); } .price ins { text-decoration: none; color: var(--text-accent); } .lg-pix { font-size: var(--fs-small); color: var(--text-accent); } /* Quick add — desktop pointer devices only */ .lg-quick { display: none; } @media (hover: hover) and (pointer: fine) { .lg-card:hover .lg-card__img--hover { opacity: 1; } .lg-card:hover .lg-card__img:not(.lg-card__img--hover) { transform: scale(1.02); } .lg-card:hover .lg-card__title a { text-decoration: underline; } .lg-quick { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; background: #fff; border-top: 1px solid var(--color-black); transform: translateY(101%); transition: transform 220ms var(--ease); } .lg-card:hover .lg-quick, .lg-quick:focus-within, .lg-quick.is-added { transform: translateY(0); } .lg-quick__btn { flex: 1; height: 40px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; font: 500 12px/1 var(--font-mono); text-decoration: none; color: var(--color-black); } .lg-quick__btn + .lg-quick__btn { border-left: 1px solid var(--border-subtle); } .lg-quick__btn:hover { background: var(--color-green); color: var(--color-black); } .lg-quick__btn[disabled] { color: var(--lg-neutral-300); text-decoration: line-through; pointer-events: none; } .lg-quick__btn--single { font: 600 12px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; } .lg-quick.is-added { background: var(--color-green); } .lg-quick.is-loading { opacity: .6; pointer-events: none; } .lg-card .added_to_cart { display: none; } } /* 7 · ARCHIVE + FILTERS -------------------------------------------------- */ .lg-crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; font: 500 var(--fs-micro)/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); } .lg-crumbs a { color: var(--text-muted); text-decoration: none; } .lg-crumbs a:hover { color: var(--text); } .lg-archive__head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; } .lg-archive__head .term-description, .lg-archive__head .page-description { color: var(--text-muted); max-width: 560px; } .lg-archive__count { font: 500 12px/1 var(--font-mono); letter-spacing: .06em; color: var(--text-accent); vertical-align: top; font-variation-settings: normal; } .lg-pills { margin-bottom: 16px; } .lg-archive__toggle { position: sticky; top: calc(var(--header-h) + var(--announce-h)); z-index: var(--z-sticky); background: #fff; padding-block: 8px; margin-bottom: 12px; } .lg-archive__toolbar { display: none; } .lg-archive__main { min-width: 0; } .lg-filters { position: fixed; z-index: var(--z-overlay); left: 0; right: 0; bottom: 0; max-height: 88svh; display: flex; flex-direction: column; background: #fff; box-shadow: var(--shadow-overlay); transform: translateY(105%); visibility: hidden; transition: transform var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow); } .lg-filters.is-open { transform: none; visibility: visible; transition: transform var(--dur-slow) var(--ease); } .lg-filters__head { height: 60px; flex: none; display: flex; justify-content: space-between; align-items: center; padding: 0 8px 0 16px; border-bottom: 1px solid var(--color-black); } .lg-filters__form { display: flex; flex-direction: column; min-height: 0; flex: 1; } .lg-filters__scroll { overflow-y: auto; padding: 0 16px; flex: 1; overscroll-behavior: contain; } .lg-filters__foot { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-subtle); } .lg-fgroup { border: 0; margin: 0; padding: 16px 0; border-bottom: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 12px; min-width: 0; } .lg-fgroup legend { padding: 0; margin-bottom: 12px; float: left; width: 100%; color: var(--text); } .lg-fgroup > .lg-label { color: var(--text); } .lg-fchecks { display: flex; flex-direction: column; gap: 14px; clear: both; } .lg-fgroup--sort { gap: 14px; } .lg-check { display: flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; min-height: 22px; } .lg-check input { appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border: 1px solid var(--border-default); background: #fff; display: grid; place-content: center; } .lg-check input:checked { background: var(--color-black); border-color: var(--color-black); } .lg-check input:checked::after { content: ''; width: 10px; height: 6px; border: 2px solid var(--color-green); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); } .lg-check--radio input { border-radius: 50%; } .lg-check--radio input:checked { background: #fff; } .lg-check--radio input:checked::after { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--color-black); transform: none; } .lg-check em { font-style: normal; color: var(--text-muted); font-size: 13px; } .lg-fchips { display: flex; flex-wrap: wrap; gap: 6px; clear: both; } .lg-fchip input { position: absolute; opacity: 0; pointer-events: none; } .lg-fchip span { min-width: 48px; height: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-default); font: 500 13px/1 var(--font-mono); cursor: pointer; } .lg-fchip input:checked + span { background: var(--color-black); border-color: var(--color-black); color: #fff; } .lg-fchip input:focus-visible + span { outline: 2px solid var(--color-green); outline-offset: 2px; } .lg-flinks { display: flex; flex-direction: column; gap: 10px; } .lg-flinks a { display: flex; justify-content: space-between; text-decoration: none; font-size: 15px; } .lg-flinks a span { font: 500 11px/1.6 var(--font-mono); color: var(--text-muted); } .lg-flinks a.is-active { font-weight: 600; box-shadow: inset 3px 0 0 var(--color-green); padding-left: 10px; } @media (min-width: 1080px) { .lg-archive { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; } .lg-archive__toggle { display: none; } .lg-filters { position: sticky; top: calc(var(--header-h) + var(--announce-h) + 16px); z-index: 1; max-height: calc(100svh - var(--header-h) - var(--announce-h) - 32px); transform: none; visibility: visible; box-shadow: none; border-top: 1px solid var(--color-black); background: transparent; transition: none; } .lg-filters__head, .lg-fgroup--sort { display: none; } .lg-filters__scroll { padding: 0; scrollbar-width: thin; } .lg-filters__foot { grid-template-columns: 1fr 1fr; padding: 16px 0 0; border: 0; } .lg-js .lg-filters__foot { grid-template-columns: 1fr; } .lg-js .lg-filters__foot .lg-btn--primary { display: none; } .lg-archive__toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 12px; margin-bottom: 20px; border-top: 1px solid var(--color-black); } .lg-archive__toolbar .woocommerce-ordering { margin: 0; } .lg-archive__toolbar select { width: 220px; min-height: 44px; } .lg-archive ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .woocommerce-pagination { margin-top: 48px; } .woocommerce-pagination ul { display: flex; gap: 4px; justify-content: center; border: 0 !important; } .woocommerce-pagination li { border: 0 !important; } .woocommerce-pagination a, .woocommerce-pagination span { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-default); font: 500 13px/1 var(--font-mono); text-decoration: none; } .woocommerce-pagination .current { background: var(--color-black); border-color: var(--color-black); color: #fff; } /* 8 · PRODUCT PAGE ------------------------------------------------------- */ .single-product .lg-main { padding-top: 12px; } .lg-pdp__grid { display: grid; gap: 20px; align-items: start; } @media (min-width: 720px) { .lg-pdp__grid { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (min-width: 1080px) { .lg-pdp__grid { grid-template-columns: 1.35fr 1fr; gap: 56px; } } .lg-gallery { position: relative; min-width: 0; margin-inline: calc(var(--page-margin) * -1); } .lg-gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .lg-gallery__track::-webkit-scrollbar { display: none; } .lg-gallery__item { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 4 / 5; background: var(--surface-alt); } .lg-gallery__item img { width: 100%; height: 100%; object-fit: cover; } .lg-gallery > .lg-badge { position: absolute; top: 12px; left: 12px; } .lg-gallery__count { position: absolute; top: 12px; right: 12px; background: #fff; padding: 4px 8px; font: 500 11px/1 var(--font-mono); letter-spacing: .08em; } .lg-gallery__dots { display: flex; gap: 4px; padding: 10px var(--page-margin) 0; } .lg-gallery__dots span { flex: 1; height: 2px; background: var(--border-subtle); transition: background var(--dur-base) var(--ease); } .lg-gallery__dots span.is-active { background: var(--color-black); } @media (min-width: 720px) { .lg-gallery { margin: 0; } .lg-gallery__track { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow: visible; } .lg-gallery__item:first-child { grid-column: 1 / -1; } .lg-gallery__count, .lg-gallery__dots { display: none; } } @media (min-width: 1080px) { .lg-gallery__item:first-child { grid-column: auto; } } .lg-pdp__summary { display: flex; flex-direction: column; gap: 18px; min-width: 0; } @media (min-width: 720px) { .lg-pdp__summary { position: sticky; top: calc(var(--header-h) + var(--announce-h) + 24px); } } .lg-pdp__eyebrow { display: flex; justify-content: space-between; gap: 12px; } .product_title { font-size: clamp(28px, 3.4vw, 40px); line-height: 1; letter-spacing: -.03em; text-wrap: balance; } .lg-pdp__summary > .price { font-size: 28px; } .lg-pdp__summary > .price del { font-size: 15px; } .lg-pdp__price-extra { display: flex; flex-direction: column; gap: 2px; margin-top: -10px; } .lg-pdp__stock { align-self: flex-start; } /* Variations + size buttons */ .variations_form .variations { width: 100%; border: 0; margin: 0 0 8px; border-collapse: collapse; } .variations_form .variations th, .variations_form .variations td { display: block; padding: 0; text-align: left; } .variations_form .variations th.label { display: none; } .variations_form .variations select { width: 100%; min-height: 48px; border: 1px solid var(--border-default); border-radius: var(--radius-xs); padding: 0 12px; background: #fff; } .lg-js .variations_form .variations select.lg-enhanced { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; } .reset_variations { display: none !important; } .lg-size-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; } .lg-size-head .lg-label { color: var(--text); } .lg-size-head.is-error .lg-label { color: var(--error); } .lg-size-guide-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border: 0; background: none; font: 500 var(--fs-micro)/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; } .lg-size-guide-btn:hover { color: var(--text-accent); } .lg-sizes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; } .lg-size { position: relative; height: 48px; border: 1px solid var(--border-default); background: #fff; font: 500 14px/1 var(--font-mono); transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .lg-size:hover { border-color: var(--color-black); } .lg-size[aria-pressed="true"] { background: var(--color-black); border-color: var(--color-black); color: #fff; box-shadow: inset 0 -3px 0 var(--color-green); } .lg-size[aria-disabled="true"] { color: var(--lg-neutral-300); background: var(--surface-alt); border-color: var(--surface-alt); text-decoration: line-through; cursor: not-allowed; } .single_variation_wrap .woocommerce-variation { margin: 8px 0; font-size: var(--fs-small); } .woocommerce-variation-price { display: none; } .woocommerce-variation-availability .stock { margin: 0; font-size: var(--fs-small); color: var(--text-accent); } .woocommerce-variation-availability .out-of-stock { color: var(--error); } .lg-pdp form.cart { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; } .lg-pdp form.variations_form { display: block; } .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: 8px; } .quantity { display: inline-flex; align-items: stretch; height: 56px; border: 1px solid var(--color-black); flex: none; } .quantity .qty { width: 44px; border: 0; text-align: center; font: 500 15px/1 var(--font-mono); -moz-appearance: textfield; background: transparent; } .quantity .qty::-webkit-outer-spin-button, .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .lg-step { width: 40px; border: 0; background: none; display: inline-flex; align-items: center; justify-content: center; } .lg-step:hover { background: var(--lg-green-50); } .single_add_to_cart_button { flex: 1; min-height: 56px; padding: 0 20px; border: 0; background: var(--color-green); color: var(--color-black); font: 600 14px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease); } .single_add_to_cart_button:hover { background: var(--color-black); color: var(--color-green); } .single_add_to_cart_button.disabled { opacity: 1; } /* WC marks it disabled until a size is picked; we guide instead */ .single_add_to_cart_button.is-loading { opacity: .6; pointer-events: none; } .lg-buy-now { flex-basis: 100%; } .lg-pdp__trust { display: flex; flex-direction: column; gap: 14px; } .lg-paychips { display: flex; flex-wrap: wrap; gap: 6px; } .lg-paychips li { font: 500 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--border-default); padding: 5px 8px; } .lg-acc { border-top: 1px solid var(--color-black); } .lg-acc__item { border-bottom: 1px solid var(--border-subtle); } .lg-acc__item summary { min-height: 52px; display: flex; justify-content: space-between; align-items: center; gap: 12px; list-style: none; cursor: pointer; font: 600 13px/1.2 var(--font-display); letter-spacing: .06em; text-transform: uppercase; } .lg-acc__item summary::-webkit-details-marker { display: none; } .lg-acc__item summary:hover { color: var(--text-accent); } .lg-acc__icon { position: relative; width: 14px; height: 14px; flex: none; } .lg-acc__icon::before, .lg-acc__icon::after { content: ''; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; background: currentColor; transition: transform var(--dur-base) var(--ease); } .lg-acc__icon::after { transform: rotate(90deg); } .lg-acc__item[open] .lg-acc__icon::after { transform: rotate(0); } .lg-acc__body { padding: 0 0 18px; font-size: 14px; display: flex; flex-direction: column; gap: 12px; } .lg-acc__body p { margin: 0; } .lg-faq { margin: 0; display: flex; flex-direction: column; gap: 4px; } .lg-faq dt { font-weight: 600; margin-top: 8px; } .lg-faq dd { margin: 0; color: var(--text-muted); } .woocommerce-product-attributes { width: 100%; border-collapse: collapse; font-size: 14px; } .woocommerce-product-attributes th, .woocommerce-product-attributes td { text-align: left; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); font-weight: 400; } .woocommerce-product-attributes th { font: 500 var(--fs-micro)/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); width: 40%; } .woocommerce-product-attributes td p { margin: 0; } .lg-size-table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--color-black); font-size: 14px; } .lg-size-table th, .lg-size-table td { text-align: left; padding: 12px 8px 12px 0; border-bottom: 1px solid var(--border-subtle); } .lg-size-table thead th { font: 500 10px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); } .lg-size-table tbody th { font: 600 14px/1 var(--font-mono); } .related.products, .upsells.products { padding-top: var(--section-y); } .related.products > h2, .upsells.products > h2 { font-size: var(--fs-h2); line-height: 1; letter-spacing: -.03em; text-transform: uppercase; margin-bottom: 20px; } .lg-sticky-cta { position: fixed; z-index: var(--z-sticky); left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--color-black); transform: translateY(105%); transition: transform var(--dur-base) var(--ease); } .lg-sticky-cta.is-visible { transform: none; } .lg-sticky-cta__row { display: flex; align-items: center; gap: 12px; } .lg-sticky-cta__price { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .lg-sticky-cta__price strong { font: 600 18px/1.1 var(--font-display); } .lg-sticky-cta__error { color: var(--error); } @media (min-width: 720px) { .lg-sticky-cta { display: none !important; } } /* 9 · OVERLAYS (drawers, search, modal) ---------------------------------- */ .lg-scrim { position: fixed; inset: 0; z-index: var(--z-scrim); background: rgba(10, 10, 10, .4); opacity: 0; transition: opacity 240ms var(--ease); } .lg-scrim.is-open { opacity: 1; } .lg-drawer { position: fixed; z-index: var(--z-overlay); top: 0; bottom: 0; width: 100%; display: flex; flex-direction: column; background: #fff; box-shadow: var(--shadow-overlay); transition: transform var(--dur-slow) var(--ease); } .lg-drawer[hidden] { display: flex; visibility: hidden; } .lg-drawer--right { right: 0; transform: translateX(105%); } .lg-drawer--left { left: 0; width: 86%; max-width: 380px; transform: translateX(-105%); } .lg-drawer.is-open { transform: none; visibility: visible; } @media (min-width: 720px) { .lg-drawer--right { width: 420px; } } .lg-drawer__head { height: 64px; flex: none; display: flex; justify-content: space-between; align-items: center; padding: 0 8px 0 20px; border-bottom: 1px solid var(--border-subtle); } .lg-drawer--left .lg-drawer__head { padding-left: 16px; font-size: 20px; } .lg-drawer__title { font: 600 18px/1 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; } .lg-drawer__body { display: flex; flex-direction: column; flex: 1; min-height: 0; } .lg-drawer__scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px; } .lg-drawer__foot { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--color-black); } .lg-drawer--left .lg-drawer__foot { border-top-color: var(--border-subtle); padding-inline: 16px; } .lg-mnav { padding: 8px 16px; } .lg-mnav__list > li > a { min-height: 64px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-subtle); font: 600 28px/1 var(--font-display); letter-spacing: -.02em; text-transform: uppercase; text-decoration: none; } .lg-mnav__list > li > a:hover { background: var(--lg-green-50); color: inherit; } .lg-mnav__list .sub-menu { padding: 8px 0 12px; } .lg-mnav__list .sub-menu a { display: block; padding: 8px 0; font-size: 15px; text-decoration: none; } .lg-mnav__list .sub-menu .lg-icon { display: none; } .lg-mnav__secondary { padding: 24px 0; display: flex; flex-direction: column; } .lg-mnav__secondary a { display: block; padding: 10px 0; text-decoration: none; } .lg-cart-empty { padding: 48px 0; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; } .lg-ship { flex: none; padding: 14px 20px; background: var(--surface-alt); display: flex; flex-direction: column; gap: 8px; font-size: 14px; } .lg-progress { height: 4px; background: var(--border-subtle); } .lg-progress span { display: block; height: 100%; background: var(--color-green); transition: width var(--dur-slow) var(--ease); } .lg-line { display: grid; grid-template-columns: 76px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border-subtle); } .lg-line__img { display: block; aspect-ratio: 4 / 5; background: var(--surface-alt); } .lg-line__img img { width: 100%; height: 100%; object-fit: cover; } .lg-line__info { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .lg-line__top { display: flex; justify-content: space-between; gap: 8px; } .lg-line__total { font: 600 15px/1.2 var(--font-display); white-space: nowrap; } .lg-line__name { font-size: 14px; font-weight: 500; text-decoration: none; } .lg-line__meta { font-size: 13px; color: var(--text-muted); } .lg-line__actions { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; } .lg-line__remove { font-size: 13px; padding: 8px 0; } .lg-stepper { display: inline-flex; align-items: center; border: 1px solid var(--color-black); } .lg-stepper button { width: 32px; height: 32px; border: 0; background: none; display: inline-flex; align-items: center; justify-content: center; } .lg-stepper button:hover { background: var(--lg-green-50); } .lg-stepper button[disabled] { color: var(--lg-neutral-300); pointer-events: none; } .lg-stepper span { min-width: 28px; text-align: center; font: 500 13px/1 var(--font-mono); } .lg-drawer__body.is-loading { opacity: .6; pointer-events: none; } .lg-subtotal { display: flex; justify-content: space-between; align-items: baseline; } .lg-subtotal .lg-label { color: var(--text); } .lg-subtotal strong { font: 600 22px/1 var(--font-display); } .lg-subtotal__note { font-size: 13px; color: var(--text-muted); margin-top: -4px; } .lg-search { position: fixed; z-index: var(--z-overlay); top: 0; left: 0; right: 0; max-height: 88svh; display: flex; flex-direction: column; background: #fff; box-shadow: var(--shadow-overlay); transform: translateY(-105%); transition: transform 280ms var(--ease); } .lg-search[hidden] { display: flex; visibility: hidden; } .lg-search.is-open { transform: none; visibility: visible; } .lg-search__bar { display: flex; gap: 8px; align-items: center; padding-block: 12px; max-width: 960px; border-bottom: 1px solid var(--border-subtle); } .lg-search__body { max-width: 960px; overflow-y: auto; padding-block: 16px 24px; display: flex; flex-direction: column; gap: 18px; } .lg-search__results { display: flex; flex-direction: column; gap: 16px; } .lg-search__results:empty { display: none; } .lg-sr-list { display: grid; gap: 0 24px; } @media (min-width: 720px) { .lg-sr-list { grid-template-columns: 1fr 1fr; } } .lg-sr { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); text-decoration: none; } .lg-sr:hover, .lg-sr[aria-selected="true"] { background: var(--lg-green-50); color: inherit; } .lg-sr img { width: 52px; aspect-ratio: 4 / 5; object-fit: cover; background: var(--surface-alt); } .lg-sr__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .lg-sr__name { font-size: 15px; font-weight: 500; } .lg-sr__price { font: 600 14px/1.2 var(--font-display); } .lg-sr-terms { display: flex; flex-wrap: wrap; gap: 6px; } .lg-sr-term { height: 36px; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--color-black); font: 600 12px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; } .lg-sr-term span { font: 500 10px/1 var(--font-mono); color: var(--text-muted); } .lg-sr-term:hover { background: var(--color-green); color: var(--color-black); } .lg-modal { width: 100%; max-width: 560px; max-height: 90svh; margin: auto auto 0; padding: 0; border: 0; box-shadow: var(--shadow-overlay); } .lg-modal::backdrop { background: rgba(10, 10, 10, .4); } @media (min-width: 720px) { .lg-modal { margin: auto; } } .lg-modal__head { height: 60px; display: flex; justify-content: space-between; align-items: center; padding: 0 8px 0 20px; border-bottom: 1px solid var(--color-black); } .lg-modal__body { padding: 20px; display: flex; flex-direction: column; gap: 16px; } /* 10 · FOOTER ------------------------------------------------------------ */ .lg-footer { background: var(--color-black); color: #fff; padding-block: 40px 24px; } .lg-footer a { color: #fff; text-decoration: none; } .lg-footer a:hover { color: var(--color-green); } .lg-footer .lg-container { display: flex; flex-direction: column; gap: 40px; } .lg-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; } .lg-footer__brand { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 16px; } .lg-footer__logo { font-size: 26px; display: inline-flex; } .lg-footer__brand p { color: var(--lg-neutral-300); font-size: 14px; max-width: 280px; } .lg-footer__social { display: flex; gap: 4px; margin-left: -10px; } .lg-footer__social .lg-iconbtn:hover { background: var(--lg-neutral-800); } .lg-footer__col { display: flex; flex-direction: column; gap: 12px; } .lg-footer__col .lg-label { color: var(--color-green); font-size: 10px; } .lg-footer__col ul { display: flex; flex-direction: column; gap: 6px; } .lg-footer__col a { font-size: 14px; display: inline-block; padding: 3px 0; } .lg-footer__trust { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; padding-top: 24px; border-top: 1px solid var(--lg-neutral-800); } .lg-footer__trust > div { display: flex; flex-direction: column; gap: 10px; } .lg-footer__trust .lg-label { color: var(--lg-neutral-500); font-size: 10px; } .lg-footer .lg-paychips li { border-color: var(--lg-neutral-600); } .lg-footer__secure { display: flex; align-items: center; gap: 10px; max-width: 380px; font-size: 13px; color: var(--lg-neutral-300); } .lg-footer__secure .lg-icon { color: var(--color-green); flex: none; } .lg-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--lg-neutral-500); } .lg-footer__legal-links { display: flex; flex-wrap: wrap; gap: 16px; } .lg-footer__legal a { color: var(--lg-neutral-500); text-decoration: underline; } @media (min-width: 720px) { .lg-footer { padding-block: 64px 32px; } .lg-footer__cols { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); } .lg-footer__brand { grid-column: auto; } } /* Editorial article + pages */ .lg-article__head { display: flex; flex-direction: column; gap: 16px; padding-block: 24px 32px; max-width: 1000px; } .lg-article__lede { font-size: 18px; max-width: 640px; color: var(--lg-neutral-800); } .lg-article__hero { margin: 0 0 40px; } .lg-article__hero img { width: 100%; max-height: 80svh; object-fit: cover; } .lg-prose { max-width: 720px; font-size: 17px; line-height: 1.6; } .lg-prose > * + * { margin-top: 1em; } .lg-prose h2 { font-size: 28px; margin-top: 1.6em; } .lg-prose h3 { font-size: 22px; margin-top: 1.4em; } .lg-prose ul { list-style: square; padding-left: 1.2em; } .lg-prose blockquote { margin: 1.5em 0; padding-left: 20px; border-left: 2px solid var(--color-black); font: 600 22px/1.25 var(--font-display); } .lg-page { display: flex; flex-direction: column; gap: 32px; } .lg-page--wc .lg-prose { max-width: none; font-size: 15px; } .lg-404 { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; padding-block: 64px 96px; } .lg-searchform { display: flex; gap: 8px; } /* 11 · WOOCOMMERCE DEFAULTS (notices, account, cart, checkout) ----------- */ .woocommerce-notices-wrapper:empty { display: none; } .woocommerce-message, .woocommerce-info, .woocommerce-error { list-style: none; margin: 0 0 20px; padding: 14px 16px; border: 0 !important; border-left: 0; background: var(--color-primary-soft); color: var(--text); font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none !important; } .woocommerce-error { background: var(--lg-red-50); } .woocommerce-info { background: var(--surface-alt); } .woocommerce-message .button, .woocommerce-info .button { order: 2; } .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .wc-block-components-button:not(.is-link) { border-radius: 0 !important; background: var(--color-black) !important; color: #fff !important; font: 600 13px/1 var(--font-display) !important; letter-spacing: .06em; text-transform: uppercase; padding: 16px 22px !important; border: 0 !important; } .woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--color-green) !important; color: var(--color-black) !important; } .woocommerce a.button.alt, .woocommerce button.button.alt, #place_order, .wc-block-components-checkout-place-order-button, .checkout-button { background: var(--color-green) !important; color: var(--color-black) !important; } .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, #place_order:hover { background: var(--color-black) !important; color: var(--color-green) !important; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .select2-container .select2-selection { border: 1px solid var(--border-default) !important; border-radius: var(--radius-xs) !important; min-height: 48px; padding: 0 12px; font-size: 16px; } .woocommerce form .form-row label { font: 500 var(--fs-micro)/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; } /* 12 · SOFT CORNERS (slight rounding) ------------------------------------ */ :root { --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; } .lg-btn, .lg-iconbtn, .lg-input, .lg-chip, .lg-pill, .lg-fchip span, .lg-size, .lg-stepper, .quantity, .single_add_to_cart_button, .lg-quick__btn, .woocommerce-pagination a, .woocommerce-pagination span, .woocommerce-ordering select, .variations_form .variations select, .lg-sr-term { border-radius: var(--radius-md); } .lg-badge, .lg-count, .lg-cart-count, .lg-paychips li, .lg-hero__tag { border-radius: var(--radius-sm); } .lg-card__media, .lg-collection__media, .lg-story__media, .lg-social__item, .lg-gallery__item, .lg-line__img, .lg-sr img, .lg-hero__product img, .lg-empty, .lg-modal { border-radius: var(--radius-lg); overflow: hidden; } .lg-quick { border-radius: 0 0 var(--radius-lg) var(--radius-lg); } /* 13 · GOAT FOOTBALL IDENTITY --------------------------------------------- Royal blue #D00012 · Red #D00012 · Navy #7A000E. Poppins 800 italic headings. */ :root { --goat-blue: #D00012; --goat-red: #D00012; --goat-navy: #7A000E; --goat-tint: #FDECEE; --lg-green-50: var(--goat-tint); --lg-green-100: #FADADD; --lg-green-500: var(--goat-blue); --lg-green-700: var(--goat-blue); --color-primary: var(--goat-blue); --color-green: var(--goat-blue); --color-primary-dark: var(--goat-blue); --color-primary-soft: #FADADD; --text-accent: var(--goat-blue); --surface-alt: #F2F1EC; } .lg-display, .lg-h2, .related.products > h2, .upsells.products > h2 { font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: -.01em; } .lg-btn--primary, .single_add_to_cart_button { background: var(--goat-blue); color: #fff; } .lg-btn--primary:hover, .single_add_to_cart_button:hover { background: var(--goat-red); color: #fff; } .lg-btn--secondary:hover, .lg-btn--inverse:hover { background: var(--goat-blue); color: #fff; } .lg-badge--drop { background: var(--goat-blue); border-color: var(--goat-blue); color: #fff; } .lg-badge--sale { background: var(--goat-red); border-color: var(--goat-red); color: #fff; } .lg-badge--stock { background: #FADADD; border-color: #FADADD; color: var(--goat-blue); } .lg-count, .lg-cart-count { background: var(--goat-blue); color: #fff; } .price ins, .lg-card .price ins { color: var(--goat-red); } .lg-announce, .lg-footer, .lg-editorial { background: var(--goat-navy); } .lg-announce__list li::after { background: var(--goat-red); } .lg-promo { background: var(--goat-blue); color: #fff; } .lg-promo .lg-label, .lg-promo p { color: #fff; } .lg-footer__col .lg-label, .lg-editorial .lg-label--accent { color: #fff; } .lg-footer a:hover, .lg-editorial .lg-story:hover .lg-story__title { color: #9DB4EA; } .lg-footer__trust, .lg-footer .lg-paychips li { border-color: rgba(255,255,255,.18); } .lg-quick__btn:hover, .lg-quick.is-added { background: var(--goat-blue); color: #fff; } .lg-size[aria-pressed="true"] { box-shadow: inset 0 -3px 0 var(--goat-red); } .lg-check input:checked::after { border-color: #fff; } .lg-progress span { background: var(--goat-blue); } .lg-logo__img { height: 30px; width: auto; } .lg-footer__logo .lg-logo__img { height: 44px; } .lg-drawer--left .lg-drawer__head .lg-logo__img { height: 28px; } @media (min-width: 1080px) { .lg-header__logo .lg-logo__img { height: 40px; } } /* Mega menu: any top-level menu item with children opens a full-width panel */ @media (min-width: 1080px) { .lg-header { position: sticky; } .lg-nav__list > li.menu-item-has-children > a::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 4px; } .lg-nav__list .sub-menu { position: absolute; left: 0; right: 0; top: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 24px; padding: 28px var(--page-margin) 32px; background: #fff; border-bottom: 1px solid var(--color-black); box-shadow: var(--shadow-overlay); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), visibility 0s linear var(--dur-base); z-index: 5; } .lg-nav__list > li:hover > .sub-menu, .lg-nav__list > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); } .lg-nav__list .sub-menu a { height: auto; border: 0; padding: 6px 0; font: 500 14px/1.3 var(--font-body); text-transform: none; letter-spacing: 0; } .lg-nav__list .sub-menu a:hover { color: var(--goat-blue); text-decoration: underline; } } /* Name & number */ .lg-pers { flex-basis: 100%; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 0 14px; } .lg-pers summary { min-height: 60px; display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; list-style: none; } .lg-pers summary::-webkit-details-marker { display: none; } .lg-pers__title { display: flex; flex-direction: column; gap: 2px; } .lg-pers__title strong { font-size: 14px; } .lg-pers__title em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--goat-blue); } .lg-pers__add { position: relative; width: 14px; height: 14px; } .lg-pers__add::before, .lg-pers__add::after { content: ''; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; background: currentColor; } .lg-pers__add::after { transform: rotate(90deg); transition: transform var(--dur-base) var(--ease); } .lg-pers[open] .lg-pers__add::after { transform: none; } .lg-pers__fields { display: grid; grid-template-columns: 1fr 96px; gap: 10px; padding: 0 0 14px; } .lg-pers__fields label { display: flex; flex-direction: column; gap: 6px; } .lg-pers__fields .lg-label { color: var(--text); } .lg-pers__fields .lg-muted { grid-column: 1 / -1; } .lg-pers__fields input[name="lg_name"] { text-transform: uppercase; } /* Home FAQ */ .lg-faq-home { display: grid; gap: 24px; } @media (min-width: 720px) { .lg-faq-home { grid-template-columns: 1fr 1.6fr; gap: 56px; } } /* Hero = full-width banner only · taller header */ .lg-hero { display: block; } .lg-hero__media { display: block; aspect-ratio: 4 / 5; } @media (min-width: 720px) { .lg-hero__media { aspect-ratio: 16 / 7; min-height: 0; } } :root { --header-h: 68px; } .lg-header__logo .lg-logo__img { height: 40px; } @media (min-width: 720px) { :root { --header-h: 84px; } } @media (min-width: 1080px) { :root { --header-h: 92px; } .lg-header__logo .lg-logo__img { height: 56px; } .lg-nav__list a { font-size: 15px; } .lg-nav__list { gap: 36px; } } /* 13 · PDP v3: price, single-row sizes, no qty, blue/red CTAs, patches, Stripe */ .lg-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 0; } .lg-price__now { font: 800 36px/1 var(--font-display); letter-spacing: -.01em; color: var(--goat-blue); } .lg-price__was { font-size: 16px; color: var(--text-muted); } .lg-price__off { align-self: center; padding: 4px 8px; border-radius: var(--radius-sm); background: var(--goat-red); color: #fff; font: 700 13px/1 var(--font-display); } @media (min-width: 1024px) { .lg-price__now { font-size: 42px; } } @media (max-width: 480px) { .lg-size { font-size: 12px; } .lg-sizes { gap: 4px; } } .lg-pdp .quantity, .lg-qty-hidden { display: none !important; } .lg-buy-now { background: var(--goat-red); border-color: var(--goat-red); color: #fff; } .lg-buy-now:hover { background: var(--color-black); border-color: var(--color-black); color: #fff; } .lg-pers summary { gap: 12px; } .lg-pers__title { min-width: 0; } .lg-pers__title strong { font-weight: 800; letter-spacing: .02em; } .lg-pers__btn { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--color-black); border-radius: var(--radius-sm); font: 700 12px/1 var(--font-display); text-transform: uppercase; letter-spacing: .04em; } .lg-pers__add { width: 10px; height: 10px; } .lg-pers__add::before, .lg-pers__add::after { width: 10px; top: 4px; } @media (max-width: 480px) { .lg-pers__fields { grid-template-columns: minmax(0, 1fr) 72px; } } .lg-patches__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .lg-patch { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border: 1px solid var(--border-default); border-radius: var(--radius-md); cursor: pointer; text-align: center; } .lg-patch input { position: absolute; opacity: 0; pointer-events: none; } .lg-patch__img { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--surface-alt); border-radius: var(--radius-sm); overflow: hidden; } .lg-patch__img img { width: 100%; height: 100%; object-fit: contain; } .lg-patch__name { font-size: 12px; line-height: 1.25; } .lg-patch:has(input:checked) { border-color: var(--goat-blue); box-shadow: inset 0 0 0 1px var(--goat-blue); } .lg-patch:has(input:focus-visible) { outline: 2px solid var(--goat-blue); outline-offset: 2px; } .lg-patches__note { padding: 10px 0 14px; font-size: 12px; } .lg-stripe { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--surface-alt); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); } .lg-stripe img { flex: none; width: 64px; height: 30px; object-fit: contain; } .lg-stripe div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .lg-stripe strong { font: 800 14px/1.2 var(--font-display); text-transform: uppercase; } .lg-stripe span { font-size: 14px; line-height: 1.4; color: var(--text-muted); } .lg-paycards { display: flex; flex-wrap: wrap; gap: 6px; } .lg-paycards img { display: block; width: 46px; height: 30px; } .lg-promo-alert { flex-basis: 100%; display: flex; align-items: center; gap: 10px; min-height: 24px; } .lg-promo-alert__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--goat-red); animation: lg-pulse 1.6s ease-out infinite; } .lg-promo-alert__text { min-width: 0; font: 700 14px/1.35 var(--font-display); color: #A8000F; } .lg-promo-alert__text { transition: opacity 300ms var(--ease); } @keyframes lg-pulse { 0% { box-shadow: 0 0 0 0 rgba(227,21,29,.45); } 70% { box-shadow: 0 0 0 8px rgba(227,21,29,0); } 100% { box-shadow: 0 0 0 0 rgba(227,21,29,0); } } @keyframes lg-caret { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .lg-promo-alert__dot, .lg-promo-alert__text::after { animation: none; } } .lg-simple-size { flex-basis: 100%; } /* Cart lines: options + discount, no qty stepper */ .lg-line__price { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: flex-end; gap: 6px; text-align: right; } .lg-line__price del { font-size: 12px; color: var(--text-muted); } .lg-line__total { font-weight: 700; color: var(--goat-blue); } .lg-line__off { align-self: center; padding: 2px 5px; border-radius: var(--radius-sm); background: var(--goat-red); color: #fff; font: 700 11px/1 var(--font-display); } .lg-line__opts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0 0; font-size: 12px; } .lg-line__opts div { display: flex; gap: 4px; } .lg-line__opts dt { color: var(--text-muted); } .lg-line__opts dt::after { content: ':'; } .lg-line__opts dd { margin: 0; font-weight: 600; } .lg-line__actions { justify-content: flex-end; } .lg-subtotal--saved strong { color: var(--goat-red); } /* PDP buy box: sizes and CTAs share one full-width column; CTAs win over WooCommerce/theme button styles */ .lg-pdp form.cart, .lg-pdp .variations_form, .lg-pdp .variations, .lg-pdp .variations tbody, .lg-pdp .variations tr, .lg-pdp .variations td, .lg-pdp .single_variation_wrap, .lg-pdp .woocommerce-variation-add-to-cart { width: 100%; max-width: none; } .lg-pdp .variations tr { display: block; } .lg-pdp .lg-sizes { width: 100%; } .lg-pdp .woocommerce-variation-add-to-cart, .lg-pdp form.cart:not(.variations_form) { display: flex; flex-direction: column; align-items: stretch; gap: 8px; } .lg-pdp .lg-pers, .lg-pdp .lg-promo-alert, .lg-pdp .lg-simple-size { width: 100%; } .lg-pdp form.cart .single_add_to_cart_button, .lg-pdp form.cart .single_add_to_cart_button.button, .lg-pdp form.cart .single_add_to_cart_button.button.alt, .lg-pdp form.cart .lg-buy-now { width: 100%; flex: none; min-height: 56px; margin: 0; padding: 0 20px; border: 0; border-radius: var(--radius-md); font: 700 15px/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; text-align: center; box-shadow: none; } .lg-pdp form.cart .single_add_to_cart_button, .lg-pdp form.cart .single_add_to_cart_button.button, .lg-pdp form.cart .single_add_to_cart_button.button.alt { background: var(--goat-blue); color: #fff; } .lg-pdp form.cart .single_add_to_cart_button:hover, .lg-pdp form.cart .single_add_to_cart_button.button.alt:hover { background: var(--goat-navy); color: #fff; } .lg-pdp form.cart .single_add_to_cart_button.disabled, .lg-pdp form.cart .single_add_to_cart_button:disabled { background: var(--goat-blue); color: #fff; opacity: 1; } .lg-pdp form.cart .lg-buy-now { background: var(--goat-red); color: #fff; } .lg-pdp form.cart .lg-buy-now:hover { background: #7A000E; color: #fff; } .lg-pdp .lg-sizes .lg-size { border-radius: var(--radius-md); } /* PDP: gallery starts right under the header rule */ .single-product .lg-main { padding-top: 0; } .single-product .woocommerce-notices-wrapper:empty { display: none; } /* PDP CTAs — final word (beats WooCommerce/plugin button skins, works even if the .lg-pdp wrapper is missing) */ body.single-product form.cart .single_add_to_cart_button, body.single-product form.cart button.single_add_to_cart_button.button.alt, body.single-product form.cart .lg-buy-now { display: flex !important; align-items: center; justify-content: center; width: 100% !important; min-height: 56px; margin: 0 !important; padding: 0 20px !important; border: 0 !important; border-radius: 8px !important; font: 700 15px/1 var(--font-display) !important; letter-spacing: .04em; text-transform: uppercase; background: var(--goat-blue) !important; color: #fff !important; box-shadow: none !important; opacity: 1 !important; } body.single-product form.cart .single_add_to_cart_button:hover { background: var(--goat-navy) !important; } body.single-product form.cart .lg-buy-now { background: var(--goat-red) !important; } body.single-product form.cart .lg-buy-now:hover { background: #7A000E !important; } body.single-product form.cart .woocommerce-variation-add-to-cart, body.single-product form.cart:not(.variations_form) { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; } body.single-product form.cart .quantity { display: none !important; } body.single-product .lg-sizes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; width: 100%; } body.single-product .lg-size { border-radius: 8px; } /* PDP top spacing: flush on mobile, small gap on desktop */ @media (min-width: 720px) { .single-product .lg-main { padding-top: 24px; } } /* Rating strip */ .lg-rating { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 14px; color: #3A3934; text-decoration: none; } a.lg-rating:hover .lg-rating__text { text-decoration: underline; } .lg-rating__stars { display: flex; gap: 2px; } .lg-rating__stars span { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; background: #00B67A; color: #fff; font-size: 13px; line-height: 1; } .lg-rating__text strong { font-weight: 700; color: var(--text); } .lg-patch__price { font-size: 12px; font-weight: 700; color: var(--goat-blue); } /* Cart: bundle progress + free shipping card */ .lg-cart-promos { display: flex; flex-direction: column; gap: 12px; padding: 14px 0 16px; border-bottom: 1px solid var(--border-subtle); } .lg-drawer__scroll { min-height: 0; } .lg-bundle__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; } .lg-bundle__head p { font-size: 14px; line-height: 1.35; } .lg-bundle__head strong { color: var(--goat-blue); } .lg-bundle__tag { font: italic 800 12px/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--goat-red); } .lg-bundle__bar { position: relative; height: 8px; margin: 8px 11px 0; background: var(--border-subtle); border-radius: 999px; } .lg-bundle__fill { position: absolute; top: 0; bottom: 0; left: 0; background: var(--goat-blue); border-radius: 999px; transition: width var(--dur-base) var(--ease); } .lg-bundle__mark { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; border: 2px solid #CFCCC3; color: var(--text-muted); font: 800 11px/1 var(--font-display); } .lg-bundle__mark.is-on { background: var(--goat-red); border-color: var(--goat-red); color: #fff; } .lg-bundle__legend { position: relative; height: 14px; margin: 6px 11px 0; font-size: 11px; color: var(--text-muted); } .lg-bundle__legend span { position: absolute; transform: translateX(-50%); white-space: nowrap; } .lg-bundle__legend span:last-child { transform: translateX(-70%); } .lg-shipcard { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #FDECEE; border: 1px solid #F6CDD2; border-radius: var(--radius-md); color: var(--goat-blue); } .lg-shipcard div { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .lg-shipcard strong { font-size: 14px; } .lg-shipcard span { font-size: 13px; color: #3A3934; } /* PDP gallery a bit smaller on mobile, same 4:5 ratio, centered */ @media (max-width: 719px) { .lg-gallery { margin-inline: auto; width: 86%; } .lg-gallery__dots { margin-top: 8px; } } /* PDP delivery box (under the buttons) */ .lg-delivery { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: var(--surface-alt); border-radius: var(--radius-md); } .lg-delivery p { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.35; } .lg-delivery svg { flex: none; color: var(--goat-blue); } .lg-pdp__stock { display: none; } /* stock + ETA now live in the delivery box */ /* PDP mobile: off-white band edge to edge, photo 86% wide centered inside it */ @media (max-width: 719px) { /* frame 40px shorter: the photo keeps 4:5 and shrinks proportionally (40px tall = 32px narrower) — nothing cropped */ .single-product .lg-gallery { width: auto !important; margin-inline: calc(var(--page-margin) * -1) !important; background: var(--surface-alt) !important; } .single-product .lg-gallery__track { width: 86%; margin-inline: auto; background: transparent !important; } /* beige stops exactly at the photo's bottom; the progress bars sit just below it on white */ .single-product .lg-gallery { background: linear-gradient(var(--surface-alt), var(--surface-alt)) top / 100% calc(100% - 12px) no-repeat !important; } .single-product .lg-gallery__dots { margin: 0 !important; padding: 10px var(--page-margin) 0 !important; } .single-product .lg-gallery__item, .single-product .lg-gallery__item img { background: transparent !important; } } /* Name & number + Patches — same type as the prototype */ .lg-pers { border-radius: var(--radius-md); padding: 0 14px; font-family: var(--font-body); } .lg-pers summary { min-height: 64px; } .lg-pers__title strong { font: italic 800 15px/1.2 var(--font-display) !important; letter-spacing: .01em; text-transform: uppercase; color: var(--text); } .lg-pers__title em { font: 500 13px/1.3 var(--font-body) !important; font-style: normal !important; color: var(--goat-blue); } .lg-pers__btn { font: 600 12px/1 var(--font-display) !important; letter-spacing: .04em; text-transform: uppercase; color: var(--text); background: #fff; } .lg-pers__fields .lg-label { font: 600 12px/1.2 var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); } .lg-pers__fields .lg-input { font: 600 16px/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; } .lg-pers .lg-muted { font: 400 13px/1.4 var(--font-body); color: var(--text-muted); } .lg-patch__name { font: 500 12px/1.25 var(--font-body); color: var(--text); } .lg-patch__price { font: 700 12px/1 var(--font-display); } /* ===== GOAT España: red primary + yellow accent ===== */ :root { --goat-yellow: #F9C21A; --goat-yellow-dark: #E5AC00; } .lg-price__off, .lg-line__off, .lg-bundle__mark.is-on, .lg-badge--sale, .lg-badge--drop, .lg-cart-count, .lg-count { background: var(--goat-yellow) !important; border-color: var(--goat-yellow) !important; color: #0A0A0A !important; } .lg-bundle__tag { color: var(--goat-blue); } body.single-product form.cart .single_add_to_cart_button, body.single-product form.cart button.single_add_to_cart_button.button.alt { background: var(--goat-yellow) !important; color: #0A0A0A !important; } body.single-product form.cart .single_add_to_cart_button:hover { background: var(--goat-yellow-dark) !important; } body.single-product form.cart .lg-buy-now { background: var(--goat-blue) !important; color: #fff !important; } body.single-product form.cart .lg-buy-now:hover { background: var(--goat-navy) !important; } .lg-sticky-cta .lg-btn--primary { background: var(--goat-yellow); color: #0A0A0A; } /* Price a touch lighter · rating sits closer to the title */ .lg-price__now { font-weight: 700 !important; font-size: 34px !important; letter-spacing: -.015em; } @media (min-width: 1024px) { .lg-price__now { font-size: 39px !important; } } .lg-pdp__summary .lg-rating { margin-bottom: -10px !important; } /* Mobile: rating sits closer to the gallery */ @media (max-width: 719px) { .lg-pdp__grid { gap: 8px; } .single-product .lg-gallery__dots { padding-top: 8px !important; } } /* ===== Home carousels (Más vendidos · Novedades) ===== */ .lg-shead__actions { display: flex; align-items: center; gap: 8px; } .lg-car__btn { width: 40px; height: 40px; display: none; align-items: center; justify-content: center; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: #fff; color: var(--text); cursor: pointer; transition: border-color .15s, background .15s, color .15s; } .lg-car__btn:hover { border-color: var(--text); } .lg-car__btn:disabled { opacity: .35; cursor: default; border-color: var(--border-subtle); } @media (min-width: 720px) { .lg-car__btn { display: inline-flex; } } .lg-carousel ul.products { display: flex !important; gap: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; margin-inline: calc(var(--page-margin) * -1); padding-inline: var(--page-margin); scroll-padding-inline: var(--page-margin); } .lg-carousel ul.products::-webkit-scrollbar { display: none; } .lg-carousel ul.products > li { flex: 0 0 calc((100% - var(--page-margin) - 8px) / 2.15); scroll-snap-align: start; display: block !important; min-width: 0; } @media (max-width: 719px) { .lg-carousel ul.products { gap: 8px; } } @media (min-width: 720px) { .lg-carousel ul.products > li { flex-basis: calc((100% - 2 * var(--page-margin) - 2 * var(--gutter)) / 3); } } @media (min-width: 1080px) { .lg-carousel ul.products > li { flex-basis: calc((100% - 2 * var(--page-margin) - 3 * var(--gutter)) / 4); } } @media (prefers-reduced-motion: reduce) { .lg-carousel ul.products { scroll-behavior: auto; } } /* Card price — same logic as PDP, scaled for the grid */ .lg-price--card { gap: 6px; row-gap: 4px; } .lg-price--card .lg-price__now { font-size: 19px !important; font-weight: 700 !important; } .lg-price--card .lg-price__was { font-size: 13px; } .lg-price--card .lg-price__off { padding: 3px 6px; font-size: 11px; } @media (min-width: 1024px) { .lg-price--card .lg-price__now { font-size: 22px !important; } } /* Carousel: native swipe; the track itself never scrolls vertically */ .lg-carousel ul.products { overflow-y: hidden; overscroll-behavior-x: contain; } .lg-carousel .lg-card__img { -webkit-user-drag: none; } /* Card title — heavier, display face like the PDP, more air from the image */ .lg-card__media { margin-bottom: 10px; } .lg-card__body { gap: 5px; } .lg-card__title { font: 700 15px/1.2 var(--font-display); letter-spacing: -.01em; text-wrap: pretty; } @media (min-width: 1024px) { .lg-card__title { font-size: 16px; } .lg-card__media { margin-bottom: 12px; } } /* Product card as a real card: lifts off the page with a hairline frame */ .lg-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border-subtle); border-radius: 8px; overflow: hidden; transition: border-color .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s cubic-bezier(.2,.7,.2,1); } .lg-card__media { margin-bottom: 0 !important; border-radius: 0; } .lg-card__body { padding: 12px 12px 14px; flex: 1; } @media (min-width: 1024px) { .lg-card__body { padding: 14px 16px 18px; } } @media (hover: hover) { .lg-card:hover { border-color: #CFCCC3; box-shadow: 0 6px 18px rgba(10,10,10,.06); } } ul.products { row-gap: 16px; } @media (min-width: 720px) { ul.products { row-gap: 24px; } } /* Card: discount % lives on the image; new + old price share one line */ .lg-card__off { position: absolute; top: 10px; left: 10px; z-index: 2; pointer-events: none; padding: 5px 8px; border-radius: 4px; font: 800 12px/1 var(--font-display); letter-spacing: .02em; } .lg-price--card { flex-wrap: nowrap; align-items: baseline; gap: 8px; white-space: nowrap; overflow: hidden; } .lg-price--card .lg-price__off { display: none !important; } .lg-price--card .lg-price__was { overflow: hidden; text-overflow: ellipsis; min-width: 0; } @media (max-width: 380px) { .lg-price--card .lg-price__now { font-size: 17px !important; } .lg-price--card .lg-price__was { font-size: 12px; } } .lg-card__off { top: 8px; left: 8px; padding: 4px 6px; font-size: 10.5px; border-radius: 3px; } .lg-card__off { top: 7px; left: 7px; padding: 3px 5px; font-size: 9.5px; } /* Mobile card — same look as desktop, scaled to a 2-up grid / carousel */ @media (max-width: 719px) { .lg-card { border-radius: 8px; } .lg-card__media { background: var(--surface-alt, #F2F1EC); } .lg-card__body { padding: 10px 10px 12px; gap: 6px; } .lg-card__body .lg-label { display: none; } .lg-card__title { font-size: 13.5px; line-height: 1.22; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(13.5px * 1.22 * 2); } .lg-card__price { margin-top: 0; } .lg-price--card { gap: 6px; } .lg-price--card .lg-price__now { font-size: 18px !important; letter-spacing: -.01em; } .lg-price--card .lg-price__was { font-size: 11.5px; } .lg-carousel ul.products > li { flex-basis: calc((100% - var(--page-margin) - 8px) / 2.1); } ul.products { column-gap: 8px; row-gap: 10px; } } @media (max-width: 360px) { .lg-card__title { font-size: 12.5px; min-height: calc(12.5px * 1.22 * 2); } .lg-price--card .lg-price__now { font-size: 16px !important; } } /* ===== Clubes → Liga → Equipo ===== */ @media (min-width: 1080px) { .lg-nav__list .sub-menu .sub-menu { position: static; display: flex; flex-direction: column; gap: 0; padding: 6px 0 0; background: none; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; grid-template-columns: none; } .lg-nav__list > li > .sub-menu:has(> li > .sub-menu) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; max-height: calc(100vh - var(--header-h) - 60px); overflow-y: auto; } @media (min-width: 1280px) { .lg-nav__list > li > .sub-menu:has(> li > .sub-menu) { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 28px 24px; } } .lg-nav__list .sub-menu > li.menu-item-has-children > a { font: 700 13px/1.2 var(--font-display) !important; letter-spacing: .04em !important; text-transform: uppercase !important; padding: 0 0 8px !important; border-bottom: 1px solid var(--border-subtle) !important; } .lg-nav__list .sub-menu > li.menu-item-has-children > a::after { display: none; } .lg-nav__list .sub-menu .sub-menu a { font-size: 14px; padding: 5px 0; color: var(--text); } .lg-nav__list .sub-menu .lg-viewall > a { color: var(--goat-blue); font-weight: 600; padding-top: 8px; } } /* Mobile drawer: drill-down panels */ .lg-mnav { position: relative; overflow-x: hidden; } .lg-mnav__list li { position: static; } .lg-mnav__list .menu-item-has-children > .sub-menu { display: block; position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0 16px 24px; background: #fff; overflow-y: auto; transform: translateX(100%); visibility: hidden; transition: transform 260ms cubic-bezier(.2,.7,.2,1), visibility 0s 260ms; border: 0; } .lg-mnav__list .menu-item-has-children.is-open > .sub-menu { transform: none; visibility: visible; transition: transform 260ms cubic-bezier(.2,.7,.2,1), visibility 0s; } .lg-mnav__list .menu-item-has-children > a > .lg-icon { display: none; } .lg-mnav__chev { display: inline-flex; margin-left: auto; } .lg-mnav__head { list-style: none; padding-top: 4px; } .lg-mnav__back { height: 48px; display: flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; font: 500 14px/1 var(--font-body); color: var(--text-muted); } .lg-mnav__title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0 14px; border-bottom: 1px solid var(--color-black); } .lg-mnav__title span { font: italic 800 26px/1 var(--font-display); text-transform: uppercase; letter-spacing: -.01em; } .lg-mnav__title a { font-size: 13px; font-weight: 600; color: var(--goat-blue); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .lg-mnav__list .sub-menu > li:not(.lg-mnav__head) > a { min-height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0; border-bottom: 1px solid var(--border-subtle); font: 500 16px/1.2 var(--font-body); text-transform: none; letter-spacing: 0; } .lg-mnav__list .sub-menu > li.menu-item-has-children > a { font-weight: 600; } .lg-mnav__list .lg-viewall { display: none; } /* "Ver todo" lives in the panel header */ @media (prefers-reduced-motion: reduce) { .lg-mnav__list .menu-item-has-children > .sub-menu { transition: none; } } /* Drawer head logo + safety styles for the mobile list */ .lg-drawer__head .lg-logo__img, .lg-drawer__head img { height: 32px; width: auto; display: block; } .lg-mnav__list { list-style: none; margin: 0; padding: 0; } .lg-mnav__list a { color: var(--text); text-decoration: none; } .lg-mnav__list > li > a { gap: 12px; } /* Crest images in menus (category thumbnail) */ .lg-menu-crest { width: 28px; height: 28px; object-fit: contain; flex: none; display: block; } .lg-mnav__list .sub-menu > li:not(.lg-mnav__head) > a { justify-content: flex-start; gap: 12px; } .lg-mnav__list .sub-menu > li > a .lg-mnav__chev { margin-left: auto; } .lg-mnav__list .sub-menu .lg-menu-crest { width: 32px; height: 32px; } @media (min-width: 1080px) { .lg-nav__list .sub-menu a { display: flex !important; align-items: center; gap: 10px; } .lg-nav__list .sub-menu > li.menu-item-has-children > a .lg-menu-crest { width: 24px; height: 24px; } .lg-nav__list .sub-menu .sub-menu .lg-menu-crest { width: 22px; height: 22px; } } /* Mobile menu — calmer type, same chevron on every row, help links */ .lg-mnav__list > li > a { min-height: 56px !important; font: 600 20px/1.1 var(--font-display) !important; text-transform: none !important; letter-spacing: -.015em !important; padding: 0 !important; } .lg-mnav__list > li > a .lg-icon { width: 18px; height: 18px; } .lg-mnav__chev .lg-icon { width: 18px; height: 18px; } .lg-mnav__secondary { list-style: none; margin: 8px 0 0; padding: 16px 0 8px; display: flex; flex-direction: column; gap: 0; } .lg-mnav__secondary a { display: block; padding: 11px 0; font: 400 15px/1.3 var(--font-body); color: var(--text-muted, #5E5C56); text-decoration: none; } .lg-mnav__secondary a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; } /* Mobile menu: lock horizontal movement — only the panels slide, never the drawer */ html, body { overflow-x: clip; } .lg-drawer--left { overflow: hidden; max-width: min(380px, 100vw); } .lg-drawer--left .lg-drawer__body, .lg-drawer--left .lg-drawer__scroll { overflow-x: hidden; overscroll-behavior-x: none; touch-action: pan-y; } .lg-drawer--left .lg-drawer__scroll { position: relative; padding: 0 16px; } .lg-mnav { min-height: 100%; width: 100%; box-sizing: border-box; overflow: hidden; contain: paint; } .lg-mnav__list .menu-item-has-children > .sub-menu { width: 100%; box-sizing: border-box; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; } .lg-mnav__list a, .lg-mnav__list .sub-menu a { max-width: 100%; box-sizing: border-box; min-width: 0; } .lg-mnav__list a > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* Mobile menu: one chevron, same 20px box, same right edge on every row */ .lg-mnav__list > li > a { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100%; } .lg-mnav__list > li > a > .lg-icon { display: none !important; } .lg-mnav__list > li:not(.menu-item-has-children) > a::after { content: ""; flex: none; width: 20px; height: 20px; margin-left: auto; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 20px 20px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 20px 20px no-repeat; } .lg-mnav__chev { flex: none; width: 20px; height: 20px; margin: 0 0 0 auto !important; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; } .lg-mnav__chev svg, .lg-mnav__chev .lg-icon { width: 20px !important; height: 20px !important; display: block; } /* Mobile menu: never scrolls sideways, keeps 16px side margins, and never scrolls the page behind */ #lg-menu nav.lg-mnav { overflow-x: clip !important; overflow-y: auto !important; contain: none !important; overscroll-behavior: contain !important; padding: 0 16px !important; width: 100% !important; box-sizing: border-box !important; min-height: 0 !important; touch-action: pan-y; } #lg-menu .lg-mnav__list, #lg-menu .lg-mnav__secondary { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } #lg-menu .lg-mnav__list .menu-item-has-children > .sub-menu { padding-left: 16px !important; padding-right: 16px !important; overflow-x: clip !important; overscroll-behavior: contain !important; } #lg-menu, .lg-scrim { overscroll-behavior: contain; } html.lg-scroll-lock, html.lg-scroll-lock body { overflow: hidden !important; } html.lg-scroll-lock body { position: fixed; left: 0; right: 0; width: 100%; } /* Back button: show the left chevron */ #lg-menu .lg-mnav__back { gap: 4px; margin-left: -4px; color: var(--text-muted, #5E5C56); } #lg-menu .lg-mnav__back svg, #lg-menu .lg-mnav__back .lg-icon { display: block !important; width: 20px !important; height: 20px !important; flex: none; } /* PDP mobile gallery: the beige band IS each slide, so the photo always sits fully inside it — never spills out, never cropped */ @media (max-width: 719px) { .single-product .lg-gallery { background: none !important; } .single-product .lg-gallery__track { width: 100% !important; margin-inline: 0 !important; } .single-product .lg-gallery__item { flex: 0 0 100% !important; aspect-ratio: auto !important; height: auto !important; padding: 0 7% !important; box-sizing: border-box; background: var(--surface-alt) !important; overflow: hidden; } .single-product .lg-gallery__item img { display: block; width: 100% !important; height: auto !important; aspect-ratio: 4 / 5; object-fit: contain !important; background: transparent !important; } } /* Mobile PDP photo — full size again, same 4:5 proportion, never leaves or gets cut by the frame */ @media (max-width: 719px) { .single-product .lg-gallery { background: none !important; overflow: hidden; } .single-product .lg-gallery__track { width: 100% !important; margin-inline: 0 !important; } .single-product .lg-gallery__item { flex: 0 0 100% !important; padding: 0 !important; aspect-ratio: auto !important; height: calc(100vw * 1.25 - 40px) !important; overflow: hidden !important; background: var(--surface-alt) !important; display: flex; align-items: center; justify-content: center; } .single-product .lg-gallery__item img { width: auto !important; max-width: 100% !important; height: 100% !important; aspect-ratio: 4 / 5; object-fit: contain !important; transform: none !important; } } /* Niños: "Incluye camiseta y pantalón corto" tag under the price */ .lg-kids-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: -6px; padding: 7px 12px; background: var(--goat-yellow, #F9C21A); color: #0A0A0A; border-radius: var(--radius-sm); font: 700 13px/1.2 var(--font-body); letter-spacing: .01em; } .lg-kids-tag__icon { display: inline-flex; } /* Cart promo — two steps, segmented bar */ .lg-bundle--steps { display: flex; flex-direction: column; gap: 10px; } .lg-bsteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .lg-bstep { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font: 700 13px/1.15 var(--font-body); color: var(--text-muted); background: #fff; min-width: 0; } .lg-bstep__dot { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 12px/1 var(--font-body); background: var(--surface-alt); color: var(--text-muted); } .lg-bstep.is-current { border-color: var(--goat-blue); color: var(--text); } .lg-bstep.is-current .lg-bstep__dot { background: var(--goat-blue); color: #fff; } .lg-bstep.is-done { border-color: var(--goat-yellow, #F9C21A); background: #FFF8E1; color: var(--text); } .lg-bstep.is-done .lg-bstep__dot { background: var(--goat-yellow, #F9C21A); color: #0A0A0A; } .lg-bundle__msg { margin: 0; font-size: 14px; line-height: 1.35; } .lg-bundle__msg strong { color: var(--goat-blue); } .lg-bseg { display: flex; gap: 4px; } .lg-bseg span { flex: 1; height: 8px; border-radius: 999px; background: var(--border-subtle); transition: background var(--dur-base) var(--ease); } .lg-bseg span.is-on { background: var(--goat-blue); } .lg-bseg__legend { display: flex; justify-content: space-between; font: 600 12px/1 var(--font-body); color: var(--text-muted); } /* Free jersey line */ .lg-line.is-free .lg-line__free { color: var(--goat-blue); font-weight: 800; } .lg-line.is-free .lg-line__price del { order: 0; } .lg-line__freenote dd { margin: 0; display: inline-block; padding: 3px 8px; border-radius: var(--radius-sm); background: var(--goat-yellow, #F9C21A); color: #0A0A0A; font: 700 11px/1.2 var(--font-body); } /* Card: title closer to the photo */ .lg-card__body { padding-top: 8px !important; gap: 4px !important; } @media (min-width: 1024px) { .lg-card__body { padding-top: 10px !important; } } /* Collection / search grids use exactly the carousel card spacing (and beat WooCommerce's float layout) */ ul.products li.product.lg-card { width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; clear: none !important; } ul.products li.lg-card .lg-card__media { margin: 0 !important; } ul.products li.lg-card .lg-card__body { display: flex !important; flex-direction: column !important; gap: 4px !important; padding: 8px 10px 12px !important; } @media (min-width: 1024px) { ul.products li.lg-card .lg-card__body { padding: 10px 16px 18px !important; } } ul.products li.lg-card .lg-card__title { margin: 0 !important; padding: 0 !important; } ul.products li.lg-card .lg-card__rating { margin: 0 !important; } ul.products li.lg-card .lg-card__price { margin: 0 !important; } /* Collection / search grid only: stars sit closer to the photo */ .lg-archive ul.products li.lg-card .lg-card__body, body.search ul.products li.lg-card .lg-card__body, body.tax-product_cat ul.products li.lg-card .lg-card__body, body.post-type-archive-product ul.products li.lg-card .lg-card__body { padding-top: 7px !important; } @media (min-width: 1024px) { .lg-archive ul.products li.lg-card .lg-card__body, body.search ul.products li.lg-card .lg-card__body, body.tax-product_cat ul.products li.lg-card .lg-card__body, body.post-type-archive-product ul.products li.lg-card .lg-card__body { padding-top: 7px !important; } } /* The grid card is a flex column with a 12px gap (the carousel card isn't) — that was the extra space under the photo */ ul.products li.lg-card { gap: 0 !important; } /* Wide size tables (e.g. Niños, 6 columns) scroll sideways on small screens */ .lg-size-table { width: 100%; } @media (max-width: 719px) { .lg-modal__body, .lg-acc__panel { overflow-x: auto; } .lg-size-table th, .lg-size-table td { white-space: nowrap; padding-inline: 8px; } } /* ===================================================================== PRODUCT CARD v2 — no frame: the shirt is the card. Photo (4:5, soft corner) → meta row (stars · team) → name → price. One chip on the photo (discount or badge). Colours unchanged. ===================================================================== */ ul.products li.lg-card, .lg-card { display: flex !important; flex-direction: column !important; gap: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; padding: 0 !important; margin: 0 !important; width: auto !important; float: none !important; position: relative; } @media (hover: hover) { ul.products li.lg-card:hover, .lg-card:hover { border: 0 !important; box-shadow: none !important; } } ul.products li.lg-card .lg-card__media, .lg-card .lg-card__media { margin: 0 !important; border-radius: 8px !important; background: var(--surface-alt, #F2F1EC); overflow: hidden; isolation: isolate; } .lg-card .lg-quick { border-radius: 0 !important; } .lg-card .lg-card__img { transition: opacity .28s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1); } @media (hover: hover) and (pointer: fine) { .lg-card:hover .lg-card__img:not(.lg-card__img--hover) { transform: scale(1.03); } .lg-card:hover .lg-card__title a { text-decoration: none; } } /* Chip on the photo — discount or badge, same corner, compact */ .lg-card__media > .lg-badge, .lg-card .lg-card__off { top: 8px !important; left: 8px !important; z-index: 2; padding: 4px 6px !important; border-radius: 4px !important; font: 800 11px/1 var(--font-display) !important; letter-spacing: .01em !important; font-variant-numeric: tabular-nums; } @media (min-width: 1024px) { .lg-card__media > .lg-badge, .lg-card .lg-card__off { top: 10px !important; left: 10px !important; font-size: 12px !important; padding: 5px 7px !important; } } /* Body */ ul.products li.lg-card .lg-card__body, .lg-card .lg-card__body { display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 10px 2px 0 !important; flex: 1; } @media (min-width: 1024px) { ul.products li.lg-card .lg-card__body, .lg-card .lg-card__body { padding-top: 12px !important; } } .lg-card__body > .lg-label { display: none !important; } .lg-card__meta { display: flex; align-items: center; gap: 8px; min-width: 0; line-height: 1; } .lg-card__rating { display: inline-flex; align-items: center; gap: 4px; flex: none; margin: 0 !important; } .lg-card__stars { display: inline-flex; gap: 1px; color: #F9C21A; } .lg-card__stars svg { width: 10px; height: 10px; display: block; } .lg-card__score { font: 600 11px/1 var(--font-body); color: #5E5C56; font-variant-numeric: tabular-nums; } .lg-card__team { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: auto; font: 500 10px/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .06em; text-transform: uppercase; color: #8E8B82; } @media (max-width: 719px) { .lg-card__team { display: none; } } ul.products li.lg-card .lg-card__title, .lg-card .lg-card__title { margin: 6px 0 0 !important; padding: 0 !important; font: 600 14px/1.25 var(--font-body) !important; letter-spacing: -.005em !important; color: var(--text, #0A0A0A); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(14px * 1.25 * 2); text-wrap: pretty; } @media (min-width: 1024px) { ul.products li.lg-card .lg-card__title, .lg-card .lg-card__title { font-size: 15px !important; min-height: calc(15px * 1.25 * 2); } } .lg-card .lg-card__title a { color: inherit; text-decoration: none; } /* Price: one line, final price leads, old price quiet */ ul.products li.lg-card .lg-card__price, .lg-card .lg-card__price { margin: 6px 0 0 !important; } .lg-card .lg-price--card { display: flex !important; align-items: baseline; gap: 6px !important; flex-wrap: nowrap; white-space: nowrap; margin: 0 !important; } .lg-card .lg-price--card .lg-price__now { font: 800 17px/1 var(--font-display) !important; letter-spacing: -.015em !important; font-variant-numeric: tabular-nums; } .lg-card .lg-price--card .lg-price__was { font: 400 12.5px/1 var(--font-body) !important; color: #8E8B82 !important; text-decoration-thickness: 1px; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .lg-card .lg-price--card .lg-price__off { display: none !important; } @media (min-width: 1024px) { .lg-card .lg-price--card .lg-price__now { font-size: 19px !important; } .lg-card .lg-price--card .lg-price__was { font-size: 13.5px !important; } .lg-card .lg-price--card { gap: 8px !important; } } @media (max-width: 360px) { .lg-card .lg-price--card .lg-price__now { font-size: 15.5px !important; } .lg-card .lg-price--card .lg-price__was { font-size: 11.5px !important; } } /* Grid rhythm: more air between rows than between columns */ ul.products { column-gap: 10px !important; row-gap: 22px !important; } @media (min-width: 720px) { ul.products { column-gap: 16px !important; row-gap: 32px !important; } } @media (min-width: 1080px) { ul.products { column-gap: 20px !important; row-gap: 40px !important; } } .lg-carousel ul.products { row-gap: 0 !important; } .lg-card.outofstock .lg-card__price { opacity: .6; } /* Card: smaller chip, title a touch smaller */ .lg-card__media > .lg-badge, .lg-card .lg-card__off { top: 7px !important; left: 7px !important; padding: 3px 5px !important; font-size: 9.5px !important; border-radius: 3px !important; } @media (min-width: 1024px) { .lg-card__media > .lg-badge, .lg-card .lg-card__off { top: 8px !important; left: 8px !important; padding: 3px 6px !important; font-size: 10.5px !important; } } ul.products li.lg-card .lg-card__title, .lg-card .lg-card__title { font-size: 13.5px !important; min-height: calc(13.5px * 1.25 * 2); } @media (min-width: 1024px) { ul.products li.lg-card .lg-card__title, .lg-card .lg-card__title { font-size: 14.5px !important; min-height: calc(14.5px * 1.25 * 2); } } /* Cart timer: [hidden] must win over its inline display */ [data-lg-cart-timer][hidden] { display: none !important; } /* Cart timer layout (independent of inline styles) */ .lg-cart-timer { display: flex; align-items: center; justify-content: center; gap: 6px; flex: none; min-height: 30px; padding: 6px 16px; background: #D00012; color: #fff; font: 600 12px/1.2 var(--font-body); text-align: center; } .lg-cart-timer svg { flex: none; display: block; } .lg-cart-timer [data-lg-timer-text] { display: inline; } .lg-cart-timer strong { font-variant-numeric: tabular-nums; } /* Hero desktop = 1792×592 banner (≈3:1) shown whole — no crop, no letterbox */ @media (min-width: 720px) { .lg-hero__media { aspect-ratio: 1792 / 592 !important; min-height: 0 !important; height: auto !important; max-height: none !important; background: #F2F1EC; } .lg-hero__media picture, .lg-hero__media img { width: 100% !important; height: 100% !important; object-fit: cover; object-position: center; display: block; } } /* Home promo — thin, non-clickable promotional strip (mobile + desktop) */ .lg-promo { padding: 0 !important; } .lg-promo__strip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 12px 16px; text-align: center; color: #fff; } .lg-promo__strip strong { font: 800 italic 15px/1.15 var(--font-display); letter-spacing: -.005em; text-transform: uppercase; } .lg-promo__strip span { font: 400 12px/1.3 var(--font-body); color: #fff; opacity: .9; } @media (min-width: 720px) { .lg-promo__strip { flex-direction: row; gap: 16px; padding: 14px var(--page-margin, 40px); } .lg-promo__strip strong { font-size: 18px; } .lg-promo__strip span { font-size: 14px; padding-left: 16px; border-left: 1px solid rgba(255,255,255,.45); } } /* Home rhythm — one gap between rails (instead of bottom + top padding stacking) */ .lg-home { --rail-gap: 28px; } @media (min-width: 720px) { .lg-home { --rail-gap: 36px; } } @media (min-width: 1080px) { .lg-home { --rail-gap: 44px; } } .lg-home > .lg-section { padding-top: var(--rail-gap) !important; padding-bottom: 0 !important; } .lg-home > .lg-section:last-child { padding-bottom: var(--section-y) !important; } .lg-home > .lg-promo { margin-top: var(--rail-gap); } .lg-home .lg-shead { margin-bottom: 14px; } @media (min-width: 1080px) { .lg-home .lg-shead { margin-bottom: 18px; } } .lg-home .lg-carousel ul.products, .lg-home .lg-carousel .woocommerce { margin-bottom: 0 !important; padding-bottom: 0; } /* Section head: title + "Ver todo" always on one line (title shrinks/truncates first) */ .lg-shead { flex-wrap: nowrap !important; align-items: baseline !important; } .lg-shead__text { min-width: 0; flex: 1 1 auto; } .lg-shead__text h2, .lg-shead h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 719px) { .lg-shead h2 { font-size: clamp(20px, 6.2vw, 26px) !important; } } .lg-shead > a, .lg-shead__link, .lg-shead .lg-link { flex: none; white-space: nowrap; } /* ===================================================================== CHECKOUT (WooCommerce Checkout block) — brand skin, native logic. ===================================================================== */ /* Distraction-free header */ body.woocommerce-checkout:not(.woocommerce-order-received) .lg-announce, body.woocommerce-checkout:not(.woocommerce-order-received) .lg-nav, body.woocommerce-checkout:not(.woocommerce-order-received) .lg-header__menu, body.woocommerce-checkout:not(.woocommerce-order-received) .lg-header__actions { display: none !important; } body.woocommerce-checkout:not(.woocommerce-order-received) .lg-header__bar { display: flex !important; justify-content: space-between; align-items: center; } .lg-checkout-secure { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 var(--font-body); color: #5E5C56; } body.woocommerce-checkout .entry-title, body.woocommerce-checkout .lg-page__title, body.woocommerce-checkout .page-title { display: none; } body.woocommerce-checkout .lg-main { padding-top: 20px; } .wc-block-checkout { font-family: var(--font-body); color: var(--text, #0A0A0A); } .wc-block-checkout .wc-block-components-title, .wc-block-checkout .wc-block-components-checkout-step__title { font: 700 18px/1.2 var(--font-display) !important; letter-spacing: -.01em; text-transform: none; } .wc-block-checkout .wc-block-components-checkout-step { margin-bottom: 28px !important; } .wc-block-checkout .wc-block-components-checkout-step__heading { margin-bottom: 12px !important; } /* Inputs */ .wc-block-checkout .wc-block-components-text-input input, .wc-block-checkout .wc-block-components-combobox .components-combobox-control input, .wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__select, .wc-block-checkout .wc-block-components-textarea { border: 1px solid #D9D7CF !important; border-radius: 6px !important; background: #fff !important; box-shadow: none !important; font-size: 15px !important; min-height: 52px; } .wc-block-checkout .wc-block-components-text-input input:focus, .wc-block-checkout .wc-blocks-components-select__select:focus { border-color: #0A0A0A !important; outline: 2px solid var(--goat-blue) !important; outline-offset: -1px; } .wc-block-checkout .wc-block-components-text-input label, .wc-block-checkout .wc-blocks-components-select__label { color: #8E8B82 !important; } .wc-block-checkout .wc-block-components-text-input.has-error input { border-color: var(--goat-blue) !important; } .wc-block-checkout .wc-block-components-validation-error { color: var(--goat-blue); } .wc-block-checkout .wc-block-components-checkbox__input[type=checkbox]:checked { background: var(--goat-blue); border-color: var(--goat-blue); } .wc-block-checkout .wc-block-components-checkbox__mark { fill: #fff; } .wc-block-checkout a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; } /* Payment options */ .wc-block-checkout .wc-block-components-radio-control-accordion-option, .wc-block-checkout .wc-block-components-radio-control__option { border-radius: 6px; } .wc-block-checkout .wc-block-components-radio-control__input:checked { border-color: var(--goat-blue) !important; } .wc-block-checkout .wc-block-components-radio-control__input:checked::before { background: var(--goat-blue) !important; } /* Place order */ .wc-block-checkout .wc-block-components-checkout-place-order-button { width: 100%; min-height: 56px; border: 0 !important; border-radius: 8px !important; background: var(--goat-blue) !important; color: #fff !important; font: 800 16px/1 var(--font-display) !important; letter-spacing: .02em; text-transform: uppercase; box-shadow: none !important; transition: background .16s var(--ease); } .wc-block-checkout .wc-block-components-checkout-place-order-button:hover { background: var(--goat-navy) !important; } .wc-block-checkout .wc-block-checkout__actions_row { flex-direction: column-reverse; align-items: stretch !important; gap: 14px; } .wc-block-checkout .wc-block-components-checkout-return-to-cart-button { justify-content: center; color: #5E5C56; font-size: 14px; } .lg-co-trust { list-style: none; margin: 0 0 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; border: 1px solid #E4E2DB; border-radius: 8px; background: #FAFAF7; font-size: 13px; line-height: 1.35; color: #3A3934; } .lg-co-trust li { display: flex; gap: 8px; } .lg-co-trust li::before { content: '✓'; color: var(--goat-blue); font-weight: 700; flex: none; } /* Order summary */ .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block, .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__content { border: 1px solid #E4E2DB !important; border-radius: 8px !important; background: #fff; } .wc-block-components-order-summary-item__image img { border-radius: 6px; background: #F2F1EC; } .wc-block-components-order-summary-item__quantity { background: #0A0A0A !important; color: #fff !important; border: 2px solid #fff !important; box-shadow: none !important; font-weight: 700; } .wc-block-components-order-summary-item__description .wc-block-components-product-name { font-weight: 600; font-size: 14px; line-height: 1.3; } .wc-block-components-order-summary-item__description .wc-block-components-product-metadata { font-size: 12px; color: #5E5C56; } .wc-block-components-order-summary-item .wc-block-components-product-price del { color: #8E8B82; font-weight: 400; } .wc-block-components-order-summary-item .wc-block-components-sale-badge, .wc-block-components-order-summary-item .wc-block-components-product-badge { background: #F9C21A !important; color: #0A0A0A !important; border: 0 !important; border-radius: 4px !important; font: 700 11px/1 var(--font-body) !important; padding: 4px 6px !important; text-transform: none; } .wc-block-components-totals-item__label, .wc-block-components-totals-item__value { font-size: 14px; } .wc-block-components-totals-discount .wc-block-components-totals-item__value { color: var(--goat-blue); font-weight: 600; } .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font: 700 16px/1 var(--font-display); } .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font: 800 22px/1 var(--font-display) !important; color: var(--goat-blue); font-variant-numeric: tabular-nums; } .wc-block-components-totals-coupon .wc-block-components-panel__button { font-size: 14px; } /* Mobile: summary panel on top is collapsible natively — give it the same skin */ @media (max-width: 719px) { .wc-block-checkout .wc-block-components-checkout-step { padding-left: 0 !important; margin-left: 0 !important; } .wc-block-checkout .wc-block-components-checkout-step::after, .wc-block-checkout .wc-block-components-checkout-step__container::after { display: none !important; } .wc-block-checkout__main { padding-inline: 0 !important; } .wc-block-components-checkout-order-summary__title { border: 1px solid #E4E2DB; border-radius: 8px; padding: 14px 16px !important; } } /* Checkout — mobile fixes */ @media (max-width: 719px) { body.woocommerce-checkout:not(.woocommerce-order-received) .lg-header__bar { display: grid !important; grid-template-columns: 1fr auto; align-items: center; min-height: 56px; padding-inline: 16px; } body.woocommerce-checkout:not(.woocommerce-order-received) .lg-header__logo { justify-self: start; margin: 0 !important; position: static !important; transform: none !important; } body.woocommerce-checkout:not(.woocommerce-order-received) .lg-header__logo img { height: 30px !important; width: auto; } .lg-checkout-secure { font-size: 12px; justify-self: end; } body.woocommerce-checkout .lg-main { padding-top: 12px; } body.woocommerce-checkout .lg-main > .lg-container, body.woocommerce-checkout .entry-content { padding-inline: 16px !important; max-width: 100% !important; overflow-x: clip; } .wc-block-checkout, .wc-block-components-sidebar-layout { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; } .wc-block-components-sidebar-layout { display: flex !important; flex-direction: column; } .wc-block-components-sidebar-layout .wc-block-components-main, .wc-block-components-sidebar-layout .wc-block-components-sidebar { width: 100% !important; padding: 0 !important; } .wc-block-checkout .wc-block-components-checkout-step__title { font-size: 17px !important; } .wc-block-checkout .wc-block-components-address-form { display: flex !important; flex-direction: column; gap: 12px; } .wc-block-checkout .wc-block-components-address-form > * { width: 100% !important; margin: 0 !important; flex: none !important; } .wc-block-checkout .wc-block-components-text-input, .wc-block-checkout .wc-blocks-components-select, .wc-block-checkout .wc-block-components-country-input, .wc-block-checkout .wc-block-components-state-input { margin-top: 0 !important; } .wc-block-checkout .wc-block-components-text-input input { min-height: 52px; font-size: 16px !important; } .wc-block-checkout .wc-block-components-radio-control-accordion-content { padding: 12px !important; } /* Summary (mobile shows it collapsed at top) */ .wc-block-components-checkout-order-summary__title { margin: 0 0 12px !important; background: #fff; } .wc-block-components-checkout-order-summary__title-text { font: 700 15px/1.2 var(--font-display) !important; } .wc-block-components-checkout-order-summary__title-price { font: 800 17px/1 var(--font-display) !important; color: var(--goat-blue); } .wc-block-components-checkout-order-summary__content { padding: 12px 14px !important; margin-bottom: 16px; } .wc-block-components-order-summary-item { gap: 12px; padding: 10px 0 !important; } .wc-block-components-order-summary-item__image { width: 52px !important; flex: none; } .wc-block-components-order-summary-item__total-price { font-weight: 700; font-size: 14px; } .wc-block-components-order-summary-item .wc-block-components-product-badge { font-size: 10px !important; padding: 3px 5px !important; white-space: nowrap; } .wc-block-components-totals-wrapper { padding-inline: 0 !important; } .lg-co-trust { font-size: 12.5px; padding: 10px 12px; } .wc-block-checkout .wc-block-components-checkout-place-order-button { min-height: 54px; font-size: 15px !important; } .wc-block-checkout__terms { font-size: 12px; line-height: 1.4; color: #5E5C56; } } /* Checkout — mobile fixes 2 */ @media (max-width: 719px) { body.woocommerce-checkout:not(.woocommerce-order-received) .lg-header__bar { grid-template-columns: 1fr auto 1fr !important; } body.woocommerce-checkout:not(.woocommerce-order-received) .lg-header__bar::before { content: ''; grid-column: 1; } body.woocommerce-checkout:not(.woocommerce-order-received) .lg-header__logo { grid-column: 2; justify-self: center !important; } body.woocommerce-checkout:not(.woocommerce-order-received) .lg-checkout-secure { grid-column: 3; justify-self: end; } /* one outline only around the collapsible summary */ .wc-block-components-checkout-order-summary__title { border: 0 !important; border-radius: 0 !important; padding: 14px 16px !important; margin: 0 !important; background: transparent !important; } .wc-block-components-checkout-order-summary__content { border: 0 !important; border-top: 1px solid #E4E2DB !important; border-radius: 0 !important; margin: 0 !important; } .wp-block-woocommerce-checkout-order-summary-block, .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block { border: 1px solid #E4E2DB !important; border-radius: 8px !important; overflow: hidden; margin-bottom: 20px !important; } } /* Page title — air below the header */ body.woocommerce-checkout .lg-main h1, body.woocommerce-checkout .entry-title, body.woocommerce-checkout .lg-page__title { display: block !important; margin: 28px 0 20px !important; font: 800 26px/1.1 var(--font-display); letter-spacing: -.02em; } @media (min-width: 1080px) { body.woocommerce-checkout .lg-main h1, body.woocommerce-checkout .entry-title, body.woocommerce-checkout .lg-page__title { margin: 40px 0 28px !important; font-size: 34px; } } /* Section titles: no clipping of accents/italics, no ellipsis — shrink, then wrap */ .lg-shead__text h2, .lg-shead h2 { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.12 !important; padding-top: 2px; text-wrap: balance; } .lg-shead { align-items: flex-end !important; } @media (max-width: 719px) { .lg-shead h2 { font-size: clamp(17px, 5.3vw, 26px) !important; } } /* ===================================================================== CHECKOUT v2 — cards on off-white, calmer type, single clean summary ===================================================================== */ body.woocommerce-checkout:not(.woocommerce-order-received) { background: #F5F4EF; } body.woocommerce-checkout:not(.woocommerce-order-received) .lg-header { background: #fff; } body.woocommerce-checkout:not(.woocommerce-order-received) .lg-footer { display: none !important; } body.woocommerce-checkout .lg-main h1, body.woocommerce-checkout .entry-title, body.woocommerce-checkout .lg-page__title { text-transform: none !important; font: 800 24px/1.1 var(--font-display) !important; letter-spacing: -.02em; margin: 24px 0 16px !important; } .wc-block-checkout { font-family: var(--font-body) !important; padding-bottom: 40px !important; } .wc-block-checkout * { letter-spacing: normal; } /* Each step = white card */ .wc-block-checkout .wc-block-components-checkout-step, .wc-block-checkout .wc-block-components-express-payment--checkout, .wc-block-checkout .wp-block-woocommerce-checkout-order-note-block, .wc-block-checkout .wc-block-checkout__terms, .wc-block-checkout .wp-block-woocommerce-checkout-actions-block { background: #fff !important; border: 1px solid #E4E2DB !important; border-radius: 12px !important; padding: 18px 16px !important; margin: 0 0 12px !important; box-shadow: none !important; } .wc-block-checkout .wc-block-components-checkout-step__heading { margin: 0 0 14px !important; } .wc-block-checkout .wc-block-components-checkout-step__title { font: 700 17px/1.2 var(--font-display) !important; text-transform: none !important; } .wc-block-checkout .wc-block-components-checkout-step__description { font-size: 13px !important; color: #5E5C56 !important; margin: -6px 0 12px !important; } .wc-block-checkout .wc-block-checkout__guest-checkout-notice, .wc-block-checkout .wc-block-components-checkout-step__container > p { font-size: 12.5px !important; color: #5E5C56 !important; margin-top: 8px !important; } /* Express pay */ .wc-block-checkout .wc-block-components-express-payment__title-container { margin: 0 0 12px !important; } .wc-block-checkout .wc-block-components-express-payment__title { font: 600 13px/1 var(--font-body) !important; color: #5E5C56 !important; background: #fff !important; } .wc-block-checkout .wc-block-components-express-payment__content { border: 0 !important; padding: 0 !important; } .wc-block-checkout .wc-block-components-express-payment__event-buttons > li { margin-bottom: 8px !important; } .wc-block-checkout .wc-block-components-express-payment__event-buttons iframe, .wc-block-checkout .wc-block-components-express-payment__event-buttons button { border-radius: 8px !important; } .wc-block-checkout .wc-block-components-express-payment-continue-rule { margin: 4px 0 12px !important; font-size: 12px !important; color: #8E8B82 !important; text-transform: none !important; } .wc-block-checkout .wc-block-components-express-payment-continue-rule::before, .wc-block-checkout .wc-block-components-express-payment-continue-rule::after { border-color: #E4E2DB !important; } /* Inputs */ .wc-block-checkout .wc-block-components-text-input input, .wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__select, .wc-block-checkout .wc-block-components-combobox .components-combobox-control input { min-height: 54px !important; border: 1px solid #D9D7CF !important; border-radius: 8px !important; background: #fff !important; font: 400 16px/1.2 var(--font-body) !important; color: #0A0A0A !important; padding-left: 14px !important; } .wc-block-checkout .wc-block-components-text-input label, .wc-block-checkout .wc-blocks-components-select__label { left: 15px !important; font: 400 15px/1.2 var(--font-body) !important; color: #8E8B82 !important; } .wc-block-checkout .wc-block-components-text-input.is-active label, .wc-block-checkout .wc-blocks-components-select__label { font-size: 12px !important; } .wc-block-checkout .wc-block-components-text-input input:focus, .wc-block-checkout .wc-blocks-components-select__select:focus { border-color: #0A0A0A !important; outline: 0 !important; box-shadow: 0 0 0 1px #0A0A0A !important; } .wc-block-checkout .wc-block-components-address-form { gap: 10px !important; } .wc-block-checkout .wc-block-components-address-form__address_2-toggle { font-size: 13px !important; color: #3A3934 !important; margin: 2px 0 !important; text-decoration: underline; text-underline-offset: 3px; } /* Payment method */ .wc-block-checkout .wc-block-components-radio-control-accordion-option, .wc-block-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted { border: 1px solid #0A0A0A !important; border-radius: 10px !important; box-shadow: none !important; } .wc-block-checkout .wc-block-components-radio-control__label { font: 600 14px/1.2 var(--font-body) !important; } .wc-block-checkout .wc-block-components-radio-control-accordion-content { padding: 0 14px 14px !important; font-size: 13px; color: #5E5C56; } .wc-block-checkout .p-Tab, .wc-block-checkout .wc-stripe-elements-field, .wc-block-checkout .wc-block-gateway-container { border-radius: 8px !important; } /* Note + terms */ .wc-block-checkout .wp-block-woocommerce-checkout-order-note-block .wc-block-components-checkbox__label { font-size: 14px !important; } .wc-block-checkout .wc-block-checkout__terms { font-size: 12.5px !important; line-height: 1.45 !important; color: #5E5C56 !important; } /* Actions: trust + button */ .lg-co-trust { border: 0 !important; background: #F5F4EF !important; border-radius: 8px !important; margin: 0 0 12px !important; padding: 12px 14px !important; gap: 7px !important; font-size: 13px !important; } .wc-block-checkout .wc-block-components-checkout-place-order-button { min-height: 56px !important; border-radius: 10px !important; font: 800 16px/1 var(--font-display) !important; letter-spacing: .03em !important; } .wc-block-checkout .wc-block-components-checkout-return-to-cart-button { display: none !important; } /* Order summary — one clean card, one price per item */ .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block { background: #fff !important; border: 1px solid #E4E2DB !important; border-radius: 12px !important; overflow: hidden; margin: 0 0 12px !important; } .wc-block-checkout .wc-block-components-checkout-order-summary__title { border: 0 !important; padding: 16px !important; margin: 0 !important; } .wc-block-checkout .wc-block-components-checkout-order-summary__title-text, .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title { font: 700 16px/1.2 var(--font-display) !important; text-transform: none !important; padding: 0 !important; } .wc-block-checkout .wc-block-components-checkout-order-summary__title-price { font: 800 17px/1 var(--font-display) !important; color: var(--goat-blue) !important; } .wc-block-checkout .wc-block-components-checkout-order-summary__content, .wc-block-checkout .wc-block-components-order-summary { border: 0 !important; padding: 0 16px !important; margin: 0 !important; } .wc-block-components-order-summary-item { display: grid !important; grid-template-columns: 56px minmax(0,1fr) auto; gap: 12px !important; align-items: start; padding: 14px 0 !important; border-top: 1px solid #EFEDE6; } .wc-block-components-order-summary-item:first-child { border-top: 0; } .wc-block-components-order-summary-item__image { width: 56px !important; margin: 0 !important; } .wc-block-components-order-summary-item__image img { width: 56px !important; height: 70px !important; object-fit: cover; border-radius: 8px; background: #F2F1EC; } .wc-block-components-order-summary-item__quantity { min-width: 20px !important; height: 20px !important; font-size: 11px !important; top: -6px !important; right: -6px !important; background: #0A0A0A !important; color: #fff !important; border: 2px solid #fff !important; } .wc-block-components-order-summary-item__description { padding: 0 !important; } .wc-block-components-order-summary-item__description .wc-block-components-product-name { font: 600 14px/1.3 var(--font-body) !important; color: #0A0A0A !important; } .wc-block-components-order-summary-item__individual-prices { display: none !important; } .wc-block-components-order-summary-item__description .wc-block-components-product-metadata { margin-top: 4px !important; font-size: 12px !important; line-height: 1.4 !important; color: #5E5C56 !important; } .wc-block-components-order-summary-item__total-price { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font: 700 14px/1 var(--font-body) !important; padding: 0 !important; } .wc-block-components-order-summary-item .wc-block-components-product-badge, .wc-block-components-order-summary-item .wc-block-components-sale-badge { font: 600 10.5px/1 var(--font-body) !important; padding: 3px 6px !important; border-radius: 4px !important; white-space: nowrap; } .wc-block-checkout .wc-block-components-totals-wrapper { padding: 12px 16px !important; border-top: 1px solid #EFEDE6 !important; } .wc-block-checkout .wc-block-components-totals-item { padding: 3px 0 !important; } .wc-block-checkout .wc-block-components-totals-item__label, .wc-block-checkout .wc-block-components-totals-item__value { font-size: 14px !important; } .wc-block-checkout .wc-block-components-totals-footer-item { padding-top: 6px !important; } .wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font: 700 16px/1 var(--font-display) !important; } .wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font: 800 20px/1 var(--font-display) !important; color: var(--goat-blue) !important; } .wc-block-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button { font-size: 14px !important; padding: 2px 0 !important; } @media (max-width: 719px) { .wc-block-checkout .wc-block-components-checkout-step { padding: 16px 14px !important; } body.woocommerce-checkout .lg-main > .lg-container, body.woocommerce-checkout .entry-content { padding-inline: 12px !important; } } @media (min-width: 1080px) { .wc-block-checkout .wc-block-components-sidebar { position: sticky; top: 96px; align-self: flex-start; } } /* ===================================================================== THANK-YOU PAGE ===================================================================== */ body.woocommerce-order-received { background: #F5F4EF; } body.woocommerce-order-received .entry-title, body.woocommerce-order-received .lg-page__title, body.woocommerce-order-received .lg-main > .lg-container > h1 { display: none !important; } body.woocommerce-order-received .woocommerce-notice, body.woocommerce-order-received .woocommerce-order-overview { display: none; } .lg-ty { max-width: 640px; margin: 0 auto; padding: 20px 0 48px; display: flex; flex-direction: column; gap: 12px; font-family: var(--font-body); color: #0A0A0A; } .lg-ty__hero, .lg-ty__card, .lg-ty__facts { background: #fff; border: 1px solid #E4E2DB; border-radius: 12px; } .lg-ty__hero { padding: 28px 20px 22px; text-align: center; display: flex; flex-direction: column; align-items: center; } .lg-ty__icon { width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--goat-blue); color: #fff; margin-bottom: 14px; font: 800 24px/1 var(--font-display); } .lg-ty__hero--fail .lg-ty__icon { background: #0A0A0A; } .lg-ty__eyebrow { margin: 0 0 6px; font: 600 12px/1 var(--font-body); color: #5E5C56; letter-spacing: .04em; text-transform: uppercase; } .lg-ty__title { margin: 0 0 8px; font: 800 26px/1.1 var(--font-display); letter-spacing: -.02em; text-wrap: balance; } .lg-ty__lead { margin: 0; max-width: 42ch; font-size: 15px; line-height: 1.45; color: #3A3934; text-wrap: pretty; } .lg-ty__lead strong { color: #0A0A0A; font-weight: 600; word-break: break-all; } .lg-ty__steps { list-style: none; margin: 22px 0 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); } .lg-ty__steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; font: 600 11.5px/1.2 var(--font-body); color: #8E8B82; } .lg-ty__steps li span { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #D9D7CF; } .lg-ty__steps li:not(:first-child)::before { content: ''; position: absolute; top: 6px; right: 50%; width: 100%; height: 2px; background: #E4E2DB; } .lg-ty__steps li.is-done { color: #0A0A0A; } .lg-ty__steps li.is-done span { background: var(--goat-blue); border-color: var(--goat-blue); } .lg-ty__eta { margin: 16px 0 0; padding: 10px 12px; width: 100%; border-radius: 8px; background: #F5F4EF; font-size: 13px; line-height: 1.35; color: #3A3934; } .lg-ty__facts { margin: 0; padding: 4px 16px; display: grid; grid-template-columns: 1fr 1fr; } .lg-ty__facts > div { padding: 12px 0; min-width: 0; } .lg-ty__facts > div:nth-child(n+3) { border-top: 1px solid #EFEDE6; } .lg-ty__facts dt { font-size: 12px; color: #5E5C56; margin-bottom: 3px; } .lg-ty__facts dd { margin: 0; font: 700 15px/1.25 var(--font-body); overflow-wrap: anywhere; } .lg-ty__card { padding: 18px 16px; } .lg-ty__h2 { margin: 0 0 6px; font: 700 17px/1.2 var(--font-display); letter-spacing: -.01em; } .lg-ty__items { list-style: none; margin: 0; padding: 0; } .lg-ty__item { display: grid; grid-template-columns: 56px minmax(0,1fr) auto; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid #EFEDE6; } .lg-ty__thumb { position: relative; display: block; } .lg-ty__thumb img { display: block; width: 56px; height: 70px; object-fit: cover; border-radius: 8px; background: #F2F1EC; } .lg-ty__thumb b { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; border: 2px solid #fff; background: #0A0A0A; color: #fff; font: 700 11px/16px var(--font-body); text-align: center; } .lg-ty__name { margin: 0 0 4px; font: 600 14px/1.3 var(--font-body); } .lg-ty__meta { list-style: none; margin: 0; padding: 0; font-size: 12px; line-height: 1.45; color: #5E5C56; } .lg-ty__meta p { display: inline; margin: 0; } .lg-ty__meta span { color: #8E8B82; } .lg-ty__price { font: 700 14px/1.3 var(--font-body); white-space: nowrap; } .lg-ty__totals { margin: 0; padding-top: 10px; } .lg-ty__totals > div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 14px; color: #3A3934; } .lg-ty__totals dd { margin: 0; text-align: right; } .lg-ty__totals .is-total { margin-top: 6px; padding-top: 10px; border-top: 1px solid #EFEDE6; color: #0A0A0A; align-items: baseline; } .lg-ty__totals .is-total dt { font: 700 16px/1 var(--font-display); } .lg-ty__totals .is-total dd { font: 800 20px/1 var(--font-display); color: var(--goat-blue); } .lg-ty__totals .is-total small { display: block; font: 400 11px/1.3 var(--font-body); color: #8E8B82; margin-top: 4px; } .lg-ty__addr { font-style: normal; font-size: 14px; line-height: 1.5; color: #3A3934; } .lg-ty__ctas { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; } .lg-ty__ctas .lg-btn { min-height: 54px; border-radius: 10px; } .lg-ty__help { margin: 0; text-align: center; font-size: 13px; color: #5E5C56; } body.woocommerce-order-received .woocommerce-bacs-bank-details, body.woocommerce-order-received .lg-ty > p { background: #fff; border: 1px solid #E4E2DB; border-radius: 12px; padding: 16px; margin: 0; font-size: 14px; } @media (max-width: 719px) { body.woocommerce-order-received .lg-main > .lg-container { padding-inline: 12px !important; } .lg-ty { padding-top: 12px; } } @media (min-width: 720px) { .lg-ty__facts { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; } .lg-ty__facts > div:nth-child(n+3) { border-top: 0; } .lg-ty__title { font-size: 32px; } } /* Stripe express buttons never on PDP / cart drawer */ body.single-product #wc-stripe-express-checkout-element, body.single-product #wc-stripe-payment-request-wrapper, body.single-product #wc-stripe-payment-request-button-separator, body.single-product #wc-stripe-express-checkout-button-separator, body.single-product .wc-stripe-product-checkout-container, body.single-product .wcpay-payment-request-wrapper, #lg-cart #wc-stripe-express-checkout-element, #lg-cart #wc-stripe-payment-request-wrapper { display: none !important; } /* Thank-you inside the block template */ body.woocommerce-order-received .wp-block-woocommerce-order-confirmation-status { all: unset; display: block; } body.woocommerce-order-received h1.wp-block-post-title, body.woocommerce-order-received .wp-block-post-title { display: none !important; } /* ===================================================================== CHECKOUT v3 — bottom area: one summary card, trust card, no empty rows ===================================================================== */ /* Actions block is a plain stack (no outer card → no box-in-box) */ .wc-block-checkout .wp-block-woocommerce-checkout-actions-block, .wc-block-checkout .wc-block-checkout__actions { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 0 12px !important; box-shadow: none !important; } /* Trust note = its own small card */ .lg-co-trust { background: #fff !important; border: 1px solid #E4E2DB !important; border-radius: 12px !important; padding: 14px 16px !important; margin: 0 0 12px !important; } /* Summary: a single card, title inside it */ .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block { background: #fff !important; border: 1px solid #E4E2DB !important; border-radius: 12px !important; padding: 0 !important; margin: 0 0 12px !important; overflow: hidden; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block * { box-shadow: none !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__content, .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary, .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wp-block-woocommerce-checkout-order-summary-cart-items-block, .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-panel, .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper, .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-footer-item { border: 0 !important; border-radius: 0 !important; margin: 0 !important; background: transparent !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title, .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block > h2, .wc-block-checkout .wc-block-components-checkout-order-summary__title { display: block; margin: 0 !important; padding: 16px 16px 4px !important; font: 700 16px/1.2 var(--font-display) !important; text-transform: none !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary { padding: 0 16px !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper { padding: 0 16px !important; } /* hide empty total rows (shipping/fees/taxes with nothing in them) */ .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper:empty, .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper:not(:has(.wc-block-components-totals-item, .wc-block-components-totals-coupon, .wc-block-components-panel, .wc-block-components-totals-shipping, .wc-block-components-order-summary, .wc-block-components-order-summary-item, img, form, input, button)) { display: none !important; } /* separators */ .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-coupon-form-block, .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-subtotal-block { border-top: 1px solid #EFEDE6 !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-totals-block { padding: 6px 0 !important; } .wc-block-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button { padding: 14px 0 !important; margin: 0 !important; font: 500 14px/1.2 var(--font-body) !important; } .wc-block-checkout .wc-block-components-totals-item { padding: 6px 0 !important; } .wc-block-checkout .wc-block-components-totals-footer-item { padding: 14px 16px !important; border-top: 1px solid #EFEDE6 !important; margin: 0 !important; } .wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item { padding: 0 !important; } /* items: tidy grid, meta aligned with the name */ .wc-block-checkout .wc-block-components-order-summary-item { grid-template-columns: 56px minmax(0,1fr) auto !important; column-gap: 12px !important; padding: 14px 0 !important; } .wc-block-checkout .wc-block-components-order-summary-item__description { min-width: 0; } .wc-block-checkout .wc-block-components-order-summary-item__description > * { margin-left: 0 !important; padding-left: 0 !important; } .wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-metadata, .wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-details { margin: 4px 0 0 !important; padding: 0 !important; list-style: none; font-size: 12px !important; line-height: 1.45 !important; color: #5E5C56 !important; } .wc-block-checkout .wc-block-components-product-details li { display: block !important; margin: 0 !important; } .wc-block-checkout .wc-block-components-product-details li::after { content: none !important; } .wc-block-checkout .wc-block-components-order-summary-item__total-price { text-align: right; } .wc-block-checkout .wc-block-components-order-summary-item__total-price .wc-block-components-product-price__value { font: 700 14px/1 var(--font-body) !important; } /* ===================================================================== CHECKOUT v4 — flatter payment box, clean summary edges, quieter legal ===================================================================== */ /* Summary: no inner frames, one 16px gutter everywhere */ .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper, .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wp-block-woocommerce-checkout-order-summary-cart-items-block, .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary, .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary__content, .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-panel, .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__content { border-left: 0 !important; border-right: 0 !important; border-bottom: 0 !important; outline: 0 !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary { padding: 0 !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper { padding: 0 16px !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title, .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block > h2 { padding: 16px 16px 2px !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-cart-items-block { border-top: 0 !important; } .wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-metadata, .wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-details { margin-top: 2px !important; } .wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name { margin-bottom: 2px !important; } .wc-block-checkout .wc-block-components-order-summary-item .wc-block-components-product-badge, .wc-block-checkout .wc-block-components-order-summary-item .wc-block-components-sale-badge { margin-top: 4px !important; } /* Payment: one light frame around the method instead of a black box around Stripe's own box */ .wc-block-checkout .wc-block-components-radio-control-accordion-option, .wc-block-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted, .wc-block-checkout .wc-block-components-radio-control--highlight-checked::after { border: 1px solid #E4E2DB !important; border-radius: 10px !important; box-shadow: none !important; } .wc-block-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option { padding: 14px 14px 10px 44px !important; } .wc-block-checkout .wc-block-components-radio-control-accordion-content { padding: 0 12px 12px !important; } .wc-block-checkout .wc-block-components-radio-control-accordion-content > p, .wc-block-checkout .wc-block-components-radio-control-accordion-content .testmode-info { margin: 0 2px 10px !important; font-size: 12.5px !important; line-height: 1.4; color: #5E5C56; } .wc-block-checkout .wc-block-components-radio-control__label-group .wc-block-components-payment-method-label { font-weight: 600 !important; } /* Legal text: plain small print, no card */ .wc-block-checkout .wc-block-checkout__terms { background: transparent !important; border: 0 !important; padding: 2px 4px 0 !important; margin: 0 0 12px !important; text-align: center; font-size: 12px !important; color: #8E8B82 !important; } .wc-block-checkout .wc-block-checkout__terms a { color: #5E5C56 !important; } /* Express pay title sits cleanly inside its card */ .wc-block-checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container { position: static !important; display: block !important; margin: 0 0 10px !important; } .wc-block-checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container::before, .wc-block-checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container::after { display: none !important; } .wc-block-checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title { position: static !important; padding: 0 !important; text-align: left; font: 700 15px/1.2 var(--font-display) !important; color: #0A0A0A !important; } /* WhatsApp support button */ .lg-wa { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60; display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 18px 0 14px; border-radius: 26px; background: #25D366; color: #fff; text-decoration: none; font: 700 14px/1 var(--font-body); box-shadow: 0 6px 18px rgba(0,0,0,.18); transition: transform .16s var(--ease), background .16s var(--ease); } .lg-wa:hover { background: #1EBE5B; color: #fff; transform: translateY(-1px); } .lg-wa svg { flex: none; } @media (max-width: 719px) { .lg-wa { width: 52px; padding: 0; justify-content: center; } .lg-wa__label { display: none; } /* PDP: sit above the sticky buy bar */ body.single-product .lg-wa { bottom: calc(84px + env(safe-area-inset-bottom)); } } html.lg-scroll-lock .lg-wa { display: none; } /* WhatsApp on product pages: always on top of the sticky buy bar, never under it */ .lg-wa { z-index: 9000 !important; } body.single-product .lg-wa { display: inline-flex !important; } html.lg-scroll-lock body.single-product .lg-wa, html.lg-scroll-lock .lg-wa { display: none !important; } /* WhatsApp: same position on every page */ body.single-product .lg-wa { bottom: calc(16px + env(safe-area-inset-bottom)) !important; } /* ===================================================================== CHECKOUT mobile top — one compact block: summary toggle + express pay ===================================================================== */ @media (max-width: 719px) { /* Order summary toggle: full-width bar, no floating pill */ .wc-block-checkout .wc-block-components-checkout-order-summary__title, .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-panel__button, .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title { display: flex !important; align-items: center !important; gap: 10px !important; min-height: 56px !important; padding: 0 16px !important; margin: 0 !important; background: #fff !important; border: 1px solid #E4E2DB !important; border-radius: 10px !important; box-shadow: none !important; } .wc-block-checkout .wc-block-components-checkout-order-summary__title-text, .wc-block-checkout .wc-block-components-checkout-order-summary__title p { margin: 0 !important; font: 600 15px/1.2 var(--font-body) !important; color: #0A0A0A !important; flex: 1; } .wc-block-checkout .wc-block-components-checkout-order-summary__title-price { margin-left: auto !important; font: 700 16px/1 var(--font-body) !important; font-variant-numeric: tabular-nums; color: #D00012 !important; } .wc-block-checkout .wc-block-components-checkout-order-summary__title-icon { width: 20px !important; height: 20px !important; fill: #5E5C56 !important; } .wc-block-checkout .wc-block-components-checkout-order-summary__title.is-open, .wc-block-checkout .wc-block-components-checkout-order-summary__title[aria-expanded="true"] { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; border-bottom-color: transparent !important; } /* Wrapper blocks that drew the extra outer card */ .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block, .wc-block-checkout .wc-block-components-checkout-order-summary, .wc-block-checkout__main > .wc-block-components-checkout-order-summary { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 12px !important; } /* Express pay: no card, small centered label, slimmer buttons */ .wc-block-checkout .wc-block-components-express-payment--checkout, .wc-block-checkout .wp-block-woocommerce-checkout-express-payment-block { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 4px 0 0 !important; } .wc-block-checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container { position: static !important; display: block !important; margin: 0 0 10px !important; text-align: center !important; } .wc-block-checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title { display: block !important; text-align: center !important; font: 600 12px/1.2 var(--font-body) !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: #5E5C56 !important; padding: 0 !important; background: none !important; } .wc-block-checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__content { padding: 0 !important; border: 0 !important; background: transparent !important; } .wc-block-checkout .wc-block-components-express-payment__event-buttons { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .wc-block-checkout .wc-block-components-express-payment__event-buttons > li { margin: 0 !important; padding: 0 !important; width: auto !important; min-width: 0 !important; } .wc-block-checkout .wc-block-components-express-payment__event-buttons > li:only-child { grid-column: 1 / -1; } .wc-block-checkout .wc-block-components-express-payment__event-buttons iframe, .wc-block-checkout .wc-block-components-express-payment__event-buttons button { height: 48px !important; min-height: 48px !important; border-radius: 8px !important; } /* "O continúa abajo" divider */ .wc-block-checkout .wc-block-components-express-payment-continue-rule { display: flex !important; align-items: center; gap: 12px; margin: 16px 0 8px !important; font: 500 12px/1 var(--font-body) !important; color: #8E8B82 !important; text-transform: none !important; } .wc-block-checkout .wc-block-components-express-payment-continue-rule::before, .wc-block-checkout .wc-block-components-express-payment-continue-rule::after { content: ""; flex: 1; height: 1px; background: #E4E2DB; margin: 0 !important; } } /* Checkout mobile: opened summary = one white card attached to the bar */ @media (max-width: 719px) { .wc-block-checkout .wc-block-components-checkout-order-summary__content, .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__content { background: #fff !important; border: 1px solid #E4E2DB !important; border-top: 0 !important; border-radius: 0 0 10px 10px !important; padding: 4px 0 8px !important; margin: 0 !important; } .wc-block-checkout .wc-block-components-checkout-order-summary__content .wc-block-components-totals-wrapper { padding: 12px 16px !important; border-top: 1px solid #E4E2DB !important; } .wc-block-checkout .wc-block-components-checkout-order-summary__content .wc-block-components-order-summary-item { padding: 12px 16px !important; } /* coupon row flat inside the card */ .wc-block-checkout .wc-block-components-checkout-order-summary__content .wc-block-components-totals-coupon, .wc-block-checkout .wc-block-components-checkout-order-summary__content .wc-block-components-panel { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .wc-block-checkout .wc-block-components-checkout-order-summary__content .wc-block-components-panel__button { padding: 0 !important; min-height: 24px !important; font-weight: 500 !important; } /* total row tighter, same red, a bit lighter */ .wc-block-checkout .wc-block-components-checkout-order-summary__content .wc-block-components-totals-footer-item { padding-top: 4px !important; } .wc-block-checkout .wc-block-components-checkout-order-summary__content .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font: 700 16px/1.2 var(--font-body) !important; } .wc-block-checkout .wc-block-components-checkout-order-summary__content .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font: 800 20px/1 var(--font-body) !important; color: #D00012 !important; } /* savings chip smaller */ .wc-block-checkout .wc-block-components-checkout-order-summary__content .wc-block-components-sale-badge { font-size: 11px !important; padding: 2px 6px !important; } } /* Checkout: payment = one clean card (no frame-in-frame-in-frame) */ .wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option, .wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control--highlight-checked::after, .wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted { border: 0 !important; box-shadow: none !important; background: transparent !important; } .wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control--highlight-checked { border: 0 !important; } /* Only one method → no radio row, just the card fields */ .wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control:has(> .wc-block-components-radio-control-accordion-option:only-child) .wc-block-components-radio-control__option { display: none !important; } .wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-content { padding: 0 !important; } /* Multiple methods → light rows with a hairline between */ .wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option + .wc-block-components-radio-control-accordion-option { border-top: 1px solid #E4E2DB !important; } .wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control__option { padding: 12px 0 12px 32px !important; } .wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control__input { left: 0 !important; } .wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control__input:checked { border-color: #D00012 !important; } .wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control__input:checked::before { background: #D00012 !important; } /* Payment: hide the single "Tarjeta" accordion title row — card fields only */ .wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control__option { display: none !important; } .wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control:has(> .wc-block-components-radio-control-accordion-option + .wc-block-components-radio-control-accordion-option) .wc-block-components-radio-control__option { display: flex !important; } .wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-content { padding: 0 !important; } /* ===================================================================== CHECKOUT summary v3 — one gutter (16px), one divider style, clear item row ===================================================================== */ .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper { padding: 14px 16px !important; margin: 0 !important; border: 0 !important; border-top: 1px solid #E4E2DB !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper:empty, .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper:has(> :empty:only-child) { display: none !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper::before, .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper::after { display: none !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item { padding: 0 !important; margin: 0 !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item + .wc-block-components-totals-item { margin-top: 8px !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item__label { font: 400 14px/1.3 var(--font-body) !important; color: #3A3934 !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item__value { font: 600 14px/1.3 var(--font-body) !important; font-variant-numeric: tabular-nums; color: #0A0A0A !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-footer-item { padding: 0 !important; align-items: baseline !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font: 700 16px/1.2 var(--font-body) !important; color: #0A0A0A !important; padding: 0 !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font: 800 20px/1 var(--font-body) !important; color: #D00012 !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-footer-item .wc-block-components-totals-item__description { display: none !important; } /* Item row: 56px photo · name/size · price column */ .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary { padding: 0 !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item { display: grid !important; grid-template-columns: 56px minmax(0,1fr) auto !important; column-gap: 12px !important; align-items: start !important; padding: 14px 16px !important; margin: 0 !important; border: 0 !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item + .wc-block-components-order-summary-item { border-top: 1px solid #E4E2DB !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__image { position: relative !important; width: 56px !important; margin: 0 !important; padding: 0 !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__image img { width: 56px !important; height: 70px !important; object-fit: cover !important; border-radius: 6px !important; background: #F5F4EF; display: block; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__quantity { top: -6px !important; right: -6px !important; left: auto !important; min-width: 20px !important; height: 20px !important; padding: 0 5px !important; border: 2px solid #fff !important; background: #0A0A0A !important; color: #fff !important; font: 700 11px/16px var(--font-body) !important; border-radius: 999px !important; box-shadow: none !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__description { padding: 0 !important; margin: 0 !important; min-width: 0; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__description .wc-block-components-product-name { display: block; font: 600 14px/1.3 var(--font-body) !important; color: #0A0A0A !important; margin: 0 0 4px !important; text-wrap: pretty; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__description .wc-block-components-product-metadata, .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__description .wc-block-components-product-details { margin: 0 !important; font: 400 12.5px/1.35 var(--font-body) !important; color: #5E5C56 !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__description .wc-block-components-product-price, .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__description .wc-block-components-order-summary-item__individual-prices { display: none !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__total-price { display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 4px !important; margin: 0 !important; padding: 0 !important; font: 700 14px/1.2 var(--font-body) !important; font-variant-numeric: tabular-nums; color: #0A0A0A !important; white-space: nowrap; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__total-price .wc-block-components-sale-badge, .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item .wc-block-components-sale-badge { margin: 0 !important; padding: 2px 6px !important; font: 700 10.5px/1.3 var(--font-body) !important; border-radius: 4px !important; white-space: nowrap; } /* Coupon: plain row, same gutter, no pill */ .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-coupon, .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-coupon .wc-block-components-panel { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-coupon .wc-block-components-panel__button { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; min-height: 24px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font: 500 14px/1.3 var(--font-body) !important; color: #0A0A0A !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-coupon .wc-block-components-panel__button-icon { position: static !important; width: 20px !important; height: 20px !important; fill: #5E5C56 !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-coupon .wc-block-components-panel__content { padding: 10px 0 0 !important; } /* Summary v4 fixes */ /* hide empty slot wrappers (the double line) */ .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper:not(:has(.wc-block-components-totals-item, .wc-block-components-totals-coupon, .wc-block-components-panel, .wc-block-components-totals-discount, .wc-block-components-totals-shipping)) { display: none !important; } /* item: photo left, name + size on top, price + chip on one line below */ .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item { grid-template-columns: 64px minmax(0,1fr) !important; grid-template-rows: auto auto !important; row-gap: 8px !important; column-gap: 14px !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__image { grid-column: 1 !important; grid-row: 1 / span 2 !important; width: 64px !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__image img { width: 64px !important; height: 80px !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__image > .wc-block-components-order-summary-item__quantity { position: absolute !important; inset: -7px -7px auto auto !important; transform: none !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__description { grid-column: 2 !important; grid-row: 1 !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__total-price { grid-column: 2 !important; grid-row: 2 !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; font-size: 15px !important; } /* coupon: label left, chevron right */ .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-coupon .wc-block-components-panel__button { flex-direction: row-reverse !important; justify-content: space-between !important; text-align: left !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-coupon .wc-block-components-panel__button-icon { margin: 0 !important; } /* Summary v5: photo back — WooCommerce nests the image and badge inside __image; never hide/collapse it */ .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__image { display: block !important; visibility: visible !important; overflow: visible !important; min-width: 64px !important; height: 80px !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__image img { display: block !important; visibility: visible !important; opacity: 1 !important; max-width: none !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__image .wc-block-components-order-summary-item__quantity { position: absolute !important; top: -7px !important; right: -7px !important; left: auto !important; bottom: auto !important; z-index: 1; } /* if the theme's earlier rule hid empty wrappers too broadly, keep the items wrapper visible */ .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper:has(.wc-block-components-order-summary, .wc-block-components-order-summary-item) { display: block !important; } /* ===================================================================== CHECKOUT summary — approved fixes 1–8 (top + bottom, both compact) ===================================================================== */ /* 1. "Checkout" title closer to the summary */ .woocommerce-checkout .lg-checkout__title, .woocommerce-checkout .entry-title, .woocommerce-checkout h1.wp-block-post-title { margin-bottom: 16px !important; } .woocommerce-checkout .wc-block-checkout { margin-top: 0 !important; padding-top: 0 !important; } .woocommerce-checkout .wc-block-checkout__main > :first-child, .woocommerce-checkout .wc-block-checkout > :first-child { margin-top: 0 !important; } /* 2. Summary bar text */ .wc-block-checkout .wc-block-components-checkout-order-summary__title-text, .wc-block-checkout .wc-block-components-checkout-order-summary__title p { font: 600 15px/1.2 var(--font-body) !important; } .wc-block-checkout .wc-block-components-checkout-order-summary__title-price { font: 700 16px/1 var(--font-body) !important; } /* 3 + 4 + 5. Item row — compact; price + chip on one line under the name */ .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item { grid-template-columns: 52px minmax(0,1fr) !important; column-gap: 12px !important; row-gap: 6px !important; padding: 12px 16px !important; align-items: start !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__image { width: 52px !important; min-width: 52px !important; height: 65px !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__image img { width: 52px !important; height: 65px !important; object-fit: contain !important; background: #F5F4EF !important; border-radius: 6px !important; padding: 2px; box-sizing: border-box; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__description .wc-block-components-product-name { font: 600 14px/1.3 var(--font-body) !important; margin: 0 0 2px !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__description .wc-block-components-product-metadata, .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__description .wc-block-components-product-details { font: 400 12.5px/1.3 var(--font-body) !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__total-price { grid-column: 2 !important; grid-row: 2 !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; width: auto !important; margin: 0 !important; padding: 0 !important; text-align: left !important; font: 700 14px/1.2 var(--font-body) !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__total-price > * { margin: 0 !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item .wc-block-components-sale-badge { font: 700 11px/1.3 var(--font-body) !important; padding: 2px 7px !important; border-radius: 4px !important; } /* 6. Coupon row aligned to the 16px gutter, chevron inside it */ .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-coupon .wc-block-components-panel__button { padding: 0 !important; width: 100% !important; box-sizing: border-box; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-coupon .wc-block-components-panel__button-icon { position: static !important; transform: none !important; margin: 0 !important; } /* 7. Subtotal / Total */ .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper { padding: 12px 16px !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item__label { font: 400 14px/1.3 var(--font-body) !important; color: #0A0A0A !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item__value { font: 600 14px/1.3 var(--font-body) !important; color: #0A0A0A !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font: 700 16px/1.2 var(--font-body) !important; } .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font: 800 18px/1 var(--font-body) !important; color: #D00012 !important; } /* 8. Both summaries compact: bottom one = same card as the top one, tight title */ .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block, .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block { background: #fff !important; border: 1px solid #E4E2DB !important; border-radius: 10px !important; padding: 0 !important; margin: 0 0 12px !important; box-shadow: none !important; overflow: hidden; } .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title, .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title { min-height: 0 !important; padding: 14px 16px 10px !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; font: 700 15px/1.2 var(--font-body) !important; } .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__content { border: 0 !important; border-radius: 0 !important; padding: 0 !important; } .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-cart-items-block { border-top: 1px solid #E4E2DB !important; } /* ===================================================================== CHECKOUT v6 — flat one-page layout (reference: clean single column) ===================================================================== */ /* No page title — header only */ body.woocommerce-checkout:not(.woocommerce-order-received) .entry-title, body.woocommerce-checkout:not(.woocommerce-order-received) h1.wp-block-post-title, body.woocommerce-checkout:not(.woocommerce-order-received) .lg-checkout__title, body.woocommerce-checkout:not(.woocommerce-order-received) .lg-page__title { display: none !important; } body.woocommerce-checkout:not(.woocommerce-order-received) .lg-main { padding-top: 0 !important; background: #fff !important; } body.woocommerce-checkout:not(.woocommerce-order-received) { background: #fff !important; } @media (max-width: 719px) { /* Express pay first, right after the summary bar */ .wc-block-checkout__main { display: flex !important; flex-direction: column !important; } .wc-block-checkout__main > .wc-block-components-checkout-order-summary, .wc-block-checkout__main > .wp-block-woocommerce-checkout-order-summary-block { order: -3 !important; } .wc-block-checkout .wp-block-woocommerce-checkout-fields-block { display: flex !important; flex-direction: column !important; } .wc-block-checkout .wp-block-woocommerce-checkout-express-payment-block, .wc-block-checkout .wc-block-components-express-payment--checkout { order: -2 !important; } .wc-block-checkout .wc-block-components-express-payment-continue-rule { order: -1 !important; } /* Flat sections: no cards, just spacing + bold titles */ .wc-block-checkout .wc-block-components-checkout-step { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 28px !important; } .wc-block-checkout .wc-block-components-checkout-step__heading { margin: 0 0 12px !important; padding: 0 !important; } .wc-block-checkout .wc-block-components-checkout-step__title { font: 700 18px/1.2 var(--font-display) !important; color: #0A0A0A !important; } .wc-block-checkout .wc-block-components-checkout-step__container, .wc-block-checkout .wc-block-components-checkout-step__content { padding: 0 !important; } .wc-block-checkout .wc-block-components-checkout-step__description { font-size: 12.5px !important; color: #5E5C56 !important; margin: 0 0 10px !important; } .wc-block-checkout .wc-block-components-checkout-step::before, .wc-block-checkout .wc-block-components-checkout-step::after { display: none !important; } .wc-block-checkout .wc-block-components-text-input, .wc-block-checkout .wc-block-components-combobox, .wc-block-checkout .wc-block-components-country-input, .wc-block-checkout .wc-block-components-state-input { margin-top: 10px !important; } .wc-block-checkout .wc-block-components-text-input input, .wc-block-checkout .wc-block-components-combobox input, .wc-block-checkout .wc-blocks-components-select__select { border: 1px solid #E4E2DB !important; border-radius: 8px !important; background: #fff !important; box-shadow: none !important; } /* Summary bar: full-bleed light band */ .wc-block-checkout__main > .wc-block-components-checkout-order-summary, .wc-block-checkout__main > .wp-block-woocommerce-checkout-order-summary-block { margin: 0 -16px 20px !important; } .wc-block-checkout .wc-block-components-checkout-order-summary__title { min-height: 52px !important; border: 0 !important; border-top: 1px solid #E4E2DB !important; border-bottom: 1px solid #E4E2DB !important; border-radius: 0 !important; background: #F5F4EF !important; padding: 0 16px !important; } .wc-block-checkout .wc-block-components-checkout-order-summary__title-text { font: 500 14px/1.2 var(--font-body) !important; } .wc-block-checkout .wc-block-components-checkout-order-summary__title-price { font: 700 16px/1 var(--font-body) !important; } .wc-block-checkout .wc-block-components-checkout-order-summary__content { border: 0 !important; border-bottom: 1px solid #E4E2DB !important; border-radius: 0 !important; background: #F5F4EF !important; } .wc-block-checkout .wc-block-components-checkout-order-summary__content .wc-block-components-totals-wrapper { border-top-color: #E4E2DB !important; } /* Express pay: no card, small centered label, "o" divider */ .wc-block-checkout .wc-block-components-express-payment--checkout { margin: 0 0 4px !important; } .wc-block-checkout .wc-block-components-express-payment__title { font: 500 13px/1.2 var(--font-body) !important; letter-spacing: 0 !important; text-transform: none !important; color: #5E5C56 !important; } .wc-block-checkout .wc-block-components-express-payment-continue-rule { margin: 14px 0 22px !important; text-transform: uppercase !important; font-size: 12px !important; } /* Payment: one bordered box, method header on a light band */ .wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control { border: 1px solid #E4E2DB !important; border-radius: 10px !important; overflow: hidden; } .wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-content { padding: 12px !important; } .wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control__option { display: flex !important; background: #F5F4EF !important; border-bottom: 1px solid #E4E2DB !important; padding: 14px 14px 14px 44px !important; margin: 0 !important; } .wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control__input { left: 14px !important; } /* Bottom summary (sidebar) flat too */ .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block { border: 0 !important; border-top: 1px solid #E4E2DB !important; border-radius: 0 !important; margin: 8px -16px 12px !important; } .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title, .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title { background: transparent !important; border: 0 !important; font: 700 18px/1.2 var(--font-display) !important; padding: 20px 16px 8px !important; } .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__content { background: transparent !important; border: 0 !important; } /* Place order + legal */ .wc-block-checkout .wc-block-components-checkout-place-order-button { min-height: 54px !important; border-radius: 10px !important; font: 800 15px/1 var(--font-body) !important; letter-spacing: .02em; } .wc-block-checkout .wc-block-checkout__terms { text-align: left !important; color: #5E5C56 !important; padding: 0 !important; } } /* Checkout: title gone, content starts right below the header */ body.woocommerce-checkout:not(.woocommerce-order-received) .lg-page > h1 { display: none !important; } body.woocommerce-checkout:not(.woocommerce-order-received) .lg-main { padding-top: 0 !important; } /* Summary item: name + size full width; price and "Ahorra" side by side on one row */ .wc-block-checkout .wc-block-components-order-summary-item { grid-template-columns: 52px auto minmax(0,1fr) !important; grid-template-rows: auto auto auto !important; row-gap: 4px !important; column-gap: 12px !important; } .wc-block-checkout .wc-block-components-order-summary-item__image { grid-column: 1 !important; grid-row: 1 / span 3 !important; } .wc-block-checkout .wc-block-components-order-summary-item__description { display: contents !important; } .wc-block-checkout .wc-block-components-order-summary-item__description > * { grid-column: 2 / span 2 !important; min-width: 0; } .wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name { grid-row: 1 !important; } .wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-metadata, .wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-details { grid-row: 2 !important; } .wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-price, .wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-order-summary-item__individual-prices { display: none !important; } .wc-block-checkout .wc-block-components-order-summary-item__total-price { grid-column: 2 !important; grid-row: 3 !important; display: block !important; align-self: center !important; justify-self: start !important; margin: 4px 0 0 !important; padding: 0 !important; font: 700 15px/1 var(--font-body) !important; white-space: nowrap; } .wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-sale-badge, .wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-badge, .wc-block-checkout .wc-block-components-order-summary-item > .wc-block-components-sale-badge { grid-column: 3 !important; grid-row: 3 !important; justify-self: start !important; align-self: center !important; margin: 4px 0 0 !important; } .wc-block-checkout .wc-block-components-order-summary-item__total-price .wc-block-components-sale-badge { margin-left: 8px !important; display: inline-block !important; vertical-align: middle; } /* ===================================================================== CHECKOUT v7 — approved list (2–10) ===================================================================== */ /* 2. Summary bar right under the header */ body.woocommerce-checkout:not(.woocommerce-order-received) .lg-main, body.woocommerce-checkout:not(.woocommerce-order-received) .lg-page, body.woocommerce-checkout:not(.woocommerce-order-received) .lg-prose { padding-top: 0 !important; margin-top: 0 !important; } body.woocommerce-checkout:not(.woocommerce-order-received) .lg-prose > :first-child, .wc-block-checkout .wc-block-components-sidebar-layout, .wc-block-checkout__main { margin-top: 0 !important; padding-top: 0 !important; } @media (max-width: 719px) { .wc-block-checkout__main > .wc-block-components-checkout-order-summary, .wc-block-checkout__main > .wp-block-woocommerce-checkout-order-summary-block { margin-top: 0 !important; } .wc-block-checkout .wc-block-components-checkout-order-summary__title { border-top: 0 !important; } } /* 3. Section titles close to their first field */ .wc-block-checkout .wc-block-components-checkout-step__heading { margin: 0 0 4px !important; min-height: 0 !important; } .wc-block-checkout .wc-block-components-checkout-step__heading-content, .wc-block-checkout .wc-block-components-checkout-step__description { margin-bottom: 4px !important; } .wc-block-checkout .wc-block-components-address-form > :first-child, .wc-block-checkout .wc-block-components-checkout-step__content > :first-child { margin-top: 6px !important; } /* 4. Payment: a single border */ .wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-content, .wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-content > div, .wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option { border: 0 !important; box-shadow: none !important; border-radius: 0 !important; background: transparent !important; } .wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-checkout-step__content, .wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-checkout-step__container { border: 0 !important; background: transparent !important; padding: 0 !important; } /* 5. Our price line replaces WooCommerce's (built by main.js) */ .wc-block-checkout .wc-block-components-order-summary-item.lg-has-pline .wc-block-components-order-summary-item__total-price, .wc-block-checkout .wc-block-components-order-summary-item.lg-has-pline .wc-block-components-sale-badge, .wc-block-checkout .wc-block-components-order-summary-item.lg-has-pline .wc-block-components-product-badge { display: none !important; } .wc-block-checkout .wc-block-components-order-summary-item.lg-has-pline { display: flex !important; gap: 12px !important; align-items: flex-start !important; } .wc-block-checkout .wc-block-components-order-summary-item.lg-has-pline .wc-block-components-order-summary-item__description { display: block !important; flex: 1; min-width: 0; } .wc-block-checkout .wc-block-components-order-summary-item.lg-has-pline .wc-block-components-order-summary-item__description > * { grid-column: auto !important; grid-row: auto !important; } .lg-pline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .lg-pline__now { font: 700 15px/1 var(--font-body); color: #0A0A0A; font-variant-numeric: tabular-nums; } .lg-pline__off { display: inline-block; padding: 3px 7px; border-radius: 4px; background: #F9C21A; color: #0A0A0A; font: 700 11px/1.2 var(--font-body); white-space: nowrap; } /* 7. Guarantees right above the button */ .wc-block-checkout .lg-co-trust { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 4px 0 14px !important; gap: 6px !important; font-size: 13px !important; color: #3A3934; } .wc-block-checkout .lg-co-trust li::before { color: #D00012 !important; } /* 8. Legal text under the button */ .wc-block-checkout .wc-block-checkout__terms.lg-moved { order: 99; margin: 12px 0 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; text-align: left !important; font-size: 12px !important; line-height: 1.45; color: #5E5C56 !important; } .wc-block-checkout .wc-block-checkout__terms.lg-moved a { color: #3A3934 !important; text-decoration: underline; text-underline-offset: 2px; } /* 9. No order notes */ .wc-block-checkout .wp-block-woocommerce-checkout-order-note-block, .wc-block-checkout .wc-block-checkout__add-note { display: none !important; } /* 10. "Añadir apartamento…" as quiet small text */ .wc-block-checkout .wc-block-components-address-form__address_2-toggle { text-decoration: none !important; font: 400 12.5px/1.3 var(--font-body) !important; color: #5E5C56 !important; padding: 2px 0 !important; margin-top: 6px !important; display: inline-block; } .wc-block-checkout .wc-block-components-address-form__address_2-toggle:hover { color: #0A0A0A !important; } /* Desktop mega menu — opened by JS with hover intent (no flicker, no stuck menus) */ @media (min-width: 1080px) { .lg-nav__list > li:hover > .sub-menu, .lg-nav__list > li:focus-within > .sub-menu { opacity: 0 !important; visibility: hidden !important; transform: translateY(-4px) !important; } .lg-nav__list > li.is-open > .sub-menu { opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto; } .lg-nav__list > li > .sub-menu { pointer-events: none; transition: opacity 140ms var(--ease), transform 140ms var(--ease), visibility 0s linear 140ms !important; } .lg-nav__list > li.is-open > .sub-menu { transition: opacity 140ms var(--ease), transform 140ms var(--ease), visibility 0s !important; } /* invisible bridge between the link and the panel so the pointer never "falls" through */ .lg-nav__list > li > .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } .lg-nav__list > li.is-open > a { color: var(--goat-blue); } .lg-nav__list > li.is-open.menu-item-has-children > a::after { transform: rotate(-135deg) translate(-2px, -2px); } } /* Mobile menu: WhatsApp support link (replaces the help links) */ #lg-menu .lg-mnav__wa { display: flex; align-items: center; gap: 10px; margin: 20px 0 12px; padding: 0 16px; min-height: 48px; border-radius: 999px; background: #25D366; color: #fff !important; font: 700 15px/1 var(--font-body); text-decoration: none !important; align-self: flex-start; width: max-content; max-width: 100%; } #lg-menu .lg-mnav__wa:hover { background: #1EBE5A; } #lg-menu .lg-mnav__wa svg { flex: none; } .lg-footer__social { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } .lg-footer__mail { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; font: 500 14px/1.2 var(--font-body); } .lg-footer__mail:hover { text-decoration: underline; text-underline-offset: 3px; } .lg-footer__legal-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; } .lg-footer__legal-links a { color: inherit; } /* Policy pages */ .lg-page .lg-prose h2 { font: 700 20px/1.25 var(--font-display); margin: 32px 0 10px; } .lg-page .lg-prose h3 { font: 700 16px/1.3 var(--font-body); margin: 20px 0 6px; } .lg-page .lg-prose p, .lg-page .lg-prose li { font-size: 15px; line-height: 1.6; color: #262622; } .lg-page .lg-prose ul { padding-left: 20px; } .lg-footer__legal { display: flex; flex-direction: column; gap: 10px; } @media (min-width: 720px) { .lg-footer__legal { flex-direction: row; justify-content: space-between; align-items: center; } } .lg-footer__legal-links a { font-size: 13px; text-decoration: none; } .lg-footer__legal-links a:hover { text-decoration: underline; text-underline-offset: 3px; }