/**
 * Lazy Potato Express Glass - Zen Cart stylesheet
 *
 * Template: lpe_glass
 * Description: Lazy Glass design system ported from the Lazy Potato Express
 *              WordPress theme (design-tokens.css + glass-finish.css), applied
 *              to Zen Cart 2.2's standard storefront markup.
 * Version: 1.0.0
 *
 * Standalone copy: it does not import from WordPress, so the shop keeps its
 * look if WordPress is offline. When the site palette changes, update the
 * tokens below to match wordpress-theme/assets/css/glass-finish.css.
 */

/* ========================================
   Design Tokens
   ======================================== */

:root {
    --lpe-font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
    --lpe-glass-blur: 28px;
    --lpe-radius-sm: 8px;
    --lpe-radius-md: 16px;
    --lpe-radius-lg: 24px;
    --lpe-radius-pill: 9999px;
    --lpe-transition-fast: 150ms ease;
    --lpe-container-width: 1180px;
    --lpe-purple: #6050ce;
    --lpe-purple-light: #8070ec;
    --lpe-green: #10b981;
    --lpe-danger: #c74359;
    --lpe-warning: #b7791f;

    /* Photo frames: neutral (untinted) dark surround for gemstone and slab photos.
       Set --lpe-photo-well to the background colour used in the product photos so
       the photo edge disappears into the frame. */
    --lpe-photo-well: #131416;
    --lpe-photo-well-edge: rgba(255, 255, 255, .08);
    --lpe-photo-well-pad: 8px;

    /* The store always uses the dark Lazy Glass palette: dark surroundings make
       gemstone colours read richer and match the dark photo backdrops.
       Colour values match .lpe-theme-dark in glass-finish.css, except the
       wallpaper glows, which are muted so they don't tint how stones look. */
    color-scheme: dark;
    background: #141827;
    --lpe-color-bg: #141827;
    --lpe-color-text: #f3f4fc;
    --lpe-color-text-secondary: #c0c7de;
    --lpe-color-accent-purple: #c4b1ff;
    --lpe-glass-bg: rgba(30, 36, 57, .62);
    --lpe-glass-border: rgba(221, 229, 255, .2);
    --lpe-glass-edge: rgba(235, 241, 255, .28);
    --lpe-glass-sheen: rgba(215, 224, 255, .09);
    --lpe-glass-shadow: inset 0 1px 0 var(--lpe-glass-edge), inset 0 -1px 0 rgba(255,255,255,.04), 0 16px 48px -20px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.12);
    --lpe-wallpaper: radial-gradient(ellipse at 8% 15%, #2d2842 0, transparent 46%), radial-gradient(ellipse at 93% 24%, #1d2a3c 0, transparent 48%), radial-gradient(ellipse at 65% 92%, #2c2532 0, transparent 50%), linear-gradient(145deg, #141827, #1a1e2c);
    --lpe-solid-surface: #242c42;
    --lpe-input-bg: rgba(20, 24, 39, .68);
    --lpe-input-border: rgba(221, 229, 255, .24);
    --lpe-row-alt: rgba(255, 255, 255, .04);
}

/* ========================================
   Base
   ======================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
}
html.menu-is-open { overflow: hidden; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--lpe-color-bg);
    color: var(--lpe-color-text);
    font-family: var(--lpe-font-sans);
    font-size: 1rem;
    line-height: 1.5;
    isolation: isolate;
}
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--lpe-wallpaper);
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 1rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.03em;
    color: var(--lpe-color-text);
}
h1 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); letter-spacing: -.045em; }
h2 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1rem; line-height: 1.7; }

a { color: var(--lpe-color-accent-purple); text-decoration: none; transition: color var(--lpe-transition-fast); }
a:hover, a:focus { color: var(--lpe-green); text-decoration: underline; text-underline-offset: .18em; }
:is(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--lpe-color-accent-purple); outline-offset: 3px; }

img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }
hr { border: 0; border-top: 1px solid var(--lpe-glass-border); margin: 1.5rem 0; }

.visually-hidden, .visualNoDisplay {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.skip-link:focus {
    position: fixed !important;
    top: 12px; left: 12px;
    z-index: 1000;
    width: auto; height: auto;
    padding: 12px 18px;
    clip: auto;
    border-radius: var(--lpe-radius-pill);
    background: var(--lpe-purple);
    color: #fff;
}

.container { width: 100%; max-width: var(--lpe-container-width); margin: 0 auto; padding: 0 2rem; }

/* Zen Cart helper classes (normally from template_default/css/stylesheet.css) */
.back { float: left; }
.forward { float: right; }
.clearBoth { clear: both; }
br.clearBoth { display: block; content: ''; }
.hiddenField { display: none; }
.centeredContent, .center { text-align: center; }
.rightAlign { text-align: right; }
.smallText, .legalCopyright { font-size: .8rem; }
.biggerText { font-size: 1.15rem; }
.bold { font-weight: 700; }
.alert, .errorText { color: var(--lpe-danger); }
.important { font-weight: 700; }
.notice { font-size: .9rem; color: var(--lpe-color-text-secondary); }
.wrapperAttribsOptions::after,
.buttonRow::after,
.navNextPrevWrapper::after,
.centerColumn::after { content: ''; display: table; clear: both; }

