* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Height of the fixed header. Every page offsets its content by this, and
       the off-canvas menu hangs below it, so it lives in one place instead of
       being repeated as a magic 70px. Overridden at the mobile breakpoint,
       where 44px touch targets make the bar taller. */
    --header-h: 70px;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    /* iOS Safari inflates text in landscape unless this is pinned. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* The fixed header's contents can extend past the viewport mid-transition
       (the off-canvas menu parks at right: -100%). Without this the whole page
       becomes horizontally draggable on a phone. */
    overflow-x: hidden;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1 0 auto;
}

/* Header & Navigation */
header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1rem 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

nav {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    /* Keeps the bar at --header-h (38 + 1rem padding top/bottom) even when the
       controls are smaller, so page content never offsets against a stale value. */
    min-height: 38px;
}

/* The brand is the only element allowed to give up space when the header gets
   tight — the controls must always stay reachable. */
.language-switcher,
.cart-icon-wrapper,
.burger {
    flex-shrink: 0;
}

.language-switcher {
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: 1rem;
}

.lang-btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 2px solid white;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s;
}

.lang-btn:hover {
    background: white;
    color: #667eea;
}

/* Cart Icon */
.cart-icon-wrapper {
    display: flex;
    align-items: center;
    margin-right: 1rem;
}

.cart-icon {
    position: relative;
    font-size: 1.5rem;
    color: white;
    text-decoration: none;
    transition: transform 0.3s;
}

.cart-icon:hover {
    transform: scale(1.1);
}

.cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ff4444;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: bold;
}

.logo {
    /* Fluid, capped at the original 1.5rem desktop size. A fixed 1.5rem here
       made the brand 275px wide on a 390px phone, which pushed the burger
       menu right off the screen. */
    font-size: clamp(0.95rem, 4vw, 1.5rem);
    font-weight: bold;
    margin-right: 3rem;
    /* .logo is an <a> so the brand links home; keep the original look. */
    color: inherit;
    text-decoration: none;
    /* min-width: 0 lets this flex item shrink below its content width, so the
       brand truncates instead of shoving the nav controls out of view. */
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.3s;
}

.nav-links a:hover {
    opacity: 0.8;
}

/* Burger Menu */
.burger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 4px;
}

.burger div {
    width: 25px;
    height: 3px;
    background: white;
    transition: all 0.3s ease;
}

.burger.active .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.burger.active .line2 {
    opacity: 0;
}

.burger.active .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
}

/* Hero Section with Slideshow */
.hero {
    margin-top: var(--header-h);
    height: calc(100vh - var(--header-h));
    /* dvh tracks the visible area as iOS Safari's toolbars show and hide; plain
       vh measures the taller un-toolbared viewport, so the slide bottom sat
       under the browser chrome. vh line above is the fallback. */
    height: calc(100dvh - var(--header-h));
    min-height: 500px;
    position: relative;
    overflow: hidden;
}

.slideshow {
    width: 100%;
    height: 100%;
    position: relative;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    pointer-events: none;
    z-index: 1;
}

.slide.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}

.slide-content {
    text-align: center;
    color: white;
    background: rgba(0,0,0,0.5);
    padding: 3rem;
    border-radius: 10px;
}

.slide-content h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.slide-content p {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}

.cta-button {
    background: #667eea;
    color: white;
    padding: 1rem 2rem;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.3s;
    text-decoration: none;
    display: inline-block;
}

.cta-button:hover {
    transform: translateY(-2px);
    background: #5568d3;
}

/* Slideshow Navigation */
.slide-nav {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.slide-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: background 0.3s;
}

.slide-dot.active {
    background: white;
}

/* Main Content */
main {
    /* width: 100% matters. body is a flex column, and an auto margin on the
       cross axis cancels align-items: stretch — so without an explicit width
       main shrink-wraps its content instead of filling max-width. A page with
       one product collapsed to ~600px, and auto-fit grids resolved against an
       indefinite width and put every item on a single row. */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 2rem;
}

section {
    margin-bottom: 4rem;
}

section h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: #667eea;
}

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.feature-card {
    padding: 2rem;
    background: #f8f9fa;
    border-radius: 10px;
    transition: transform 0.3s;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.feature-card h3 {
    color: #764ba2;
    margin-bottom: 1rem;
}

footer {
    background: #2c3e50;
    color: white;
    text-align: center;
    padding: 2rem;
}

/* Instagram link in the footer of every page. The icon inherits colour via
   currentColor, so it only ever needs the link's colour set. */
.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: white;
    text-decoration: none;
    font-weight: 600;
    /* 44px tall so it is a comfortable touch target on a phone. */
    min-height: 44px;
    padding: 0.5rem 1rem;
    margin-bottom: 0.5rem;
    border-radius: 6px;
    transition: color 0.3s, background 0.3s;
}

