/* =========================================
   barberkosmetik — E-Shop Styles
   Extends: style.css design system
   ========================================= */

/* ====== PAGE HERO (Shop/Cart) ====== */
.page-hero{padding:48px 0 40px;background:var(--primary-light);border-bottom:1px solid var(--border)}
.page-hero h1{font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;color:var(--dark);margin-top:12px}
.page-hero p{color:var(--muted);font-size:1rem;margin-top:8px;max-width:640px}
.page-hero--product{padding:32px 0 24px}

/* Breadcrumbs on light backgrounds (shop pages override dark hero) */
.page-hero .breadcrumb a{color:var(--muted)}
.page-hero .breadcrumb a:hover{color:var(--dark)}
.page-hero .breadcrumb .sep{color:var(--border)}
.page-hero .breadcrumb [aria-current]{color:var(--dark)}

/* ====== SHOP LAYOUT ====== */
.shop-layout{display:grid;grid-template-columns:260px 1fr;gap:40px;padding-top:40px;padding-bottom:80px}

/* ====== SIDEBAR ====== */
.shop-sidebar{position:sticky;top:100px;align-self:start;max-height:calc(100vh - 120px);overflow-y:auto;padding-right:8px}
.shop-sidebar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.shop-sidebar-header h3{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--dark)}
.shop-sidebar-close{display:none;background:none;border:none;font-size:1.5rem;color:var(--muted);padding:4px}

/* Filter groups */
.filter-group{padding:14px 0;border-bottom:1px solid var(--border)}
.filter-group:first-of-type{padding-top:4px}
.filter-group:last-of-type{border-bottom:none;padding-bottom:4px}

/* Collapsible toggle header (button for a11y + keyboard support) */
.filter-group-toggle{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;width:100%;padding:4px 0;background:none;border:0;cursor:pointer;-webkit-user-select:none;user-select:none;font-family:inherit;text-align:left}
.filter-group-title{flex:1;min-width:0;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);line-height:1.35}
.filter-group-toggle .filter-chevron{flex:0 0 14px;width:14px;height:14px;margin-top:2px;color:var(--muted);transition:transform .2s}
.filter-group-toggle[aria-expanded="false"] .filter-chevron{transform:rotate(-90deg)}
.filter-group-toggle:hover .filter-group-title{color:var(--dark)}

/* Collapsible body with transition */
.filter-group-body{overflow:hidden;max-height:1200px;transition:max-height .2s ease,margin-top .2s ease;margin-top:10px}
.filter-group-body.collapsed{max-height:0;margin-top:0}

/* Inner scroll on long value lists (brands, collections, finishes, colors) */
.filter-hint{font-size:.72rem;color:var(--muted);margin:0 0 8px;line-height:1.4;font-style:italic}
.filter-list{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
.filter-list--scroll{max-height:280px;overflow-y:auto;padding-right:4px}
.filter-list--scroll::-webkit-scrollbar{width:4px}
.filter-list--scroll::-webkit-scrollbar-track{background:transparent}
.filter-list--scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.filter-list--scroll::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.filter-list--scroll{scrollbar-width:thin;scrollbar-color:var(--border) transparent}

.filter-list a{display:block;padding:6px 10px;font-size:.9rem;color:var(--body);border-radius:var(--radius);transition:background .15s,color .15s}
.filter-list a:hover{background:var(--accent-light);color:var(--dark)}
.filter-list a.active{background:var(--primary);color:var(--white);font-weight:500}

/* Compact check rows */
.filter-check{display:flex;align-items:center;gap:8px;min-height:28px;padding:3px 0;font-size:.88rem;color:var(--body);cursor:pointer}
.filter-check input[type="checkbox"],
.filter-check input[type="radio"]{accent-color:var(--primary);width:15px;height:15px;flex-shrink:0;margin:0}

.filter-color-swatch{width:18px;height:18px;border-radius:50%;border:1px solid var(--border);flex-shrink:0}
.filter-check .filter-label{flex:1;min-width:0}
.filter-check .filter-count{color:var(--muted);font-size:.78rem;font-variant-numeric:tabular-nums;margin-left:auto;padding-left:6px}
.filter-check.is-empty{opacity:.45;cursor:not-allowed}
.filter-check.is-empty .filter-count{display:none}

.filter-price-inputs{display:flex;align-items:center;gap:8px}
.filter-price-inputs input{width:80px;padding:6px 8px;border:1px solid var(--border);border-radius:var(--radius);font-size:.85rem;font-family:var(--font)}
.filter-price-currency{font-size:.85rem;color:var(--muted)}

/* Sticky apply bar — always visible at the bottom of the sidebar */
.filter-apply-wrap{position:sticky;bottom:0;background:var(--white);padding:12px 0 4px;margin-top:8px;box-shadow:0 -6px 12px -8px rgba(0,0,0,.08);z-index:2}
.filter-apply{width:100%;padding:10px;background:var(--primary);color:var(--white);border:none;border-radius:var(--radius);font-size:.875rem;font-weight:500;cursor:pointer;transition:background .2s}
.filter-apply:hover{background:var(--primary-dark)}
.filter-reset{display:block;text-align:center;margin-top:8px;font-size:.85rem;color:var(--muted);transition:color .2s}
.filter-reset:hover{color:var(--error)}

/* Sidebar category list */
.filter-cat-list{display:flex;flex-direction:column;gap:1px}
.filter-cat-link{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;font-size:.88rem;color:var(--body);border-radius:var(--radius);transition:background .15s,color .15s;text-decoration:none}
.filter-cat-link:hover{background:var(--primary-light);color:var(--dark)}
.filter-cat-link.active{background:var(--primary);color:var(--white);font-weight:500}
.filter-cat-count{font-size:.75rem;color:var(--muted);font-weight:400}
.filter-cat-link.active .filter-cat-count{color:rgba(255,255,255,.7)}

/* "← Všetky produkty" link — shown on category pages above the categories
   checkbox list. Clicking navigates to /shop/ root, removing the URL-path
   category enforcement (the only way to "uncheck" the current category). */
.filter-cat-all-link{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;padding:8px 12px;font-size:.85rem;color:var(--dark);background:var(--primary-light);border-radius:var(--radius);text-decoration:none;font-weight:500;transition:background .15s}
.filter-cat-all-link:hover{background:var(--primary);color:var(--white)}

/* Current category checkbox — disabled (URL path enforces it). Visually clear
   that this row is non-interactive, with the title attribute explaining why. */
.filter-check--current{cursor:default;opacity:.85}
.filter-check--current .filter-label{font-weight:600;color:var(--dark)}
.filter-check--current input[disabled]{cursor:default}

/* ====== SHOP TOOLBAR ====== */
.shop-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:16px}
.shop-toolbar-left{display:flex;align-items:center;gap:16px}
.shop-toolbar-right{display:flex;align-items:center;gap:12px}

.shop-filter-toggle{display:none;align-items:center;gap:6px;padding:8px 14px;background:var(--primary-light);border:1px solid var(--border);border-radius:var(--radius);font-size:.85rem;color:var(--body);cursor:pointer}
.shop-count{font-size:.85rem;color:var(--muted)}

.shop-sort{padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius);font-size:.85rem;font-family:var(--font);color:var(--body);background:var(--white);cursor:pointer}

/* ====== PRODUCT GRID ====== */
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.shop-grid--4{grid-template-columns:repeat(4,1fr)}

/* ====== PRODUCT CARD ====== */
.shop-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:box-shadow .2s,transform .15s}
.shop-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.shop-card--oos{opacity:.7}

.shop-card-img{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:#FAFAFA}
.shop-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.shop-card:hover .shop-card-img img{transform:scale(1.04)}

.shop-badge{position:absolute;top:10px;left:10px;padding:4px 10px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;border-radius:var(--radius);z-index:1}
.shop-badge--sale{background:var(--error);color:var(--white)}
.shop-badge--oos{background:var(--muted);color:var(--white)}
.shop-badge--new{background:var(--primary);color:var(--white)}

.shop-card-body{padding:16px}
.shop-card-brand{display:block;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:4px}
.shop-card-title{display:block;font-size:.95rem;font-weight:500;color:var(--dark);line-height:1.35;margin-bottom:8px;transition:color .2s}
.shop-card-title:hover{color:var(--primary)}

.shop-card-price{display:flex;align-items:baseline;gap:8px;margin-bottom:12px;min-height:24px}
.price-old{font-size:.85rem;color:var(--muted);text-decoration:line-through}
.price-current{font-size:1.05rem;font-weight:700;color:var(--dark)}
.price-quote{font-size:.85rem;font-weight:500;color:var(--orange-cta)}

.shop-card-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px;background:var(--primary);color:var(--white);border:none;border-radius:var(--radius);font-size:.85rem;font-weight:500;cursor:pointer;transition:background .2s;text-align:center}
.shop-card-btn:hover{background:var(--primary-dark)}
.shop-card-btn--quote{background:transparent;color:var(--orange-cta);border:1.5px solid var(--orange-cta)}
.shop-card-btn--quote:hover{background:var(--orange-cta);color:var(--white)}

/* ====== SHOP EMPTY ====== */
.shop-empty{text-align:center;padding:80px 20px}
.shop-empty svg{margin:0 auto 20px}
.shop-empty p{color:var(--muted);font-size:1rem;margin-bottom:20px}

/* ====== PAGINATION ====== */
/* `flex-wrap: wrap` is a defense-in-depth fallback — even if the icon-only
   mobile mode somehow doesn't apply, the row will wrap to multiple lines
   instead of overflowing the viewport (which conflicted with body's
   overflow-x:hidden and produced the "page moves in all directions" bug
   reported on /shop/page/3/). */