/* ========================================
   Glass Material
   ======================================== */

.glass-surface, .glass-card, .glass-button, .header-action, .menu-toggle,
.centerColumn, .leftBoxContainer, .rightBoxContainer, #navBreadCrumb,
#navCatTabs a, #navEZPagesTop a {
    background: linear-gradient(135deg, var(--lpe-glass-sheen), transparent 55%), var(--lpe-glass-bg);
    border: 1px solid var(--lpe-glass-border);
    box-shadow: var(--lpe-glass-shadow);
    -webkit-backdrop-filter: blur(var(--lpe-glass-blur)) saturate(155%);
    backdrop-filter: blur(var(--lpe-glass-blur)) saturate(155%);
}

/* ========================================
   Buttons
   ======================================== */

.glass-button,
.cssButton, .cssButtonHover, .button, .normal_button, .submit_button,
input[type="submit"], input[type="button"], button[type="submit"]:not(.header-search-submit) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 13px 24px;
    border-radius: var(--lpe-radius-pill);
    font: 600 .9rem/1.2 var(--lpe-font-sans);
    color: var(--lpe-color-text);
    text-align: center;
    text-decoration: none;
    white-space: normal;
    cursor: pointer;
    transition: background var(--lpe-transition-fast), border-color var(--lpe-transition-fast), transform var(--lpe-transition-fast);
}

/* Zen Cart CSS buttons render as primary actions (Add to Cart, Checkout, Continue...) */
.glass-button-primary,
.cssButton, .cssButtonHover, .button, .normal_button, .submit_button,
input[type="submit"], button[type="submit"]:not(.header-search-submit) {
    background: linear-gradient(180deg, var(--lpe-purple-light), var(--lpe-purple));
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 18px -7px rgba(88,65,182,.55);
}
.glass-button-secondary { color: var(--lpe-color-text); }

.glass-button:hover, .glass-button:focus { text-decoration: none; color: var(--lpe-color-text); border-color: var(--lpe-color-accent-purple); }
.glass-button-primary:hover, .glass-button-primary:focus,
.cssButton:hover, .cssButtonHover, .button:hover, .normal_button:hover, .submit_button:hover,
input[type="submit"]:hover, button[type="submit"]:not(.header-search-submit):hover {
    color: #fff;
    text-decoration: none;
    background: linear-gradient(180deg, #7462e2, #5947c7);
    border-color: rgba(255, 255, 255, .6);
}
.glass-button:active, .header-action:active, .cssButton:active, input[type="submit"]:active { transform: scale(.97); }

/* Neutral, glass style for "back"/secondary Zen Cart buttons */
.button_back, .button_return_to_product_list, .button_prev, .button_cancel, .button_edit_small,
.button_change_address, .button_delete, .button_delete_small, .button_update_cart, .button_search,
.button_continue_shopping, .button_shipping_estimator {
    background: linear-gradient(135deg, var(--lpe-glass-sheen), transparent 55%), var(--lpe-glass-bg) !important;
    color: var(--lpe-color-text) !important;
    border-color: var(--lpe-glass-border) !important;
    box-shadow: var(--lpe-glass-shadow) !important;
}
.button_back:hover, .button_return_to_product_list:hover, .button_prev:hover, .button_cancel:hover,
.button_edit_small:hover, .button_change_address:hover, .button_delete:hover, .button_delete_small:hover,
.button_update_cart:hover, .button_search:hover, .button_continue_shopping:hover, .button_shipping_estimator:hover {
    border-color: var(--lpe-color-accent-purple) !important;
}
.button_edit_small, .button_delete_small, .button_sold_out_sm, .button_buy_now, .button_more_info {
    min-height: 40px;
    padding: 9px 16px;
    font-size: .82rem;
}
.button_sold_out, .button_sold_out_sm, .button_unavailable {
    background: var(--lpe-glass-bg) !important;
    color: var(--lpe-color-text-secondary) !important;
    box-shadow: none !important;
    cursor: not-allowed;
}

.buttonRow { margin: 1rem 0; }
.buttonRow.back { margin-right: 10px; }
.buttonRow.forward { margin-left: 10px; }
.navNextPrevWrapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 1rem 0; }
.navNextPrevList { list-style: none; margin: 0; }

/* ========================================
   Header
   ======================================== */

.site-header {
    position: sticky;
    top: 16px;
    z-index: 100;
    width: calc(100% - 40px);
    max-width: var(--lpe-container-width);
    margin: 20px auto 24px;
    border-radius: 28px;
}
.site-header > .container { padding: 16px 22px; }
.header-inner { display: flex; align-items: center; gap: 16px; }

.site-branding { min-width: 0; flex-shrink: 0; }
.site-title { margin: 0; font-size: clamp(1rem, 1.6vw, 1.25rem); font-weight: 750; line-height: 1.2; letter-spacing: -.04em; }
.site-title a { color: var(--lpe-color-text); text-decoration: none; }
.site-description { margin: 4px 0 0; font-size: .72rem; line-height: 1.3; color: var(--lpe-color-text-secondary); }

