/* =========================================================
   Kraft & Twine — a small handmade-goods market
   Design tokens
   ========================================================= */
:root{
  --ink:        #262A1F;
  --paper:      #EFE7D4;   /* kraft-light background */
  --paper-2:    #E4D9BE;   /* slightly darker panel */
  --card:       #F5EEDE;   /* tag card face */
  --forest:     #33452F;   /* primary — deep workshop green */
  --forest-2:   #24331F;
  --ochre:      #BD842A;   /* stamped price / accent */
  --rust:       #9C4A32;   /* secondary accent, sparingly */
  --thread:     #8B8F6B;   /* stitching / hairlines */
  --hole:       #cdbf9d;

  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Work Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'Space Mono', 'Courier New', monospace;
  --font-display-ar: 'Markazi Text', 'Noto Naskh Arabic', 'Fraunces', Georgia, serif;
  --font-body-ar:    'Cairo', 'Noto Naskh Arabic', Tahoma, Arial, sans-serif;

  --radius: 3px;
}

/* Arabic swaps in a script-appropriate display/body pairing */
html[lang="ar"] body{ font-family: var(--font-body-ar); }
html[lang="ar"] .brand,
html[lang="ar"] .hero h1,
html[lang="ar"] .tag-card h3,
html[lang="ar"] .cart-drawer h2,
html[lang="ar"] .admin-card h2{ font-family: var(--font-display-ar); }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.5;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(0,0,0,0.035) 1px, transparent 0);
  background-size: 14px 14px;
}

a{ color:inherit; }
img{ max-width:100%; display:block; }

/* focus visibility — keep it even though the design is quiet */
:focus-visible{
  outline: 2px solid var(--rust);
  outline-offset: 2px;
}

.wrap{
  max-width: 1180px;
  margin:0 auto;
  padding: 0 24px;
}

/* ---------------- Header / hero ---------------- */

.site-header{
  background: var(--forest);
  color: var(--paper);
  padding: 14px 0;
  border-bottom: 4px solid var(--forest-2);
}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.brand{
  font-family: var(--font-display);
  font-weight:600;
  font-size: 1.5rem;
  letter-spacing:.01em;
  display:flex;
  align-items:center;
  gap:.5em;
}
.site-logo{
  height: 38px;
  width: auto;
  border-radius: 4px;
  object-fit: cover;
}
.brand small{
  font-family: var(--font-mono);
  font-size:.55rem;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.18em;
  color: var(--ochre);
}
.cart-toggle{
  font-family: var(--font-mono);
  font-size:.8rem;
  background: var(--ochre);
  color: var(--forest-2);
  border:none;
  padding:10px 14px;
  border-radius: var(--radius);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  transition: transform .15s ease;
}
.cart-toggle:hover{ transform: translateY(-1px); }
.cart-count{
  background: var(--forest-2);
  color: var(--paper);
  border-radius:50%;
  width:20px; height:20px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.7rem;
}

.hero{
  background: var(--forest);
  color: var(--paper);
  padding: 56px 0 76px;
  position:relative;
}
.hero h1{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height:1.05;
  margin: 0 0 14px;
  max-width: 14ch;
}
.hero h1 em{
  font-style:italic;
  color: var(--ochre);
}
.hero p{
  max-width: 46ch;
  color: var(--paper-2);
  font-size:1.05rem;
  margin:0 0 28px;
}
.hero-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-family: var(--font-mono);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.hero-tags span{
  border:1px solid rgba(239,231,212,.35);
  padding:5px 10px;
  border-radius:999px;
}

/* torn-paper divider — the signature transition between hero and shop */
.tear{
  height: 26px;
  background: var(--paper);
  clip-path: polygon(
    0% 100%, 0% 30%, 3% 55%, 6% 20%, 9% 50%, 12% 15%, 15% 45%,
    18% 10%, 21% 50%, 24% 20%, 27% 55%, 30% 15%, 33% 45%,
    36% 10%, 39% 50%, 42% 20%, 45% 55%, 48% 15%, 51% 45%,
    54% 10%, 57% 50%, 60% 20%, 63% 55%, 66% 15%, 69% 45%,
    72% 10%, 75% 50%, 78% 20%, 81% 55%, 84% 15%, 87% 45%,
    90% 10%, 93% 50%, 96% 20%, 100% 45%, 100% 100%
  );
  margin-top:-1px;
}

/* ---------------- Controls / filter bar ---------------- */