.social-link:hover,
.social-link:focus-visible {
    color: #f0c0ff;
    background: rgba(255, 255, 255, 0.08);
}

.social-icon {
    flex-shrink: 0;
}

/* The follow prompt on success.html, shown only after a completed payment. */
.follow-card {
    background: #faf5ff;
    border: 1px solid #e9d5ff;
    border-radius: 10px;
    padding: 1.5rem;
    margin: 1.5rem auto 0;
    max-width: 460px;
}

.follow-card p {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Instagram's own brand gradient, so the button reads as what it is. */
.btn-instagram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white;
    padding: 0.85rem 1.5rem;
    min-height: 44px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.3s;
}

.btn-instagram:hover {
    transform: scale(1.05);
}

/* For pages whose content starts straight after the header, with no hero
   section to provide the offset. Without this the first heading sits behind the
   fixed header. */
.page-main {
    margin-top: var(--header-h);
}

/* Products Page Styles */
.products-main {
    margin-top: var(--header-h);
    min-height: calc(100vh - 200px);
}

.products-hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-align: center;
    padding: 4rem 2rem;
}

.products-hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.products-hero p {
    font-size: 1.3rem;
    opacity: 0.9;
}

.products-grid {
    max-width: 1200px;
    margin: 4rem auto;
    padding: 0 2rem;
    display: grid;
    /* 2x2 for the four categories. A 3-column grid left the fourth card alone
       on its own row, which reads as a mistake. Switch back to repeat(3, 1fr)
       if a 5th and 6th category arrive and fill two rows properly. */
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
}

.product-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
}

.product-card:not(.coming-soon):hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}

/* Coming-soon cards are not clickable, so don't promise a click. */
.product-card.coming-soon {
    cursor: default;
}

.product-image {
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: relative;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Per-photo focal point. These are tall shots where the product rarely sits
       dead centre, so a plain centre crop misses it — it showed the river above
       the bracelets and the wicker heart below the rose quartz. Set --focal-y on
       the .product-image of any card whose subject sits high or low; smaller
       values crop towards the top of the photo, larger towards the bottom. */
    object-position: center var(--focal-y, 50%);
    transition: transform 0.3s;
}

.product-card:hover .product-image img {
    transform: scale(1.1);
}

/* Note: the category cards deliberately use cover with a tuned --focal-y rather
   than object-fit: contain. Contain fitted these portrait photos into a 512x300
   landscape card and left the product about 225px wide with wide empty margins —
   fully visible but far too small to read. Cropping to the subject fills the
   card. The product detail pages still use contain via .items-grid-contain,
   where the cards are narrow and the whole piece should show. */

.coming-soon-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
    color: white;
}

.product-info {
    padding: 2rem;
}

.product-info h3 {
    font-size: 1.8rem;
    color: #667eea;
    margin-bottom: 0.5rem;
}

.product-info p {
    color: #666;
    font-size: 1.1rem;
}

/* Product Detail Pages */
.product-detail-main {
    margin-top: var(--header-h);
    min-height: calc(100vh - 200px);
}

.back-button {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 2rem;
}

.back-button a {
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    transition: color 0.3s;
}

.back-button a:hover {
    color: #764ba2;
}

.product-detail-hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-align: center;
    padding: 3rem 2rem;
}

.product-detail-hero h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.product-detail-hero p {
    font-size: 1.2rem;
    opacity: 0.9;
}