.header-search { position: relative; flex: 1 1 220px; min-width: 0; margin: 0; }
.header-search input[type="search"] {
    width: 100%;
    min-height: 44px;
    padding: 10px 50px 10px 18px;
    border-radius: var(--lpe-radius-pill);
}
.header-search-submit {
    position: absolute;
    top: 4px; right: 4px;
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--lpe-purple-light), var(--lpe-purple));
    color: #fff;
    cursor: pointer;
}
.header-search-submit svg { width: 17px; height: 17px; }

.header-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.header-hero-actions .glass-button { padding: 10px 18px; min-height: 44px; }

.header-actions { display: flex; gap: 8px; flex-shrink: 0; }
.header-action, .menu-toggle {
    position: relative;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    color: var(--lpe-color-text);
    cursor: pointer;
    flex-shrink: 0;
}
.header-action:hover, .menu-toggle:hover { border-color: var(--lpe-color-accent-purple); color: var(--lpe-color-text); text-decoration: none; }
.header-action svg { width: 19px; height: 19px; }
.cart-count {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 20px; height: 20px;
    padding: 0 5px;
    border-radius: var(--lpe-radius-pill);
    background: var(--lpe-purple);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    border: 2px solid var(--lpe-solid-surface);
}

.menu-toggle { flex-direction: column; gap: 4px; }
.menu-toggle[hidden] { display: none; }
.hamburger { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }

/* Navigation drawer */
.navigation-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(380px, 92vw);
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 28px;
    overflow-y: auto;
    color: var(--lpe-color-text);
    background: var(--lpe-solid-surface);
    border: 1px solid var(--lpe-glass-border);
    border-radius: 28px 0 0 28px;
    box-shadow: var(--lpe-glass-shadow);
}
.navigation-drawer[open] { animation: lpe-drawer-enter .2s ease-out; }
.navigation-drawer::backdrop { background: rgba(10, 14, 30, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.drawer-heading { display: grid; justify-items: start; gap: 12px; margin-bottom: 24px; }
.drawer-heading h2 { font-size: 1.25rem; margin: 0; }
.drawer-subheading { margin: 24px 0 12px; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--lpe-color-text-secondary); }
.navigation-drawer .menu { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.navigation-drawer .menu li { margin: 0; }
.navigation-drawer .menu a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 18px;
    overflow-wrap: anywhere;
    color: var(--lpe-color-text);
    border-radius: var(--lpe-radius-pill);
    background: var(--lpe-glass-bg);
    border: 1px solid var(--lpe-glass-border);
    box-shadow: var(--lpe-glass-shadow);
}
.navigation-drawer .menu a:hover { border-color: var(--lpe-color-accent-purple); text-decoration: none; }
.navigation-drawer .menu a[aria-current="page"] { background: var(--lpe-purple); color: #fff; }
@keyframes lpe-drawer-enter { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* Category tabs and EZ-Pages header bar */
#navCatTabsWrapper, #navEZPagesTopWrapper {
    width: calc(100% - 40px);
    max-width: var(--lpe-container-width);
    margin: 0 auto 24px;
    background: none;
    border: 0;
}
#navCatTabs ul, #navEZPagesTop {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#navCatTabs li { margin: 0; }
#navEZPagesTop { font-size: 0; color: transparent; } /* hides the stock " :: " separators */
#navCatTabs a, #navEZPagesTop a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 18px;
    border-radius: var(--lpe-radius-pill);
    color: var(--lpe-color-text);
    font-size: .85rem;
    font-weight: 600;
}
#navCatTabs a:hover, #navEZPagesTop a:hover { border-color: var(--lpe-color-accent-purple); text-decoration: none; }
#navCatTabs a.category-top span.category-subs-selected,
#navCatTabs a[aria-current="page"], #navEZPagesTop a[aria-current="page"] { color: inherit; }
#navCatTabs a:has(.category-subs-selected),
#navCatTabs a[aria-current="page"], #navEZPagesTop a[aria-current="page"] {
    background: linear-gradient(180deg, var(--lpe-purple-light), var(--lpe-purple));
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
}

/* ========================================
   Hero (store home page)
   ======================================== */