.controls{
  padding: 26px 0 8px;
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  align-items:flex-start;
  justify-content:space-between;
}
.search-sort{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.search-sort input[type="search"],
.search-sort select{
  font-family: var(--font-body);
  font-size:.9rem;
  padding:10px 12px;
  border:1px solid var(--thread);
  background: var(--card);
  border-radius: var(--radius);
  color: var(--ink);
}
.search-sort input[type="search"]{ min-width:220px; }

.categories{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chip{
  font-family: var(--font-mono);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  background: var(--card);
  border:1px solid var(--thread);
  color: var(--forest-2);
  padding:8px 13px;
  border-radius:999px;
  cursor:pointer;
  transition: background .15s ease, color .15s ease;
}
.chip[aria-pressed="true"]{
  background: var(--forest);
  color: var(--paper);
  border-color: var(--forest);
}

.tagbar{
  padding: 4px 0 22px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  border-bottom: 1px dashed var(--thread);
  margin-bottom: 30px;
}
.tagbar .label{
  font-family: var(--font-mono);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color: var(--rust);
  margin-right:6px;
}
.tag-chip{
  font-family: var(--font-mono);
  font-size:.68rem;
  background:transparent;
  border:1px solid var(--hole);
  color: var(--ink);
  padding:4px 9px;
  border-radius:3px;
  cursor:pointer;
}
.tag-chip[aria-pressed="true"]{
  background: var(--ochre);
  border-color: var(--ochre);
  color: var(--forest-2);
  font-weight:700;
}

/* ---------------- Product grid ---------------- */

.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 30px;
  padding-bottom: 70px;
}

.empty-state{
  font-family: var(--font-mono);
  color: var(--rust);
  padding: 40px 0;
}

/* the tag-card: styled like a hanging kraft price tag */
.tag-card{
  position:relative;
  background: var(--card);
  border-radius: 4px 14px 4px 4px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 8px 18px -12px rgba(30,25,10,.4);
  padding: 20px 16px 18px;
  clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%, 0 22px);
}
.grid .tag-card:nth-child(3n+1){ transform: rotate(-0.6deg); }
.grid .tag-card:nth-child(3n+2){ transform: rotate(0.4deg); }
.grid .tag-card:nth-child(3n)  { transform: rotate(-0.2deg); }

.tag-card .hole{
  position:absolute;
  top:9px; left:9px;
  width:11px; height:11px;
  border-radius:50%;
  background: var(--paper);
  border: 1.5px solid var(--hole);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.25);
}
.tag-card .string{
  position:absolute;
  top:-14px; left:-6px;
  width:44px; height:26px;
  border: 2px solid var(--thread);
  border-bottom:none;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  opacity:.55;
  pointer-events:none;
}

.tag-card figure{
  margin: 6px 0 12px;
  overflow:hidden;
  border-radius: 3px;
  aspect-ratio: 4/3;
  background: var(--paper-2);
}
.tag-card figure img{
  width:100%; height:100%;
  object-fit:cover;
  transition: transform .35s ease;
}
.tag-card:hover figure img{ transform: scale(1.05); }

.tag-card .category{
  font-family: var(--font-mono);
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color: var(--rust);
  margin-bottom:4px;
}
.tag-card h3{
  font-family: var(--font-display);
  font-size:1.15rem;
  font-weight:600;
  margin: 0 0 8px;
  line-height:1.25;
}

.tag-card .tags{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-bottom:14px;
}
.tag-card .tags span{
  font-family: var(--font-mono);
  font-size:.62rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  background: var(--paper);
  border:1px solid var(--thread);
  padding:3px 7px;
  border-radius:999px;
  color: var(--forest-2);
}

.tag-card .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.stamp{
  font-family: var(--font-mono);
  font-weight:700;
  font-size:1.05rem;
  color: var(--forest);
  border: 2px solid var(--forest);
  padding: 3px 9px;
  border-radius: 3px;
  transform: rotate(-2deg);
  display:inline-block;
}
.add-btn{
  font-family: var(--font-mono);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  background: var(--forest);
  color: var(--paper);
  border:none;
  padding:9px 12px;
  border-radius: var(--radius);
  cursor:pointer;
  font-weight:700;
}
.add-btn:hover{ background: var(--forest-2); }
.add-btn:disabled{ opacity:.6; cursor:default; }

/* ---------------- Cart drawer ---------------- */

.cart-backdrop{
  position:fixed; inset:0;
  background: rgba(20,18,10,.4);
  opacity:0; pointer-events:none;
  transition: opacity .2s ease;
  z-index:40;
}
.cart-backdrop.open{ opacity:1; pointer-events:auto; }