.items-grid {
    max-width: 1200px;
    margin: 4rem auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

/* Product grid that shows each item whole instead of cropping it. Use where the
   photos are portrait or of mixed orientation — the default 250px cover crop
   reduces a hanging piece to a horizontal slice. 380px suits both a tall
   dreamcatcher and a 4:3 tray shot without much letterboxing either way.
   The track max is 1fr rather than a fixed width on purpose: auto-fit counts
   repetitions using a definite max, so minmax(280px, 360px) allowed only two
   per row on desktop and one on a tablet. Capping the card instead keeps the
   count responsive — 3 across on desktop, 2 on a tablet, 1 on a phone — while a
   lone card stays a sensible width and centred rather than stranded in the
   first of three columns. */
.items-grid-contain {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.items-grid-contain .item-card {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
}

.items-grid-contain .item-image {
    height: 380px;
    background: #f7f5f3;
}

.items-grid-contain .item-image img {
    object-fit: contain;
}

.item-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.item-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.item-image {
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Same per-photo focal point as the category cards — set --focal-y on the
       .item-image when a product photo's subject sits high or low in frame. */
    object-position: center var(--focal-y, 50%);
}

/* For a photo of several small pieces laid out down a tray. Cropping that to the
   default 250px landscape band cuts pieces off at both ends, so show the whole
   shot in a taller box instead. Applied per item, not per grid: the single-stone
   photos on the same page look better cropped, where the stone fills the card.
   Keep items sharing a grid row on the same setting, or that row will have one
   card with dead space under its image. */
.item-image-full {
    height: 340px;
    background: #f7f5f3;
}

.item-image-full img {
    object-fit: contain;
}

.item-details {
    padding: 1.5rem;
}

.item-details h3 {
    font-size: 1.3rem;
    color: #333;
    margin-bottom: 0.5rem;
}

.item-price {
    font-size: 1.5rem;
    font-weight: bold;
    color: #667eea;
    margin: 0.5rem 0;
}

.item-description {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.add-to-cart {
    width: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 0.8rem;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s;
}

.add-to-cart:hover {
    transform: scale(1.05);
}

/* Cart Page Styles */
.cart-main {
    margin-top: var(--header-h);
    min-height: calc(100vh - 200px);
}

.cart-hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-align: center;
    padding: 3rem 2rem;
}

.cart-hero h1 {
    font-size: 2.5rem;
}

.cart-container {
    max-width: 1200px;
    margin: 4rem auto;
    padding: 0 2rem;
}

.empty-cart {
    text-align: center;
    padding: 4rem 2rem;
}

.empty-cart p {
    font-size: 1.5rem;
    color: #666;
    margin-bottom: 2rem;
}

.continue-shopping {
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1rem 2rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.3s;
}

.continue-shopping:hover {
    transform: scale(1.05);
}

.cart-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
}

.cart-items {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cart-item {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 1.5rem;
    background: white;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    align-items: center;
}

.cart-item-image {
    /* Fills its grid track instead of being a hard 120px. At <=480px the track
       narrows to 100px, and a fixed width overflowed it by 20px. */
    width: 100%;
    max-width: 120px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
}

.cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item-details h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: #333;
}

.cart-item-price {
    font-size: 1.3rem;
    font-weight: bold;
    color: #667eea;
    margin-bottom: 1rem;
}

.quantity-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.qty-btn {
    background: #f0f0f0;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.qty-btn:hover {
    background: #e0e0e0;
}

.qty-display {
    font-size: 1.1rem;
    font-weight: 600;
    min-width: 30px;
    text-align: center;
}

.cart-item-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1rem;
}

.item-total {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
}

.remove-btn {
    background: #ff4444;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.3s;
}

.remove-btn:hover {
    background: #cc0000;
}

.cart-summary {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    height: fit-content;
    position: sticky;
    top: calc(var(--header-h) + 20px);
}

.cart-summary h2 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: #333;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 0.8rem 0;
    border-bottom: 1px solid #eee;
}

.summary-row.total {
    border-top: 2px solid #333;
    border-bottom: none;
    font-size: 1.3rem;
    font-weight: bold;
    margin-top: 1rem;
    padding-top: 1rem;
}

.checkout-btn {
    width: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 1rem;
    border-radius: 6px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 1.5rem;
    transition: transform 0.3s;
}

.checkout-btn:hover {
    transform: scale(1.02);
}

.continue-shopping-link {
    display: block;
    text-align: center;
    margin-top: 1rem;
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
}

.continue-shopping-link:hover {
    color: #764ba2;
}

/* Checkout Form Styles */
.checkout-form {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid #eee;
}

.checkout-form h3 {
    font-size: 1.3rem;
    color: #667eea;
    margin-bottom: 1rem;
}

.checkout-form h4 {
    font-size: 1.1rem;
    color: #333;
    margin: 1.5rem 0 1rem 0;
}

.form-group {
    margin-bottom: 1rem;
}

/* Hides the honeypot field from sight without display:none, which some bots
   detect and skip. Screen readers skip it via aria-hidden on the wrapper. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #333;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    /* Must stay at or above 16px: iOS Safari zooms the page in when a smaller
       field gains focus, and does not zoom back out. */
    font-size: 1rem;
    font-family: inherit;
    min-height: 44px;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: #667eea;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* The conditional parts of the checkout form use the hidden attribute so they
   leave the tab order too. Some of the blocks below set their own display, which
   would otherwise win over the browser default for [hidden]. */