.hero-section {
    width: calc(100% - 40px);
    max-width: var(--lpe-container-width);
    margin: 0 auto 32px;
    padding: 32px 24px;
    border-radius: 40px;
}
.hero-content { display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: 32px; }
.hero-title { max-width: 650px; margin: 0 0 .6rem; font-size: clamp(1.9rem, 3.4vw, 3rem); font-weight: 750; line-height: 1.04; letter-spacing: -.065em; }
.hero-subtitle { max-width: 450px; margin-bottom: 18px; font-size: 1.05rem; line-height: 1.55; color: var(--lpe-color-text-secondary); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-image { display: flex; justify-content: center; }
.hero-placeholder {
    position: relative;
    width: min(100%, 140px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 30%;
    border: 1px solid var(--lpe-glass-edge);
    background: linear-gradient(145deg, rgba(255,255,255,.6), rgba(174,159,237,.22) 48%, rgba(126,195,239,.3));
    box-shadow: inset 2px 2px 3px var(--lpe-glass-edge), inset -2px -2px 4px rgba(255,255,255,.3), 18px 30px 60px -22px rgba(86,69,155,.35);
    transform: rotate(-9deg);
}
.hero-placeholder::before {
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px solid var(--lpe-glass-edge);
    border-radius: 28%;
    background: linear-gradient(135deg, var(--lpe-glass-sheen), transparent);
    box-shadow: var(--lpe-glass-shadow);
}
.hero-icon { position: relative; width: 44%; height: 44%; color: var(--lpe-color-text); opacity: .75; transform: rotate(9deg); }

/* ========================================
   Layout
   ======================================== */

.lpe-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    width: calc(100% - 40px);
    max-width: var(--lpe-container-width);
    margin: 0 auto 32px;
    align-items: start;
}
.lpe-layout.has-left { grid-template-columns: 250px minmax(0, 1fr); }
.lpe-layout.has-right { grid-template-columns: minmax(0, 1fr) 250px; }
.lpe-layout.has-left.has-right { grid-template-columns: 230px minmax(0, 1fr) 230px; }
.site-main { min-width: 0; }
.columnLeft, .columnRight { min-width: 0; }
#navColumnOneWrapper, #navColumnTwoWrapper { width: auto !important; display: grid; gap: 20px; }

/* Breadcrumb */
#navBreadCrumb {
    margin-bottom: 20px;
    padding: 10px 20px;
    border-radius: var(--lpe-radius-pill);
    font-size: .85rem;
    color: var(--lpe-color-text-secondary);
}
#navBreadCrumb a { color: var(--lpe-color-text); }

/* Main content panel: every Zen Cart page wraps its content in .centerColumn */
.centerColumn {
    padding: clamp(20px, 4vw, 40px);
    border-radius: 28px;
}
.centerColumn + .centerColumn { margin-top: 24px; }
.centerColumn > h1:first-child, #indexDefaultHeading, #productName { margin-bottom: 1.25rem; }
.greeting { font-size: 1rem; font-weight: 500; color: var(--lpe-color-text-secondary); }
.content, #indexDefaultMainContent, #indexCategoriesMainContent, .categoryDescription { color: var(--lpe-color-text-secondary); margin-bottom: 1.5rem; }
.content ul { list-style: disc; padding-left: 1.4rem; }

/* ========================================
   Sideboxes
   ======================================== */

.leftBoxContainer, .rightBoxContainer {
    margin: 0;
    padding: 20px;
    border-radius: var(--lpe-radius-lg);
    overflow: hidden;
    width: auto !important;
}
.leftBoxHeading, .rightBoxHeading {
    margin: 0 0 12px;
    padding: 0;
    background: none;
    font-size: .95rem;
    letter-spacing: -.02em;
}
.leftBoxHeading a, .rightBoxHeading a, .leftBoxHeading label, .rightBoxHeading label { color: var(--lpe-color-text); }
.sideBoxContent { font-size: .85rem; color: var(--lpe-color-text-secondary); }
.sideBoxContent ul { list-style: none; margin: 0; padding: 0; }
.sideBoxContent li { margin: 0 0 6px; }
.sideBoxContent a { color: var(--lpe-color-text); }
.sideBoxContent a:hover { color: var(--lpe-color-accent-purple); }
.sideBoxContent input[type="text"], .sideBoxContent input[type="search"], .sideBoxContent select { width: 100%; }
.sideBoxContent .cssButton, .sideBoxContent input[type="submit"] { width: 100%; margin-top: 8px; }
.sideBoxContent img { border-radius: var(--lpe-radius-md); }

/* Categories sidebox */
#categoriesContent a { display: block; padding: 6px 10px; border-radius: var(--lpe-radius-sm); }
#categoriesContent a:hover { background: var(--lpe-glass-bg); text-decoration: none; }
.category-subs-selected, .category-subs-parent { font-weight: 700; color: var(--lpe-color-accent-purple); }
.category-links, .category-products { font-size: .8rem; }

/* Shopping cart sidebox */
#shoppingcartContent .cartBoxTotal { margin-top: 8px; font-weight: 700; color: var(--lpe-color-text); }
.cartNewItem { color: var(--lpe-green); }
.cartOldItem { color: var(--lpe-color-text); }

/* ========================================
   Messages
   ======================================== */

.messageStackError, .messageStackWarning, .messageStackSuccess, .messageStackCaution {
    width: calc(100% - 40px);
    max-width: var(--lpe-container-width);
    margin: 0 auto 16px;
    padding: 14px 20px;
    border-radius: var(--lpe-radius-md);
    border: 1px solid;
    font-weight: 500;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}
.centerColumn :is(.messageStackError, .messageStackWarning, .messageStackSuccess, .messageStackCaution) { width: auto; }
.messageStackError, .messageStackWarning { background: rgba(199, 67, 89, .14); border-color: rgba(199, 67, 89, .4); color: var(--lpe-color-text); }
.messageStackSuccess { background: rgba(16, 185, 129, .14); border-color: rgba(16, 185, 129, .4); color: var(--lpe-color-text); }
.messageStackCaution { background: rgba(183, 121, 31, .14); border-color: rgba(183, 121, 31, .4); color: var(--lpe-color-text); }
.messageStackError img, .messageStackWarning img, .messageStackSuccess img, .messageStackCaution img { margin-right: 6px; }

/* ========================================
   Forms
   ======================================== */

