/* Loom & Leaf — online-store demo (.dx-ecommerce) */
.dx-ecommerce{
  --dx-bg: #FBF9F5;
  --dx-surface: #FFFFFF;
  --dx-surface-2: #F1ECE3;
  --dx-text: #1F2A26;
  --dx-muted: #6D746F;
  --dx-border: #E7E1D6;
  --dx-accent: #2F5D50;
  --dx-accent-ink: #FFFFFF;
  --dx-accent-soft: rgba(47,93,80,.1);
  --dx-radius: 10px;
  --dx-display: Georgia, 'Times New Roman', serif;
}
.dx-ecommerce h1{ font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 500; }
.dx-ecommerce h2{ font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 500; }
.dx-ecommerce h3{ font-size: 1.02rem; font-family: var(--dx-font); font-weight: 600; }
.ll-announce{ background: var(--dx-accent); color:#E8F0EC; text-align:center; font-size:.82rem; padding:.45rem 1rem; }
.ll-header{ position: sticky; top: 56px; z-index: 20; background: rgba(251,249,245,.94); backdrop-filter: blur(10px); border-bottom:1px solid var(--dx-border); }
.ll-header-inner{ display:flex; align-items:center; gap: 1.5rem; min-height: 66px; }
.ll-logo{ display:flex; align-items:center; gap:.55rem; font-family: var(--dx-display); font-size: 1.35rem; text-decoration:none; white-space:nowrap; }
.ll-logo-mark{ width: 24px; height: 24px; border-radius: 50% 50% 50% 4px; background: var(--dx-accent); }
.ll-nav{ display:flex; gap: 1.4rem; flex:1; }
.ll-nav a{ text-decoration:none; font-size:.92rem; font-weight:500; color: var(--dx-muted); padding: .3rem 0; border-bottom: 2px solid transparent; }
.ll-nav a:hover, .ll-nav a[aria-current]{ color: var(--dx-text); border-color: var(--dx-accent); }
.ll-tools{ display:flex; gap:.5rem; margin-left:auto; }
.ll-searchbar{ padding: .75rem 0 1rem; border-top:1px solid var(--dx-border); }
.ll-searchbar[hidden]{ display:none; }
.ll-only-mobile{ display:none !important; }
@media (max-width: 820px){
  .ll-nav{ display:none; }
  .ll-only-mobile{ display:inline-grid !important; }
  .ll-header-inner{ gap: .6rem; }
  .ll-logo{ font-size: 1.15rem; }
}
.ll-mobile-nav{ display:flex; flex-direction:column; }
.ll-mobile-nav a{ padding: .9rem 0; border-bottom:1px solid var(--dx-border); text-decoration:none; font-size: 1.05rem; }

.ll-hero{ background: linear-gradient(120deg, #EFE8DC, #E3EBE4); }
.ll-hero-inner{ display:grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items:center; padding-block: clamp(2.5rem, 6vw, 5rem); }
.ll-hero h1{ font-size: clamp(2.2rem, 5vw, 3.6rem); line-height:1.05; margin: 1rem 0; }
.ll-hero-copy p{ font-size: 1.08rem; max-width: 42ch; margin-bottom: 1.5rem; }
.ll-hero-copy .dx-row{ flex-wrap:wrap; }
.ll-hero-art{ display:grid; grid-template-columns: 1.3fr 1fr; gap: 1rem; align-items:end; }
.ll-hero-art svg{ width:100%; height:auto; border-radius: 18px; box-shadow: var(--dx-shadow); }
.ll-hero-art svg:last-child{ transform: translateY(-24px); }
@media (max-width: 760px){ .ll-hero-inner{ grid-template-columns: 1fr; } }

.ll-cats{ display:grid; grid-template-columns: repeat(5,1fr); gap: 1rem; margin-top: 1.25rem; }
.ll-cat{ position:relative; display:block; border-radius: 14px; overflow:hidden; text-decoration:none; }
.ll-cat svg{ width:100%; height:auto; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.ll-cat:hover svg{ transform: scale(1.05); }
.ll-cat span{ position:absolute; left: .75rem; bottom: .6rem; font-weight:600; background: rgba(255,255,255,.9); padding: .3rem .7rem; border-radius: 8px; font-size:.9rem; }
.ll-cat small{ color: var(--dx-muted); font-weight:500; }
@media (max-width: 820px){ .ll-cats{ grid-template-columns: repeat(2,1fr); } }
.ll-soft{ background: var(--dx-surface-2); }
.ll-perks{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.ll-perks > div{ display:flex; flex-direction:column; gap:.25rem; padding: 1.25rem; border:1px solid var(--dx-border); border-radius: 14px; background: var(--dx-surface); }
.ll-perks svg{ color: var(--dx-accent); margin-bottom: .3rem; }
.ll-perks span{ color: var(--dx-muted); font-size:.9rem; }
@media (max-width: 760px){ .ll-perks{ grid-template-columns: 1fr; } }

/* product grid + card */
.ll-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 1.25rem; align-content:start; }
.ll-shop-body .ll-grid{ grid-template-columns: repeat(3, 1fr); margin-top:0; }
@media (max-width: 1000px){ .ll-grid, .ll-shop-body .ll-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px){ .ll-grid, .ll-shop-body .ll-grid{ gap: .75rem; } .ll-card-body{ padding: .7rem !important; } }
.ll-span{ grid-column: 1 / -1; }
.ll-card{ position:relative; display:flex; flex-direction:column; background: var(--dx-surface); border:1px solid var(--dx-border); border-radius: 14px; overflow:hidden; transition: box-shadow .25s, transform .25s; }
.ll-card:hover{ box-shadow: var(--dx-shadow); transform: translateY(-3px); }
.ll-card-media{ position:relative; display:block; overflow:hidden; }
.ll-card-media svg{ width:100%; height:auto; display:block; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.ll-card:hover .ll-card-media svg{ transform: scale(1.05); }
.ll-flag{ position:absolute; left:.6rem; top:.6rem; font-size:.7rem; font-weight:700; padding: .2rem .55rem; border-radius: 6px; background: var(--dx-accent); color:#fff; }
.ll-flag.muted{ background:#6D746F; }
.ll-wish{ position:absolute; right:.55rem; top:.55rem; width:36px; height:36px; }
.ll-wish svg{ width:18px; height:18px; }
.ll-card-body{ display:flex; flex-direction:column; gap: .3rem; padding: .9rem 1rem 1rem; flex:1; }
.ll-card-body h3{ margin:0; font-size: .98rem; }
.ll-card-body h3 a{ text-decoration:none; }
.ll-price{ font-weight:700; font-size: 1.02rem; }
.ll-price s{ color: var(--dx-muted); font-weight:400; font-size:.88em; margin-left:.25rem; }
.ll-price.lg{ font-size: 1.5rem; margin: .75rem 0; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.ll-swatches{ display:flex; gap: 4px; }
.ll-swatches i{ width: 12px; height:12px; border-radius:50%; border:1px solid rgba(0,0,0,.12); }
.ll-quick{ margin-top: auto; }
.ll-card-body .ll-quick{ margin-top: .5rem; }
.ll-card .ll-quick svg{ width:16px; height:16px; }

/* shop */
.ll-shop-head{ display:flex; justify-content:space-between; align-items:flex-end; gap: 1rem; flex-wrap:wrap; margin-bottom: 1.25rem; }
.ll-shop-head h1{ margin:0; }
.ll-shop-head p{ margin:0; }
.ll-shop-controls{ flex-wrap:wrap; }
.ll-shop-controls .dx-search{ width: min(280px, 100%); }
.ll-shop-controls .dx-select{ width:auto; }
.ll-shop-body{ display:grid; grid-template-columns: 230px 1fr; gap: 2rem; align-items:start; }
.ll-filters{ position: sticky; top: 140px; display:flex; flex-direction:column; gap: 1.25rem; }
.ll-filters fieldset{ border:0; padding:0; margin:0; }
.ll-filters legend{ font-weight:700; font-size:.88rem; margin-bottom:.5rem; padding:0; }
.ll-filters .dx-check span{ margin-left:auto; }
.ll-range{ width:100%; accent-color: var(--dx-accent); }
@media (max-width: 820px){
  .ll-shop-body{ grid-template-columns: 1fr; }
  .ll-filters{ position: fixed; inset: 0 auto 0 0; z-index: 250; width: min(320px, 88vw); padding: 1.25rem; background: var(--dx-surface); box-shadow: var(--dx-shadow); overflow:auto; transform: translateX(-105%); transition: transform .35s cubic-bezier(.16,1,.3,1); }
  .ll-filters.is-open{ transform:none; }
  .ll-shop-controls{ width:100%; }
  .ll-shop-controls .dx-search{ flex: 1 1 100%; width:100%; order:-1; }
}

/* product page */
.ll-crumbs{ color: var(--dx-muted); margin-bottom: 1.25rem; }
.ll-crumbs a{ text-decoration:none; }
.ll-crumbs a:hover{ color: var(--dx-accent); }
.ll-product{ display:grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items:start; }
.ll-gallery-main svg{ width:100%; height:auto; border-radius: 18px; animation: dx-page-in .35s; }
.ll-thumbs{ display:flex; gap:.6rem; margin-top:.75rem; }
.ll-thumb{ width: 72px; padding:0; border-radius: 10px; overflow:hidden; border:2px solid transparent; cursor:pointer; background:none; }
.ll-thumb svg{ width:100%; height:auto; }
.ll-thumb[aria-pressed="true"]{ border-color: var(--dx-accent); }
.ll-buy h1{ margin-top:.6rem; }
.ll-buy a{ color: var(--dx-muted); }
.ll-option{ margin: 1.1rem 0; display:flex; flex-direction:column; gap:.5rem; }
.ll-color-picker{ display:flex; gap:.5rem; }
.ll-color{ width: 34px; height:34px; border-radius:50%; background: var(--c); border: 3px solid var(--dx-bg); box-shadow: 0 0 0 1px var(--dx-border); cursor:pointer; transition: box-shadow .15s; }
.ll-color[aria-pressed="true"]{ box-shadow: 0 0 0 2px var(--dx-accent); }
.ll-ok{ color: var(--dx-ok); } .ll-warn{ color: var(--dx-warn); font-weight:600; } .ll-bad{ color: var(--dx-bad); font-weight:600; }
.ll-buy-actions{ margin-top: 1.25rem; }
.ll-buy-actions .dx-btn{ flex:1; }
.ll-buy-actions .dx-icon-btn{ width:50px; height:50px; border-radius: var(--dx-radius); }
.ll-notify, .ll-coupon, .ll-news{ display:flex; gap:.5rem; margin-top:.75rem; }
.ll-assure{ list-style:none; padding:0; margin: 1.25rem 0 0; display:flex; flex-direction:column; gap:.5rem; color: var(--dx-muted); }
.ll-assure li{ display:flex; gap:.5rem; align-items:center; }
.ll-assure svg{ width:18px; height:18px; color: var(--dx-accent); }
.ll-tabs{ margin-top: 3rem; display:flex; flex-direction:column; gap: 1.25rem; scroll-margin-top: 140px; }
.ll-details{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.ll-details li{ display:flex; gap:.5rem; align-items:center; }
.ll-details svg{ color: var(--dx-accent); width:18px; height:18px; }
.ll-reviews{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.ll-review{ padding: 1.1rem; }
.ll-review h4{ margin: .5rem 0 .3rem; font-family: var(--dx-font); font-size:1rem; }
.ll-review-form{ padding: 1.25rem; margin-top: 1rem; display:flex; flex-direction:column; gap: .8rem; max-width: 640px; }
.ll-review-form .dx-btn{ align-self:flex-start; }
.ll-related-title{ margin-top: 3rem; }
@media (max-width: 820px){ .ll-product{ grid-template-columns: 1fr; } .ll-reviews{ grid-template-columns: 1fr; } }

/* cart + checkout */
.ll-cart-layout{ display:grid; grid-template-columns: 1fr 380px; gap: 1.5rem; align-items:start; margin-top: 1.25rem; }
.ll-cart-lines{ padding: .5rem 1.25rem; }
.ll-cart-side{ padding: 1.25rem; display:flex; flex-direction:column; gap: .75rem; position: sticky; top: 140px; }
@media (max-width: 900px){ .ll-cart-layout{ grid-template-columns: 1fr; } .ll-cart-side{ position: static; } }
.ll-line{ display:grid; grid-template-columns: 72px 1fr auto; gap: .9rem; align-items:center; padding: .9rem 0; border-bottom:1px solid var(--dx-border); }
.ll-line:last-child{ border-bottom:0; }
.ll-line-img svg{ width:72px; height:auto; border-radius: 10px; display:block; }
.ll-line-info{ display:flex; flex-direction:column; gap:.25rem; min-width:0; }
.ll-line-info a{ text-decoration:none; }
.ll-line .dx-stepper button{ width:30px; height:30px; }
.ll-link{ display:inline-flex; align-items:center; gap:.3rem; border:0; background:none; color: var(--dx-muted); cursor:pointer; }
.ll-link svg{ width:15px; height:15px; }
.ll-link:hover{ color: var(--dx-bad); }
.ll-summary dl{ display:grid; grid-template-columns: 1fr auto; gap: .45rem 0; margin: .75rem 0 0; }
.ll-summary dd{ margin:0; text-align:right; font-weight:600; }
.ll-summary .ll-total{ font-size: 1.12rem; font-weight:700; padding-top:.6rem; border-top:1px solid var(--dx-border); }
.ll-freeship{ display:flex; flex-direction:column; gap:.4rem; padding: .7rem .8rem; border-radius: var(--dx-radius); background: var(--dx-surface-2); }
.ll-freeship.ok{ flex-direction:row; align-items:center; color: var(--dx-ok); background: rgba(21,128,61,.08); }
.ll-freeship svg{ width:16px; height:16px; }
.ll-added{ display:flex; gap:.5rem; align-items:center; padding:.6rem .8rem; border-radius: var(--dx-radius); background: rgba(21,128,61,.08); color: var(--dx-ok) !important; font-weight:600; font-size:.9rem; }
.ll-added svg{ width:18px; height:18px; }
.ll-checkout{ padding: 1.5rem; display:flex; flex-direction:column; gap: .9rem; }
.ll-checkout h3{ margin: .5rem 0 0; }
.ll-pay{ align-self:flex-start; }

.ll-confirm{ max-width: 640px; text-align:center; display:flex; flex-direction:column; align-items:center; gap: .5rem; }
.ll-confirm-icon{ width: 72px; height:72px; border-radius:50%; display:grid; place-items:center; background: var(--dx-accent); color:#fff; animation: dx-bump .6s; }
.ll-confirm-icon svg{ width:36px; height:36px; }
.ll-confirm .dx-notice{ text-align:left; }
.ll-track{ list-style:none; padding:0; margin: 1rem 0; display:flex; width:100%; }
.ll-track li{ flex:1; position:relative; display:flex; flex-direction:column; align-items:center; gap:.4rem; font-size:.8rem; color: var(--dx-muted); }
.ll-track li i{ width:14px; height:14px; border-radius:50%; background: var(--dx-border); z-index:1; }
.ll-track li::before{ content:''; position:absolute; top:6px; left:-50%; width:100%; height:2px; background: var(--dx-border); }
.ll-track li:first-child::before{ display:none; }
.ll-track li.done{ color: var(--dx-text); font-weight:600; }
.ll-track li.done i{ background: var(--dx-accent); box-shadow: 0 0 0 4px var(--dx-accent-soft); }
.ll-confirm-card{ width:100%; padding: 1.1rem; display:flex; flex-direction:column; gap:.5rem; text-align:left; margin-bottom: 1rem; }

.ll-footer{ background: #1F2A26; color:#C9D2CD; padding-block: 3rem; margin-top: 2rem; }
.ll-footer p{ color:#9DA8A2; margin-top:.75rem; }
.ll-footer .ll-logo{ color:#fff; }
.ll-footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 2rem; }
.ll-footer-grid > div{ display:flex; flex-direction:column; gap:.45rem; font-size:.9rem; }
.ll-footer-grid b{ color:#fff; margin-bottom:.3rem; }
.ll-footer a{ text-decoration:none; }
.ll-footer a:hover{ color:#fff; }
.ll-footer .dx-input{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15); color:#fff; }
@media (max-width: 820px){ .ll-footer-grid{ grid-template-columns: 1fr 1fr; } }