/* STORLY CORE THEME v2.0 — Professional E-commerce */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root{
--brand:#4F3AFF;--brand-l:#6B5BFF;--brand-d:#3D2BC7;
--text:#0f172a;--text-s:#475569;--text-m:#94a3b8;
--bg:#ffffff;--bg-s:#f8fafc;--bg-t:#f1f5f9;
--border:#e2e8f0;--border-l:#f1f5f9;
--r:14px;--r-sm:10px;--r-lg:20px;
--shadow:0 1px 3px rgba(2,6,23,.04),0 1px 2px rgba(2,6,23,.06);
--shadow-md:0 10px 26px rgba(2,6,23,.08);
--shadow-lg:0 18px 42px rgba(2,6,23,.12);
--shadow-xl:0 26px 64px rgba(2,6,23,.18);
--ease:cubic-bezier(.4,0,.2,1);
--dur-fast:.18s;--dur:.22s;--dur-slow:.24s;
--font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--container-max:1200px;--container-page:960px;
--space-section-sm:clamp(28px,4.4vw,44px);
--fs-xs:12px;--fs-sm:14px;--fs-body:16px;--fs-md:18px;
--fs-h3:clamp(1.5rem,2.6vw,2rem);--fs-h2:clamp(1.9rem,3.5vw,2.75rem);--fs-h1:clamp(2.35rem,4.8vw,4.15rem);
--lh-tight:1.1;--lh-heading:1.22;--lh-body:1.72;

--card-radius:16px;
--card-padding:16px;
--card-bg:#ffffff;
--card-border:1px solid #e5e7eb;
--card-shadow:0 4px 12px rgba(0,0,0,0.05);

--btn-radius:12px;
--btn-padding-y:12px;
--btn-padding-x:20px;
--btn-font-size:14px;
--btn-bg:#4f46e5;
--btn-color:#ffffff;

--text-title-size:18px;
--text-body-size:14px;
--text-color:#0f172a;

--section-padding-y:60px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font);font-size:var(--text-body-size);color:var(--text-color);background:var(--bg);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{color:var(--text-color);line-height:var(--lh-heading);letter-spacing:-.02em}
h1{font-size:var(--fs-h1);line-height:var(--lh-tight)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
a{color:inherit;text-decoration:none;transition:color var(--dur) var(--ease),opacity var(--dur) var(--ease),transform var(--dur-fast) var(--ease)}
img{max-width:100%;height:auto;display:block}
.container{max-width:var(--container-max);margin:0 auto;padding:0 24px}
@media(min-width:768px){.container{padding:0 32px}}
@media(max-width:460px){.container{padding:0 16px}}

/* Keep Font Awesome rendering stable inside storefront + preview iframe */
.fa,.fas,.fa-solid,.far,.fa-regular,.fal,.fa-light,.fat,.fa-thin,.fad,.fa-duotone,.fab,.fa-brands{
font-style:normal;line-height:1;text-rendering:auto;-webkit-font-smoothing:antialiased
}
.fa,.fas,.fa-solid,.far,.fa-regular,.fal,.fa-light,.fat,.fa-thin,.fad,.fa-duotone{
font-family:"Font Awesome 6 Free","Font Awesome 5 Free"!important
}
.fab,.fa-brands{font-family:"Font Awesome 6 Brands"!important}
.fa,.fas,.fa-solid{font-weight:900}
.far,.fa-regular{font-weight:400}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:var(--btn-padding-y) var(--btn-padding-x);border-radius:var(--btn-radius);font-weight:650;font-size:var(--btn-font-size);font-family:var(--font);border:none;cursor:pointer;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background-color var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),opacity var(--dur-fast) var(--ease);text-decoration:none;line-height:1.4;background:var(--btn-bg);color:var(--btn-color)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(79,58,255,.12)}
.btn-primary{background:var(--btn-bg);color:var(--btn-color);box-shadow:var(--card-shadow)}
.btn-primary:hover{background:var(--btn-bg);box-shadow:var(--shadow-md)}
.btn-outline{background:transparent;color:var(--text);border:1.5px solid var(--border)}
.btn-outline:hover{border-color:var(--brand);color:var(--brand);background:rgba(79,58,255,.03)}
.btn-white{background:#fff;color:var(--text);box-shadow:var(--shadow-md)}
.btn-white:hover{box-shadow:var(--shadow-lg)}
.btn-ghost{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.3);backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.45)}
.btn-sm{min-height:40px;padding:8px 18px;font-size:13px;border-radius:var(--btn-radius)}
.btn-lg{min-height:54px;padding:16px 34px;font-size:15px;border-radius:var(--btn-radius)}
.btn-full{width:100%}
.btn-icon{width:44px;height:44px;padding:0;border-radius:var(--btn-radius)}