.shop-pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:48px;padding-top:32px;border-top:1px solid var(--border)}
.shop-page-link{display:flex;align-items:center;justify-content:center;gap:6px;min-width:36px;height:36px;padding:0 10px;font-size:.875rem;color:var(--body);border:1px solid var(--border);border-radius:var(--radius);transition:all .15s;text-decoration:none}
.shop-page-link:hover{background:var(--primary-light);border-color:var(--primary)}
.shop-page-link.active{background:var(--primary);color:var(--white);border-color:var(--primary);font-weight:600}
.shop-page-dots{display:flex;align-items:center;justify-content:center;min-width:36px;height:36px;color:var(--muted);font-size:.875rem}

/* ====== PRODUCT PAGE ====== */
.product-page{padding-bottom:80px}
.product-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;padding:40px 0 56px}
.product-gallery,.product-info{min-width:0}

/* Gallery */
.product-gallery-main{position:relative;aspect-ratio:1;max-width:100%;overflow:hidden;background:#FAFAFA;border-radius:var(--radius-lg);margin-bottom:12px}
.product-gallery-main img{width:100%;height:100%;object-fit:contain;object-position:center}
.product-gallery-main .shop-badge{top:16px;left:16px;font-size:.75rem;padding:5px 12px}

.product-gallery-thumbs{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:4px}
.product-thumb{width:72px;height:72px;flex:0 0 72px;border:2px solid transparent;border-radius:var(--radius);overflow:hidden;cursor:pointer;background:none;padding:0;transition:border-color .2s}
.product-thumb.active{border-color:var(--primary)}
.product-thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* Product info */
.product-brand{display:block;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:6px}
.product-title{font-family:var(--font-display);font-size:clamp(1.4rem,2.5vw,1.8rem);font-weight:700;color:var(--dark);line-height:1.25;margin-bottom:8px}
.product-sku{display:block;font-size:.8rem;color:var(--light-muted);margin-bottom:16px}

.product-price-block{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.product-price-old{font-size:1rem;color:var(--muted)}
.product-price-old .price-old-val{text-decoration:line-through}
.product-price-current .price-current-val{font-size:1.6rem;font-weight:700;color:var(--dark)}
.product-price-vat{font-size:.75rem;color:var(--light-muted)}
.product-price-unit{font-size:.85rem;color:var(--muted);font-weight:500;margin-left:6px}
.product-price-quote{font-size:1.2rem;font-weight:600;color:var(--orange-cta)}

/* Stock */
.product-stock{display:flex;align-items:center;gap:6px;font-size:.85rem;font-weight:500;margin:14px 0 20px;padding:4px 0}
.product-stock::before{content:'';width:8px;height:8px;border-radius:50%}
.product-stock--in_stock::before{background:var(--success)}
.product-stock--in_stock{color:var(--success)}
.product-stock--low_stock::before{background:#f59e0b}
.product-stock--low_stock{color:#f59e0b}
.product-stock--out_of_stock::before,.product-stock--discontinued::before{background:var(--error)}
.product-stock--out_of_stock,.product-stock--discontinued{color:var(--error)}
.product-stock--on_backorder::before,.product-stock--preorder::before{background:var(--muted)}
.product-stock--on_backorder,.product-stock--preorder{color:var(--muted)}

/* Variants */
.product-variants{margin-bottom:20px}
.product-variant-group{margin-bottom:12px}
.product-variant-label{display:block;font-size:.8rem;font-weight:600;color:var(--dark);margin-bottom:6px}
.product-variant-options{display:flex;flex-wrap:wrap;gap:6px}
.variant-option{padding:6px 14px;border:1.5px solid var(--border);border-radius:var(--radius);font-size:.85rem;color:var(--body);background:var(--white);cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:6px}
.variant-option:hover{border-color:var(--primary)}
.variant-option.active{border-color:var(--primary);background:var(--primary);color:var(--white)}
.variant-option.disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through;background:var(--bg-light);border-color:var(--border)}
.variant-option.disabled:hover{border-color:var(--border)}
.variant-color-dot{width:16px;height:16px;border-radius:50%;border:1px solid var(--border)}

/* Quantity input */
.product-qty{display:inline-flex;align-items:center;border:1.5px solid var(--border);border-radius:var(--radius);overflow:hidden}
.product-qty--sm{border-width:1px}
.product-qty--sm .qty-btn{width:28px;height:28px;font-size:.85rem}
.product-qty--sm .qty-input{width:36px;height:28px;font-size:.8rem}
.qty-btn{width:36px;height:38px;background:var(--primary-light);border:none;font-size:1rem;color:var(--body);cursor:pointer;transition:background .15s;display:flex;align-items:center;justify-content:center}
.qty-btn:hover{background:var(--accent-light)}
.qty-input{width:48px;height:38px;border:none;text-align:center;font-size:.9rem;font-family:var(--font);-moz-appearance:textfield}
.qty-input::-webkit-outer-spin-button,.qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Add to cart row */
.product-add-row{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.product-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 28px;border-radius:var(--radius);font-size:.95rem;font-weight:500;cursor:pointer;transition:all .2s;border:none;text-align:center}
.product-btn--cart{background:var(--primary);color:var(--white)}
.product-btn--cart:hover{background:var(--primary-dark)}
.product-btn--quote{background:var(--orange-cta);color:var(--white);border:none}
.product-btn--quote:hover{background:#a8884f}

.product-short-desc{font-size:.9rem;color:var(--body);line-height:1.7;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--border)}

/* Meta */
.product-meta-list{display:flex;flex-direction:column;gap:6px}
.product-meta-item{font-size:.85rem;color:var(--muted);display:flex;gap:6px}
.product-meta-key{font-weight:600;color:var(--body)}
.product-meta-item a{color:var(--primary);transition:color .2s}
.product-meta-item a:hover{color:var(--orange-cta)}

/* ====== PRODUCT TABS ====== */
.product-tabs{border-top:1px solid var(--border);padding-top:40px;margin-bottom:56px}
.product-tabs-nav{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:24px}
.product-tab-btn{padding:12px 24px;background:none;border:none;font-size:.95rem;font-weight:500;color:var(--muted);cursor:pointer;position:relative;transition:color .2s}
.product-tab-btn::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;background:transparent;transition:background .2s}
.product-tab-btn:hover{color:var(--dark)}
.product-tab-btn.active{color:var(--dark)}
.product-tab-btn.active::after{background:var(--primary)}

.product-tab-panel{display:none}
.product-tab-panel.active{display:block}

.product-tab-panel .prose{font-size:.95rem;color:var(--body);line-height:1.8;max-width:800px}
.product-tab-panel .prose p{margin-bottom:12px}

.product-specs-table{width:100%;max-width:700px;border-collapse:collapse}
.product-specs-table tr{border-bottom:1px solid var(--border)}
.product-specs-table th{text-align:left;padding:12px 16px 12px 0;font-size:.875rem;font-weight:600;color:var(--dark);width:200px;vertical-align:top}
.product-specs-table td{padding:12px 0;font-size:.875rem;color:var(--body);line-height:1.7}
.product-specs-table .spec-value{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.product-specs-table .spec-swatch{display:inline-block;width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.12);flex-shrink:0}

/* ====== QUOTE FORM ====== */
.product-quote-section{border-top:1px solid var(--border);padding-top:48px;margin-bottom:56px;max-width:720px}
.product-quote-section h2{font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:var(--dark);margin-bottom:8px}
.product-quote-subtitle{color:var(--muted);font-size:.95rem;margin-bottom:24px}
.product-quote-context{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;background:#f8f6f2;border-left:3px solid var(--gold,#c9a661);padding:14px 18px;border-radius:6px;margin-bottom:24px;font-size:.92rem}
.product-quote-context__label{color:var(--muted);font-weight:500}
.product-quote-context__product{color:var(--dark);font-family:var(--font-display);font-size:1.05rem;font-weight:600}
.product-quote-context__sku{color:var(--muted);font-size:.85rem}
.product-quote-context__sku code{background:#fff;border:1px solid var(--border);border-radius:4px;padding:2px 6px;font-family:'SF Mono',Monaco,Consolas,monospace;color:var(--dark)}

.product-quote-form .form-row{display:grid;gap:16px;margin-bottom:16px}
.product-quote-form .form-row--2{grid-template-columns:1fr 1fr}
.product-quote-form .form-group{display:flex;flex-direction:column;gap:4px}
.product-quote-form label{font-size:.8rem;font-weight:600;color:var(--dark)}
.product-quote-form input,.product-quote-form textarea,.product-quote-form select{padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--radius);font-size:.9rem;font-family:var(--font);transition:border-color .2s}
.product-quote-form input:focus,.product-quote-form textarea:focus{border-color:var(--primary);outline:none}

/* Alerts */
.alert{padding:14px 18px;border-radius:var(--radius);font-size:.9rem;margin-bottom:20px}
.alert--success{background:#f0fdf4;color:var(--success);border:1px solid #bbf7d0}
.alert--error{background:#fef2f2;color:var(--error);border:1px solid #fecaca}

/* ====== RELATED PRODUCTS ====== */
.product-related{padding-top:48px;border-top:1px solid var(--border)}
.product-related h2{font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:var(--dark);margin-bottom:24px}

/* ====== CART PAGE ====== */
.cart-page{padding:40px 0 80px}

.cart-empty{text-align:center;padding:80px 20px}
.cart-empty svg{margin:0 auto 16px}
.cart-empty h2{font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:var(--dark);margin-bottom:8px}
.cart-empty p{color:var(--muted);font-size:.95rem;margin-bottom:24px}

.cart-layout{display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:start}

/* Cart items table */
.cart-header-row{display:grid;grid-template-columns:2fr 1fr 120px 1fr 40px;gap:12px;padding:0 0 12px;border-bottom:2px solid var(--border);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}

.cart-item{display:grid;grid-template-columns:2fr 1fr 120px 1fr 40px;gap:12px;align-items:center;padding:20px 0;border-bottom:1px solid var(--border)}

.cart-col-product{display:flex;gap:14px;align-items:center}
.cart-item-img{width:80px;height:80px;flex-shrink:0;overflow:hidden;border-radius:var(--radius);background:var(--primary-light)}
.cart-item-img img{width:100%;height:100%;object-fit:cover}
.cart-item-name{display:block;font-size:.9rem;font-weight:500;color:var(--dark);transition:color .2s}
.cart-item-name:hover{color:var(--primary)}
.cart-item-sku{font-size:.75rem;color:var(--light-muted);margin-top:2px}

.cart-col-price,.cart-col-total{font-size:.9rem;font-weight:500;color:var(--dark)}
.cart-col-total{font-weight:600}

.cart-remove-btn{background:none;border:none;padding:4px;color:var(--light-muted);cursor:pointer;transition:color .2s}
.cart-remove-btn:hover{color:var(--error)}

/* Cart summary */
.cart-summary{background:var(--primary-light);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;position:sticky;top:100px}
.cart-summary h3{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--dark);margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--border)}

.cart-summary-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:.9rem;color:var(--body)}
.cart-summary-row--note{border-bottom:1px solid var(--border);padding-bottom:14px;margin-bottom:8px}
.cart-summary-row--note small{color:var(--muted);font-size:.8rem}
.cart-summary-total{font-size:1.1rem;font-weight:700;color:var(--dark);padding:14px 0;border-top:2px solid var(--border);margin-top:8px}

.cart-checkout-btn{width:100%;margin-top:20px;padding:14px;font-size:1rem}
.cart-continue-link{display:block;text-align:center;margin-top:12px;font-size:.85rem;color:var(--muted);transition:color .2s}
.cart-continue-link:hover{color:var(--primary)}

/* ====== ACCOUNT PAGES ====== */
.account-page{padding-top:40px;padding-bottom:80px}
.account-layout{display:grid;grid-template-columns:240px 1fr;gap:40px}

.account-nav{display:flex;flex-direction:column;gap:2px}
.account-nav a{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:.9rem;color:var(--body);border-radius:var(--radius);transition:background .15s,color .15s}
.account-nav a:hover{background:var(--accent-light)}
.account-nav a.active{background:var(--primary);color:var(--white);font-weight:500}
.account-nav a svg{width:18px;height:18px;flex-shrink:0}

.account-content{min-height:400px}
.account-section-title{font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:var(--dark);margin-bottom:24px}

/* ====== ACCOUNT — ORDERS LIST + DETAIL (2026-05-05 redesign) ====== */
/* Shared back link, empty state, status pills, summary card, etc. */
.account-back-link{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;color:var(--muted);text-decoration:none;margin-bottom:18px;transition:color .15s}
.account-back-link:hover{color:var(--primary)}

.account-empty{text-align:center;padding:72px 20px;color:var(--muted);background:#fafaf8;border:1px dashed var(--border);border-radius:10px}
.account-empty svg{width:56px;height:56px;color:#cbb78a;display:block;margin:0 auto 18px}
.account-empty h3{font-family:var(--font-display);font-size:1.3rem;color:var(--dark);margin:0 0 6px}
.account-empty p{margin:0 0 22px;font-size:.95rem}
.account-cta-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 24px;background:var(--primary);color:var(--white);border-radius:var(--radius);font-size:.85rem;font-weight:600;text-decoration:none;letter-spacing:.04em;transition:background .15s}
.account-cta-btn:hover{background:var(--primary-dark)}

/* Status pills — single source of truth for both list and detail. */
.account-order-status{display:inline-block;padding:5px 12px;border-radius:999px;font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;line-height:1.2;white-space:nowrap}
.account-order-status--pending{background:#fef3c7;color:#92400e}
.account-order-status--confirmed{background:#dbeafe;color:#1e40af}
.account-order-status--awaiting_payment{background:#fef3c7;color:#92400e}
.account-order-status--processing{background:#ede9fe;color:#6d28d9}
.account-order-status--shipped{background:#cffafe;color:#155e75}
.account-order-status--delivered{background:#dcfce7;color:#166534}
.account-order-status--cancelled{background:#fee2e2;color:#991b1b}
.account-order-status--refunded{background:#fee2e2;color:#991b1b}
.account-order-status--partially_refunded{background:#fef3c7;color:#92400e}

/* Summary stats above the order list */
.account-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:24px}
.account-summary__item{padding:18px 20px;background:var(--accent-light,#f8f4ec);border-radius:10px;border:1px solid rgba(201,162,89,.18)}
.account-summary__label{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:6px}
.account-summary__value{display:block;font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:var(--dark)}

/* Card grid for orders list. 1 col mobile, 2 col desktop. */
.account-orders-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.account-order-card{display:flex;flex-direction:column;padding:18px 20px;background:#fff;border:1px solid var(--border);border-radius:10px;text-decoration:none;color:inherit;transition:border-color .2s,transform .2s,box-shadow .2s}
.account-order-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 8px 22px -10px rgba(0,0,0,.12)}
.account-order-card__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.account-order-card__number{font-family:var(--font-display);font-size:1.05rem;font-weight:600;color:var(--dark)}
.account-order-card__date{font-size:.8rem;color:var(--muted);margin-bottom:14px}
.account-order-card__body{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.account-order-card__thumbs{display:flex;gap:6px}
.account-order-thumb{width:46px;height:46px;border-radius:6px;background:#fafaf8;border:1px solid var(--border);overflow:hidden;display:flex;align-items:center;justify-content:center}
.account-order-thumb img{width:100%;height:100%;object-fit:cover}
.account-order-thumb--placeholder svg{width:22px;height:22px;color:#cbb78a}
.account-order-thumb--more{font-size:.78rem;font-weight:600;color:var(--muted);background:#f4ede0}
.account-order-card__meta{text-align:right;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.account-order-card__items{font-size:.78rem;color:var(--muted)}
.account-order-card__total{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--dark)}
.account-order-card__footer{margin-top:12px;font-size:.82rem;color:var(--primary);font-weight:600}

/* ── Order detail page ─────────────────────────────────────── */
.account-order-banner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:16px 20px;background:#fafaf8;border:1px solid var(--border);border-radius:10px;margin-bottom:24px}
.account-order-banner__main{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.account-order-banner__pay{display:inline-block;padding:4px 10px;border-radius:999px;font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.account-order-banner__pay--unpaid{background:#fee2e2;color:#991b1b}
.account-order-banner__pay--paid{background:#dcfce7;color:#166534}
.account-order-banner__pay--refunded{background:#e2e8f0;color:#475569}
.account-order-banner__date{font-size:.85rem;color:var(--muted)}

/* 2-column layout — main + sidebar. Stacks on mobile. */
.account-order-detail{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;margin-bottom:32px}

.account-order-section-title{font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--dark);margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.account-order-section-title--small{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-family:var(--font);font-weight:600;border:none;padding-bottom:0;margin-bottom:8px}

/* Items list with thumbnails */
.account-order-items{list-style:none;padding:0;margin:0 0 20px}
.account-order-item{display:grid;grid-template-columns:64px 1fr auto auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border)}
.account-order-item:last-child{border-bottom:none}
.account-order-item__thumb{width:64px;height:64px;border-radius:6px;background:#fafaf8;border:1px solid var(--border);overflow:hidden;display:flex;align-items:center;justify-content:center}
.account-order-item__thumb img{width:100%;height:100%;object-fit:cover}
.account-order-item__thumb svg{width:26px;height:26px;color:#cbb78a}
.account-order-item__info{display:flex;flex-direction:column;gap:2px;min-width:0}
.account-order-item__name{font-weight:600;color:var(--dark);text-decoration:none;font-size:.95rem;line-height:1.3}
a.account-order-item__name:hover{color:var(--primary)}
.account-order-item__sku{font-size:.78rem;color:var(--muted)}
.account-order-item__qty{font-size:.85rem;color:var(--muted);white-space:nowrap}
.account-order-item__total{font-weight:700;font-size:.95rem;color:var(--dark);white-space:nowrap}

/* Totals block */
.account-order-totals{margin-left:auto;max-width:340px;padding:16px 20px;background:#fafaf8;border-radius:10px}
.account-order-totals__row{display:flex;justify-content:space-between;padding:5px 0;font-size:.9rem}
.account-order-totals__row--discount{color:#16a34a}
.account-order-totals__row--grand{padding:10px 0 4px;border-top:1px solid var(--border);margin-top:6px;font-size:1.05rem;font-weight:700;color:var(--dark)}
.account-order-totals__row--vat{font-size:.78rem;color:var(--muted)}

/* Sidebar cards */
.account-order-detail__sidebar{display:flex;flex-direction:column;gap:16px}
.account-order-side-card{padding:18px 20px;background:#fff;border:1px solid var(--border);border-radius:10px}
.account-order-side-card--invoice{background:#fafaf8}
.account-order-side-card__title{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600;margin:0 0 6px}
.account-order-side-card__title--mt{margin-top:14px}
.account-order-side-card__value{font-size:.92rem;color:var(--dark);margin:0;line-height:1.4}
.account-order-side-card__value--mono{font-family:'SF Mono',Monaco,Consolas,monospace;font-size:.88rem;background:#fafaf8;padding:6px 10px;border-radius:4px;display:inline-block;border:1px solid var(--border)}
.account-order-side-card__hint{display:block;font-size:.78rem;color:var(--muted);margin-top:8px}

.account-order-invoice-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;background:var(--primary);color:var(--white);border-radius:var(--radius);font-size:.85rem;font-weight:600;text-decoration:none;transition:background .15s;margin-top:6px}
.account-order-invoice-btn:hover{background:var(--primary-dark)}
.account-order-invoice-btn svg{flex-shrink:0}

/* Visual timeline — vertical with connecting line */
.account-order-timeline{list-style:none;padding:0;margin:0;position:relative}
.account-order-timeline::before{content:'';position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--border)}
.account-order-timeline__item{position:relative;padding:0 0 14px 26px}
.account-order-timeline__item:last-child{padding-bottom:0}
.account-order-timeline__dot{position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid #cbb78a;z-index:1}
.account-order-timeline__item--cancelled .account-order-timeline__dot,
.account-order-timeline__item--refunded .account-order-timeline__dot{border-color:#dc2626}
.account-order-timeline__item--delivered .account-order-timeline__dot,
.account-order-timeline__item--shipped .account-order-timeline__dot{border-color:#16a34a}
.account-order-timeline__item--processing .account-order-timeline__dot{border-color:#8b5cf6}
.account-order-timeline__body{display:flex;flex-direction:column;gap:2px;font-size:.88rem}
.account-order-timeline__body strong{font-weight:600;color:var(--dark)}
.account-order-timeline__date{color:var(--muted);font-size:.78rem}
.account-order-timeline__note{color:var(--muted);font-size:.82rem;font-style:italic;margin-top:2px}

/* Addresses — 2 col desktop, 1 col mobile */
.account-order-addresses{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px;padding-top:24px;border-top:1px solid var(--border)}
.account-order-address__name{font-weight:600;margin:0 0 4px;color:var(--dark)}
.account-order-address__line{font-size:.9rem;color:var(--body);margin:2px 0;line-height:1.5}
.account-order-address__meta{font-size:.78rem;color:var(--muted);margin:6px 0 0}

.account-order-note{background:#fffbeb;border:1px solid #fcd34d;border-radius:8px;padding:14px 18px;margin-bottom:24px}
.account-order-note strong{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:#92400e}
.account-order-note p{font-size:.92rem;margin:6px 0 0;color:var(--dark);line-height:1.5}

.account-order-help{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:16px 20px;background:var(--accent-light,#f8f4ec);border-radius:10px;font-size:.9rem;color:var(--dark)}
.account-order-help a{color:var(--primary);font-weight:600;text-decoration:none}
.account-order-help a:hover{text-decoration:underline}

/* Mobile responsive overrides */
@media(max-width:880px){
  .account-order-detail{grid-template-columns:1fr}
  .account-order-addresses{grid-template-columns:1fr}
}
@media(max-width:640px){
  .account-orders-grid{grid-template-columns:1fr}
  .account-order-item{grid-template-columns:52px 1fr;grid-template-rows:auto auto;gap:10px}
  .account-order-item__thumb{width:52px;height:52px}
  .account-order-item__qty{grid-column:2;font-size:.8rem;padding-top:4px}
  .account-order-item__total{grid-column:1 / -1;text-align:right;border-top:1px dashed var(--border);padding-top:6px;margin-top:4px}
  .account-order-totals{max-width:none}
  .account-order-banner{flex-direction:column;align-items:flex-start}
  .account-summary{grid-template-columns:1fr 1fr}
  .account-summary__value{font-size:1.15rem}
}

/* Auth forms */
.auth-page{max-width:440px;margin:0 auto;padding:40px 32px 80px}
.auth-title{font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:var(--dark);text-align:center;margin-bottom:8px}
.auth-subtitle{text-align:center;color:var(--muted);font-size:.95rem;margin-bottom:32px}

.auth-form .form-group{margin-bottom:16px;display:flex;flex-direction:column;gap:4px}
.auth-form label{font-size:.8rem;font-weight:600;color:var(--dark)}
.auth-form input{padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--radius);font-size:.9rem;font-family:var(--font);transition:border-color .2s}
.auth-form input:focus{border-color:var(--primary);outline:none}
.auth-form .form-row--2{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.auth-submit{width:100%;padding:13px;background:var(--primary);color:var(--white);border:none;border-radius:var(--radius);font-size:.95rem;font-weight:500;cursor:pointer;transition:background .2s;margin-top:8px}
.auth-submit:hover{background:var(--primary-dark)}

.auth-alt{text-align:center;margin-top:20px;font-size:.875rem;color:var(--muted)}
.auth-alt a{color:var(--primary);font-weight:500;transition:color .2s}
.auth-alt a:hover{color:var(--orange-cta)}

.auth-forgot{display:block;text-align:right;font-size:.8rem;color:var(--muted);margin-top:-8px;margin-bottom:16px;transition:color .2s}
.auth-forgot:hover{color:var(--primary)}

/* ====== CHECKOUT ====== */
.checkout-page{padding-top:40px;padding-bottom:80px}
.checkout-layout{display:grid;grid-template-columns:1fr 400px;gap:48px;align-items:start}

.checkout-section{margin-bottom:32px}
.checkout-section h2{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--dark);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}

.checkout-form .form-row{display:grid;gap:16px;margin-bottom:16px}
.checkout-form .form-row--2{grid-template-columns:1fr 1fr}
.checkout-form .form-row--3{grid-template-columns:1fr 1fr 1fr}
.checkout-form .form-group{display:flex;flex-direction:column;gap:4px}
.checkout-form label{font-size:.8rem;font-weight:600;color:var(--dark)}
.checkout-form input,.checkout-form select,.checkout-form textarea{padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--radius);font-size:.9rem;font-family:var(--font);transition:border-color .2s}
.checkout-form input:focus,.checkout-form select:focus,.checkout-form textarea:focus{border-color:var(--primary);outline:none}

/* Checkout custom checkbox (create account + different shipping) */
.checkout-check{display:inline-flex;align-items:flex-start;gap:12px;cursor:pointer;user-select:none;padding:4px 0;position:relative;line-height:1.4}
.checkout-check input[type=checkbox]{position:absolute;width:1px;height:1px;opacity:0;margin:0;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}
.checkout-check__box{flex:0 0 20px;width:20px;height:20px;margin-top:1px;border:1.5px solid var(--border);border-radius:5px;background:#fff;display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s,background-color .15s,box-shadow .15s;position:relative}
.checkout-check__box::after{content:"";width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px);opacity:0;transition:opacity .15s}
.checkout-check:hover .checkout-check__box{border-color:var(--primary)}
.checkout-check input:checked ~ .checkout-check__box{background:var(--primary);border-color:var(--primary)}
.checkout-check input:checked ~ .checkout-check__box::after{opacity:1}
.checkout-check input:focus-visible ~ .checkout-check__box{box-shadow:0 0 0 3px rgba(138,126,114,.25);border-color:var(--primary)}
.checkout-check__text{font-size:.9rem;font-weight:500;color:var(--dark)}
.checkout-create-account{margin-top:8px}
.checkout-create-account__hint{font-size:.78rem;color:var(--muted,#7A6E68);margin:6px 0 0 32px;line-height:1.5}

/* Shipping methods */
.shipping-options{display:flex;flex-direction:column;gap:8px}
.shipping-option{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1.5px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:border-color .15s}
.shipping-option:hover{border-color:var(--primary)}
.shipping-option.active{border-color:var(--primary);background:rgba(55,58,62,.03)}
.shipping-option input{accent-color:var(--primary);width:18px;height:18px;flex-shrink:0}
.shipping-option-info{flex:1}
.shipping-option-name{font-size:.9rem;font-weight:500;color:var(--dark)}
.shipping-option-desc{font-size:.8rem;color:var(--muted)}
.shipping-option-price{font-size:.9rem;font-weight:600;color:var(--dark)}

/* Checkout summary */
.checkout-summary{background:var(--primary-light);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;position:sticky;top:100px}
.checkout-summary h3{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--dark);margin-bottom:16px}

.checkout-summary-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.checkout-summary-item:last-child{border-bottom:none}
.checkout-summary-img{width:56px;height:56px;flex-shrink:0;border-radius:var(--radius);overflow:hidden;background:var(--white)}
.checkout-summary-img img{width:100%;height:100%;object-fit:cover}
.checkout-summary-info{flex:1;font-size:.85rem}
.checkout-summary-name{color:var(--dark);font-weight:500}
.checkout-summary-qty{color:var(--muted);font-size:.8rem}
.checkout-summary-price{font-size:.85rem;font-weight:600;color:var(--dark);white-space:nowrap}

.checkout-totals{margin-top:16px;padding-top:16px;border-top:2px solid var(--border)}
.checkout-totals-row{display:flex;justify-content:space-between;padding:4px 0;font-size:.9rem;color:var(--body)}
.checkout-totals-total{font-size:1.15rem;font-weight:700;color:var(--dark);padding-top:10px;margin-top:8px;border-top:2px solid var(--border)}

.checkout-submit{width:100%;padding:14px;background:var(--primary);color:var(--white);border:none;border-radius:var(--radius);font-size:1rem;font-weight:500;cursor:pointer;transition:background .2s;margin-top:20px}
.checkout-submit:hover{background:var(--primary-dark)}

/* ====== MINI CART POPUP ====== */
.mini-cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:5000;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.mini-cart-overlay.open{opacity:1;visibility:visible}

.mini-cart{position:fixed;top:0;right:0;bottom:0;width:400px;max-width:90vw;background:var(--white);z-index:5001;transform:translateX(100%);transition:transform .3s ease;display:flex;flex-direction:column;box-shadow:-4px 0 24px rgba(0,0,0,.1)}
.mini-cart.open{transform:translateX(0)}

.mini-cart-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border)}
.mini-cart-header h3{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--dark)}
.mini-cart-close{background:none;border:none;font-size:1.4rem;color:var(--muted);cursor:pointer;padding:4px}

.mini-cart-items{flex:1;overflow-y:auto;padding:16px 24px}
.mini-cart-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.mini-cart-item-img{width:56px;height:56px;flex-shrink:0;border-radius:var(--radius);overflow:hidden;background:var(--primary-light)}
.mini-cart-item-img img{width:100%;height:100%;object-fit:cover}
.mini-cart-item-info{flex:1}
.mini-cart-item-name{font-size:.85rem;font-weight:500;color:var(--dark);display:block;margin-bottom:2px}
.mini-cart-item-price{font-size:.8rem;color:var(--muted)}
.mini-cart-item-remove{background:none;border:none;color:var(--light-muted);cursor:pointer;padding:2px}
.mini-cart-item-remove:hover{color:var(--error)}

.mini-cart-footer{padding:20px 24px;border-top:1px solid var(--border)}
.mini-cart-total{display:flex;justify-content:space-between;font-size:1rem;font-weight:600;color:var(--dark);margin-bottom:16px}
.mini-cart-actions{display:flex;flex-direction:column;gap:8px}
.mini-cart-actions .btn-cart{display:block;text-align:center;padding:12px;border-radius:var(--radius);font-size:.9rem;font-weight:500;transition:all .2s}
.mini-cart-actions .btn-checkout{background:var(--primary);color:var(--white)}
.mini-cart-actions .btn-checkout:hover{background:var(--primary-dark)}
.mini-cart-actions .btn-view-cart{background:transparent;color:var(--body);border:1.5px solid var(--border)}
.mini-cart-actions .btn-view-cart:hover{border-color:var(--primary)}

.mini-cart-empty{text-align:center;padding:40px 20px;color:var(--muted);font-size:.9rem}

/* ====== RESPONSIVE ====== */
@media(max-width:1024px){
  .shop-layout{grid-template-columns:1fr}
  /* Mobile filter drawer — textbook flex column with EXPLICIT viewport height.
     Why explicit `height: 100dvh` (and `100vh` fallback) instead of `top:0; bottom:0`?
     iOS Chrome/Safari have a known bug where a `position: fixed` element with
     `top:0; bottom:0` and no in-flow content (because children are absolutely
     positioned, or content overflows hidden) computes to its in-flow content's
     height — i.e. just the header — leaving everything below it invisible.
     `100dvh` (dynamic viewport height) accounts for the address bar showing/
     hiding on iOS, which is exactly what we want for a full-screen drawer. */
  .shop-sidebar{display:none;position:fixed;top:0;left:0;width:300px;max-width:85vw;height:100vh;height:100dvh;z-index:4000;background:#fff;box-shadow:var(--shadow-lg);overflow:hidden;flex-direction:column;max-height:none}
  .shop-sidebar.open{display:flex}
  .shop-sidebar-header{padding:20px 20px 14px;margin:0;flex:0 0 auto}
  .shop-sidebar-close{display:block}
  .shop-filter-toggle{display:flex}
  .shop-overlay{position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:3999;display:none}
  .shop-overlay.open{display:block}
  /* Form is the second flex child, takes remaining height. Inside form a 2nd
     flex column splits scroll-area (grows) + apply-wrap (auto, pinned bottom).
     `min-height: 0` on every flex container is required for nested overflow
     to scroll properly instead of pushing the parent past its bounds. */
  .shop-sidebar > form{flex:1 1 auto;min-height:0;margin:0;display:flex;flex-direction:column;overflow:hidden}
  .shop-sidebar .filter-scroll-area{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 20px 12px}
  .shop-sidebar .filter-apply-wrap{flex:0 0 auto;position:static;margin:0;padding:14px 20px calc(14px + env(safe-area-inset-bottom,0));background:#fff;border-top:1px solid var(--border);box-shadow:0 -6px 12px -8px rgba(0,0,0,.08);z-index:2}

  .product-top{grid-template-columns:1fr;gap:32px}
  .shop-grid{grid-template-columns:repeat(2,1fr)}
  .shop-grid--4{grid-template-columns:repeat(2,1fr)}

  .cart-layout{grid-template-columns:1fr}
  .cart-header-row{display:none}
  .cart-item{grid-template-columns:auto 1fr auto;gap:12px;align-items:start}
  .cart-col-price,.cart-col-qty,.cart-col-total{grid-column:2}
  .cart-col-remove{grid-row:1;grid-column:3}

  .checkout-layout{grid-template-columns:1fr}
  .account-layout{grid-template-columns:1fr}
}

@media(max-width:640px){
  .shop-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .shop-grid--4{grid-template-columns:repeat(2,1fr)}
  .shop-card-body{padding:12px}
  .shop-card-title{font-size:.85rem}

  /* Stack qty selector + Add to cart vertically. inline-flex on .product-qty
     wouldn't stretch in the parent's column-stretch — switch to flex + width:100%
     so the qty becomes a clean full-width strip with bigger touch targets. */
  .product-add-row{flex-direction:column;align-items:stretch;gap:10px}
  .product-add-row .product-qty{display:flex;width:100%;justify-content:space-between;align-items:stretch}
  .product-add-row .qty-btn{flex:0 0 52px;width:52px;height:48px;font-size:1.15rem}
  .product-add-row .qty-input{flex:1 1 auto;width:auto;height:48px;font-size:1rem}

  /* Tab nav: horizontal scroll with momentum + horizontal-only touch (so vertical
     scroll on the page isn't hijacked when finger lands on the tab strip).
     scrollbar hidden for a cleaner look. */
  .product-tabs{overflow-x:hidden}
  .product-tabs-nav{overflow-x:auto;overflow-y:hidden;gap:0;-webkit-overflow-scrolling:touch;touch-action:pan-x;scrollbar-width:none}
  .product-tabs-nav::-webkit-scrollbar{display:none}
  .product-tab-btn{white-space:nowrap;padding:10px 16px;font-size:.85rem}
  /* Constrain tab content so wide tables / long codes don't push the page wider
     than the viewport (which caused the "moves in all directions" feeling). */
  .product-tab-panel{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .product-specs-table{table-layout:fixed;word-break:break-word}
  .product-specs-table th{width:42%;padding-right:12px}

  .product-quote-form .form-row--2{grid-template-columns:1fr}
  .checkout-form .form-row--2,.checkout-form .form-row--3{grid-template-columns:1fr}
  .product-trust-badges{grid-template-columns:1fr 1fr}

  /* Pagination on mobile: hide long Slovak text "Predchádzajúca" / "Ďalšia",
     keep only « » arrows. The full label is preserved as aria-label so
     screen readers still announce it. Without this, the row overflows the
     viewport on /shop/page/2/, /3/, etc. (≥9 items × 36px+padding > 390px). */
  .shop-pagination .pg-label{display:none}
  .shop-pagination{gap:4px;margin-top:32px;padding-top:24px}
  .shop-page-link{min-width:34px;height:34px;padding:0 6px;font-size:.85rem}
  .shop-page-prev,.shop-page-next{font-size:1.1rem;font-weight:600;line-height:1}
}

/* ── Trust badges ─────────────────────────────────── */
.product-trust-badges{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:24px 0 20px;padding:20px 0;border-top:1px solid var(--border,#eee);border-bottom:1px solid var(--border,#eee)}
.trust-badge{display:flex;align-items:center;gap:10px;font-size:.82rem;color:#555;line-height:1.3}
.trust-badge svg{flex-shrink:0;color:#8a7e72;opacity:.7}

/* ── Product codes (SKU + EAN) ────────────────────── */
.product-codes{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.product-codes .product-sku{font-size:.78rem;color:#999}

/* ── Video embed ──────────────────────────────────── */
.product-video-embed{position:relative;width:100%;max-width:800px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000}
.product-video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}

/* ── Documents/Files list ─────────────────────────── */
.product-files-list{display:flex;flex-direction:column;gap:8px;max-width:600px}
.product-file-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--border,#eee);border-radius:8px;text-decoration:none;color:inherit;transition:border-color .2s,background .2s}
.product-file-item:hover{border-color:#8a7e72;background:#faf9f7}
.product-file-item svg:first-child{flex-shrink:0;color:#8a7e72}
.product-file-name{font-weight:500;font-size:.9rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.product-file-meta{font-size:.72rem;color:#999;white-space:nowrap}

/* ====== WISHLIST BUTTON ====== */
.wishlist-btn{position:absolute;top:10px;right:10px;z-index:2;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.9);border:none;border-radius:50%;cursor:pointer;color:var(--muted);transition:all .2s;backdrop-filter:blur(4px)}
.wishlist-btn:hover{color:var(--error,#e53935);background:var(--white);transform:scale(1.1)}
.wishlist-btn.active{color:var(--error,#e53935)}
.wishlist-btn.active svg{fill:var(--error,#e53935)}
.header-wishlist{position:relative}

/* ====== PRODUCT REVIEWS ====== */
.reviews-section{margin-top:48px;padding-top:32px;border-top:1px solid var(--border)}
.reviews-section-inline .reviews-header{margin-bottom:20px}
.reviews-section-inline .reviews-avg-num{font-size:1.8rem}
.reviews-section-inline .review-item{padding:14px}
.reviews-section-inline .review-form{margin-top:20px;padding:16px}
.reviews-section-inline .review-form h3{margin:0 0 10px;font-size:1rem}
.reviews-section-inline .review-list{gap:12px}
.reviews-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:32px;flex-wrap:wrap}
.reviews-summary{display:flex;align-items:center;gap:20px}
.reviews-avg{text-align:center}
.reviews-avg-num{font-size:2.4rem;font-weight:700;line-height:1;color:var(--dark)}
.reviews-avg-stars{display:flex;gap:2px;margin:6px 0 4px;color:#f4b400}
.reviews-avg-count{font-size:.82rem;color:var(--muted)}

.reviews-bars{min-width:180px}
.review-bar-row{display:flex;align-items:center;gap:6px;margin-bottom:3px;font-size:.78rem}
.review-bar-row span:first-child{width:12px;text-align:right;color:var(--muted)}
.review-bar{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.review-bar-fill{height:100%;background:#f4b400;border-radius:3px;transition:width .3s}
.review-bar-row span:last-child{width:20px;color:var(--muted);font-size:.72rem}

.review-list{display:flex;flex-direction:column;gap:20px}
.review-item{padding:20px;border:1px solid var(--border);border-radius:var(--radius);background:var(--white)}
.review-item-header{display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.review-author{font-weight:600;font-size:.92rem}
.review-verified{font-size:.72rem;color:#2e7d32;background:#e8f5e9;padding:2px 8px;border-radius:3px}
.review-date{font-size:.78rem;color:var(--muted);margin-left:auto}
.review-stars{display:flex;gap:1px;color:#f4b400}
.review-title{font-weight:600;margin:6px 0 4px;font-size:.95rem}
.review-body{font-size:.9rem;line-height:1.6;color:var(--body)}
.review-reply{margin-top:12px;padding:12px;background:var(--primary-light);border-radius:6px;font-size:.86rem}
.review-reply strong{display:block;margin-bottom:4px;font-size:.82rem;color:var(--primary)}

.review-form{margin-top:32px;padding:24px;border:1px solid var(--border);border-radius:var(--radius);background:var(--white)}
.review-form h3{margin:0 0 16px;font-size:1.1rem}
.review-form-field{margin-bottom:14px}
.review-form-field label{display:block;font-weight:500;font-size:.88rem;margin-bottom:4px}
.review-form-field input,.review-form-field textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:6px;font-size:.9rem}
.review-form-field textarea{min-height:80px;resize:vertical}

.star-rating-input{display:flex;gap:4px;flex-direction:row-reverse;justify-content:flex-end}
.star-rating-input input{display:none}
.star-rating-input label{cursor:pointer;color:var(--border);font-size:1.6rem;transition:color .15s}
.star-rating-input label:hover,.star-rating-input label:hover ~ label,.star-rating-input input:checked ~ label{color:#f4b400}

.review-success{padding:16px;background:#e8f5e9;border:1px solid #4caf50;border-radius:8px;color:#2e7d32;text-align:center;font-size:.92rem;margin-top:16px;display:none}
.review-error{padding:16px;background:#fce4ec;border:1px solid #e53935;border-radius:8px;color:#c62828;text-align:center;font-size:.92rem;margin-top:16px;display:none}

/* ====== CATEGORY HIGHLIGHTS (main /shop/ page) ====== */
.category-highlight{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:32px}
.category-highlight-card{display:flex;align-items:center;gap:18px;padding:18px 20px;border-radius:var(--radius-lg);background:var(--white);border:1px solid var(--border);text-decoration:none;color:var(--dark);transition:border-color .25s,box-shadow .25s}
.category-highlight-card:hover{border-color:var(--primary);box-shadow:0 4px 20px rgba(0,0,0,.07)}
.category-highlight-icon{flex-shrink:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--dark);transition:color .25s}
.category-highlight-icon svg{width:32px;height:32px}
.category-highlight-card:hover .category-highlight-icon{color:var(--primary)}
.category-highlight-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.category-highlight-text strong{font-size:.88rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.category-highlight-text span{font-size:.76rem;color:var(--muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.category-highlight-arrow{flex-shrink:0;color:var(--border);transition:color .25s,transform .25s}
.category-highlight-card:hover .category-highlight-arrow{color:var(--primary);transform:translateX(3px)}
.category-highlight-all{border-style:dashed;border-color:var(--border)}
.category-highlight-all:hover{border-style:solid}
@media(max-width:768px){.category-highlight{grid-template-columns:1fr}.category-highlight-card{padding:14px 16px}}

/* ====== ALL CATEGORIES PAGE ====== */
.categories-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.categories-grid-card{display:flex;align-items:center;gap:20px;padding:22px 24px;border-radius:var(--radius-lg);background:var(--white);border:1px solid var(--border);text-decoration:none;color:var(--dark);transition:border-color .25s,box-shadow .25s}
.categories-grid-card:hover{border-color:var(--primary);box-shadow:0 4px 20px rgba(0,0,0,.07)}
.categories-grid-icon{flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--dark);transition:color .25s}
.categories-grid-icon svg{width:36px;height:36px}
.categories-grid-card:hover .categories-grid-icon{color:var(--primary)}
.categories-grid-body{flex:1;min-width:0}
.categories-grid-body h3{font-size:1rem;font-weight:600;margin:0 0 4px}
.categories-grid-body p{font-size:.82rem;color:var(--muted);margin:0 0 6px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.categories-grid-count{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.categories-grid-arrow{flex-shrink:0;color:var(--border);transition:color .2s,transform .2s}
.categories-grid-card:hover .categories-grid-arrow{color:var(--primary);transform:translateX(2px)}
@media(max-width:640px){.categories-grid{grid-template-columns:1fr}.categories-grid-card{padding:16px 18px}.categories-grid-icon{width:44px;height:44px}.categories-grid-icon svg{width:22px;height:22px}}

/* ====== CATEGORY / SHOP SEO CONTENT (below product grid + pagination) ======
   Phase 4 (2026-05-27): widened to full Bauhaus page width (1280px container,
   1200px inner content) with proper Bauhaus typography for long-form SEO copy.
   Body paragraphs soft-cap at 75ch for readability; headings/lists/tables
   span the full 1200px frame.
*/
.category-seo-content,
.shop-landing-body {
    padding: 48px 40px 64px;
    max-width: 1280px;
    margin: 0 auto;
    line-height: 1.7;
    font-size: 16px;
    color: #1f1f1f;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.category-seo-content > *:first-child,
.shop-landing-body > *:first-child { margin-top: 0; }
.category-seo-content > *:last-child,
.shop-landing-body > *:last-child  { margin-bottom: 0; }
.category-seo-content h1,
.shop-landing-body h1 { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(28px, 3.5vw, 40px); line-height: 1.1; margin: 0 0 24px; color: #0a0a0a; letter-spacing: -0.015em; }
.category-seo-content h2,
.shop-landing-body h2 { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; margin: 48px 0 18px; color: #0a0a0a; letter-spacing: -0.01em; padding-bottom: 12px; border-bottom: 1px solid rgba(10,10,10,0.10); }
.category-seo-content h3,
.shop-landing-body h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: clamp(20px, 2vw, 24px); line-height: 1.2; margin: 36px 0 14px; color: #0a0a0a; }
.category-seo-content h4,
.shop-landing-body h4 { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 600; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; margin: 28px 0 10px; color: #0a0a0a; }
.category-seo-content p,
.shop-landing-body p { margin: 0 0 18px; }
.category-seo-content ul,
.category-seo-content ol,
.shop-landing-body ul,
.shop-landing-body ol { margin: 0 0 20px; padding-left: 24px; }
.category-seo-content li,
.shop-landing-body li { margin-bottom: 8px; }
.category-seo-content li::marker,
.shop-landing-body li::marker { color: #e30613; }
.category-seo-content strong,
.shop-landing-body strong { color: #0a0a0a; font-weight: 600; }
.category-seo-content a,
.shop-landing-body a { color: #0a0a0a; text-decoration: underline; text-decoration-color: #e30613; text-decoration-thickness: 2px; text-underline-offset: 3px; transition: color .15s ease; }
.category-seo-content a:hover,
.shop-landing-body a:hover { color: #e30613; }
.category-seo-content blockquote,
.shop-landing-body blockquote { border-left: 3px solid #e30613; padding: 14px 24px; margin: 24px 0; background: #fafafa; font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 18px; line-height: 1.5; color: #0a0a0a; }
.category-seo-content figure,
.shop-landing-body figure { margin: 32px 0; }
.category-seo-content figure img,
.shop-landing-body figure img { max-width: 100%; height: auto; display: block; }
.category-seo-content figcaption,
.shop-landing-body figcaption { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: #5a5a5a; margin-top: 10px; text-align: center; }
.category-seo-content .table-responsive,
.shop-landing-body .table-responsive { overflow-x: auto; margin: 24px 0; }
.category-seo-content table,
.shop-landing-body table { width: 100%; border-collapse: collapse; font-size: 14px; }
.category-seo-content th,
.category-seo-content td,
.shop-landing-body th,
.shop-landing-body td { padding: 12px 16px; border: 1px solid rgba(10,10,10,0.10); text-align: left; }
.category-seo-content th,
.shop-landing-body th { background: #fafafa; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; font-weight: 600; color: #0a0a0a; }
.category-seo-content hr,
.shop-landing-body hr { border: none; border-top: 1px solid rgba(10,10,10,0.10); margin: 40px 0; }
.category-seo-content .warning-block,
.shop-landing-body .warning-block { background: #fff8e1; border-left: 4px solid #ffc107; padding: 16px 20px; margin: 24px 0; }
@media (max-width: 768px) {
    .category-seo-content,
    .shop-landing-body { padding: 32px 20px 48px; font-size: 15px; }
    .category-seo-content h2,
    .shop-landing-body h2 { font-size: 22px; margin-top: 36px; }
    .category-seo-content h3,
    .shop-landing-body h3 { font-size: 18px; }
}

/* ── Product Lightbox ─────────────────────────────── */
.product-lightbox{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);animation:lbFadeIn .2s ease}
@keyframes lbFadeIn{from{opacity:0}to{opacity:1}}
.product-lightbox img{max-width:88vw;max-height:88vh;object-fit:contain;border-radius:4px;box-shadow:0 8px 40px rgba(0,0,0,.4);user-select:none}
.lightbox-close{position:absolute;top:16px;right:20px;background:none;border:none;color:#fff;font-size:2.4rem;cursor:pointer;opacity:.7;transition:opacity .2s;z-index:10;line-height:1;padding:8px}
.lightbox-close:hover{opacity:1}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.1);border:none;color:#fff;font-size:3rem;cursor:pointer;padding:12px 16px;border-radius:6px;opacity:.6;transition:opacity .2s,background .2s;line-height:1;z-index:10}
.lightbox-nav:hover{opacity:1;background:rgba(255,255,255,.2)}
.lightbox-prev{left:16px}
.lightbox-next{right:16px}
.lightbox-counter{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.6);font-size:.82rem;font-weight:500;letter-spacing:.05em}
.gallery-zoom-hint{position:absolute;bottom:14px;right:14px;background:rgba(255,255,255,.85);color:var(--dark);width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s;cursor:zoom-in;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.product-gallery-main:hover .gallery-zoom-hint{opacity:1}
.product-gallery-main{cursor:zoom-in}
@media(max-width:768px){.lightbox-nav{font-size:2rem;padding:8px 12px}.product-lightbox img{max-width:96vw;max-height:85vh}.lightbox-close{top:10px;right:12px;font-size:2rem}}

/* Mobile horizontal padding for checkout / auth / account pages */
@media(max-width:768px){
  .checkout-page,.auth-page,.account-page{padding-left:16px;padding-right:16px}
}

/* ── Search page ───────────────────────────────────────────── */
.search-hero{padding:48px 0 32px;background:linear-gradient(180deg,#fafaf8 0%,#fff 100%);border-bottom:1px solid var(--border)}
.search-hero h1{font-family:var(--font-display);font-size:2.25rem;font-weight:500;margin:8px 0 20px;color:var(--charcoal)}
.search-page-form{max-width:640px;margin:0 0 12px}
.search-page-input-wrap{position:relative;display:flex;align-items:center;background:#fff;border:1px solid var(--border);border-radius:8px;transition:border-color .15s,box-shadow .15s;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.search-page-input-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(201,165,92,.12)}
.search-page-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.search-page-input-wrap input[type=search]{flex:1;border:0;background:transparent;padding:14px 16px 14px 46px;font-size:1rem;outline:none;color:var(--charcoal);min-width:0;border-radius:8px 0 0 8px}
.search-page-input-wrap input[type=search]::placeholder{color:var(--muted)}
.search-page-submit{border:0;background:var(--accent);color:#fff;padding:0 24px;height:46px;margin:3px;border-radius:6px;font-weight:600;font-size:.95rem;cursor:pointer;transition:background .15s;white-space:nowrap}
.search-page-submit:hover{background:var(--accent-dark,#a8864a)}
.search-page-summary{color:var(--muted);font-size:.95rem;margin:0}

.search-layout{padding-top:24px;padding-bottom:48px}

.search-empty-state{text-align:center;padding:72px 20px;max-width:560px;margin:0 auto}
.search-empty-state svg{color:var(--muted);margin-bottom:16px}
.search-empty-state h2{font-family:var(--font-display);font-size:1.6rem;margin:0 0 10px;color:var(--charcoal);font-weight:500}
.search-empty-state p{color:var(--muted);margin:0 0 24px;font-size:1rem;line-height:1.5}

.search-no-results{text-align:center;padding:64px 20px}
.search-no-results svg{margin-bottom:16px}
.search-no-results h2{font-family:var(--font-display);font-size:1.6rem;margin:0 0 10px;font-weight:500;color:var(--charcoal)}
.search-no-results p{color:var(--muted);margin:0 0 20px}

/* Posts block on search page */
.search-posts-block{margin-top:48px;padding-top:32px;border-top:1px solid var(--border)}
.search-posts-heading{margin:0 0 20px;font-size:1.35rem;font-weight:600;color:var(--charcoal);display:flex;align-items:baseline;gap:8px}
.search-posts-count{color:var(--muted);font-weight:400;font-size:.95rem}
.search-posts-list{display:grid;gap:16px}
.search-post-item{display:flex;gap:16px;align-items:flex-start;padding:16px;border:1px solid var(--border);border-radius:8px;background:#fff;transition:border-color .15s,box-shadow .15s}
.search-post-item:hover{border-color:var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.search-post-thumb{flex:0 0 auto;display:block;overflow:hidden;border-radius:6px}
.search-post-thumb img{width:140px;height:105px;object-fit:cover;display:block;transition:transform .3s}
.search-post-item:hover .search-post-thumb img{transform:scale(1.04)}
.search-post-body{flex:1;min-width:0}
.search-post-meta{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.search-post-meta a{color:inherit;text-decoration:none}
.search-post-meta a:hover{color:var(--accent)}
.search-post-meta span:nth-child(2n){opacity:.5}
.search-post-title{margin:0 0 6px;font-size:1.05rem;line-height:1.3;font-weight:600}
.search-post-title a{color:var(--charcoal);text-decoration:none;transition:color .15s}
.search-post-title a:hover{color:var(--accent)}
.search-post-excerpt{margin:0;color:var(--muted);font-size:.92rem;line-height:1.5}
.search-posts-more{margin-top:16px}
.search-posts-more a{font-weight:600;color:var(--accent);text-decoration:none}
.search-posts-more a:hover{text-decoration:underline}

.admin-preview-banner{background:#fff3cd;border-top:3px solid #f59e0b;border-bottom:3px solid #f59e0b;color:#7a4a00;font-size:.95rem;font-weight:500}
.admin-preview-banner__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px}
.admin-preview-banner__msg::before{content:"\26A0";display:inline-block;margin-right:8px;font-size:1.1em}
.admin-preview-banner__actions{display:flex;gap:8px;align-items:center}
.admin-preview-banner__form{display:inline;margin:0}
.admin-preview-banner__btn{display:inline-block;padding:6px 14px;background:#fff;border:1px solid #f59e0b;border-radius:4px;color:#7a4a00;text-decoration:none;font-size:.85rem;font-weight:600;cursor:pointer;line-height:1.4}
.admin-preview-banner__btn:hover{background:#fef3c7}
.admin-preview-banner__btn--primary{background:#f59e0b;color:#fff;border-color:#f59e0b}
.admin-preview-banner__btn--primary:hover{background:#d97706}

@media(max-width:768px){
  .search-hero{padding:28px 0 20px}
  .search-hero h1{font-size:1.6rem;margin:6px 0 14px}
  .search-page-form{max-width:100%}
  .search-page-input-wrap input[type=search]{padding:12px 12px 12px 40px;font-size:.95rem}
  .search-page-submit{padding:0 16px;font-size:.9rem;height:40px}
  .search-page-icon{left:12px;width:18px;height:18px}
  .search-post-item{padding:12px;gap:12px}
  .search-post-thumb img{width:96px;height:72px}
  .search-post-title{font-size:.95rem}
  .search-post-excerpt{font-size:.85rem}
  .search-layout{padding-top:16px}
}

/* ── Tile pricing block (price/m² + area calculator) ───────────── */
.product-tile-pricing {
  margin: 18px 0 14px;
  padding: 16px;
  background: #faf8f3;
  border: 1px solid #e8dfc8;
  border-radius: 8px;
}
.tile-pricing-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #d8cfb6;
}
.tile-pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: .9rem;
}
.tile-pricing-label { color: #6b6149; }
.tile-pricing-value { font-weight: 600; color: #2a2417; }
.tile-pricing-row:first-child .tile-pricing-value {
  font-size: 1.15rem;
  color: var(--gold, #a8884f);
}
.tile-area-calc-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: .82rem;
  color: #2a2417;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tile-area-calc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tile-area-calc-row input {
  width: 90px;
  padding: 8px 10px;
  border: 1px solid #d0c8b0;
  border-radius: 4px;
  font-size: .95rem;
  font-family: inherit;
}
.tile-area-calc-row input:focus {
  outline: none;
  border-color: var(--gold, #a8884f);
}
.tile-area-unit {
  font-size: .9rem;
  color: #6b6149;
}
.tile-area-arrow {
  color: var(--gold, #a8884f);
  font-weight: 600;
}
.tile-area-result {
  flex: 1;
  font-weight: 600;
  font-size: .95rem;
  color: #2a2417;
  min-width: 200px;
}
@media (max-width: 600px) {
  .tile-area-calc-row input { width: 80px; }
  .tile-area-result { font-size: .85rem; min-width: 100%; flex-basis: 100%; }
}


/* ── Collection carousel (Colours, Sizes, etc.) ─────────────────── */
.product-collection-carousel{margin:60px 0 40px;padding-top:30px;border-top:1px solid var(--border)}
.collection-carousel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.collection-carousel-title{font-family:var(--font-display);font-size:1.8rem;font-weight:500;margin:0;color:var(--text)}
.collection-carousel-controls{display:flex;gap:8px}
.collection-carousel-btn{width:42px;height:42px;border:1.5px solid var(--border);background:var(--white);font-size:1.5rem;line-height:1;cursor:pointer;border-radius:50%;color:var(--text);transition:all .15s;display:flex;align-items:center;justify-content:center}
.collection-carousel-btn:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}
.collection-carousel-btn:disabled{opacity:.3;cursor:not-allowed}
.collection-carousel-track{display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:8px}
.collection-carousel-track::-webkit-scrollbar{display:none}
.collection-carousel-card{flex:0 0 calc((100% - 80px)/6);min-width:140px;text-decoration:none;color:var(--text);transition:transform .15s}
.collection-carousel-card:hover{transform:translateY(-3px)}
.collection-carousel-img{aspect-ratio:1;overflow:hidden;border-radius:6px;background:var(--bg-light);border:1px solid var(--border)}
.collection-carousel-img img{width:100%;height:100%;object-fit:cover;display:block}
.collection-carousel-label{margin-top:10px;font-size:.92rem;font-weight:500;text-align:center;color:var(--text);line-height:1.3}
@media (max-width:1024px){.collection-carousel-card{flex:0 0 calc((100% - 48px)/4)}}
@media (max-width:768px){.collection-carousel-card{flex:0 0 calc((100% - 32px)/3);min-width:110px} .collection-carousel-title{font-size:1.4rem} .product-collection-carousel{margin:40px 0 30px}}
@media (max-width:480px){.collection-carousel-card{flex:0 0 calc((100% - 16px)/2)}}


/* ── Sizes carousel cards (formats / dimensions) ─────────────── */
.sizes-carousel-track .size-card{flex:0 0 calc((100% - 80px)/6);min-width:160px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:18px 14px;background:var(--white);border:1px solid var(--border);border-radius:8px;transition:border-color .15s}
.sizes-carousel-track .size-card:hover{border-color:var(--primary)}
.size-card-tile{width:90px;height:90px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.size-card-tile svg{width:100%;height:100%}
.size-card-cm{font-family:var(--font-display);font-size:1.45rem;font-weight:500;color:var(--text);line-height:1.1}
.size-card-inch{font-size:.78rem;color:var(--muted);margin-top:2px}
.size-card-finishes{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:10px}
.size-finish-chip{font-size:.7rem;padding:3px 9px;border-radius:10px;background:var(--bg-light);border:1px solid var(--border);color:var(--text);text-transform:uppercase;letter-spacing:.3px;font-weight:500}
@media (max-width:1024px){.sizes-carousel-track .size-card{flex:0 0 calc((100% - 48px)/4)}}
@media (max-width:768px){.sizes-carousel-track .size-card{flex:0 0 calc((100% - 32px)/3);min-width:130px;padding:14px 10px} .size-card-tile{width:70px;height:70px;margin-bottom:8px} .size-card-cm{font-size:1.2rem}}
@media (max-width:480px){.sizes-carousel-track .size-card{flex:0 0 calc((100% - 16px)/2)}}

/* ── Live faceted filter (Wave 13) ─────────────────────────────── */

.shop-sidebar.is-loading{opacity:.6;pointer-events:none;transition:opacity .15s}
.shop-results.is-loading{position:relative;min-height:200px}
.shop-results.is-loading::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,var(--accent),transparent);background-size:200% 100%;animation:shopFilterShimmer 1.2s ease-in-out infinite;z-index:2;pointer-events:none}
@keyframes shopFilterShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

.filter-count[hidden]{display:none}
.filter-label.is-zero{opacity:.4;cursor:not-allowed}
.filter-label.is-zero .filter-count{color:#bbb}

.shop-filter-actions{display:flex;gap:8px;justify-content:space-between;align-items:center;padding:14px 0 4px;border-top:1px solid var(--border);margin-top:8px}
.shop-filter-reset{background:transparent;color:var(--muted);border:none;font-size:.82rem;cursor:pointer;padding:6px 10px;text-decoration:underline;transition:color .15s;font-family:var(--font)}
.shop-filter-reset:hover{color:var(--accent)}
.shop-filter-apply{background:var(--accent);color:#fff;border:none;padding:8px 18px;border-radius:4px;cursor:pointer;font-size:.85rem;font-weight:600}

/* ── Required Accessories Block (product page) ────────────────────── */
.required-accessories-block{
  background:var(--accent-light);
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:var(--radius);
  padding:18px 20px;
  margin:20px 0;
  width:100%;
  box-sizing:border-box;
}
.required-accessories-block .ra-header{
  display:flex;align-items:flex-start;gap:10px;
  padding-bottom:12px;margin-bottom:6px;
  border-bottom:1px solid var(--border);
}
.required-accessories-block .ra-icon{color:var(--accent);flex-shrink:0;margin-top:3px}
.required-accessories-block .ra-header-text{flex:1;min-width:0}
.required-accessories-block .ra-title{
  font-family:var(--font);font-weight:600;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.18em;color:var(--dark);line-height:1.2;
}
.required-accessories-block .ra-subtitle{
  font-size:.85rem;color:var(--muted);margin-top:4px;line-height:1.45;font-weight:400;
}

/* Rows list — no card wrapper, only subtle dividers */
.required-accessories-block .ra-rows{display:flex;flex-direction:column}
.required-accessories-block .ra-row{
  display:flex;align-items:center;gap:14px;
  padding:12px 0;
  border-bottom:1px solid var(--border);
}
.required-accessories-block .ra-row:last-child{border-bottom:none}
.required-accessories-block .ra-row-photo{
  flex-shrink:0;display:block;width:64px;height:64px;
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;
}
.required-accessories-block .ra-row-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.required-accessories-block .ra-row-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.required-accessories-block .ra-row-name{
  font-family:var(--font);font-weight:500;font-size:.95rem;color:var(--dark);
  text-decoration:none;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .15s;
}
.required-accessories-block .ra-row-name:hover{color:var(--accent)}
.required-accessories-block .ra-row-meta{
  font-size:.75rem;color:var(--muted);letter-spacing:.04em;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
}
.required-accessories-block .ra-row-sku{font-weight:600;color:var(--charcoal)}
.required-accessories-block .ra-row-dot{color:var(--border-light, #d0d0d0)}
.required-accessories-block .ra-row-cat{color:var(--muted)}

.required-accessories-block .ra-row-actions{
  flex-shrink:0;display:flex;align-items:center;gap:12px;
}
.required-accessories-block .ra-row-price{font-size:1rem;font-weight:700;color:var(--dark);white-space:nowrap}
.required-accessories-block .ra-row-price .price-current{font-size:1rem;font-weight:700;color:var(--dark)}
.required-accessories-block .ra-row-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:transparent;color:var(--charcoal);
  border:1.5px solid var(--primary);
  padding:8px 16px;border-radius:var(--radius);
  font-family:var(--font);font-size:.78rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;transition:all .2s;white-space:nowrap;
}
.required-accessories-block .ra-row-btn:hover{background:var(--primary);color:var(--white)}
.required-accessories-block .ra-row-btn-plus{font-weight:400;font-size:.95rem;line-height:1;margin-top:-1px}

/* Bundle row — total + main CTA on same line on desktop */
.required-accessories-block .ra-bundle{
  margin-top:14px;padding-top:16px;
  border-top:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  flex-wrap:wrap;
}
.required-accessories-block .ra-bundle-total{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;flex:1;min-width:0}
.required-accessories-block .ra-bundle-label{
  font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);
}
.required-accessories-block .ra-bundle-amount{font-size:1.45rem;font-weight:700;color:var(--dark);line-height:1}
.required-accessories-block .ra-bundle-amount .price-current{font-size:1.45rem;font-weight:700;color:var(--dark)}
.required-accessories-block .ra-bundle-count{font-size:.78rem;color:var(--muted);font-weight:400}
.required-accessories-block .ra-bundle-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--primary);color:var(--white);border:none;
  padding:14px 30px;border-radius:var(--radius);
  font-family:var(--font);font-size:.85rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;transition:all .25s;
}
.required-accessories-block .ra-bundle-btn:hover{
  background:var(--primary-dark);
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(55,58,62,.18);
}
.required-accessories-block .ra-bundle-btn:active{transform:translateY(0)}
.required-accessories-block .ra-bundle-btn:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
.required-accessories-block .ra-bundle-btn svg{flex-shrink:0}

@media (max-width:768px){
  .required-accessories-block .ra-bundle{flex-direction:column;align-items:stretch}
  .required-accessories-block .ra-bundle-total{justify-content:flex-start}
  .required-accessories-block .ra-bundle-btn{width:100%;padding:14px 22px}
}
@media (max-width:480px){
  .required-accessories-block{padding:14px 14px}
  .required-accessories-block .ra-row{flex-wrap:wrap;gap:10px;padding:14px 0}
  .required-accessories-block .ra-row-photo{width:56px;height:56px}
  .required-accessories-block .ra-row-info{flex:1 1 calc(100% - 70px);min-width:0}
  .required-accessories-block .ra-row-actions{
    flex:1 1 100%;justify-content:space-between;margin-top:4px;
    padding-top:10px;border-top:1px dashed var(--border);
  }
  .required-accessories-block .ra-row-btn{padding:8px 14px}
  .required-accessories-block .ra-bundle-amount{font-size:1.25rem}
  .required-accessories-block .ra-bundle-amount .price-current{font-size:1.25rem}
}