[hidden] {
    display: none !important;
}

/* Conditional sections: the delivery address and the payment choice.
   fieldset/legend carry browser default borders and offsets that do not match
   the rest of the form, so both are reset here. */
.address-fields,
.payment-fields {
    border: none;
    padding: 0;
    margin: 1.5rem 0 0;
}

.address-fields legend,
.payment-fields legend {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    padding: 0;
    margin-bottom: 1rem;
}

.address-fields input:disabled,
.address-fields select:disabled {
    background: #f5f5f5;
    color: #999;
    cursor: not-allowed;
}

/* Shown when the delivery country is not Canada. */
.delivery-warning {
    background: #fff7ed;
    border-left: 4px solid #f59e0b;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: 5px;
}

.delivery-warning p {
    color: #7c2d12;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.delivery-warning a {
    color: #b45309;
    font-weight: 600;
    text-decoration: none;
}

.delivery-warning a:hover {
    text-decoration: underline;
}

.payment-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 0.75rem;
    cursor: pointer;
    transition: border-color 0.3s, background 0.3s;
}

.payment-option:hover {
    border-color: #667eea;
}

.payment-option input[type="radio"] {
    /* Nudged down to sit on the first line of the label rather than above it. */
    margin-top: 0.25rem;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    accent-color: #667eea;
}

.payment-option:has(input:checked) {
    border-color: #667eea;
    background: #f5f6ff;
}

.payment-option strong {
    display: block;
    color: #333;
}

.payment-option small {
    display: block;
    color: #666;
    font-size: 0.85rem;
    line-height: 1.5;
    margin-top: 0.15rem;
}

/* Delivery orders are card-only, so the pickup-only options are dimmed rather
   than removed — the note underneath explains why they cannot be chosen. */
.payment-option.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #fafafa;
}

.payment-option.is-disabled:hover {
    border-color: #ddd;
}

.payment-hint {
    color: #667eea;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-top: 0.5rem;
}