/* PRODUCT CARD */
.product-card{background:var(--card-bg);border-radius:var(--card-radius);overflow:hidden;border:var(--card-border);box-shadow:var(--card-shadow);transition:transform var(--dur-slow) var(--ease),box-shadow var(--dur-slow) var(--ease),border-color var(--dur) var(--ease);position:relative}
.product-card:hover{box-shadow:var(--card-shadow);transform:translateY(-5px)}
.product-card .p-img{aspect-ratio:1/1;overflow:hidden;background:var(--bg-s);position:relative;border-radius:var(--product-image-radius,0)}
.product-card .p-img img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease);border-radius:inherit}
.product-card .p-img > div{border-radius:inherit}
.product-card:hover .p-img img{transform:scale(1.06)}
.product-card .p-info{padding:var(--card-padding)}
.product-card .p-name{font-size:var(--text-body-size);font-weight:600;color:var(--text-color);margin-bottom:6px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-card .p-desc{font-size:calc(var(--text-body-size) - 2px);color:var(--text-s);margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.product-card .p-price{font-size:17px;font-weight:800;color:var(--brand)}
.product-card .p-old{font-size:13px;color:var(--text-m);text-decoration:line-through;margin-left:8px;font-weight:400}
.product-card .p-badge{position:absolute;top:12px;left:12px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;z-index:2}
.product-card .p-badge-sale{background:#ef4444;color:#fff}
.product-card .p-badge-new{background:var(--brand);color:#fff}
.product-card .p-badge-out{background:#334155;color:#fff}
.product-card .p-quick{position:absolute;bottom:0;left:0;right:0;padding:12px;background:linear-gradient(transparent,rgba(0,0,0,.62));display:flex;gap:8px;opacity:0;transform:translateY(8px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.product-card:hover .p-quick{opacity:1;transform:translateY(0)}
.p-quick .btn{flex:1;padding:10px;font-size:12px}

/* PRODUCT GRID */
.product-grid{display:grid;grid-template-columns:repeat(var(--product-grid-cols,4),minmax(0,1fr));gap:var(--product-card-gap,24px)}
@media(max-width:1024px){.product-grid{grid-template-columns:repeat(var(--product-grid-cols-tablet,3),minmax(0,1fr));gap:var(--product-card-gap-tablet,20px)}}
@media(max-width:768px){.product-grid{grid-template-columns:repeat(var(--product-grid-cols-mobile,2),minmax(0,1fr));gap:var(--product-card-gap-mobile,12px)}}
@media(max-width:380px){.product-grid{gap:var(--product-card-gap-mobile,8px)}.product-card .p-info{padding:max(4px,calc(var(--card-padding) - 6px))}.product-card .p-name{font-size:12px}.product-card .p-price{font-size:14px}}

/* SECTION */
.section{padding:var(--section-padding-y) 0}
.section-sm{padding:var(--space-section-sm) 0}
.section-header{text-align:center;margin-bottom:clamp(24px,3.5vw,42px)}
.section-tag{display:inline-block;padding:6px 14px;border-radius:20px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(79,58,255,.08);color:var(--brand);margin-bottom:12px}
.section-title{font-size:var(--text-title-size);font-weight:800;letter-spacing:-.02em;line-height:1.18;margin-bottom:12px;color:var(--text-color)}
.section-desc{font-size:var(--text-body-size);color:var(--text-s);max-width:640px;margin:0 auto;line-height:1.8}

.section + .section,
.section + .section-sm,
.section-sm + .section,
.section-sm + .section-sm {
  margin-top: 0;
}

.storly-section.sf-container-narrow .container{max-width:920px}
.storly-section.sf-container-wide .container{max-width:1360px}
.storly-section.sf-container-full .container{max-width:100%}
.storly-section.sf-align-left{text-align:left}
.storly-section.sf-align-center{text-align:center}

/* CONTENT PAGE */
.page-shell{padding:54px 0 84px;background:radial-gradient(1200px 380px at 50% 0,rgba(79,58,255,.06),transparent 65%),linear-gradient(180deg,#fff 0,#f8fafc 100%)}
.page-shell-inner{max-width:var(--container-page)}
.page-hero{margin-bottom:28px;padding:clamp(24px,2.6vw,34px);border:1px solid rgba(148,163,184,.24);border-radius:18px;background:#fff;box-shadow:var(--shadow)}
.page-kicker{font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);margin-bottom:10px}
.page-title{font-size:clamp(30px,4vw,46px);line-height:1.12;letter-spacing:-.025em;margin-bottom:10px}
.page-subtitle{font-size:var(--fs-sm);color:var(--text-s);max-width:760px;line-height:1.8}
.page-article{background:#fff;border:1px solid rgba(148,163,184,.22);border-radius:18px;padding:clamp(22px,2.5vw,32px);box-shadow:var(--shadow-md)}
.page-rich-content{font-size:var(--fs-body);line-height:1.88;color:var(--text)}
.page-rich-content h1,.page-rich-content h2,.page-rich-content h3,.page-rich-content h4{line-height:1.28;letter-spacing:-.02em;margin:1.1em 0 .5em;color:var(--text)}
.page-rich-content h1{font-size:2rem}.page-rich-content h2{font-size:1.65rem}.page-rich-content h3{font-size:1.26rem}
.page-rich-content p,.page-rich-content ul,.page-rich-content ol,.page-rich-content blockquote,.page-rich-content table{margin:.92em 0}
.page-rich-content ul,.page-rich-content ol{padding-inline-start:1.4em}
.page-rich-content blockquote{border-inline-start:4px solid var(--brand);background:rgba(79,58,255,.06);padding:.95em 1.05em;border-radius:0 10px 10px 0}
.page-rich-content a{color:var(--brand);font-weight:600;text-decoration:underline}
.page-rich-content img{border-radius:14px;box-shadow:var(--shadow-lg);margin:1.1em 0}
.page-rich-content table{width:100%;border-collapse:collapse;display:block;overflow:auto}
.page-rich-content table td,.page-rich-content table th{border:1px solid var(--border);padding:10px 12px}
@media(max-width:768px){.page-shell{padding:36px 0 58px}.page-hero,.page-article{padding:18px}.page-title{font-size:32px}.page-rich-content{font-size:15px;line-height:1.8}}

/* FORMS */
.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:13px;font-weight:600;color:var(--text);margin-bottom:8px}
.form-group .required{color:#ef4444}
.form-input{width:100%;padding:13px 16px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:14px;color:var(--text);background:var(--bg);transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease);font-family:var(--font);outline:none}
.form-input:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(79,58,255,.08)}
.form-input::placeholder{color:var(--text-m)}
select.form-input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%2394a3b8' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}

/* TOAST */
.toast{position:fixed;bottom:24px;right:24px;z-index:9999;padding:14px 24px;border-radius:var(--r-sm);font-size:14px;font-weight:600;color:#fff;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-xl);animation:toastIn .4s var(--ease)}
.toast-success{background:#059669}
.toast-error{background:#dc2626}
@keyframes toastIn{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}

/* CART BADGE */
.cart-count{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;border-radius:50%;background:#ef4444;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #fff;padding:0 4px}

/* SKELETON */
.skeleton{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);background-size:200%;animation:shimmer 1.5s infinite;border-radius:8px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* UTILITIES */
.text-center{text-align:center}
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* SCROLLBAR */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:#94a3b8}

/* BUILDER SECTION VISIBILITY */
@media (min-width:1025px){.sf-hide-desktop{display:none !important}}
@media (min-width:768px) and (max-width:1024px){.sf-hide-tablet{display:none !important}}
@media (max-width:767px){.sf-hide-mobile{display:none !important}}