From 376cf7386d503240dc791621432513076c8bec22 Mon Sep 17 00:00:00 2001 From: Devin Michael Date: Mon, 7 Sep 2026 15:58:24 +0700 Subject: [PATCH 1/4] Style tokens: settings, :root bridge, and @theme registration (#56) Spark is tokenised for colour and typeface and hardcoded for geometry: there is no setting and no custom property for radius, section rhythm, content gap, border colour, page background, container width or a type scale. Add the geometry half of the token layer without changing what a store on default settings renders. Settings: nine new entries in the Style group (Layout: body_bg_color, border_color, radius_control, radius_card, section_padding, content_gap, container_max_width; Type Scale: heading_scale, body_size), seeded in settings_data.json so the parity gate stays green. Selects, not free text, so the storefront stays on a sane scale. Bridge: layouts/base.html extends the existing :root block with the same {% if settings.x %} pattern used for fonts and colours. The "default" option of section_padding, content_gap, heading_scale and body_size emits nothing, so a defaulted store's :root is what it was plus lines that equal the CSS fallbacks. Bridge properties are noun-first (--control-radius, --card-radius, --section-padding-y, --content-gap, --heading-scale, --body-size, --container-max, --border-color, --body-bg-color); the @theme keys that read them are namespace-first, mirroring the existing --color-primary: var(--primary-color) convention, because a theme key named like the property it reads is a self-reference. Theme: @theme registers the tokens with today's values as fallbacks (section-y 3rem and its 4/3 md step, band-y for the promo rhythm, content gap 1.5rem with sm/md/lg ratios, h1/h2/h3/display sizes carrying Tailwind's own line-height ratios and multiplied by --heading-scale). Component rules consume the bridge properties directly: body background and font-size, .btn radius, .btn-secondary and .product-card-bordered border colour, .container max-width, .product-card radius (with overflow hidden so a rounded card clips its image), .product-grid and .category-grid gaps. Every replacement is value-identical at defaults; a fixture render of the homepage before and after this change has zero computed-style differences and zero differing pixels at 1280 and 375. assets/main.css: 48219 -> 48460 bytes, twice-compile identical. Utilities for the new keys are emitted once markup uses them, which the section partials do in the next change. Co-Authored-By: Claude Fable 5.1 --- assets/main.css | 2 +- configs/settings_data.json | 9 ++ configs/settings_schema.json | 183 +++++++++++++++++++++++++++++++++++ css/input.css | 43 ++++++-- layouts/base.html | 34 +++++++ 5 files changed, 263 insertions(+), 8 deletions(-) diff --git a/assets/main.css b/assets/main.css index 549daae..e676e38 100644 --- a/assets/main.css +++ b/assets/main.css @@ -1,2 +1,2 @@ /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */ -*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-top:initial;right:initial;bottom:initial;left:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-50:#fef2f2;--color-red-200:#ffc9c9;--color-red-400:#ff6467;--color-red-500:#fb2c36;--color-red-600:#e7000b;--color-red-800:#9f0712;--color-amber-50:#fffbeb;--color-amber-200:#fee685;--color-amber-400:#ffb900;--color-amber-800:#973c00;--color-green-50:#f0fdf4;--color-green-200:#b9f8cf;--color-green-600:#00a63e;--color-green-800:#016630;--color-blue-50:#eff6ff;--color-blue-200:#bedbff;--color-blue-800:#193cb8;--color-slate-50:#f8fafc;--color-slate-100:#f1f5f9;--color-slate-200:#e2e8f0;--color-slate-300:#cbd5e1;--color-slate-400:#94a3b8;--color-slate-500:#64748b;--color-slate-600:#475569;--color-slate-700:#334155;--color-slate-800:#1e293b;--color-slate-900:#0f172a;--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-md:28rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-5xl:3rem;--text-5xl--line-height:1;--text-6xl:3.75rem;--text-6xl--line-height:1;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--tracking-wider:.05em;--leading-tight:1.25;--leading-relaxed:1.625;--radius-md:.375rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}select[multiple],[size] optgroup{font-weight:bolder}select[multiple],[size] optgroup option{padding-left:20px}::file-selector-button{margin-right:4px}::placeholder{opacity:1}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-year-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-month-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-day-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-hour-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-minute-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-second-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-millisecond-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input[type=button],[type=reset],[type=submit]{appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:not([hidden=until-found]){display:none!important}:root{--primary-color:#1e293b;--accent-color:#475569}body{font-family:var(--font-sans);color:#1e293b;background-color:#fff;line-height:1.6}h1,h2,h3,h4,h5,h6{color:#1e293b;font-weight:600;line-height:1.2}a{color:var(--primary-color);text-decoration:none}a:hover{opacity:.8}img{max-width:100%;height:auto}.btn{cursor:pointer;border-radius:.25rem;justify-content:center;align-items:center;padding:.625rem 1.5rem;font-size:.875rem;font-weight:500;line-height:1.25rem;transition:opacity .15s ease-out;display:inline-flex}.btn:hover{opacity:.9}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background-color:var(--primary-color)!important;color:#fff!important;border-color:var(--primary-color)!important}.btn-accent{background-color:var(--accent-color)!important;color:#fff!important;border-color:var(--accent-color)!important}.btn-outline{color:var(--btn-color,var(--primary-color))!important;border:1px solid var(--btn-color,var(--primary-color))!important;background-color:#0000!important}.btn-secondary{color:var(--primary-color);background-color:#0000;border:1px solid #e2e8f0}.btn-secondary:hover{background-color:#f8fafc}.container{width:100%;max-width:1280px;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}@media (min-width:768px){.container{padding-left:1.5rem;padding-right:1.5rem}}.product-card{flex-direction:column;display:flex}.product-card-bordered{border:1px solid #e2e8f0}.product-card-bordered .product-title{padding-left:1rem;padding-right:1rem}.product-card-bordered .product-price{padding-bottom:1rem;padding-left:1rem;padding-right:1rem}.product-card img{aspect-ratio:1;object-fit:cover;background-color:#f8fafc}.product-card .product-title{margin-top:.75rem;font-size:.875rem;font-weight:500}.product-card .product-price{color:#475569;margin-top:.25rem;font-size:.875rem}[data-spark-membership-price][data-membership-active=true] [data-spark-public-price]{color:#94a3b8;font-weight:400;text-decoration-line:line-through}.spark-member-price{color:#1e293b;flex-wrap:wrap;align-items:baseline;gap:.375rem;margin-top:.25rem;display:flex}.spark-member-price-label{color:var(--primary-color);text-transform:uppercase;font-size:.75rem;font-weight:600}.spark-member-price-value{font-weight:700}.spark-member-price-detail{color:#64748b;font-size:.75rem;font-weight:400}.product-card .spark-member-price,[data-spark-membership-layout=sticky] .spark-member-price{gap:.25rem;margin-top:.125rem}.product-card .spark-member-price-label,[data-spark-membership-layout=sticky] .spark-member-price-label{font-size:.6875rem}[data-spark-membership-layout=sticky][data-membership-active=true]{line-height:1.25;display:block}.product-grid{grid-template-columns:repeat(1,1fr);gap:1.5rem;display:grid}@media (min-width:768px){.product-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.product-grid{grid-template-columns:repeat(var(--product-grid-columns,3), 1fr)}}.category-grid{grid-template-columns:repeat(1,1fr);gap:1rem;display:grid}@media (min-width:768px){.category-grid{grid-template-columns:repeat(var(--category-grid-columns,2), 1fr)}}.skeleton-card{flex-direction:column;display:flex}.skeleton-card .skeleton-image{aspect-ratio:1;background-color:#f1f5f9;position:relative;overflow:hidden}.skeleton-card .skeleton-image:after{content:"";background:linear-gradient(90deg,#f1f5f9,#e2e8f0,#f1f5f9);animation:1.5s ease-in-out infinite shimmer;position:absolute;top:0;right:0;bottom:0;left:0}.skeleton-card .skeleton-text{background-color:#f1f5f9;height:12px;margin-top:.75rem;position:relative;overflow:hidden}.skeleton-card .skeleton-text:after{content:"";background:linear-gradient(90deg,#f1f5f9,#e2e8f0,#f1f5f9);animation:1.5s ease-in-out infinite shimmer;position:absolute;top:0;right:0;bottom:0;left:0}.skeleton-card .skeleton-text-short{background-color:#f1f5f9;width:40%;height:12px;margin-top:.25rem;position:relative;overflow:hidden}.skeleton-card .skeleton-text-short:after{content:"";background:linear-gradient(90deg,#f1f5f9,#e2e8f0,#f1f5f9);animation:1.5s ease-in-out infinite shimmer;position:absolute;top:0;right:0;bottom:0;left:0}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.cart-badge{background-color:var(--primary-color);color:#fff;text-align:center;pointer-events:none;border-radius:50%;width:16px;height:16px;font-size:10px;font-weight:600;line-height:16px;position:absolute;top:-4px;right:-4px}[data-light-primary] .cart-badge{color:#1e293b}.cart-badge[data-animate]{animation:.3s ease-out badge-pulse}@keyframes badge-pulse{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.spark-gallery{flex-direction:column;gap:.75rem;display:flex}@media (min-width:768px){.spark-gallery-left{flex-direction:row-reverse;gap:.75rem}.spark-gallery-left .spark-gallery-main{flex:1;min-width:0}.spark-gallery-left .spark-gallery-thumbs{flex-direction:column;justify-content:flex-start;width:72px;max-height:520px;overflow:hidden auto}.spark-gallery-left .spark-gallery-thumb{flex-shrink:0;width:72px;height:72px}}.spark-gallery-main{aspect-ratio:1;background-color:#f8fafc;max-height:560px;position:relative;overflow:hidden}.spark-gallery-hero{object-fit:contain;width:100%;height:100%;transition:opacity .2s ease-out}.spark-gallery-hero.spark-gallery-fading{opacity:0}.spark-gallery-thumbs{scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent;justify-content:center;gap:.5rem;padding:.25rem 0;display:flex;overflow:auto hidden}.spark-gallery-thumb{cursor:pointer;opacity:.6;background:#f8fafc;border:2px solid #0000;flex-shrink:0;width:72px;height:72px;padding:0;transition:border-color .2s ease-out,opacity .2s ease-out;overflow:hidden}.spark-gallery-thumb:hover{opacity:1;border-color:#cbd5e1}.spark-gallery-thumb-active{opacity:1!important;border-color:var(--primary-color)!important}.spark-gallery-prev,.spark-gallery-next{cursor:pointer;color:#475569;opacity:0;z-index:2;background:#ffffffe6;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;transition:opacity .2s ease-out,background-color .15s ease-out;display:flex;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 1px 3px #0000001a}.spark-gallery-prev{left:.75rem}.spark-gallery-next{right:.75rem}.spark-gallery-prev:hover,.spark-gallery-next:hover{color:#1e293b;background:#fff}.spark-gallery:hover .spark-gallery-prev,.spark-gallery:hover .spark-gallery-next,.spark-gallery:focus-within .spark-gallery-prev,.spark-gallery:focus-within .spark-gallery-next{opacity:1}@media (hover:none){.spark-gallery-prev,.spark-gallery-next{opacity:.7}}.sticky-atc{z-index:50;background:#fff;border-top:1px solid #e2e8f0;transition:transform .25s ease-out;position:fixed;bottom:0;left:0;right:0;transform:translateY(100%);box-shadow:0 -2px 8px #0000000f}.sticky-atc-visible{transform:translateY(0)}.sticky-atc-inner{justify-content:space-between;align-items:center;gap:1rem;max-width:1280px;margin:0 auto;padding:.75rem 1rem;display:flex}.sticky-atc-info{flex-direction:column;min-width:0;display:flex}.sticky-atc-title{color:#1e293b;white-space:nowrap;text-overflow:ellipsis;font-size:.875rem;font-weight:500;overflow:hidden}.sticky-atc-price{color:#475569;font-size:.875rem}.sticky-atc-btn{white-space:nowrap;flex-shrink:0;padding:.625rem 1.5rem}@media (min-width:1024px){.sticky-atc{display:none}}.search-overlay{z-index:60;opacity:0;visibility:hidden;justify-content:center;align-items:flex-start;transition:opacity .2s ease-out,visibility .2s ease-out;display:flex;position:fixed;top:0;right:0;bottom:0;left:0}.search-overlay-visible{opacity:1;visibility:visible}.search-overlay-backdrop{background:#0006;position:absolute;top:0;right:0;bottom:0;left:0}.search-overlay-content{z-index:1;width:100%;max-width:640px;margin-top:5rem;padding:0 1rem;transition:transform .2s ease-out;position:relative;transform:translateY(-12px)}.search-overlay-visible .search-overlay-content{transform:translateY(0)}.search-overlay-form{background:#fff;border:1px solid #e2e8f0;align-items:center;display:flex;box-shadow:0 8px 30px #0000001f}.search-overlay-input{color:#1e293b;background:0 0;border:none;outline:none;flex:1;padding:1rem 1.25rem;font-size:1rem}.search-overlay-input::placeholder{color:#94a3b8}.search-overlay-submit{color:#475569;cursor:pointer;background:0 0;border:none;padding:.75rem}.search-overlay-submit:hover{color:#1e293b}.search-overlay-close{color:#94a3b8;cursor:pointer;background:0 0;border:none;padding:.75rem}.search-overlay-close:hover{color:#475569}.sr-only,.skip-to-content{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-to-content:focus{z-index:100;clip:auto;width:auto;height:auto;font-family:var(--font-sans);background-color:#1e293b;border:1px solid #1e293b;border-radius:2px;margin:0;padding:.625rem 1rem;font-size:.875rem;font-weight:500;line-height:1.25rem;top:1rem;left:1rem;overflow:visible;color:#fff!important}@media (min-width:1024px){.catalogue-layout{grid-template-columns:15rem minmax(0,1fr);align-items:start;gap:2rem;display:grid}}.catalogue-rail{display:none}@media (min-width:1024px){.catalogue-rail{display:block;position:sticky;top:5.5rem}}.catalogue-filter-inline{margin-bottom:1.5rem;display:flex}@media (min-width:1024px){.catalogue-filter-inline{display:none}}.catalogue-filter-button{color:#1e293b;cursor:pointer;background:#fff;border:1px solid #e2e8f0;border-radius:.25rem;justify-content:center;align-items:center;gap:.5rem;width:100%;min-height:44px;padding:.625rem 1rem;font-family:inherit;font-size:.875rem;font-weight:500;line-height:1.25rem;display:inline-flex}.catalogue-bar{z-index:50;visibility:hidden;pointer-events:none;background:#fff;border-top:1px solid #e2e8f0;transition:transform .25s ease-in,visibility 0s linear .25s;position:fixed;bottom:0;left:0;right:0;transform:translateY(100%)}.catalogue-bar-visible{visibility:visible;pointer-events:auto;transition:transform .25s ease-out;transform:translateY(0)}.catalogue-bar-inner{align-items:stretch;gap:.75rem;max-width:1280px;margin:0 auto;padding:.75rem 1rem;display:flex}.catalogue-bar-control{flex:1 1 0;min-width:0}.catalogue-bar-count{background:var(--primary-color);color:#fff;border-radius:9999px;justify-content:center;align-items:center;min-width:1.25rem;height:1.25rem;padding:0 .25rem;font-size:10px;font-weight:600;line-height:1;display:inline-flex}@media (min-width:1024px){.catalogue-bar{display:none}}.filter-drawer{z-index:60;visibility:hidden;pointer-events:none;position:fixed;top:0;right:0;bottom:0;left:0}.filter-drawer-visible{visibility:visible;pointer-events:auto}.filter-drawer-backdrop{opacity:0;background:#0000004d;transition:opacity .2s ease-out;position:absolute;top:0;right:0;bottom:0;left:0}.filter-drawer-visible .filter-drawer-backdrop{opacity:1}.filter-drawer-panel{background:#fff;border-top:1px solid #e2e8f0;flex-direction:column;max-height:85vh;transition:transform .25s ease-out;display:flex;position:absolute;bottom:0;left:0;right:0;transform:translateY(100%)}.filter-drawer-visible .filter-drawer-panel{transform:translateY(0)}.filter-drawer-header{border-bottom:1px solid #e2e8f0;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem 1rem;display:flex}.filter-drawer-title{color:#1e293b;font-size:.875rem;font-weight:600}.filter-drawer-close{color:#475569;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:44px;height:44px;margin-right:-.75rem;display:inline-flex}.filter-drawer-body{padding:1rem;overflow-y:auto}@media (min-width:1024px){.filter-drawer{display:none}}:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}@media print{header,footer,#announcement-bar,.sidecart,.breadcrumb,nav[aria-label=breadcrumb]{display:none!important}.container{max-width:100%;padding:0}body{color:#000;background:#fff;font-size:12pt}a{color:#000;text-decoration:underline}img{max-width:100%}.product-grid{grid-template-columns:repeat(2,1fr)}}.sidecart-open{overflow:hidden}.sidecart-open .sidecart{overflow-x:hidden}.sidecart{outline:0;font-family:inherit;position:absolute;top:0;overflow:hidden}.sidecart .sidecart-dialog{width:100vw;transition:all .6s cubic-bezier(.75,0,.55,1);right:-100vw}.sidecart.show .sidecart-dialog{transition:all .6s cubic-bezier(.33,0,0,1);right:0}.sidecart .cart-btn{color:#1e293b;cursor:pointer;text-align:center;white-space:nowrap;-webkit-user-select:none;user-select:none;background-color:#e2e8f0;border:1px solid #0000;justify-content:center;padding:.8rem 1rem;transition:background-color .15s ease-out}.sidecart .cart-btn:hover{background-color:#cbd5e1;border:1px solid #0000}.sidecart .cart-btn:focus:not(:active){box-shadow:0 0 0 2px var(--primary-color)}.sidecart .text-right{text-align:right}.sidecart .text-center{text-align:center}.sidecart .error-text{color:#ef4444;font-size:small}.sidecart a{color:#1e293b}.sidecart a:hover{color:#475569}.sidecart button{-webkit-appearance:none;cursor:pointer;background-color:#0000;border:0;padding:0;font-family:inherit}.sidecart button.close{color:#475569;float:right;font-weight:400;line-height:.5;transition:color .15s ease-out}.sidecart button.close:hover{color:#1e293b}.sidecart-dialog{pointer-events:none;z-index:99999;height:100%;margin:auto;position:fixed}.sidecart-content{pointer-events:auto;background-color:#fff;background-clip:padding-box;border:none;border-radius:0;outline:0;flex-direction:column;height:100%;display:flex;position:relative;overflow-y:auto;box-shadow:0 0 1px 1px #8890c333}.sidecart-header{background-color:#fff;border-bottom:none;justify-content:center;align-items:center;height:60px;padding:1rem;display:flex;position:relative}.sidecart-header button.close{color:#475569;font-size:2rem;position:absolute;right:1rem}.sidecart-header button.close:hover{color:#1e293b}.sidecart-title{text-align:center;margin-bottom:0;font-weight:700}#basket-content-div{overflow-y:auto}.sidecart-body{position:inherit;flex:auto;padding:.5rem .5rem 6rem;overflow-y:auto}.sidecart-footer{background-color:#fff;border-top:1px solid #e2e8f0;width:auto;padding:1rem;display:flex;bottom:0}.sidecart-footer .cart-btn{text-align:center;cursor:pointer;border:1px solid #0000;border-radius:.3rem;width:100%;height:auto;padding:1.25rem;font-size:24px;font-weight:700;text-decoration:none;display:inline-block;background-color:var(--primary-color)!important;color:#fff!important}.sidecart-footer .cart-btn:hover{border:1px solid #0000;background-color:var(--primary-color-darker)!important;color:#fff!important}.sidecart .form-control{color:#1e293b;appearance:none;background-color:#fff;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:14px 10px;border:1px solid #e2e8f0;border-radius:.25rem;width:100%;padding:.25rem 2rem .25rem .5rem;font-size:.875rem;line-height:1.5;display:block}.cart-items{margin:0 0 20px}.cart-item{box-shadow:none;border-bottom:1px solid #e2e8f0;flex-flow:row;justify-content:flex-start;margin:0 0 .75rem;padding:.75rem;display:flex}.cart-item:first-child{border-top:1px solid #e2e8f0}.cart-item img{width:100%}.cart-item .item-img{width:110px;margin-right:5%;padding:5px}.cart-item .item-details{width:100%;padding-top:.5rem}.cart-item .item-title{margin-bottom:.5rem;font-family:inherit;font-size:1rem;font-weight:500;line-height:1.2;display:block}.cart-item .item-description{flex-flow:wrap;align-items:center;width:100%;margin:0 0 .5em;display:flex}.cart-item .item-description .basket-action{flex-direction:column;flex:40%;height:fit-content;margin-right:20px;display:flex}.cart-item .item-description .basket-action:last-child{margin-right:0}.cart-item .item-description label{margin-bottom:0;display:inline-block}.cart-item .item-description button.close{font-size:smaller}.cart-item .item-price{width:100%}.cart-item .close{font-size:1.5rem}table.sidecart-table{background-color:#0000;width:100%}table.sidecart-table td{vertical-align:top;border-top:1px solid #e2e8f0;padding:.75rem}table.sidecart-table tr:first-child td{border-top:none}table.sidecart-table.table-sm td{padding:.15rem;font-size:small}.cart-totals{font-size:initial}.cart-coupon-wrapper{padding:.75rem}.cart-coupon-wrapper h5{font-family:inherit;font-size:1em}.cart-coupon-wrapper table{width:100%}.cart-coupon-wrapper td:first-child{width:75%}.cart-coupon-wrapper .form-input-group .btn{padding:.75em;font-size:1.125em}.cart-coupon{margin:5% 0}.coupon-remove{font-size:1.5em}.coupon-form{margin:20px 0}.coupon-form .form-input-group{flex-wrap:wrap;width:auto;display:flex}.coupon-form .form-input-group input{background-color:#fff;border:1px solid #e2e8f0;flex:75%;padding:.8rem 1rem}.coupon-form .form-input-group .cart-btn{text-align:center;white-space:nowrap;flex:1;margin-top:10px}.coupon-code{font-size:initial;text-align:center;white-space:nowrap;vertical-align:baseline;color:#fff;background-color:#22c55e;padding:.1em .5em;font-weight:700;line-height:1}.loader{margin:25% 0}.loader .loading{text-align:center;margin:30px;padding:25px}.loader .loading:before{content:"";border-style:solid;border-width:4px;border-color:var(--primary-color) #eee #eee;border-radius:100%;width:50px;height:50px;margin:-25px auto auto -25px;animation:.7s linear infinite rotation;position:absolute;left:50%}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(359deg)}}.cart-empty{margin:25% 0}@media (min-width:768px) and (max-width:991.98px){.sidecart .sidecart-dialog{width:60vw}.sidecart-body{padding:1rem 1rem 6rem}.coupon-form .form-input-group input{flex:50%}.coupon-form .form-input-group .cart-btn{margin-top:0}}@media (min-width:992px){.sidecart .sidecart-dialog{width:50vw}.sidecart-body{padding:1rem 2rem 6rem}.coupon-form .form-input-group input{flex:50%}.coupon-form .form-input-group .cart-btn{margin-top:0}}@media (min-width:1200px){.sidecart .sidecart-dialog{width:45vw}}@media (min-width:1400px){.sidecart .sidecart-dialog{width:40vw}}@media (min-width:1600px){.sidecart .sidecart-dialog{width:35vw}}@media (max-width:576px){.cart-coupon-wrapper .form-input-group .btn{padding:.9em}}.cart-popover-wrapper{display:inline-block;position:relative}.cart-popover-wrapper .popover-content{opacity:0;visibility:hidden;background-color:#fff;width:auto;padding:.5rem;position:absolute;top:50px;left:-130px;transform:translateY(10px);box-shadow:0 2px 5px #00000042}.cart-popover-wrapper .popover-content p{margin-bottom:.5rem}.cart-popover-wrapper .popover-content table.popover-table{margin-top:.75em;margin-bottom:.75em;font-size:.875rem}.cart-popover-wrapper .popover-content table.popover-table tr:first-child td{border-top:none}.cart-popover-wrapper .popover-content table.popover-table tr:first-child td,.cart-popover-wrapper .popover-content table.popover-table tr:last-child td,.cart-popover-wrapper .popover-content table.popover-table tr:nth-last-child(2){font-weight:600}.cart-popover-wrapper .popover-content table.popover-table td{border-top:1px solid #dee2e6;padding:.375rem}.cart-popover-wrapper:hover .popover-content{z-index:10;opacity:1;visibility:visible;width:max-content;transition:all .5s cubic-bezier(.75,-.02,.2,.97);transform:translateY(-20px)}.cart-popover-wrapper .help-icon{cursor:pointer;vertical-align:middle;background-image:url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='18px' height='18px' fill='%23606975' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cg id='' style='opacity:0.75;'%3E%3Cg id='help'%3E%3Cpath id='circle' style='fill-rule:evenodd;clip-rule:evenodd;' d='M12.001,2.085c-5.478,0-9.916,4.438-9.916,9.916 c0,5.476,4.438,9.914,9.916,9.914c5.476,0,9.914-4.438,9.914-9.914C21.915,6.523,17.477,2.085,12.001,2.085z M12.002,20.085 c-4.465,0-8.084-3.619-8.084-8.083c0-4.465,3.619-8.084,8.084-8.084c4.464,0,8.083,3.619,8.083,8.084 C20.085,16.466,16.466,20.085,12.002,20.085z' /%3E%3Cg id='question_mark'%3E%3Cpath id='top' style='fill-rule:evenodd;clip-rule:evenodd;' d='M11.766,6.688c-2.5,0-3.219,2.188-3.219,2.188l1.411,0.854 c0,0,0.298-0.791,0.901-1.229c0.516-0.375,1.625-0.625,2.219,0.125c0.701,0.885-0.17,1.587-1.078,2.719 C11.047,12.531,11,15,11,15h1.969c0,0,0.135-2.318,1.041-3.381c0.603-0.707,1.443-1.338,1.443-2.494S14.266,6.688,11.766,6.688z' /%3E%3Crect id='bottom' x='11' y='16' style='fill-rule:evenodd;clip-rule:evenodd;' width='2' height='2' /%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;width:20px;height:20px;display:inline-block}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{top:calc(var(--spacing) * 0);right:calc(var(--spacing) * 0);bottom:calc(var(--spacing) * 0);left:calc(var(--spacing) * 0)}.end{right:var(--spacing)}.top-0{top:calc(var(--spacing) * 0)}.top-full{top:100%}.bottom-0{bottom:calc(var(--spacing) * 0)}.bottom-2{bottom:calc(var(--spacing) * 2)}.left-0{left:calc(var(--spacing) * 0)}.left-1\/2{left:50%}.z-50{z-index:50}.order-1{order:1}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mx-4{margin-left:calc(var(--spacing) * 4);margin-right:calc(var(--spacing) * 4)}.mx-auto{margin-left:auto;margin-right:auto}.my-8{margin-top:calc(var(--spacing) * 8);margin-bottom:calc(var(--spacing) * 8)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mt-10{margin-top:calc(var(--spacing) * 10)}.mt-12{margin-top:calc(var(--spacing) * 12)}.mt-16{margin-top:calc(var(--spacing) * 16)}.mt-auto{margin-top:auto}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.mb-8{margin-bottom:calc(var(--spacing) * 8)}.mb-10{margin-bottom:calc(var(--spacing) * 10)}.-ml-2{margin-left:calc(var(--spacing) * -2)}.ml-1{margin-left:calc(var(--spacing) * 1)}.ml-2{margin-left:calc(var(--spacing) * 2)}.ml-10{margin-left:calc(var(--spacing) * 10)}.ml-auto{margin-left:auto}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.aspect-square{aspect-ratio:1}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-3{height:calc(var(--spacing) * 3)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-8{height:calc(var(--spacing) * 8)}.h-10{height:calc(var(--spacing) * 10)}.h-16{height:calc(var(--spacing) * 16)}.h-20{height:calc(var(--spacing) * 20)}.h-28{height:calc(var(--spacing) * 28)}.h-48{height:calc(var(--spacing) * 48)}.h-\[50vh\]{height:50vh}.h-\[65vh\]{height:65vh}.h-full{height:100%}.h-screen{height:100vh}.max-h-16{max-height:calc(var(--spacing) * 16)}.max-h-20{max-height:calc(var(--spacing) * 20)}.max-h-80{max-height:calc(var(--spacing) * 80)}.min-h-\[44px\]{min-height:44px}.min-h-\[70vh\]{min-height:70vh}.w-1\.5{width:calc(var(--spacing) * 1.5)}.w-1\/3{width:33.3333%}.w-2\/3{width:66.6667%}.w-3\/4{width:75%}.w-4\/6{width:66.6667%}.w-5\/6{width:83.3333%}.w-10{width:calc(var(--spacing) * 10)}.w-20{width:calc(var(--spacing) * 20)}.w-28{width:calc(var(--spacing) * 28)}.w-32{width:calc(var(--spacing) * 32)}.w-48{width:calc(var(--spacing) * 48)}.w-52{width:calc(var(--spacing) * 52)}.w-56{width:calc(var(--spacing) * 56)}.w-72{width:calc(var(--spacing) * 72)}.w-auto{width:auto}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-md{max-width:var(--container-md)}.max-w-none{max-width:none}.max-w-xl{max-width:var(--container-xl)}.min-w-0{min-width:calc(var(--spacing) * 0)}.flex-1{flex:1}.flex-shrink{flex-shrink:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.gap-1{gap:calc(var(--spacing) * 1)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-8{gap:calc(var(--spacing) * 8)}.space-y-1>:not(:last-child){--tw-space-y-reverse:0;margin-top:calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));margin-bottom:calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)))}.space-y-2>:not(:last-child){--tw-space-y-reverse:0;margin-top:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-bottom:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}.space-y-3>:not(:last-child){--tw-space-y-reverse:0;margin-top:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-bottom:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}.space-y-4>:not(:last-child){--tw-space-y-reverse:0;margin-top:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-bottom:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}.space-y-6>:not(:last-child){--tw-space-y-reverse:0;margin-top:calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));margin-bottom:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))}.divide-y>:not(:last-child){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}.divide-slate-100>:not(:last-child){border-color:var(--color-slate-100)}.divide-slate-200>:not(:last-child){border-color:var(--color-slate-200)}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-none{--tw-border-style:none;border-style:none}.border-amber-200{border-color:var(--color-amber-200)}.border-blue-200{border-color:var(--color-blue-200)}.border-green-200{border-color:var(--color-green-200)}.border-red-200{border-color:var(--color-red-200)}.border-slate-100{border-color:var(--color-slate-100)}.border-slate-200{border-color:var(--color-slate-200)}.border-slate-800{border-color:var(--color-slate-800)}.bg-\[var\(--primary-color\)\]{background-color:var(--primary-color)}.bg-amber-50{background-color:var(--color-amber-50)}.bg-black\/30{background-color:#0000004d}.bg-black\/30{background-color:rgba(0,0,0,0.3)}.bg-blue-50{background-color:var(--color-blue-50)}.bg-green-50{background-color:var(--color-green-50)}.bg-red-50{background-color:var(--color-red-50)}.bg-slate-50{background-color:var(--color-slate-50)}.bg-slate-100{background-color:var(--color-slate-100)}.bg-slate-200{background-color:var(--color-slate-200)}.bg-slate-300{background-color:var(--color-slate-300)}.bg-slate-800{background-color:var(--color-slate-800)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.object-cover{object-fit:cover}.p-2{padding:calc(var(--spacing) * 2)}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.px-2{padding-left:calc(var(--spacing) * 2);padding-right:calc(var(--spacing) * 2)}.px-3{padding-left:calc(var(--spacing) * 3);padding-right:calc(var(--spacing) * 3)}.px-4{padding-left:calc(var(--spacing) * 4);padding-right:calc(var(--spacing) * 4)}.px-5{padding-left:calc(var(--spacing) * 5);padding-right:calc(var(--spacing) * 5)}.px-6{padding-left:calc(var(--spacing) * 6);padding-right:calc(var(--spacing) * 6)}.px-8{padding-left:calc(var(--spacing) * 8);padding-right:calc(var(--spacing) * 8)}.py-0\.5{padding-top:calc(var(--spacing) * .5);padding-bottom:calc(var(--spacing) * .5)}.py-1{padding-top:calc(var(--spacing) * 1);padding-bottom:calc(var(--spacing) * 1)}.py-2{padding-top:calc(var(--spacing) * 2);padding-bottom:calc(var(--spacing) * 2)}.py-2\.5{padding-top:calc(var(--spacing) * 2.5);padding-bottom:calc(var(--spacing) * 2.5)}.py-3{padding-top:calc(var(--spacing) * 3);padding-bottom:calc(var(--spacing) * 3)}.py-4{padding-top:calc(var(--spacing) * 4);padding-bottom:calc(var(--spacing) * 4)}.py-6{padding-top:calc(var(--spacing) * 6);padding-bottom:calc(var(--spacing) * 6)}.py-8{padding-top:calc(var(--spacing) * 8);padding-bottom:calc(var(--spacing) * 8)}.py-12{padding-top:calc(var(--spacing) * 12);padding-bottom:calc(var(--spacing) * 12)}.py-16{padding-top:calc(var(--spacing) * 16);padding-bottom:calc(var(--spacing) * 16)}.py-20{padding-top:calc(var(--spacing) * 20);padding-bottom:calc(var(--spacing) * 20)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-6{padding-top:calc(var(--spacing) * 6)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-4{padding-left:calc(var(--spacing) * 4)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-5{--tw-leading:calc(var(--spacing) * 5);line-height:calc(var(--spacing) * 5)}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-amber-400{color:var(--color-amber-400)}.text-amber-800{color:var(--color-amber-800)}.text-blue-800{color:var(--color-blue-800)}.text-current{color:currentColor}.text-green-600{color:var(--color-green-600)}.text-green-800{color:var(--color-green-800)}.text-red-400{color:var(--color-red-400)}.text-red-500{color:var(--color-red-500)}.text-red-800{color:var(--color-red-800)}.text-slate-200{color:var(--color-slate-200)}.text-slate-300{color:var(--color-slate-300)}.text-slate-400{color:var(--color-slate-400)}.text-slate-500{color:var(--color-slate-500)}.text-slate-600{color:var(--color-slate-600)}.text-slate-700{color:var(--color-slate-700)}.text-slate-800{color:var(--color-slate-800)}.text-slate-900{color:var(--color-slate-900)}.text-white{color:var(--color-white)}.text-white\/70{color:#ffffffb3}.text-white\/70{color:rgba(255,255,255,0.7)}.uppercase{text-transform:uppercase}.not-italic{font-style:normal}.line-through{text-decoration-line:line-through}.underline{text-decoration-line:underline}.accent-\[var\(--primary-color\)\]{accent-color:var(--primary-color)}.opacity-90{opacity:.9}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-300{--tw-duration:.3s;transition-duration:.3s}.outline-none{--tw-outline-style:none;outline-style:none}@media (hover:hover){.group-hover\:scale-105.group:hover *{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.group-hover\:text-slate-600.group:hover *{color:var(--color-slate-600)}}.focus-within\:border-slate-400:focus-within{border-color:var(--color-slate-400)}@media (hover:hover){.hover\:border-slate-400:hover{border-color:var(--color-slate-400)}.hover\:bg-slate-50:hover{background-color:var(--color-slate-50)}.hover\:bg-slate-100:hover{background-color:var(--color-slate-100)}.hover\:bg-slate-200:hover{background-color:var(--color-slate-200)}.hover\:text-red-500:hover{color:var(--color-red-500)}.hover\:text-red-600:hover{color:var(--color-red-600)}.hover\:text-slate-600:hover{color:var(--color-slate-600)}.hover\:text-slate-700:hover{color:var(--color-slate-700)}.hover\:text-slate-800:hover{color:var(--color-slate-800)}.hover\:text-slate-900:hover{color:var(--color-slate-900)}.hover\:text-white:hover{color:var(--color-white)}.hover\:opacity-70:hover{opacity:.7}.hover\:opacity-80:hover{opacity:.8}}@media (min-width:40rem){.sm\:mb-0{margin-bottom:calc(var(--spacing) * 0)}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:justify-between{justify-content:space-between}}@media (min-width:48rem){.md\:absolute{position:absolute}.md\:sticky{position:sticky}.md\:top-24{top:calc(var(--spacing) * 24)}.md\:left-1\/2{left:50%}.md\:order-1{order:1}.md\:order-2{order:2}.md\:order-3{order:3}.md\:order-none{order:0}.md\:col-span-1{grid-column:span 1/span 1}.md\:col-span-2{grid-column:span 2/span 2}.md\:col-span-3{grid-column:span 3/span 3}.md\:mx-8{margin-left:calc(var(--spacing) * 8);margin-right:calc(var(--spacing) * 8)}.md\:ml-auto{margin-left:auto}.md\:block{display:block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:h-64{height:calc(var(--spacing) * 64)}.md\:h-\[70vh\]{height:70vh}.md\:h-\[80vh\]{height:80vh}.md\:-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-center{align-items:center}.md\:justify-between{justify-content:space-between}.md\:gap-12{gap:calc(var(--spacing) * 12)}.md\:p-12{padding:calc(var(--spacing) * 12)}.md\:py-12{padding-top:calc(var(--spacing) * 12);padding-bottom:calc(var(--spacing) * 12)}.md\:py-16{padding-top:calc(var(--spacing) * 16);padding-bottom:calc(var(--spacing) * 16)}.md\:py-20{padding-top:calc(var(--spacing) * 20);padding-bottom:calc(var(--spacing) * 20)}.md\:py-24{padding-top:calc(var(--spacing) * 24);padding-bottom:calc(var(--spacing) * 24)}.md\:py-32{padding-top:calc(var(--spacing) * 32);padding-bottom:calc(var(--spacing) * 32)}.md\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.md\:text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.md\:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.md\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}}.nav-item{position:relative}.nav-item:hover>.nav-submenu,.nav-item:focus-within>.nav-submenu{opacity:1;pointer-events:auto;transform:scale(1)}.nav-submenu{opacity:0;transform-origin:0 0;pointer-events:none;z-index:80;transition:all .2s ease-out;transform:scale(.98)}.spark-preview-indicator{z-index:100;color:#fff;background:#0f172a;border:1px solid #fff3;border-radius:.75rem;align-items:center;gap:.75rem;max-width:calc(100vw - 2rem);padding:.75rem 1rem;font-size:.875rem;line-height:1.25rem;display:flex;position:fixed;bottom:1rem;right:1rem;box-shadow:0 12px 32px #0f172a47}.spark-preview-indicator__message{font-weight:600}.spark-preview-indicator__exit{color:#0f172a;background:#fff;border-radius:.375rem;padding:.25rem .5rem;font-weight:700;text-decoration:none}.spark-preview-indicator__exit:focus-visible{outline-offset:3px;outline:3px solid #fbbf24}@media (hover:hover){.spark-preview-indicator__exit:hover{color:#0f172a;opacity:1;background:#e2e8f0}}@media not all and (min-width:30rem){.spark-preview-indicator{justify-content:space-between;max-width:none;bottom:.75rem;left:.75rem;right:.75rem}}.variant-option-list{flex-wrap:wrap;gap:.5rem;display:flex}.variant-option{display:inline-flex;position:relative}.variant-option input{opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute;top:0;right:0;bottom:0;left:0}.variant-option-label{color:#334155;white-space:nowrap;cursor:pointer;background-color:#fff;border:1px solid #e2e8f0;justify-content:center;align-items:center;min-height:44px;padding:0 1.25rem;font-size:.875rem;line-height:1.25rem;transition:border-color .15s ease-out,background-color .15s ease-out,color .15s ease-out;display:inline-flex}.variant-option:hover .variant-option-label{border-color:#94a3b8}.variant-option input:focus-visible+.variant-option-label{outline:2px solid var(--primary-color);outline-offset:2px}.variant-option input:checked+.variant-option-label{background-color:var(--primary-color);border-color:var(--primary-color);color:#fff}[data-light-primary] .variant-option input:checked+.variant-option-label{color:#1e293b}.variant-option[data-variant-unavailable=true] input:not(:checked)+.variant-option-label{opacity:.55;color:#64748b}.variant-option[data-variant-unavailable=true] .variant-option-label:after{content:"";pointer-events:none;background-image:linear-gradient(to top right,#fff0 47.5%,#94a3b8 47.5% 52.5%,#fff0 52.5%);position:absolute;top:0;right:0;bottom:0;left:0}.variant-option input:checked+.variant-option-label:after{background-image:linear-gradient(to top right,#fff0 47.5%,#fff 47.5% 52.5%,#fff0 52.5%)}[data-light-primary] .variant-option input:checked+.variant-option-label:after{background-image:linear-gradient(to top right,#fff0 47.5%,#1e293b 47.5% 52.5%,#fff0 52.5%)}.variant-option-value{color:#0f172a;font-weight:500}.variant-size-guide{color:#475569;text-underline-offset:2px;font-size:.75rem;line-height:1rem;text-decoration:underline} \ No newline at end of file +*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-top:initial;right:initial;bottom:initial;left:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-50:#fef2f2;--color-red-200:#ffc9c9;--color-red-400:#ff6467;--color-red-500:#fb2c36;--color-red-600:#e7000b;--color-red-800:#9f0712;--color-amber-50:#fffbeb;--color-amber-200:#fee685;--color-amber-400:#ffb900;--color-amber-800:#973c00;--color-green-50:#f0fdf4;--color-green-200:#b9f8cf;--color-green-600:#00a63e;--color-green-800:#016630;--color-blue-50:#eff6ff;--color-blue-200:#bedbff;--color-blue-800:#193cb8;--color-slate-50:#f8fafc;--color-slate-100:#f1f5f9;--color-slate-200:#e2e8f0;--color-slate-300:#cbd5e1;--color-slate-400:#94a3b8;--color-slate-500:#64748b;--color-slate-600:#475569;--color-slate-700:#334155;--color-slate-800:#1e293b;--color-slate-900:#0f172a;--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-md:28rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-5xl:3rem;--text-5xl--line-height:1;--text-6xl:3.75rem;--text-6xl--line-height:1;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--tracking-wider:.05em;--leading-tight:1.25;--leading-relaxed:1.625;--radius-md:.375rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}select[multiple],[size] optgroup{font-weight:bolder}select[multiple],[size] optgroup option{padding-left:20px}::file-selector-button{margin-right:4px}::placeholder{opacity:1}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-year-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-month-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-day-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-hour-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-minute-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-second-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-millisecond-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input[type=button],[type=reset],[type=submit]{appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:not([hidden=until-found]){display:none!important}:root{--primary-color:#1e293b;--accent-color:#475569}body{font-family:var(--font-sans);font-size:var(--body-size,1rem);color:#1e293b;background-color:var(--body-bg-color,#fff);line-height:1.6}h1,h2,h3,h4,h5,h6{color:#1e293b;font-weight:600;line-height:1.2}a{color:var(--primary-color);text-decoration:none}a:hover{opacity:.8}img{max-width:100%;height:auto}.btn{border-radius:var(--control-radius,.25rem);cursor:pointer;justify-content:center;align-items:center;padding:.625rem 1.5rem;font-size:.875rem;font-weight:500;line-height:1.25rem;transition:opacity .15s ease-out;display:inline-flex}.btn:hover{opacity:.9}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background-color:var(--primary-color)!important;color:#fff!important;border-color:var(--primary-color)!important}.btn-accent{background-color:var(--accent-color)!important;color:#fff!important;border-color:var(--accent-color)!important}.btn-outline{color:var(--btn-color,var(--primary-color))!important;border:1px solid var(--btn-color,var(--primary-color))!important;background-color:#0000!important}.btn-secondary{color:var(--primary-color);border:1px solid var(--border-color,#e2e8f0);background-color:#0000}.btn-secondary:hover{background-color:#f8fafc}.container{width:100%;max-width:var(--container-max,1280px);margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}@media (min-width:768px){.container{padding-left:1.5rem;padding-right:1.5rem}}.product-card{border-radius:var(--card-radius,0);flex-direction:column;display:flex;overflow:hidden}.product-card-bordered{border:1px solid var(--border-color,#e2e8f0)}.product-card-bordered .product-title{padding-left:1rem;padding-right:1rem}.product-card-bordered .product-price{padding-bottom:1rem;padding-left:1rem;padding-right:1rem}.product-card img{aspect-ratio:1;object-fit:cover;background-color:#f8fafc}.product-card .product-title{margin-top:.75rem;font-size:.875rem;font-weight:500}.product-card .product-price{color:#475569;margin-top:.25rem;font-size:.875rem}[data-spark-membership-price][data-membership-active=true] [data-spark-public-price]{color:#94a3b8;font-weight:400;text-decoration-line:line-through}.spark-member-price{color:#1e293b;flex-wrap:wrap;align-items:baseline;gap:.375rem;margin-top:.25rem;display:flex}.spark-member-price-label{color:var(--primary-color);text-transform:uppercase;font-size:.75rem;font-weight:600}.spark-member-price-value{font-weight:700}.spark-member-price-detail{color:#64748b;font-size:.75rem;font-weight:400}.product-card .spark-member-price,[data-spark-membership-layout=sticky] .spark-member-price{gap:.25rem;margin-top:.125rem}.product-card .spark-member-price-label,[data-spark-membership-layout=sticky] .spark-member-price-label{font-size:.6875rem}[data-spark-membership-layout=sticky][data-membership-active=true]{line-height:1.25;display:block}.product-grid{gap:var(--content-gap,1.5rem);grid-template-columns:repeat(1,1fr);display:grid}@media (min-width:768px){.product-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.product-grid{grid-template-columns:repeat(var(--product-grid-columns,3), 1fr)}}.category-grid{gap:calc(var(--content-gap,1.5rem) * 2 / 3);grid-template-columns:repeat(1,1fr);display:grid}@media (min-width:768px){.category-grid{grid-template-columns:repeat(var(--category-grid-columns,2), 1fr)}}.skeleton-card{flex-direction:column;display:flex}.skeleton-card .skeleton-image{aspect-ratio:1;background-color:#f1f5f9;position:relative;overflow:hidden}.skeleton-card .skeleton-image:after{content:"";background:linear-gradient(90deg,#f1f5f9,#e2e8f0,#f1f5f9);animation:1.5s ease-in-out infinite shimmer;position:absolute;top:0;right:0;bottom:0;left:0}.skeleton-card .skeleton-text{background-color:#f1f5f9;height:12px;margin-top:.75rem;position:relative;overflow:hidden}.skeleton-card .skeleton-text:after{content:"";background:linear-gradient(90deg,#f1f5f9,#e2e8f0,#f1f5f9);animation:1.5s ease-in-out infinite shimmer;position:absolute;top:0;right:0;bottom:0;left:0}.skeleton-card .skeleton-text-short{background-color:#f1f5f9;width:40%;height:12px;margin-top:.25rem;position:relative;overflow:hidden}.skeleton-card .skeleton-text-short:after{content:"";background:linear-gradient(90deg,#f1f5f9,#e2e8f0,#f1f5f9);animation:1.5s ease-in-out infinite shimmer;position:absolute;top:0;right:0;bottom:0;left:0}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.cart-badge{background-color:var(--primary-color);color:#fff;text-align:center;pointer-events:none;border-radius:50%;width:16px;height:16px;font-size:10px;font-weight:600;line-height:16px;position:absolute;top:-4px;right:-4px}[data-light-primary] .cart-badge{color:#1e293b}.cart-badge[data-animate]{animation:.3s ease-out badge-pulse}@keyframes badge-pulse{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.spark-gallery{flex-direction:column;gap:.75rem;display:flex}@media (min-width:768px){.spark-gallery-left{flex-direction:row-reverse;gap:.75rem}.spark-gallery-left .spark-gallery-main{flex:1;min-width:0}.spark-gallery-left .spark-gallery-thumbs{flex-direction:column;justify-content:flex-start;width:72px;max-height:520px;overflow:hidden auto}.spark-gallery-left .spark-gallery-thumb{flex-shrink:0;width:72px;height:72px}}.spark-gallery-main{aspect-ratio:1;background-color:#f8fafc;max-height:560px;position:relative;overflow:hidden}.spark-gallery-hero{object-fit:contain;width:100%;height:100%;transition:opacity .2s ease-out}.spark-gallery-hero.spark-gallery-fading{opacity:0}.spark-gallery-thumbs{scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent;justify-content:center;gap:.5rem;padding:.25rem 0;display:flex;overflow:auto hidden}.spark-gallery-thumb{cursor:pointer;opacity:.6;background:#f8fafc;border:2px solid #0000;flex-shrink:0;width:72px;height:72px;padding:0;transition:border-color .2s ease-out,opacity .2s ease-out;overflow:hidden}.spark-gallery-thumb:hover{opacity:1;border-color:#cbd5e1}.spark-gallery-thumb-active{opacity:1!important;border-color:var(--primary-color)!important}.spark-gallery-prev,.spark-gallery-next{cursor:pointer;color:#475569;opacity:0;z-index:2;background:#ffffffe6;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;transition:opacity .2s ease-out,background-color .15s ease-out;display:flex;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 1px 3px #0000001a}.spark-gallery-prev{left:.75rem}.spark-gallery-next{right:.75rem}.spark-gallery-prev:hover,.spark-gallery-next:hover{color:#1e293b;background:#fff}.spark-gallery:hover .spark-gallery-prev,.spark-gallery:hover .spark-gallery-next,.spark-gallery:focus-within .spark-gallery-prev,.spark-gallery:focus-within .spark-gallery-next{opacity:1}@media (hover:none){.spark-gallery-prev,.spark-gallery-next{opacity:.7}}.sticky-atc{z-index:50;background:#fff;border-top:1px solid #e2e8f0;transition:transform .25s ease-out;position:fixed;bottom:0;left:0;right:0;transform:translateY(100%);box-shadow:0 -2px 8px #0000000f}.sticky-atc-visible{transform:translateY(0)}.sticky-atc-inner{justify-content:space-between;align-items:center;gap:1rem;max-width:1280px;margin:0 auto;padding:.75rem 1rem;display:flex}.sticky-atc-info{flex-direction:column;min-width:0;display:flex}.sticky-atc-title{color:#1e293b;white-space:nowrap;text-overflow:ellipsis;font-size:.875rem;font-weight:500;overflow:hidden}.sticky-atc-price{color:#475569;font-size:.875rem}.sticky-atc-btn{white-space:nowrap;flex-shrink:0;padding:.625rem 1.5rem}@media (min-width:1024px){.sticky-atc{display:none}}.search-overlay{z-index:60;opacity:0;visibility:hidden;justify-content:center;align-items:flex-start;transition:opacity .2s ease-out,visibility .2s ease-out;display:flex;position:fixed;top:0;right:0;bottom:0;left:0}.search-overlay-visible{opacity:1;visibility:visible}.search-overlay-backdrop{background:#0006;position:absolute;top:0;right:0;bottom:0;left:0}.search-overlay-content{z-index:1;width:100%;max-width:640px;margin-top:5rem;padding:0 1rem;transition:transform .2s ease-out;position:relative;transform:translateY(-12px)}.search-overlay-visible .search-overlay-content{transform:translateY(0)}.search-overlay-form{background:#fff;border:1px solid #e2e8f0;align-items:center;display:flex;box-shadow:0 8px 30px #0000001f}.search-overlay-input{color:#1e293b;background:0 0;border:none;outline:none;flex:1;padding:1rem 1.25rem;font-size:1rem}.search-overlay-input::placeholder{color:#94a3b8}.search-overlay-submit{color:#475569;cursor:pointer;background:0 0;border:none;padding:.75rem}.search-overlay-submit:hover{color:#1e293b}.search-overlay-close{color:#94a3b8;cursor:pointer;background:0 0;border:none;padding:.75rem}.search-overlay-close:hover{color:#475569}.sr-only,.skip-to-content{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-to-content:focus{z-index:100;clip:auto;width:auto;height:auto;font-family:var(--font-sans);background-color:#1e293b;border:1px solid #1e293b;border-radius:2px;margin:0;padding:.625rem 1rem;font-size:.875rem;font-weight:500;line-height:1.25rem;top:1rem;left:1rem;overflow:visible;color:#fff!important}@media (min-width:1024px){.catalogue-layout{grid-template-columns:15rem minmax(0,1fr);align-items:start;gap:2rem;display:grid}}.catalogue-rail{display:none}@media (min-width:1024px){.catalogue-rail{display:block;position:sticky;top:5.5rem}}.catalogue-filter-inline{margin-bottom:1.5rem;display:flex}@media (min-width:1024px){.catalogue-filter-inline{display:none}}.catalogue-filter-button{color:#1e293b;cursor:pointer;background:#fff;border:1px solid #e2e8f0;border-radius:.25rem;justify-content:center;align-items:center;gap:.5rem;width:100%;min-height:44px;padding:.625rem 1rem;font-family:inherit;font-size:.875rem;font-weight:500;line-height:1.25rem;display:inline-flex}.catalogue-bar{z-index:50;visibility:hidden;pointer-events:none;background:#fff;border-top:1px solid #e2e8f0;transition:transform .25s ease-in,visibility 0s linear .25s;position:fixed;bottom:0;left:0;right:0;transform:translateY(100%)}.catalogue-bar-visible{visibility:visible;pointer-events:auto;transition:transform .25s ease-out;transform:translateY(0)}.catalogue-bar-inner{align-items:stretch;gap:.75rem;max-width:1280px;margin:0 auto;padding:.75rem 1rem;display:flex}.catalogue-bar-control{flex:1 1 0;min-width:0}.catalogue-bar-count{background:var(--primary-color);color:#fff;border-radius:9999px;justify-content:center;align-items:center;min-width:1.25rem;height:1.25rem;padding:0 .25rem;font-size:10px;font-weight:600;line-height:1;display:inline-flex}@media (min-width:1024px){.catalogue-bar{display:none}}.filter-drawer{z-index:60;visibility:hidden;pointer-events:none;position:fixed;top:0;right:0;bottom:0;left:0}.filter-drawer-visible{visibility:visible;pointer-events:auto}.filter-drawer-backdrop{opacity:0;background:#0000004d;transition:opacity .2s ease-out;position:absolute;top:0;right:0;bottom:0;left:0}.filter-drawer-visible .filter-drawer-backdrop{opacity:1}.filter-drawer-panel{background:#fff;border-top:1px solid #e2e8f0;flex-direction:column;max-height:85vh;transition:transform .25s ease-out;display:flex;position:absolute;bottom:0;left:0;right:0;transform:translateY(100%)}.filter-drawer-visible .filter-drawer-panel{transform:translateY(0)}.filter-drawer-header{border-bottom:1px solid #e2e8f0;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem 1rem;display:flex}.filter-drawer-title{color:#1e293b;font-size:.875rem;font-weight:600}.filter-drawer-close{color:#475569;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:44px;height:44px;margin-right:-.75rem;display:inline-flex}.filter-drawer-body{padding:1rem;overflow-y:auto}@media (min-width:1024px){.filter-drawer{display:none}}:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}@media print{header,footer,#announcement-bar,.sidecart,.breadcrumb,nav[aria-label=breadcrumb]{display:none!important}.container{max-width:100%;padding:0}body{color:#000;background:#fff;font-size:12pt}a{color:#000;text-decoration:underline}img{max-width:100%}.product-grid{grid-template-columns:repeat(2,1fr)}}.sidecart-open{overflow:hidden}.sidecart-open .sidecart{overflow-x:hidden}.sidecart{outline:0;font-family:inherit;position:absolute;top:0;overflow:hidden}.sidecart .sidecart-dialog{width:100vw;transition:all .6s cubic-bezier(.75,0,.55,1);right:-100vw}.sidecart.show .sidecart-dialog{transition:all .6s cubic-bezier(.33,0,0,1);right:0}.sidecart .cart-btn{color:#1e293b;cursor:pointer;text-align:center;white-space:nowrap;-webkit-user-select:none;user-select:none;background-color:#e2e8f0;border:1px solid #0000;justify-content:center;padding:.8rem 1rem;transition:background-color .15s ease-out}.sidecart .cart-btn:hover{background-color:#cbd5e1;border:1px solid #0000}.sidecart .cart-btn:focus:not(:active){box-shadow:0 0 0 2px var(--primary-color)}.sidecart .text-right{text-align:right}.sidecart .text-center{text-align:center}.sidecart .error-text{color:#ef4444;font-size:small}.sidecart a{color:#1e293b}.sidecart a:hover{color:#475569}.sidecart button{-webkit-appearance:none;cursor:pointer;background-color:#0000;border:0;padding:0;font-family:inherit}.sidecart button.close{color:#475569;float:right;font-weight:400;line-height:.5;transition:color .15s ease-out}.sidecart button.close:hover{color:#1e293b}.sidecart-dialog{pointer-events:none;z-index:99999;height:100%;margin:auto;position:fixed}.sidecart-content{pointer-events:auto;background-color:#fff;background-clip:padding-box;border:none;border-radius:0;outline:0;flex-direction:column;height:100%;display:flex;position:relative;overflow-y:auto;box-shadow:0 0 1px 1px #8890c333}.sidecart-header{background-color:#fff;border-bottom:none;justify-content:center;align-items:center;height:60px;padding:1rem;display:flex;position:relative}.sidecart-header button.close{color:#475569;font-size:2rem;position:absolute;right:1rem}.sidecart-header button.close:hover{color:#1e293b}.sidecart-title{text-align:center;margin-bottom:0;font-weight:700}#basket-content-div{overflow-y:auto}.sidecart-body{position:inherit;flex:auto;padding:.5rem .5rem 6rem;overflow-y:auto}.sidecart-footer{background-color:#fff;border-top:1px solid #e2e8f0;width:auto;padding:1rem;display:flex;bottom:0}.sidecart-footer .cart-btn{text-align:center;cursor:pointer;border:1px solid #0000;border-radius:.3rem;width:100%;height:auto;padding:1.25rem;font-size:24px;font-weight:700;text-decoration:none;display:inline-block;background-color:var(--primary-color)!important;color:#fff!important}.sidecart-footer .cart-btn:hover{border:1px solid #0000;background-color:var(--primary-color-darker)!important;color:#fff!important}.sidecart .form-control{color:#1e293b;appearance:none;background-color:#fff;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:14px 10px;border:1px solid #e2e8f0;border-radius:.25rem;width:100%;padding:.25rem 2rem .25rem .5rem;font-size:.875rem;line-height:1.5;display:block}.cart-items{margin:0 0 20px}.cart-item{box-shadow:none;border-bottom:1px solid #e2e8f0;flex-flow:row;justify-content:flex-start;margin:0 0 .75rem;padding:.75rem;display:flex}.cart-item:first-child{border-top:1px solid #e2e8f0}.cart-item img{width:100%}.cart-item .item-img{width:110px;margin-right:5%;padding:5px}.cart-item .item-details{width:100%;padding-top:.5rem}.cart-item .item-title{margin-bottom:.5rem;font-family:inherit;font-size:1rem;font-weight:500;line-height:1.2;display:block}.cart-item .item-description{flex-flow:wrap;align-items:center;width:100%;margin:0 0 .5em;display:flex}.cart-item .item-description .basket-action{flex-direction:column;flex:40%;height:fit-content;margin-right:20px;display:flex}.cart-item .item-description .basket-action:last-child{margin-right:0}.cart-item .item-description label{margin-bottom:0;display:inline-block}.cart-item .item-description button.close{font-size:smaller}.cart-item .item-price{width:100%}.cart-item .close{font-size:1.5rem}table.sidecart-table{background-color:#0000;width:100%}table.sidecart-table td{vertical-align:top;border-top:1px solid #e2e8f0;padding:.75rem}table.sidecart-table tr:first-child td{border-top:none}table.sidecart-table.table-sm td{padding:.15rem;font-size:small}.cart-totals{font-size:initial}.cart-coupon-wrapper{padding:.75rem}.cart-coupon-wrapper h5{font-family:inherit;font-size:1em}.cart-coupon-wrapper table{width:100%}.cart-coupon-wrapper td:first-child{width:75%}.cart-coupon-wrapper .form-input-group .btn{padding:.75em;font-size:1.125em}.cart-coupon{margin:5% 0}.coupon-remove{font-size:1.5em}.coupon-form{margin:20px 0}.coupon-form .form-input-group{flex-wrap:wrap;width:auto;display:flex}.coupon-form .form-input-group input{background-color:#fff;border:1px solid #e2e8f0;flex:75%;padding:.8rem 1rem}.coupon-form .form-input-group .cart-btn{text-align:center;white-space:nowrap;flex:1;margin-top:10px}.coupon-code{font-size:initial;text-align:center;white-space:nowrap;vertical-align:baseline;color:#fff;background-color:#22c55e;padding:.1em .5em;font-weight:700;line-height:1}.loader{margin:25% 0}.loader .loading{text-align:center;margin:30px;padding:25px}.loader .loading:before{content:"";border-style:solid;border-width:4px;border-color:var(--primary-color) #eee #eee;border-radius:100%;width:50px;height:50px;margin:-25px auto auto -25px;animation:.7s linear infinite rotation;position:absolute;left:50%}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(359deg)}}.cart-empty{margin:25% 0}@media (min-width:768px) and (max-width:991.98px){.sidecart .sidecart-dialog{width:60vw}.sidecart-body{padding:1rem 1rem 6rem}.coupon-form .form-input-group input{flex:50%}.coupon-form .form-input-group .cart-btn{margin-top:0}}@media (min-width:992px){.sidecart .sidecart-dialog{width:50vw}.sidecart-body{padding:1rem 2rem 6rem}.coupon-form .form-input-group input{flex:50%}.coupon-form .form-input-group .cart-btn{margin-top:0}}@media (min-width:1200px){.sidecart .sidecart-dialog{width:45vw}}@media (min-width:1400px){.sidecart .sidecart-dialog{width:40vw}}@media (min-width:1600px){.sidecart .sidecart-dialog{width:35vw}}@media (max-width:576px){.cart-coupon-wrapper .form-input-group .btn{padding:.9em}}.cart-popover-wrapper{display:inline-block;position:relative}.cart-popover-wrapper .popover-content{opacity:0;visibility:hidden;background-color:#fff;width:auto;padding:.5rem;position:absolute;top:50px;left:-130px;transform:translateY(10px);box-shadow:0 2px 5px #00000042}.cart-popover-wrapper .popover-content p{margin-bottom:.5rem}.cart-popover-wrapper .popover-content table.popover-table{margin-top:.75em;margin-bottom:.75em;font-size:.875rem}.cart-popover-wrapper .popover-content table.popover-table tr:first-child td{border-top:none}.cart-popover-wrapper .popover-content table.popover-table tr:first-child td,.cart-popover-wrapper .popover-content table.popover-table tr:last-child td,.cart-popover-wrapper .popover-content table.popover-table tr:nth-last-child(2){font-weight:600}.cart-popover-wrapper .popover-content table.popover-table td{border-top:1px solid #dee2e6;padding:.375rem}.cart-popover-wrapper:hover .popover-content{z-index:10;opacity:1;visibility:visible;width:max-content;transition:all .5s cubic-bezier(.75,-.02,.2,.97);transform:translateY(-20px)}.cart-popover-wrapper .help-icon{cursor:pointer;vertical-align:middle;background-image:url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='18px' height='18px' fill='%23606975' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cg id='' style='opacity:0.75;'%3E%3Cg id='help'%3E%3Cpath id='circle' style='fill-rule:evenodd;clip-rule:evenodd;' d='M12.001,2.085c-5.478,0-9.916,4.438-9.916,9.916 c0,5.476,4.438,9.914,9.916,9.914c5.476,0,9.914-4.438,9.914-9.914C21.915,6.523,17.477,2.085,12.001,2.085z M12.002,20.085 c-4.465,0-8.084-3.619-8.084-8.083c0-4.465,3.619-8.084,8.084-8.084c4.464,0,8.083,3.619,8.083,8.084 C20.085,16.466,16.466,20.085,12.002,20.085z' /%3E%3Cg id='question_mark'%3E%3Cpath id='top' style='fill-rule:evenodd;clip-rule:evenodd;' d='M11.766,6.688c-2.5,0-3.219,2.188-3.219,2.188l1.411,0.854 c0,0,0.298-0.791,0.901-1.229c0.516-0.375,1.625-0.625,2.219,0.125c0.701,0.885-0.17,1.587-1.078,2.719 C11.047,12.531,11,15,11,15h1.969c0,0,0.135-2.318,1.041-3.381c0.603-0.707,1.443-1.338,1.443-2.494S14.266,6.688,11.766,6.688z' /%3E%3Crect id='bottom' x='11' y='16' style='fill-rule:evenodd;clip-rule:evenodd;' width='2' height='2' /%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;width:20px;height:20px;display:inline-block}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{top:calc(var(--spacing) * 0);right:calc(var(--spacing) * 0);bottom:calc(var(--spacing) * 0);left:calc(var(--spacing) * 0)}.end{right:var(--spacing)}.top-0{top:calc(var(--spacing) * 0)}.top-full{top:100%}.bottom-0{bottom:calc(var(--spacing) * 0)}.bottom-2{bottom:calc(var(--spacing) * 2)}.left-0{left:calc(var(--spacing) * 0)}.left-1\/2{left:50%}.z-50{z-index:50}.order-1{order:1}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mx-4{margin-left:calc(var(--spacing) * 4);margin-right:calc(var(--spacing) * 4)}.mx-auto{margin-left:auto;margin-right:auto}.my-8{margin-top:calc(var(--spacing) * 8);margin-bottom:calc(var(--spacing) * 8)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mt-10{margin-top:calc(var(--spacing) * 10)}.mt-12{margin-top:calc(var(--spacing) * 12)}.mt-16{margin-top:calc(var(--spacing) * 16)}.mt-auto{margin-top:auto}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.mb-8{margin-bottom:calc(var(--spacing) * 8)}.mb-10{margin-bottom:calc(var(--spacing) * 10)}.-ml-2{margin-left:calc(var(--spacing) * -2)}.ml-1{margin-left:calc(var(--spacing) * 1)}.ml-2{margin-left:calc(var(--spacing) * 2)}.ml-10{margin-left:calc(var(--spacing) * 10)}.ml-auto{margin-left:auto}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.aspect-square{aspect-ratio:1}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-3{height:calc(var(--spacing) * 3)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-8{height:calc(var(--spacing) * 8)}.h-10{height:calc(var(--spacing) * 10)}.h-16{height:calc(var(--spacing) * 16)}.h-20{height:calc(var(--spacing) * 20)}.h-28{height:calc(var(--spacing) * 28)}.h-48{height:calc(var(--spacing) * 48)}.h-\[50vh\]{height:50vh}.h-\[65vh\]{height:65vh}.h-full{height:100%}.h-screen{height:100vh}.max-h-16{max-height:calc(var(--spacing) * 16)}.max-h-20{max-height:calc(var(--spacing) * 20)}.max-h-80{max-height:calc(var(--spacing) * 80)}.min-h-\[44px\]{min-height:44px}.min-h-\[70vh\]{min-height:70vh}.w-1\.5{width:calc(var(--spacing) * 1.5)}.w-1\/3{width:33.3333%}.w-2\/3{width:66.6667%}.w-3\/4{width:75%}.w-4\/6{width:66.6667%}.w-5\/6{width:83.3333%}.w-10{width:calc(var(--spacing) * 10)}.w-20{width:calc(var(--spacing) * 20)}.w-28{width:calc(var(--spacing) * 28)}.w-32{width:calc(var(--spacing) * 32)}.w-48{width:calc(var(--spacing) * 48)}.w-52{width:calc(var(--spacing) * 52)}.w-56{width:calc(var(--spacing) * 56)}.w-72{width:calc(var(--spacing) * 72)}.w-auto{width:auto}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-md{max-width:var(--container-md)}.max-w-none{max-width:none}.max-w-xl{max-width:var(--container-xl)}.min-w-0{min-width:calc(var(--spacing) * 0)}.flex-1{flex:1}.flex-shrink{flex-shrink:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.gap-1{gap:calc(var(--spacing) * 1)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-8{gap:calc(var(--spacing) * 8)}.space-y-1>:not(:last-child){--tw-space-y-reverse:0;margin-top:calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));margin-bottom:calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)))}.space-y-2>:not(:last-child){--tw-space-y-reverse:0;margin-top:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-bottom:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}.space-y-3>:not(:last-child){--tw-space-y-reverse:0;margin-top:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-bottom:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}.space-y-4>:not(:last-child){--tw-space-y-reverse:0;margin-top:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-bottom:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}.space-y-6>:not(:last-child){--tw-space-y-reverse:0;margin-top:calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));margin-bottom:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))}.divide-y>:not(:last-child){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}.divide-slate-100>:not(:last-child){border-color:var(--color-slate-100)}.divide-slate-200>:not(:last-child){border-color:var(--color-slate-200)}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-none{--tw-border-style:none;border-style:none}.border-amber-200{border-color:var(--color-amber-200)}.border-blue-200{border-color:var(--color-blue-200)}.border-green-200{border-color:var(--color-green-200)}.border-red-200{border-color:var(--color-red-200)}.border-slate-100{border-color:var(--color-slate-100)}.border-slate-200{border-color:var(--color-slate-200)}.border-slate-800{border-color:var(--color-slate-800)}.bg-\[var\(--primary-color\)\]{background-color:var(--primary-color)}.bg-amber-50{background-color:var(--color-amber-50)}.bg-black\/30{background-color:#0000004d}.bg-black\/30{background-color:rgba(0,0,0,0.3)}.bg-blue-50{background-color:var(--color-blue-50)}.bg-green-50{background-color:var(--color-green-50)}.bg-red-50{background-color:var(--color-red-50)}.bg-slate-50{background-color:var(--color-slate-50)}.bg-slate-100{background-color:var(--color-slate-100)}.bg-slate-200{background-color:var(--color-slate-200)}.bg-slate-300{background-color:var(--color-slate-300)}.bg-slate-800{background-color:var(--color-slate-800)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.object-cover{object-fit:cover}.p-2{padding:calc(var(--spacing) * 2)}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.px-2{padding-left:calc(var(--spacing) * 2);padding-right:calc(var(--spacing) * 2)}.px-3{padding-left:calc(var(--spacing) * 3);padding-right:calc(var(--spacing) * 3)}.px-4{padding-left:calc(var(--spacing) * 4);padding-right:calc(var(--spacing) * 4)}.px-5{padding-left:calc(var(--spacing) * 5);padding-right:calc(var(--spacing) * 5)}.px-6{padding-left:calc(var(--spacing) * 6);padding-right:calc(var(--spacing) * 6)}.px-8{padding-left:calc(var(--spacing) * 8);padding-right:calc(var(--spacing) * 8)}.py-0\.5{padding-top:calc(var(--spacing) * .5);padding-bottom:calc(var(--spacing) * .5)}.py-1{padding-top:calc(var(--spacing) * 1);padding-bottom:calc(var(--spacing) * 1)}.py-2{padding-top:calc(var(--spacing) * 2);padding-bottom:calc(var(--spacing) * 2)}.py-2\.5{padding-top:calc(var(--spacing) * 2.5);padding-bottom:calc(var(--spacing) * 2.5)}.py-3{padding-top:calc(var(--spacing) * 3);padding-bottom:calc(var(--spacing) * 3)}.py-4{padding-top:calc(var(--spacing) * 4);padding-bottom:calc(var(--spacing) * 4)}.py-6{padding-top:calc(var(--spacing) * 6);padding-bottom:calc(var(--spacing) * 6)}.py-8{padding-top:calc(var(--spacing) * 8);padding-bottom:calc(var(--spacing) * 8)}.py-12{padding-top:calc(var(--spacing) * 12);padding-bottom:calc(var(--spacing) * 12)}.py-16{padding-top:calc(var(--spacing) * 16);padding-bottom:calc(var(--spacing) * 16)}.py-20{padding-top:calc(var(--spacing) * 20);padding-bottom:calc(var(--spacing) * 20)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-6{padding-top:calc(var(--spacing) * 6)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-4{padding-left:calc(var(--spacing) * 4)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-5{--tw-leading:calc(var(--spacing) * 5);line-height:calc(var(--spacing) * 5)}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-amber-400{color:var(--color-amber-400)}.text-amber-800{color:var(--color-amber-800)}.text-blue-800{color:var(--color-blue-800)}.text-current{color:currentColor}.text-green-600{color:var(--color-green-600)}.text-green-800{color:var(--color-green-800)}.text-red-400{color:var(--color-red-400)}.text-red-500{color:var(--color-red-500)}.text-red-800{color:var(--color-red-800)}.text-slate-200{color:var(--color-slate-200)}.text-slate-300{color:var(--color-slate-300)}.text-slate-400{color:var(--color-slate-400)}.text-slate-500{color:var(--color-slate-500)}.text-slate-600{color:var(--color-slate-600)}.text-slate-700{color:var(--color-slate-700)}.text-slate-800{color:var(--color-slate-800)}.text-slate-900{color:var(--color-slate-900)}.text-white{color:var(--color-white)}.text-white\/70{color:#ffffffb3}.text-white\/70{color:rgba(255,255,255,0.7)}.uppercase{text-transform:uppercase}.not-italic{font-style:normal}.line-through{text-decoration-line:line-through}.underline{text-decoration-line:underline}.accent-\[var\(--primary-color\)\]{accent-color:var(--primary-color)}.opacity-90{opacity:.9}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-300{--tw-duration:.3s;transition-duration:.3s}.outline-none{--tw-outline-style:none;outline-style:none}@media (hover:hover){.group-hover\:scale-105.group:hover *{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.group-hover\:text-slate-600.group:hover *{color:var(--color-slate-600)}}.focus-within\:border-slate-400:focus-within{border-color:var(--color-slate-400)}@media (hover:hover){.hover\:border-slate-400:hover{border-color:var(--color-slate-400)}.hover\:bg-slate-50:hover{background-color:var(--color-slate-50)}.hover\:bg-slate-100:hover{background-color:var(--color-slate-100)}.hover\:bg-slate-200:hover{background-color:var(--color-slate-200)}.hover\:text-red-500:hover{color:var(--color-red-500)}.hover\:text-red-600:hover{color:var(--color-red-600)}.hover\:text-slate-600:hover{color:var(--color-slate-600)}.hover\:text-slate-700:hover{color:var(--color-slate-700)}.hover\:text-slate-800:hover{color:var(--color-slate-800)}.hover\:text-slate-900:hover{color:var(--color-slate-900)}.hover\:text-white:hover{color:var(--color-white)}.hover\:opacity-70:hover{opacity:.7}.hover\:opacity-80:hover{opacity:.8}}@media (min-width:40rem){.sm\:mb-0{margin-bottom:calc(var(--spacing) * 0)}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:justify-between{justify-content:space-between}}@media (min-width:48rem){.md\:absolute{position:absolute}.md\:sticky{position:sticky}.md\:top-24{top:calc(var(--spacing) * 24)}.md\:left-1\/2{left:50%}.md\:order-1{order:1}.md\:order-2{order:2}.md\:order-3{order:3}.md\:order-none{order:0}.md\:col-span-1{grid-column:span 1/span 1}.md\:col-span-2{grid-column:span 2/span 2}.md\:col-span-3{grid-column:span 3/span 3}.md\:mx-8{margin-left:calc(var(--spacing) * 8);margin-right:calc(var(--spacing) * 8)}.md\:ml-auto{margin-left:auto}.md\:block{display:block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:h-64{height:calc(var(--spacing) * 64)}.md\:h-\[70vh\]{height:70vh}.md\:h-\[80vh\]{height:80vh}.md\:-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-center{align-items:center}.md\:justify-between{justify-content:space-between}.md\:gap-12{gap:calc(var(--spacing) * 12)}.md\:p-12{padding:calc(var(--spacing) * 12)}.md\:py-12{padding-top:calc(var(--spacing) * 12);padding-bottom:calc(var(--spacing) * 12)}.md\:py-16{padding-top:calc(var(--spacing) * 16);padding-bottom:calc(var(--spacing) * 16)}.md\:py-20{padding-top:calc(var(--spacing) * 20);padding-bottom:calc(var(--spacing) * 20)}.md\:py-24{padding-top:calc(var(--spacing) * 24);padding-bottom:calc(var(--spacing) * 24)}.md\:py-32{padding-top:calc(var(--spacing) * 32);padding-bottom:calc(var(--spacing) * 32)}.md\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.md\:text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.md\:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.md\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}}.nav-item{position:relative}.nav-item:hover>.nav-submenu,.nav-item:focus-within>.nav-submenu{opacity:1;pointer-events:auto;transform:scale(1)}.nav-submenu{opacity:0;transform-origin:0 0;pointer-events:none;z-index:80;transition:all .2s ease-out;transform:scale(.98)}.spark-preview-indicator{z-index:100;color:#fff;background:#0f172a;border:1px solid #fff3;border-radius:.75rem;align-items:center;gap:.75rem;max-width:calc(100vw - 2rem);padding:.75rem 1rem;font-size:.875rem;line-height:1.25rem;display:flex;position:fixed;bottom:1rem;right:1rem;box-shadow:0 12px 32px #0f172a47}.spark-preview-indicator__message{font-weight:600}.spark-preview-indicator__exit{color:#0f172a;background:#fff;border-radius:.375rem;padding:.25rem .5rem;font-weight:700;text-decoration:none}.spark-preview-indicator__exit:focus-visible{outline-offset:3px;outline:3px solid #fbbf24}@media (hover:hover){.spark-preview-indicator__exit:hover{color:#0f172a;opacity:1;background:#e2e8f0}}@media not all and (min-width:30rem){.spark-preview-indicator{justify-content:space-between;max-width:none;bottom:.75rem;left:.75rem;right:.75rem}}.variant-option-list{flex-wrap:wrap;gap:.5rem;display:flex}.variant-option{display:inline-flex;position:relative}.variant-option input{opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute;top:0;right:0;bottom:0;left:0}.variant-option-label{color:#334155;white-space:nowrap;cursor:pointer;background-color:#fff;border:1px solid #e2e8f0;justify-content:center;align-items:center;min-height:44px;padding:0 1.25rem;font-size:.875rem;line-height:1.25rem;transition:border-color .15s ease-out,background-color .15s ease-out,color .15s ease-out;display:inline-flex}.variant-option:hover .variant-option-label{border-color:#94a3b8}.variant-option input:focus-visible+.variant-option-label{outline:2px solid var(--primary-color);outline-offset:2px}.variant-option input:checked+.variant-option-label{background-color:var(--primary-color);border-color:var(--primary-color);color:#fff}[data-light-primary] .variant-option input:checked+.variant-option-label{color:#1e293b}.variant-option[data-variant-unavailable=true] input:not(:checked)+.variant-option-label{opacity:.55;color:#64748b}.variant-option[data-variant-unavailable=true] .variant-option-label:after{content:"";pointer-events:none;background-image:linear-gradient(to top right,#fff0 47.5%,#94a3b8 47.5% 52.5%,#fff0 52.5%);position:absolute;top:0;right:0;bottom:0;left:0}.variant-option input:checked+.variant-option-label:after{background-image:linear-gradient(to top right,#fff0 47.5%,#fff 47.5% 52.5%,#fff0 52.5%)}[data-light-primary] .variant-option input:checked+.variant-option-label:after{background-image:linear-gradient(to top right,#fff0 47.5%,#1e293b 47.5% 52.5%,#fff0 52.5%)}.variant-option-value{color:#0f172a;font-weight:500}.variant-size-guide{color:#475569;text-underline-offset:2px;font-size:.75rem;line-height:1rem;text-decoration:underline} \ No newline at end of file diff --git a/configs/settings_data.json b/configs/settings_data.json index 40060cd..292724b 100644 --- a/configs/settings_data.json +++ b/configs/settings_data.json @@ -93,6 +93,15 @@ "body_text_color": "", "body_header_color": "", "body_link_color": "", + "body_bg_color": "", + "border_color": "", + "radius_control": "4px", + "radius_card": "0", + "section_padding": "default", + "content_gap": "default", + "container_max_width": "1280px", + "heading_scale": "default", + "body_size": "16px", "sidecart_open_on_add": true, "enable_progress_bar": false, "usd_goal_1": 50, diff --git a/configs/settings_schema.json b/configs/settings_schema.json index 0430f90..847f558 100644 --- a/configs/settings_schema.json +++ b/configs/settings_schema.json @@ -1177,6 +1177,189 @@ "type": "color", "help_text": "Default color for links." } + ], + "Layout": [ + { + "name": "body_bg_color", + "label": "Page Background Color", + "type": "color", + "help_text": "Background color for the page. Default white." + }, + { + "name": "border_color", + "label": "Border Color", + "type": "color", + "help_text": "Color for borders and dividers. Default slate-200." + }, + { + "name": "radius_control", + "label": "Control Radius", + "type": "select", + "options": [ + { + "name": "None", + "value": "0" + }, + { + "name": "4px", + "value": "4px" + }, + { + "name": "8px", + "value": "8px" + }, + { + "name": "12px", + "value": "12px" + }, + { + "name": "16px", + "value": "16px" + } + ], + "default": "4px", + "help_text": "Corner radius for buttons and form controls. Default 4px." + }, + { + "name": "radius_card", + "label": "Card Radius", + "type": "select", + "options": [ + { + "name": "None", + "value": "0" + }, + { + "name": "4px", + "value": "4px" + }, + { + "name": "8px", + "value": "8px" + }, + { + "name": "12px", + "value": "12px" + }, + { + "name": "16px", + "value": "16px" + } + ], + "default": "0", + "help_text": "Corner radius for product cards. Default none." + }, + { + "name": "section_padding", + "label": "Section Padding", + "type": "select", + "options": [ + { + "name": "Compact", + "value": "compact" + }, + { + "name": "Default", + "value": "default" + }, + { + "name": "Roomy", + "value": "roomy" + } + ], + "default": "default", + "help_text": "Vertical padding for homepage sections. Default 3rem." + }, + { + "name": "content_gap", + "label": "Content Gap", + "type": "select", + "options": [ + { + "name": "Tight", + "value": "tight" + }, + { + "name": "Default", + "value": "default" + }, + { + "name": "Loose", + "value": "loose" + } + ], + "default": "default", + "help_text": "Gap between products and content columns. Default 1.5rem." + }, + { + "name": "container_max_width", + "label": "Container Max Width", + "type": "select", + "options": [ + { + "name": "1120px", + "value": "1120px" + }, + { + "name": "1280px", + "value": "1280px" + }, + { + "name": "1440px", + "value": "1440px" + } + ], + "default": "1280px", + "help_text": "Maximum width for page content. Default 1280px." + } + ], + "Type Scale": [ + { + "name": "heading_scale", + "label": "Heading Scale", + "type": "select", + "options": [ + { + "name": "Small", + "value": "small" + }, + { + "name": "Default", + "value": "default" + }, + { + "name": "Large", + "value": "large" + } + ], + "default": "default", + "help_text": "Scale applied to display and section headings. Default 1." + }, + { + "name": "body_size", + "label": "Body Size", + "type": "select", + "options": [ + { + "name": "15px", + "value": "15px" + }, + { + "name": "16px", + "value": "16px" + }, + { + "name": "17px", + "value": "17px" + }, + { + "name": "18px", + "value": "18px" + } + ], + "default": "16px", + "help_text": "Base font size for body text. Default 16px." + } ] }, "Side Cart": { diff --git a/css/input.css b/css/input.css index 3503407..6854cff 100644 --- a/css/input.css +++ b/css/input.css @@ -32,6 +32,32 @@ --color-success: #22C55E; --color-error: #EF4444; --color-warning: #F59E0B; + + /* Style tokens (spark#56) */ + --color-page: var(--body-bg-color, #FFFFFF); + --color-border: var(--border-color, #E2E8F0); + --radius-control: var(--control-radius, 4px); + --radius-card: var(--card-radius, 0); + --spacing-section-y: var(--section-padding-y, 3rem); + --spacing-section-y-md: calc(var(--section-padding-y, 3rem) * 4 / 3); + --spacing-band-y: calc(var(--section-padding-y, 3rem) * 4 / 3); + --spacing-band-y-md: calc(var(--section-padding-y, 3rem) * 5 / 3); + --spacing-content: var(--content-gap, 1.5rem); + --spacing-content-sm: calc(var(--content-gap, 1.5rem) * 2 / 3); + --spacing-content-md: calc(var(--content-gap, 1.5rem) * 4 / 3); + --spacing-content-lg: calc(var(--content-gap, 1.5rem) * 2); + --text-h3: calc(1.25rem * var(--heading-scale, 1)); + --text-h3--line-height: calc(1.75 / 1.25); + --text-h2: calc(1.5rem * var(--heading-scale, 1)); + --text-h2--line-height: calc(2 / 1.5); + --text-h1: calc(1.875rem * var(--heading-scale, 1)); + --text-h1--line-height: calc(2.25 / 1.875); + --text-h1-md: calc(2.25rem * var(--heading-scale, 1)); + --text-h1-md--line-height: calc(2.5 / 2.25); + --text-display: calc(1.875rem * var(--heading-scale, 1)); + --text-display--line-height: calc(2.25 / 1.875); + --text-display-md: calc(3rem * var(--heading-scale, 1)); + --text-display-md--line-height: 1; } @layer base { @@ -43,9 +69,10 @@ body { font-family: var(--font-sans); + font-size: var(--body-size, 1rem); color: #1E293B; line-height: 1.6; - background-color: #FFFFFF; + background-color: var(--body-bg-color, #FFFFFF); } h1, h2, h3, h4, h5, h6 { @@ -79,7 +106,7 @@ font-weight: 500; font-size: 0.875rem; line-height: 1.25rem; - border-radius: 0.25rem; + border-radius: var(--control-radius, 0.25rem); transition: opacity 150ms ease-out; cursor: pointer; } @@ -114,7 +141,7 @@ .btn-secondary { background-color: transparent; color: var(--primary-color); - border: 1px solid #E2E8F0; + border: 1px solid var(--border-color, #E2E8F0); } .btn-secondary:hover { @@ -124,7 +151,7 @@ /* Container */ .container { width: 100%; - max-width: 1280px; + max-width: var(--container-max, 1280px); margin-left: auto; margin-right: auto; padding-left: 1rem; @@ -142,10 +169,12 @@ .product-card { display: flex; flex-direction: column; + border-radius: var(--card-radius, 0); + overflow: hidden; } .product-card-bordered { - border: 1px solid #E2E8F0; + border: 1px solid var(--border-color, #E2E8F0); } .product-card-bordered .product-title { @@ -230,7 +259,7 @@ .product-grid { display: grid; grid-template-columns: repeat(1, 1fr); - gap: 1.5rem; + gap: var(--content-gap, 1.5rem); } @media (min-width: 768px) { @@ -249,7 +278,7 @@ .category-grid { display: grid; grid-template-columns: repeat(1, 1fr); - gap: 1rem; + gap: calc(var(--content-gap, 1.5rem) * 2 / 3); } @media (min-width: 768px) { diff --git a/layouts/base.html b/layouts/base.html index 604bdf1..ed55b12 100644 --- a/layouts/base.html +++ b/layouts/base.html @@ -62,6 +62,40 @@ {% if settings.body_link_color %} --body-link-color: {{ settings.body_link_color }}; {% endif %} + {# Style tokens (spark#56): bridge properties read by @theme in css/input.css #} + {% if settings.body_bg_color %} + --body-bg-color: {{ settings.body_bg_color }}; + {% endif %} + {% if settings.border_color %} + --border-color: {{ settings.border_color }}; + {% endif %} + {% if settings.radius_control %} + --control-radius: {{ settings.radius_control }}; + {% endif %} + {% if settings.radius_card %} + --card-radius: {{ settings.radius_card }}; + {% endif %} + {% if settings.section_padding == "compact" %} + --section-padding-y: 2rem; + {% elif settings.section_padding == "roomy" %} + --section-padding-y: 5rem; + {% endif %} + {% if settings.content_gap == "tight" %} + --content-gap: 1rem; + {% elif settings.content_gap == "loose" %} + --content-gap: 2rem; + {% endif %} + {% if settings.heading_scale == "small" %} + --heading-scale: 0.875; + {% elif settings.heading_scale == "large" %} + --heading-scale: 1.125; + {% endif %} + {% if settings.body_size and settings.body_size != "16px" %} + --body-size: {{ settings.body_size }}; + {% endif %} + {% if settings.container_max_width %} + --container-max: {{ settings.container_max_width }}; + {% endif %} } {% if settings.font_body %} body { font-family: var(--font-body); } From 8db09e4480e4d4c7d67abefbdb9335afcdddd57e Mon Sep 17 00:00:00 2001 From: Devin Michael Date: Mon, 7 Sep 2026 16:20:56 +0700 Subject: [PATCH 2/4] Style tokens: the six homepage sections consume the tokens (#56) Swap the design-decision literals in the live branches of the six section partials for the token utilities registered in the previous change. Only values a tokenised design library carries move: section rhythm (py-12 md:py-16 -> py-section-y md:py-section-y-md; the promo band's py-16 md:py-20 -> py-band-y md:py-band-y-md), the featured product's column gap (gap-8 md:gap-12 -> gap-content-md md:gap-content-lg), the heading steps (hero h1 text-3xl md:text-5xl -> text-display md:text-display-md; promo h2 and the large section heading text-3xl md:text-4xl -> text-h1 md:text-h1-md; default text-2xl -> text-h2; small text-xl -> text-h3; featured product title -> text-h2) and card radius (rounded-card on the featured image, its no-image placeholder, and the category tiles; product cards already carry it through .product-card). Structural spacing stays literal: the hero's overlay inset and copy widths, heading and CTA margins, and every empty-state placeholder (the dashed-border sections and their skeleton bars), which communicate missing configuration and are not part of the merchant-facing design language. Each utility resolves to the value it replaced when no Style setting is set, line-height included (text-h2 carries Tailwind's calc(2 / 1.5), the display step's md variant carries 1). Fixture render before and after this change at default settings: 0 computed-style differences and 0 differing pixels at 1280 and 375, for both the populated homepage and a fresh store rendering only settings_data.json. With section_padding=roomy, heading_scale=large, radius_card=12px and the other settings flipped, the sections respond (section padding 64px -> 106.667px at md, hero h1 48px -> 54px, cards and tiles rounded). assets/main.css: 48460 -> 50298 bytes; the text-5xl and text-4xl utilities lost their last consumer and were pruned. Twice-compile identical. Co-Authored-By: Claude Fable 5.1 --- assets/main.css | 2 +- partials/section_featured_categories.html | 4 ++-- partials/section_featured_product.html | 10 +++++----- partials/section_featured_products.html | 2 +- partials/section_heading.html | 2 +- partials/section_hero.html | 2 +- partials/section_on_sale.html | 2 +- partials/section_promo_banner.html | 4 ++-- 8 files changed, 14 insertions(+), 14 deletions(-) diff --git a/assets/main.css b/assets/main.css index e676e38..ccee945 100644 --- a/assets/main.css +++ b/assets/main.css @@ -1,2 +1,2 @@ /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */ -*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-top:initial;right:initial;bottom:initial;left:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-50:#fef2f2;--color-red-200:#ffc9c9;--color-red-400:#ff6467;--color-red-500:#fb2c36;--color-red-600:#e7000b;--color-red-800:#9f0712;--color-amber-50:#fffbeb;--color-amber-200:#fee685;--color-amber-400:#ffb900;--color-amber-800:#973c00;--color-green-50:#f0fdf4;--color-green-200:#b9f8cf;--color-green-600:#00a63e;--color-green-800:#016630;--color-blue-50:#eff6ff;--color-blue-200:#bedbff;--color-blue-800:#193cb8;--color-slate-50:#f8fafc;--color-slate-100:#f1f5f9;--color-slate-200:#e2e8f0;--color-slate-300:#cbd5e1;--color-slate-400:#94a3b8;--color-slate-500:#64748b;--color-slate-600:#475569;--color-slate-700:#334155;--color-slate-800:#1e293b;--color-slate-900:#0f172a;--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-md:28rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-5xl:3rem;--text-5xl--line-height:1;--text-6xl:3.75rem;--text-6xl--line-height:1;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--tracking-wider:.05em;--leading-tight:1.25;--leading-relaxed:1.625;--radius-md:.375rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}select[multiple],[size] optgroup{font-weight:bolder}select[multiple],[size] optgroup option{padding-left:20px}::file-selector-button{margin-right:4px}::placeholder{opacity:1}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-year-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-month-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-day-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-hour-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-minute-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-second-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-millisecond-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input[type=button],[type=reset],[type=submit]{appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:not([hidden=until-found]){display:none!important}:root{--primary-color:#1e293b;--accent-color:#475569}body{font-family:var(--font-sans);font-size:var(--body-size,1rem);color:#1e293b;background-color:var(--body-bg-color,#fff);line-height:1.6}h1,h2,h3,h4,h5,h6{color:#1e293b;font-weight:600;line-height:1.2}a{color:var(--primary-color);text-decoration:none}a:hover{opacity:.8}img{max-width:100%;height:auto}.btn{border-radius:var(--control-radius,.25rem);cursor:pointer;justify-content:center;align-items:center;padding:.625rem 1.5rem;font-size:.875rem;font-weight:500;line-height:1.25rem;transition:opacity .15s ease-out;display:inline-flex}.btn:hover{opacity:.9}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background-color:var(--primary-color)!important;color:#fff!important;border-color:var(--primary-color)!important}.btn-accent{background-color:var(--accent-color)!important;color:#fff!important;border-color:var(--accent-color)!important}.btn-outline{color:var(--btn-color,var(--primary-color))!important;border:1px solid var(--btn-color,var(--primary-color))!important;background-color:#0000!important}.btn-secondary{color:var(--primary-color);border:1px solid var(--border-color,#e2e8f0);background-color:#0000}.btn-secondary:hover{background-color:#f8fafc}.container{width:100%;max-width:var(--container-max,1280px);margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}@media (min-width:768px){.container{padding-left:1.5rem;padding-right:1.5rem}}.product-card{border-radius:var(--card-radius,0);flex-direction:column;display:flex;overflow:hidden}.product-card-bordered{border:1px solid var(--border-color,#e2e8f0)}.product-card-bordered .product-title{padding-left:1rem;padding-right:1rem}.product-card-bordered .product-price{padding-bottom:1rem;padding-left:1rem;padding-right:1rem}.product-card img{aspect-ratio:1;object-fit:cover;background-color:#f8fafc}.product-card .product-title{margin-top:.75rem;font-size:.875rem;font-weight:500}.product-card .product-price{color:#475569;margin-top:.25rem;font-size:.875rem}[data-spark-membership-price][data-membership-active=true] [data-spark-public-price]{color:#94a3b8;font-weight:400;text-decoration-line:line-through}.spark-member-price{color:#1e293b;flex-wrap:wrap;align-items:baseline;gap:.375rem;margin-top:.25rem;display:flex}.spark-member-price-label{color:var(--primary-color);text-transform:uppercase;font-size:.75rem;font-weight:600}.spark-member-price-value{font-weight:700}.spark-member-price-detail{color:#64748b;font-size:.75rem;font-weight:400}.product-card .spark-member-price,[data-spark-membership-layout=sticky] .spark-member-price{gap:.25rem;margin-top:.125rem}.product-card .spark-member-price-label,[data-spark-membership-layout=sticky] .spark-member-price-label{font-size:.6875rem}[data-spark-membership-layout=sticky][data-membership-active=true]{line-height:1.25;display:block}.product-grid{gap:var(--content-gap,1.5rem);grid-template-columns:repeat(1,1fr);display:grid}@media (min-width:768px){.product-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.product-grid{grid-template-columns:repeat(var(--product-grid-columns,3), 1fr)}}.category-grid{gap:calc(var(--content-gap,1.5rem) * 2 / 3);grid-template-columns:repeat(1,1fr);display:grid}@media (min-width:768px){.category-grid{grid-template-columns:repeat(var(--category-grid-columns,2), 1fr)}}.skeleton-card{flex-direction:column;display:flex}.skeleton-card .skeleton-image{aspect-ratio:1;background-color:#f1f5f9;position:relative;overflow:hidden}.skeleton-card .skeleton-image:after{content:"";background:linear-gradient(90deg,#f1f5f9,#e2e8f0,#f1f5f9);animation:1.5s ease-in-out infinite shimmer;position:absolute;top:0;right:0;bottom:0;left:0}.skeleton-card .skeleton-text{background-color:#f1f5f9;height:12px;margin-top:.75rem;position:relative;overflow:hidden}.skeleton-card .skeleton-text:after{content:"";background:linear-gradient(90deg,#f1f5f9,#e2e8f0,#f1f5f9);animation:1.5s ease-in-out infinite shimmer;position:absolute;top:0;right:0;bottom:0;left:0}.skeleton-card .skeleton-text-short{background-color:#f1f5f9;width:40%;height:12px;margin-top:.25rem;position:relative;overflow:hidden}.skeleton-card .skeleton-text-short:after{content:"";background:linear-gradient(90deg,#f1f5f9,#e2e8f0,#f1f5f9);animation:1.5s ease-in-out infinite shimmer;position:absolute;top:0;right:0;bottom:0;left:0}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.cart-badge{background-color:var(--primary-color);color:#fff;text-align:center;pointer-events:none;border-radius:50%;width:16px;height:16px;font-size:10px;font-weight:600;line-height:16px;position:absolute;top:-4px;right:-4px}[data-light-primary] .cart-badge{color:#1e293b}.cart-badge[data-animate]{animation:.3s ease-out badge-pulse}@keyframes badge-pulse{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.spark-gallery{flex-direction:column;gap:.75rem;display:flex}@media (min-width:768px){.spark-gallery-left{flex-direction:row-reverse;gap:.75rem}.spark-gallery-left .spark-gallery-main{flex:1;min-width:0}.spark-gallery-left .spark-gallery-thumbs{flex-direction:column;justify-content:flex-start;width:72px;max-height:520px;overflow:hidden auto}.spark-gallery-left .spark-gallery-thumb{flex-shrink:0;width:72px;height:72px}}.spark-gallery-main{aspect-ratio:1;background-color:#f8fafc;max-height:560px;position:relative;overflow:hidden}.spark-gallery-hero{object-fit:contain;width:100%;height:100%;transition:opacity .2s ease-out}.spark-gallery-hero.spark-gallery-fading{opacity:0}.spark-gallery-thumbs{scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent;justify-content:center;gap:.5rem;padding:.25rem 0;display:flex;overflow:auto hidden}.spark-gallery-thumb{cursor:pointer;opacity:.6;background:#f8fafc;border:2px solid #0000;flex-shrink:0;width:72px;height:72px;padding:0;transition:border-color .2s ease-out,opacity .2s ease-out;overflow:hidden}.spark-gallery-thumb:hover{opacity:1;border-color:#cbd5e1}.spark-gallery-thumb-active{opacity:1!important;border-color:var(--primary-color)!important}.spark-gallery-prev,.spark-gallery-next{cursor:pointer;color:#475569;opacity:0;z-index:2;background:#ffffffe6;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;transition:opacity .2s ease-out,background-color .15s ease-out;display:flex;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 1px 3px #0000001a}.spark-gallery-prev{left:.75rem}.spark-gallery-next{right:.75rem}.spark-gallery-prev:hover,.spark-gallery-next:hover{color:#1e293b;background:#fff}.spark-gallery:hover .spark-gallery-prev,.spark-gallery:hover .spark-gallery-next,.spark-gallery:focus-within .spark-gallery-prev,.spark-gallery:focus-within .spark-gallery-next{opacity:1}@media (hover:none){.spark-gallery-prev,.spark-gallery-next{opacity:.7}}.sticky-atc{z-index:50;background:#fff;border-top:1px solid #e2e8f0;transition:transform .25s ease-out;position:fixed;bottom:0;left:0;right:0;transform:translateY(100%);box-shadow:0 -2px 8px #0000000f}.sticky-atc-visible{transform:translateY(0)}.sticky-atc-inner{justify-content:space-between;align-items:center;gap:1rem;max-width:1280px;margin:0 auto;padding:.75rem 1rem;display:flex}.sticky-atc-info{flex-direction:column;min-width:0;display:flex}.sticky-atc-title{color:#1e293b;white-space:nowrap;text-overflow:ellipsis;font-size:.875rem;font-weight:500;overflow:hidden}.sticky-atc-price{color:#475569;font-size:.875rem}.sticky-atc-btn{white-space:nowrap;flex-shrink:0;padding:.625rem 1.5rem}@media (min-width:1024px){.sticky-atc{display:none}}.search-overlay{z-index:60;opacity:0;visibility:hidden;justify-content:center;align-items:flex-start;transition:opacity .2s ease-out,visibility .2s ease-out;display:flex;position:fixed;top:0;right:0;bottom:0;left:0}.search-overlay-visible{opacity:1;visibility:visible}.search-overlay-backdrop{background:#0006;position:absolute;top:0;right:0;bottom:0;left:0}.search-overlay-content{z-index:1;width:100%;max-width:640px;margin-top:5rem;padding:0 1rem;transition:transform .2s ease-out;position:relative;transform:translateY(-12px)}.search-overlay-visible .search-overlay-content{transform:translateY(0)}.search-overlay-form{background:#fff;border:1px solid #e2e8f0;align-items:center;display:flex;box-shadow:0 8px 30px #0000001f}.search-overlay-input{color:#1e293b;background:0 0;border:none;outline:none;flex:1;padding:1rem 1.25rem;font-size:1rem}.search-overlay-input::placeholder{color:#94a3b8}.search-overlay-submit{color:#475569;cursor:pointer;background:0 0;border:none;padding:.75rem}.search-overlay-submit:hover{color:#1e293b}.search-overlay-close{color:#94a3b8;cursor:pointer;background:0 0;border:none;padding:.75rem}.search-overlay-close:hover{color:#475569}.sr-only,.skip-to-content{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-to-content:focus{z-index:100;clip:auto;width:auto;height:auto;font-family:var(--font-sans);background-color:#1e293b;border:1px solid #1e293b;border-radius:2px;margin:0;padding:.625rem 1rem;font-size:.875rem;font-weight:500;line-height:1.25rem;top:1rem;left:1rem;overflow:visible;color:#fff!important}@media (min-width:1024px){.catalogue-layout{grid-template-columns:15rem minmax(0,1fr);align-items:start;gap:2rem;display:grid}}.catalogue-rail{display:none}@media (min-width:1024px){.catalogue-rail{display:block;position:sticky;top:5.5rem}}.catalogue-filter-inline{margin-bottom:1.5rem;display:flex}@media (min-width:1024px){.catalogue-filter-inline{display:none}}.catalogue-filter-button{color:#1e293b;cursor:pointer;background:#fff;border:1px solid #e2e8f0;border-radius:.25rem;justify-content:center;align-items:center;gap:.5rem;width:100%;min-height:44px;padding:.625rem 1rem;font-family:inherit;font-size:.875rem;font-weight:500;line-height:1.25rem;display:inline-flex}.catalogue-bar{z-index:50;visibility:hidden;pointer-events:none;background:#fff;border-top:1px solid #e2e8f0;transition:transform .25s ease-in,visibility 0s linear .25s;position:fixed;bottom:0;left:0;right:0;transform:translateY(100%)}.catalogue-bar-visible{visibility:visible;pointer-events:auto;transition:transform .25s ease-out;transform:translateY(0)}.catalogue-bar-inner{align-items:stretch;gap:.75rem;max-width:1280px;margin:0 auto;padding:.75rem 1rem;display:flex}.catalogue-bar-control{flex:1 1 0;min-width:0}.catalogue-bar-count{background:var(--primary-color);color:#fff;border-radius:9999px;justify-content:center;align-items:center;min-width:1.25rem;height:1.25rem;padding:0 .25rem;font-size:10px;font-weight:600;line-height:1;display:inline-flex}@media (min-width:1024px){.catalogue-bar{display:none}}.filter-drawer{z-index:60;visibility:hidden;pointer-events:none;position:fixed;top:0;right:0;bottom:0;left:0}.filter-drawer-visible{visibility:visible;pointer-events:auto}.filter-drawer-backdrop{opacity:0;background:#0000004d;transition:opacity .2s ease-out;position:absolute;top:0;right:0;bottom:0;left:0}.filter-drawer-visible .filter-drawer-backdrop{opacity:1}.filter-drawer-panel{background:#fff;border-top:1px solid #e2e8f0;flex-direction:column;max-height:85vh;transition:transform .25s ease-out;display:flex;position:absolute;bottom:0;left:0;right:0;transform:translateY(100%)}.filter-drawer-visible .filter-drawer-panel{transform:translateY(0)}.filter-drawer-header{border-bottom:1px solid #e2e8f0;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem 1rem;display:flex}.filter-drawer-title{color:#1e293b;font-size:.875rem;font-weight:600}.filter-drawer-close{color:#475569;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:44px;height:44px;margin-right:-.75rem;display:inline-flex}.filter-drawer-body{padding:1rem;overflow-y:auto}@media (min-width:1024px){.filter-drawer{display:none}}:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}@media print{header,footer,#announcement-bar,.sidecart,.breadcrumb,nav[aria-label=breadcrumb]{display:none!important}.container{max-width:100%;padding:0}body{color:#000;background:#fff;font-size:12pt}a{color:#000;text-decoration:underline}img{max-width:100%}.product-grid{grid-template-columns:repeat(2,1fr)}}.sidecart-open{overflow:hidden}.sidecart-open .sidecart{overflow-x:hidden}.sidecart{outline:0;font-family:inherit;position:absolute;top:0;overflow:hidden}.sidecart .sidecart-dialog{width:100vw;transition:all .6s cubic-bezier(.75,0,.55,1);right:-100vw}.sidecart.show .sidecart-dialog{transition:all .6s cubic-bezier(.33,0,0,1);right:0}.sidecart .cart-btn{color:#1e293b;cursor:pointer;text-align:center;white-space:nowrap;-webkit-user-select:none;user-select:none;background-color:#e2e8f0;border:1px solid #0000;justify-content:center;padding:.8rem 1rem;transition:background-color .15s ease-out}.sidecart .cart-btn:hover{background-color:#cbd5e1;border:1px solid #0000}.sidecart .cart-btn:focus:not(:active){box-shadow:0 0 0 2px var(--primary-color)}.sidecart .text-right{text-align:right}.sidecart .text-center{text-align:center}.sidecart .error-text{color:#ef4444;font-size:small}.sidecart a{color:#1e293b}.sidecart a:hover{color:#475569}.sidecart button{-webkit-appearance:none;cursor:pointer;background-color:#0000;border:0;padding:0;font-family:inherit}.sidecart button.close{color:#475569;float:right;font-weight:400;line-height:.5;transition:color .15s ease-out}.sidecart button.close:hover{color:#1e293b}.sidecart-dialog{pointer-events:none;z-index:99999;height:100%;margin:auto;position:fixed}.sidecart-content{pointer-events:auto;background-color:#fff;background-clip:padding-box;border:none;border-radius:0;outline:0;flex-direction:column;height:100%;display:flex;position:relative;overflow-y:auto;box-shadow:0 0 1px 1px #8890c333}.sidecart-header{background-color:#fff;border-bottom:none;justify-content:center;align-items:center;height:60px;padding:1rem;display:flex;position:relative}.sidecart-header button.close{color:#475569;font-size:2rem;position:absolute;right:1rem}.sidecart-header button.close:hover{color:#1e293b}.sidecart-title{text-align:center;margin-bottom:0;font-weight:700}#basket-content-div{overflow-y:auto}.sidecart-body{position:inherit;flex:auto;padding:.5rem .5rem 6rem;overflow-y:auto}.sidecart-footer{background-color:#fff;border-top:1px solid #e2e8f0;width:auto;padding:1rem;display:flex;bottom:0}.sidecart-footer .cart-btn{text-align:center;cursor:pointer;border:1px solid #0000;border-radius:.3rem;width:100%;height:auto;padding:1.25rem;font-size:24px;font-weight:700;text-decoration:none;display:inline-block;background-color:var(--primary-color)!important;color:#fff!important}.sidecart-footer .cart-btn:hover{border:1px solid #0000;background-color:var(--primary-color-darker)!important;color:#fff!important}.sidecart .form-control{color:#1e293b;appearance:none;background-color:#fff;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:14px 10px;border:1px solid #e2e8f0;border-radius:.25rem;width:100%;padding:.25rem 2rem .25rem .5rem;font-size:.875rem;line-height:1.5;display:block}.cart-items{margin:0 0 20px}.cart-item{box-shadow:none;border-bottom:1px solid #e2e8f0;flex-flow:row;justify-content:flex-start;margin:0 0 .75rem;padding:.75rem;display:flex}.cart-item:first-child{border-top:1px solid #e2e8f0}.cart-item img{width:100%}.cart-item .item-img{width:110px;margin-right:5%;padding:5px}.cart-item .item-details{width:100%;padding-top:.5rem}.cart-item .item-title{margin-bottom:.5rem;font-family:inherit;font-size:1rem;font-weight:500;line-height:1.2;display:block}.cart-item .item-description{flex-flow:wrap;align-items:center;width:100%;margin:0 0 .5em;display:flex}.cart-item .item-description .basket-action{flex-direction:column;flex:40%;height:fit-content;margin-right:20px;display:flex}.cart-item .item-description .basket-action:last-child{margin-right:0}.cart-item .item-description label{margin-bottom:0;display:inline-block}.cart-item .item-description button.close{font-size:smaller}.cart-item .item-price{width:100%}.cart-item .close{font-size:1.5rem}table.sidecart-table{background-color:#0000;width:100%}table.sidecart-table td{vertical-align:top;border-top:1px solid #e2e8f0;padding:.75rem}table.sidecart-table tr:first-child td{border-top:none}table.sidecart-table.table-sm td{padding:.15rem;font-size:small}.cart-totals{font-size:initial}.cart-coupon-wrapper{padding:.75rem}.cart-coupon-wrapper h5{font-family:inherit;font-size:1em}.cart-coupon-wrapper table{width:100%}.cart-coupon-wrapper td:first-child{width:75%}.cart-coupon-wrapper .form-input-group .btn{padding:.75em;font-size:1.125em}.cart-coupon{margin:5% 0}.coupon-remove{font-size:1.5em}.coupon-form{margin:20px 0}.coupon-form .form-input-group{flex-wrap:wrap;width:auto;display:flex}.coupon-form .form-input-group input{background-color:#fff;border:1px solid #e2e8f0;flex:75%;padding:.8rem 1rem}.coupon-form .form-input-group .cart-btn{text-align:center;white-space:nowrap;flex:1;margin-top:10px}.coupon-code{font-size:initial;text-align:center;white-space:nowrap;vertical-align:baseline;color:#fff;background-color:#22c55e;padding:.1em .5em;font-weight:700;line-height:1}.loader{margin:25% 0}.loader .loading{text-align:center;margin:30px;padding:25px}.loader .loading:before{content:"";border-style:solid;border-width:4px;border-color:var(--primary-color) #eee #eee;border-radius:100%;width:50px;height:50px;margin:-25px auto auto -25px;animation:.7s linear infinite rotation;position:absolute;left:50%}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(359deg)}}.cart-empty{margin:25% 0}@media (min-width:768px) and (max-width:991.98px){.sidecart .sidecart-dialog{width:60vw}.sidecart-body{padding:1rem 1rem 6rem}.coupon-form .form-input-group input{flex:50%}.coupon-form .form-input-group .cart-btn{margin-top:0}}@media (min-width:992px){.sidecart .sidecart-dialog{width:50vw}.sidecart-body{padding:1rem 2rem 6rem}.coupon-form .form-input-group input{flex:50%}.coupon-form .form-input-group .cart-btn{margin-top:0}}@media (min-width:1200px){.sidecart .sidecart-dialog{width:45vw}}@media (min-width:1400px){.sidecart .sidecart-dialog{width:40vw}}@media (min-width:1600px){.sidecart .sidecart-dialog{width:35vw}}@media (max-width:576px){.cart-coupon-wrapper .form-input-group .btn{padding:.9em}}.cart-popover-wrapper{display:inline-block;position:relative}.cart-popover-wrapper .popover-content{opacity:0;visibility:hidden;background-color:#fff;width:auto;padding:.5rem;position:absolute;top:50px;left:-130px;transform:translateY(10px);box-shadow:0 2px 5px #00000042}.cart-popover-wrapper .popover-content p{margin-bottom:.5rem}.cart-popover-wrapper .popover-content table.popover-table{margin-top:.75em;margin-bottom:.75em;font-size:.875rem}.cart-popover-wrapper .popover-content table.popover-table tr:first-child td{border-top:none}.cart-popover-wrapper .popover-content table.popover-table tr:first-child td,.cart-popover-wrapper .popover-content table.popover-table tr:last-child td,.cart-popover-wrapper .popover-content table.popover-table tr:nth-last-child(2){font-weight:600}.cart-popover-wrapper .popover-content table.popover-table td{border-top:1px solid #dee2e6;padding:.375rem}.cart-popover-wrapper:hover .popover-content{z-index:10;opacity:1;visibility:visible;width:max-content;transition:all .5s cubic-bezier(.75,-.02,.2,.97);transform:translateY(-20px)}.cart-popover-wrapper .help-icon{cursor:pointer;vertical-align:middle;background-image:url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='18px' height='18px' fill='%23606975' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cg id='' style='opacity:0.75;'%3E%3Cg id='help'%3E%3Cpath id='circle' style='fill-rule:evenodd;clip-rule:evenodd;' d='M12.001,2.085c-5.478,0-9.916,4.438-9.916,9.916 c0,5.476,4.438,9.914,9.916,9.914c5.476,0,9.914-4.438,9.914-9.914C21.915,6.523,17.477,2.085,12.001,2.085z M12.002,20.085 c-4.465,0-8.084-3.619-8.084-8.083c0-4.465,3.619-8.084,8.084-8.084c4.464,0,8.083,3.619,8.083,8.084 C20.085,16.466,16.466,20.085,12.002,20.085z' /%3E%3Cg id='question_mark'%3E%3Cpath id='top' style='fill-rule:evenodd;clip-rule:evenodd;' d='M11.766,6.688c-2.5,0-3.219,2.188-3.219,2.188l1.411,0.854 c0,0,0.298-0.791,0.901-1.229c0.516-0.375,1.625-0.625,2.219,0.125c0.701,0.885-0.17,1.587-1.078,2.719 C11.047,12.531,11,15,11,15h1.969c0,0,0.135-2.318,1.041-3.381c0.603-0.707,1.443-1.338,1.443-2.494S14.266,6.688,11.766,6.688z' /%3E%3Crect id='bottom' x='11' y='16' style='fill-rule:evenodd;clip-rule:evenodd;' width='2' height='2' /%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;width:20px;height:20px;display:inline-block}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{top:calc(var(--spacing) * 0);right:calc(var(--spacing) * 0);bottom:calc(var(--spacing) * 0);left:calc(var(--spacing) * 0)}.end{right:var(--spacing)}.top-0{top:calc(var(--spacing) * 0)}.top-full{top:100%}.bottom-0{bottom:calc(var(--spacing) * 0)}.bottom-2{bottom:calc(var(--spacing) * 2)}.left-0{left:calc(var(--spacing) * 0)}.left-1\/2{left:50%}.z-50{z-index:50}.order-1{order:1}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mx-4{margin-left:calc(var(--spacing) * 4);margin-right:calc(var(--spacing) * 4)}.mx-auto{margin-left:auto;margin-right:auto}.my-8{margin-top:calc(var(--spacing) * 8);margin-bottom:calc(var(--spacing) * 8)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mt-10{margin-top:calc(var(--spacing) * 10)}.mt-12{margin-top:calc(var(--spacing) * 12)}.mt-16{margin-top:calc(var(--spacing) * 16)}.mt-auto{margin-top:auto}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.mb-8{margin-bottom:calc(var(--spacing) * 8)}.mb-10{margin-bottom:calc(var(--spacing) * 10)}.-ml-2{margin-left:calc(var(--spacing) * -2)}.ml-1{margin-left:calc(var(--spacing) * 1)}.ml-2{margin-left:calc(var(--spacing) * 2)}.ml-10{margin-left:calc(var(--spacing) * 10)}.ml-auto{margin-left:auto}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.aspect-square{aspect-ratio:1}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-3{height:calc(var(--spacing) * 3)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-8{height:calc(var(--spacing) * 8)}.h-10{height:calc(var(--spacing) * 10)}.h-16{height:calc(var(--spacing) * 16)}.h-20{height:calc(var(--spacing) * 20)}.h-28{height:calc(var(--spacing) * 28)}.h-48{height:calc(var(--spacing) * 48)}.h-\[50vh\]{height:50vh}.h-\[65vh\]{height:65vh}.h-full{height:100%}.h-screen{height:100vh}.max-h-16{max-height:calc(var(--spacing) * 16)}.max-h-20{max-height:calc(var(--spacing) * 20)}.max-h-80{max-height:calc(var(--spacing) * 80)}.min-h-\[44px\]{min-height:44px}.min-h-\[70vh\]{min-height:70vh}.w-1\.5{width:calc(var(--spacing) * 1.5)}.w-1\/3{width:33.3333%}.w-2\/3{width:66.6667%}.w-3\/4{width:75%}.w-4\/6{width:66.6667%}.w-5\/6{width:83.3333%}.w-10{width:calc(var(--spacing) * 10)}.w-20{width:calc(var(--spacing) * 20)}.w-28{width:calc(var(--spacing) * 28)}.w-32{width:calc(var(--spacing) * 32)}.w-48{width:calc(var(--spacing) * 48)}.w-52{width:calc(var(--spacing) * 52)}.w-56{width:calc(var(--spacing) * 56)}.w-72{width:calc(var(--spacing) * 72)}.w-auto{width:auto}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-md{max-width:var(--container-md)}.max-w-none{max-width:none}.max-w-xl{max-width:var(--container-xl)}.min-w-0{min-width:calc(var(--spacing) * 0)}.flex-1{flex:1}.flex-shrink{flex-shrink:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.gap-1{gap:calc(var(--spacing) * 1)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-8{gap:calc(var(--spacing) * 8)}.space-y-1>:not(:last-child){--tw-space-y-reverse:0;margin-top:calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));margin-bottom:calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)))}.space-y-2>:not(:last-child){--tw-space-y-reverse:0;margin-top:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-bottom:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}.space-y-3>:not(:last-child){--tw-space-y-reverse:0;margin-top:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-bottom:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}.space-y-4>:not(:last-child){--tw-space-y-reverse:0;margin-top:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-bottom:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}.space-y-6>:not(:last-child){--tw-space-y-reverse:0;margin-top:calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));margin-bottom:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))}.divide-y>:not(:last-child){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}.divide-slate-100>:not(:last-child){border-color:var(--color-slate-100)}.divide-slate-200>:not(:last-child){border-color:var(--color-slate-200)}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-none{--tw-border-style:none;border-style:none}.border-amber-200{border-color:var(--color-amber-200)}.border-blue-200{border-color:var(--color-blue-200)}.border-green-200{border-color:var(--color-green-200)}.border-red-200{border-color:var(--color-red-200)}.border-slate-100{border-color:var(--color-slate-100)}.border-slate-200{border-color:var(--color-slate-200)}.border-slate-800{border-color:var(--color-slate-800)}.bg-\[var\(--primary-color\)\]{background-color:var(--primary-color)}.bg-amber-50{background-color:var(--color-amber-50)}.bg-black\/30{background-color:#0000004d}.bg-black\/30{background-color:rgba(0,0,0,0.3)}.bg-blue-50{background-color:var(--color-blue-50)}.bg-green-50{background-color:var(--color-green-50)}.bg-red-50{background-color:var(--color-red-50)}.bg-slate-50{background-color:var(--color-slate-50)}.bg-slate-100{background-color:var(--color-slate-100)}.bg-slate-200{background-color:var(--color-slate-200)}.bg-slate-300{background-color:var(--color-slate-300)}.bg-slate-800{background-color:var(--color-slate-800)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.object-cover{object-fit:cover}.p-2{padding:calc(var(--spacing) * 2)}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.px-2{padding-left:calc(var(--spacing) * 2);padding-right:calc(var(--spacing) * 2)}.px-3{padding-left:calc(var(--spacing) * 3);padding-right:calc(var(--spacing) * 3)}.px-4{padding-left:calc(var(--spacing) * 4);padding-right:calc(var(--spacing) * 4)}.px-5{padding-left:calc(var(--spacing) * 5);padding-right:calc(var(--spacing) * 5)}.px-6{padding-left:calc(var(--spacing) * 6);padding-right:calc(var(--spacing) * 6)}.px-8{padding-left:calc(var(--spacing) * 8);padding-right:calc(var(--spacing) * 8)}.py-0\.5{padding-top:calc(var(--spacing) * .5);padding-bottom:calc(var(--spacing) * .5)}.py-1{padding-top:calc(var(--spacing) * 1);padding-bottom:calc(var(--spacing) * 1)}.py-2{padding-top:calc(var(--spacing) * 2);padding-bottom:calc(var(--spacing) * 2)}.py-2\.5{padding-top:calc(var(--spacing) * 2.5);padding-bottom:calc(var(--spacing) * 2.5)}.py-3{padding-top:calc(var(--spacing) * 3);padding-bottom:calc(var(--spacing) * 3)}.py-4{padding-top:calc(var(--spacing) * 4);padding-bottom:calc(var(--spacing) * 4)}.py-6{padding-top:calc(var(--spacing) * 6);padding-bottom:calc(var(--spacing) * 6)}.py-8{padding-top:calc(var(--spacing) * 8);padding-bottom:calc(var(--spacing) * 8)}.py-12{padding-top:calc(var(--spacing) * 12);padding-bottom:calc(var(--spacing) * 12)}.py-16{padding-top:calc(var(--spacing) * 16);padding-bottom:calc(var(--spacing) * 16)}.py-20{padding-top:calc(var(--spacing) * 20);padding-bottom:calc(var(--spacing) * 20)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-6{padding-top:calc(var(--spacing) * 6)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-4{padding-left:calc(var(--spacing) * 4)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-5{--tw-leading:calc(var(--spacing) * 5);line-height:calc(var(--spacing) * 5)}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-amber-400{color:var(--color-amber-400)}.text-amber-800{color:var(--color-amber-800)}.text-blue-800{color:var(--color-blue-800)}.text-current{color:currentColor}.text-green-600{color:var(--color-green-600)}.text-green-800{color:var(--color-green-800)}.text-red-400{color:var(--color-red-400)}.text-red-500{color:var(--color-red-500)}.text-red-800{color:var(--color-red-800)}.text-slate-200{color:var(--color-slate-200)}.text-slate-300{color:var(--color-slate-300)}.text-slate-400{color:var(--color-slate-400)}.text-slate-500{color:var(--color-slate-500)}.text-slate-600{color:var(--color-slate-600)}.text-slate-700{color:var(--color-slate-700)}.text-slate-800{color:var(--color-slate-800)}.text-slate-900{color:var(--color-slate-900)}.text-white{color:var(--color-white)}.text-white\/70{color:#ffffffb3}.text-white\/70{color:rgba(255,255,255,0.7)}.uppercase{text-transform:uppercase}.not-italic{font-style:normal}.line-through{text-decoration-line:line-through}.underline{text-decoration-line:underline}.accent-\[var\(--primary-color\)\]{accent-color:var(--primary-color)}.opacity-90{opacity:.9}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-300{--tw-duration:.3s;transition-duration:.3s}.outline-none{--tw-outline-style:none;outline-style:none}@media (hover:hover){.group-hover\:scale-105.group:hover *{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.group-hover\:text-slate-600.group:hover *{color:var(--color-slate-600)}}.focus-within\:border-slate-400:focus-within{border-color:var(--color-slate-400)}@media (hover:hover){.hover\:border-slate-400:hover{border-color:var(--color-slate-400)}.hover\:bg-slate-50:hover{background-color:var(--color-slate-50)}.hover\:bg-slate-100:hover{background-color:var(--color-slate-100)}.hover\:bg-slate-200:hover{background-color:var(--color-slate-200)}.hover\:text-red-500:hover{color:var(--color-red-500)}.hover\:text-red-600:hover{color:var(--color-red-600)}.hover\:text-slate-600:hover{color:var(--color-slate-600)}.hover\:text-slate-700:hover{color:var(--color-slate-700)}.hover\:text-slate-800:hover{color:var(--color-slate-800)}.hover\:text-slate-900:hover{color:var(--color-slate-900)}.hover\:text-white:hover{color:var(--color-white)}.hover\:opacity-70:hover{opacity:.7}.hover\:opacity-80:hover{opacity:.8}}@media (min-width:40rem){.sm\:mb-0{margin-bottom:calc(var(--spacing) * 0)}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:justify-between{justify-content:space-between}}@media (min-width:48rem){.md\:absolute{position:absolute}.md\:sticky{position:sticky}.md\:top-24{top:calc(var(--spacing) * 24)}.md\:left-1\/2{left:50%}.md\:order-1{order:1}.md\:order-2{order:2}.md\:order-3{order:3}.md\:order-none{order:0}.md\:col-span-1{grid-column:span 1/span 1}.md\:col-span-2{grid-column:span 2/span 2}.md\:col-span-3{grid-column:span 3/span 3}.md\:mx-8{margin-left:calc(var(--spacing) * 8);margin-right:calc(var(--spacing) * 8)}.md\:ml-auto{margin-left:auto}.md\:block{display:block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:h-64{height:calc(var(--spacing) * 64)}.md\:h-\[70vh\]{height:70vh}.md\:h-\[80vh\]{height:80vh}.md\:-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-center{align-items:center}.md\:justify-between{justify-content:space-between}.md\:gap-12{gap:calc(var(--spacing) * 12)}.md\:p-12{padding:calc(var(--spacing) * 12)}.md\:py-12{padding-top:calc(var(--spacing) * 12);padding-bottom:calc(var(--spacing) * 12)}.md\:py-16{padding-top:calc(var(--spacing) * 16);padding-bottom:calc(var(--spacing) * 16)}.md\:py-20{padding-top:calc(var(--spacing) * 20);padding-bottom:calc(var(--spacing) * 20)}.md\:py-24{padding-top:calc(var(--spacing) * 24);padding-bottom:calc(var(--spacing) * 24)}.md\:py-32{padding-top:calc(var(--spacing) * 32);padding-bottom:calc(var(--spacing) * 32)}.md\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.md\:text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.md\:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.md\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}}.nav-item{position:relative}.nav-item:hover>.nav-submenu,.nav-item:focus-within>.nav-submenu{opacity:1;pointer-events:auto;transform:scale(1)}.nav-submenu{opacity:0;transform-origin:0 0;pointer-events:none;z-index:80;transition:all .2s ease-out;transform:scale(.98)}.spark-preview-indicator{z-index:100;color:#fff;background:#0f172a;border:1px solid #fff3;border-radius:.75rem;align-items:center;gap:.75rem;max-width:calc(100vw - 2rem);padding:.75rem 1rem;font-size:.875rem;line-height:1.25rem;display:flex;position:fixed;bottom:1rem;right:1rem;box-shadow:0 12px 32px #0f172a47}.spark-preview-indicator__message{font-weight:600}.spark-preview-indicator__exit{color:#0f172a;background:#fff;border-radius:.375rem;padding:.25rem .5rem;font-weight:700;text-decoration:none}.spark-preview-indicator__exit:focus-visible{outline-offset:3px;outline:3px solid #fbbf24}@media (hover:hover){.spark-preview-indicator__exit:hover{color:#0f172a;opacity:1;background:#e2e8f0}}@media not all and (min-width:30rem){.spark-preview-indicator{justify-content:space-between;max-width:none;bottom:.75rem;left:.75rem;right:.75rem}}.variant-option-list{flex-wrap:wrap;gap:.5rem;display:flex}.variant-option{display:inline-flex;position:relative}.variant-option input{opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute;top:0;right:0;bottom:0;left:0}.variant-option-label{color:#334155;white-space:nowrap;cursor:pointer;background-color:#fff;border:1px solid #e2e8f0;justify-content:center;align-items:center;min-height:44px;padding:0 1.25rem;font-size:.875rem;line-height:1.25rem;transition:border-color .15s ease-out,background-color .15s ease-out,color .15s ease-out;display:inline-flex}.variant-option:hover .variant-option-label{border-color:#94a3b8}.variant-option input:focus-visible+.variant-option-label{outline:2px solid var(--primary-color);outline-offset:2px}.variant-option input:checked+.variant-option-label{background-color:var(--primary-color);border-color:var(--primary-color);color:#fff}[data-light-primary] .variant-option input:checked+.variant-option-label{color:#1e293b}.variant-option[data-variant-unavailable=true] input:not(:checked)+.variant-option-label{opacity:.55;color:#64748b}.variant-option[data-variant-unavailable=true] .variant-option-label:after{content:"";pointer-events:none;background-image:linear-gradient(to top right,#fff0 47.5%,#94a3b8 47.5% 52.5%,#fff0 52.5%);position:absolute;top:0;right:0;bottom:0;left:0}.variant-option input:checked+.variant-option-label:after{background-image:linear-gradient(to top right,#fff0 47.5%,#fff 47.5% 52.5%,#fff0 52.5%)}[data-light-primary] .variant-option input:checked+.variant-option-label:after{background-image:linear-gradient(to top right,#fff0 47.5%,#1e293b 47.5% 52.5%,#fff0 52.5%)}.variant-option-value{color:#0f172a;font-weight:500}.variant-size-guide{color:#475569;text-underline-offset:2px;font-size:.75rem;line-height:1rem;text-decoration:underline} \ No newline at end of file +*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-top:initial;right:initial;bottom:initial;left:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-50:#fef2f2;--color-red-200:#ffc9c9;--color-red-400:#ff6467;--color-red-500:#fb2c36;--color-red-600:#e7000b;--color-red-800:#9f0712;--color-amber-50:#fffbeb;--color-amber-200:#fee685;--color-amber-400:#ffb900;--color-amber-800:#973c00;--color-green-50:#f0fdf4;--color-green-200:#b9f8cf;--color-green-600:#00a63e;--color-green-800:#016630;--color-blue-50:#eff6ff;--color-blue-200:#bedbff;--color-blue-800:#193cb8;--color-slate-50:#f8fafc;--color-slate-100:#f1f5f9;--color-slate-200:#e2e8f0;--color-slate-300:#cbd5e1;--color-slate-400:#94a3b8;--color-slate-500:#64748b;--color-slate-600:#475569;--color-slate-700:#334155;--color-slate-800:#1e293b;--color-slate-900:#0f172a;--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-md:28rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-6xl:3.75rem;--text-6xl--line-height:1;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--tracking-wider:.05em;--leading-tight:1.25;--leading-relaxed:1.625;--radius-md:.375rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--radius-card:var(--card-radius,0);--spacing-section-y:var(--section-padding-y,3rem);--spacing-section-y-md:calc(var(--section-padding-y,3rem) * 4 / 3);--spacing-band-y:calc(var(--section-padding-y,3rem) * 4 / 3);--spacing-band-y-md:calc(var(--section-padding-y,3rem) * 5 / 3);--spacing-content-md:calc(var(--content-gap,1.5rem) * 4 / 3);--spacing-content-lg:calc(var(--content-gap,1.5rem) * 2);--text-h3:calc(1.25rem * var(--heading-scale,1));--text-h3--line-height:calc(1.75 / 1.25);--text-h2:calc(1.5rem * var(--heading-scale,1));--text-h2--line-height:calc(2 / 1.5);--text-h1:calc(1.875rem * var(--heading-scale,1));--text-h1--line-height:calc(2.25 / 1.875);--text-h1-md:calc(2.25rem * var(--heading-scale,1));--text-h1-md--line-height:calc(2.5 / 2.25);--text-display:calc(1.875rem * var(--heading-scale,1));--text-display--line-height:calc(2.25 / 1.875);--text-display-md:calc(3rem * var(--heading-scale,1));--text-display-md--line-height:1}*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}select[multiple],[size] optgroup{font-weight:bolder}select[multiple],[size] optgroup option{padding-left:20px}::file-selector-button{margin-right:4px}::placeholder{opacity:1}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-year-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-month-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-day-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-hour-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-minute-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-second-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-millisecond-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input[type=button],[type=reset],[type=submit]{appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:not([hidden=until-found]){display:none!important}:root{--primary-color:#1e293b;--accent-color:#475569}body{font-family:var(--font-sans);font-size:var(--body-size,1rem);color:#1e293b;background-color:var(--body-bg-color,#fff);line-height:1.6}h1,h2,h3,h4,h5,h6{color:#1e293b;font-weight:600;line-height:1.2}a{color:var(--primary-color);text-decoration:none}a:hover{opacity:.8}img{max-width:100%;height:auto}.btn{border-radius:var(--control-radius,.25rem);cursor:pointer;justify-content:center;align-items:center;padding:.625rem 1.5rem;font-size:.875rem;font-weight:500;line-height:1.25rem;transition:opacity .15s ease-out;display:inline-flex}.btn:hover{opacity:.9}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background-color:var(--primary-color)!important;color:#fff!important;border-color:var(--primary-color)!important}.btn-accent{background-color:var(--accent-color)!important;color:#fff!important;border-color:var(--accent-color)!important}.btn-outline{color:var(--btn-color,var(--primary-color))!important;border:1px solid var(--btn-color,var(--primary-color))!important;background-color:#0000!important}.btn-secondary{color:var(--primary-color);border:1px solid var(--border-color,#e2e8f0);background-color:#0000}.btn-secondary:hover{background-color:#f8fafc}.container{width:100%;max-width:var(--container-max,1280px);margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}@media (min-width:768px){.container{padding-left:1.5rem;padding-right:1.5rem}}.product-card{border-radius:var(--card-radius,0);flex-direction:column;display:flex;overflow:hidden}.product-card-bordered{border:1px solid var(--border-color,#e2e8f0)}.product-card-bordered .product-title{padding-left:1rem;padding-right:1rem}.product-card-bordered .product-price{padding-bottom:1rem;padding-left:1rem;padding-right:1rem}.product-card img{aspect-ratio:1;object-fit:cover;background-color:#f8fafc}.product-card .product-title{margin-top:.75rem;font-size:.875rem;font-weight:500}.product-card .product-price{color:#475569;margin-top:.25rem;font-size:.875rem}[data-spark-membership-price][data-membership-active=true] [data-spark-public-price]{color:#94a3b8;font-weight:400;text-decoration-line:line-through}.spark-member-price{color:#1e293b;flex-wrap:wrap;align-items:baseline;gap:.375rem;margin-top:.25rem;display:flex}.spark-member-price-label{color:var(--primary-color);text-transform:uppercase;font-size:.75rem;font-weight:600}.spark-member-price-value{font-weight:700}.spark-member-price-detail{color:#64748b;font-size:.75rem;font-weight:400}.product-card .spark-member-price,[data-spark-membership-layout=sticky] .spark-member-price{gap:.25rem;margin-top:.125rem}.product-card .spark-member-price-label,[data-spark-membership-layout=sticky] .spark-member-price-label{font-size:.6875rem}[data-spark-membership-layout=sticky][data-membership-active=true]{line-height:1.25;display:block}.product-grid{gap:var(--content-gap,1.5rem);grid-template-columns:repeat(1,1fr);display:grid}@media (min-width:768px){.product-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.product-grid{grid-template-columns:repeat(var(--product-grid-columns,3), 1fr)}}.category-grid{gap:calc(var(--content-gap,1.5rem) * 2 / 3);grid-template-columns:repeat(1,1fr);display:grid}@media (min-width:768px){.category-grid{grid-template-columns:repeat(var(--category-grid-columns,2), 1fr)}}.skeleton-card{flex-direction:column;display:flex}.skeleton-card .skeleton-image{aspect-ratio:1;background-color:#f1f5f9;position:relative;overflow:hidden}.skeleton-card .skeleton-image:after{content:"";background:linear-gradient(90deg,#f1f5f9,#e2e8f0,#f1f5f9);animation:1.5s ease-in-out infinite shimmer;position:absolute;top:0;right:0;bottom:0;left:0}.skeleton-card .skeleton-text{background-color:#f1f5f9;height:12px;margin-top:.75rem;position:relative;overflow:hidden}.skeleton-card .skeleton-text:after{content:"";background:linear-gradient(90deg,#f1f5f9,#e2e8f0,#f1f5f9);animation:1.5s ease-in-out infinite shimmer;position:absolute;top:0;right:0;bottom:0;left:0}.skeleton-card .skeleton-text-short{background-color:#f1f5f9;width:40%;height:12px;margin-top:.25rem;position:relative;overflow:hidden}.skeleton-card .skeleton-text-short:after{content:"";background:linear-gradient(90deg,#f1f5f9,#e2e8f0,#f1f5f9);animation:1.5s ease-in-out infinite shimmer;position:absolute;top:0;right:0;bottom:0;left:0}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.cart-badge{background-color:var(--primary-color);color:#fff;text-align:center;pointer-events:none;border-radius:50%;width:16px;height:16px;font-size:10px;font-weight:600;line-height:16px;position:absolute;top:-4px;right:-4px}[data-light-primary] .cart-badge{color:#1e293b}.cart-badge[data-animate]{animation:.3s ease-out badge-pulse}@keyframes badge-pulse{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.spark-gallery{flex-direction:column;gap:.75rem;display:flex}@media (min-width:768px){.spark-gallery-left{flex-direction:row-reverse;gap:.75rem}.spark-gallery-left .spark-gallery-main{flex:1;min-width:0}.spark-gallery-left .spark-gallery-thumbs{flex-direction:column;justify-content:flex-start;width:72px;max-height:520px;overflow:hidden auto}.spark-gallery-left .spark-gallery-thumb{flex-shrink:0;width:72px;height:72px}}.spark-gallery-main{aspect-ratio:1;background-color:#f8fafc;max-height:560px;position:relative;overflow:hidden}.spark-gallery-hero{object-fit:contain;width:100%;height:100%;transition:opacity .2s ease-out}.spark-gallery-hero.spark-gallery-fading{opacity:0}.spark-gallery-thumbs{scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent;justify-content:center;gap:.5rem;padding:.25rem 0;display:flex;overflow:auto hidden}.spark-gallery-thumb{cursor:pointer;opacity:.6;background:#f8fafc;border:2px solid #0000;flex-shrink:0;width:72px;height:72px;padding:0;transition:border-color .2s ease-out,opacity .2s ease-out;overflow:hidden}.spark-gallery-thumb:hover{opacity:1;border-color:#cbd5e1}.spark-gallery-thumb-active{opacity:1!important;border-color:var(--primary-color)!important}.spark-gallery-prev,.spark-gallery-next{cursor:pointer;color:#475569;opacity:0;z-index:2;background:#ffffffe6;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;transition:opacity .2s ease-out,background-color .15s ease-out;display:flex;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 1px 3px #0000001a}.spark-gallery-prev{left:.75rem}.spark-gallery-next{right:.75rem}.spark-gallery-prev:hover,.spark-gallery-next:hover{color:#1e293b;background:#fff}.spark-gallery:hover .spark-gallery-prev,.spark-gallery:hover .spark-gallery-next,.spark-gallery:focus-within .spark-gallery-prev,.spark-gallery:focus-within .spark-gallery-next{opacity:1}@media (hover:none){.spark-gallery-prev,.spark-gallery-next{opacity:.7}}.sticky-atc{z-index:50;background:#fff;border-top:1px solid #e2e8f0;transition:transform .25s ease-out;position:fixed;bottom:0;left:0;right:0;transform:translateY(100%);box-shadow:0 -2px 8px #0000000f}.sticky-atc-visible{transform:translateY(0)}.sticky-atc-inner{justify-content:space-between;align-items:center;gap:1rem;max-width:1280px;margin:0 auto;padding:.75rem 1rem;display:flex}.sticky-atc-info{flex-direction:column;min-width:0;display:flex}.sticky-atc-title{color:#1e293b;white-space:nowrap;text-overflow:ellipsis;font-size:.875rem;font-weight:500;overflow:hidden}.sticky-atc-price{color:#475569;font-size:.875rem}.sticky-atc-btn{white-space:nowrap;flex-shrink:0;padding:.625rem 1.5rem}@media (min-width:1024px){.sticky-atc{display:none}}.search-overlay{z-index:60;opacity:0;visibility:hidden;justify-content:center;align-items:flex-start;transition:opacity .2s ease-out,visibility .2s ease-out;display:flex;position:fixed;top:0;right:0;bottom:0;left:0}.search-overlay-visible{opacity:1;visibility:visible}.search-overlay-backdrop{background:#0006;position:absolute;top:0;right:0;bottom:0;left:0}.search-overlay-content{z-index:1;width:100%;max-width:640px;margin-top:5rem;padding:0 1rem;transition:transform .2s ease-out;position:relative;transform:translateY(-12px)}.search-overlay-visible .search-overlay-content{transform:translateY(0)}.search-overlay-form{background:#fff;border:1px solid #e2e8f0;align-items:center;display:flex;box-shadow:0 8px 30px #0000001f}.search-overlay-input{color:#1e293b;background:0 0;border:none;outline:none;flex:1;padding:1rem 1.25rem;font-size:1rem}.search-overlay-input::placeholder{color:#94a3b8}.search-overlay-submit{color:#475569;cursor:pointer;background:0 0;border:none;padding:.75rem}.search-overlay-submit:hover{color:#1e293b}.search-overlay-close{color:#94a3b8;cursor:pointer;background:0 0;border:none;padding:.75rem}.search-overlay-close:hover{color:#475569}.sr-only,.skip-to-content{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-to-content:focus{z-index:100;clip:auto;width:auto;height:auto;font-family:var(--font-sans);background-color:#1e293b;border:1px solid #1e293b;border-radius:2px;margin:0;padding:.625rem 1rem;font-size:.875rem;font-weight:500;line-height:1.25rem;top:1rem;left:1rem;overflow:visible;color:#fff!important}@media (min-width:1024px){.catalogue-layout{grid-template-columns:15rem minmax(0,1fr);align-items:start;gap:2rem;display:grid}}.catalogue-rail{display:none}@media (min-width:1024px){.catalogue-rail{display:block;position:sticky;top:5.5rem}}.catalogue-filter-inline{margin-bottom:1.5rem;display:flex}@media (min-width:1024px){.catalogue-filter-inline{display:none}}.catalogue-filter-button{color:#1e293b;cursor:pointer;background:#fff;border:1px solid #e2e8f0;border-radius:.25rem;justify-content:center;align-items:center;gap:.5rem;width:100%;min-height:44px;padding:.625rem 1rem;font-family:inherit;font-size:.875rem;font-weight:500;line-height:1.25rem;display:inline-flex}.catalogue-bar{z-index:50;visibility:hidden;pointer-events:none;background:#fff;border-top:1px solid #e2e8f0;transition:transform .25s ease-in,visibility 0s linear .25s;position:fixed;bottom:0;left:0;right:0;transform:translateY(100%)}.catalogue-bar-visible{visibility:visible;pointer-events:auto;transition:transform .25s ease-out;transform:translateY(0)}.catalogue-bar-inner{align-items:stretch;gap:.75rem;max-width:1280px;margin:0 auto;padding:.75rem 1rem;display:flex}.catalogue-bar-control{flex:1 1 0;min-width:0}.catalogue-bar-count{background:var(--primary-color);color:#fff;border-radius:9999px;justify-content:center;align-items:center;min-width:1.25rem;height:1.25rem;padding:0 .25rem;font-size:10px;font-weight:600;line-height:1;display:inline-flex}@media (min-width:1024px){.catalogue-bar{display:none}}.filter-drawer{z-index:60;visibility:hidden;pointer-events:none;position:fixed;top:0;right:0;bottom:0;left:0}.filter-drawer-visible{visibility:visible;pointer-events:auto}.filter-drawer-backdrop{opacity:0;background:#0000004d;transition:opacity .2s ease-out;position:absolute;top:0;right:0;bottom:0;left:0}.filter-drawer-visible .filter-drawer-backdrop{opacity:1}.filter-drawer-panel{background:#fff;border-top:1px solid #e2e8f0;flex-direction:column;max-height:85vh;transition:transform .25s ease-out;display:flex;position:absolute;bottom:0;left:0;right:0;transform:translateY(100%)}.filter-drawer-visible .filter-drawer-panel{transform:translateY(0)}.filter-drawer-header{border-bottom:1px solid #e2e8f0;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem 1rem;display:flex}.filter-drawer-title{color:#1e293b;font-size:.875rem;font-weight:600}.filter-drawer-close{color:#475569;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:44px;height:44px;margin-right:-.75rem;display:inline-flex}.filter-drawer-body{padding:1rem;overflow-y:auto}@media (min-width:1024px){.filter-drawer{display:none}}:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}@media print{header,footer,#announcement-bar,.sidecart,.breadcrumb,nav[aria-label=breadcrumb]{display:none!important}.container{max-width:100%;padding:0}body{color:#000;background:#fff;font-size:12pt}a{color:#000;text-decoration:underline}img{max-width:100%}.product-grid{grid-template-columns:repeat(2,1fr)}}.sidecart-open{overflow:hidden}.sidecart-open .sidecart{overflow-x:hidden}.sidecart{outline:0;font-family:inherit;position:absolute;top:0;overflow:hidden}.sidecart .sidecart-dialog{width:100vw;transition:all .6s cubic-bezier(.75,0,.55,1);right:-100vw}.sidecart.show .sidecart-dialog{transition:all .6s cubic-bezier(.33,0,0,1);right:0}.sidecart .cart-btn{color:#1e293b;cursor:pointer;text-align:center;white-space:nowrap;-webkit-user-select:none;user-select:none;background-color:#e2e8f0;border:1px solid #0000;justify-content:center;padding:.8rem 1rem;transition:background-color .15s ease-out}.sidecart .cart-btn:hover{background-color:#cbd5e1;border:1px solid #0000}.sidecart .cart-btn:focus:not(:active){box-shadow:0 0 0 2px var(--primary-color)}.sidecart .text-right{text-align:right}.sidecart .text-center{text-align:center}.sidecart .error-text{color:#ef4444;font-size:small}.sidecart a{color:#1e293b}.sidecart a:hover{color:#475569}.sidecart button{-webkit-appearance:none;cursor:pointer;background-color:#0000;border:0;padding:0;font-family:inherit}.sidecart button.close{color:#475569;float:right;font-weight:400;line-height:.5;transition:color .15s ease-out}.sidecart button.close:hover{color:#1e293b}.sidecart-dialog{pointer-events:none;z-index:99999;height:100%;margin:auto;position:fixed}.sidecart-content{pointer-events:auto;background-color:#fff;background-clip:padding-box;border:none;border-radius:0;outline:0;flex-direction:column;height:100%;display:flex;position:relative;overflow-y:auto;box-shadow:0 0 1px 1px #8890c333}.sidecart-header{background-color:#fff;border-bottom:none;justify-content:center;align-items:center;height:60px;padding:1rem;display:flex;position:relative}.sidecart-header button.close{color:#475569;font-size:2rem;position:absolute;right:1rem}.sidecart-header button.close:hover{color:#1e293b}.sidecart-title{text-align:center;margin-bottom:0;font-weight:700}#basket-content-div{overflow-y:auto}.sidecart-body{position:inherit;flex:auto;padding:.5rem .5rem 6rem;overflow-y:auto}.sidecart-footer{background-color:#fff;border-top:1px solid #e2e8f0;width:auto;padding:1rem;display:flex;bottom:0}.sidecart-footer .cart-btn{text-align:center;cursor:pointer;border:1px solid #0000;border-radius:.3rem;width:100%;height:auto;padding:1.25rem;font-size:24px;font-weight:700;text-decoration:none;display:inline-block;background-color:var(--primary-color)!important;color:#fff!important}.sidecart-footer .cart-btn:hover{border:1px solid #0000;background-color:var(--primary-color-darker)!important;color:#fff!important}.sidecart .form-control{color:#1e293b;appearance:none;background-color:#fff;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:14px 10px;border:1px solid #e2e8f0;border-radius:.25rem;width:100%;padding:.25rem 2rem .25rem .5rem;font-size:.875rem;line-height:1.5;display:block}.cart-items{margin:0 0 20px}.cart-item{box-shadow:none;border-bottom:1px solid #e2e8f0;flex-flow:row;justify-content:flex-start;margin:0 0 .75rem;padding:.75rem;display:flex}.cart-item:first-child{border-top:1px solid #e2e8f0}.cart-item img{width:100%}.cart-item .item-img{width:110px;margin-right:5%;padding:5px}.cart-item .item-details{width:100%;padding-top:.5rem}.cart-item .item-title{margin-bottom:.5rem;font-family:inherit;font-size:1rem;font-weight:500;line-height:1.2;display:block}.cart-item .item-description{flex-flow:wrap;align-items:center;width:100%;margin:0 0 .5em;display:flex}.cart-item .item-description .basket-action{flex-direction:column;flex:40%;height:fit-content;margin-right:20px;display:flex}.cart-item .item-description .basket-action:last-child{margin-right:0}.cart-item .item-description label{margin-bottom:0;display:inline-block}.cart-item .item-description button.close{font-size:smaller}.cart-item .item-price{width:100%}.cart-item .close{font-size:1.5rem}table.sidecart-table{background-color:#0000;width:100%}table.sidecart-table td{vertical-align:top;border-top:1px solid #e2e8f0;padding:.75rem}table.sidecart-table tr:first-child td{border-top:none}table.sidecart-table.table-sm td{padding:.15rem;font-size:small}.cart-totals{font-size:initial}.cart-coupon-wrapper{padding:.75rem}.cart-coupon-wrapper h5{font-family:inherit;font-size:1em}.cart-coupon-wrapper table{width:100%}.cart-coupon-wrapper td:first-child{width:75%}.cart-coupon-wrapper .form-input-group .btn{padding:.75em;font-size:1.125em}.cart-coupon{margin:5% 0}.coupon-remove{font-size:1.5em}.coupon-form{margin:20px 0}.coupon-form .form-input-group{flex-wrap:wrap;width:auto;display:flex}.coupon-form .form-input-group input{background-color:#fff;border:1px solid #e2e8f0;flex:75%;padding:.8rem 1rem}.coupon-form .form-input-group .cart-btn{text-align:center;white-space:nowrap;flex:1;margin-top:10px}.coupon-code{font-size:initial;text-align:center;white-space:nowrap;vertical-align:baseline;color:#fff;background-color:#22c55e;padding:.1em .5em;font-weight:700;line-height:1}.loader{margin:25% 0}.loader .loading{text-align:center;margin:30px;padding:25px}.loader .loading:before{content:"";border-style:solid;border-width:4px;border-color:var(--primary-color) #eee #eee;border-radius:100%;width:50px;height:50px;margin:-25px auto auto -25px;animation:.7s linear infinite rotation;position:absolute;left:50%}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(359deg)}}.cart-empty{margin:25% 0}@media (min-width:768px) and (max-width:991.98px){.sidecart .sidecart-dialog{width:60vw}.sidecart-body{padding:1rem 1rem 6rem}.coupon-form .form-input-group input{flex:50%}.coupon-form .form-input-group .cart-btn{margin-top:0}}@media (min-width:992px){.sidecart .sidecart-dialog{width:50vw}.sidecart-body{padding:1rem 2rem 6rem}.coupon-form .form-input-group input{flex:50%}.coupon-form .form-input-group .cart-btn{margin-top:0}}@media (min-width:1200px){.sidecart .sidecart-dialog{width:45vw}}@media (min-width:1400px){.sidecart .sidecart-dialog{width:40vw}}@media (min-width:1600px){.sidecart .sidecart-dialog{width:35vw}}@media (max-width:576px){.cart-coupon-wrapper .form-input-group .btn{padding:.9em}}.cart-popover-wrapper{display:inline-block;position:relative}.cart-popover-wrapper .popover-content{opacity:0;visibility:hidden;background-color:#fff;width:auto;padding:.5rem;position:absolute;top:50px;left:-130px;transform:translateY(10px);box-shadow:0 2px 5px #00000042}.cart-popover-wrapper .popover-content p{margin-bottom:.5rem}.cart-popover-wrapper .popover-content table.popover-table{margin-top:.75em;margin-bottom:.75em;font-size:.875rem}.cart-popover-wrapper .popover-content table.popover-table tr:first-child td{border-top:none}.cart-popover-wrapper .popover-content table.popover-table tr:first-child td,.cart-popover-wrapper .popover-content table.popover-table tr:last-child td,.cart-popover-wrapper .popover-content table.popover-table tr:nth-last-child(2){font-weight:600}.cart-popover-wrapper .popover-content table.popover-table td{border-top:1px solid #dee2e6;padding:.375rem}.cart-popover-wrapper:hover .popover-content{z-index:10;opacity:1;visibility:visible;width:max-content;transition:all .5s cubic-bezier(.75,-.02,.2,.97);transform:translateY(-20px)}.cart-popover-wrapper .help-icon{cursor:pointer;vertical-align:middle;background-image:url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='18px' height='18px' fill='%23606975' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cg id='' style='opacity:0.75;'%3E%3Cg id='help'%3E%3Cpath id='circle' style='fill-rule:evenodd;clip-rule:evenodd;' d='M12.001,2.085c-5.478,0-9.916,4.438-9.916,9.916 c0,5.476,4.438,9.914,9.916,9.914c5.476,0,9.914-4.438,9.914-9.914C21.915,6.523,17.477,2.085,12.001,2.085z M12.002,20.085 c-4.465,0-8.084-3.619-8.084-8.083c0-4.465,3.619-8.084,8.084-8.084c4.464,0,8.083,3.619,8.083,8.084 C20.085,16.466,16.466,20.085,12.002,20.085z' /%3E%3Cg id='question_mark'%3E%3Cpath id='top' style='fill-rule:evenodd;clip-rule:evenodd;' d='M11.766,6.688c-2.5,0-3.219,2.188-3.219,2.188l1.411,0.854 c0,0,0.298-0.791,0.901-1.229c0.516-0.375,1.625-0.625,2.219,0.125c0.701,0.885-0.17,1.587-1.078,2.719 C11.047,12.531,11,15,11,15h1.969c0,0,0.135-2.318,1.041-3.381c0.603-0.707,1.443-1.338,1.443-2.494S14.266,6.688,11.766,6.688z' /%3E%3Crect id='bottom' x='11' y='16' style='fill-rule:evenodd;clip-rule:evenodd;' width='2' height='2' /%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;width:20px;height:20px;display:inline-block}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{top:calc(var(--spacing) * 0);right:calc(var(--spacing) * 0);bottom:calc(var(--spacing) * 0);left:calc(var(--spacing) * 0)}.end{right:var(--spacing)}.top-0{top:calc(var(--spacing) * 0)}.top-full{top:100%}.bottom-0{bottom:calc(var(--spacing) * 0)}.bottom-2{bottom:calc(var(--spacing) * 2)}.left-0{left:calc(var(--spacing) * 0)}.left-1\/2{left:50%}.z-50{z-index:50}.order-1{order:1}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mx-4{margin-left:calc(var(--spacing) * 4);margin-right:calc(var(--spacing) * 4)}.mx-auto{margin-left:auto;margin-right:auto}.my-8{margin-top:calc(var(--spacing) * 8);margin-bottom:calc(var(--spacing) * 8)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mt-10{margin-top:calc(var(--spacing) * 10)}.mt-12{margin-top:calc(var(--spacing) * 12)}.mt-16{margin-top:calc(var(--spacing) * 16)}.mt-auto{margin-top:auto}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.mb-8{margin-bottom:calc(var(--spacing) * 8)}.mb-10{margin-bottom:calc(var(--spacing) * 10)}.-ml-2{margin-left:calc(var(--spacing) * -2)}.ml-1{margin-left:calc(var(--spacing) * 1)}.ml-2{margin-left:calc(var(--spacing) * 2)}.ml-10{margin-left:calc(var(--spacing) * 10)}.ml-auto{margin-left:auto}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.aspect-square{aspect-ratio:1}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-3{height:calc(var(--spacing) * 3)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-8{height:calc(var(--spacing) * 8)}.h-10{height:calc(var(--spacing) * 10)}.h-16{height:calc(var(--spacing) * 16)}.h-20{height:calc(var(--spacing) * 20)}.h-28{height:calc(var(--spacing) * 28)}.h-48{height:calc(var(--spacing) * 48)}.h-\[50vh\]{height:50vh}.h-\[65vh\]{height:65vh}.h-full{height:100%}.h-screen{height:100vh}.max-h-16{max-height:calc(var(--spacing) * 16)}.max-h-20{max-height:calc(var(--spacing) * 20)}.max-h-80{max-height:calc(var(--spacing) * 80)}.min-h-\[44px\]{min-height:44px}.min-h-\[70vh\]{min-height:70vh}.w-1\.5{width:calc(var(--spacing) * 1.5)}.w-1\/3{width:33.3333%}.w-2\/3{width:66.6667%}.w-3\/4{width:75%}.w-4\/6{width:66.6667%}.w-5\/6{width:83.3333%}.w-10{width:calc(var(--spacing) * 10)}.w-20{width:calc(var(--spacing) * 20)}.w-28{width:calc(var(--spacing) * 28)}.w-32{width:calc(var(--spacing) * 32)}.w-48{width:calc(var(--spacing) * 48)}.w-52{width:calc(var(--spacing) * 52)}.w-56{width:calc(var(--spacing) * 56)}.w-72{width:calc(var(--spacing) * 72)}.w-auto{width:auto}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-md{max-width:var(--container-md)}.max-w-none{max-width:none}.max-w-xl{max-width:var(--container-xl)}.min-w-0{min-width:calc(var(--spacing) * 0)}.flex-1{flex:1}.flex-shrink{flex-shrink:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.gap-1{gap:calc(var(--spacing) * 1)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-8{gap:calc(var(--spacing) * 8)}.gap-content-md{gap:var(--spacing-content-md)}.space-y-1>:not(:last-child){--tw-space-y-reverse:0;margin-top:calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));margin-bottom:calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)))}.space-y-2>:not(:last-child){--tw-space-y-reverse:0;margin-top:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-bottom:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}.space-y-3>:not(:last-child){--tw-space-y-reverse:0;margin-top:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-bottom:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}.space-y-4>:not(:last-child){--tw-space-y-reverse:0;margin-top:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-bottom:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}.space-y-6>:not(:last-child){--tw-space-y-reverse:0;margin-top:calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));margin-bottom:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))}.divide-y>:not(:last-child){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}.divide-slate-100>:not(:last-child){border-color:var(--color-slate-100)}.divide-slate-200>:not(:last-child){border-color:var(--color-slate-200)}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-card{border-radius:var(--radius-card)}.rounded-full{border-radius:9999px}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-none{--tw-border-style:none;border-style:none}.border-amber-200{border-color:var(--color-amber-200)}.border-blue-200{border-color:var(--color-blue-200)}.border-green-200{border-color:var(--color-green-200)}.border-red-200{border-color:var(--color-red-200)}.border-slate-100{border-color:var(--color-slate-100)}.border-slate-200{border-color:var(--color-slate-200)}.border-slate-800{border-color:var(--color-slate-800)}.bg-\[var\(--primary-color\)\]{background-color:var(--primary-color)}.bg-amber-50{background-color:var(--color-amber-50)}.bg-black\/30{background-color:#0000004d}.bg-black\/30{background-color:rgba(0,0,0,0.3)}.bg-blue-50{background-color:var(--color-blue-50)}.bg-green-50{background-color:var(--color-green-50)}.bg-red-50{background-color:var(--color-red-50)}.bg-slate-50{background-color:var(--color-slate-50)}.bg-slate-100{background-color:var(--color-slate-100)}.bg-slate-200{background-color:var(--color-slate-200)}.bg-slate-300{background-color:var(--color-slate-300)}.bg-slate-800{background-color:var(--color-slate-800)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.object-cover{object-fit:cover}.p-2{padding:calc(var(--spacing) * 2)}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.px-2{padding-left:calc(var(--spacing) * 2);padding-right:calc(var(--spacing) * 2)}.px-3{padding-left:calc(var(--spacing) * 3);padding-right:calc(var(--spacing) * 3)}.px-4{padding-left:calc(var(--spacing) * 4);padding-right:calc(var(--spacing) * 4)}.px-5{padding-left:calc(var(--spacing) * 5);padding-right:calc(var(--spacing) * 5)}.px-6{padding-left:calc(var(--spacing) * 6);padding-right:calc(var(--spacing) * 6)}.px-8{padding-left:calc(var(--spacing) * 8);padding-right:calc(var(--spacing) * 8)}.py-0\.5{padding-top:calc(var(--spacing) * .5);padding-bottom:calc(var(--spacing) * .5)}.py-1{padding-top:calc(var(--spacing) * 1);padding-bottom:calc(var(--spacing) * 1)}.py-2{padding-top:calc(var(--spacing) * 2);padding-bottom:calc(var(--spacing) * 2)}.py-2\.5{padding-top:calc(var(--spacing) * 2.5);padding-bottom:calc(var(--spacing) * 2.5)}.py-3{padding-top:calc(var(--spacing) * 3);padding-bottom:calc(var(--spacing) * 3)}.py-4{padding-top:calc(var(--spacing) * 4);padding-bottom:calc(var(--spacing) * 4)}.py-6{padding-top:calc(var(--spacing) * 6);padding-bottom:calc(var(--spacing) * 6)}.py-8{padding-top:calc(var(--spacing) * 8);padding-bottom:calc(var(--spacing) * 8)}.py-12{padding-top:calc(var(--spacing) * 12);padding-bottom:calc(var(--spacing) * 12)}.py-16{padding-top:calc(var(--spacing) * 16);padding-bottom:calc(var(--spacing) * 16)}.py-20{padding-top:calc(var(--spacing) * 20);padding-bottom:calc(var(--spacing) * 20)}.py-band-y{padding-top:var(--spacing-band-y);padding-bottom:var(--spacing-band-y)}.py-section-y{padding-top:var(--spacing-section-y);padding-bottom:var(--spacing-section-y)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-6{padding-top:calc(var(--spacing) * 6)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-4{padding-left:calc(var(--spacing) * 4)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-display{font-size:var(--text-display);line-height:var(--tw-leading,var(--text-display--line-height))}.text-h1{font-size:var(--text-h1);line-height:var(--tw-leading,var(--text-h1--line-height))}.text-h2{font-size:var(--text-h2);line-height:var(--tw-leading,var(--text-h2--line-height))}.text-h3{font-size:var(--text-h3);line-height:var(--tw-leading,var(--text-h3--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-5{--tw-leading:calc(var(--spacing) * 5);line-height:calc(var(--spacing) * 5)}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-amber-400{color:var(--color-amber-400)}.text-amber-800{color:var(--color-amber-800)}.text-blue-800{color:var(--color-blue-800)}.text-current{color:currentColor}.text-green-600{color:var(--color-green-600)}.text-green-800{color:var(--color-green-800)}.text-red-400{color:var(--color-red-400)}.text-red-500{color:var(--color-red-500)}.text-red-800{color:var(--color-red-800)}.text-slate-200{color:var(--color-slate-200)}.text-slate-300{color:var(--color-slate-300)}.text-slate-400{color:var(--color-slate-400)}.text-slate-500{color:var(--color-slate-500)}.text-slate-600{color:var(--color-slate-600)}.text-slate-700{color:var(--color-slate-700)}.text-slate-800{color:var(--color-slate-800)}.text-slate-900{color:var(--color-slate-900)}.text-white{color:var(--color-white)}.text-white\/70{color:#ffffffb3}.text-white\/70{color:rgba(255,255,255,0.7)}.uppercase{text-transform:uppercase}.not-italic{font-style:normal}.line-through{text-decoration-line:line-through}.underline{text-decoration-line:underline}.accent-\[var\(--primary-color\)\]{accent-color:var(--primary-color)}.opacity-90{opacity:.9}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-300{--tw-duration:.3s;transition-duration:.3s}.outline-none{--tw-outline-style:none;outline-style:none}@media (hover:hover){.group-hover\:scale-105.group:hover *{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.group-hover\:text-slate-600.group:hover *{color:var(--color-slate-600)}}.focus-within\:border-slate-400:focus-within{border-color:var(--color-slate-400)}@media (hover:hover){.hover\:border-slate-400:hover{border-color:var(--color-slate-400)}.hover\:bg-slate-50:hover{background-color:var(--color-slate-50)}.hover\:bg-slate-100:hover{background-color:var(--color-slate-100)}.hover\:bg-slate-200:hover{background-color:var(--color-slate-200)}.hover\:text-red-500:hover{color:var(--color-red-500)}.hover\:text-red-600:hover{color:var(--color-red-600)}.hover\:text-slate-600:hover{color:var(--color-slate-600)}.hover\:text-slate-700:hover{color:var(--color-slate-700)}.hover\:text-slate-800:hover{color:var(--color-slate-800)}.hover\:text-slate-900:hover{color:var(--color-slate-900)}.hover\:text-white:hover{color:var(--color-white)}.hover\:opacity-70:hover{opacity:.7}.hover\:opacity-80:hover{opacity:.8}}@media (min-width:40rem){.sm\:mb-0{margin-bottom:calc(var(--spacing) * 0)}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:justify-between{justify-content:space-between}}@media (min-width:48rem){.md\:absolute{position:absolute}.md\:sticky{position:sticky}.md\:top-24{top:calc(var(--spacing) * 24)}.md\:left-1\/2{left:50%}.md\:order-1{order:1}.md\:order-2{order:2}.md\:order-3{order:3}.md\:order-none{order:0}.md\:col-span-1{grid-column:span 1/span 1}.md\:col-span-2{grid-column:span 2/span 2}.md\:col-span-3{grid-column:span 3/span 3}.md\:mx-8{margin-left:calc(var(--spacing) * 8);margin-right:calc(var(--spacing) * 8)}.md\:ml-auto{margin-left:auto}.md\:block{display:block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:h-64{height:calc(var(--spacing) * 64)}.md\:h-\[70vh\]{height:70vh}.md\:h-\[80vh\]{height:80vh}.md\:-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-center{align-items:center}.md\:justify-between{justify-content:space-between}.md\:gap-12{gap:calc(var(--spacing) * 12)}.md\:gap-content-lg{gap:var(--spacing-content-lg)}.md\:p-12{padding:calc(var(--spacing) * 12)}.md\:py-12{padding-top:calc(var(--spacing) * 12);padding-bottom:calc(var(--spacing) * 12)}.md\:py-16{padding-top:calc(var(--spacing) * 16);padding-bottom:calc(var(--spacing) * 16)}.md\:py-24{padding-top:calc(var(--spacing) * 24);padding-bottom:calc(var(--spacing) * 24)}.md\:py-32{padding-top:calc(var(--spacing) * 32);padding-bottom:calc(var(--spacing) * 32)}.md\:py-band-y-md{padding-top:var(--spacing-band-y-md);padding-bottom:var(--spacing-band-y-md)}.md\:py-section-y-md{padding-top:var(--spacing-section-y-md);padding-bottom:var(--spacing-section-y-md)}.md\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.md\:text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.md\:text-display-md{font-size:var(--text-display-md);line-height:var(--tw-leading,var(--text-display-md--line-height))}.md\:text-h1-md{font-size:var(--text-h1-md);line-height:var(--tw-leading,var(--text-h1-md--line-height))}.md\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}}.nav-item{position:relative}.nav-item:hover>.nav-submenu,.nav-item:focus-within>.nav-submenu{opacity:1;pointer-events:auto;transform:scale(1)}.nav-submenu{opacity:0;transform-origin:0 0;pointer-events:none;z-index:80;transition:all .2s ease-out;transform:scale(.98)}.spark-preview-indicator{z-index:100;color:#fff;background:#0f172a;border:1px solid #fff3;border-radius:.75rem;align-items:center;gap:.75rem;max-width:calc(100vw - 2rem);padding:.75rem 1rem;font-size:.875rem;line-height:1.25rem;display:flex;position:fixed;bottom:1rem;right:1rem;box-shadow:0 12px 32px #0f172a47}.spark-preview-indicator__message{font-weight:600}.spark-preview-indicator__exit{color:#0f172a;background:#fff;border-radius:.375rem;padding:.25rem .5rem;font-weight:700;text-decoration:none}.spark-preview-indicator__exit:focus-visible{outline-offset:3px;outline:3px solid #fbbf24}@media (hover:hover){.spark-preview-indicator__exit:hover{color:#0f172a;opacity:1;background:#e2e8f0}}@media not all and (min-width:30rem){.spark-preview-indicator{justify-content:space-between;max-width:none;bottom:.75rem;left:.75rem;right:.75rem}}.variant-option-list{flex-wrap:wrap;gap:.5rem;display:flex}.variant-option{display:inline-flex;position:relative}.variant-option input{opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute;top:0;right:0;bottom:0;left:0}.variant-option-label{color:#334155;white-space:nowrap;cursor:pointer;background-color:#fff;border:1px solid #e2e8f0;justify-content:center;align-items:center;min-height:44px;padding:0 1.25rem;font-size:.875rem;line-height:1.25rem;transition:border-color .15s ease-out,background-color .15s ease-out,color .15s ease-out;display:inline-flex}.variant-option:hover .variant-option-label{border-color:#94a3b8}.variant-option input:focus-visible+.variant-option-label{outline:2px solid var(--primary-color);outline-offset:2px}.variant-option input:checked+.variant-option-label{background-color:var(--primary-color);border-color:var(--primary-color);color:#fff}[data-light-primary] .variant-option input:checked+.variant-option-label{color:#1e293b}.variant-option[data-variant-unavailable=true] input:not(:checked)+.variant-option-label{opacity:.55;color:#64748b}.variant-option[data-variant-unavailable=true] .variant-option-label:after{content:"";pointer-events:none;background-image:linear-gradient(to top right,#fff0 47.5%,#94a3b8 47.5% 52.5%,#fff0 52.5%);position:absolute;top:0;right:0;bottom:0;left:0}.variant-option input:checked+.variant-option-label:after{background-image:linear-gradient(to top right,#fff0 47.5%,#fff 47.5% 52.5%,#fff0 52.5%)}[data-light-primary] .variant-option input:checked+.variant-option-label:after{background-image:linear-gradient(to top right,#fff0 47.5%,#1e293b 47.5% 52.5%,#fff0 52.5%)}.variant-option-value{color:#0f172a;font-weight:500}.variant-size-guide{color:#475569;text-underline-offset:2px;font-size:.75rem;line-height:1rem;text-decoration:underline} \ No newline at end of file diff --git a/partials/section_featured_categories.html b/partials/section_featured_categories.html index 2227da4..c5b586a 100644 --- a/partials/section_featured_categories.html +++ b/partials/section_featured_categories.html @@ -1,13 +1,13 @@ {# Spark homepage featured category tiles. #} {% if settings.show_featured_categories %} {% if settings.featured_categories|length > 0 %} -
+
{% t "homepage.heading.featured_categories" as default_featured_categories_heading %} {% include "partials/section_heading.html" with heading=settings.featured_categories_header|default:default_featured_categories_heading size=settings.featured_categories_header_size align=settings.featured_categories_header_align %}
{% for category in settings.featured_categories %} - + {% if category.image %} {{ category.name }} +
{% t "homepage.heading.featured_product" as default_featured_product_heading %} {% include "partials/section_heading.html" with heading=settings.featured_product_header|default:default_featured_product_heading size=settings.featured_product_header_size align=settings.featured_product_header_align %} -
+
{% with product=settings.featured_product image=settings.featured_product.primary_image %}
{% if image.original %} {% image_thumbnail image.original "800x" as thumb %} - {{ product.get_title }} + {{ product.get_title }} {% else %} -
+
{% endif %}
-

{{ product.get_title }}

+

{{ product.get_title }}

{% if settings.featured_product_description %}
{{ settings.featured_product_description|safe }}
{% else %} diff --git a/partials/section_featured_products.html b/partials/section_featured_products.html index 6e8844f..4147e6b 100644 --- a/partials/section_featured_products.html +++ b/partials/section_featured_products.html @@ -1,7 +1,7 @@ {# Spark homepage featured products grid. #} {% if settings.show_featured_products %} {% if settings.featured_products|length > 0 %} -
+
{% t "homepage.heading.featured_products" as default_featured_products_heading %} {% include "partials/section_heading.html" with heading=settings.featured_products_header|default:default_featured_products_heading size=settings.featured_products_header_size align=settings.featured_products_header_align %} diff --git a/partials/section_heading.html b/partials/section_heading.html index 5520fb4..ea59463 100644 --- a/partials/section_heading.html +++ b/partials/section_heading.html @@ -1,6 +1,6 @@ {# Shared section heading helper. Expects heading, size, and align. #} {% if heading %} -

+

{{ heading }}

{% endif %} diff --git a/partials/section_hero.html b/partials/section_hero.html index 8e01be3..8f5913c 100644 --- a/partials/section_hero.html +++ b/partials/section_hero.html @@ -20,7 +20,7 @@ style="color: {{ settings.homepage_hero_text_color|default:'#ffffff' }};">
{% if settings.homepage_hero_heading %} -

{{ settings.homepage_hero_heading }}

+

{{ settings.homepage_hero_heading }}

{% endif %} {% if settings.homepage_hero_subheading %}

{{ settings.homepage_hero_subheading }}

diff --git a/partials/section_on_sale.html b/partials/section_on_sale.html index 2bd212d..4307dec 100644 --- a/partials/section_on_sale.html +++ b/partials/section_on_sale.html @@ -1,7 +1,7 @@ {# Spark homepage on-sale product grid. #} {% if settings.show_on_sale %} {% if settings.on_sale_products|length > 0 %} -
+
{% t "homepage.heading.on_sale" as default_on_sale %} {% include "partials/section_heading.html" with heading=settings.on_sale_header|default:default_on_sale size=settings.on_sale_header_size align=settings.on_sale_header_align %} diff --git a/partials/section_promo_banner.html b/partials/section_promo_banner.html index 6370efc..6ea6f4d 100644 --- a/partials/section_promo_banner.html +++ b/partials/section_promo_banner.html @@ -1,11 +1,11 @@ {# Spark homepage full-width promo banner. #} {% if settings.show_promo_banner %} {% t "homepage.heading.promo_banner" as default_promo_banner_heading %} -
-

{{ settings.promo_banner_heading|default:default_promo_banner_heading }}

+

{{ settings.promo_banner_heading|default:default_promo_banner_heading }}

{% if settings.promo_banner_subheading %}

{{ settings.promo_banner_subheading }}

{% endif %} From edd6285c4be39a13e005932590624931ea82e46a Mon Sep 17 00:00:00 2001 From: Devin Michael Date: Mon, 7 Sep 2026 16:45:06 +0700 Subject: [PATCH 3/4] Style tokens: pin the defaults in a test and document the settings (#56) A refusal-coverage pass on the previous two changes found that changing a token fallback (say --spacing-section-y from 3rem to 3.5rem) and rebuilding leaves the whole suite green, so the "identical at defaults" contract had no test behind it. tests/test_style_tokens.py now pins the 24 @theme declarations, rejects a theme key that reads a property of its own name (a self-reference compiles cleanly and disconnects the bridge at computed-value time), checks the component rules read the bridge with the old literal as fallback, checks the base layout emits nothing for a default option, checks the live section branches carry the token utilities while their placeholder branches keep py-12 md:py-16, and pins the nine setting ids with their option lists and defaults for the external token manifests that will target them. Mutation-verified: each of the three planted defects fails its test. Source-only, no compile. Documentation: DESIGN.md's Spacing, Borders & Radius and Typography chapters now state today's values as defaults that Theme Settings > Style adjusts, keep the sharp-corner default, and describe which rules consume each token; the section-spec authoring contract says new sections consume the token utilities and that placeholder chrome stays literal; the settings catalog and README list the nine settings; CHANGELOG gains an Unreleased entry. The help text for radius_control and border_color now names exactly what consumes them (.btn; .btn-secondary and bordered product cards) rather than form controls and all dividers, which are still literal. Co-Authored-By: Claude Fable 5.1 --- CHANGELOG.md | 4 + DESIGN.md | 43 ++++- README.md | 2 +- configs/settings_schema.json | 4 +- docs/section-specs/README.md | 6 + docs/theme-settings-partials.md | 2 +- tests/test_style_tokens.py | 307 ++++++++++++++++++++++++++++++++ 7 files changed, 355 insertions(+), 13 deletions(-) create mode 100644 tests/test_style_tokens.py diff --git a/CHANGELOG.md b/CHANGELOG.md index 020f692..0c0357b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,10 @@ All notable public Spark changes should be recorded here. Spark follows human-readable release notes rather than a package-manager version contract. The release version is stored in `manifest.json` and mirrored in [README.md](README.md) and `CLAUDE.md`. When releasing, update all three version markers, add a dated changelog section, and publish a Git tag or GitHub release when the repo is ready for external consumers to pin versions. +## Unreleased + +- Theme Settings > Style gained nine token-shaped settings: Layout holds `body_bg_color`, `border_color`, `radius_control`, `radius_card`, `section_padding`, `content_gap` and `container_max_width`; Type Scale holds `heading_scale` and `body_size`. `layouts/base.html` bridges them into `:root` with the same guarded pattern the font and colour settings use (noun-first properties such as `--control-radius` and `--section-padding-y`), and `css/input.css` registers namespace-first `@theme` keys that read them with today's values as fallbacks (`--radius-control: var(--control-radius, 4px)`); the names differ on purpose, because a key that reads a property of its own name is a self-reference and the bridge disconnects. The default option of `section_padding`, `content_gap`, `heading_scale` and `body_size` emits nothing. Component rules now read the bridge directly: body background and font-size, `.btn` radius, `.btn-secondary` and `.product-card-bordered` border colour, `.container` max-width, `.product-card` radius (with `overflow: hidden` so a rounded card clips its image), and the `.product-grid` / `.category-grid` gaps. In the six homepage sections the live branches swap design-decision literals for token utilities: `py-section-y md:py-section-y-md` on the four standard sections and `py-band-y md:py-band-y-md` on the promo band, `gap-content-md md:gap-content-lg` on the featured product columns, `text-display md:text-display-md` on the hero heading, `text-h1 md:text-h1-md` / `text-h2` / `text-h3` on the section headings, promo heading and featured product title, and `rounded-card` on the featured image and category tiles. Every `--text-*` key carries Tailwind's own line-height ratio, so the swap changes neither size nor leading. Placeholder and empty-state chrome stays literal because it signals missing configuration rather than the merchant-facing design language. A fixture render of the homepage before and after, at default settings, shows 0 computed-style differences and 0 differing pixels at 1280 and 375, for both a populated homepage and a fresh store rendering only `settings_data.json`. `tests/test_style_tokens.py` pins the fallbacks, the bridge conditions, the live-versus-placeholder split and the nine setting ids. `assets/main.css` grew from 48219 to 50298 bytes (#56). + ## 1.3.0 - 2026-09-03 - `layouts/base.html` now renders the platform `{% pixels %}` tag in a new `pixels` block, immediately before the theme script stack. The platform injects every app's storefront event tracker (Google Analytics 4, Google Tag Manager, Klaviyo, Taboola) as hidden iframes through that tag, and Intro Bootstrap reaches it indirectly through `{% core_js %}`. Spark replaced `core_js` with `spark-platform.js` and never re-added `pixels`, so no tracker iframe was rendered, `window.customerEventManager` never existed, and no app received `page_viewed`, `product_viewed`, `product_added_to_cart`, or `checkout_*` events on any Spark store. The tag is a platform builtin, needs no `{% load %}`, does not depend on jQuery, and respects the platform's `disable_pixel` guard. diff --git a/DESIGN.md b/DESIGN.md index 13b03fa..a2386f6 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -16,6 +16,17 @@ Spark is a storefront theme for Next Commerce. This document is the single sourc Merchants can override body and heading fonts via dashboard settings (`font_body`, `font_header`). The system stack is the default. +### Heading scale + +| Utility | Default size | +|---------|--------------| +| `text-h3` | 1.25rem | +| `text-h2` | 1.5rem | +| `text-h1` / `md:text-h1-md` | 1.875rem / 2.25rem | +| `text-display` / `md:text-display-md` | 1.875rem / 3rem | + +Each heading token carries Tailwind's line-height ratio. The `heading_scale` setting in Theme Settings > Style > Type Scale multiplies these sizes through `--heading-scale`: small is 0.875, default is 1, and large is 1.125. Body copy stays on the utility scale. The `body_size` setting accepts 15px through 18px and sets the body font-size through `--body-size`; its 16px default is the browser default. The page background comes from `body_bg_color` through `--body-bg-color`. + | Role | Size | Weight | Line-height | Usage | |------|------|--------|-------------|-------| | Page heading | text-2xl / text-3xl | 600 (semibold) | 1.2 | h1 on category, PDP, blog post | @@ -97,13 +108,17 @@ These are functional signals, not brand expression. Never let merchants change t | 12 | 48px | Major section padding (py-12) | | 16 | 64px | Footer top margin (mt-16) | +### Section rhythm and content gap (merchant-adjustable) + +Standard sections use 3rem vertical padding and 4rem at 768px and above. The promo band uses 4rem and 5rem at the same breakpoint. The default content gap is 1.5rem; its `sm`, `md`, and `lg` steps use 2/3, 4/3, and 2x ratios. + +Theme Settings > Style > Layout controls these values. `section_padding` sets `--section-padding-y` to compact (2rem), default (3rem), or roomy (5rem). `content_gap` sets `--content-gap` to tight (1rem), default (1.5rem), or loose (2rem). + ### Container -``` -max-width: 1280px -padding: 1rem (mobile) → 1.5rem (768px+) -margin: auto (centered) -``` +**Max-width:** 1280px default; `container_max_width` offers 1120px / 1280px / 1440px via `--container-max`. + +**Gutters:** 1rem (mobile) → 1.5rem (768px+). Margin remains auto (centered). --- @@ -113,11 +128,12 @@ margin: auto (centered) | Element | Radius | Rationale | |---------|--------|-----------| -| Buttons | 4px (0.25rem) | Only rounded element — subtle, functional | -| Form inputs | 4px (0.25rem) | Matches buttons | +| Buttons (`.btn`) | 4px default, `radius_control` (0-16px) via `--control-radius` | Subtle, functional rounding | +| Form inputs | 4px (0.25rem), literal | Matches the button default; not yet on the token | +| Product cards, featured image, category tiles | 0 default, `radius_card` (0-16px) via `--card-radius` | Sharp by default | | Everything else | 0 | Sharp, architectural feel | -**Border style:** 1px solid slate-200 (`#E2E8F0`) for all layout dividers — header bottom, footer sections, form fields, card boundaries. +**Border style:** 1px solid slate-200 (`#E2E8F0`) for all layout dividers — header bottom, footer sections, form fields, card boundaries. `border_color` via `--border-color` drives the secondary button and bordered product cards today; the other dividers stay literal until they move onto the token. **Box shadow:** Almost never. Clean flat aesthetic. Exception: side cart legacy CSS (platform dependency). @@ -341,7 +357,7 @@ These patterns are banned. If you see them in a PR, reject it. 2. **Centered-everything layout** — left-align text. Only center: empty states, footer copyright. 3. **Generic hero text** — "Welcome to our store." The hero IS a product image. 4. **Decorative gradients or blobs** — zero decorative elements. -5. **Rounded-everything** — sharp corners (0px). Only buttons get 4px. +5. **Rounded-everything** — the default is 0px for cards and 4px for controls. Merchant radius settings are the sanctioned way to add rounding. 6. **Drop shadows for depth** — flat aesthetic. Borders for separation. 7. **Ratings/badges/tags on product cards** — image + title + price. Nothing else. 8. **Hover zoom on product images** — let photos breathe. group-hover:text-slate-600 on title is enough. @@ -387,6 +403,15 @@ Applied to support articles and cart page. Hide chrome, clean layout, readable t | `body_text_color` | color | #1E293B | Body text | | `body_header_color` | color | #1E293B | Headings | | `body_link_color` | color | primary | Links | +| `body_bg_color` | color | #FFFFFF | Page background via `--body-bg-color` | +| `border_color` | color | #E2E8F0 | Secondary button and bordered product card borders via `--border-color` | +| `radius_control` | select | 4px | Button (`.btn`) radius via `--control-radius` | +| `radius_card` | select | 0 | Product card, featured image, and category tile radius via `--card-radius` | +| `section_padding` | select | default (3rem) | Homepage section and promo-band vertical rhythm via `--section-padding-y` | +| `content_gap` | select | default (1.5rem) | Product grids, category grids, and content-column gaps via `--content-gap` | +| `container_max_width` | select | 1280px | Container maximum width via `--container-max` | +| `heading_scale` | select | default (1) | Display and section heading tokens via `--heading-scale` | +| `body_size` | select | 16px | Body font-size via `--body-size` | | `navbar_bg_color` | color | white | Header background | | `navbar_link_color` | color | #475569 | Nav icon/link color | | `footer_bg_color` | color | #F8FAFC | Footer background | diff --git a/README.md b/README.md index 79958d6..2ef069e 100644 --- a/README.md +++ b/README.md @@ -145,7 +145,7 @@ Tracked theme documentation starts at [docs/README.md](docs/README.md). Current - **Membership price presentation** — optional client-side member price display driven by logged-in customer metadata, designed to pair with platform-side checkout discounts. - **Critical-path load order** — metadata, LCP preloads, CSS, body content, ordered theme JS, footer app hooks, and tracking are explicitly separated in `layouts/base.html`. - **Delight package** — skeleton loading, image optimization, cart badge animation, keyboard navigation, contrast auto-detection, print stylesheet. -- **Merchant-configurable** — brand colors, fonts, navigation, footer, social links, payment icons, and more via Theme Settings. +- **Merchant-configurable** — brand colors, fonts, navigation, footer, social links, payment icons, layout and type-scale tokens (radius, section rhythm, content gap, border and page colours, container width, heading scale, body size), and more via Theme Settings. See [docs/theme-settings-partials.md](docs/theme-settings-partials.md) for the design-team catalog of Theme Settings partials and homepage section partials, [docs/figma-section-library-plan.md](docs/figma-section-library-plan.md) for the Spark Figma section library plan, [docs/performance-load-order.md](docs/performance-load-order.md) for the critical-path loading convention, [docs/pdp-customization.md](docs/pdp-customization.md) for the PDP redesign preservation checklist and QA runbook, [docs/pdp-variant-state.md](docs/pdp-variant-state.md) for the PDP variant state Interface, [docs/cart-events.md](docs/cart-events.md) for the cart event Interface, [docs/cart-rewards.md](docs/cart-rewards.md) for side-cart rewards and upsell rules, [docs/cart-drawer-architecture.md](docs/cart-drawer-architecture.md) for the drawer Module split, [docs/intro-bootstrap-comparison.md](docs/intro-bootstrap-comparison.md) for the Intro Bootstrap comparison, [docs/design-block-authoring.md](docs/design-block-authoring.md) for design-block authoring guidance, [docs/terminology.md](docs/terminology.md) for NEXT-native naming guardrails, and [docs/sections-architecture-proposal.md](docs/sections-architecture-proposal.md) for the future theme sections platform proposal. diff --git a/configs/settings_schema.json b/configs/settings_schema.json index 847f558..991a6dd 100644 --- a/configs/settings_schema.json +++ b/configs/settings_schema.json @@ -1189,7 +1189,7 @@ "name": "border_color", "label": "Border Color", "type": "color", - "help_text": "Color for borders and dividers. Default slate-200." + "help_text": "Color for secondary button and bordered product card borders. Default slate-200 (#E2E8F0)." }, { "name": "radius_control", @@ -1218,7 +1218,7 @@ } ], "default": "4px", - "help_text": "Corner radius for buttons and form controls. Default 4px." + "help_text": "Corner radius for buttons. Default 4px." }, { "name": "radius_card", diff --git a/docs/section-specs/README.md b/docs/section-specs/README.md index 476ec1b..1a54142 100644 --- a/docs/section-specs/README.md +++ b/docs/section-specs/README.md @@ -16,3 +16,9 @@ Each spec should describe one merchant-configurable section across Figma, Theme | [Promo banner](promo-banner.md) | First pass | `partials/section_promo_banner.html` | Use `docs/figma-section-library-plan.md` for the overall workflow and library structure, and [`docs/section-roster.md`](../section-roster.md) for the full Tier 1/2/3 partial roster Spark should ship to fully cover modern D2C storefronts. + +## Authoring contract: consume the tokens + +New section partials must use the Style token utilities instead of repeating design literals. Use `py-section-y md:py-section-y-md` for standard section rhythm or `py-band-y md:py-band-y-md` for promotion bands; use `gap-content*`, `rounded-card` or `rounded-control`, `text-h1`, `text-h2`, `text-h3`, or `text-display`, adding `md:text-h1-md` or `md:text-display-md` where applicable; and use `border-border`. Do not substitute literal utilities such as `py-12`, `gap-6`, `rounded`, `border-slate-200`, or `text-2xl` for those design decisions. + +Placeholder and empty-state chrome stays literal on purpose because it communicates missing configuration rather than the merchant-facing design language. See [`css/input.css`](../../css/input.css) under `@theme` for the complete token list and [`DESIGN.md`](../../DESIGN.md) for defaults. diff --git a/docs/theme-settings-partials.md b/docs/theme-settings-partials.md index fd8ee52..35dfe85 100644 --- a/docs/theme-settings-partials.md +++ b/docs/theme-settings-partials.md @@ -51,7 +51,7 @@ These files are not partials, but they are important setting-backed surfaces des | File | Setting Group | Purpose | Key Settings | | --- | --- | --- | --- | -| `layouts/base.html` | Advanced / Theme Styles / Navigation / Membership Pricing | Global document shell, critical-path load order, typography variables, custom CSS, account-only routing, announcement placement, and optional membership pricing bootstrapping. | `site_index`, `font_script`, `font_body`, `font_header`, `body_text_color`, `body_header_color`, `body_link_color`, `custom_css`, `account_only`, `ab_placement`, `enable_membership_pricing`, `membership_discount_percent`, `membership_status_metadata_key`, `membership_active_status_value`, `membership_label`, `membership_detail_text` | +| `layouts/base.html` | Advanced / Theme Styles / Navigation / Membership Pricing | Global document shell, critical-path load order, typography variables, custom CSS, account-only routing, announcement placement, and optional membership pricing bootstrapping. | `site_index`, `font_script`, `font_body`, `font_header`, `body_text_color`, `body_header_color`, `body_link_color`, `body_bg_color`, `border_color`, `radius_control`, `radius_card`, `section_padding`, `content_gap`, `container_max_width`, `heading_scale`, `body_size`, `custom_css`, `account_only`, `ab_placement`, `enable_membership_pricing`, `membership_discount_percent`, `membership_status_metadata_key`, `membership_active_status_value`, `membership_label`, `membership_detail_text` | | `templates/index.html` | Homepage | Homepage shell that includes the homepage section partials in the current fixed order. | `home_page_css`, `account_only`, `ab_text`, `ab_placement` | | `templates/catalogue/product.html` | Product Pages / Membership Pricing | Product detail layout, gallery behavior, variant selector, reviews, page-scoped CSS, and member price surfaces for the PDP and sticky add-to-cart bar. Variant behavior is coordinated by `assets/js/spark-variant-state.js`; custom redesigns should follow `docs/pdp-customization.md`. | `product_page_css`, `product_description_placement`, `product_gallery_layout`, `product_reviews`, `variant_picker`, `enable_membership_pricing`, `membership_discount_percent`, `membership_status_metadata_key`, `membership_active_status_value`, `membership_label`, `membership_detail_text` | diff --git a/tests/test_style_tokens.py b/tests/test_style_tokens.py new file mode 100644 index 0000000..4126d7d --- /dev/null +++ b/tests/test_style_tokens.py @@ -0,0 +1,307 @@ +"""Pin the default rendering contract for merchant-controlled style tokens. + +The tokens exist so merchants can change storefront geometry from Theme +Settings without a source edit. A store on default settings must render +exactly as it did before the tokens were introduced, and that invariant +depends on every @theme fallback equalling the literal it replaced. + +These tests pin those fallbacks and the bridge from settings to CSS. A +drive-by change to one must fail here instead of silently restyling every +existing store. +""" + +import json +import re +import unittest +from pathlib import Path + + +ROOT = Path(__file__).resolve().parents[1] +INPUT_CSS = ROOT / "css" / "input.css" +BASE_LAYOUT = ROOT / "layouts" / "base.html" +SETTINGS_SCHEMA = ROOT / "configs" / "settings_schema.json" + + +EXPECTED_THEME_DECLARATIONS = ( + "--color-page: var(--body-bg-color, #FFFFFF);", + "--color-border: var(--border-color, #E2E8F0);", + "--radius-control: var(--control-radius, 4px);", + "--radius-card: var(--card-radius, 0);", + "--spacing-section-y: var(--section-padding-y, 3rem);", + "--spacing-section-y-md: calc(var(--section-padding-y, 3rem) * 4 / 3);", + "--spacing-band-y: calc(var(--section-padding-y, 3rem) * 4 / 3);", + "--spacing-band-y-md: calc(var(--section-padding-y, 3rem) * 5 / 3);", + "--spacing-content: var(--content-gap, 1.5rem);", + "--spacing-content-sm: calc(var(--content-gap, 1.5rem) * 2 / 3);", + "--spacing-content-md: calc(var(--content-gap, 1.5rem) * 4 / 3);", + "--spacing-content-lg: calc(var(--content-gap, 1.5rem) * 2);", + "--text-h3: calc(1.25rem * var(--heading-scale, 1));", + "--text-h3--line-height: calc(1.75 / 1.25);", + "--text-h2: calc(1.5rem * var(--heading-scale, 1));", + "--text-h2--line-height: calc(2 / 1.5);", + "--text-h1: calc(1.875rem * var(--heading-scale, 1));", + "--text-h1--line-height: calc(2.25 / 1.875);", + "--text-h1-md: calc(2.25rem * var(--heading-scale, 1));", + "--text-h1-md--line-height: calc(2.5 / 2.25);", + "--text-display: calc(1.875rem * var(--heading-scale, 1));", + "--text-display--line-height: calc(2.25 / 1.875);", + "--text-display-md: calc(3rem * var(--heading-scale, 1));", + "--text-display-md--line-height: 1;", +) + + +def extract_css_block(text, selector): + match = re.search( + rf"^[ \t]*{re.escape(selector)}\s*\{{(?P.*?)^[ \t]*\}}", + text, + re.MULTILINE | re.DOTALL, + ) + if match is None: + raise AssertionError(f"Could not find CSS rule for {selector}") + return match.group("body") + + +def normalise_whitespace(text): + return re.sub(r"\s+", " ", text).strip() + + +class StyleTokenTests(unittest.TestCase): + def test_theme_fallbacks_equal_the_replaced_literals(self): + """Default token values must remain the literals they replaced.""" + css = INPUT_CSS.read_text(encoding="utf-8") + theme = extract_css_block(css, "@theme") + declarations = { + normalise_whitespace(match.group(0)) + for match in re.finditer(r"--[\w-]+\s*:\s*[^;]+;", theme) + } + + for expected in EXPECTED_THEME_DECLARATIONS: + with self.subTest(declaration=expected): + self.assertIn(normalise_whitespace(expected), declarations) + + def test_theme_keys_do_not_reference_themselves(self): + """Self-reference invalidates a token and disconnects its bridge.""" + css = INPUT_CSS.read_text(encoding="utf-8") + theme = extract_css_block(css, "@theme") + declarations = re.findall(r"(--[\w-]+)\s*:\s*([^;]+);", theme) + + for name, value in declarations: + with self.subTest(token=name): + self.assertNotIn( + f"var({name}", + normalise_whitespace(value), + f"{name} references itself and is invalid at computed-value time", + ) + + def test_component_rules_read_the_bridge_with_the_old_literal_as_fallback(self): + """Direct component consumers retain their pre-token default values.""" + css = INPUT_CSS.read_text(encoding="utf-8") + expected_by_selector = { + "body": ( + "background-color: var(--body-bg-color, #FFFFFF);", + "font-size: var(--body-size, 1rem);", + ), + ".btn": ("border-radius: var(--control-radius, 0.25rem);",), + ".btn-secondary": ( + "border: 1px solid var(--border-color, #E2E8F0);", + ), + ".container": ("max-width: var(--container-max, 1280px);",), + ".product-card": ("border-radius: var(--card-radius, 0);",), + ".product-card-bordered": ( + "border: 1px solid var(--border-color, #E2E8F0);", + ), + ".product-grid": ("gap: var(--content-gap, 1.5rem);",), + ".category-grid": ( + "gap: calc(var(--content-gap, 1.5rem) * 2 / 3);", + ), + } + + for selector, expected_declarations in expected_by_selector.items(): + rule = normalise_whitespace(extract_css_block(css, selector)) + for declaration in expected_declarations: + with self.subTest(selector=selector, declaration=declaration): + self.assertIn(normalise_whitespace(declaration), rule) + + def test_bridge_emits_nothing_for_default_options(self): + """The layout bridge emits overrides only for non-default settings.""" + layout = BASE_LAYOUT.read_text(encoding="utf-8") + root = extract_css_block(layout, ":root") + bridge_names = ( + "--body-bg-color", + "--border-color", + "--control-radius", + "--card-radius", + "--section-padding-y", + "--content-gap", + "--heading-scale", + "--body-size", + "--container-max", + ) + branch_stack = [] + occurrences = {name: 0 for name in bridge_names} + + for line in root.splitlines(): + tag = re.search(r"\{%\s*(if|elif|endif)\b(.*?)%\}", line) + if tag: + kind, condition = tag.groups() + if kind == "if": + branch_stack.append(condition.strip()) + elif kind == "elif": + self.assertTrue(branch_stack, "elif without an open if") + branch_stack[-1] = condition.strip() + else: + self.assertTrue(branch_stack, "endif without an open if") + branch_stack.pop() + + declaration = re.search(r"(--[\w-]+)\s*:", line) + if declaration and declaration.group(1) in occurrences: + name = declaration.group(1) + occurrences[name] += 1 + self.assertTrue( + branch_stack, + f"{name} is emitted unconditionally for default settings", + ) + + expected_occurrences = {name: 1 for name in bridge_names} + expected_occurrences.update( + { + "--section-padding-y": 2, + "--content-gap": 2, + "--heading-scale": 2, + } + ) + self.assertEqual(occurrences, expected_occurrences) + + expected_conditions = { + "section_padding": ( + 'settings.section_padding == "compact"', + 'settings.section_padding == "roomy"', + ), + "content_gap": ( + 'settings.content_gap == "tight"', + 'settings.content_gap == "loose"', + ), + "heading_scale": ( + 'settings.heading_scale == "small"', + 'settings.heading_scale == "large"', + ), + "body_size": ( + 'settings.body_size and settings.body_size != "16px"', + ), + } + for setting, expected in expected_conditions.items(): + conditions = tuple( + normalise_whitespace(condition) + for _, condition in re.findall( + rf"\{{%\s*(if|elif)\s+([^%]*settings\.{setting}[^%]*)%\}}", + root, + ) + ) + with self.subTest(setting=setting): + self.assertEqual(conditions, expected) + self.assertFalse( + any(re.search(r'==\s*["\']default["\']', item) for item in conditions) + ) + + def test_live_sections_use_token_utilities_and_placeholders_keep_literals(self): + """Live content is tokenized while empty-state geometry stays fixed.""" + standard_sections = ( + "section_featured_product.html", + "section_featured_products.html", + "section_featured_categories.html", + "section_on_sale.html", + ) + for filename in standard_sections: + text = (ROOT / "partials" / filename).read_text(encoding="utf-8") + sections = re.findall(r"]*>", text) + with self.subTest(partial=filename, branch="live"): + self.assertGreaterEqual(len(sections), 2) + self.assertIn("py-section-y md:py-section-y-md", sections[0]) + with self.subTest(partial=filename, branch="placeholder"): + self.assertIn("py-12 md:py-16", sections[1]) + + promo = (ROOT / "partials" / "section_promo_banner.html").read_text( + encoding="utf-8" + ) + self.assertIn("py-band-y md:py-band-y-md", re.findall(r"]*>", promo)[0]) + + heading = (ROOT / "partials" / "section_heading.html").read_text( + encoding="utf-8" + ) + for utility in ("text-h1 md:text-h1-md", "text-h3", "text-h2"): + self.assertIn(utility, heading) + for old_utility in ("text-xl", "text-2xl", "text-3xl", "text-4xl"): + self.assertNotIn(old_utility, heading) + + hero = (ROOT / "partials" / "section_hero.html").read_text(encoding="utf-8") + hero_h1 = re.search(r"]*>", hero) + self.assertIsNotNone(hero_h1) + self.assertIn("text-display md:text-display-md", hero_h1.group(0)) + + def test_settings_ids_are_pinned(self): + """External token manifests depend on stable setting IDs and values.""" + schema = json.loads(SETTINGS_SCHEMA.read_text(encoding="utf-8")) + settings = {} + for groups in schema.values(): + for entries in groups.values(): + for entry in entries: + name = entry.get("name") + if name in settings: + self.fail(f"Duplicate setting ID: {name}") + settings[name] = entry + + expected = { + "body_bg_color": ("color", None, None), + "border_color": ("color", None, None), + "radius_control": ( + "select", + ["0", "4px", "8px", "12px", "16px"], + "4px", + ), + "radius_card": ( + "select", + ["0", "4px", "8px", "12px", "16px"], + "0", + ), + "section_padding": ( + "select", + ["compact", "default", "roomy"], + "default", + ), + "content_gap": ( + "select", + ["tight", "default", "loose"], + "default", + ), + "heading_scale": ( + "select", + ["small", "default", "large"], + "default", + ), + "body_size": ( + "select", + ["15px", "16px", "17px", "18px"], + "16px", + ), + "container_max_width": ( + "select", + ["1120px", "1280px", "1440px"], + "1280px", + ), + } + + for name, (setting_type, option_values, default) in expected.items(): + with self.subTest(setting=name): + self.assertIn(name, settings) + setting = settings[name] + self.assertEqual(setting.get("type"), setting_type) + if option_values is not None: + self.assertEqual( + [option["value"] for option in setting.get("options", [])], + option_values, + ) + self.assertEqual(setting.get("default"), default) + + +if __name__ == "__main__": + unittest.main() From 4ffc949737bf8f1102bc9ceacc865ecda09d0b85 Mon Sep 17 00:00:00 2001 From: Devin Michael Date: Mon, 7 Sep 2026 17:07:39 +0700 Subject: [PATCH 4/4] Style tokens: drop the unused --color-page theme key (#56) Review on #57 noted --color-page had no consumer: the body rule reads --body-bg-color directly and no template uses bg-page. Tailwind only emits a theme variable once a utility uses it, so the key never reached assets/main.css (unchanged at 50298 bytes); it was dead config, and the pinning test drops it too. --color-border stays: the section-spec authoring contract names border-border for new sections, and it costs nothing until one uses it. Co-Authored-By: Claude Fable 5.1 --- css/input.css | 1 - tests/test_style_tokens.py | 1 - 2 files changed, 2 deletions(-) diff --git a/css/input.css b/css/input.css index 6854cff..8954e88 100644 --- a/css/input.css +++ b/css/input.css @@ -34,7 +34,6 @@ --color-warning: #F59E0B; /* Style tokens (spark#56) */ - --color-page: var(--body-bg-color, #FFFFFF); --color-border: var(--border-color, #E2E8F0); --radius-control: var(--control-radius, 4px); --radius-card: var(--card-radius, 0); diff --git a/tests/test_style_tokens.py b/tests/test_style_tokens.py index 4126d7d..19d5892 100644 --- a/tests/test_style_tokens.py +++ b/tests/test_style_tokens.py @@ -23,7 +23,6 @@ EXPECTED_THEME_DECLARATIONS = ( - "--color-page: var(--body-bg-color, #FFFFFF);", "--color-border: var(--border-color, #E2E8F0);", "--radius-control: var(--control-radius, 4px);", "--radius-card: var(--card-radius, 0);",