/* Validation problems. Kept out of alert(), which is dismissed without reading. */
.form-error {
    background: #fef2f2;
    border-left: 4px solid #dc2626;
    color: #991b1b;
    padding: 1rem 1.25rem;
    border-radius: 5px;
    margin: 1rem 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

.payment-notice {
    background: #f0f9ff;
    border-left: 4px solid #667eea;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border-radius: 5px;
}

.payment-notice h4 {
    font-size: 1.1rem;
    color: #667eea;
    margin-bottom: 0.75rem;
}

.payment-notice p {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Success Page Styles */
.success-main {
    margin-top: var(--header-h);
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.success-content {
    text-align: center;
    max-width: 600px;
}

.success-icon {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: white;
    margin: 0 auto 2rem;
    animation: scaleIn 0.5s ease;
}

@keyframes scaleIn {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ============================================
   "ADDED TO CART" TOAST
   ============================================ */

.added-to-cart-message {
    position: fixed;
    top: 100px;
    right: 20px;
    background: #4CAF50;
    color: white;
    padding: 1rem 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    animation: toastIn 0.3s ease;
}

.added-to-cart-message.leaving {
    animation: toastOut 0.3s ease forwards;
}

@keyframes toastIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toastOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

/* The scale-up on hover is decorative; honour a reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
    .btn-instagram:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .added-to-cart-message,
    .added-to-cart-message.leaving {
        animation: none;
    }
}

.success-content h1 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 1rem;
}

.success-content > p {
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 2rem;
}

.order-info {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 10px;
    margin: 2rem 0;
}

.order-info h2 {
    font-size: 1.5rem;
    color: #667eea;
    margin-bottom: 1rem;
}

.success-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary, .btn-secondary {
    padding: 1rem 2rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.3s;
    display: inline-block;
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.btn-secondary {
    background: white;
    color: #667eea;
    border: 2px solid #667eea;
}

.btn-primary:hover, .btn-secondary:hover {
    transform: scale(1.05);
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    /* 44px touch targets + 1rem header padding top and bottom = 76px. */
    :root {
        --header-h: 76px;
    }

    /* 2rem of side padding plus a 2rem gap ate ~96px of a 390px screen. */
    nav {
        padding: 0 1rem;
        gap: 0.5rem;
    }

    /* The 3rem gutter is only needed to separate the brand from the inline nav
       links, and those go off-canvas at this width. */
    .logo {
        margin-right: 0.5rem;
    }

    .language-switcher {
        order: 2;
        margin-left: auto;
        margin-right: 0;
    }

    .lang-btn {
        padding: 0.5rem 0.75rem;
        min-height: 44px;
    }

    .cart-icon-wrapper {
        order: 3;
        margin-right: 0;
    }

    /* 44px is the minimum comfortable touch target; the icon itself stays 1.5rem. */
    .cart-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }

    /* 11.2px in a 20px circle is hard to read at arm's length. */
    .cart-count {
        width: 22px;
        height: 22px;
        font-size: 0.8rem;
        top: -4px;
        right: -4px;
    }

    .burger {
        order: 4;
        /* Was a 25x17 hit area — too small to reliably tap. Padding grows the
           target without changing how the three lines look. */
        box-sizing: content-box;
        padding: 13px 9px;
        margin-right: -9px;
    }

    .nav-links a {
        display: block;
        padding: 0.75rem 1rem;
    }

    /* 4rem/2rem was tuned for desktop; on a 390px screen the side padding alone
       cost 64px of content width. */
    main {
        padding: 2rem 1rem;
    }

    /* main already supplies the 1rem gutter here, so drop the grid's own 2rem
       and tighten the gap — otherwise the two columns in the 601-768 range are
       squeezed into tall, narrow cards. */
    .products-grid {
        padding: 0;
        gap: 1.5rem;
    }

    .product-image {
        height: 240px;
    }

    /* Duplicated from the pointer:coarse block below so the sizes also apply on
       any narrow viewport, including desktop browsers resized for testing. */
    .qty-btn {
        width: 44px;
        height: 44px;
        font-size: 1.3rem;
    }

    .remove-btn {
        min-height: 44px;
    }

    .checkout-btn {
        min-height: 48px;
    }

    /* City and Province side by side leaves each about 120px wide on a phone,
       which is not enough for a province name. */
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .nav-links {
        position: fixed;
        right: -100%;
        top: var(--header-h);
        flex-direction: column;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        width: 100%;
        text-align: center;
        transition: right 0.3s ease;
        padding: 2rem 0;
        gap: 1rem;
    }

    .nav-links.active {
        right: 0;
    }

    .burger {
        display: flex;
    }

    .slide-content h1 {
        font-size: 2rem;
    }

    .slide-content p {
        font-size: 1rem;
    }

    section h2 {
        font-size: 2rem;
    }
}

@media screen and (max-width: 480px) {
    .hero {
        height: 400px;
    }

    .slide-content {
        padding: 2rem;
    }

    .slide-content h1 {
        font-size: 1.5rem;
    }

    .products-hero h1 {
        font-size: 2rem;
    }

    .items-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .product-detail-hero h1 {
        font-size: 1.8rem;
    }

    .cart-content {
        grid-template-columns: 1fr;
    }

    .cart-item {
        grid-template-columns: 100px 1fr;
        gap: 1rem;
    }

    .cart-item-actions {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .cart-summary {
        position: static;
    }

    /* main already drops to 1rem at 768px; zero these out so the two do not
       stack into 2rem of gutter again. */
    .cart-container,
    .products-hero,
    .product-detail-hero,
    .products-grid {
        padding-left: 0;
        padding-right: 0;
    }

    .cart-item {
        padding: 1rem;
    }

    .cart-summary {
        padding: 1.25rem;
    }
}

/* The category grid goes single-column here rather than at 480px. Holding two
   columns down to 480 squeezed each card to ~161px against a 300px-tall image,
   which looked broken. */
@media screen and (max-width: 600px) {
    .products-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .product-image {
        height: 200px;
    }
}

/* Very narrow phones (iPhone SE 1st gen and similar, 320px). Without this the
   brand truncates to "Your Soul Purp…"; trimming the surrounding chrome buys
   back just enough room to show it in full. */
@media screen and (max-width: 360px) {
    nav {
        padding: 0 0.5rem;
        gap: 0.25rem;
    }

    .logo {
        font-size: 0.85rem;
        margin-right: 0.25rem;
    }

    .lang-btn {
        padding: 0.5rem 0.5rem;
        font-size: 0.8rem;
    }
}

/* ============================================
   TOUCH TARGETS
   Sized by input type rather than viewport width: a 30px button is awkward to
   tap on any touchscreen, phone or tablet.
   ============================================ */

@media (hover: none) and (pointer: coarse) {
    .qty-btn {
        width: 44px;
        height: 44px;
        font-size: 1.3rem;
    }

    .remove-btn,
    .continue-shopping-link {
        min-height: 44px;
        padding: 0.75rem 1rem;
    }

    .checkout-btn {
        min-height: 48px;
    }
}