.cart-drawer{
  position:fixed;
  top:0; right:0; bottom:0;
  width: min(380px, 92vw);
  background: var(--paper);
  border-left: 4px solid var(--forest);
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index:41;
  display:flex;
  flex-direction:column;
  padding: 22px 20px;
}
.cart-drawer.open{ transform:none; }
.cart-drawer h2{
  font-family: var(--font-display);
  margin:0 0 4px;
}
.cart-drawer .close-cart{
  position:absolute;
  top:18px; right:18px;
  background:none; border:none;
  font-size:1.3rem;
  cursor:pointer;
  color: var(--forest);
  font-family: var(--font-mono);
}
.cart-items{
  flex:1;
  overflow-y:auto;
  margin: 16px 0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.cart-empty{
  font-family: var(--font-mono);
  color: var(--thread);
  font-size:.85rem;
  padding-top: 30px;
  text-align:center;
}
.cart-item{
  display:flex;
  gap:10px;
  align-items:center;
  border-bottom: 1px dashed var(--thread);
  padding-bottom:10px;
}
.cart-item img{ width:52px; height:52px; object-fit:cover; border-radius:3px; }
.cart-item .info{ flex:1; }
.cart-item .info .name{ font-size:.85rem; font-weight:600; }
.cart-item .info .meta{
  font-family: var(--font-mono);
  font-size:.72rem;
  color: var(--rust);
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:4px;
}
.cart-item .qty-btn{
  background: var(--card);
  border:1px solid var(--thread);
  width:20px;height:20px;
  border-radius:3px;
  cursor:pointer;
  line-height:1;
  font-family: var(--font-mono);
}
.cart-item .remove{
  background:none;border:none;
  color: var(--rust);
  font-family: var(--font-mono);
  font-size:.7rem;
  text-decoration:underline;
  cursor:pointer;
  padding:0;
}
.cart-total{
  border-top: 2px solid var(--forest);
  padding-top:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family: var(--font-mono);
  font-weight:700;
}
.checkout-btn{
  margin-top:14px;
  width:100%;
  padding:13px;
  background: var(--ochre);
  color: var(--forest-2);
  border:none;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  cursor:pointer;
}
.checkout-btn:hover{ filter:brightness(0.95); }

/* ---------------- Footer ---------------- */

footer{
  background: var(--forest-2);
  color: var(--thread);
  padding: 30px 0;
  font-family: var(--font-mono);
  font-size:.78rem;
  text-align:center;
}

@media (max-width: 640px){
  .controls{ flex-direction:column; }
  .search-sort input[type="search"]{ min-width:0; flex:1; }
}

/* ---------------- Language switcher ---------------- */

.lang-switch{
  display:flex;
  gap:2px;
  font-family: var(--font-mono);
  font-size:.72rem;
  font-weight:700;
}
.lang-switch a{
  text-decoration:none;
  color: var(--paper);
  opacity:.55;
  padding:8px 9px;
  border-radius:3px;
}
.lang-switch a.active{
  opacity:1;
  background: rgba(239,231,212,.16);
}
.header-actions{ display:flex; align-items:center; gap:14px; }

/* ---------------- RTL adjustments ---------------- */

[dir="rtl"] .cart-drawer{
  left:0; right:auto;
  border-left:none;
  border-right:4px solid var(--forest);
  transform: translateX(-100%);
}
[dir="rtl"] .cart-drawer.open{ transform:none; }
[dir="rtl"] .close-cart{ right:auto; left:18px; }

[dir="rtl"] .tag-card{
  border-radius: 14px 4px 4px 4px;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
[dir="rtl"] .tag-card .hole{ left:auto; right:9px; }
[dir="rtl"] .tag-card .string{ left:auto; right:-6px; transform: scaleX(-1); }

[dir="rtl"] .grid .tag-card:nth-child(3n+1){ transform: rotate(0.6deg); }
[dir="rtl"] .grid .tag-card:nth-child(3n+2){ transform: rotate(-0.4deg); }
[dir="rtl"] .grid .tag-card:nth-child(3n)  { transform: rotate(0.2deg); }

[dir="rtl"] .admin-table th, [dir="rtl"] .admin-table td{ text-align:right; }
[dir="rtl"] .stamp{ transform: rotate(2deg); }

/* ---------------- Footer: contact + social ---------------- */

.site-footer{
  background: var(--forest-2);
  color: var(--thread);
  padding: 46px 0 26px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 30px;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(201,194,169,.2);
}
@media (max-width: 720px){
  .footer-grid{ grid-template-columns: 1fr; }
}
.footer-col h4{
  font-family: var(--font-mono);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color: var(--ochre);
  margin: 0 0 12px;
}
.footer-col p{ margin:0 0 8px; font-size:.88rem; line-height:1.6; }
.footer-col a{ color:var(--thread); text-decoration:none; }
.footer-col a:hover{ text-decoration:underline; }
.contact-line{
  display:flex; align-items:center; gap:8px;
  font-family: var(--font-mono);
  font-size:.85rem;
  margin-bottom:8px;
}
.contact-line svg{ flex-shrink:0; }
.contact-line.address-line{ align-items:flex-start; }
.contact-line.address-line svg{ margin-top:2px; }

.social-icons{ display:flex; gap:10px; margin-top:4px; }
.social-icons a{
  width:36px; height:36px;
  border-radius:50%;
  border:1px solid rgba(201,194,169,.35);
  display:flex; align-items:center; justify-content:center;
  transition: background .15s ease, transform .15s ease;
}
.social-icons a:hover{ background: var(--ochre); border-color: var(--ochre); transform: translateY(-2px); }
.social-icons svg{ width:16px; height:16px; fill:var(--thread); }
.social-icons a:hover svg{ fill: var(--forest-2); }

.footer-bottom{
  text-align:center;
  font-family: var(--font-mono);
  font-size:.72rem;
  padding-top: 20px;
  color: var(--thread);
}


/* Product detail, gallery and content pages */
.nav-link{font-family:var(--font-mono);font-size:.72rem;text-decoration:none;color:var(--paper);opacity:.9;border-bottom:1px solid rgba(239,231,212,.35);padding-bottom:2px}
.product-link{display:block;text-decoration:none;color:inherit}
.product-link:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.product-detail{padding-top:30px;padding-bottom:70px}
.back-link{display:inline-block;margin-bottom:22px;font-family:var(--font-mono);font-size:.78rem;color:var(--forest)}
.product-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:42px;align-items:start}
.product-gallery{background:var(--card);border:1px solid var(--thread);padding:16px}
.gallery-main{aspect-ratio:1/1;display:grid;place-items:center;background:var(--paper-2);overflow:hidden}
.gallery-main img{width:100%;height:100%;object-fit:contain}
.gallery-thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:10px}
.gallery-thumbs button{padding:3px;background:var(--paper);border:2px solid transparent;cursor:pointer;aspect-ratio:1/1;overflow:hidden}
.gallery-thumbs button.active{border-color:var(--ochre)}
.gallery-thumbs img{width:100%;height:100%;object-fit:cover}
.product-summary{padding:10px 0}
.product-summary .category{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--rust);font-size:.72rem}
.product-code{font-family:var(--font-mono);font-size:.72rem;color:var(--thread);margin-top:8px}
.product-summary h1{font-family:var(--font-display);font-size:clamp(2.2rem,5vw,4rem);line-height:1.05;margin:12px 0 18px}
.product-long-desc{font-size:1.02rem;white-space:normal}
.product-price{font-family:var(--font-mono);font-size:1.25rem;font-weight:700;color:var(--forest);margin:20px 0}
.external-details{display:inline-block;background:var(--ochre);color:var(--forest-2);padding:11px 15px;text-decoration:none;font-family:var(--font-mono);font-size:.76rem;font-weight:700}
.spec-section,.maintenance-box{margin-top:38px}
.spec-section h2,.maintenance-box h2{font-family:var(--font-display);font-size:1.8rem}
.spec-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--thread)}
.spec-item{padding:15px;border-bottom:1px solid var(--thread);display:flex;justify-content:space-between;gap:18px;background:rgba(245,238,222,.55)}
.spec-item span{font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;color:var(--rust)}
.spec-item strong{text-align:end}
.maintenance-box{background:var(--forest);color:var(--paper);padding:24px;border-radius:4px}
.maintenance-box h2{margin-top:0}.maintenance-box p{white-space:normal}
.content-page{padding-top:48px;padding-bottom:80px}
.content-page h1{font-family:var(--font-display);font-size:clamp(2.4rem,5vw,4rem);margin:0 0 10px}
.lead{max-width:720px;font-size:1.05rem;color:var(--forest-2)}
.testimonial-grid,.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:35px}
.testimonial-card,.service-card{background:var(--card);border:1px solid var(--thread);padding:24px}
.testimonial-card .stars{color:var(--ochre);letter-spacing:.12em}.testimonial-card blockquote{font-family:var(--font-display);font-size:1.3rem;line-height:1.3;margin:15px 0}.testimonial-card strong,.testimonial-card span{display:block}.testimonial-card span{font-size:.8rem;color:var(--thread)}
.service-card h2{font-family:var(--font-display);margin-top:0}.service-card p{margin-bottom:0}
.support-contact{margin-top:30px;padding:24px;background:var(--paper-2);border:1px solid var(--thread)}
.support-contact h2{font-family:var(--font-display)}
.footer-pages{display:flex;gap:18px;justify-content:center;padding:18px 0;border-top:1px solid rgba(239,231,212,.2)}
.footer-pages a{color:var(--paper);font-family:var(--font-mono);font-size:.72rem;text-decoration:none}
@media(max-width:800px){.product-hero{grid-template-columns:1fr}.testimonial-grid,.service-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.gallery-thumbs{grid-template-columns:repeat(3,1fr)}.spec-grid,.testimonial-grid,.service-grid{grid-template-columns:1fr}.spec-item{flex-direction:column}.spec-item strong{text-align:start}.header-actions{flex-wrap:wrap;justify-content:flex-end}}