input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="date"], input[type="url"], input:not([type]), select, textarea {
    max-width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    font: inherit;
    font-size: .95rem;
    color: var(--lpe-color-text);
    background: var(--lpe-input-bg);
    border: 1px solid var(--lpe-input-border);
    border-radius: 12px;
    transition: border-color var(--lpe-transition-fast), box-shadow var(--lpe-transition-fast);
}
textarea { width: 100%; min-height: 120px; }
select { padding-right: 32px; }
:is(input, select, textarea):focus { outline: none; border-color: var(--lpe-color-accent-purple); box-shadow: 0 0 0 3px rgba(128, 112, 236, .25); }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; margin: 0 8px 0 0; vertical-align: middle; accent-color: var(--lpe-purple); }
input[type="file"] { color: var(--lpe-color-text-secondary); }
::placeholder { color: var(--lpe-color-text-secondary); opacity: .8; }

form { margin: 0; }
fieldset {
    margin: 0 0 1.5rem;
    padding: 20px;
    border: 1px solid var(--lpe-glass-border);
    border-radius: var(--lpe-radius-lg);
    background: var(--lpe-row-alt);
}
fieldset fieldset { background: transparent; }
legend { padding: 0 10px; font-weight: 700; color: var(--lpe-color-text); }
label, .inputLabel, .inputLabelPayment, .selectAddress, .checkboxLabel, .radioButtonLabel {
    font-size: .9rem;
    color: var(--lpe-color-text);
}
label.inputLabel, .inputLabelPayment { display: inline-block; width: 11em; margin: 10px 0 4px; vertical-align: middle; }
label.checkboxLabel, label.radioButtonLabel { display: inline; margin: 0 1rem 0 0; }
.inputLabel + input, .inputLabel + select { width: min(100%, 22rem); }
.alert, span.alert { font-size: .85rem; }
.forward.alert, .inputRequirement { font-size: .8rem; color: var(--lpe-danger); }

/* ========================================
   Tables (listing, cart, account, checkout)
   ======================================== */

.lpe-table-scroll { width: 100%; overflow-x: auto; margin-bottom: 1.5rem; -webkit-overflow-scrolling: touch; }
.centerColumn table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.centerColumn th, .tableHeading, .productListing-rowheading, .rowHeading {
    padding: 12px 14px;
    text-align: left;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--lpe-color-text-secondary);
    background: var(--lpe-glass-bg);
    border-bottom: 1px solid var(--lpe-glass-border);
}
.productListing-rowheading a, .productListing-heading { color: var(--lpe-color-text-secondary); }
.centerColumn td { padding: 12px 14px; vertical-align: middle; border-bottom: 1px solid var(--lpe-glass-border); color: var(--lpe-color-text); }
.centerColumn tr.rowEven, .productListing-even { background: var(--lpe-row-alt); }
.centerColumn tr.rowOdd, .productListing-odd { background: transparent; }
.productListing-data img, .cartImage img, .cartImage { border-radius: var(--lpe-radius-md); }
.itemTitle a, .productListing-data h3 a, .cartProductDisplay a { color: var(--lpe-color-text); font-weight: 600; }
.listingDescription { font-size: .85rem; color: var(--lpe-color-text-secondary); }

/* Shopping cart */
#cartContentsDisplay .cartQuantity input { width: 5em; }
#cartSubTotal, .cartTotalsDisplay { margin: 1rem 0; font-size: 1.15rem; font-weight: 700; text-align: right; color: var(--lpe-color-text); }
.cartUnitDisplay, .cartTotalDisplay { white-space: nowrap; }
.cartRemoveItemDisplay, .cartQuantityUpdate { text-align: center; }
.cartAttribsList { margin: 4px 0 0; padding-left: 1rem; font-size: .8rem; color: var(--lpe-color-text-secondary); list-style: disc; }

/* Checkout totals */
#orderTotals, #checkoutOrderTotals { margin: 1rem 0; }
.lineTitle, .totalBox { display: inline-block; padding: 4px 0; }
.lineTitle { width: 70%; text-align: right; padding-right: 12px; color: var(--lpe-color-text-secondary); }
.totalBox { width: 28%; text-align: right; font-weight: 600; }
#ottotal .totalBox, #ottotal .lineTitle { font-size: 1.1rem; font-weight: 700; color: var(--lpe-color-text); }

/* Split page navigation */
.navSplitPagesResult { font-size: .85rem; color: var(--lpe-color-text-secondary); padding: 8px 0; }
.navSplitPagesLinks { padding: 8px 0; }
.navSplitPagesLinks a, .navSplitPagesLinks strong.current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 38px;
    margin: 2px;
    padding: 4px 10px;
    border-radius: var(--lpe-radius-pill);
    border: 1px solid var(--lpe-glass-border);
    background: var(--lpe-glass-bg);
    color: var(--lpe-color-text);
    font-size: .85rem;
}
.navSplitPagesLinks a:hover { border-color: var(--lpe-color-accent-purple); text-decoration: none; }
.navSplitPagesLinks strong.current, .navSplitPagesLinks .current {
    background: linear-gradient(180deg, var(--lpe-purple-light), var(--lpe-purple));
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
}

/* ========================================
   Product Cards (center boxes, category & listing grids)
   ======================================== */

