5e03dccb69
- use role="status" for info messages, role="alert" for errors - add aria-live attribute (polite for info, assertive for errors) - move phx-click to close button for better keyboard navigation - add close buttons to shop flash messages - add aria-hidden to decorative icons Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
3167 lines
62 KiB
CSS
3167 lines
62 KiB
CSS
/* Component styles — extracted from inline styles in product.ex, layout.ex, etc.
|
|
Each component gets its own section. */
|
|
|
|
@layer components {
|
|
/* ── Shared heading treatment ──
|
|
font-family + weight + tracking + colour used across
|
|
hero titles, section headings, collection headers, PDP, etc. */
|
|
|
|
.t-heading {
|
|
font-family: var(--t-font-heading);
|
|
font-weight: var(--t-heading-weight);
|
|
letter-spacing: var(--t-heading-tracking);
|
|
color: var(--t-text-primary);
|
|
}
|
|
|
|
/* ── Product card ── */
|
|
|
|
.product-card {
|
|
background-color: var(--t-surface-raised);
|
|
border-radius: var(--t-radius-card);
|
|
overflow: hidden;
|
|
transition: all 0.2s ease;
|
|
|
|
&[data-variant="default"],
|
|
&[data-variant="compact"] {
|
|
border: 1px solid var(--t-border-default);
|
|
}
|
|
|
|
&[data-variant="minimal"] {
|
|
border: 1px solid var(--t-border-subtle);
|
|
}
|
|
|
|
&[data-variant="default"],
|
|
&[data-variant="featured"] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
&[data-variant="featured"]:hover {
|
|
transform: translateY(-0.25rem);
|
|
}
|
|
|
|
&[data-clickable] {
|
|
position: relative;
|
|
}
|
|
|
|
& .stretched-link {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.product-card-image-wrap {
|
|
display: block;
|
|
z-index: 1;
|
|
overflow: hidden;
|
|
position: relative;
|
|
background-color: #e5e7eb;
|
|
}
|
|
|
|
.product-card-image-wrap img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.product-image-primary {
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.product-card-placeholder {
|
|
color: var(--t-text-tertiary);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.placeholder-icon {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.product-card-category {
|
|
color: var(--t-text-tertiary);
|
|
text-decoration: none;
|
|
position: relative;
|
|
z-index: 1;
|
|
font-size: var(--t-text-caption);
|
|
margin-bottom: 0.25rem;
|
|
display: block;
|
|
}
|
|
|
|
.product-card-category:where(a):hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.product-card-title {
|
|
color: var(--t-text-primary);
|
|
font-weight: 600;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.product-card[data-variant="default"] .product-card-title,
|
|
.product-card[data-variant="compact"] .product-card-title {
|
|
font-family: var(--t-font-heading);
|
|
}
|
|
|
|
.product-card[data-variant="featured"] .product-card-title {
|
|
font-size: var(--t-text-small);
|
|
font-weight: 500;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.product-card[data-variant="compact"] .product-card-title {
|
|
font-size: var(--t-text-small);
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.product-card[data-variant="minimal"] .product-card-title {
|
|
font-size: var(--t-text-caption);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.product-card-delivery {
|
|
color: var(--t-text-tertiary);
|
|
font-size: var(--t-text-caption);
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
/* ── Product prices (shared between cards and PDP) ── */
|
|
|
|
.product-price--sale {
|
|
color: var(--t-accent);
|
|
}
|
|
|
|
.product-price--compare {
|
|
color: var(--t-text-tertiary);
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.product-price--regular {
|
|
color: var(--t-text-primary);
|
|
}
|
|
|
|
.product-price--secondary {
|
|
color: var(--t-text-secondary);
|
|
}
|
|
|
|
/* Card-variant price sizing */
|
|
.product-card[data-variant="default"] .product-price--sale,
|
|
.product-card[data-variant="default"] .product-price--regular {
|
|
font-size: var(--t-text-large);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.product-card[data-variant="default"] .product-price--compare {
|
|
font-size: var(--t-text-small);
|
|
margin-inline-start: 0.5rem;
|
|
}
|
|
|
|
.product-card[data-variant="featured"] .product-price--secondary {
|
|
font-size: var(--t-text-small);
|
|
}
|
|
|
|
.product-card[data-variant="featured"] .product-price--compare {
|
|
margin-inline-end: 0.25rem;
|
|
}
|
|
|
|
.product-card[data-variant="compact"] .product-price--regular {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.product-card[data-variant="minimal"] .product-price--secondary {
|
|
font-size: var(--t-text-caption);
|
|
}
|
|
|
|
/* PDP price sizing */
|
|
.pdp-price-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.pdp-price-row .product-price--sale,
|
|
.pdp-price-row .product-price--regular {
|
|
font-size: var(--t-heading-lg);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.pdp-price-row .product-price--compare {
|
|
font-size: var(--t-text-xl);
|
|
}
|
|
|
|
.sale-badge {
|
|
background-color: var(--t-sale-color);
|
|
padding: 0.25rem 0.5rem;
|
|
font-size: var(--t-text-small);
|
|
font-weight: 700;
|
|
color: #fff;
|
|
border-radius: var(--t-radius-sm, 4px);
|
|
}
|
|
|
|
/* ── Hero section ── */
|
|
|
|
.hero-section {
|
|
padding: var(--space-2xl) var(--space-lg);
|
|
text-align: center;
|
|
|
|
&[data-background="base"] {
|
|
background-color: var(--t-surface-base);
|
|
}
|
|
|
|
&[data-background="sunken"] {
|
|
background-color: var(--t-surface-sunken);
|
|
}
|
|
|
|
& .t-heading {
|
|
font-size: var(--t-heading-lg);
|
|
margin-bottom: 1rem;
|
|
}
|
|
}
|
|
|
|
.hero-section--page {
|
|
padding-top: var(--space-2xl);
|
|
text-align: center;
|
|
|
|
& .t-heading {
|
|
font-size: var(--t-heading-xl);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
& .hero-description {
|
|
margin-bottom: 3rem;
|
|
max-width: 42rem;
|
|
}
|
|
}
|
|
|
|
.hero-error {
|
|
text-align: center;
|
|
|
|
& .t-heading {
|
|
font-size: var(--t-heading-lg);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
& .hero-description {
|
|
margin-bottom: 2rem;
|
|
max-width: 28rem;
|
|
}
|
|
}
|
|
|
|
.hero-pre-title {
|
|
font-family: var(--t-font-heading);
|
|
font-weight: var(--t-heading-weight);
|
|
color: var(--t-accent);
|
|
font-size: var(--t-heading-display);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.hero-description {
|
|
color: var(--t-text-secondary);
|
|
line-height: 1.6;
|
|
font-size: var(--t-text-large);
|
|
max-width: 32rem;
|
|
margin-inline: auto;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.hero-cta-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
.hero-cta {
|
|
padding: 0.75rem 2rem;
|
|
font-weight: 600;
|
|
transition: all 0.2s ease;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* ── Category nav ── */
|
|
|
|
.category-nav-section {
|
|
padding: var(--space-xl) var(--space-lg);
|
|
background-color: var(--t-surface-base);
|
|
}
|
|
|
|
.category-nav {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 1rem;
|
|
max-width: 48rem;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.category-card {
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 1rem;
|
|
border-radius: 0.5rem;
|
|
transition: background-color 0.15s ease;
|
|
}
|
|
|
|
.category-card:hover {
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.category-image {
|
|
width: 6rem;
|
|
max-width: 100%;
|
|
aspect-ratio: 1;
|
|
border-radius: 9999px;
|
|
background-color: #e5e7eb;
|
|
background-size: cover;
|
|
background-position: center;
|
|
transition: transform 0.15s ease;
|
|
}
|
|
|
|
.category-card:hover .category-image {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.category-name {
|
|
font-family: var(--t-font-body);
|
|
color: var(--t-text-primary);
|
|
font-size: var(--t-text-small);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ── Featured products section ── */
|
|
|
|
.featured-section {
|
|
padding: var(--space-xl) var(--space-lg);
|
|
background-color: var(--t-surface-sunken);
|
|
|
|
& .t-heading {
|
|
font-size: var(--t-text-2xl);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
}
|
|
|
|
.featured-cta-wrap {
|
|
text-align: center;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.outline-button {
|
|
background-color: transparent;
|
|
color: var(--t-text-primary);
|
|
border: 1px solid var(--t-text-primary);
|
|
border-radius: var(--t-radius-button);
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
padding: 0.75rem 1.5rem;
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
display: inline-block;
|
|
}
|
|
|
|
/* ── Image + text section ── */
|
|
|
|
.image-text-section {
|
|
padding: var(--space-2xl) var(--space-lg);
|
|
background-color: var(--t-surface-base);
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 3rem;
|
|
align-items: center;
|
|
|
|
& .t-heading {
|
|
font-size: var(--t-text-2xl);
|
|
margin-bottom: 1rem;
|
|
}
|
|
}
|
|
|
|
.image-text-image {
|
|
border-radius: var(--t-radius-image);
|
|
height: 18rem;
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
.image-text-body {
|
|
color: var(--t-text-secondary);
|
|
line-height: 1.7;
|
|
font-size: var(--t-text-base);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.accent-link {
|
|
color: var(--t-accent-text);
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
font-size: var(--t-text-small);
|
|
font-weight: 500;
|
|
transition: color 0.15s ease;
|
|
}
|
|
|
|
/* ── Collection header ── */
|
|
|
|
.collection-header-wrap {
|
|
background-color: var(--t-surface-raised);
|
|
border-color: var(--t-border-default);
|
|
border-bottom: 1px solid var(--t-border-default);
|
|
|
|
& .t-heading {
|
|
font-size: var(--t-heading-lg);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
}
|
|
|
|
.collection-header-inner {
|
|
max-width: 80rem;
|
|
margin-inline: auto;
|
|
padding: 2rem 1rem;
|
|
}
|
|
|
|
.collection-header-meta {
|
|
color: var(--t-text-secondary);
|
|
}
|
|
|
|
/* ── Filter bar ── */
|
|
|
|
.filter-bar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.75rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.filter-pills-container {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
/* ── Collection empty state ── */
|
|
|
|
.collection-empty {
|
|
text-align: center;
|
|
padding-block: 4rem;
|
|
color: var(--t-text-secondary);
|
|
}
|
|
|
|
.collection-empty-link {
|
|
display: inline-block;
|
|
margin-top: 1rem;
|
|
color: var(--t-text-accent, var(--t-accent));
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.collection-sort-submit {
|
|
padding: 0.375rem 1rem;
|
|
font-size: var(--t-text-small);
|
|
}
|
|
|
|
/* ── Shop pagination ── */
|
|
|
|
.shop-pagination {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
margin-top: 2.5rem;
|
|
padding-top: 1.5rem;
|
|
border-top: 1px solid var(--t-border);
|
|
}
|
|
|
|
.shop-pagination-showing {
|
|
font-size: var(--t-text-small);
|
|
color: var(--t-text-secondary);
|
|
}
|
|
|
|
.shop-pagination-buttons {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.shop-pagination-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 2.25rem;
|
|
height: 2.25rem;
|
|
padding-inline: 0.5rem;
|
|
font-size: var(--t-text-small);
|
|
color: var(--t-text-primary);
|
|
background: transparent;
|
|
border: 1px solid var(--t-border);
|
|
border-radius: var(--t-radius-button, 0.375rem);
|
|
text-decoration: none;
|
|
transition: background-color 0.15s, border-color 0.15s;
|
|
|
|
&:hover {
|
|
background: var(--t-surface-sunken, var(--t-surface-alt));
|
|
}
|
|
}
|
|
|
|
.shop-pagination-btn-active {
|
|
background: var(--t-accent);
|
|
color: var(--t-text-inverse, #fff);
|
|
border-color: var(--t-accent);
|
|
pointer-events: none;
|
|
|
|
&:hover {
|
|
background: var(--t-accent);
|
|
}
|
|
}
|
|
|
|
.shop-pagination-btn-disabled {
|
|
opacity: 0.4;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.shop-pagination-ellipsis {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 2.25rem;
|
|
height: 2.25rem;
|
|
font-size: var(--t-text-small);
|
|
color: var(--t-text-secondary);
|
|
}
|
|
|
|
@media (max-width: 35.99em) {
|
|
.shop-pagination {
|
|
justify-content: center;
|
|
}
|
|
|
|
.shop-pagination-showing {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.shop-pagination-buttons {
|
|
justify-content: center;
|
|
}
|
|
|
|
.shop-pagination-btn {
|
|
min-width: 2rem;
|
|
height: 2rem;
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.shop-pagination-ellipsis {
|
|
min-width: 1.5rem;
|
|
}
|
|
}
|
|
|
|
/* ── Search page ── */
|
|
|
|
.search-page-form {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
margin-bottom: 2rem;
|
|
max-width: 32rem;
|
|
}
|
|
|
|
.search-page-form input {
|
|
flex: 1;
|
|
}
|
|
|
|
.search-page-count {
|
|
color: var(--t-text-secondary);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
/* ── Breadcrumb ── */
|
|
|
|
.breadcrumb {
|
|
color: var(--t-text-secondary);
|
|
|
|
& [aria-current="page"] {
|
|
color: var(--t-text-primary);
|
|
}
|
|
|
|
& a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
/* ── Related products ── */
|
|
|
|
.related-section {
|
|
border-top: 1px solid var(--t-border-default);
|
|
padding-block: 3rem;
|
|
|
|
& .t-heading {
|
|
font-size: var(--t-text-2xl);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
}
|
|
|
|
/* ── PDP gallery ── */
|
|
|
|
.pdp-gallery-frame {
|
|
border-radius: var(--t-radius-image);
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.pdp-gallery-single img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.pdp-thumbnail {
|
|
border-radius: var(--t-radius-image);
|
|
aspect-ratio: 1 / 1;
|
|
background-color: #e5e7eb;
|
|
overflow: hidden;
|
|
border: none;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.pdp-thumbnail img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.pdp-thumbnail-active {
|
|
border: 2px solid var(--t-accent);
|
|
}
|
|
|
|
/* ── Variant selector ── */
|
|
|
|
.variant-selector {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.variant-label {
|
|
color: var(--t-text-primary);
|
|
display: block;
|
|
font-weight: 600;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.variant-label-value {
|
|
color: var(--t-text-secondary);
|
|
font-weight: normal;
|
|
}
|
|
|
|
.variant-options {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.color-swatch {
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
border-radius: 9999px;
|
|
border: 2px solid var(--t-border-default);
|
|
transition: all 0.2s ease;
|
|
position: relative;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
|
|
&[aria-pressed="true"] {
|
|
border-color: var(--t-accent);
|
|
--tw-ring-color: var(--t-accent);
|
|
}
|
|
|
|
&[aria-disabled="true"] {
|
|
opacity: 0.3;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
.size-btn {
|
|
border: 2px solid var(--t-border-default);
|
|
border-radius: var(--t-radius-button);
|
|
color: var(--t-text-primary);
|
|
background: transparent;
|
|
padding: 0.5rem 1rem;
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
|
|
&[aria-pressed="true"] {
|
|
border-color: var(--t-accent);
|
|
background: color-mix(in oklch, var(--t-accent) 10%, transparent);
|
|
}
|
|
|
|
&[aria-disabled="true"] {
|
|
opacity: 0.3;
|
|
cursor: not-allowed;
|
|
border-style: dashed;
|
|
}
|
|
}
|
|
|
|
/* ── Quantity selector ── */
|
|
|
|
.quantity-selector {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.qty-label {
|
|
color: var(--t-text-primary);
|
|
display: block;
|
|
font-weight: 600;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.qty-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.qty-group {
|
|
border: 2px solid var(--t-border-default);
|
|
border-radius: var(--t-radius-input);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.qty-btn {
|
|
color: var(--t-text-primary);
|
|
padding: 0.5rem 1rem;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
|
|
&:disabled {
|
|
opacity: 0.3;
|
|
}
|
|
}
|
|
|
|
.qty-display {
|
|
color: var(--t-text-primary);
|
|
padding: 0.5rem 1rem;
|
|
border-inline: 2px solid var(--t-border-default);
|
|
width: 3.5rem;
|
|
text-align: center;
|
|
font-variant-numeric: tabular-nums;
|
|
background: none;
|
|
border-top: none;
|
|
border-bottom: none;
|
|
font: inherit;
|
|
appearance: textfield;
|
|
|
|
&::-webkit-inner-spin-button,
|
|
&::-webkit-outer-spin-button {
|
|
appearance: none;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.stock-in {
|
|
color: var(--t-text-tertiary);
|
|
font-size: var(--t-text-small);
|
|
}
|
|
|
|
.stock-out {
|
|
color: var(--t-sale-color);
|
|
font-size: var(--t-text-small);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ── Add to cart ── */
|
|
|
|
.atc-wrap {
|
|
background-color: var(--t-surface-base);
|
|
border-color: var(--t-border-subtle);
|
|
margin-bottom: 1rem;
|
|
|
|
&[data-sticky="true"] {
|
|
position: sticky;
|
|
bottom: 0;
|
|
z-index: 10;
|
|
padding-block: 0.75rem;
|
|
margin-inline: -1rem;
|
|
padding-inline: 1rem;
|
|
border-top: 1px solid var(--t-border-subtle);
|
|
}
|
|
}
|
|
|
|
.atc-btn {
|
|
background-color: var(--t-accent);
|
|
color: var(--t-text-inverse);
|
|
border-radius: var(--t-radius-button);
|
|
border: none;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
padding: 0.75rem 1.5rem;
|
|
font-size: var(--t-text-large);
|
|
font-weight: 600;
|
|
transition: all 0.2s ease;
|
|
|
|
&:disabled {
|
|
background-color: var(--t-border-default);
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
/* ── Accordion ── */
|
|
|
|
.accordion-summary {
|
|
color: var(--t-text-primary);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-block: 1rem;
|
|
cursor: pointer;
|
|
list-style: none;
|
|
|
|
&::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.accordion-title {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.accordion-icon {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
details[open] > .accordion-summary .accordion-icon {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.accordion-body {
|
|
color: var(--t-text-secondary);
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
/* ── Product details ── */
|
|
|
|
.details-wrap {
|
|
border-top: 1px solid var(--t-border-subtle);
|
|
border-bottom: 1px solid var(--t-border-subtle);
|
|
border-color: var(--t-border-subtle);
|
|
margin-top: 2rem;
|
|
|
|
& > * + * {
|
|
border-top: 1px solid var(--t-border-subtle);
|
|
}
|
|
}
|
|
|
|
.details-description {
|
|
line-height: 1.625;
|
|
}
|
|
|
|
.details-table {
|
|
width: 100%;
|
|
font-size: var(--t-text-small);
|
|
}
|
|
|
|
.details-table-row {
|
|
border-bottom: 1px solid var(--t-border-subtle);
|
|
}
|
|
|
|
.details-th {
|
|
color: var(--t-text-primary);
|
|
text-align: start;
|
|
padding-block: 0.5rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.details-td {
|
|
padding-block: 0.5rem;
|
|
}
|
|
|
|
.details-subheading {
|
|
color: var(--t-text-primary);
|
|
font-weight: 600;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.details-shipping {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.details-shipping-text {
|
|
font-size: var(--t-text-small);
|
|
}
|
|
|
|
/* ── Spacer block ── */
|
|
|
|
.block-spacer {
|
|
height: 3rem;
|
|
}
|
|
|
|
.block-spacer[data-size="small"] {
|
|
height: 1.5rem;
|
|
}
|
|
|
|
.block-spacer[data-size="large"] {
|
|
height: 5rem;
|
|
}
|
|
|
|
.block-spacer[data-size="xlarge"] {
|
|
height: 8rem;
|
|
}
|
|
|
|
/* ── Divider block ── */
|
|
|
|
.block-divider {
|
|
border: none;
|
|
border-top: 1px solid var(--t-border-default);
|
|
max-width: 80rem;
|
|
margin: 2rem auto;
|
|
padding: 0;
|
|
}
|
|
|
|
.block-divider[data-style="dots"] {
|
|
border-top-style: dotted;
|
|
border-top-width: 3px;
|
|
}
|
|
|
|
.block-divider[data-style="fade"] {
|
|
border-top: none;
|
|
height: 1px;
|
|
background: linear-gradient(
|
|
to right,
|
|
transparent,
|
|
var(--t-border-default) 20%,
|
|
var(--t-border-default) 80%,
|
|
transparent
|
|
);
|
|
}
|
|
|
|
/* ── Button block ── */
|
|
|
|
.block-button {
|
|
max-width: 80rem;
|
|
margin-inline: auto;
|
|
padding: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.block-button[data-align="left"] {
|
|
text-align: left;
|
|
}
|
|
|
|
.block-button[data-align="right"] {
|
|
text-align: right;
|
|
}
|
|
|
|
/* ── Video embed block ── */
|
|
|
|
.video-embed {
|
|
position: relative;
|
|
aspect-ratio: 16 / 9;
|
|
border-radius: var(--t-radius);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.video-embed[data-ratio="4:3"] {
|
|
aspect-ratio: 4 / 3;
|
|
}
|
|
|
|
.video-embed[data-ratio="1:1"] {
|
|
aspect-ratio: 1 / 1;
|
|
}
|
|
|
|
.video-embed iframe {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.video-embed-caption {
|
|
color: var(--t-text-secondary);
|
|
font-size: var(--t-text-small);
|
|
text-align: center;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.video-embed-fallback {
|
|
text-align: center;
|
|
padding: 2rem 1rem;
|
|
}
|
|
|
|
.video-embed-fallback a {
|
|
color: var(--t-accent-button);
|
|
}
|
|
|
|
/* ── Announcement bar ── */
|
|
|
|
.announcement-bar {
|
|
background-color: var(--t-accent-button);
|
|
color: var(--t-text-inverse);
|
|
text-align: center;
|
|
padding: 0.5rem 1rem;
|
|
font-size: var(--t-text-small);
|
|
}
|
|
|
|
/* ── Page container (shared responsive centering) ── */
|
|
|
|
.page-container {
|
|
max-width: 80rem;
|
|
margin-inline: auto;
|
|
padding: 2rem 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2rem;
|
|
}
|
|
|
|
/* ── Shop container (body-level defaults) ── */
|
|
|
|
.shop-container {
|
|
background-color: var(--t-surface-base);
|
|
font-family: var(--t-font-body);
|
|
color: var(--t-text-primary);
|
|
min-height: 100vh;
|
|
-webkit-text-size-adjust: 100%;
|
|
text-size-adjust: 100%;
|
|
}
|
|
|
|
.shop-container[data-bottom-nav] {
|
|
padding-bottom: 5rem;
|
|
}
|
|
|
|
/* ── Shop header ── */
|
|
|
|
.shop-header {
|
|
background-color: var(--t-surface-raised);
|
|
border-bottom: 1px solid var(--t-border-default);
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.shop-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.shop-logo-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.shop-logo-img {
|
|
width: auto;
|
|
}
|
|
|
|
.shop-logo-text {
|
|
font-family: var(--t-font-heading);
|
|
font-size: var(--t-text-xl);
|
|
font-weight: var(--t-heading-weight);
|
|
color: var(--t-text-primary);
|
|
}
|
|
|
|
.shop-nav {
|
|
display: none;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.shop-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
z-index: 1;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.header-icon-btn {
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
color: var(--t-text-secondary);
|
|
text-decoration: none;
|
|
border-radius: var(--t-radius-button);
|
|
transition: all 0.2s ease;
|
|
|
|
&:where(button) {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
& svg {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
}
|
|
}
|
|
|
|
.cart-badge {
|
|
position: absolute;
|
|
top: -4px;
|
|
inset-inline-end: -4px;
|
|
background: var(--t-accent);
|
|
color: var(--t-text-inverse);
|
|
font-size: var(--t-text-caption);
|
|
font-weight: 600;
|
|
min-width: 18px;
|
|
height: 18px;
|
|
border-radius: 9999px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
/* ── Desktop nav links ── */
|
|
|
|
.nav-link {
|
|
color: var(--t-text-secondary);
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
|
|
&[aria-current="page"] {
|
|
color: var(--t-text-primary);
|
|
border-bottom-color: var(--t-accent);
|
|
}
|
|
}
|
|
|
|
/* ── Hamburger menu button (mobile only) ── */
|
|
|
|
.header-hamburger {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: var(--t-text-secondary);
|
|
border-radius: var(--t-radius-button);
|
|
margin-right: 0.5rem;
|
|
flex-shrink: 0;
|
|
|
|
&:hover {
|
|
background: var(--t-surface-sunken);
|
|
}
|
|
|
|
& svg {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* ── Mobile nav drawer ── */
|
|
|
|
.mobile-nav-drawer {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1000;
|
|
pointer-events: none;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.mobile-nav-drawer.is-open {
|
|
pointer-events: auto;
|
|
visibility: visible;
|
|
}
|
|
|
|
.mobile-nav-backdrop {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.mobile-nav-drawer.is-open .mobile-nav-backdrop {
|
|
opacity: 1;
|
|
}
|
|
|
|
.mobile-nav-panel {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 280px;
|
|
max-width: 85vw;
|
|
background: var(--t-surface-base);
|
|
transform: translateX(-100%);
|
|
transition: transform 0.25s ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.mobile-nav-drawer.is-open .mobile-nav-panel {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.mobile-nav-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 1rem;
|
|
border-bottom: 1px solid var(--t-border-default);
|
|
}
|
|
|
|
.mobile-nav-title {
|
|
font-family: var(--t-font-heading);
|
|
font-size: var(--t-text-lg);
|
|
font-weight: 600;
|
|
color: var(--t-text-primary);
|
|
}
|
|
|
|
.mobile-nav-close {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: var(--t-text-secondary);
|
|
border-radius: var(--t-radius-button);
|
|
|
|
&:hover {
|
|
background: var(--t-surface-sunken);
|
|
}
|
|
}
|
|
|
|
.mobile-nav-links {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0.5rem 0;
|
|
}
|
|
|
|
.mobile-nav-drawer .mobile-nav-link {
|
|
display: block;
|
|
padding: 0.875rem 1.25rem;
|
|
color: var(--t-text-primary);
|
|
text-decoration: none;
|
|
font-size: var(--t-text-base);
|
|
font-weight: 500;
|
|
transition: background 0.15s ease;
|
|
|
|
&:hover {
|
|
background: var(--t-surface-sunken);
|
|
}
|
|
|
|
&[aria-current="page"] {
|
|
color: var(--t-accent);
|
|
background: color-mix(in oklch, var(--t-accent) 8%, transparent);
|
|
}
|
|
}
|
|
|
|
.mobile-nav-section {
|
|
padding-top: 0.5rem;
|
|
border-top: 1px solid var(--t-border-default);
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.mobile-nav-section-title {
|
|
display: block;
|
|
padding: 0.5rem 1.25rem;
|
|
font-size: var(--t-text-sm);
|
|
font-weight: 600;
|
|
color: var(--t-text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* ── Mobile bottom nav (REMOVED - replaced by hamburger drawer) ── */
|
|
|
|
.mobile-bottom-nav {
|
|
display: none;
|
|
}
|
|
|
|
/* ── Search modal ── */
|
|
|
|
.search-modal {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
z-index: 1001;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
padding-top: 10vh;
|
|
}
|
|
|
|
.search-panel {
|
|
width: 100%;
|
|
max-width: 36rem;
|
|
margin-inline: 1rem;
|
|
background: var(--t-surface-raised);
|
|
border-radius: var(--t-radius-card);
|
|
overflow: hidden;
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.search-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 1rem;
|
|
border-bottom: 1px solid var(--t-border-default);
|
|
}
|
|
|
|
.search-icon {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
flex-shrink: 0;
|
|
color: var(--t-text-tertiary);
|
|
}
|
|
|
|
.search-input {
|
|
flex: 1;
|
|
font-size: var(--t-text-large, 1.125rem);
|
|
font-family: var(--t-font-body);
|
|
color: var(--t-text-primary);
|
|
background: transparent;
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
|
|
.search-kbd {
|
|
display: none;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
font-size: var(--t-text-caption);
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: var(--t-radius-button, 0.25rem);
|
|
color: var(--t-text-tertiary);
|
|
border: 1px solid var(--t-border-default);
|
|
}
|
|
|
|
.search-close {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--t-text-tertiary);
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
border-radius: var(--t-radius-button);
|
|
transition: all 0.2s ease;
|
|
|
|
& svg {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
}
|
|
}
|
|
|
|
.search-results {
|
|
max-height: 60vh;
|
|
overflow-y: auto;
|
|
|
|
& ul {
|
|
padding-block: 0.5rem;
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
}
|
|
|
|
.search-result {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.75rem 1rem;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
transition: background-color 0.15s ease;
|
|
|
|
&:hover {
|
|
background: var(--t-surface-sunken);
|
|
}
|
|
}
|
|
|
|
.search-result-thumb {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
flex-shrink: 0;
|
|
border-radius: var(--t-radius-card, 0.25rem);
|
|
overflow: hidden;
|
|
background: var(--t-surface-sunken);
|
|
|
|
& img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
.search-result-details {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.search-result-title {
|
|
font-size: var(--t-text-small);
|
|
font-weight: 500;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
color: var(--t-text-primary);
|
|
}
|
|
|
|
.search-result-meta {
|
|
font-size: var(--t-text-caption);
|
|
color: var(--t-text-tertiary);
|
|
|
|
& span {
|
|
margin-inline-start: 0.5rem;
|
|
}
|
|
}
|
|
|
|
.search-hint {
|
|
padding: 1.5rem;
|
|
color: var(--t-text-tertiary);
|
|
font-size: var(--t-text-small);
|
|
}
|
|
|
|
/* ── Shop footer ── */
|
|
|
|
.shop-footer {
|
|
background-color: var(--t-surface-raised);
|
|
border-top: 1px solid var(--t-border-default);
|
|
}
|
|
|
|
.shop-footer-inner {
|
|
max-width: 80rem;
|
|
margin-inline: auto;
|
|
padding: 3rem 1rem;
|
|
}
|
|
|
|
.footer-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 3rem;
|
|
}
|
|
|
|
.footer-links {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 2rem;
|
|
}
|
|
|
|
.footer-heading {
|
|
font-family: var(--t-font-heading);
|
|
font-weight: 600;
|
|
font-size: var(--t-text-small);
|
|
margin-bottom: 1rem;
|
|
color: var(--t-text-primary);
|
|
}
|
|
|
|
.footer-nav {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
font-size: var(--t-text-small);
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.footer-link {
|
|
color: var(--t-text-secondary);
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
transition: opacity 0.15s ease;
|
|
|
|
&:hover {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
.footer-bottom {
|
|
margin-top: 3rem;
|
|
padding-top: 2rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
border-top: 1px solid var(--t-border-subtle);
|
|
}
|
|
|
|
.footer-copyright {
|
|
font-size: var(--t-text-caption);
|
|
color: var(--t-text-tertiary);
|
|
}
|
|
|
|
/* ── Cart drawer ── */
|
|
|
|
.cart-drawer-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
z-index: 999;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 0.3s ease, visibility 0.3s ease;
|
|
|
|
&.open {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
.cart-drawer {
|
|
position: fixed;
|
|
top: 0;
|
|
inset-inline-end: -400px;
|
|
width: 400px;
|
|
max-width: 90vw;
|
|
height: 100vh;
|
|
height: 100dvh;
|
|
background: var(--t-surface-raised);
|
|
z-index: 1001;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: inset-inline-end 0.3s ease;
|
|
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
|
|
|
|
&.open {
|
|
inset-inline-end: 0;
|
|
}
|
|
}
|
|
|
|
.cart-drawer-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 1rem 1.5rem;
|
|
border-bottom: 1px solid var(--t-border-default);
|
|
}
|
|
|
|
.cart-drawer-title {
|
|
font-family: var(--t-font-heading);
|
|
font-weight: var(--t-heading-weight);
|
|
font-size: var(--t-text-large);
|
|
color: var(--t-text-primary);
|
|
margin: 0;
|
|
}
|
|
|
|
.cart-drawer-close {
|
|
background: none;
|
|
border: none;
|
|
padding: 0.5rem;
|
|
cursor: pointer;
|
|
color: var(--t-text-secondary);
|
|
|
|
& svg {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
}
|
|
}
|
|
|
|
.cart-drawer-items {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 1rem;
|
|
|
|
& ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
& li {
|
|
border-bottom: 1px solid var(--t-border-default);
|
|
}
|
|
}
|
|
|
|
.cart-drawer-footer {
|
|
padding: 1rem 1.5rem;
|
|
border-top: 1px solid var(--t-border-default);
|
|
background: var(--t-surface-sunken);
|
|
}
|
|
|
|
.cart-drawer-total {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-family: var(--t-font-body);
|
|
font-size: var(--t-text-base);
|
|
font-weight: 600;
|
|
color: var(--t-text-primary);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.cart-drawer-checkout {
|
|
width: 100%;
|
|
padding: 0.75rem 1.5rem;
|
|
font-weight: 600;
|
|
transition: all 0.2s ease;
|
|
background: var(--t-accent-button);
|
|
color: var(--t-text-inverse);
|
|
border-radius: var(--t-radius-button);
|
|
border: none;
|
|
cursor: pointer;
|
|
font-family: var(--t-font-body);
|
|
margin-bottom: 0.5rem;
|
|
|
|
&:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
.cart-drawer-notice {
|
|
font-size: var(--t-text-sm);
|
|
color: var(--t-text-secondary);
|
|
text-align: center;
|
|
}
|
|
|
|
/* ── Cart item row ── */
|
|
|
|
.cart-item-row {
|
|
display: flex;
|
|
gap: 1rem;
|
|
padding: 0.75rem 0;
|
|
|
|
&[data-size="compact"] {
|
|
gap: 0.75rem;
|
|
}
|
|
}
|
|
|
|
.cart-item-image {
|
|
display: block;
|
|
text-decoration: none;
|
|
border-radius: var(--t-radius-card);
|
|
background-size: cover;
|
|
background-position: center;
|
|
flex-shrink: 0;
|
|
width: 80px;
|
|
height: 80px;
|
|
|
|
&[data-size="compact"] {
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
}
|
|
|
|
.cart-item-image--empty {
|
|
background-color: var(--t-surface-sunken);
|
|
}
|
|
|
|
.cart-item-details {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.cart-item-name {
|
|
font-family: var(--t-font-body);
|
|
font-size: var(--t-text-base);
|
|
font-weight: 500;
|
|
margin: 0 0 2px;
|
|
|
|
&[data-size="compact"] {
|
|
font-size: var(--t-text-small);
|
|
}
|
|
|
|
& span {
|
|
color: var(--t-text-primary);
|
|
}
|
|
}
|
|
|
|
.cart-item-name-link {
|
|
color: var(--t-text-primary);
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
.cart-item-variant-text {
|
|
font-family: var(--t-font-body);
|
|
font-size: var(--t-text-caption);
|
|
color: var(--t-text-tertiary);
|
|
margin: 0;
|
|
}
|
|
|
|
.cart-item-actions {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 4px;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.cart-qty-group {
|
|
border: 1px solid var(--t-border-default);
|
|
border-radius: var(--t-radius-input);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.cart-qty-btn {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: var(--t-text-primary);
|
|
padding: 0.25rem 0.75rem;
|
|
}
|
|
|
|
.cart-qty-display {
|
|
color: var(--t-text-primary);
|
|
min-width: 2rem;
|
|
text-align: center;
|
|
padding: 0.25rem 0.75rem;
|
|
border-inline: 1px solid var(--t-border-default);
|
|
}
|
|
|
|
.cart-qty-text {
|
|
font-size: var(--t-text-caption);
|
|
color: var(--t-text-tertiary);
|
|
}
|
|
|
|
.cart-item-price-col {
|
|
flex-shrink: 0;
|
|
text-align: end;
|
|
}
|
|
|
|
.cart-item-price {
|
|
font-weight: 500;
|
|
font-size: var(--t-text-base);
|
|
color: var(--t-text-primary);
|
|
margin: 0;
|
|
|
|
&[data-size="compact"] {
|
|
font-size: var(--t-text-small);
|
|
}
|
|
}
|
|
|
|
.cart-remove-btn {
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
font-family: var(--t-font-body);
|
|
font-size: var(--t-text-caption);
|
|
color: var(--t-text-tertiary);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.cart-remove-form {
|
|
display: contents;
|
|
}
|
|
|
|
/* ── Cart empty state ── */
|
|
|
|
.cart-empty {
|
|
color: var(--t-text-secondary);
|
|
text-align: center;
|
|
padding-block: 2rem;
|
|
}
|
|
|
|
.cart-empty-icon {
|
|
color: var(--t-text-tertiary);
|
|
width: 4rem;
|
|
height: 4rem;
|
|
margin-inline: auto;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.cart-empty p {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.cart-continue-link {
|
|
color: var(--t-text-accent);
|
|
text-decoration: underline;
|
|
|
|
&:where(button) {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
/* ── Cart page item (full size) ── */
|
|
|
|
.cart-page-item {
|
|
display: flex;
|
|
gap: 1rem;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.cart-page-image {
|
|
border-radius: var(--t-radius-image);
|
|
width: 6rem;
|
|
height: 6rem;
|
|
flex-shrink: 0;
|
|
background-color: #e5e7eb;
|
|
overflow: hidden;
|
|
|
|
& img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
.cart-page-item-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.cart-page-item-name {
|
|
font-family: var(--t-font-heading);
|
|
color: var(--t-text-primary);
|
|
font-weight: 600;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.cart-page-item-variant {
|
|
color: var(--t-text-secondary);
|
|
font-size: var(--t-text-small);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.cart-page-item-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.cart-page-item-remove {
|
|
color: var(--t-text-tertiary);
|
|
font-size: var(--t-text-small);
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.cart-page-item-price-col {
|
|
text-align: end;
|
|
}
|
|
|
|
.cart-page-item-price {
|
|
color: var(--t-text-primary);
|
|
font-weight: 700;
|
|
font-size: var(--t-text-large);
|
|
}
|
|
|
|
/* ── Delivery line ── */
|
|
|
|
.delivery-line {
|
|
font-family: var(--t-font-body);
|
|
font-size: var(--t-text-small);
|
|
color: var(--t-text-secondary);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
& form {
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
.delivery-line-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.delivery-select {
|
|
appearance: auto;
|
|
background: transparent;
|
|
border: none;
|
|
color: inherit;
|
|
font: inherit;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
}
|
|
|
|
/* ── Order summary ── */
|
|
|
|
.order-summary-card {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.cart-grid .order-summary-card {
|
|
position: sticky;
|
|
top: 1rem;
|
|
}
|
|
|
|
.order-summary-heading {
|
|
font-family: var(--t-font-heading);
|
|
color: var(--t-text-primary);
|
|
font-size: var(--t-text-xl);
|
|
font-weight: 700;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.order-summary-lines {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.order-summary-line {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.order-summary-label {
|
|
color: var(--t-text-secondary);
|
|
}
|
|
|
|
.order-summary-value {
|
|
color: var(--t-text-primary);
|
|
}
|
|
|
|
.order-summary-divider {
|
|
border-top: 1px solid var(--t-border-default);
|
|
padding-top: 0.75rem;
|
|
}
|
|
|
|
.order-summary-total {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: var(--t-text-large);
|
|
}
|
|
|
|
.order-summary-checkout {
|
|
width: 100%;
|
|
padding: 0.75rem 1.5rem;
|
|
font-weight: 600;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.order-summary-checkout-form {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.order-summary-continue {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 0.75rem 1.5rem;
|
|
font-weight: 600;
|
|
transition: all 0.2s ease;
|
|
text-align: center;
|
|
}
|
|
|
|
.order-summary-notice {
|
|
font-size: var(--t-text-sm);
|
|
color: var(--t-text-secondary);
|
|
text-align: center;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
/* ── Content body ── */
|
|
|
|
.content-body {
|
|
padding: var(--space-xl) var(--space-lg);
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.content-image {
|
|
margin-bottom: var(--space-lg);
|
|
border-radius: var(--t-radius-image);
|
|
overflow: hidden;
|
|
|
|
& img {
|
|
width: 100%;
|
|
height: 300px;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
.content-text {
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.content-page {
|
|
background-color: var(--t-surface-base);
|
|
}
|
|
|
|
/* ── Contact form ── */
|
|
|
|
.contact-form-card {
|
|
padding: 2rem;
|
|
}
|
|
|
|
.contact-form-heading {
|
|
font-family: var(--t-font-heading);
|
|
font-weight: 700;
|
|
font-size: var(--t-text-xl);
|
|
color: var(--t-text-primary);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.contact-form-meta {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
margin-bottom: 1.5rem;
|
|
font-size: var(--t-text-small);
|
|
color: var(--t-text-secondary);
|
|
}
|
|
|
|
.contact-form-spacer {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.contact-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.contact-form-label {
|
|
display: block;
|
|
font-weight: 500;
|
|
margin-bottom: 0.5rem;
|
|
color: var(--t-text-primary);
|
|
}
|
|
|
|
.contact-form .themed-input {
|
|
width: 100%;
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
|
|
.contact-form-submit {
|
|
width: 100%;
|
|
padding: 0.75rem 1.5rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ── Accent email link ── */
|
|
|
|
.accent-email {
|
|
color: var(--t-accent);
|
|
}
|
|
|
|
/* ── Card shared styles (info, tracking, newsletter, social cards) ── */
|
|
|
|
.card-section {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.card-heading {
|
|
font-weight: 700;
|
|
margin-bottom: 0.75rem;
|
|
color: var(--t-text-primary);
|
|
}
|
|
|
|
.card-text {
|
|
font-size: var(--t-text-small);
|
|
color: var(--t-text-secondary);
|
|
}
|
|
|
|
.card-text--spaced {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.card-inline-form {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
|
|
& .themed-input {
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding: 0.5rem 0.75rem;
|
|
}
|
|
|
|
& .themed-button {
|
|
padding: 0.5rem 1rem;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
/* ── Info card ── */
|
|
|
|
.info-card-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
font-size: var(--t-text-small);
|
|
color: var(--t-text-secondary);
|
|
}
|
|
|
|
.info-card-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.info-card-bullet {
|
|
color: var(--t-text-tertiary);
|
|
}
|
|
|
|
.info-card-label {
|
|
color: var(--t-text-primary);
|
|
}
|
|
|
|
/* ── Contact info card ── */
|
|
|
|
.contact-info-email {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
color: var(--t-accent);
|
|
text-decoration: none;
|
|
|
|
& svg {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
}
|
|
|
|
/* ── Newsletter card ── */
|
|
|
|
.newsletter-heading {
|
|
font-family: var(--t-font-heading);
|
|
font-weight: 700;
|
|
font-size: var(--t-text-xl);
|
|
color: var(--t-text-primary);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
/* ── Social links card ── */
|
|
|
|
.social-link-card-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.social-link-card-list .social-link-card-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 0.75rem;
|
|
text-decoration: none;
|
|
transition: opacity 0.15s ease;
|
|
|
|
&:hover {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
.social-link-card-icon {
|
|
color: var(--t-text-secondary);
|
|
|
|
& svg {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
}
|
|
}
|
|
|
|
/* ── Social links (footer) ── */
|
|
|
|
.social-links {
|
|
display: flex;
|
|
gap: 1rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
.social-link {
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-decoration: none;
|
|
transition: opacity 0.15s ease;
|
|
color: var(--t-text-secondary);
|
|
border-radius: var(--t-radius-button);
|
|
|
|
& svg {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
}
|
|
}
|
|
|
|
/* ── Star rating ── */
|
|
|
|
.star-rating {
|
|
display: flex;
|
|
gap: 0.125rem;
|
|
|
|
& svg {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
|
|
&[data-size="md"] svg {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
}
|
|
}
|
|
|
|
/* ── Trust badges ── */
|
|
|
|
.trust-badges {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
padding: 1rem;
|
|
background-color: var(--t-surface-sunken);
|
|
border-radius: var(--t-radius-card);
|
|
}
|
|
|
|
.trust-badge-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.trust-badge-icon {
|
|
flex-shrink: 0;
|
|
margin-top: 0.125rem;
|
|
color: var(--t-accent);
|
|
|
|
& svg {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
}
|
|
}
|
|
|
|
.trust-badge-title {
|
|
font-weight: 600;
|
|
color: var(--t-text-primary);
|
|
}
|
|
|
|
.trust-badge-text {
|
|
font-size: var(--t-text-small);
|
|
color: var(--t-text-secondary);
|
|
}
|
|
|
|
/* ── Page title ── */
|
|
|
|
.page-title {
|
|
font-family: var(--t-font-heading);
|
|
font-weight: var(--t-heading-weight);
|
|
font-size: var(--t-heading-lg);
|
|
color: var(--t-text-primary);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
/* ── Reviews section ── */
|
|
|
|
.pdp-reviews {
|
|
border-top: 1px solid var(--t-border-default);
|
|
}
|
|
|
|
.reviews-summary {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-block: 1.5rem;
|
|
cursor: pointer;
|
|
list-style: none;
|
|
color: var(--t-text-primary);
|
|
|
|
&::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.reviews-header-left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.reviews-heading {
|
|
font-family: var(--t-font-heading);
|
|
font-weight: 700;
|
|
font-size: var(--t-text-2xl);
|
|
color: var(--t-text-primary);
|
|
}
|
|
|
|
.reviews-rating-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.reviews-count {
|
|
font-size: var(--t-text-small);
|
|
color: var(--t-text-secondary);
|
|
}
|
|
|
|
.reviews-chevron {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
flex-shrink: 0;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
details[open] > .reviews-summary .reviews-chevron {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.reviews-body {
|
|
padding-bottom: 2rem;
|
|
}
|
|
|
|
.reviews-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.reviews-load-more {
|
|
display: block;
|
|
margin-top: 1.5rem;
|
|
margin-inline: auto;
|
|
padding: 0.5rem 1.5rem;
|
|
font-size: var(--t-text-small);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ── Review card ── */
|
|
|
|
.review-card {
|
|
padding-bottom: 1.5rem;
|
|
border-bottom: 1px solid var(--t-border-subtle);
|
|
}
|
|
|
|
.review-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.review-date {
|
|
font-size: var(--t-text-caption);
|
|
color: var(--t-text-tertiary);
|
|
}
|
|
|
|
.review-title {
|
|
font-weight: 600;
|
|
margin-bottom: 0.25rem;
|
|
color: var(--t-text-primary);
|
|
}
|
|
|
|
.review-body {
|
|
font-size: var(--t-text-small);
|
|
margin-bottom: 0.75rem;
|
|
color: var(--t-text-secondary);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.review-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.review-author {
|
|
font-size: var(--t-text-small);
|
|
font-weight: 500;
|
|
color: var(--t-text-primary);
|
|
}
|
|
|
|
.review-verified {
|
|
font-size: var(--t-text-caption);
|
|
padding: 0.125rem 0.5rem;
|
|
border-radius: var(--t-radius-sm, 4px);
|
|
background-color: var(--t-surface-sunken);
|
|
color: var(--t-text-tertiary);
|
|
}
|
|
|
|
/* ── Rich text ── */
|
|
|
|
.rich-text {
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.rich-text-lead {
|
|
font-size: var(--t-text-large);
|
|
margin-bottom: 0.5rem;
|
|
color: var(--t-text-primary);
|
|
}
|
|
|
|
.rich-text-updated-at {
|
|
font-size: var(--t-text-small);
|
|
color: var(--t-text-secondary);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.rich-text-paragraph {
|
|
margin-bottom: 1rem;
|
|
color: var(--t-text-secondary);
|
|
}
|
|
|
|
.rich-text-heading {
|
|
font-family: var(--t-font-heading);
|
|
font-weight: var(--t-heading-weight);
|
|
font-size: var(--t-text-xl);
|
|
color: var(--t-text-primary);
|
|
margin-top: 2rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.rich-text-closing {
|
|
margin-top: 2rem;
|
|
color: var(--t-text-secondary);
|
|
}
|
|
|
|
.rich-text-list {
|
|
margin-bottom: 1rem;
|
|
margin-inline-start: 1.5rem;
|
|
list-style: disc;
|
|
color: var(--t-text-secondary);
|
|
|
|
& li {
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
}
|
|
|
|
/* ── Flash messages ── */
|
|
|
|
.shop-flash-group {
|
|
/* document flow — pushes content down, no overlay */
|
|
}
|
|
|
|
.shop-flash {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.75rem 1rem;
|
|
background-color: var(--t-surface-raised, #fff);
|
|
color: var(--t-text-primary);
|
|
|
|
& p {
|
|
font-size: var(--t-text-small);
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.shop-flash--info {
|
|
border-bottom: 1px solid var(--t-border-default);
|
|
}
|
|
|
|
.shop-flash--error {
|
|
border-bottom: 1px solid hsl(0 70% 50% / 0.3);
|
|
}
|
|
|
|
.shop-flash-icon {
|
|
flex-shrink: 0;
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
}
|
|
|
|
.shop-flash-icon--info {
|
|
color: var(--t-accent);
|
|
}
|
|
|
|
.shop-flash-icon--error {
|
|
color: hsl(0 70% 50%);
|
|
}
|
|
|
|
.shop-flash-close {
|
|
margin-left: auto;
|
|
padding: 0.25rem;
|
|
cursor: pointer;
|
|
opacity: 0.5;
|
|
transition: opacity 150ms ease;
|
|
border-radius: 0.25rem;
|
|
|
|
&:hover { opacity: 0.8; }
|
|
&:focus-visible {
|
|
opacity: 1;
|
|
outline: 2px solid var(--t-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
}
|
|
|
|
/* Transition classes for JS.hide flash dismiss */
|
|
.fade-out { transition: opacity 200ms ease-out; }
|
|
.fade-out-from { opacity: 1; }
|
|
.fade-out-to { opacity: 0; }
|
|
|
|
/* ── Link buttons (make <a> links styled as buttons) ── */
|
|
|
|
.themed-button:where(a),
|
|
.themed-button-outline:where(a) {
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
}
|
|
|
|
/* ── Checkout success ── */
|
|
|
|
.checkout-main {
|
|
max-width: 48rem;
|
|
padding-block: 4rem;
|
|
}
|
|
|
|
.checkout-header {
|
|
text-align: center;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.checkout-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 4rem;
|
|
height: 4rem;
|
|
border-radius: 9999px;
|
|
margin-bottom: 1.5rem;
|
|
background-color: var(--t-accent);
|
|
color: var(--t-accent-contrast);
|
|
}
|
|
|
|
.checkout-heading {
|
|
font-family: var(--t-font-heading);
|
|
color: var(--t-text-primary);
|
|
|
|
&:where(h1) {
|
|
font-size: var(--t-text-3xl, 1.875rem);
|
|
font-weight: 700;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
&:where(h2) {
|
|
font-size: var(--t-text-large, 1.125rem);
|
|
font-weight: 600;
|
|
margin-bottom: 1rem;
|
|
}
|
|
}
|
|
|
|
.checkout-meta {
|
|
font-size: var(--t-text-large, 1.125rem);
|
|
margin-bottom: 0.5rem;
|
|
color: var(--t-text-secondary);
|
|
|
|
& strong {
|
|
color: var(--t-text-primary);
|
|
}
|
|
|
|
&:last-child {
|
|
font-size: var(--t-text-base, 1rem);
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.checkout-card {
|
|
padding: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.checkout-items {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
list-style: none;
|
|
margin-top: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.checkout-item {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 1px solid var(--t-border-default);
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.checkout-item-thumb {
|
|
width: 3.5rem;
|
|
height: 3.5rem;
|
|
object-fit: cover;
|
|
border-radius: var(--t-radius-card);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.checkout-item > div {
|
|
flex: 1;
|
|
}
|
|
|
|
.checkout-item-name {
|
|
font-weight: 500;
|
|
color: var(--t-text-primary);
|
|
}
|
|
|
|
.checkout-item-link {
|
|
text-decoration: none;
|
|
|
|
&:hover { text-decoration: underline; }
|
|
}
|
|
|
|
.checkout-item-detail {
|
|
font-size: var(--t-text-small, 0.875rem);
|
|
color: var(--t-text-secondary);
|
|
}
|
|
|
|
.checkout-item-price {
|
|
font-weight: 500;
|
|
color: var(--t-text-primary);
|
|
}
|
|
|
|
.checkout-total-border {
|
|
border-top: 1px solid var(--t-border-default);
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
.checkout-total {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: var(--t-text-large, 1.125rem);
|
|
color: var(--t-text-primary);
|
|
}
|
|
|
|
.checkout-total-label {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.checkout-total-amount {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.checkout-shipping-address {
|
|
color: var(--t-text-secondary);
|
|
}
|
|
|
|
.checkout-actions {
|
|
text-align: center;
|
|
}
|
|
|
|
.checkout-cta {
|
|
padding: 0.75rem 2rem;
|
|
}
|
|
|
|
.checkout-pending-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 4rem;
|
|
height: 4rem;
|
|
border-radius: 9999px;
|
|
margin-bottom: 1.5rem;
|
|
background-color: var(--t-surface-sunken);
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
|
|
.checkout-pending-spinner {
|
|
color: var(--t-text-secondary);
|
|
}
|
|
|
|
.checkout-pending-text {
|
|
font-size: var(--t-text-large, 1.125rem);
|
|
margin-bottom: 2rem;
|
|
color: var(--t-text-secondary);
|
|
}
|
|
|
|
.checkout-pending-hint {
|
|
font-size: var(--t-text-small, 0.875rem);
|
|
color: var(--t-text-tertiary);
|
|
}
|
|
|
|
.checkout-contact-link {
|
|
text-decoration: underline;
|
|
color: var(--t-accent);
|
|
}
|
|
|
|
@keyframes pulse {
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
/* ── Error page ── */
|
|
|
|
.error-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: calc(100vh - 4rem);
|
|
}
|
|
|
|
.error-container {
|
|
max-width: 42rem;
|
|
padding-block: 4rem;
|
|
}
|
|
|
|
/* ── PDP page ── */
|
|
|
|
.pdp-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 3rem;
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.pdp-variant-fallback {
|
|
margin-bottom: 1.5rem;
|
|
font-size: var(--t-text-small, 0.875rem);
|
|
color: var(--t-text-secondary);
|
|
}
|
|
|
|
/* ── Cart page ── */
|
|
|
|
.cart-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.cart-page-card {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.cart-page-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* ── Contact page ── */
|
|
|
|
.contact-main {
|
|
max-width: 56rem;
|
|
padding-top: 0;
|
|
padding-bottom: 4rem;
|
|
|
|
& > [data-block-type="hero"] { grid-column: 1 / -1; }
|
|
& > [data-block-type="contact_form"] { grid-column: 1; }
|
|
}
|
|
|
|
.contact-grid {
|
|
display: grid;
|
|
gap: 2rem;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.contact-sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
/* ── Content page image ── */
|
|
|
|
.content-hero-image {
|
|
width: 100%;
|
|
height: 300px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* ── Product grid ── */
|
|
|
|
.product-grid {
|
|
display: grid;
|
|
}
|
|
|
|
.product-grid[data-columns="fixed-4"] {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.product-grid:not([data-columns="fixed-4"]) {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
/* ── Cart layout (cart page) ── */
|
|
|
|
.cart-layout {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.cart-items-stack {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
/* ── Error page product grid ── */
|
|
|
|
.error-container .product-grid {
|
|
margin-top: 3rem;
|
|
max-width: 36rem;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
/* ── Responsive breakpoints ── */
|
|
|
|
@media (min-width: 640px) {
|
|
.page-container { padding-inline: 1.5rem; }
|
|
.collection-header-inner { padding-inline: 1.5rem; }
|
|
.shop-header { padding: 0.75rem 1rem; }
|
|
.shop-footer-inner { padding-inline: 1.5rem; }
|
|
.search-kbd { display: flex; }
|
|
.product-grid:not([data-columns="fixed-4"]) {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
.hero-cta-group { flex-direction: row; }
|
|
.reviews-header-left { flex-direction: row; align-items: center; gap: 1rem; }
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.page-title { font-size: var(--t-heading-xl); }
|
|
.shop-container[data-bottom-nav] { padding-bottom: 0; }
|
|
.shop-header { padding: 1rem 2rem; }
|
|
.shop-nav { display: flex; gap: 1.5rem; }
|
|
.mobile-bottom-nav { display: none; }
|
|
.footer-grid { grid-template-columns: repeat(2, 1fr); }
|
|
.footer-bottom { flex-direction: row; }
|
|
.pdp-grid { grid-template-columns: repeat(2, 1fr); }
|
|
.contact-grid { grid-template-columns: repeat(2, 1fr); }
|
|
.contact-main { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
|
|
.product-grid[data-columns="fixed-4"] {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
.image-text-section { grid-template-columns: repeat(2, 1fr); }
|
|
.collection-header-wrap .t-heading { font-size: var(--t-heading-xl); }
|
|
.hero-section .t-heading { font-size: var(--t-heading-xl); }
|
|
.hero-section--page .t-heading { font-size: var(--t-heading-display); }
|
|
.hero-error .t-heading { font-size: var(--t-heading-xl); }
|
|
.pdp-price-row .product-price--sale,
|
|
.pdp-price-row .product-price--regular { font-size: var(--t-heading-xl); }
|
|
.atc-wrap[data-sticky="true"] {
|
|
position: relative;
|
|
padding-block: 0;
|
|
margin-inline: 0;
|
|
padding-inline: 0;
|
|
border-top: none;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.page-container { padding-inline: 2rem; }
|
|
.collection-header-inner { padding-inline: 2rem; }
|
|
.shop-footer-inner { padding-inline: 2rem; }
|
|
.cart-grid { grid-template-columns: 2fr 1fr; }
|
|
.cart-layout { grid-template-columns: 2fr 1fr; }
|
|
.product-grid[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
|
|
.product-grid[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
|
|
.product-grid[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }
|
|
}
|
|
|
|
/* ── Coming soon ── */
|
|
|
|
.coming-soon {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
min-height: 100dvh;
|
|
padding: 1.5rem;
|
|
text-align: center;
|
|
|
|
& > :first-child {
|
|
margin-block: auto;
|
|
}
|
|
}
|
|
|
|
.coming-soon-logo {
|
|
margin-bottom: 1.5rem;
|
|
|
|
& img {
|
|
max-height: 4rem;
|
|
max-width: 12rem;
|
|
margin-inline: auto;
|
|
object-fit: contain;
|
|
}
|
|
}
|
|
|
|
.coming-soon-title {
|
|
font-family: var(--t-font-heading);
|
|
font-weight: var(--t-heading-weight);
|
|
letter-spacing: var(--t-heading-tracking);
|
|
color: var(--t-text-primary);
|
|
font-size: clamp(1.875rem, 5vw, 2.25rem);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.coming-soon-message {
|
|
margin-top: 1rem;
|
|
font-size: 1.125rem;
|
|
color: var(--t-text-secondary);
|
|
}
|
|
|
|
.coming-soon-admin-link {
|
|
font-size: 0.75rem;
|
|
color: var(--t-text-tertiary);
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
color: var(--t-text-secondary);
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
/* =========================================================
|
|
Orders list page
|
|
========================================================= */
|
|
|
|
.orders-main {
|
|
max-width: 48rem;
|
|
padding-block: 4rem;
|
|
}
|
|
|
|
.orders-header {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.orders-page-title {
|
|
font-family: var(--t-font-heading);
|
|
font-size: var(--t-text-3xl, 1.875rem);
|
|
font-weight: 700;
|
|
color: var(--t-text-primary);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.orders-email-label {
|
|
color: var(--t-text-secondary);
|
|
margin-bottom: 0.5rem;
|
|
|
|
& strong { color: var(--t-text-primary); }
|
|
}
|
|
|
|
.orders-search-again {
|
|
font-size: var(--t-text-small, 0.875rem);
|
|
color: var(--t-accent);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.orders-empty {
|
|
color: var(--t-text-secondary);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.orders-empty-hint {
|
|
font-size: var(--t-text-small, 0.875rem);
|
|
}
|
|
|
|
.orders-contact-link {
|
|
color: var(--t-accent);
|
|
text-decoration: underline;
|
|
font-size: var(--t-text-small, 0.875rem);
|
|
}
|
|
|
|
.orders-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.order-summary-card {
|
|
display: block;
|
|
padding: 1.25rem 1.5rem;
|
|
border: 1px solid var(--t-border-default);
|
|
border-radius: var(--t-radius-card);
|
|
background-color: var(--t-surface-card);
|
|
text-decoration: none;
|
|
color: inherit;
|
|
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
|
|
|
&:hover {
|
|
border-color: var(--t-accent);
|
|
box-shadow: 0 2px 8px rgb(0 0 0 / 0.08);
|
|
}
|
|
}
|
|
|
|
.order-summary-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 0.75rem;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.order-summary-number {
|
|
font-weight: 600;
|
|
color: var(--t-text-primary);
|
|
font-size: var(--t-text-base, 1rem);
|
|
}
|
|
|
|
.order-summary-date {
|
|
font-size: var(--t-text-small, 0.875rem);
|
|
color: var(--t-text-secondary);
|
|
margin-top: 0.2rem;
|
|
}
|
|
|
|
.order-summary-items {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0 0 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.order-summary-item {
|
|
font-size: var(--t-text-small, 0.875rem);
|
|
color: var(--t-text-secondary);
|
|
}
|
|
|
|
.order-summary-variant {
|
|
color: var(--t-text-tertiary, var(--t-text-secondary));
|
|
}
|
|
|
|
.order-summary-more {
|
|
font-size: var(--t-text-small, 0.875rem);
|
|
color: var(--t-text-tertiary, var(--t-text-secondary));
|
|
font-style: italic;
|
|
}
|
|
|
|
.order-summary-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-top: 1px solid var(--t-border-default);
|
|
padding-top: 0.75rem;
|
|
}
|
|
|
|
.order-summary-total {
|
|
font-weight: 600;
|
|
color: var(--t-text-primary);
|
|
}
|
|
|
|
.order-summary-arrow {
|
|
color: var(--t-text-secondary);
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
/* Status badge — shared between list + detail */
|
|
.order-status-badge {
|
|
display: inline-block;
|
|
padding: 0.25rem 0.625rem;
|
|
border-radius: 9999px;
|
|
font-size: var(--t-text-xs, 0.75rem);
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
background-color: var(--t-surface-sunken);
|
|
color: var(--t-text-secondary);
|
|
|
|
&.order-status-badge-lg {
|
|
font-size: var(--t-text-small, 0.875rem);
|
|
padding: 0.375rem 0.875rem;
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
&.order-status-badge-shipped,
|
|
&.order-status-badge-delivered {
|
|
background-color: color-mix(in srgb, var(--t-accent) 15%, transparent);
|
|
color: var(--t-accent);
|
|
}
|
|
|
|
&.order-status-badge-failed {
|
|
background-color: color-mix(in srgb, #ef4444 12%, transparent);
|
|
color: #b91c1c;
|
|
}
|
|
}
|
|
|
|
/* =========================================================
|
|
Order detail page
|
|
========================================================= */
|
|
|
|
.order-detail-main {
|
|
max-width: 48rem;
|
|
padding-block: 4rem;
|
|
}
|
|
|
|
.order-detail-header {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.order-detail-back {
|
|
font-size: var(--t-text-small, 0.875rem);
|
|
color: var(--t-accent);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.order-detail-tracking-card {
|
|
margin-bottom: 1.5rem;
|
|
padding: 1.25rem 1.5rem;
|
|
}
|
|
|
|
.order-detail-tracking {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
|
|
& svg {
|
|
flex-shrink: 0;
|
|
color: var(--t-text-secondary);
|
|
}
|
|
}
|
|
|
|
.order-detail-tracking-label {
|
|
font-size: var(--t-text-small, 0.875rem);
|
|
font-weight: 600;
|
|
color: var(--t-text-primary);
|
|
}
|
|
|
|
.order-detail-tracking-number {
|
|
font-size: var(--t-text-small, 0.875rem);
|
|
color: var(--t-text-secondary);
|
|
margin-top: 0.125rem;
|
|
}
|
|
|
|
.order-detail-tracking-btn {
|
|
margin-left: auto;
|
|
flex-shrink: 0;
|
|
padding: 0.5rem 1rem;
|
|
font-size: var(--t-text-small, 0.875rem);
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.order-tracking-reset {
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
font-size: var(--t-text-small, 0.875rem);
|
|
color: var(--t-accent);
|
|
text-decoration: underline;
|
|
}
|
|
}
|