/* * Dsea Hub theme styles. * One stylesheet for the storefront, auth screens, account and WooCommerce pages. * WooCommerce's own frontend CSS is switched off (inc/assets.php), so everything it * outputs is styled here. * * Sections: 1 tokens · 2 base · 3 layout · 4 components · 5 header/nav/footer * 6 drawer/search/toast · 7 home · 8 shop/product · 9 cart/checkout · 10 auth * 11 account · 12 rewards · 13 tracking · 14 WooCommerce elements · 15 utilities/a11y */ /* 1. Tokens ---------------------------------------------------------------- */ :root { --blue-50: #EEF4FF; --blue-100: #D9E6FF; --blue-300: #8DB7FF; --blue-500: #1463F3; --blue-700: #0B47B8; --navy-900: #0A1A3A; --aqua-100: #D7F7F1; --aqua-500: #14D1B8; --aqua-700: #0A6B5E; --zest-500: #C8F25A; --coral-100: #FCE6E2; --coral-500: #C93C24; --coral-700: #A9301D; --amber-100: #FFF1D6; --amber-800: #7A4B00; --white: #FFFFFF; --surface-page: #F4F8FF; --surface-card: var(--white); --surface-muted: #E3ECFA; --ink: var(--navy-900); --ink-muted: #3B4D6B; --border: var(--blue-100); --border-control: #6E86AB; --focus: var(--blue-500); --font-display: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif; --font-body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px; --touch: 44px; --control: 48px; --bottomnav: 72px; --header: 64px; --gutter: 16px; --maxw: 1200px; --shadow-1: 0 1px 2px rgba(10, 26, 58, .06), 0 2px 8px rgba(10, 26, 58, .05); --shadow-2: 0 8px 28px rgba(10, 26, 58, .14); --ease: cubic-bezier(.2, .7, .2, 1); --safe-bottom: env(safe-area-inset-bottom, 0px); } @media (min-width: 768px) { :root { --gutter: 24px; --header: 72px; } } /* 2. Base ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header) + 16px); } body { margin: 0; background: var(--surface-page); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; padding-bottom: calc(var(--bottomnav) + var(--safe-bottom)); } body.dsea-focus, body.dsea-route-auth { padding-bottom: 0; } @media (min-width: 1024px) { body { padding-bottom: 0; } } img, svg, video { max-width: 100%; height: auto; } img { display: block; } svg.dsea-icon { flex: none; display: inline-block; vertical-align: middle; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .5em; color: var(--ink); } h1 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); } h2 { font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem); } h3 { font-size: 1.125rem; } p { margin: 0 0 1em; } a { color: var(--blue-700); text-underline-offset: 3px; } a:hover { color: var(--blue-500); } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; } hr { border: 0; border-top: 1px solid var(--border); margin: 24px 0; } table { border-collapse: collapse; width: 100%; } ::selection { background: var(--blue-100); } /* 3. Layout ---------------------------------------------------------------- */ .dsea-container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .dsea-main { padding-block: 16px 48px; min-height: 50vh; } @media (min-width: 768px) { .dsea-main { padding-block: 24px 64px; } } .dsea-section { margin-block: 40px; } @media (min-width: 768px) { .dsea-section { margin-block: 64px; } } .dsea-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .dsea-section-head > * { margin: 0; } .dsea-h1 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); } .dsea-h2 { font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem); } .dsea-h3 { font-size: 1.125rem; } .dsea-lead { font-size: 1.125rem; color: var(--ink-muted); max-width: 60ch; } .dsea-small { font-size: .875rem; color: var(--ink-muted); } .dsea-eyebrow { display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-700); margin-bottom: 8px; } .dsea-link { font-weight: 600; text-decoration: none; } .dsea-link:hover { text-decoration: underline; } .dsea-pagehead { margin-bottom: 24px; } .dsea-prose { max-width: 72ch; } .dsea-prose > :last-child { margin-bottom: 0; } .dsea-prose ul, .dsea-prose ol { padding-left: 1.25em; } .dsea-prose li { margin-bottom: .35em; } .dsea-prose img { border-radius: var(--r-md); } .dsea-prose table { margin-bottom: 1em; } .dsea-prose th, .dsea-prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); } .dsea-prose-page { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px var(--gutter); } @media (min-width: 768px) { .dsea-prose-page { padding: 40px 48px; } } .dsea-grid, ul.products { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 768px) { .dsea-grid, ul.products { gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1100px) { .dsea-grid, ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dsea-grid.dsea-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } } /* 4. Components ------------------------------------------------------------ */ /* Buttons. WooCommerce's .button is mapped onto the same look. */ .dsea-btn, .woocommerce .button, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button, .wc-block-components-button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--control); padding: 12px 22px; border: 2px solid transparent; border-radius: var(--r-md); background: var(--blue-500); color: var(--white); font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; text-align: center; white-space: nowrap; cursor: pointer; transition: background-color .15s var(--ease), border-color .15s, color .15s, transform .1s; -webkit-tap-highlight-color: transparent; } .dsea-btn:hover, .button:hover { background: var(--blue-700); color: var(--white); } .dsea-btn:active, .button:active { transform: translateY(1px); } .dsea-btn[disabled], .button[disabled], .button.disabled, .dsea-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; } .dsea-btn--primary { background: var(--blue-500); color: var(--white); } .dsea-btn--accent { background: var(--zest-500); color: var(--navy-900); } .dsea-btn--accent:hover { background: #B5E43F; color: var(--navy-900); } .dsea-btn--outline, .button.wc-backward, .woocommerce a.button.wc-forward:not(.checkout) { background: var(--white); color: var(--blue-700); border-color: var(--blue-100); } .dsea-btn--outline:hover, .button.wc-backward:hover, .woocommerce a.button.wc-forward:not(.checkout):hover { background: var(--blue-50); border-color: var(--blue-300); color: var(--blue-700); } .dsea-btn--block { display: flex; width: 100%; } .button.loading { opacity: .7; pointer-events: none; } .button.loading::after, .dsea-btn.is-loading::after { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: dsea-spin .7s linear infinite; } .button.added::after { content: "✓"; } @keyframes dsea-spin { to { transform: rotate(360deg); } } .dsea-linkbtn { background: none; border: 0; padding: 4px 6px; margin: -4px 0; color: var(--blue-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; min-height: 32px; } .dsea-linkbtn:hover { color: var(--blue-500); } .dsea-iconbtn { display: inline-flex; align-items: center; justify-content: center; position: relative; width: var(--touch); height: var(--touch); padding: 0; border: 0; border-radius: var(--r-md); background: transparent; color: var(--ink); text-decoration: none; transition: background-color .15s; } .dsea-iconbtn:hover { background: var(--blue-50); color: var(--blue-700); } /* Badges */ .dsea-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--r-pill); font-size: .8125rem; font-weight: 600; line-height: 1.4; white-space: nowrap; background: var(--blue-50); color: var(--blue-700); } .dsea-badge--success { background: var(--aqua-100); color: var(--aqua-700); } .dsea-badge--danger { background: var(--coral-100); color: var(--coral-700); } .dsea-badge--warning { background: var(--amber-100); color: var(--amber-800); } .dsea-badge--info { background: var(--blue-50); color: var(--blue-700); } .dsea-badge--neutral { background: var(--surface-muted); color: var(--ink-muted); } .dsea-badge--points { background: var(--navy-900); color: var(--zest-500); } .dsea-badge--zest { background: var(--zest-500); color: var(--navy-900); } /* Cards */ .dsea-card { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-lg); } .dsea-card--pad { padding: 20px; } @media (min-width: 768px) { .dsea-card--pad { padding: 24px; } } .dsea-card + .dsea-card, .dsea-card + section, section + .dsea-card { margin-top: 16px; } /* Alerts */ .dsea-alert { display: block; padding: 12px 16px; margin: 0 0 16px; border-radius: var(--r-md); border: 1px solid var(--blue-100); background: var(--blue-50); color: var(--navy-900); font-size: .9375rem; } .dsea-alert--success { background: var(--aqua-100); border-color: #A9EADF; color: #064a41; } .dsea-alert--error { background: var(--coral-100); border-color: #F5C2B8; color: var(--coral-700); } .dsea-alert--info { background: var(--blue-50); } .dsea-alert ul { margin: 0; padding-left: 1.1em; } /* Empty states */ .dsea-empty { text-align: center; padding: 32px 20px; display: flex; flex-direction: column; align-items: center; gap: 4px; } .dsea-empty__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--blue-50); color: var(--blue-500); display: grid; place-items: center; margin-bottom: 8px; } .dsea-empty__title { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; margin: 0; } .dsea-empty__text { color: var(--ink-muted); max-width: 40ch; margin: 0 0 12px; } /* Forms */ .dsea-form { display: grid; gap: 16px; } .dsea-form__grid { display: grid; gap: 16px; } @media (min-width: 600px) { .dsea-form__grid { grid-template-columns: 1fr 1fr; } } .dsea-form__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; } .dsea-field { display: grid; gap: 6px; } .dsea-field__label, .woocommerce form .form-row label, .woocommerce-form label { font-weight: 600; font-size: .9375rem; color: var(--ink); } .dsea-field__input, .woocommerce form .form-row .input-text, .woocommerce form .form-row select, .woocommerce form .form-row textarea, .dsea-wc input[type="text"], .dsea-wc input[type="email"], .dsea-wc input[type="tel"], .dsea-wc input[type="password"], .dsea-wc input[type="number"], .dsea-wc input[type="search"], .dsea-wc select, .dsea-wc textarea, .woocommerce .input-text, .woocommerce select, .woocommerce textarea { width: 100%; min-height: var(--control); padding: 12px 14px; border: 1.5px solid var(--border-control); border-radius: var(--r-md); background: var(--white); color: var(--ink); font-size: 1rem; line-height: 1.3; transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none; } .dsea-field__input--area, .woocommerce textarea { min-height: 120px; resize: vertical; } .woocommerce select, .dsea-wc select, select.dsea-field__input { padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233B4D6B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } .dsea-field__input:hover, .woocommerce .input-text:hover { border-color: var(--navy-900); } .dsea-field__input:focus, .woocommerce .input-text:focus, .woocommerce select:focus, .woocommerce textarea:focus, .dsea-wc input:focus, .dsea-wc select:focus, .dsea-wc textarea:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(20, 99, 243, .25); } .dsea-field__input[readonly] { background: var(--surface-page); } .dsea-field__help { font-size: .875rem; color: var(--ink-muted); } .dsea-field--error .dsea-field__input, .woocommerce form .form-row.woocommerce-invalid .input-text, .woocommerce form .form-row.woocommerce-invalid select { border-color: var(--coral-500); } .dsea-field--error .dsea-field__help { color: var(--coral-700); font-weight: 500; } .dsea-field--error .dsea-field__help::before { content: "! "; font-weight: 700; } .dsea-password { position: relative; } .dsea-password .dsea-field__input { padding-right: 76px; } .dsea-password__toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-width: 64px; height: 40px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--blue-700); font-weight: 600; font-size: .875rem; } .dsea-password__toggle:hover { background: var(--blue-50); } .dsea-check, .woocommerce-form__label-for-checkbox, .woocommerce form .form-row label.checkbox { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-weight: 500; min-height: var(--touch); padding-block: 10px; } .dsea-check input, .woocommerce-form__label-for-checkbox input, input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--blue-500); } /* Honeypot: present for bots, hidden from people and assistive tech. */ .dsea-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* Chips */ .dsea-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 calc(var(--gutter) * -1) 12px; padding-inline: var(--gutter); scrollbar-width: none; } .dsea-chips::-webkit-scrollbar { display: none; } .dsea-chip { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: var(--r-pill); border: 1.5px solid var(--border); background: var(--white); color: var(--ink); font-weight: 600; font-size: .9375rem; text-decoration: none; } .dsea-chip:hover { border-color: var(--blue-300); color: var(--blue-700); } .dsea-chip[aria-current="page"] { background: var(--navy-900); border-color: var(--navy-900); color: var(--white); } /* Accordions (product info, FAQ) */ .dsea-accordions { margin-top: 32px; border-top: 1px solid var(--border); } .dsea-accordion { border-bottom: 1px solid var(--border); } .dsea-accordion__head, .dsea-faq__item summary, .dsea-track__updates summary, .dsea-collapse summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 0; font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; } .dsea-accordion__head::-webkit-details-marker, .dsea-faq__item summary::-webkit-details-marker, .dsea-track__updates summary::-webkit-details-marker, .dsea-collapse summary::-webkit-details-marker { display: none; } .dsea-accordion__head::after, .dsea-faq__item summary::after, .dsea-track__updates summary::after, .dsea-collapse summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-right: 6px; border-right: 2.5px solid var(--ink-muted); border-bottom: 2.5px solid var(--ink-muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s var(--ease); } details[open] > .dsea-accordion__head::after, .dsea-faq__item[open] summary::after, .dsea-track__updates[open] summary::after, .dsea-collapse[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); } .dsea-accordion__body { padding: 0 0 20px; } .dsea-accordion__body > h2:first-child { display: none; } /* WooCommerce repeats the tab title. */ .dsea-faq { margin: 0; } .dsea-faq__item { border-bottom: 1px solid var(--border); } .dsea-faq__item > div, .dsea-faq__item > p { padding-bottom: 16px; color: var(--ink-muted); } /* Lists */ .dsea-ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .dsea-ticks li { position: relative; padding-left: 30px; } .dsea-ticks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--aqua-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230A6B5E' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center no-repeat; } .dsea-list { list-style: none; padding: 0; margin: 0; } .dsea-list li { padding: 12px 0; border-bottom: 1px solid var(--border); } .dsea-rowlink { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 14px 16px; color: var(--ink); text-decoration: none; font-weight: 600; background: var(--white); } .dsea-rowlink + .dsea-rowlink { border-top: 1px solid var(--border); } .dsea-rowlink::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--ink-muted); border-top: 2px solid var(--ink-muted); transform: rotate(45deg); } .dsea-rowlink:hover { background: var(--blue-50); color: var(--blue-700); } .dsea-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--blue-50); padding: 2px 8px; border-radius: 6px; font-size: .95em; letter-spacing: .04em; } .dsea-step { display: flex; align-items: center; gap: 12px; font-size: 1.25rem; margin: 0 0 16px; } .dsea-step__num { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--navy-900); color: var(--white); display: grid; place-items: center; font-size: 1rem; } /* Breadcrumbs */ .dsea-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: .875rem; color: var(--ink-muted); margin-bottom: 16px; } .dsea-crumbs a { color: var(--ink-muted); text-decoration: none; } .dsea-crumbs a:hover { color: var(--blue-700); text-decoration: underline; } .dsea-crumbs__sep { color: var(--border-control); } /* 5. Header, navigation, footer ------------------------------------------- */ .dsea-skip { position: absolute; left: 12px; top: -100px; z-index: 1000; background: var(--navy-900); color: var(--white); padding: 12px 16px; border-radius: var(--r-md); font-weight: 600; } .dsea-skip:focus { top: 12px; color: var(--white); } .dsea-banner { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px var(--gutter); background: var(--navy-900); color: var(--white); font-size: .875rem; font-weight: 500; text-align: center; } .dsea-banner .dsea-icon { color: var(--zest-500); } .dsea-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .94); border-bottom: 1px solid var(--border); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); } .admin-bar .dsea-header { top: 32px; } @media (max-width: 782px) { .admin-bar .dsea-header { top: 0; } } .dsea-header__inner { display: flex; align-items: center; gap: 12px; height: var(--header); } .dsea-header--focus .dsea-header__inner { justify-content: flex-start; } .dsea-header__secure { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 600; color: var(--aqua-700); } .dsea-header__actions { margin-left: auto; display: flex; align-items: center; gap: 4px; } .dsea-logo { display: inline-flex; align-items: center; flex: none; } .dsea-logo img { height: 32px; width: auto; } @media (min-width: 768px) { .dsea-logo img { height: 36px; } } .dsea-footer .dsea-logo img { height: 36px; } .dsea-nav-desktop { display: none; } @media (min-width: 1024px) { .dsea-nav-desktop { display: block; margin-left: 32px; } } .dsea-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; } .dsea-menu a { display: inline-flex; align-items: center; min-height: var(--touch); padding: 8px 14px; border-radius: var(--r-md); color: var(--ink); font-weight: 600; text-decoration: none; } .dsea-menu a:hover { background: var(--blue-50); color: var(--blue-700); } .dsea-menu .current-menu-item > a, .dsea-menu a[aria-current="page"] { color: var(--blue-700); background: var(--blue-50); } .dsea-cart-count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--blue-500); color: var(--white); font-size: .6875rem; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--white); } .dsea-cart-count[data-count="0"] { display: none; } .dsea-cart-count.is-bump { animation: dsea-bump .4s var(--ease); } @keyframes dsea-bump { 40% { transform: scale(1.35); } } .dsea-hide-mobile { display: none !important; } @media (min-width: 1024px) { .dsea-hide-mobile { display: inline-flex !important; } } /* Bottom navigation (phones/tablets) */ .dsea-bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(4, 1fr); height: calc(var(--bottomnav) + var(--safe-bottom)); padding-bottom: var(--safe-bottom); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--border); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } @media (min-width: 1024px) { .dsea-bottomnav { display: none; } } .dsea-bottomnav__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ink-muted); font-size: .75rem; font-weight: 600; text-decoration: none; position: relative; -webkit-tap-highlight-color: transparent; } .dsea-bottomnav__item[aria-current="page"] { color: var(--blue-700); } .dsea-bottomnav__item[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 50%; width: 32px; height: 3px; margin-left: -16px; border-radius: 0 0 3px 3px; background: var(--blue-500); } .dsea-bottomnav__icon { position: relative; display: inline-flex; } .dsea-bottomnav__icon .dsea-cart-count { top: -6px; right: -10px; } /* Footer */ .dsea-footer { margin-top: 16px; } .dsea-home { padding-bottom: 8px; } .dsea-home > .dsea-section:last-child { margin-bottom: 24px; } .dsea-footer__trust { display: grid; gap: 12px; grid-template-columns: 1fr; padding-block: 24px; } @media (min-width: 600px) { .dsea-footer__trust { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .dsea-footer__trust { grid-template-columns: repeat(4, 1fr); } } .dsea-trust { display: flex; gap: 12px; align-items: flex-start; padding: 16px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); font-size: .875rem; color: var(--ink-muted); } .dsea-trust .dsea-icon { color: var(--blue-500); margin-top: 2px; } .dsea-trust strong { display: block; color: var(--ink); font-size: .9375rem; } .dsea-footer__main { background: var(--navy-900); color: #C5D3EC; padding-block: 40px 24px; } .dsea-footer__grid { display: grid; gap: 32px; grid-template-columns: 1fr 1fr; } .dsea-footer__brand { grid-column: 1 / -1; } @media (min-width: 900px) { .dsea-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } .dsea-footer__brand { grid-column: auto; } } .dsea-footer__brand p { margin-top: 12px; max-width: 32ch; } .dsea-footer__title { font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--white); margin-bottom: 12px; } .dsea-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .dsea-footer__links a { display: inline-flex; align-items: center; min-height: 36px; color: #C5D3EC; text-decoration: none; word-break: break-word; } .dsea-footer__links a:hover { color: var(--white); text-decoration: underline; } .dsea-footer__muted { font-size: .875rem; color: #93A6C8; } .dsea-footer__base { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; padding-top: 24px; margin-top: 32px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .8125rem; color: #93A6C8; } .dsea-footer__base a { color: #C5D3EC; } .dsea-footer--focus { background: transparent; } .dsea-footer--focus .dsea-footer__base { color: var(--ink-muted); border-top-color: var(--border); margin-top: 0; padding-block: 24px; } .dsea-footer--focus .dsea-footer__base a { color: var(--ink-muted); } /* 6. Search panel, cart drawer, toast ------------------------------------ */ .dsea-search { border-top: 1px solid var(--border); background: var(--white); padding-block: 10px; } .dsea-search[hidden] { display: none; } .dsea-search__form { display: flex; align-items: center; gap: 8px; } .dsea-search__form > .dsea-icon { color: var(--ink-muted); } .dsea-search__input { flex: 1; min-width: 0; min-height: var(--control); padding: 10px 14px; border: 1.5px solid var(--border-control); border-radius: var(--r-md); font-size: 1rem; background: var(--white); } .dsea-search__input:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(20, 99, 243, .25); } .dsea-inline-search { display: flex; gap: 8px; max-width: 480px; } .dsea-inline-search input { flex: 1; min-width: 0; } .dsea-drawer { position: fixed; inset: 0; z-index: 100; } .dsea-drawer[hidden] { display: none; } .dsea-drawer__scrim { position: absolute; inset: 0; background: rgba(10, 26, 58, .5); opacity: 0; transition: opacity .25s var(--ease); } .dsea-drawer__panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; max-height: 88dvh; display: flex; flex-direction: column; background: var(--white); border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--shadow-2); transform: translateY(100%); transition: transform .3s var(--ease); padding-bottom: var(--safe-bottom); outline: none; } @media (min-width: 768px) { .dsea-drawer__panel { left: auto; top: 0; width: 420px; max-height: none; border-radius: var(--r-xl) 0 0 var(--r-xl); transform: translateX(100%); } } .dsea-drawer.is-open .dsea-drawer__scrim { opacity: 1; } .dsea-drawer.is-open .dsea-drawer__panel { transform: none; } .dsea-drawer__handle { width: 40px; height: 4px; border-radius: 2px; background: var(--surface-muted); margin: 8px auto 0; } @media (min-width: 768px) { .dsea-drawer__handle { display: none; } } .dsea-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 12px 20px; border-bottom: 1px solid var(--border); } .dsea-drawer__head h2 { margin: 0; } .dsea-drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 20px 20px; display: flex; flex-direction: column; } .dsea-drawer__body > .widget_shopping_cart_content { flex: 1; display: flex; flex-direction: column; } body.dsea-lock { overflow: hidden; } .dsea-toast { position: fixed; left: 50%; bottom: calc(var(--bottomnav) + var(--safe-bottom) + 16px); z-index: 120; transform: translate(-50%, 16px); opacity: 0; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: var(--r-md); background: var(--navy-900); color: var(--white); font-weight: 600; font-size: .9375rem; box-shadow: var(--shadow-2); transition: opacity .2s, transform .25s var(--ease); pointer-events: none; } .dsea-toast[hidden] { display: block; visibility: hidden; } .dsea-toast.is-visible { opacity: 1; transform: translate(-50%, 0); visibility: visible; } @media (min-width: 1024px) { .dsea-toast { bottom: 24px; } } /* 7. Home ------------------------------------------------------------------ */ .dsea-hero { padding-top: 16px; } @media (min-width: 768px) { .dsea-hero { padding-top: 32px; } } .dsea-hero__card { position: relative; overflow: hidden; display: grid; gap: 8px; align-items: center; border-radius: var(--r-xl); padding: 28px 20px 0; background: radial-gradient(120% 90% at 100% 0%, rgba(20, 209, 184, .35) 0%, rgba(20, 209, 184, 0) 55%), radial-gradient(90% 80% at 0% 100%, rgba(20, 99, 243, .55) 0%, rgba(20, 99, 243, 0) 60%), var(--navy-900); color: var(--white); } @media (min-width: 900px) { .dsea-hero__card { grid-template-columns: 1.05fr 1fr; padding: 56px 56px; gap: 32px; } } .dsea-hero__card::after { /* signal wave */ content: ""; position: absolute; right: -60px; bottom: -60px; width: 260px; height: 260px; border-radius: 50%; border: 2px solid rgba(200, 242, 90, .25); box-shadow: 0 0 0 28px rgba(200, 242, 90, .06), 0 0 0 56px rgba(200, 242, 90, .04); pointer-events: none; } .dsea-hero__text { position: relative; z-index: 1; } .dsea-hero .dsea-eyebrow { color: var(--zest-500); } .dsea-hero__title { color: var(--white); font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem); margin-bottom: 12px; } .dsea-hero__lead { color: #C5D3EC; font-size: 1.0625rem; max-width: 46ch; } .dsea-hero__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 20px 0 16px; } .dsea-hero__price { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--white); } .dsea-hero__price del { color: #93A6C8; font-size: 1rem; font-weight: 500; margin-right: 6px; } .dsea-hero__price ins { text-decoration: none; } .dsea-hero__media { position: relative; z-index: 1; display: block; margin: 8px -4px 0; } .dsea-hero__img { width: 100%; max-width: 520px; margin-inline: auto; aspect-ratio: 1; object-fit: contain; border-radius: var(--r-lg); background: rgba(255, 255, 255, .04); } @media (min-width: 900px) { .dsea-hero__media { margin: 0; } } .dsea-home__intro { margin: 20px 0 0; color: var(--ink-muted); max-width: 70ch; } .dsea-hero-empty { padding-block: 48px; } .dsea-why { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; } @media (min-width: 600px) { .dsea-why { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .dsea-why { grid-template-columns: repeat(4, 1fr); gap: 20px; } } .dsea-why__item { display: flex; flex-direction: column; gap: 6px; padding: 20px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); } .dsea-why__item .dsea-icon { color: var(--blue-500); margin-bottom: 6px; } .dsea-why__item strong { font-family: var(--font-display); font-size: 1.0625rem; } .dsea-why__item span { color: var(--ink-muted); font-size: .9375rem; } .dsea-rewards-band { display: grid; gap: 20px; align-items: center; padding: 28px 20px; border-radius: var(--r-xl); background: linear-gradient(135deg, var(--aqua-100) 0%, var(--blue-50) 60%); border: 1px solid #B9EDE3; } .dsea-rewards-band .dsea-eyebrow { color: var(--aqua-700); } .dsea-rewards-band p { margin: 0; color: var(--ink-muted); max-width: 62ch; } @media (min-width: 768px) { .dsea-rewards-band { grid-template-columns: 1fr auto; padding: 40px; } } /* 8. Shop and product ------------------------------------------------------ */ .woocommerce-products-header { margin-bottom: 16px; } .woocommerce-products-header__title, .dsea-main .page-title { margin-bottom: 8px; } .term-description { color: var(--ink-muted); max-width: 70ch; } .dsea-shopbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .dsea-shopbar .woocommerce-result-count { margin: 0; font-size: .875rem; color: var(--ink-muted); } .dsea-shopbar .woocommerce-ordering { margin: 0; } .dsea-shopbar .woocommerce-ordering select { min-height: var(--touch); padding: 8px 36px 8px 12px; font-size: .9375rem; width: auto; max-width: 56vw; } /* Product card */ .dsea-pcard { margin: 0; min-width: 0; } .dsea-pcard__link { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 8px 8px 14px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); color: var(--ink); text-decoration: none; transition: box-shadow .2s var(--ease), border-color .2s, transform .2s var(--ease); } .dsea-pcard__link:hover { color: var(--ink); border-color: var(--blue-300); box-shadow: var(--shadow-1); transform: translateY(-2px); } .dsea-pcard__media { position: relative; display: block; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; background: var(--surface-page); margin-bottom: 6px; } .dsea-pcard__media img, .dsea-pcard__img { width: 100%; height: 100%; object-fit: cover; } .dsea-pcard__flag { position: absolute; top: 8px; left: 8px; } .dsea-pcard__name { padding-inline: 6px; font-weight: 600; font-size: .9375rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dsea-pcard__rating { padding-inline: 6px; font-size: .8125rem; color: var(--ink-muted); } .dsea-pcard__row { padding-inline: 6px; margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .dsea-pcard__price { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; } .dsea-pcard__price del { order: 2; color: var(--ink-muted); font-size: .8125rem; font-weight: 500; font-family: var(--font-body); } .dsea-pcard__price ins { text-decoration: none; } .dsea-pcard__stock { padding-inline: 6px; } .dsea-pcard__stock .dsea-badge { font-size: .75rem; padding: 2px 8px; } @media (min-width: 768px) { .dsea-pcard__name { font-size: 1rem; } .dsea-pcard__price { font-size: 1.1875rem; } } /* Prices everywhere */ .price { font-family: var(--font-display); font-weight: 700; color: var(--ink); } .price del { color: var(--ink-muted); font-weight: 500; opacity: 1; } .price ins { text-decoration: none; } .woocommerce-Price-currencySymbol { margin-right: 1px; } /* Single product */ .single-product div.product { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: start; } @media (min-width: 900px) { .single-product div.product { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 48px; } .single-product div.product .summary { position: sticky; top: calc(var(--header) + 24px); } .single-product div.product > .dsea-accordions, .single-product div.product > .related, .single-product div.product > .upsells, .single-product div.product > .woocommerce-tabs { grid-column: 1 / -1; } } .single-product .product_title { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); margin-bottom: 8px; } .single-product .woocommerce-product-rating { display: flex; align-items: center; gap: 8px; font-size: .875rem; margin-bottom: 8px; } .single-product .woocommerce-product-details__short-description { color: var(--ink-muted); margin: 12px 0 16px; } .single-product .woocommerce-product-details__short-description ul { padding-left: 1.2em; margin: 0; } .dsea-pdp-price { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0; } .dsea-pdp-price .price { margin: 0; font-size: 1.75rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .dsea-pdp-price .price del { order: 2; font-size: 1.0625rem; font-family: var(--font-body); } .dsea-pdp-stock { margin-bottom: 16px; } .dsea-pdp-points { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 10px 14px; border-radius: var(--r-md); background: var(--aqua-100); color: #064a41; font-size: .9375rem; font-weight: 500; } .dsea-pdp-facts { list-style: none; margin: 20px 0 0; padding: 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--white); } .dsea-pdp-facts li { display: flex; gap: 12px; padding: 14px 16px; font-size: .9375rem; color: var(--ink-muted); } .dsea-pdp-facts li + li { border-top: 1px solid var(--border); } .dsea-pdp-facts .dsea-icon { color: var(--blue-500); margin-top: 2px; } .dsea-pdp-facts strong { display: block; color: var(--ink); } .single-product .stock { display: none; } /* Theme shows its own stock badge. */ .single-product .woocommerce-variation-availability .stock { display: block; font-weight: 600; font-size: .875rem; margin: 8px 0; } .single-product .woocommerce-variation-availability .out-of-stock { color: var(--coral-700); } /* Gallery */ .woocommerce-product-gallery { position: relative; margin: 0; min-width: 0; } .woocommerce-product-gallery__wrapper { margin: 0; } .woocommerce-product-gallery .flex-viewport, .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:only-child, .woocommerce-product-gallery__image { border-radius: var(--r-lg); overflow: hidden; background: var(--white); } .woocommerce-product-gallery__image img { width: 100%; height: auto; } .woocommerce-product-gallery:not(.flexslider) .woocommerce-product-gallery__wrapper, .woocommerce-product-gallery .woocommerce-product-gallery__wrapper:not([style]) { display: grid; gap: 8px; grid-template-columns: repeat(4, 1fr); } .woocommerce-product-gallery__wrapper:not([style]) > .woocommerce-product-gallery__image:first-child { grid-column: 1 / -1; } .woocommerce-product-gallery .flex-control-thumbs { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .woocommerce-product-gallery .flex-control-thumbs img { border-radius: var(--r-sm); border: 2px solid transparent; cursor: pointer; opacity: .7; transition: opacity .15s, border-color .15s; } .woocommerce-product-gallery .flex-control-thumbs img.flex-active, .woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1; border-color: var(--blue-500); } .woocommerce-product-gallery__trigger { position: absolute; top: 12px; right: 12px; z-index: 5; width: var(--touch); height: var(--touch); border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: var(--shadow-1); display: grid; place-items: center; text-indent: -9999px; overflow: hidden; } .woocommerce-product-gallery__trigger::before { content: ""; text-indent: 0; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1A3A' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E") center/contain no-repeat; } /* Add to cart form */ form.cart { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 0; align-items: stretch; } form.cart .single_add_to_cart_button { flex: 1 1 200px; } form.variations_form { display: block; } form.variations_form .single_variation_wrap { margin-top: 8px; } form.variations_form .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: 12px; } table.variations { border: 0; margin-bottom: 8px; } table.variations tr { display: grid; gap: 6px; margin-bottom: 12px; } table.variations th, table.variations td { padding: 0; text-align: left; border: 0; } table.variations th label { font-weight: 600; } table.variations select { max-width: 100%; } .reset_variations { display: inline-block; margin-top: 8px; font-size: .875rem; } .woocommerce-variation-price .price { font-size: 1.375rem; display: block; margin: 8px 0; } .woocommerce-variation-description { color: var(--ink-muted); font-size: .9375rem; } .quantity, .dsea-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--border-control); border-radius: var(--r-md); background: var(--white); height: var(--control); overflow: hidden; } .quantity .qty { width: 48px; min-height: 0; height: 100%; padding: 0; border: 0 !important; box-shadow: none !important; border-radius: 0; text-align: center; font-weight: 600; -moz-appearance: textfield; background: transparent; } .quantity .qty::-webkit-outer-spin-button, .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .quantity:focus-within { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(20, 99, 243, .25); } .dsea-qty__btn { width: var(--touch); height: 100%; border: 0; background: transparent; color: var(--ink); display: grid; place-items: center; } .dsea-qty__btn:hover { background: var(--blue-50); color: var(--blue-700); } .quantity.hidden, .quantity input[type="hidden"] + .dsea-qty__btn { display: none; } /* Sticky add to cart on phones */ .dsea-sticky-buy { position: fixed; left: 0; right: 0; bottom: calc(var(--bottomnav) + var(--safe-bottom)); z-index: 55; display: flex; align-items: center; gap: 12px; padding: 10px var(--gutter); background: var(--white); border-top: 1px solid var(--border); box-shadow: 0 -6px 18px rgba(10, 26, 58, .08); transform: translateY(120%); transition: transform .25s var(--ease); } .dsea-sticky-buy.is-visible { transform: none; } .dsea-sticky-buy__price { flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dsea-sticky-buy__price del { display: none; } .dsea-sticky-buy__price ins { text-decoration: none; } .dsea-sticky-buy .dsea-btn { flex: none; } @media (min-width: 900px) { .dsea-sticky-buy { display: none; } } /* Related products */ .related, .upsells, .cross-sells { margin-top: 48px; } .related > h2, .upsells > h2, .cross-sells > h2 { font-size: 1.375rem; } /* Reviews */ #reviews .commentlist { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 16px; } #reviews .comment_container { display: flex; gap: 12px; } #reviews .comment_container img.avatar { width: 40px; height: 40px; border-radius: 50%; } #reviews .comment-text { flex: 1; padding: 14px 16px; background: var(--surface-page); border-radius: var(--r-md); } #reviews .comment-text .meta { font-size: .875rem; color: var(--ink-muted); margin: 4px 0 8px; } #reviews .comment-text .description p:last-child { margin: 0; } #review_form .comment-reply-title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; margin-bottom: 12px; } #review_form .comment-form { display: grid; gap: 12px; } #review_form .comment-form p { margin: 0; display: grid; gap: 6px; } #review_form label { font-weight: 600; } #review_form input[type="text"], #review_form input[type="email"], #review_form textarea { width: 100%; min-height: var(--control); padding: 12px 14px; border: 1.5px solid var(--border-control); border-radius: var(--r-md); background: var(--white); } #review_form textarea { min-height: 120px; } #review_form .form-submit input { justify-self: start; } #review_form .comment-form-cookies-consent { display: flex; gap: 8px; align-items: flex-start; } .woocommerce-noreviews { color: var(--ink-muted); } .star-rating { position: relative; display: inline-block; width: 5.4em; height: 1.1em; line-height: 1; font-size: 1rem; overflow: hidden; } .star-rating::before { content: "★★★★★"; position: absolute; inset: 0; color: var(--surface-muted); letter-spacing: .08em; } .star-rating span { position: absolute; inset: 0 auto 0 0; overflow: hidden; padding-top: 1.5em; } .star-rating span::before { content: "★★★★★"; position: absolute; top: 0; left: 0; color: #F2A900; letter-spacing: .08em; } p.stars { margin: 0; } p.stars span { display: inline-flex; gap: 2px; } p.stars a { position: relative; width: 32px; height: 32px; text-indent: -9999px; overflow: hidden; display: inline-block; } p.stars a::before { content: "★"; position: absolute; inset: 0; text-indent: 0; font-size: 28px; line-height: 32px; text-align: center; color: var(--surface-muted); } p.stars:hover a::before, p.stars.selected a.active::before, p.stars.selected a:not(.active)::before { color: #F2A900; } p.stars a:hover ~ a::before, p.stars.selected a.active ~ a::before { color: var(--surface-muted); } /* Pagination */ .woocommerce-pagination, .navigation.pagination, .dsea-pager { margin-top: 32px; } .woocommerce-pagination ul.page-numbers, .dsea-pager .nav-links, .navigation .nav-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } .page-numbers a, .page-numbers span, a.page-numbers, span.page-numbers { display: inline-grid; place-items: center; min-width: var(--touch); height: var(--touch); padding: 0 10px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--white); color: var(--ink); text-decoration: none; font-weight: 600; } .page-numbers.current { background: var(--navy-900); border-color: var(--navy-900); color: var(--white); } .page-numbers a:hover, a.page-numbers:hover { border-color: var(--blue-300); color: var(--blue-700); } /* 9. Cart and checkout ---------------------------------------------------- */ .woocommerce-cart .dsea-main, .woocommerce-checkout .dsea-main { max-width: var(--maxw); } /* Shared table look */ .shop_table { width: 100%; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); border-collapse: separate; border-spacing: 0; overflow: hidden; margin-bottom: 24px; } .shop_table th, .shop_table td { padding: 14px 16px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border); } .shop_table tr:last-child > th, .shop_table tr:last-child > td, .shop_table tfoot tr:last-child > * { border-bottom: 0; } .shop_table thead th { font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); background: var(--surface-page); } .shop_table tfoot th { font-weight: 600; } .shop_table .order-total th, .shop_table .order-total td { font-family: var(--font-display); font-size: 1.125rem; } .shop_table .product-thumbnail img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-page); } .shop_table .product-name a { color: var(--ink); font-weight: 600; text-decoration: none; } .shop_table .product-name a:hover { color: var(--blue-700); } .shop_table .product-remove a.remove { font-size: 1.375rem; } .shop_table .variation, .wc-item-meta { margin: 4px 0 0; padding: 0; list-style: none; font-size: .8125rem; color: var(--ink-muted); } .shop_table .variation dt, .shop_table .variation dd, .wc-item-meta li, .wc-item-meta p { display: inline; margin: 0; } .shop_table .variation dd p { display: inline; margin: 0; } a.remove { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--ink-muted) !important; text-decoration: none; font-size: 1.25rem; line-height: 1; } a.remove:hover { background: var(--coral-100); color: var(--coral-700) !important; } /* Cart page: stack rows on phones */ .woocommerce-cart-form .actions { text-align: right; } .woocommerce-cart-form .actions .coupon { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .woocommerce-cart-form .actions .coupon .input-text { flex: 1 1 160px; width: auto; } .woocommerce-cart-form .actions > .button { margin-top: 4px; } @media (max-width: 767px) { .woocommerce-cart-form .shop_table thead { display: none; } .woocommerce-cart-form .shop_table tr.cart_item { display: grid; grid-template-columns: 72px 1fr auto; gap: 4px 12px; padding: 14px; border-bottom: 1px solid var(--border); position: relative; } .woocommerce-cart-form .shop_table tr.cart_item td { border: 0; padding: 0; } .woocommerce-cart-form .shop_table td.product-remove { position: absolute; top: 8px; right: 8px; } .woocommerce-cart-form .shop_table td.product-thumbnail { grid-row: 1 / span 3; } .woocommerce-cart-form .shop_table td.product-name { grid-column: 2 / 4; padding-right: 32px; } .woocommerce-cart-form .shop_table td.product-price { display: none; } .woocommerce-cart-form .shop_table td.product-quantity { grid-column: 2; } .woocommerce-cart-form .shop_table td.product-subtotal { grid-column: 3; align-self: center; font-weight: 700; } .woocommerce-cart-form .shop_table td::before { display: none; } .woocommerce-cart-form .shop_table td.actions { display: block; padding: 14px; } .woocommerce-cart-form .shop_table tr:last-child { display: block; } } @media (min-width: 900px) { .woocommerce-cart .woocommerce { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); gap: 32px; align-items: start; } .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; } .woocommerce-cart .cart-collaterals { position: sticky; top: calc(var(--header) + 24px); } .woocommerce-cart .woocommerce > .cross-sells { grid-column: 1 / -1; } } .cart_totals { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; } .cart_totals h2 { font-size: 1.25rem; } .cart_totals .shop_table { border: 0; border-radius: 0; margin-bottom: 16px; } .cart_totals .shop_table th, .cart_totals .shop_table td { padding: 10px 0; } .cart_totals .shop_table td { text-align: right; } .wc-proceed-to-checkout .checkout-button { display: flex; width: 100%; font-size: 1.0625rem; } .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .woocommerce-shipping-methods li { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .woocommerce-shipping-destination, .woocommerce-shipping-calculator { font-size: .875rem; color: var(--ink-muted); } .shipping-calculator-form { display: grid; gap: 8px; margin-top: 8px; text-align: left; } .cart-empty.woocommerce-info { text-align: center; } .return-to-shop { text-align: center; } /* Checkout */ .woocommerce-checkout form.checkout { display: grid; gap: 24px; } @media (min-width: 960px) { .woocommerce-checkout form.checkout { grid-template-columns: minmax(0, 1.4fr) minmax(340px, 1fr); gap: 40px; align-items: start; } .woocommerce-checkout form.checkout > .dsea-step:first-child, .woocommerce-checkout form.checkout > #customer_details { grid-column: 1; } .woocommerce-checkout form.checkout > .dsea-step:nth-of-type(2), .woocommerce-checkout form.checkout > #order_review_heading, .woocommerce-checkout form.checkout > #order_review { grid-column: 2; } .woocommerce-checkout form.checkout > #customer_details { grid-row: 2 / span 3; } .woocommerce-checkout form.checkout > .dsea-step:first-child { grid-row: 1; } .woocommerce-checkout form.checkout > .dsea-step:nth-of-type(2) { grid-row: 1; } .woocommerce-checkout form.checkout > #order_review_heading { grid-row: 2; } .woocommerce-checkout form.checkout > #order_review { grid-row: 3; position: sticky; top: calc(var(--header) + 24px); } } .woocommerce-checkout form.checkout > .dsea-step { margin: 0; } #order_review_heading { font-size: 1.0625rem; margin: 0; color: var(--ink-muted); font-family: var(--font-body); font-weight: 600; } #customer_details { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; } #customer_details .col-1, #customer_details .col-2 { width: 100%; float: none; } #customer_details .col-2 { margin-top: 16px; } #customer_details h3 { font-size: 1.0625rem; } #order_review { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; } #order_review .shop_table { border: 0; border-radius: 0; margin-bottom: 16px; } #order_review .shop_table th, #order_review .shop_table td { padding: 10px 0; } #order_review .shop_table td:last-child, #order_review .shop_table th.product-total { text-align: right; } #order_review .shop_table thead th { background: none; } .woocommerce form .form-row { margin: 0 0 16px; padding: 0; display: grid; gap: 6px; } .woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; } @media (min-width: 600px) { .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper, .woocommerce-EditAccountForm, .dsea-wc .woocommerce-EditAccountForm { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; } .woocommerce form .form-row-wide, .woocommerce-EditAccountForm > *:not(.form-row-first):not(.form-row-last) { grid-column: 1 / -1; } .woocommerce-EditAccountForm .form-row-first { grid-column: 1; } .woocommerce-EditAccountForm .form-row-last { grid-column: 2; } } .woocommerce form .form-row .required { color: var(--coral-700); text-decoration: none; border: 0; } .woocommerce form .form-row .optional { font-weight: 400; color: var(--ink-muted); font-size: .875rem; } .woocommerce form .form-row .description { font-size: .8125rem; color: var(--ink-muted); margin: 0; } .woocommerce form .form-row.woocommerce-invalid label { color: var(--coral-700); } .woocommerce form .form-row .woocommerce-input-wrapper { display: block; } .woocommerce-checkout #ship-to-different-address { font-size: 1rem; font-family: var(--font-body); margin: 8px 0; } .woocommerce-checkout #ship-to-different-address label { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; } .woocommerce-additional-fields h3 { display: none; } /* select2 / selectWoo (country and state pickers) */ .select2-container { width: 100% !important; } .select2-container .select2-selection--single { height: var(--control); border: 1.5px solid var(--border-control); border-radius: var(--r-md); background: var(--white); } .select2-container .select2-selection--single .select2-selection__rendered { line-height: 45px; padding: 0 40px 0 14px; color: var(--ink); } .select2-container .select2-selection--single .select2-selection__arrow { height: 45px; right: 10px; } .select2-container--open .select2-selection--single, .select2-container--focus .select2-selection--single { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(20, 99, 243, .25); } .select2-dropdown { border: 1.5px solid var(--blue-500); border-radius: var(--r-md); overflow: hidden; } .select2-search--dropdown .select2-search__field { min-height: 40px; border: 1px solid var(--border-control); border-radius: var(--r-sm); padding: 6px 10px; } .select2-results__option { padding: 10px 14px; } .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--blue-500); } /* Payment */ #payment { margin-top: 8px; } #payment .wc_payment_methods { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; } #payment .wc_payment_method { border: 1.5px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; background: var(--white); } #payment .wc_payment_method:has(input:checked) { border-color: var(--blue-500); background: var(--blue-50); } #payment .wc_payment_method > label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; flex-wrap: wrap; } #payment .wc_payment_method > label img { max-height: 24px; width: auto; display: inline-block; } #payment .wc_payment_method > input { margin-right: 8px; vertical-align: middle; } #payment .payment_box { margin-top: 10px; font-size: .875rem; color: var(--ink-muted); } #payment .payment_box p:last-child { margin: 0; } #payment .place-order { display: grid; gap: 12px; padding: 0; margin: 0; } #payment #place_order { width: 100%; font-size: 1.0625rem; min-height: 56px; } .woocommerce-terms-and-conditions-wrapper { font-size: .875rem; color: var(--ink-muted); } .woocommerce-privacy-policy-text p { margin: 0; } .dsea-secure-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: .8125rem; color: var(--ink-muted); text-align: center; } .dsea-secure-note .dsea-icon { color: var(--aqua-700); } .woocommerce-form-coupon-toggle .woocommerce-info, .woocommerce-form-login-toggle .woocommerce-info { margin-bottom: 12px; } form.checkout_coupon, form.woocommerce-form-login { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding: 16px; margin-bottom: 20px; border: 1px dashed var(--blue-300); border-radius: var(--r-lg); background: var(--white); } form.checkout_coupon p { margin: 0; } form.checkout_coupon .form-row-first { flex: 1 1 200px; } form.woocommerce-form-login { display: grid; } /* Points redemption at checkout */ .dsea-redeem { margin: 0 0 16px; padding: 14px 16px; border-radius: var(--r-md); background: var(--aqua-100); border: 1px solid #A9EADF; } .dsea-redeem__toggle { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-weight: 600; } .dsea-redeem__toggle input { margin-top: 3px; } .dsea-redeem__sub { display: block; font-weight: 400; font-size: .875rem; color: #064a41; margin: 2px 0 0; } .dsea-cart-points { font-size: .875rem; color: var(--aqua-700); font-weight: 500; } /* Thank-you page */ .woocommerce-order { display: grid; gap: 20px; } .woocommerce-thankyou-order-received { margin: 0; padding: 20px; border-radius: var(--r-lg); background: var(--aqua-100); color: #064a41; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; } .woocommerce-thankyou-order-failed { color: var(--coral-700); } ul.woocommerce-order-overview, ul.order_details { list-style: none; margin: 0; padding: 16px 20px; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); font-size: .8125rem; color: var(--ink-muted); } @media (min-width: 768px) { ul.woocommerce-order-overview, ul.order_details { grid-template-columns: repeat(5, minmax(0, 1fr)); } } ul.woocommerce-order-overview li strong, ul.order_details li strong { display: block; color: var(--ink); font-size: .9375rem; word-break: break-word; } .woocommerce-order-details, .woocommerce-customer-details { margin: 0; } .woocommerce-order-details__title, .woocommerce-column__title { font-size: 1.125rem; } .woocommerce-customer-details address { font-style: normal; padding: 16px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); line-height: 1.6; } .woocommerce-customer-details--phone, .woocommerce-customer-details--email { margin: 6px 0 0; } .woocommerce-columns--addresses { display: grid; gap: 16px; } @media (min-width: 768px) { .woocommerce-columns--addresses { grid-template-columns: 1fr 1fr; } } .dsea-save-details .dsea-form { margin-top: 12px; } /* 10. Auth ------------------------------------------------------------------ */ .dsea-auth { display: flex; justify-content: center; padding: 24px var(--gutter) 64px; min-height: calc(100vh - var(--header) - 120px); } @media (min-width: 768px) { .dsea-auth { padding-top: 56px; } } .dsea-auth__panel { width: 100%; max-width: 440px; align-self: flex-start; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 28px 20px; box-shadow: var(--shadow-1); } @media (min-width: 480px) { .dsea-auth__panel { padding: 36px 32px; } } .dsea-auth__head { margin-bottom: 20px; } .dsea-auth__icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-50); color: var(--blue-500); margin-bottom: 16px; } .dsea-auth__result { text-align: center; } .dsea-auth__result .dsea-auth__icon { margin-inline: auto; } .dsea-auth__title { font-size: 1.75rem; margin-bottom: 6px; } .dsea-auth__lead { color: var(--ink-muted); margin: 0; } .dsea-auth__small { font-size: .875rem; color: var(--ink-muted); } .dsea-auth__foot { font-size: .8125rem; color: var(--ink-muted); text-align: center; margin: 20px 0 0; } .dsea-auth__divider { display: flex; align-items: center; gap: 12px; margin: 24px 0 16px; color: var(--ink-muted); font-size: .875rem; } .dsea-auth__divider::before, .dsea-auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } .dsea-auth .dsea-form { margin-top: 4px; } .dsea-auth .dsea-form > .dsea-btn { margin-top: 4px; } /* 11. Account -------------------------------------------------------------- */ .woocommerce-account .dsea-main > .woocommerce, .woocommerce-account .woocommerce { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 1024px) { .woocommerce-account.logged-in .woocommerce { grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start; } } .woocommerce-MyAccount-content { min-width: 0; } .woocommerce-MyAccount-content > .woocommerce-notices-wrapper:empty { display: none; } .dsea-accnav { min-width: 0; } .dsea-accnav__me { display: none; } .dsea-accnav ul { list-style: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; } .dsea-accnav ul::-webkit-scrollbar { display: none; } .dsea-accnav a { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; min-height: 40px; padding: 8px 14px; border-radius: var(--r-pill); border: 1.5px solid var(--border); background: var(--white); color: var(--ink); font-weight: 600; font-size: .9375rem; text-decoration: none; } .dsea-accnav a .dsea-icon { display: none; } .dsea-accnav a[aria-current="page"] { background: var(--navy-900); border-color: var(--navy-900); color: var(--white); } .dsea-accnav .woocommerce-MyAccount-navigation-link--customer-logout { display: none; } @media (min-width: 1024px) { .dsea-accnav { position: sticky; top: calc(var(--header) + 24px); background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px; } .dsea-accnav__me { display: flex; align-items: center; gap: 12px; padding: 8px 8px 16px; margin-bottom: 8px; border-bottom: 1px solid var(--border); min-width: 0; } .dsea-accnav__me > span:last-child { min-width: 0; } .dsea-accnav__me strong { display: block; } .dsea-accnav__me .dsea-small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dsea-accnav__avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-500); color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; } .dsea-accnav ul { flex-direction: column; gap: 2px; margin: 0; padding: 0; overflow: visible; } .dsea-accnav a { display: flex; border: 0; border-radius: var(--r-md); min-height: var(--touch); width: 100%; background: transparent; } .dsea-accnav a .dsea-icon { display: inline-block; color: var(--ink-muted); } .dsea-accnav a:hover { background: var(--blue-50); color: var(--blue-700); } .dsea-accnav a[aria-current="page"] { background: var(--blue-50); color: var(--blue-700); } .dsea-accnav a[aria-current="page"] .dsea-icon { color: var(--blue-500); } .dsea-accnav .woocommerce-MyAccount-navigation-link--customer-logout { display: block; border-top: 1px solid var(--border); margin-top: 8px; padding-top: 8px; } } .dsea-overview { display: grid; gap: 24px; } .dsea-overview__hello { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); } .dsea-overview__grid { display: grid; gap: 16px; } @media (min-width: 768px) { .dsea-overview__grid { grid-template-columns: 1fr 1fr; } } .dsea-overview__section { min-width: 0; } .dsea-overview__links { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; } @media (min-width: 1024px) { .dsea-overview__links { display: none; } } .dsea-order-card { display: flex; align-items: center; gap: 14px; padding: 14px; color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; } .dsea-order-card + .dsea-order-card { margin-top: 10px; } .dsea-order-card:hover { color: var(--ink); border-color: var(--blue-300); box-shadow: var(--shadow-1); } .dsea-order-card__img { flex: none; width: 64px; height: 64px; border-radius: var(--r-md); overflow: hidden; background: var(--surface-page); } .dsea-order-card__img img { width: 100%; height: 100%; object-fit: cover; } .dsea-order-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .dsea-order-card__title { font-family: var(--font-display); font-weight: 700; } .dsea-order-card__meta { font-size: .875rem; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .dsea-order-card__cta { flex: none; font-weight: 600; color: var(--blue-700); font-size: .9375rem; } .dsea-updates { list-style: none; margin: 0; padding: 0; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); } .dsea-updates__item { padding: 14px 16px; font-size: .9375rem; } .dsea-updates__item + .dsea-updates__item { border-top: 1px solid var(--border); } .dsea-updates__meta { display: block; font-size: .8125rem; color: var(--ink-muted); margin-bottom: 2px; } /* Orders table (account) */ .woocommerce-orders-table { font-size: .9375rem; } .woocommerce-orders-table .button { min-height: 40px; padding: 8px 14px; font-size: .875rem; } .woocommerce-orders-table .button + .button { margin-left: 6px; } @media (max-width: 767px) { .woocommerce-orders-table thead { display: none; } .woocommerce-orders-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); } .woocommerce-orders-table tr:last-child { border-bottom: 0; } .woocommerce-orders-table td, .woocommerce-orders-table th { border: 0; padding: 0; } .woocommerce-orders-table td::before, .woocommerce-orders-table th[data-title]::before { content: attr(data-title); display: block; font-size: .75rem; color: var(--ink-muted); font-weight: 500; } .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 6px; } .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions::before { display: none; } .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button { flex: 1; margin: 0; } } .woocommerce-order-details .shop_table td.product-total, .woocommerce-order-details .shop_table tfoot td { text-align: right; } mark.order-number, mark.order-date, mark.order-status { background: none; color: var(--ink); font-weight: 700; } .woocommerce-MyAccount-content > p:first-of-type:has(mark) { padding: 12px 16px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); } .woocommerce-OrderUpdates { list-style: none; margin: 0 0 24px; padding: 0; } .woocommerce-OrderUpdate { padding: 12px 16px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 8px; } .woocommerce-OrderUpdate-meta { font-size: .8125rem; color: var(--ink-muted); margin: 0 0 4px; } /* Addresses */ .woocommerce-Addresses { display: grid; gap: 16px; } @media (min-width: 768px) { .woocommerce-Addresses { grid-template-columns: 1fr 1fr; } } .woocommerce-Address { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; width: 100% !important; float: none !important; } .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .woocommerce-Address-title h2, .woocommerce-Address-title h3 { font-size: 1.0625rem; margin: 0; } .woocommerce-Address address { font-style: normal; color: var(--ink-muted); line-height: 1.6; } .woocommerce-address-fields, .woocommerce-EditAccountForm { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; } .woocommerce-EditAccountForm fieldset { grid-column: 1 / -1; border: 0; padding: 16px 0 0; margin: 8px 0 0; border-top: 1px solid var(--border); } .woocommerce-EditAccountForm legend { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; padding: 0; margin-bottom: 12px; } .woocommerce-EditAccountForm em { font-size: .8125rem; color: var(--ink-muted); } .dsea-prefs { grid-column: 1 / -1; padding: 12px 0; } .woocommerce-password-strength { font-size: .8125rem; font-weight: 600; padding: 6px 10px; border-radius: var(--r-sm); margin-top: 6px; } .woocommerce-password-strength.short, .woocommerce-password-strength.bad { background: var(--coral-100); color: var(--coral-700); } .woocommerce-password-strength.good { background: var(--amber-100); color: var(--amber-800); } .woocommerce-password-strength.strong { background: var(--aqua-100); color: var(--aqua-700); } .woocommerce-password-hint { font-size: .8125rem; color: var(--ink-muted); } .show-password-input { display: none; } /* WooCommerce's own eye button; the theme uses data-dsea-toggle-password. */ /* Support */ .dsea-support, .dsea-account-support { display: grid; gap: 20px; } .dsea-support__contact { display: grid; gap: 8px; } .dsea-support__contact a { font-weight: 600; } /* 12. Rewards -------------------------------------------------------------- */ .dsea-points-page, .dsea-referrals { display: grid; gap: 20px; } .dsea-points-page > h1, .dsea-referrals > h1 { margin: 0; } .dsea-points { display: grid; gap: 16px; padding: 22px 20px; border-radius: var(--r-xl); color: var(--white); background: radial-gradient(100% 120% at 100% 0%, rgba(20, 209, 184, .4) 0%, rgba(20, 209, 184, 0) 55%), var(--navy-900); text-decoration: none; } .dsea-points--link { transition: transform .2s var(--ease), box-shadow .2s; } .dsea-points--link:hover { color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-2); } .dsea-points__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .dsea-points__label { display: block; font-size: .8125rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--zest-500); } .dsea-points__value { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.25rem, 1.8rem + 2vw, 3rem); line-height: 1.1; margin: 4px 0; color: var(--white); } .dsea-points__sub { display: block; font-size: .875rem; color: #C5D3EC; margin: 0; } .dsea-points__sub .woocommerce-Price-amount { color: var(--white); font-weight: 600; } .dsea-points__cta { font-weight: 600; font-size: .9375rem; color: var(--zest-500); } .dsea-points__cta::after { content: " →"; } .dsea-points__bar { height: 10px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .14); overflow: hidden; margin-bottom: 8px; } .dsea-points__fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--aqua-500), var(--zest-500)); } .dsea-points .dsea-badge--points { background: rgba(200, 242, 90, .16); } .dsea-points .dsea-btn { justify-self: start; } .dsea-ledger { list-style: none; margin: 0; padding: 0; } .dsea-ledger__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; } .dsea-ledger__row + .dsea-ledger__row { border-top: 1px solid var(--border); } .dsea-ledger__main { min-width: 0; } .dsea-ledger__meta { display: block; font-size: .8125rem; color: var(--ink-muted); } .dsea-ledger__pts { flex: none; font-family: var(--font-display); font-weight: 700; color: var(--aqua-700); } .dsea-ledger__pts.is-neg { color: var(--coral-700); } .dsea-ledger__pts.is-pending { color: var(--ink-muted); } .dsea-share__row { display: flex; gap: 8px; margin: 12px 0; } .dsea-share__input { flex: 1; min-width: 0; font-size: .9375rem; } .dsea-share__actions { display: flex; flex-wrap: wrap; gap: 8px; } .dsea-refcard .dsea-small:last-child { margin: 0; } .dsea-copied { color: var(--aqua-700); } /* 13. Order tracking ------------------------------------------------------ */ .dsea-track, .dsea-next { margin-bottom: 24px; } .dsea-timeline { list-style: none; margin: 16px 0; padding: 0; } .dsea-timeline__step { position: relative; display: flex; gap: 14px; padding-bottom: 20px; } .dsea-timeline__step:last-child { padding-bottom: 0; } .dsea-timeline__step::before { /* connector */ content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--surface-muted); } .dsea-timeline__step:last-child::before { display: none; } .dsea-timeline__step--done::before { background: var(--aqua-500); } .dsea-timeline__dot { flex: none; position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--white); border: 2px solid var(--surface-muted); color: var(--white); } .dsea-timeline__step--done .dsea-timeline__dot { background: var(--aqua-500); border-color: var(--aqua-500); color: var(--navy-900); } .dsea-timeline__step--current .dsea-timeline__dot { border-color: var(--blue-500); box-shadow: 0 0 0 4px rgba(20, 99, 243, .18); } .dsea-timeline__step--current .dsea-timeline__dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--blue-500); animation: dsea-pulse 1.8s ease-in-out infinite; } @keyframes dsea-pulse { 50% { transform: scale(.7); opacity: .6; } } .dsea-timeline__title { display: block; font-weight: 600; padding-top: 3px; } .dsea-timeline__step:not(.dsea-timeline__step--done):not(.dsea-timeline__step--current) .dsea-timeline__title { color: var(--ink-muted); font-weight: 500; } .dsea-timeline__meta { display: block; font-size: .875rem; color: var(--ink-muted); } .dsea-track__details { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 16px 0; padding: 14px 16px; background: var(--surface-page); border-radius: var(--r-md); font-size: .9375rem; } .dsea-track__details dt { color: var(--ink-muted); } .dsea-track__details dd { margin: 0; font-weight: 600; word-break: break-word; } .dsea-track__updates { margin: 16px 0 8px; border-top: 1px solid var(--border); } .dsea-track__updates summary { font-size: .9375rem; min-height: 48px; } .dsea-track__updates ul { list-style: none; margin: 0; padding: 0 0 8px; display: grid; gap: 8px; font-size: .9375rem; } .dsea-track .dsea-btn { margin-top: 4px; } /* 14. WooCommerce notices, mini cart, misc --------------------------------- */ .woocommerce-notices-wrapper:empty { display: none; } .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice, .wc-block-components-notice-banner { list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 14px 16px; margin: 0 0 16px; border-radius: var(--r-md); border: 1px solid var(--blue-100); background: var(--blue-50); color: var(--navy-900); font-size: .9375rem; } .woocommerce-message { background: var(--aqua-100); border-color: #A9EADF; color: #064a41; } .woocommerce-error { background: var(--coral-100); border-color: #F5C2B8; color: var(--coral-700); flex-direction: column; align-items: flex-start; } .woocommerce-error li { margin: 0; } .woocommerce-message .button, .woocommerce-info .button, .woocommerce-message a.button.wc-forward { order: 2; min-height: 40px; padding: 8px 14px; font-size: .875rem; background: var(--white); color: var(--blue-700); border-color: transparent; } .woocommerce-message a:not(.button), .woocommerce-info a:not(.button) { font-weight: 600; } .woocommerce-message:focus, .woocommerce-error:focus, .woocommerce-info:focus { outline: none; } .woocommerce-store-notice, p.demo_store { position: fixed; left: 0; right: 0; bottom: calc(var(--bottomnav) + var(--safe-bottom)); z-index: 70; margin: 0; padding: 12px var(--gutter); background: var(--navy-900); color: var(--white); font-size: .875rem; text-align: center; } @media (min-width: 1024px) { .woocommerce-store-notice, p.demo_store { bottom: 0; } } .woocommerce-store-notice a { color: var(--zest-500); } /* Mini cart in the drawer */ .woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; } .woocommerce-mini-cart-item { position: relative; display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; padding: 14px 36px 14px 0; border-bottom: 1px solid var(--border); } .woocommerce-mini-cart-item > a:not(.remove) { display: contents; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9375rem; line-height: 1.35; } .woocommerce-mini-cart-item > a:not(.remove) img { grid-row: 1 / span 2; width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-page); } .woocommerce-mini-cart-item .remove { position: absolute; top: 10px; right: 0; } .woocommerce-mini-cart-item .quantity { grid-column: 2; border: 0; height: auto; background: none; font-size: .875rem; color: var(--ink-muted); overflow: visible; } .woocommerce-mini-cart-item .quantity .amount { color: var(--ink); font-weight: 600; } .woocommerce-mini-cart-item .variation { grid-column: 2; margin: 0; font-size: .8125rem; color: var(--ink-muted); } .woocommerce-mini-cart-item .variation dt, .woocommerce-mini-cart-item .variation dd, .woocommerce-mini-cart-item .variation p { display: inline; margin: 0; } .woocommerce-mini-cart__total { display: flex; justify-content: space-between; align-items: baseline; margin: auto 0 0; padding: 16px 0 12px; font-size: 1.0625rem; } .woocommerce-mini-cart__total strong { font-weight: 600; } .woocommerce-mini-cart__total .amount { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; } .woocommerce-mini-cart__buttons { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin: 0; } .woocommerce-mini-cart__buttons .button { width: 100%; } .woocommerce-mini-cart__buttons .button.checkout { background: var(--blue-500); color: var(--white); border-color: transparent; } .woocommerce-mini-cart__empty-message { text-align: center; color: var(--ink-muted); padding: 40px 0 16px; margin: 0; } .dsea-drawer__body .dsea-empty { margin: auto 0; } .blockUI.blockOverlay { background: rgba(255, 255, 255, .6) !important; } /* Misc WooCommerce */ .woocommerce .col2-set::after, .woocommerce .clear { clear: both; } .woocommerce-LostPassword { font-size: .875rem; } .woocommerce-form-register .woocommerce-privacy-policy-text { font-size: .8125rem; color: var(--ink-muted); } .wc-block-components-notice-banner svg { display: none; } abbr.required, .required { text-decoration: none; } .woocommerce-table--order-downloads { font-size: .9375rem; } .woocommerce-info::before, .woocommerce-message::before, .woocommerce-error::before { content: none; } /* Posts and pages */ .dsea-postlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; } .dsea-postlist a { color: var(--ink); text-decoration: none; } .dsea-figure { margin: 0 0 20px; border-radius: var(--r-lg); overflow: hidden; } .dsea-404 { text-align: center; padding-block: 48px; } .dsea-404 .dsea-inline-search, .dsea-404-search { margin: 24px auto; justify-content: center; } .alignwide { max-width: var(--maxw); } .alignfull { width: 100vw; margin-left: calc(50% - 50vw); } .wp-caption-text, figcaption { font-size: .875rem; color: var(--ink-muted); } /* 15. Utilities and accessibility ---------------------------------------- */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .screen-reader-text:focus { clip: auto; clip-path: none; width: auto; height: auto; margin: 0; overflow: visible; white-space: normal; top: 8px; left: 8px; z-index: 1000; padding: 12px 16px; background: var(--white); border-radius: var(--r-md); box-shadow: var(--shadow-2); } [hidden] { display: none !important; } .dsea-toast[hidden] { display: block !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .dsea-pcard__link:hover, .dsea-points--link:hover { transform: none; } } @media (forced-colors: active) { .dsea-btn, .button, .dsea-chip, .dsea-badge { border: 1px solid ButtonText; } .dsea-timeline__dot { border: 2px solid CanvasText; } } @media print { .dsea-header, .dsea-bottomnav, .dsea-footer, .dsea-drawer, .dsea-banner, .dsea-toast, .dsea-sticky-buy { display: none !important; } body { background: #fff; padding: 0; } } .dsea-from { font-family: var(--font-body); font-weight: 500; font-size: .8125em; color: var(--ink-muted); }