replace Tailwind utilities in product + cart components with CSS (Phase 5b)
Remove ~140 Tailwind utility classes from product.ex and cart.ex, replacing with semantic CSS classes in components.css. Delete helper functions that generated Tailwind class strings (card_classes, image_container_classes, content_padding_class, title_classes, hero_cta_classes, grid_classes). Use data-* attributes for variant styling, grid columns, and sticky positioning. Update theme-layer2 selectors for renamed classes. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey
@@ -18,6 +18,8 @@
|
||||
.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"] {
|
||||
@@ -33,6 +35,10 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&[data-variant="featured"]:hover {
|
||||
transform: translateY(-0.25rem);
|
||||
}
|
||||
|
||||
&[data-clickable] {
|
||||
position: relative;
|
||||
}
|
||||
@@ -45,10 +51,32 @@
|
||||
|
||||
.product-card-image-wrap {
|
||||
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 {
|
||||
@@ -56,10 +84,19 @@
|
||||
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,
|
||||
@@ -67,8 +104,28 @@
|
||||
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) ── */
|
||||
@@ -79,6 +136,7 @@
|
||||
|
||||
.product-price--compare {
|
||||
color: var(--t-text-tertiary);
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.product-price--regular {
|
||||
@@ -89,14 +147,66 @@
|
||||
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-left: 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-right: 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);
|
||||
@@ -105,21 +215,73 @@
|
||||
&[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: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
|
||||
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 ── */
|
||||
@@ -129,14 +291,49 @@
|
||||
background-color: var(--t-surface-base);
|
||||
}
|
||||
|
||||
.category-nav {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 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;
|
||||
height: 6rem;
|
||||
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 ── */
|
||||
@@ -144,6 +341,16 @@
|
||||
.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 {
|
||||
@@ -153,6 +360,10 @@
|
||||
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 ── */
|
||||
@@ -160,21 +371,38 @@
|
||||
.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, hsl(var(--t-accent-h) var(--t-accent-s) 38%));
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
font-size: var(--t-text-small);
|
||||
font-weight: 500;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
/* ── Collection header ── */
|
||||
@@ -182,12 +410,41 @@
|
||||
.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: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.filter-pills-container {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* ── Breadcrumb ── */
|
||||
|
||||
.breadcrumb {
|
||||
@@ -196,12 +453,22 @@
|
||||
& [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 ── */
|
||||
@@ -209,16 +476,42 @@
|
||||
.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;
|
||||
}
|
||||
|
||||
/* ── 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 {
|
||||
@@ -226,8 +519,21 @@
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.variant-options {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.color-swatch {
|
||||
border-color: var(--t-border-default);
|
||||
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;
|
||||
|
||||
&[aria-pressed="true"] {
|
||||
border-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
|
||||
@@ -240,6 +546,10 @@
|
||||
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;
|
||||
|
||||
&[aria-pressed="true"] {
|
||||
border-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
|
||||
@@ -249,30 +559,60 @@
|
||||
|
||||
/* ── 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 {
|
||||
border-color: var(--t-border-default);
|
||||
color: var(--t-text-primary);
|
||||
padding: 0.5rem 1rem;
|
||||
border-inline: 2px solid var(--t-border-default);
|
||||
min-width: 3rem;
|
||||
text-align: center;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.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 ── */
|
||||
@@ -280,6 +620,17 @@
|
||||
.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 {
|
||||
@@ -288,6 +639,11 @@
|
||||
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);
|
||||
@@ -299,10 +655,35 @@
|
||||
|
||||
.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 ── */
|
||||
@@ -311,6 +692,20 @@
|
||||
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 {
|
||||
@@ -319,10 +714,29 @@
|
||||
|
||||
.details-th {
|
||||
color: var(--t-text-primary);
|
||||
text-align: left;
|
||||
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);
|
||||
}
|
||||
|
||||
/* ── Announcement bar ── */
|
||||
@@ -784,6 +1198,11 @@
|
||||
padding: 0.5rem;
|
||||
cursor: pointer;
|
||||
color: var(--t-text-secondary);
|
||||
|
||||
& svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-drawer-items {
|
||||
@@ -829,6 +1248,7 @@
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-family: var(--t-font-body);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* ── Cart item row ── */
|
||||
@@ -910,6 +1330,8 @@
|
||||
.cart-qty-group {
|
||||
border: 1px solid var(--t-border-default);
|
||||
border-radius: var(--t-radius-input);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cart-qty-btn {
|
||||
@@ -917,13 +1339,15 @@
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--t-text-primary);
|
||||
padding: 0.25rem 0.75rem;
|
||||
}
|
||||
|
||||
.cart-qty-display {
|
||||
border-color: var(--t-border-default);
|
||||
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 {
|
||||
@@ -933,6 +1357,7 @@
|
||||
|
||||
.cart-item-price-col {
|
||||
flex-shrink: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.cart-item-price {
|
||||
@@ -961,10 +1386,20 @@
|
||||
|
||||
.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 {
|
||||
@@ -980,25 +1415,66 @@
|
||||
|
||||
/* ── 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: right;
|
||||
}
|
||||
|
||||
.cart-page-item-price {
|
||||
color: var(--t-text-primary);
|
||||
font-weight: 700;
|
||||
font-size: var(--t-text-large);
|
||||
}
|
||||
|
||||
/* ── Delivery line ── */
|
||||
@@ -1007,12 +1483,21 @@
|
||||
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;
|
||||
@@ -1027,9 +1512,30 @@
|
||||
|
||||
/* ── Order summary ── */
|
||||
|
||||
.order-summary-card {
|
||||
padding: 1.5rem;
|
||||
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 {
|
||||
@@ -1041,7 +1547,34 @@
|
||||
}
|
||||
|
||||
.order-summary-divider {
|
||||
border-color: var(--t-border-default);
|
||||
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;
|
||||
}
|
||||
|
||||
/* ── Content body ── */
|
||||
@@ -1498,6 +2031,42 @@
|
||||
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;
|
||||
}
|
||||
|
||||
/* ── Screen reader only ── */
|
||||
|
||||
.sr-only {
|
||||
@@ -1516,9 +2085,14 @@
|
||||
|
||||
@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; }
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@@ -1530,11 +2104,33 @@
|
||||
.footer-bottom { flex-direction: row; }
|
||||
.pdp-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.contact-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.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); }
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user