.centerBoxWrapper, #categoryListing, .categoryListBoxContents-wrapper {
    margin: 0 0 2rem;
}
.centerBoxWrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.centerBoxWrapper > .centerBoxHeading,
.centerBoxWrapper > h2 { flex: 0 0 100%; margin: 0 0 4px; }
.centerBoxWrapper > br, .centerBoxWrapper > .clearBoth { display: none; }

.centerBoxContentsNew, .centerBoxContentsFeatured, .centerBoxContentsSpecials,
.centerBoxContentsAlsoPurch, .centerBoxContentsProducts, .categoryListBoxContents,
.centerBoxContents {
    float: none !important;
    flex: 1 1 200px;
    width: auto !important;
    max-width: calc(50% - 8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 16px 20px;
    text-align: center;
    border-radius: var(--lpe-radius-lg);
    background: linear-gradient(135deg, var(--lpe-glass-sheen), transparent 55%), var(--lpe-glass-bg);
    border: 1px solid var(--lpe-glass-border);
    box-shadow: var(--lpe-glass-shadow);
    transition: transform var(--lpe-transition-fast), border-color var(--lpe-transition-fast);
}
@media (min-width: 640px) {
    .centerBoxContentsNew, .centerBoxContentsFeatured, .centerBoxContentsSpecials,
    .centerBoxContentsAlsoPurch, .centerBoxContentsProducts, .categoryListBoxContents,
    .centerBoxContents { max-width: calc(33.333% - 11px); }
}
@media (min-width: 1100px) {
    .lpe-layout:not(.has-left):not(.has-right) :is(.centerBoxContentsNew, .centerBoxContentsFeatured, .centerBoxContentsSpecials,
    .centerBoxContentsAlsoPurch, .centerBoxContentsProducts, .categoryListBoxContents, .centerBoxContents) { max-width: calc(25% - 12px); }
}
:is(.centerBoxContentsNew, .centerBoxContentsFeatured, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch,
    .centerBoxContentsProducts, .categoryListBoxContents, .centerBoxContents):hover {
    transform: translateY(-3px);
    border-color: var(--lpe-color-accent-purple);
}
:is(.centerBoxContentsNew, .centerBoxContentsFeatured, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch,
    .centerBoxContentsProducts, .categoryListBoxContents, .centerBoxContents) img {
    border-radius: var(--lpe-radius-md);
    margin-bottom: 4px;
}
:is(.centerBoxContentsNew, .centerBoxContentsFeatured, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch,
    .centerBoxContentsProducts, .categoryListBoxContents, .centerBoxContents) a {
    color: var(--lpe-color-text);
    font-weight: 600;
}
:is(.centerBoxContentsNew, .centerBoxContentsFeatured, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch,
    .centerBoxContentsProducts, .categoryListBoxContents, .centerBoxContents) br { display: none; }
:is(.centerBoxContentsNew, .centerBoxContentsFeatured, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch,
    .centerBoxContentsProducts, .categoryListBoxContents, .centerBoxContents) a + a { display: block; }

/* Columnar product listing wrapper */
#productListing .centerBoxWrapper, .productListing-wrapper { display: flex; flex-wrap: wrap; gap: 16px; }

/* Prices */
.productPriceDisplay, #productPrices, .productListing-data .productBasePrice { font-weight: 700; color: var(--lpe-color-text); }
.normalprice { text-decoration: line-through; color: var(--lpe-color-text-secondary); font-weight: 400; margin-right: 6px; }
.productSpecialPrice, .productSalePrice, .productSpecialPriceSale { color: var(--lpe-danger); font-weight: 700; }
.productPriceDiscount { display: block; font-size: .8rem; color: var(--lpe-green); }
.productFreePrice { color: var(--lpe-green); font-weight: 700; }

/* ========================================
   Product Info Page
   ======================================== */

#productGeneral #productName { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
#productMainImage {
    float: left;
    margin: 0 28px 20px 0;
    padding: 12px;
    max-width: min(100%, 360px);
    text-align: center;
    border-radius: var(--lpe-radius-lg);
    background: var(--lpe-photo-well);
    border: 1px solid var(--lpe-photo-well-edge);
    box-shadow: 0 16px 48px -20px rgba(0, 0, 0, .55);
}
#productMainImage img { border-radius: var(--lpe-radius-md); }
#productMainImage a { font-size: .8rem; color: #c0c7de; }
#productPrices { display: block; margin: 0 0 1rem; font-size: 1.6rem; letter-spacing: -.03em; }
#productDescription { margin: 1rem 0 1.5rem; color: var(--lpe-color-text-secondary); line-height: 1.75; }
#productDetailsList { list-style: none; padding: 0; font-size: .9rem; color: var(--lpe-color-text-secondary); }

#cartAdd {
    float: right;
    display: grid;
    gap: 10px;
    justify-items: center;
    margin: 0 0 1.5rem 1.5rem;
    padding: 20px;
    min-width: 220px;
    text-align: center;
    border-radius: var(--lpe-radius-lg);
    background: var(--lpe-glass-bg);
    border: 1px solid var(--lpe-glass-border);
    box-shadow: var(--lpe-glass-shadow);
    font-size: .9rem;
}
#cartAdd input[name="cart_quantity"] { width: 5em; text-align: center; }
#cartAdd br { display: none; }