/* Workshop enhancements */
.google-translate-wrap{display:flex;align-items:center;gap:8px;font-size:.75rem;margin-inline-start:8px}
.google-translate-label{font-family:var(--font-mono);opacity:.8}
.goog-te-gadget{font-family:inherit!important;font-size:0!important}
.goog-te-gadget .goog-te-combo{font-family:var(--font-body);font-size:.8rem;padding:6px 8px;border:1px solid var(--thread);border-radius:4px;background:var(--card);color:var(--ink)}
body{--secondary:var(--forest)}
.product-link{display:block}
.product-link figure{cursor:pointer}
.product-code{font-family:var(--font-mono);font-size:.78rem;opacity:.75;margin:.3rem 0}
.external-details{display:inline-block;margin-top:10px;font-weight:600}
.product-media{margin-top:22px}
.product-video iframe,.product-video video{width:100%;min-height:360px;border:0;border-radius:6px}
.product-pdf-link{margin-top:10px}
.related-products{margin-top:35px}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.related-card{background:var(--card);padding:12px;border:1px solid var(--thread);border-radius:4px;text-decoration:none}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.badges span{font-size:.7rem;padding:3px 7px;border-radius:999px;background:var(--secondary);color:white}
.spec-item strong{overflow-wrap:anywhere}
@media(max-width:700px){.google-translate-wrap{margin:6px 0}.product-video iframe,.product-video video{min-height:220px}}

