.shop-hero .lead,
.shop-listing-hero .lead { max-width: 62ch; }
.shop-crumbs { padding: 1.25rem 0 0; }
.shop-cat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem;
}
.shop-cat {
display: flex;
flex-direction: column;
background: var(--white, #fff);
border: 1px solid var(--cream-dark, #F5EBD7);
border-radius: var(--radius-lg, 12px);
overflow: hidden;
text-decoration: none;
color: inherit;
transition: box-shadow .2s, transform .2s;
}
.shop-cat:hover { box-shadow: 0 10px 30px rgba(139, 21, 56, .1); transform: translateY(-3px); }
.shop-cat img { width: 100%; height: 180px; object-fit: cover; display: block; }
.shop-cat-body { display: flex; flex-direction: column; gap: .4rem; padding: 1.1rem 1.25rem 1.25rem; }
.shop-cat-name {
font-family: var(--font-secondary, Georgia, serif);
font-size: 1.3rem;
color: var(--primary, #8B1538);
}
.shop-cat-desc { font-size: .92rem; color: var(--text-light, #666); line-height: 1.6; }
.shop-cat-more {
margin-top: .35rem;
font-size: .85rem;
font-weight: 600;
letter-spacing: .03em;
text-transform: uppercase;
color: var(--secondary-dark, #a8871f);
}
.p-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
gap: 1.5rem;
}
.p-card {
background: var(--white, #fff);
border: 1px solid var(--cream-dark, #F5EBD7);
border-radius: var(--radius-md, 8px);
overflow: hidden;
transition: box-shadow .2s, transform .2s;
}
.p-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .09); transform: translateY(-2px); }
.p-card--out { opacity: .78; }
.p-card-link { display: block; text-decoration: none; color: inherit; }
.p-card-media {
position: relative;
display: block;
aspect-ratio: 1 / 1;
background: var(--cream, #FDF8F0);
}
.p-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-card-noimg {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: #d8cbb4;
}
.p-card-flag {
position: absolute;
top: .6rem;
left: .6rem;
padding: .18rem .5rem;
border-radius: 3px;
font-size: .68rem;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
color: #fff;
}
.p-card-flag--out { background: #6c757d; }
.p-card-body { display: flex; flex-direction: column; gap: .3rem; padding: .85rem 1rem 1.1rem; }
.p-card-cat {
font-size: .7rem;
font-weight: 600;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--text-muted, #999);
}
.p-card-name {
font-size: 1rem;
font-weight: 500;
line-height: 1.4;
color: var(--text, #333);
}
.p-card-rating { font-size: .82rem; color: var(--secondary-dark, #a8871f); }
.p-card-rating-count { color: var(--text-muted, #999); }
.p-card-price {
margin-top: .2rem;
font-size: 1.08rem;
font-weight: 600;
color: var(--primary, #8B1538);
font-variant-numeric: tabular-nums;
}
.p-card-price-to { color: var(--text-muted, #999); font-weight: 400; }
.p-card-price-soon { font-size: .9rem; font-weight: 500; color: var(--text-light, #666); }
.p-card-variants { font-size: .78rem; color: var(--text-muted, #999); }
.shop-layout {
display: grid;
grid-template-columns: 230px 1fr;
gap: 2.25rem;
align-items: start;
}
.shop-results { min-width: 0; }
.shop-count {
margin: 0 0 1.1rem;
font-size: .92rem;
color: var(--text-light, #666);
}
.shop-subcats { padding: 1.25rem 0 0; }
.shop-subcats .container { display: flex; flex-wrap: wrap; gap: .5rem; }
.shop-subcat {
padding: .38rem .9rem;
background: var(--cream, #FDF8F0);
border: 1px solid var(--cream-dark, #F5EBD7);
border-radius: 20px;
font-size: .88rem;
color: var(--primary, #8B1538);
text-decoration: none;
}
.shop-subcat:hover { background: var(--cream-dark, #F5EBD7); }
.shop-sort {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: flex-end;
gap: .5rem;
margin-bottom: -.75rem;
font-size: .88rem;
flex-wrap: wrap;
}
.shop-sort label { color: var(--text-light, #666); }
.shop-sort select {
padding: .42rem .6rem;
border: 1px solid var(--cream-dark, #F5EBD7);
border-radius: 6px;
font-family: inherit;
font-size: .88rem;
background: #fff;
color: var(--text, #333);
}
.shop-sort-go { padding: .38rem .85rem; font-size: .82rem; }
.shop-facets { position: sticky; top: 1.5rem; }
.shop-facet { margin-bottom: 1.5rem; }
.shop-facet-title {
margin: 0 0 .6rem;
font-size: .74rem;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--text-muted, #999);
}
.shop-facet-chip {
display: inline-flex;
align-items: center;
gap: .35rem;
margin: 0 .35rem .4rem 0;
padding: .32rem .7rem;
background: #fff;
border: 1px solid var(--cream-dark, #F5EBD7);
border-radius: 18px;
font-size: .84rem;
color: var(--text, #333);
text-decoration: none;
transition: background .15s, border-color .15s;
}
.shop-facet-chip:hover { border-color: var(--secondary, #C9A227); }
.shop-facet-chip.is-on {
background: var(--primary, #8B1538);
border-color: var(--primary, #8B1538);
color: #fff;
}
.shop-facet-count { font-size: .74rem; color: var(--text-muted, #999); }
.shop-facet-chip.is-on .shop-facet-count { color: rgba(255, 255, 255, .75); }
.shop-facet-clear { margin-bottom: 1.25rem; font-size: .85rem; }
.shop-facet-clear a { color: #a8291f; text-decoration: none; }
.shop-facet-clear a:hover { text-decoration: underline; }
.shop-searchbar { display: flex; gap: .6rem; margin-bottom: 1.75rem; max-width: 520px; }
.shop-searchbar input {
flex: 1;
padding: .6rem .85rem;
border: 1px solid var(--cream-dark, #F5EBD7);
border-radius: 8px;
font-family: inherit;
font-size: .95rem;
}
.shop-searchbar input:focus {
outline: none;
border-color: var(--primary, #8B1538);
box-shadow: 0 0 0 3px rgba(139, 21, 56, .1);
}
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.shop-pager {
display: flex;
align-items: center;
justify-content: center;
gap: .75rem;
margin-top: 2.25rem;
flex-wrap: wrap;
font-size: .9rem;
}
.shop-pager-nums { display: flex; align-items: center; gap: .3rem; }
.shop-pager-num,
.shop-pager-step {
padding: .4rem .7rem;
border: 1px solid var(--cream-dark, #F5EBD7);
border-radius: 6px;
color: var(--primary, #8B1538);
text-decoration: none;
background: #fff;
}
.shop-pager-num:hover,
.shop-pager-step:hover { border-color: var(--secondary, #C9A227); }
.shop-pager-num.is-current {
background: var(--primary, #8B1538);
border-color: var(--primary, #8B1538);
color: #fff;
font-weight: 600;
}
.shop-pager-gap { color: var(--text-muted, #999); padding: 0 .2rem; }
.shop-empty { text-align: center; padding: 3rem 1.5rem; }
.shop-empty--inline { padding: 2.5rem 1rem; background: var(--cream, #FDF8F0); border-radius: 12px; }
.shop-empty i { font-size: 2.4rem; color: #d8cbb4; }
.shop-empty h2 { margin: .85rem 0 .5rem; font-size: 1.35rem; color: var(--primary, #8B1538); }
.shop-empty p { color: var(--text-light, #666); max-width: 52ch; margin: 0 auto .9rem; line-height: 1.7; }
.shop-why { background: var(--cream, #FDF8F0); }
.shop-why-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.shop-why-grid i { font-size: 1.6rem; color: var(--secondary-dark, #a8871f); }
.shop-why-grid h3 { margin: .6rem 0 .4rem; font-size: 1.08rem; color: var(--primary, #8B1538); }
.shop-why-grid p { color: var(--text-light, #666); line-height: 1.7; font-size: .93rem; margin: 0; }
.shop-block--alt { background: var(--cream-light, #FFFDF9); }
.pdp-top {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 3rem;
align-items: start;
padding: 1.5rem 0 0;
}
.gal > input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.gal-stage {
position: relative;
aspect-ratio: 1 / 1;
background: var(--cream, #FDF8F0);
border-radius: var(--radius-lg, 12px);
overflow: hidden;
}
.gal-slide { width: 100%; height: 100%; object-fit: cover; display: none; }
#gal-0:checked ~ .gal-stage .gal-slide:nth-child(1),
#gal-1:checked ~ .gal-stage .gal-slide:nth-child(2),
#gal-2:checked ~ .gal-stage .gal-slide:nth-child(3),
#gal-3:checked ~ .gal-stage .gal-slide:nth-child(4),
#gal-4:checked ~ .gal-stage .gal-slide:nth-child(5),
#gal-5:checked ~ .gal-stage .gal-slide:nth-child(6) { display: block; }
.gal-thumbs { display: flex; gap: .6rem; margin-top: .85rem; flex-wrap: wrap; }
.gal-thumb {
width: 68px;
height: 68px;
border: 2px solid transparent;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
background: var(--cream, #FDF8F0);
}
.gal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
#gal-0:checked ~ .gal-thumbs .gal-thumb:nth-child(1),
#gal-1:checked ~ .gal-thumbs .gal-thumb:nth-child(2),
#gal-2:checked ~ .gal-thumbs .gal-thumb:nth-child(3),
#gal-3:checked ~ .gal-thumbs .gal-thumb:nth-child(4),
#gal-4:checked ~ .gal-thumbs .gal-thumb:nth-child(5),
#gal-5:checked ~ .gal-thumbs .gal-thumb:nth-child(6) { border-color: var(--primary, #8B1538); }
.gal > input[type="radio"]:focus-visible ~ .gal-thumbs .gal-thumb {
outline: 2px solid var(--secondary, #C9A227);
outline-offset: 2px;
}
.pdp-noimg {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .6rem;
aspect-ratio: 1 / 1;
background: var(--cream, #FDF8F0);
border-radius: var(--radius-lg, 12px);
color: #b9a98d;
}
.pdp-noimg i { font-size: 2.6rem; }
.pdp-noimg span { font-size: .88rem; }
.pdp-cat {
font-size: .74rem;
font-weight: 600;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--secondary-dark, #a8871f);
text-decoration: none;
}
.pdp-title {
margin: .5rem 0 .6rem;
font-family: var(--font-secondary, Georgia, serif);
font-size: 2rem;
line-height: 1.2;
color: var(--primary, #8B1538);
text-wrap: balance;
}
.pdp-rating { font-size: .9rem; color: var(--text-light, #666); margin: 0 0 .75rem; }
.pdp-stars { color: var(--secondary, #C9A227); margin-right: .3rem; }
.pdp-rating-count { color: var(--text-muted, #999); }
.pdp-short { font-size: 1.02rem; line-height: 1.75; color: #444; margin: 0 0 1.5rem; }
.buybox {
padding: 1.35rem 1.5rem 1.5rem;
background: var(--cream, #FDF8F0);
border: 1px solid var(--cream-dark, #F5EBD7);
border-radius: var(--radius-lg, 12px);
}
.buybox-price {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: .6rem;
}
.buybox-price-now {
font-size: 1.85rem;
font-weight: 700;
color: var(--primary, #8B1538);
font-variant-numeric: tabular-nums;
}
.buybox-price-mrp { font-size: .9rem; color: var(--text-muted, #999); }
.buybox-save {
padding: .18rem .5rem;
background: #1e7a44;
border-radius: 4px;
font-size: .74rem;
font-weight: 600;
letter-spacing: .03em;
text-transform: uppercase;
color: #fff;
}
.buybox-taxnote { margin: .3rem 0 1.25rem; font-size: .82rem; color: var(--text-light, #666); }
.buybox-variants { border: none; margin: 0 0 1.1rem; padding: 0; }
.buybox-variants legend {
padding: 0;
margin-bottom: .55rem;
font-size: .74rem;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--text-muted, #999);
}
.buybox-variant {
display: flex;
align-items: center;
gap: .65rem;
padding: .6rem .8rem;
margin-bottom: .45rem;
background: #fff;
border: 1px solid var(--cream-dark, #F5EBD7);
border-radius: 8px;
cursor: pointer;
font-size: .93rem;
}
.buybox-variant:has(input:checked) {
border-color: var(--primary, #8B1538);
box-shadow: 0 0 0 2px rgba(139, 21, 56, .1);
}
.buybox-variant.is-out { opacity: .6; cursor: not-allowed; }
.buybox-variant input { width: auto; margin: 0; flex: 0 0 auto; }
.buybox-variant-name { flex: 1; display: flex; flex-direction: column; gap: .1rem; }
.buybox-variant-attrs { font-size: .76rem; color: var(--text-muted, #999); }
.buybox-variant-price {
font-weight: 600;
color: var(--primary, #8B1538);
font-variant-numeric: tabular-nums;
text-align: right;
}
.buybox-variant-out {
display: block;
font-size: .7rem;
font-weight: 500;
color: var(--text-muted, #999);
text-transform: uppercase;
letter-spacing: .04em;
}
.buybox-single { margin: 0 0 1.1rem; font-size: .93rem; color: var(--text-light, #666); }
.buybox-actions { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; }
.buybox-qty { display: flex; flex-direction: column; gap: .25rem; }
.buybox-qty span {
font-size: .72rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text-muted, #999);
}
.buybox-qty input {
width: 72px;
padding: .55rem .5rem;
border: 1px solid var(--cream-dark, #F5EBD7);
border-radius: 8px;
font-family: inherit;
font-size: .95rem;
text-align: center;
}
.buybox-add { flex: 1; min-width: 180px; justify-content: center; }
.buybox-note {
display: flex;
align-items: flex-start;
gap: .55rem;
margin: 0;
padding: .85rem 1rem;
background: #fff;
border: 1px solid var(--cream-dark, #F5EBD7);
border-radius: 8px;
font-size: .9rem;
line-height: 1.6;
color: #444;
}
.buybox-note i { color: var(--secondary-dark, #a8871f); margin-top: .15rem; }
.buybox-note--out { background: #fdf3f3; border-color: #f0d4d4; }
.buybox-note--out i { color: #a8291f; }
.buybox-note a { color: var(--primary, #8B1538); font-weight: 500; }
.buybox-empty { margin: 0; font-size: .95rem; line-height: 1.7; color: #444; }
.buybox-facts { list-style: none; margin: 1.25rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--cream-dark, #F5EBD7); }
.buybox-facts li {
display: flex;
align-items: flex-start;
gap: .55rem;
padding: .3rem 0;
font-size: .87rem;
line-height: 1.6;
color: var(--text-light, #666);
}
.buybox-facts i { color: var(--secondary-dark, #a8871f); margin-top: .15rem; }
.pdp-detail { margin-top: 3.5rem; max-width: 760px; }
.pdp-section { margin-bottom: 2.25rem; }
.pdp-section h2 {
font-size: 1.3rem;
color: var(--primary, #8B1538);
margin: 0 0 .75rem;
}
.pdp-section p,
.pdp-prose { color: #444; line-height: 1.8; font-size: 1rem; }
.pdp-table-wrap { overflow-x: auto; }
.pdp-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.pdp-table th,
.pdp-table td {
padding: .6rem .75rem;
text-align: left;
border-bottom: 1px solid var(--cream-dark, #F5EBD7);
}
.pdp-table th {
font-size: .74rem;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--text-muted, #999);
}
.pdp-table td:nth-child(n+2) { font-variant-numeric: tabular-nums; }
.pdp-related { margin-top: 3.5rem; }
.pdp-related h2 {
font-family: var(--font-secondary, Georgia, serif);
font-size: 1.6rem;
color: var(--primary, #8B1538);
margin: 0 0 1.5rem;
}
@media (max-width: 992px) {
.shop-layout { grid-template-columns: 1fr; gap: 1.5rem; }
.shop-facets { position: static; }
.shop-facet { margin-bottom: 1rem; }
.shop-sort { justify-content: flex-start; margin-bottom: 0; }
.pdp-top { grid-template-columns: 1fr; gap: 2rem; }
.pdp-title { font-size: 1.65rem; }
}
@media (max-width: 600px) {
.p-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.buybox { padding: 1.1rem 1.1rem 1.25rem; }
.buybox-add { min-width: 0; width: 100%; }
.buybox-actions { flex-direction: column; align-items: stretch; }
.buybox-qty { flex-direction: row; align-items: center; gap: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
.p-card,
.shop-cat { transition: none; }
.p-card:hover,
.shop-cat:hover { transform: none; }
}
.cart-title {
font-family: var(--font-secondary, Georgia, serif);
font-size: 2rem;
color: var(--primary, #8B1538);
margin: 0 0 1.5rem;
}
.cart-flash {
display: flex;
align-items: flex-start;
gap: .55rem;
margin: 0 0 1.25rem;
padding: .8rem 1.1rem;
border-radius: 8px;
font-size: .93rem;
line-height: 1.6;
}
.cart-flash--ok  { background: #eaf6ef; border: 1px solid #bfe0cd; color: #1c5c39; }
.cart-flash--err { background: #fdf3f3; border: 1px solid #f0d4d4; color: #8d2b22; }
.cart-flash a    { color: inherit; font-weight: 600; }
.cart-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 330px;
gap: 2.5rem;
align-items: start;
}
.cart-line {
display: grid;
grid-template-columns: 96px minmax(0, 1fr) auto auto;
gap: 1rem;
align-items: center;
padding: 1.1rem 0;
border-bottom: 1px solid var(--cream-dark, #F5EBD7);
}
.cart-line.is-blocked { background: #fffaf9; }
.cart-line-img {
display: block;
width: 96px;
height: 96px;
border-radius: 8px;
overflow: hidden;
background: var(--cream, #FDF8F0);
}
.cart-line-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-line-noimg {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 1.5rem;
color: #d8cbb4;
}
.cart-line-body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.cart-line-name {
font-size: 1rem;
font-weight: 500;
color: var(--text, #333);
text-decoration: none;
}
.cart-line-name:hover { color: var(--primary, #8B1538); }
.cart-line-variant { font-size: .84rem; color: var(--text-muted, #999); }
.cart-line-unit { font-size: .88rem; color: var(--text-light, #666); font-variant-numeric: tabular-nums; }
.cart-line-unit s { color: var(--text-muted, #999); margin-left: .3rem; }
.cart-line-warn {
display: flex;
align-items: flex-start;
gap: .35rem;
margin-top: .25rem;
font-size: .82rem;
line-height: 1.5;
color: #8d5a13;
}
.cart-line-qty input {
width: 68px;
padding: .45rem .4rem;
border: 1px solid var(--cream-dark, #F5EBD7);
border-radius: 8px;
font-family: inherit;
font-size: .95rem;
text-align: center;
}
.cart-line-total {
min-width: 90px;
text-align: right;
font-weight: 600;
color: var(--primary, #8B1538);
font-variant-numeric: tabular-nums;
}
.cart-actions {
display: flex;
align-items: center;
gap: 1.25rem;
padding-top: 1.25rem;
flex-wrap: wrap;
}
.cart-link { color: var(--primary, #8B1538); font-size: .92rem; text-decoration: none; }
.cart-link:hover { text-decoration: underline; }
.cart-side, .checkout-side { position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: 1.1rem; }
.sum {
padding: 1.25rem 1.4rem;
background: var(--cream, #FDF8F0);
border: 1px solid var(--cream-dark, #F5EBD7);
border-radius: var(--radius-lg, 12px);
}
.sum-title {
margin: 0 0 .9rem;
font-size: .76rem;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--text-muted, #999);
}
.sum-rows { margin: 0; }
.sum-row {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: .3rem 0;
font-size: .93rem;
color: var(--text, #333);
}
.sum-row dt, .sum-row dd { margin: 0; }
.sum-row dd { font-variant-numeric: tabular-nums; }
.sum-row.is-muted { font-size: .82rem; color: var(--text-muted, #999); }
.sum-row.is-total {
margin-top: .5rem;
padding-top: .7rem;
border-top: 1px solid var(--cream-dark, #F5EBD7);
font-size: 1.15rem;
font-weight: 700;
color: var(--primary, #8B1538);
}
.sum-nudge, .sum-eta {
display: flex;
align-items: flex-start;
gap: .45rem;
margin: .85rem 0 0;
font-size: .84rem;
line-height: 1.5;
color: var(--text-light, #666);
}
.sum-nudge i, .sum-eta i { color: var(--secondary-dark, #a8871f); margin-top: .12rem; }
.cart-pin {
padding: 1.1rem 1.25rem;
background: #fff;
border: 1px solid var(--cream-dark, #F5EBD7);
border-radius: var(--radius-lg, 12px);
}
.cart-pin label {
display: block;
margin-bottom: .45rem;
font-size: .76rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text-muted, #999);
}
.cart-pin-row { display: flex; gap: .5rem; }
.cart-pin-row input {
flex: 1;
min-width: 0;
padding: .5rem .65rem;
border: 1px solid var(--cream-dark, #F5EBD7);
border-radius: 8px;
font-family: inherit;
font-size: .95rem;
}
.cart-pin-ok, .cart-pin-no {
display: flex;
align-items: flex-start;
gap: .4rem;
margin: .7rem 0 0;
font-size: .86rem;
line-height: 1.55;
}
.cart-pin-ok { color: #1c5c39; }
.cart-pin-no { color: #8d2b22; }
.cart-note {
display: flex;
align-items: flex-start;
gap: .5rem;
margin: 0;
padding: .85rem 1rem;
background: #fff;
border: 1px solid var(--cream-dark, #F5EBD7);
border-radius: 8px;
font-size: .88rem;
line-height: 1.6;
color: #444;
}
.cart-note--warn { background: #fdf9ef; border-color: #ecd9ab; }
.cart-note i { color: var(--secondary-dark, #a8871f); margin-top: .15rem; }
.cart-note a { color: var(--primary, #8B1538); font-weight: 500; }
.cart-checkout { width: 100%; justify-content: center; font-size: 1rem; padding: .85rem 1rem; }
.cart-trust { list-style: none; margin: 0; padding: 0; }
.cart-trust li {
display: flex;
align-items: center;
gap: .5rem;
padding: .28rem 0;
font-size: .82rem;
color: var(--text-muted, #999);
}
.cart-trust i { color: var(--secondary-dark, #a8871f); }
.checkout-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 330px;
gap: 2.5rem;
align-items: start;
}
.checkout-main { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.co-block {
margin: 0;
padding: 1.35rem 1.5rem 1.5rem;
background: #fff;
border: 1px solid var(--cream-dark, #F5EBD7);
border-radius: var(--radius-lg, 12px);
}
.co-block legend {
padding: 0 .35rem;
margin-left: -.35rem;
font-family: var(--font-secondary, Georgia, serif);
font-size: 1.2rem;
color: var(--primary, #8B1538);
}
.co-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 1.1rem 1.2rem;
margin-top: .85rem;
}
.co-field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.co-field--wide { grid-column: 1 / -1; }
.co-field > span {
font-size: .78rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: #666;
}
.co-field > span em { font-style: normal; font-weight: 400; color: var(--text-muted, #999); letter-spacing: 0; }
.co-field small { font-size: .78rem; color: var(--text-muted, #999); line-height: 1.5; }
.co-field input,
.co-field select,
.co-field textarea {
width: 100%;
padding: .58rem .7rem;
border: 1px solid var(--cream-dark, #F5EBD7);
border-radius: 8px;
font-family: inherit;
font-size: .95rem;
color: var(--text, #333);
background: #fff;
}
.co-field textarea { resize: vertical; }
.co-field input:disabled,
.co-field select:disabled { background: #f6f5f2; color: var(--text-muted, #999); }
.co-field[hidden],
.co-pay[hidden],
.co-note[hidden] { display: none; }
.co-field input:focus,
.co-field select:focus,
.co-field textarea:focus {
outline: none;
border-color: var(--primary, #8B1538);
box-shadow: 0 0 0 3px rgba(139, 21, 56, .1);
}
.co-err { font-size: .82rem; font-weight: 600; color: #a8291f; }
.co-alert {
display: flex;
align-items: flex-start;
gap: .45rem;
margin: 1rem 0 0;
padding: .7rem .9rem;
border-radius: 8px;
font-size: .88rem;
line-height: 1.55;
}
.co-alert--ok { background: #eaf6ef; border: 1px solid #bfe0cd; color: #1c5c39; }
.co-alert--no { background: #fdf3f3; border: 1px solid #f0d4d4; color: #8d2b22; }
.co-note {
display: flex;
align-items: flex-start;
gap: .45rem;
margin: .85rem 0 0;
font-size: .85rem;
color: var(--text-light, #666);
}
.co-note i { color: var(--secondary-dark, #a8871f); margin-top: .12rem; }
.co-pay {
display: flex;
align-items: flex-start;
gap: .7rem;
margin-top: .85rem;
padding: .9rem 1rem;
border: 1px solid var(--cream-dark, #F5EBD7);
border-radius: 10px;
cursor: pointer;
}
.co-pay:has(input:checked) {
border-color: var(--primary, #8B1538);
box-shadow: 0 0 0 2px rgba(139, 21, 56, .1);
}
.co-pay input { margin-top: .25rem; flex: 0 0 auto; }
.co-pay-body { display: flex; flex-direction: column; gap: .15rem; }
.co-pay-body strong { font-size: .96rem; color: var(--text, #333); }
.co-pay-body small { font-size: .82rem; color: var(--text-light, #666); line-height: 1.55; }
.co-check {
display: flex;
align-items: flex-start;
gap: .55rem;
margin-top: 1.1rem;
font-size: .87rem;
color: var(--text-light, #666);
line-height: 1.55;
}
.co-check input { margin-top: .2rem; }
.co-lines { list-style: none; margin: 0; padding: 0; }
.co-lines li {
display: flex;
align-items: flex-start;
gap: .55rem;
padding: .45rem 0;
border-bottom: 1px solid var(--cream-dark, #F5EBD7);
font-size: .87rem;
}
.co-lines li:last-child { border-bottom: none; }
.co-lines-qty { color: var(--text-muted, #999); font-variant-numeric: tabular-nums; }
.co-lines-name { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.co-lines-name small { font-size: .76rem; color: var(--text-muted, #999); }
.co-lines-total { font-weight: 600; font-variant-numeric: tabular-nums; }
.co-submit { width: 100%; justify-content: center; font-size: 1rem; padding: .9rem 1rem; }
.co-fineprint { margin: 0; font-size: .78rem; line-height: 1.6; color: var(--text-muted, #999); }
.orderpage { padding: 2.5rem 0 4rem; }
.ord-head { max-width: 640px; margin-bottom: 2.5rem; }
.ord-badge {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .3rem .75rem;
border-radius: 20px;
font-size: .78rem;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
}
.ord-badge--ok   { background: #eaf6ef; color: #1c5c39; }
.ord-badge--wait { background: #fdf9ef; color: #8d5a13; }
.ord-head h1 {
margin: .85rem 0 .6rem;
font-family: var(--font-secondary, Georgia, serif);
font-size: 2.1rem;
color: var(--primary, #8B1538);
text-wrap: balance;
}
.ord-head .lead { font-size: 1.02rem; line-height: 1.75; color: #444; }
.ord-number { margin: 1.1rem 0 .35rem; font-size: .92rem; color: var(--text-light, #666); }
.ord-keep { margin: 0; font-size: .84rem; color: var(--text-muted, #999); }
.ord-grid {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 1.75rem;
align-items: start;
}
.ord-card {
padding: 1.35rem 1.5rem 1.5rem;
background: #fff;
border: 1px solid var(--cream-dark, #F5EBD7);
border-radius: var(--radius-lg, 12px);
}
.ord-card h2 {
margin: 0 0 1rem;
font-size: 1.1rem;
color: var(--primary, #8B1538);
}
.ord-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ord-table th,
.ord-table td {
padding: .55rem .5rem;
text-align: left;
border-bottom: 1px solid var(--cream-dark, #F5EBD7);
}
.ord-table thead th {
font-size: .72rem;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--text-muted, #999);
}
.ord-table td small { display: block; font-size: .78rem; color: var(--text-muted, #999); }
.ord-table td:nth-child(n+2), .ord-table tfoot td { text-align: right; font-variant-numeric: tabular-nums; }
.ord-table tfoot th { text-align: right; font-weight: 500; color: var(--text-light, #666); }
.ord-table tfoot .ord-total th, .ord-table tfoot .ord-total td { font-weight: 700; color: var(--primary, #8B1538); font-size: 1.02rem; }
.ord-table tfoot .ord-tax th, .ord-table tfoot .ord-tax td { font-size: .8rem; color: var(--text-muted, #999); border-bottom: none; }
.ord-when { display: flex; align-items: center; gap: .45rem; margin: 0 0 .9rem; font-size: .95rem; color: var(--text, #333); }
.ord-when i { color: var(--secondary-dark, #a8871f); }
.ord-address { font-style: normal; font-size: .92rem; line-height: 1.7; color: var(--text-light, #666); }
.ord-zone, .ord-pay {
display: flex;
align-items: center;
gap: .45rem;
margin: .85rem 0 0;
font-size: .88rem;
color: var(--text-light, #666);
}
.ord-zone i, .ord-pay i { color: var(--secondary-dark, #a8871f); }
.ord-note { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--cream-dark, #F5EBD7); }
.ord-note h3 { margin: 0 0 .35rem; font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted, #999); }
.ord-note p { margin: 0; font-size: .9rem; line-height: 1.6; color: #444; }
.ord-foot { margin-top: 2.25rem; font-size: .92rem; color: var(--text-light, #666); }
.ord-foot a { color: var(--primary, #8B1538); }
@media (max-width: 992px) {
.cart-layout, .checkout-layout { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
.cart-side, .checkout-side { position: static; }
.ord-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
.cart-line {
grid-template-columns: 72px minmax(0, 1fr);
grid-template-areas: "img body" "qty total";
row-gap: .75rem;
}
.cart-line-img   { grid-area: img; width: 72px; height: 72px; }
.cart-line-body  { grid-area: body; }
.cart-line-qty   { grid-area: qty; }
.cart-line-total { grid-area: total; }
.cart-title, .ord-head h1 { font-size: 1.6rem; }
}
.payhandoff .ord-head { margin-bottom: 1.75rem; }
.pay-card {
max-width: 460px;
padding: 1.5rem 1.6rem 1.6rem;
background: var(--cream, #FDF8F0);
border: 1px solid var(--cream-dark, #F5EBD7);
border-radius: var(--radius-lg, 12px);
}
.pay-card .sum-rows { margin-bottom: 1.25rem; }
.pay-button {
width: 100%;
justify-content: center;
gap: .5rem;
font-size: 1.05rem;
padding: .95rem 1rem;
}
.pay-button:disabled { opacity: .65; cursor: progress; }
.pay-note {
display: flex;
align-items: flex-start;
gap: .45rem;
margin: .9rem 0 0;
font-size: .82rem;
line-height: 1.6;
color: var(--text-muted, #999);
}
.pay-note i { color: #1e7a44; margin-top: .15rem; }
.pay-alt {
margin: 1.1rem 0 0;
padding-top: 1rem;
border-top: 1px solid var(--cream-dark, #F5EBD7);
font-size: .88rem;
line-height: 1.6;
color: var(--text-light, #666);
}
.pay-alt a { color: var(--primary, #8B1538); font-weight: 500; }
@media (max-width: 600px) {
.pay-card { padding: 1.2rem 1.2rem 1.35rem; }
}
.festival-hero {
background-size: cover;
background-position: center;
}
.festival-hero[style*="background-image"] {
color: #fff;
}
.festival-hero[style*="background-image"] h1,
.festival-hero[style*="background-image"] .lead,
.festival-hero[style*="background-image"] .breadcrumb-nav,
.festival-hero[style*="background-image"] .breadcrumb-nav a,
.festival-hero[style*="background-image"] .festival-date {
color: #fff;
text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.festival-urgency {
display: inline-flex;
align-items: center;
gap: .5rem;
margin: 1rem 0 0;
padding: .55rem 1rem;
border-radius: 999px;
background: var(--secondary, #C9A227);
color: #2b2100;
font-weight: 600;
font-size: .95rem;
}
.festival-urgency--closed {
background: #ece7de;
color: #6b6357;
font-weight: 500;
}
.festival-date {
margin: .75rem 0 0;
font-size: .95rem;
color: var(--text-light, #666);
}
.festival-closed-note {
margin: 1rem 0 0;
max-width: 60ch;
font-size: .95rem;
line-height: 1.7;
color: var(--text-light, #666);
}
.festival-hero--closed .festival-closed-note a {
color: var(--primary, #8B1538);
font-weight: 600;
}
.buybox-note--preorder {
background: #eef5fb;
border-left: 3px solid #17557f;
color: #17557f;
}
.buybox-note--season {
background: var(--cream, #FDF8F0);
border-left: 3px solid var(--secondary, #C9A227);
color: #6b5a2a;
line-height: 1.7;
}
.buybox-note--season strong {
display: inline-block;
margin-top: .3rem;
color: var(--primary, #8B1538);
}
.p-card-season {
position: absolute;
top: .6rem;
left: .6rem;
padding: .2rem .55rem;
border-radius: 4px;
background: #17557f;
color: #fff;
font-size: 11px;
font-weight: 600;
letter-spacing: .3px;
}
.cart-coupon {
margin-top: 1.25rem;
padding-top: 1.25rem;
border-top: 1px solid var(--cream-dark, #F5EBD7);
}
.cart-coupon label {
display: block;
font-size: .85rem;
font-weight: 600;
color: var(--text, #333);
margin-bottom: .4rem;
}
.cart-coupon-row { display: flex; gap: .5rem; }
.cart-coupon-row input {
flex: 1;
min-width: 0;
padding: .5rem .7rem;
border: 1px solid var(--cream-dark, #E4D9C2);
border-radius: 6px;
font-size: .95rem;
text-transform: uppercase;
}
.cart-coupon-ok,
.cart-coupon-no,
.co-coupon-ok,
.co-coupon-no {
display: flex;
align-items: flex-start;
gap: .4rem;
margin: .55rem 0 0;
font-size: .85rem;
line-height: 1.5;
}
.cart-coupon-ok, .co-coupon-ok { color: #1e7e34; }
.cart-coupon-no, .co-coupon-no { color: #c0392b; }
.cart-coupon-remove {
background: none;
border: none;
padding: 0;
margin-top: .4rem;
font-size: .8rem;
cursor: pointer;
text-decoration: underline;
}
.ord-badge--off { background: #f3eeee; color: #8d2b22; }
.ord-track {
margin: 0 0 2.25rem;
padding: 1.5rem 1.5rem 1.1rem;
background: #fff;
border: 1px solid var(--cream-dark, #F5EBD7);
border-radius: var(--radius-lg, 12px);
}
.ord-steps {
display: grid;
grid-template-columns: repeat(5, 1fr);
list-style: none;
margin: 0 0 1.1rem;
padding: 0;
counter-reset: step;
}
.ord-step {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: .35rem;
text-align: center;
padding: 0 .25rem;
}
.ord-step + .ord-step::before {
content: '';
position: absolute;
top: 17px;
right: 50%;
width: 100%;
height: 3px;
background: var(--cream-dark, #F5EBD7);
z-index: 0;
}
.ord-step.is-done + .ord-step.is-done::before { background: #2e8b57; }
.ord-step-dot {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: #fff;
border: 3px solid var(--cream-dark, #F5EBD7);
color: #cdbfa6;
font-size: .8rem;
}
.ord-step.is-done .ord-step-dot { background: #2e8b57; border-color: #2e8b57; color: #fff; font-size: 1rem; }
.ord-step.is-current .ord-step-dot { box-shadow: 0 0 0 6px rgba(46, 139, 87, .16); }
.ord-step-label { font-size: .9rem; font-weight: 600; color: var(--text-muted, #999); }
.ord-step.is-done .ord-step-label { color: var(--text, #333); }
.ord-step.is-current .ord-step-label { color: #1f6b43; }
.ord-step-when { font-size: .76rem; color: var(--text-muted, #999); min-height: 1.1em; line-height: 1.4; }
.ord-track .ord-keep {
display: flex;
gap: .5rem;
align-items: flex-start;
margin: 0;
padding-top: .9rem;
border-top: 1px dashed var(--cream-dark, #F5EBD7);
font-size: .85rem;
line-height: 1.6;
color: var(--text-light, #666);
}
.ord-track .ord-keep i { color: var(--secondary-dark, #a8871f); margin-top: .15rem; }
.ord-track .ord-keep a { color: var(--primary, #8B1538); font-weight: 500; }
@media (max-width: 640px) {
.ord-steps { grid-template-columns: 1fr; gap: 0; }
.ord-step {
display: grid;
grid-template-columns: 36px 1fr;
grid-template-areas: "dot label" "dot when";
column-gap: .85rem;
align-items: center;
text-align: left;
padding: 0 0 1rem;
}
.ord-step-dot  { grid-area: dot; align-self: start; }
.ord-step-label { grid-area: label; }
.ord-step-when { grid-area: when; }
.ord-step + .ord-step::before { top: -1rem; right: auto; left: 16.5px; width: 3px; height: 1rem; }
}
.shop-block { padding: 2.5rem 0 4rem; }
.shop-hero--compact { padding-bottom: 2.25rem; }
.track-wrap {
display: grid;
grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
gap: 2.5rem;
align-items: start;
max-width: 960px;
margin: 0 auto;
}
.track-card {
display: flex;
flex-direction: column;
gap: 1.1rem;
padding: 1.6rem;
background: #fff;
border: 1px solid var(--cream-dark, #F5EBD7);
border-radius: var(--radius-lg, 12px);
box-shadow: 0 12px 32px rgba(139, 21, 56, .06);
}
.track-card .cart-flash { margin: 0; }
.track-submit { justify-content: center; width: 100%; padding: .85rem 1rem; }
.track-help { list-style: none; margin: 0; padding: .5rem 0 0; display: grid; gap: 1.25rem; }
.track-help li { display: flex; gap: .85rem; font-size: .93rem; line-height: 1.65; color: var(--text-light, #666); }
.track-help i { flex: 0 0 auto; font-size: 1.35rem; color: var(--secondary-dark, #a8871f); }
.track-help strong { color: var(--text, #333); }
.track-help a { color: var(--primary, #8B1538); font-weight: 600; }
@media (max-width: 800px) {
.track-wrap { grid-template-columns: 1fr; gap: 1.75rem; }
}
.shop-cats     { padding: 3rem 0 1rem; }
.shop-block    { padding: 3.5rem 0; }
.shop-listing  { padding: 2rem 0 4rem; }
.shop-why      { padding: 3.5rem 0; }
.cartpage, .checkoutpage { padding: 1rem 0 4rem; }
.pdp           { padding-bottom: 4rem; }
.shop-crumbs { padding-top: 108px; }
.orderpage   { padding-top: 120px; }
.page-hero .breadcrumb-nav,
.shop-crumbs .breadcrumb-nav {
padding-top: 0;
font-size: .86rem;
opacity: 1;
}
.page-hero .breadcrumb-nav a,
.shop-crumbs .breadcrumb-nav a { color: var(--primary, #8B1538); font-weight: 500; }
.page-hero .breadcrumb-nav a:hover,
.shop-crumbs .breadcrumb-nav a:hover { color: var(--primary-dark, #6d1029); text-decoration: underline; }
.page-hero .breadcrumb-nav span,
.shop-crumbs .breadcrumb-nav span { color: #8a7d68; }
.shop-crumbs .breadcrumb-nav { justify-content: flex-start; margin-bottom: 0; }
.shop-hero, .shop-listing-hero { padding-bottom: 2.75rem; }
.page-hero .lead { margin-left: auto; margin-right: auto; }
.shop-hero-search {
display: flex;
align-items: center;
gap: .5rem;
max-width: 560px;
margin: 1.5rem auto 0;
padding: .35rem .35rem .35rem 1rem;
background: #fff;
border: 1px solid var(--cream-dark, #F5EBD7);
border-radius: 999px;
box-shadow: 0 10px 30px rgba(139, 21, 56, .08);
}
.shop-hero-search i { color: #b9a98d; }
.shop-hero-search input {
flex: 1;
min-width: 0;
border: none;
outline: none;
background: transparent;
font: inherit;
font-size: .98rem;
padding: .5rem 0;
}
.shop-hero-search .btn { border-radius: 999px; padding: .6rem 1.3rem; }
.shop-hero-points {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .5rem 1.5rem;
list-style: none;
margin: 1.1rem 0 0;
padding: 0;
font-size: .88rem;
color: var(--text-light, #666);
}
.shop-hero-points i { color: var(--secondary-dark, #a8871f); margin-right: .25rem; }
.shop-hero-points a { color: var(--primary, #8B1538); font-weight: 500; text-decoration: none; }
.shop-hero-points a:hover { text-decoration: underline; }
.shop-cat { box-shadow: 0 2px 10px rgba(0, 0, 0, .03); }
.shop-cat-body { padding: 1.35rem 1.5rem 1.5rem; }
.shop-occasion-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.25rem;
}
.shop-occasion {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: .35rem;
min-height: 170px;
padding: 1.35rem 1.5rem;
border-radius: var(--radius-lg, 12px);
background: linear-gradient(135deg, #8B1538 0%, #5e0d25 100%) center / cover;
color: #fff;
text-decoration: none;
overflow: hidden;
transition: transform .2s, box-shadow .2s;
}
.shop-occasion::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, .55) 100%);
}
.shop-occasion > * { position: relative; }
.shop-occasion:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(139, 21, 56, .2); }
.shop-occasion-name { font-family: var(--font-secondary, Georgia, serif); font-size: 1.35rem; }
.shop-occasion-when { font-size: .85rem; opacity: .9; }
.shop-occasion .shop-cat-more { color: #f5d980; }
.p-card { border-radius: var(--radius-lg, 12px); box-shadow: 0 2px 10px rgba(0, 0, 0, .03); }
.p-card:hover { box-shadow: 0 14px 30px rgba(139, 21, 56, .1); transform: translateY(-3px); }
.p-card-media { overflow: hidden; }
.p-card-media img { transition: transform .35s; }
.p-card:hover .p-card-media img { transform: scale(1.04); }
.p-card-body { padding: 1rem 1.1rem 1.2rem; }
.p-card-name { font-weight: 600; }
.shop-sort { gap: .75rem; }
.shop-sort-field { display: inline-flex; align-items: center; gap: .5rem; }
.shop-sort select { padding: .5rem 2rem .5rem .75rem; border-radius: 8px; cursor: pointer; }
.shop-filter-toggle {
display: none;
align-items: center;
gap: .45rem;
padding: .5rem 1rem;
border: 1px solid var(--cream-dark, #F5EBD7);
border-radius: 999px;
background: #fff;
font: inherit;
font-size: .9rem;
font-weight: 600;
color: var(--text, #333);
cursor: pointer;
}
.shop-filter-count {
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 10px;
background: var(--primary, #8B1538);
color: #fff;
font-size: .72rem;
line-height: 20px;
text-align: center;
}
.shop-facets-head, .shop-facets-foot { display: none; }
.shop-facet-chip i { font-size: .8rem; }
.shop-facets {
padding: 1.25rem;
background: #fff;
border: 1px solid var(--cream-dark, #F5EBD7);
border-radius: var(--radius-lg, 12px);
}
@media (max-width: 992px) {
.shop-sort {
justify-content: space-between;
margin: 0;
padding: .6rem 0;
background: var(--white, #fff);
}
.shop-filter-toggle { display: inline-flex; }
.shop-sort-field label { display: none; }
.shop-facets {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 1100;
width: min(86vw, 360px);
margin: 0;
padding: 0 1.25rem;
border: none;
border-radius: 0 16px 16px 0;
overflow-y: auto;
transform: translateX(-105%);
transition: transform .25s ease;
box-shadow: 0 0 40px rgba(0, 0, 0, .2);
}
.shop-facets.is-open { transform: translateX(0); }
.shop-facets-head {
position: sticky;
top: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 -1.25rem 1rem;
padding: 1rem 1.25rem;
background: #fff;
border-bottom: 1px solid var(--cream-dark, #F5EBD7);
font-size: 1.05rem;
}
.shop-facets-close {
width: 38px;
height: 38px;
border: none;
border-radius: 50%;
background: var(--cream, #FDF8F0);
cursor: pointer;
font-size: 1rem;
}
.shop-facets-foot {
position: sticky;
bottom: 0;
display: block;
margin: 1rem -1.25rem 0;
padding: 1rem 1.25rem;
background: #fff;
border-top: 1px solid var(--cream-dark, #F5EBD7);
}
.shop-facets-foot .btn { width: 100%; justify-content: center; }
.shop-facets-backdrop {
position: fixed;
inset: 0;
z-index: 1090;
background: rgba(20, 10, 12, .45);
}
.shop-facets-backdrop[hidden] { display: none; }
body.shop-filters-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
.shop-facets { transition: none; }
.p-card-media img, .shop-occasion { transition: none; }
}
.pdp-detail {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
gap: 2.5rem;
max-width: none;
margin-top: 3.5rem;
padding-top: 2.5rem;
border-top: 1px solid var(--cream-dark, #F5EBD7);
align-items: start;
}
.pdp-detail--single { grid-template-columns: minmax(0, 820px); }
.pdp-section h2, .pdp-card h2 {
font-family: var(--font-secondary, Georgia, serif);
font-size: 1.4rem;
margin: 0 0 .9rem;
color: var(--primary, #8B1538);
}
.pdp-ingredients {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: .55rem .9rem;
list-style: none;
margin: 0;
padding: 0;
}
.pdp-ingredients li {
position: relative;
padding: .6rem .85rem .6rem 2.1rem;
background: var(--cream, #FDF8F0);
border: 1px solid var(--cream-dark, #F5EBD7);
border-radius: 10px;
font-size: .95rem;
line-height: 1.45;
color: #3d3d3d;
}
.pdp-ingredients li::before {
content: "";
position: absolute;
left: .9rem;
top: 50%;
width: 7px;
height: 7px;
margin-top: -3.5px;
border-radius: 50%;
background: var(--secondary, #C9A227);
}
.pdp-detail-side { display: flex; flex-direction: column; gap: 1.25rem; }
.pdp-card {
padding: 1.35rem 1.4rem;
background: #fff;
border: 1px solid var(--cream-dark, #F5EBD7);
border-radius: var(--radius-lg, 12px);
box-shadow: 0 4px 18px rgba(0, 0, 0, .03);
}
.pdp-card h2 { font-size: 1.2rem; }
.pdp-fact { display: flex; gap: .8rem; padding: .6rem 0; }
.pdp-fact + .pdp-fact { border-top: 1px dashed var(--cream-dark, #F5EBD7); }
.pdp-fact i { font-size: 1.15rem; color: var(--secondary-dark, #a8871f); margin-top: .1rem; }
.pdp-fact strong { display: block; font-size: .92rem; color: var(--text, #333); margin-bottom: .15rem; }
.pdp-fact p { margin: 0; font-size: .92rem; line-height: 1.65; color: var(--text-light, #666); }
.pdp-card .pdp-table td small { display: block; font-size: .75rem; color: var(--text-muted, #999); }
@media (max-width: 992px) {
.pdp-detail { grid-template-columns: 1fr; gap: 1.75rem; margin-top: 2.5rem; padding-top: 2rem; }
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.qty-stepper {
display: inline-flex;
align-items: stretch;
height: 46px;
border: 1px solid var(--cream-dark, #E9DCC2);
border-radius: 10px;
background: #fff;
overflow: hidden;
}
.qty-stepper:focus-within { border-color: var(--primary, #8B1538); box-shadow: 0 0 0 3px rgba(139, 21, 56, .1); }
.qty-btn {
width: 42px;
border: none;
background: var(--cream, #FDF8F0);
color: var(--primary, #8B1538);
font-size: 1rem;
cursor: pointer;
transition: background .15s, color .15s;
}
.qty-btn:hover:not(:disabled) { background: var(--primary, #8B1538); color: #fff; }
.qty-btn:disabled { color: #cfc3ad; cursor: not-allowed; }
.qty-stepper input,
.buybox-qty .qty-stepper input,
.cart-line-qty .qty-stepper input {
width: 52px;
border: none;
border-radius: 0;
padding: 0;
text-align: center;
font: inherit;
font-size: 1rem;
font-weight: 600;
color: var(--text, #333);
background: transparent;
font-variant-numeric: tabular-nums;
}
.qty-stepper input:focus { outline: none; }
.qty-stepper--sm { height: 40px; }
.qty-stepper--sm .qty-btn { width: 36px; }
.qty-stepper--sm input { width: 44px; }
.buybox-actions { align-items: flex-end; }
.buybox-add { height: 46px; }
.cart-line-qty { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.cart-line-remove {
border: none;
background: none;
padding: 0;
font: inherit;
font-size: .78rem;
color: var(--text-muted, #999);
cursor: pointer;
}
.cart-line-remove:hover { color: #a8291f; text-decoration: underline; }
.cart-lines.is-updating { opacity: .6; pointer-events: none; transition: opacity .2s; }
@media (max-width: 600px) {
.buybox-qty { justify-content: space-between; }
.cart-line-qty { flex-direction: row; gap: .9rem; }
.shop-crumbs { padding-top: 84px; }
.orderpage   { padding-top: 96px; }
}
.co-field > span em.req { color: #c0392b; font-weight: 700; margin-left: .15rem; }
.co-field input::placeholder,
.co-field textarea::placeholder,
.shop-searchbar input::placeholder,
.cart-pin-row input::placeholder,
.cart-coupon-row input::placeholder,
.shop-hero-search input::placeholder { color: #b8ad9a; font-style: italic; text-transform: none; }
.sum-row.is-tax { font-size: .84rem; color: #5f6b5f; }
.sum-taxnote { display: flex; gap: .45rem; margin: .75rem 0 0; font-size: .8rem; line-height: 1.5; color: var(--text-light, #666); }
.sum-taxnote i { color: #2e8b57; margin-top: .1rem; }
.shop-crumbs { padding-left: 20px; padding-right: 20px; }
.shop-empty .cart-link i { font-size: inherit; color: inherit; }
@media (max-width: 600px) {
.cart-line {
grid-template-columns: 72px minmax(0, 1fr) auto;
grid-template-areas: "img body body" "qty qty total";
}
.cart-line-qty { justify-content: flex-start; }
.cart-line-qty .qty-stepper { flex: 0 0 auto; }
}
.ord-return {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 1.25rem;
align-items: center;
padding-top: 1rem;
border-top: 1px dashed var(--cream-dark, #F5EBD7);
}
.ord-return-num {
display: flex;
flex-direction: column;
gap: .2rem;
padding: .75rem 1rem;
background: var(--cream, #FDF8F0);
border: 1px solid var(--cream-dark, #F5EBD7);
border-radius: 10px;
}
.ord-return-num span { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted, #999); }
.ord-return-num strong { font-size: 1.1rem; color: var(--primary, #8B1538); font-variant-numeric: tabular-nums; }
.ord-copy {
align-self: flex-start;
margin-top: .2rem;
padding: .2rem .6rem;
border: 1px solid var(--cream-dark, #E9DCC2);
border-radius: 999px;
background: #fff;
font: inherit;
font-size: .76rem;
color: var(--text, #333);
cursor: pointer;
}
.ord-copy:hover { border-color: var(--primary, #8B1538); color: var(--primary, #8B1538); }
.ord-return p { margin: 0; font-size: .88rem; line-height: 1.65; color: var(--text-light, #666); }
.ord-return a { color: var(--primary, #8B1538); font-weight: 600; }
.ord-updated { display: block; margin-top: .25rem; font-size: .8rem; color: var(--text-muted, #999); }
.ord-returned { margin-bottom: 1.5rem; }
.ord-problem { margin-top: 1.75rem; }
.ord-problem h2 { display: flex; align-items: center; gap: .5rem; }
.ord-problem p { color: var(--text-light, #666); line-height: 1.65; }
.ord-problem-form { display: grid; gap: 1.1rem; margin-top: 1rem; }
.ord-problem-form fieldset { border: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.ord-problem-form legend { width: 100%; margin-bottom: .5rem; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #666; }
.ord-problem-form legend em.req { color: #c0392b; }
.ord-problem-form .btn { justify-self: start; }
.ord-choice {
display: inline-flex;
align-items: center;
gap: .45rem;
padding: .5rem .85rem;
border: 1px solid var(--cream-dark, #E9DCC2);
border-radius: 999px;
font-size: .9rem;
cursor: pointer;
background: #fff;
}
.ord-choice:has(input:checked) { border-color: var(--primary, #8B1538); background: #fbf1f4; color: var(--primary, #8B1538); }
.track-results { max-width: 960px; margin: 0 auto 2rem; }
.track-results h2 { font-size: 1.25rem; color: var(--primary, #8B1538); margin: 0 0 .9rem; }
.track-results ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.track-results a {
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: 1rem;
align-items: center;
padding: .9rem 1.1rem;
background: #fff;
border: 1px solid var(--cream-dark, #F5EBD7);
border-radius: 10px;
color: var(--text, #333);
text-decoration: none;
}
.track-results a:hover { border-color: var(--primary, #8B1538); }
.track-results a span { color: var(--text-light, #666); font-size: .9rem; }
.track-results .track-results-status { color: #1f6b43; font-weight: 600; }
@media (max-width: 640px) {
.ord-return { grid-template-columns: 1fr; }
.track-results a { grid-template-columns: 1fr auto; }
.track-results a span:nth-of-type(1) { grid-column: 1; }
}
.sum-pin-link { color: var(--primary, #8B1538); font-weight: 600; text-decoration: none; }
.sum-pin-link:hover { text-decoration: underline; }
#co-pincode, #cart-pincode { scroll-margin-top: 120px; }
.shop-cat-soon { align-self: flex-start; padding: .15rem .6rem; border-radius: 999px; background: #fdf3dc; color: #8a5d00; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
@media (max-width: 640px) {
.track-results a > i { display: none; }
.track-results a { grid-template-columns: 1fr auto; row-gap: .25rem; }
.track-results a strong { grid-column: 1 / -1; }
}
.pdp-box-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pdp-box-list li {
display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
padding: .7rem .9rem; background: var(--cream, #FDF8F0);
border: 1px solid var(--cream-dark, #F5EBD7); border-radius: 10px;
}
.pdp-box-qty { font-weight: 700; color: var(--primary, #8B1538); font-variant-numeric: tabular-nums; }
.pdp-box-list a { color: var(--text, #333); font-weight: 600; text-decoration: none; }
.pdp-box-list a:hover { color: var(--primary, #8B1538); text-decoration: underline; }
.pdp-box-pack { color: var(--text-muted, #999); font-size: .88rem; }
.pdp-box-save { margin: .9rem 0 0; color: #1f6b43; }
.pdp-box-save i { margin-right: .3rem; }
.ord-steps { grid-template-columns: repeat(var(--steps, 5), minmax(0, 1fr)); }
.ord-step-note { font-size: .74rem; color: #1f6b43; line-height: 1.35; max-width: 16ch; }
@media (max-width: 640px) {
.ord-steps { grid-template-columns: 1fr; }
.ord-step-note { grid-column: 2; max-width: none; }
}
@media (max-width: 600px) {
.buybox-actions { flex-direction: row; align-items: stretch; flex-wrap: nowrap; gap: .6rem; }
.buybox-qty { flex-direction: column; justify-content: flex-end; gap: 0; }
.buybox-qty > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.buybox-add { flex: 1 1 auto; min-width: 0; width: auto; height: 46px; padding: 0 .75rem; font-size: .85rem; }
}
.co-field input,
.co-field select,
.co-field textarea,
.shop-sort select,
.shop-searchbar input,
.cart-pin-row input,
.cart-coupon-row input,
.shop-hero-search {
border: 1.5px solid var(--field-border, #cbb994);
border-radius: 10px;
background-color: #fff;
transition: border-color .15s, box-shadow .15s;
}
.co-field input,
.co-field select,
.cart-pin-row input,
.cart-coupon-row input { min-height: 48px; padding: .7rem .85rem; font-size: 1rem; }
.co-field textarea { padding: .75rem .85rem; font-size: 1rem; line-height: 1.55; }
.co-field input:hover:not(:focus):not(:disabled),
.co-field select:hover:not(:focus),
.co-field textarea:hover:not(:focus),
.shop-sort select:hover:not(:focus),
.shop-searchbar input:hover:not(:focus),
.cart-pin-row input:hover:not(:focus),
.cart-coupon-row input:hover:not(:focus),
.shop-hero-search:hover:not(:focus-within) { border-color: var(--field-border-hover, #a8936b); }
.co-field input:focus,
.co-field select:focus,
.co-field textarea:focus,
.shop-sort select:focus,
.shop-searchbar input:focus,
.cart-pin-row input:focus,
.cart-coupon-row input:focus,
.shop-hero-search:focus-within {
outline: none;
border-color: var(--primary, #8B1538);
box-shadow: 0 0 0 4px var(--field-ring, rgba(139, 21, 56, .14));
}
.co-field input:disabled { border-style: dashed; }
.co-field { gap: .4rem; }
.co-field > span { font-size: .8rem; color: #3d3d3d; }
.co-field small { color: #7a7266; }
.co-block {
border: 1px solid #e6d9c1;
box-shadow: 0 2px 10px rgba(80, 50, 20, .05);
}
.co-block legend { font-weight: 600; }
.co-pay,
.ord-choice { border: 1.5px solid var(--field-border, #cbb994); }
.co-pay:hover,
.ord-choice:hover { border-color: var(--field-border-hover, #a8936b); }
.co-pay:has(input:checked),
.ord-choice:has(input:checked) { border-color: var(--primary, #8B1538); background: #fdf5f7; }
.co-pay input[type="radio"],
.co-check input[type="checkbox"],
.ord-choice input { accent-color: var(--primary, #8B1538); width: 18px; height: 18px; }
.qty-stepper {
border: 1.5px solid var(--field-border, #cbb994);
background: #fff;
}
.qty-stepper:hover:not(:focus-within) { border-color: var(--field-border-hover, #a8936b); }
.qty-stepper:focus-within { border-color: var(--primary, #8B1538); box-shadow: 0 0 0 4px var(--field-ring, rgba(139, 21, 56, .14)); }
.qty-btn { background: #fbf4e8; }
.qty-btn[data-step="-1"] { border-right: 1px solid #eadcc3; }
.qty-btn[data-step="1"]  { border-left: 1px solid #eadcc3; }
.qty-btn:disabled { background: #f7f3ec; color: #b3a58c; }
@media (max-width: 767px) {
.co-field input,
.co-field select,
.co-field textarea,
.shop-searchbar input,
.cart-pin-row input,
.cart-coupon-row input,
.shop-hero-search input { font-size: 16px; }
}
@media (max-width: 480px) {
.ord-table { font-size: .84rem; }
.ord-table th, .ord-table td { padding: .5rem .3rem; }
.ord-table thead th { font-size: .66rem; }
}
@media (max-width: 767px) {
.shop-hero { padding-top: 5.25rem; padding-bottom: 1.25rem; }
.shop-hero .breadcrumb-nav { display: none; }
.shop-hero h1 { margin-bottom: .35rem; font-size: 1.55rem; }
.shop-hero .lead { display: none; }
.shop-hero h1 { margin-bottom: .9rem; }
.shop-hero-search { margin-bottom: .75rem; }
.shop-hero-search .btn { padding: .5rem 1rem; font-size: .8rem; }
.shop-hero-points {
flex-wrap: nowrap;
justify-content: flex-start;
gap: 1rem;
overflow-x: auto;
scrollbar-width: none;
font-size: .78rem;
white-space: nowrap;
}
.shop-hero-points::-webkit-scrollbar { display: none; }
.shop-cats { padding: 1rem 0 0; }
.shop-cat-grid {
display: flex;
gap: .5rem;
margin: 0 -16px;
padding: 0 16px .35rem;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.shop-cat-grid::-webkit-scrollbar { display: none; }
.shop-cat {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: .45rem;
padding: .3rem .9rem .3rem .3rem;
border: 1.5px solid #e6d6b8;
border-radius: 999px;
background: #fff;
box-shadow: none;
scroll-snap-align: start;
}
.shop-cat:not(:has(img)) { padding-left: .9rem; }
.shop-cat:hover { transform: none; box-shadow: none; border-color: var(--primary, #8B1538); }
.shop-cat img { width: 30px; height: 30px; border-radius: 50%; }
.shop-cat-body { flex-direction: row; align-items: center; gap: .4rem; padding: .35rem 0; }
.shop-cat-name { font-family: var(--font-primary, sans-serif); font-size: .86rem; font-weight: 600; white-space: nowrap; color: var(--text, #2b2b2b); }
.shop-cat-desc,
.shop-cat-more { display: none; }
.shop-cat-soon { order: 2; padding: .05rem .4rem; font-size: .6rem; }
.shop-block { padding: 1.5rem 0 2rem; }
.shop-block .premium-section-header { margin-bottom: 1rem; text-align: left; }
.shop-block .section-badge { display: none; }
.shop-block .premium-section-title { margin: 0; font-size: 1.3rem; }
.p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.p-card-body { padding: .65rem .7rem .8rem; gap: .2rem; }
.p-card-name { font-size: .88rem; line-height: 1.35; }
.p-card-cat { font-size: .62rem; }
.p-card-price { font-size: .95rem; }
}
@media (max-width: 767px) {
.shop-listing-hero { padding-top: 5.25rem; padding-bottom: 1.25rem; }
.shop-listing-hero .breadcrumb-nav { margin-bottom: .35rem !important; font-size: .78rem; }
.shop-listing-hero h1 { margin-bottom: .3rem; font-size: 1.55rem; }
.shop-listing-hero .lead { font-size: .88rem; line-height: 1.5; margin-bottom: 0; }
}