#productAttributes { clear: left; margin: 1.5rem 0; }
#attribsOptionsText { margin-bottom: 8px; font-weight: 700; }
.wrapperAttribsOptions { margin: 0 0 12px; }
.wrapperAttribsOptions h4.optionName, .optionName { display: inline-block; min-width: 9em; margin: 0 8px 0 0; font-size: .9rem; }
.attribImg { display: inline-block; margin: 6px; text-align: center; }

#productAdditionalImages { clear: both; display: flex; flex-wrap: wrap; gap: 12px; margin: 1.5rem 0; }
#productAdditionalImages .additionalImages { float: none !important; width: auto !important; padding: 8px; border-radius: var(--lpe-radius-md); background: var(--lpe-photo-well); border: 1px solid var(--lpe-photo-well-edge); }
#productAdditionalImages .additionalImages a { color: #c0c7de; font-size: .75rem; }
#productAdditionalImages img { border-radius: var(--lpe-radius-sm); }

#productQuantityDiscounts { clear: both; margin: 1.5rem 0; }
#productReviewLink, #productTellFriendLink { margin: 1rem 0; }
.reviewsProductInfo, #reviewsDefault .productReviewsDefaultProductMainImage { margin-bottom: 1rem; }
#productInfoLink, #productDateAvailable, #productDateAdded { clear: both; font-size: .85rem; color: var(--lpe-color-text-secondary); }

/* ========================================
   Photo Frames (gemstone & slab photography)
   ======================================== */

/* Product photos sit on a neutral dark frame instead of the tinted glass, so the
   pastel wallpaper never shifts how a stone's colour reads, and dark-background
   photos blend into their frame instead of showing a hard box edge. */
:is(.centerBoxContentsNew, .centerBoxContentsFeatured, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch,
    .centerBoxContentsProducts, .centerBoxContents) img,
.categoryListBoxContents img, #categoryImgListing,
.productListing-data img,
#cartImage img,
#shoppingcartContent img, .sideBoxContent a img,
#reviewsDefault img, #reviewsInfoDefault img,
.productReviewsDefaultProductMainImage img, .attribImg img {
    padding: var(--lpe-photo-well-pad);
    background: var(--lpe-photo-well);
    border: 1px solid var(--lpe-photo-well-edge);
    border-radius: var(--lpe-radius-md);
}

/* Image popup (popup_image page): full dark viewing surround. */
body#popupImage { background: var(--lpe-photo-well); }
body#popupImage::before { display: none; }
body#popupImage img { padding: 0; border: 0; background: none; }

/* ========================================
   Category Listing
   ======================================== */

#categoryImgListing { float: right; margin: 0 0 1rem 1.5rem; border-radius: var(--lpe-radius-lg); }
#indexProductListCatDescription, #indexCategoriesHeading + .categoryDescription { color: var(--lpe-color-text-secondary); }
#filter-wrapper, #productListing .navSplitPagesResult { margin: .5rem 0 1rem; }
#filter-wrapper { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ========================================
   Account, Login, Checkout
   ======================================== */

#loginDefault fieldset, #createAcctDefault fieldset { max-width: 640px; }
.accountTotalDisplay, .accountOrderStatus { font-weight: 600; }
#accountLinksWrapper ul, #myAccountGen, #myAccountNotify { list-style: none; padding: 0; }
#accountLinksWrapper li, #myAccountGen li, #myAccountNotify li { margin: 0 0 8px; }
.floatingBox { float: left; width: 47%; margin: 0 3% 1.5rem 0; }
.floatingBox.forward { float: right; margin-right: 0; }
#checkoutShippingDefault .important, .checkoutStepWrapper { color: var(--lpe-color-text-secondary); }
#checkoutConfirmationDefault .orderTotals, #checkoutSuccess .content { margin: 1rem 0; }
address { font-style: normal; line-height: 1.6; color: var(--lpe-color-text-secondary); }
#shippingEstimatorContent, #shippingEstimatorContent fieldset { margin-top: 1rem; }

/* Define pages and EZ-pages */
#ezPageDefault, .ezpage-content, #privacyDefault, #conditionsDefault, #shippingInfo { line-height: 1.75; }
#ezPageDefault img, .ezpage-content img { border-radius: var(--lpe-radius-md); }
#navEZPageNextPrev, #navEZPagesTOCWrapper { margin: 1rem 0; }

/* Site map */
#siteMapList ul { list-style: none; padding-left: 1rem; }

/* Banners */
.banners {
    width: calc(100% - 40px);
    max-width: var(--lpe-container-width);
    margin: 0 auto 24px;
    text-align: center;
}
.site-main .banners, .site-footer .banners { width: auto; }
.banners img { border-radius: var(--lpe-radius-lg); }

/* ========================================
   Footer
   ======================================== */