.theme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:20px 0}.theme-choice{display:block;padding:16px;border:1px solid var(--thread);background:var(--card);cursor:pointer;border-radius:6px}.theme-choice input{width:auto;margin-right:8px}.theme-swatches{display:flex;gap:0;height:28px;margin-top:12px;border-radius:4px;overflow:hidden}.theme-swatches span{flex:1}.checkbox-row{display:flex;gap:18px;flex-wrap:wrap;margin:15px 0}.checkbox-row input{width:auto}
/* ---------------- V2.4 buyer, invoice, support & vivid interactions ---------------- */
.promo-stock{display:inline-flex;align-items:center;width:max-content;max-width:100%;margin:-1px 0 10px;padding:4px 9px;border-radius:999px;background:var(--rust);color:#fff;font-family:var(--font-mono);font-size:.66rem;font-weight:700;letter-spacing:.04em;box-shadow:0 5px 14px rgba(0,0,0,.10);animation:pulsePromo 2.1s ease-in-out infinite}
.promo-stock.large{font-size:.82rem;margin:6px 0 14px;padding:7px 12px}
@keyframes pulsePromo{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
.product-add{min-width:170px;margin-top:8px}
.tag-card{transition:transform .28s ease,box-shadow .28s ease;transform-origin:center bottom;}
.grid .tag-card:nth-child(3n+1):hover{transform:rotate(-0.6deg) translateY(-7px) scale(1.012)}
.grid .tag-card:nth-child(3n+2):hover{transform:rotate(0.4deg) translateY(-7px) scale(1.012)}
.grid .tag-card:nth-child(3n):hover{transform:rotate(-0.2deg) translateY(-7px) scale(1.012)}
.tag-card:hover{box-shadow:0 18px 35px -18px rgba(30,25,10,.55)}
.tag-card figure{position:relative}
.tag-card figure::after{content:"";position:absolute;inset:-40% auto -40% -55%;width:48%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.44),transparent);transform:translateX(-30%) rotate(10deg);opacity:0;pointer-events:none}
.tag-card:hover figure::after{animation:imgShine .75s ease forwards}
@keyframes imgShine{to{transform:translateX(280%) rotate(10deg);opacity:1}}
.product-gallery .gallery-main{position:relative;overflow:hidden;border-radius:10px;box-shadow:0 14px 36px -22px rgba(0,0,0,.55)}
.product-gallery .gallery-main img{transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .35s ease}
.product-gallery .gallery-main:hover img{transform:scale(1.035);filter:saturate(1.08) contrast(1.02)}
.hero{background-color:var(--forest)}
.header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nav-link{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;text-decoration:none;opacity:.92}
.nav-link:hover{text-decoration:underline;opacity:1}
.narrow-page{max-width:920px;padding-top:54px;padding-bottom:80px}
.success-panel,.auth-card,.checkout-card,.order-summary,.support-form-card,.account-card{background:var(--card);border:1px solid var(--thread);border-radius:18px;box-shadow:0 18px 48px -30px rgba(0,0,0,.45);padding:30px}
.success-panel{text-align:center;padding:48px 32px}
.success-icon{margin:0 auto 14px;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--secondary);color:var(--on-primary);font-size:28px;font-weight:700}
.success-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:24px 0}
.btn-primary,.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;border-radius:11px;padding:11px 16px;font-family:var(--font-mono);font-weight:700;font-size:.76rem;cursor:pointer;border:1px solid transparent}
.btn-primary{background:var(--forest);color:var(--on-primary)}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-secondary{background:var(--card);color:var(--forest);border-color:var(--thread)}
.btn-secondary:hover{background:var(--paper);transform:translateY(-1px)}
.checkout-page{padding-top:40px;padding-bottom:70px}
.checkout-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.8fr);gap:22px;align-items:start}
.checkout-card h1,.auth-card h1,.support-hero h1{font-family:var(--font-display);font-size:2.25rem;margin:.15em 0 .25em}
.checkout-intro{max-width:60ch;color:var(--rust)}
.checkout-card label,.auth-card label,.support-form-card label{display:flex;flex-direction:column;gap:6px;font-size:.82rem;font-weight:600}
.checkout-card input,.checkout-card textarea,.auth-card input,.support-form-card input,.support-form-card textarea{font:inherit;font-weight:400;padding:11px 12px;border:1px solid var(--thread);border-radius:10px;background:var(--input-bg);color:var(--input-text);box-sizing:border-box;width:100%}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.full-span{grid-column:1/-1}
.account-opt{margin:20px 0;padding:15px;background:var(--paper);border:1px dashed var(--thread);border-radius:12px}
.inline-check{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:10px}
.inline-check input{width:auto!important;margin-top:3px}
.password-wrap{margin-top:12px;max-width:420px}
.success-soft{padding:12px 14px;border-radius:10px;background:#e6f8ee;color:#075a36;font-weight:600}
.checkout-method-note{margin:16px 0;padding:12px 14px;border-radius:10px;background:var(--paper-2);border:1px solid var(--thread)}
.checkout-submit{width:100%;padding:14px 16px;border:none;border-radius:12px;background:var(--ochre);color:var(--on-accent);font-family:var(--font-mono);font-weight:800;cursor:pointer}
.checkout-submit:hover{transform:translateY(-1px);filter:brightness(1.03)}
.order-summary{position:sticky;top:18px}
.order-summary h2{font-family:var(--font-display);margin-top:0}
.summary-item{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px dashed var(--thread)}
.summary-item img{width:58px;height:58px;object-fit:cover;border-radius:8px}.summary-item div{flex:1;min-width:0}.summary-item strong,.summary-item span{display:block}.summary-item span{font-size:.75rem;color:var(--rust);margin-top:3px}.summary-item b{font-family:var(--font-mono);font-size:.78rem}
.summary-total{display:flex;justify-content:space-between;padding-top:16px;font-family:var(--font-mono);font-weight:800}
.support-page{padding-bottom:70px}.support-hero{padding:54px 0 26px}.eyebrow{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;color:var(--rust);font-weight:800}.support-hero p{max-width:64ch}.support-form-card{max-width:920px}.form-errors{background:#fff0ed;color:#8d2c1f;border:1px solid #e9aea5;padding:12px 15px;border-radius:10px;margin-bottom:16px}.form-errors ul{margin:.2em 0 .2em 1.2em}
.invoice-body{background:#ece9e2}.invoice-actions{position:sticky;top:0;z-index:20;display:flex;gap:8px;flex-wrap:wrap;padding:10px 14px;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid #d7d2c8}.invoice-actions button,.invoice-actions a{appearance:none;border:1px solid #cfc8ba;background:#fff;color:#222;padding:9px 12px;border-radius:9px;text-decoration:none;font:600 12px Arial;cursor:pointer}.invoice-actions button:hover,.invoice-actions a:hover{background:#f6f2ea}
.invoice-wrap{max-width:960px;margin:30px auto;padding:0 18px 60px}.invoice-sheet{background:#fff;border:1px solid #d7d2c8;box-shadow:0 18px 55px -30px rgba(0,0,0,.5);padding:42px}.invoice-head{display:flex;justify-content:space-between;gap:30px;border-bottom:2px solid #1f1f1f;padding-bottom:22px}.invoice-brand{display:flex;align-items:flex-start;gap:14px}.invoice-brand img{max-height:58px;width:auto}.invoice-brand h1{margin:0 0 4px;font-family:Arial,sans-serif;font-size:24px}.invoice-brand p{margin:2px 0;font:12px/1.5 Arial;color:#555}.invoice-meta{display:flex;flex-direction:column;align-items:flex-end;font:12px/1.7 Arial;color:#444}.invoice-meta strong{font-size:22px;color:#111}.buyer-box{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:20px 0}.buyer-box>div{display:flex;flex-direction:column;gap:3px;font:12px/1.5 Arial;color:#444}.buyer-box span:first-child{font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#777;margin-bottom:3px}.buyer-box strong{font-size:14px;color:#111}.invoice-table{width:100%;border-collapse:collapse;font:12px Arial}.invoice-table th,.invoice-table td{padding:10px;border-bottom:1px solid #e2e0dc;text-align:start}.invoice-table th{background:#f5f3ee;color:#444}.invoice-totals{margin:20px 0 0 auto;max-width:350px;font:12px Arial}.invoice-totals>div{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #eee}.invoice-totals .grand{border-top:2px solid #111;border-bottom:0;font-size:15px;font-weight:700;padding-top:12px}.invoice-notes{margin-top:26px;padding:14px;background:#faf8f4;border:1px solid #e3dfd5;border-radius:8px;font:12px/1.5 Arial}.invoice-footer{margin-top:30px;padding-top:16px;border-top:1px solid #e2e0dc;font:11px/1.5 Arial;color:#666}
.account-page{padding-top:38px;padding-bottom:70px}.account-top{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:20px}.account-top h1{font-family:var(--font-display);margin:0}.account-card{overflow:auto}
@media(max-width:800px){.checkout-grid{grid-template-columns:1fr}.order-summary{position:static}.grid-2,.buyer-box{grid-template-columns:1fr}.full-span{grid-column:auto}.invoice-sheet{padding:22px}.invoice-head{flex-direction:column}.invoice-meta{align-items:flex-start}.account-top{align-items:flex-start;flex-direction:column}.header-actions{justify-content:flex-end}.nav-link{font-size:.66rem}}
@media print{.invoice-actions{display:none}.invoice-body{background:#fff}.invoice-wrap{margin:0;max-width:none;padding:0}.invoice-sheet{border:0;box-shadow:none}.invoice-footer{page-break-inside:avoid}}

.summary-lines{border-top:1px solid var(--thread);margin-top:12px;padding-top:10px;display:grid;gap:7px}.summary-lines>div{display:flex;justify-content:space-between;gap:12px}.summary-lines .summary-total{margin-top:5px;padding-top:10px;border-top:2px solid var(--forest)}


/* Theme-driven visual polish */
.theme-rounded .tag-card figure,.theme-rounded .product-gallery .gallery-main,.theme-rounded .promo-stock{border-radius:var(--radius)}
.tag-card,.product-gallery .gallery-main,.related-card,.success-panel,.auth-card,.checkout-card,.order-summary,.support-form-card,.account-card{transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease}
.tag-card:hover,.related-card:hover{border-color:var(--ochre)}

/* Richer theme selector */
.theme-choice{position:relative;min-height:168px;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}.theme-choice:hover{transform:translateY(-3px);box-shadow:0 12px 26px -18px rgba(0,0,0,.45);border-color:var(--ochre)}.theme-choice.selected{border:2px solid var(--ochre)}.theme-name{display:flex;align-items:center;justify-content:space-between;gap:10px}.theme-name small{font:700 .65rem var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--rust)}.theme-sample{display:flex;align-items:center;gap:8px;margin-top:12px;padding:9px;border-radius:8px;background:var(--sample-paper);border:1px solid var(--thread)}.theme-sample .sample-chip{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--sample-primary);color:var(--sample-paper);font-weight:800}.theme-sample .sample-card{background:var(--sample-card);border-radius:7px;padding:6px 9px;color:var(--sample-primary);font:700 .68rem var(--font-mono)}.theme-sample .sample-price{margin-left:auto;color:var(--sample-secondary);font:700 .72rem var(--font-mono)}


/* V2.5.4 vivid product motion */
.tag-card {
  overflow: hidden;
}
.tag-card figure {
  overflow: hidden;
}
.tag-card figure img {
  transition: transform .65s cubic-bezier(.16,.8,.25,1), filter .45s ease, opacity .35s ease;
  transform-origin: center center;
}
.tag-card:hover figure img {
  transform: scale(1.09) rotate(-1.1deg);
  filter: saturate(1.16) contrast(1.05) brightness(1.04);
}
.tag-card:hover .string { animation: stringSway .7s ease-in-out; }
.tag-card:hover .hole { animation: holePulse .7s ease-out; }
@keyframes stringSway { 50% { transform: rotate(3deg) translateX(2px); } }
@keyframes holePulse { 50% { transform: scale(1.18); opacity:.9; } }
.product-gallery .gallery-main::before {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(115deg,transparent 28%,rgba(255,255,255,.32) 45%,transparent 60%);
  transform:translateX(-120%); opacity:0;
}
.product-gallery .gallery-main:hover::before { animation: gallerySweep 1s ease forwards; }
@keyframes gallerySweep { 0%{transform:translateX(-120%);opacity:0} 25%{opacity:1} 100%{transform:translateX(120%);opacity:0} }
.product-gallery .gallery-main:hover img { transform:scale(1.065) rotate(.6deg); filter:saturate(1.12) contrast(1.04); }
.related-card { overflow:hidden; }
.related-card img { transition:transform .55s ease,filter .35s ease; }
.related-card:hover img { transform:scale(1.08) rotate(-.8deg); filter:saturate(1.12) brightness(1.04); }
.product-add { min-width: 150px; }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }

/* Fine-tuning editor */
.color-editor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:18px}
.color-editor{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:6px 10px;align-items:center;padding:11px 12px;border:1px solid var(--thread);border-radius:10px;background:var(--paper)}
.color-editor span{font-weight:700;font-size:.78rem}.color-editor input[type=color]{width:48px;height:34px;padding:2px;border:1px solid var(--thread);border-radius:7px;background:var(--card);cursor:pointer}.color-editor code{grid-column:1/-1;font-size:.68rem;color:var(--secondary)}
.color-editor-grid.disabled{opacity:.72}.color-editor-grid.disabled input[type=color]{cursor:not-allowed;filter:grayscale(.25)}
/* Ensure key UI surfaces follow the selected palette rather than fixed light colours. */
.form-errors{background:color-mix(in srgb, var(--rust) 10%, var(--card));color:var(--ink);border-color:color-mix(in srgb, var(--rust) 35%, var(--thread))}
.success-soft{background:color-mix(in srgb, var(--secondary) 12%, var(--card));color:var(--ink)}
.checkout-method-note{background:var(--paper-2);border-color:var(--thread)}
.tagbar{background:var(--paper-2)}
.hint{color:var(--secondary)}

/* V2.5.5 visual consistency */
.site-header .site-logo{max-height:76px;max-width:220px;width:auto;object-fit:contain}
.product-actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 8px}
.about-page{padding:50px 0 80px}.about-hero{padding:18px 0 28px}.about-hero h1{font-family:var(--font-display);font-size:clamp(2.1rem,5vw,4rem);margin:.2em 0}.about-hero p{max-width:70ch;font-size:1.08rem}.about-card{background:var(--card);border:1px solid var(--thread);border-radius:var(--soft-radius);padding:34px;box-shadow:0 18px 45px rgba(20,20,20,.08);min-height:250px}.about-image{max-width:320px;width:100%;float:left;margin:0 28px 18px 0;border-radius:var(--radius)}[dir=rtl] .about-image{float:right;margin:0 0 18px 28px}.about-body{font-size:1.05rem;line-height:1.9;min-height:180px}.payment-options{margin-top:18px;padding:18px;background:var(--paper-2);border:1px solid var(--thread);border-radius:var(--radius)}.payment-method{padding:14px 0;border-bottom:1px dashed var(--thread)}.payment-method:last-child{border-bottom:0}.payment-method img{max-width:180px;display:block;margin:10px 0;border-radius:8px}.payment-method a{color:var(--forest);font-weight:700}


/* V2.5.6 visual/content additions */
.news-ticker{display:flex;align-items:center;gap:0;overflow:hidden;margin:18px auto 0;max-width:1200px;border:1px solid var(--thread);background:var(--card);color:var(--ink);border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.06)}
.news-label{flex:0 0 auto;padding:10px 14px;background:var(--forest);color:var(--on-primary);font-family:var(--font-mono);font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;z-index:2}
.news-track{overflow:hidden;white-space:nowrap;flex:1;padding:10px 0}
.news-track span,.news-track a{display:inline-block;padding-inline-start:100%;animation:company0Ticker 22s linear infinite;color:inherit;text-decoration:none}
.news-track a:hover{text-decoration:underline}
@keyframes company0Ticker{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.footer-image-wrap{max-width:1200px;margin:0 auto;padding:0 20px 14px;text-align:center}.footer-image{max-width:100%;max-height:170px;object-fit:cover;border-radius:var(--radius);display:inline-block}
.about-page{min-height:560px;padding-top:28px;padding-bottom:40px;background-repeat:no-repeat}
.admin-preview-image{max-width:220px;max-height:110px;object-fit:cover;border-radius:var(--radius);border:1px solid var(--thread);display:block;margin:5px 0 10px}.checkline{display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px!important}.checkline input{width:auto!important}
@media (prefers-reduced-motion:reduce){.news-track span,.news-track a{animation:none;padding-inline-start:0}.news-ticker{scroll-behavior:auto}}

.order-tracking{margin:20px 0}.tracking-step{background:var(--card)}

.site-version-badge{display:inline-flex;align-items:center;padding:3px 7px;border:1px solid rgba(239,231,212,.45);border-radius:999px;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.06em;color:var(--paper);background:rgba(255,255,255,.08)}
html[lang=ar] .news-ticker{direction:rtl;font-family:var(--font-body-ar)}
html[lang=ar] .news-ticker .news-track{font-family:var(--font-body-ar);direction:rtl}
html[lang=ar] input,html[lang=ar] textarea,html[lang=ar] select{font-family:var(--font-body-ar)}