.site-footer {
    width: calc(100% - 40px);
    max-width: var(--lpe-container-width);
    margin: 0 auto 24px;
    padding: 48px 12px 20px;
    border-radius: 32px;
}
.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
.footer-col { min-width: 0; overflow-wrap: anywhere; }
.footer-title { margin-bottom: .75rem; font-size: .95rem; letter-spacing: -.02em; }
.footer-description, .footer-address, .footer-list, .social-links { font-size: .8rem; color: var(--lpe-color-text-secondary); }
.social-links:empty { display: none; }
.footer-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.footer-list li { margin-bottom: 8px; }
.footer-list a, .social-links a { color: var(--lpe-color-text-secondary); }
.footer-list a:hover, .social-links a:hover { color: var(--lpe-color-accent-purple); }

.footer-ezpages { margin-top: 24px; font-size: .8rem; color: var(--lpe-color-text-secondary); text-align: center; }
.footer-ezpages a { color: var(--lpe-color-text-secondary); }

.footer-bottom {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--lpe-glass-border);
    font-size: .75rem;
    color: var(--lpe-color-text-secondary);
}
.footer-bottom p { margin-bottom: 8px; line-height: 1.5; }
.footer-separator { margin: 0 6px; opacity: .6; }
.legalCopyright a { color: var(--lpe-color-text-secondary); }

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 1024px) {
    :root { --lpe-glass-blur: 15px; }
    .header-inner { flex-wrap: wrap; }
    .site-branding { flex: 1 1 auto; }
    .header-search { order: 5; flex-basis: 100%; }
    .lpe-layout.has-left, .lpe-layout.has-right, .lpe-layout.has-left.has-right { grid-template-columns: minmax(0, 1fr); }
    .columnLeft, .columnRight { order: 2; }
    #navColumnOneWrapper, #navColumnTwoWrapper { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
    .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    :root { --lpe-glass-blur: 10px; }
    .container { padding: 0 1.25rem; }
    .site-header { width: calc(100% - 24px); margin: 12px auto 20px; top: 12px; border-radius: 24px; }
    .site-header > .container { padding: 12px; }
    .header-inner { gap: 8px; }
    .site-branding { flex: 1 1 160px; }
    .header-hero-actions { order: 4; flex-basis: 100%; }
    .header-actions { gap: 5px; }
    .site-description { font-size: .65rem; }
    #navCatTabsWrapper, #navEZPagesTopWrapper, .lpe-layout, .banners,
    .messageStackError, .messageStackWarning, .messageStackSuccess, .messageStackCaution { width: calc(100% - 24px); }
    #navCatTabs ul, #navEZPagesTop { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; }
    #navCatTabs a, #navEZPagesTop a { white-space: nowrap; }
    .hero-section { width: calc(100% - 24px); padding: 24px 0; border-radius: 30px; }
    .hero-content { grid-template-columns: 1fr; gap: 18px; }
    .hero-title { font-size: clamp(1.8rem, 8vw, 2.4rem); }
    .hero-placeholder { width: 96px; }
    .hero-subtitle { font-size: 1rem; }
    .centerColumn { border-radius: 24px; }
    #productMainImage, #cartAdd, #categoryImgListing { float: none; margin: 0 auto 1.5rem; }
    #cartAdd { min-width: 0; }
    label.inputLabel, .inputLabelPayment { display: block; width: auto; }
    .inputLabel + input, .inputLabel + select { width: 100%; }
    .floatingBox, .floatingBox.forward { float: none; width: 100%; margin-right: 0; }
    .lineTitle { width: 60%; }
    .totalBox { width: 38%; }
    .site-footer { width: calc(100% - 24px); padding: 32px 0 16px; }
    .footer-inner { gap: 24px; }
}

@media (max-width: 480px) {
    .footer-inner { grid-template-columns: 1fr; }
    .site-branding { flex-basis: 100%; }
    .header-actions { margin-left: auto; }
    .buttonRow.back, .buttonRow.forward { float: none; margin: .75rem 0; }
    .buttonRow .cssButton, .buttonRow input[type="submit"] { width: 100%; }
}

/* ========================================
   Fallbacks & Accessibility
   ======================================== */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass-surface, .glass-card, .glass-button, .header-action, .menu-toggle,
    .centerColumn, .leftBoxContainer, .rightBoxContainer, #navBreadCrumb,
    #navCatTabs a, #navEZPagesTop a { background: var(--lpe-solid-surface); }
    .glass-button-primary { background: var(--lpe-purple); }
}
@media (prefers-reduced-transparency: reduce) {
    .glass-surface, .glass-card, .glass-button, .header-action, .menu-toggle,
    .centerColumn, .leftBoxContainer, .rightBoxContainer, #navBreadCrumb,
    #navCatTabs a, #navEZPagesTop a {
        background: var(--lpe-solid-surface);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .glass-button-primary { background: var(--lpe-purple); }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .navigation-drawer[open] { animation: none; }
    .glass-button:active, .header-action:active, :is(.centerBoxContentsNew, .centerBoxContentsFeatured, .centerBoxContentsSpecials,
    .centerBoxContentsAlsoPurch, .centerBoxContentsProducts, .categoryListBoxContents, .centerBoxContents):hover { transform: none; }
}

@media print {
    body::before, .site-header, .navigation-drawer, #navCatTabsWrapper, #navEZPagesTopWrapper,
    .columnLeft, .columnRight, .site-footer, .hero-section, .banners { display: none !important; }
    body { background: #fff; color: #000; }
    .centerColumn { box-shadow: none; border: 0; background: #fff; backdrop-filter: none; }
}