/* ================================================================
   BASE.CSS — Lem Accessory v2
   Krem/Bej Lüks Butik Teması · Inter + Outfit
   ================================================================ */

:root {
  --c-bg:          #faf8f5;
  --c-bg-2:        #f4f0eb;
  --c-bg-3:        #ede7de;
  --c-cream:       #f8f4ef;
  --c-cream-dark:  #e8e0d4;
  --c-brown:       #3d2c1e;
  --c-brown-mid:   #6b4f38;
  --c-brown-light: #9c7a5e;
  --c-brown-dim:   rgba(61,44,30,0.06);
  --c-brown-dim-2: rgba(61,44,30,0.12);
  --c-text:        #1c140e;
  --c-text-2:      #4a3728;
  --c-text-muted:  #8a7060;
  --c-text-light:  #b8a898;
  --c-border:      #ddd5c8;
  --c-border-2:    #c8bdb0;
  --c-white:       #ffffff;
  --c-black:       #0d0a07;
  --c-wa:          #25D366;
  --c-wa-dark:     #1ea952;
  --c-red:         #c0392b;
  --c-green:       #27ae60;

  --ff-head: 'Outfit', sans-serif;
  --ff-body: 'Inter', sans-serif;

  --text-2xs: 0.625rem;
  --text-xs:  0.75rem;
  --text-sm:  0.8125rem;
  --text-base:0.9375rem;
  --text-md:  1rem;
  --text-lg:  1.125rem;
  --text-xl:  1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.75rem;
  --text-5xl: 3.5rem;
  --text-6xl: 5rem;

  --sp-1:0.25rem; --sp-2:0.5rem;  --sp-3:0.75rem; --sp-4:1rem;
  --sp-5:1.25rem; --sp-6:1.5rem;  --sp-8:2rem;    --sp-10:2.5rem;
  --sp-12:3rem;   --sp-16:4rem;   --sp-20:5rem;   --sp-24:6rem;

  --r-sm:3px; --r-md:6px; --r-lg:12px; --r-xl:20px; --r-full:9999px;

  --sh-xs: 0 1px 2px rgba(61,44,30,0.04);
  --sh-sm: 0 2px 8px rgba(61,44,30,0.07);
  --sh-md: 0 6px 24px rgba(61,44,30,0.10);
  --sh-lg: 0 16px 48px rgba(61,44,30,0.14);
  --sh-xl: 0 32px 80px rgba(61,44,30,0.18);

  --header-h:68px; --sidebar-w:272px; --max-w:1480px; --pad-x:1.25rem;

  --ease:cubic-bezier(0.4,0,0.2,1);
  --ease-out:cubic-bezier(0,0,0.2,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  --dur-fast:150ms; --dur-base:240ms; --dur-slow:400ms; --dur-drawer:340ms;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
input,select,textarea{max-width:100%;width:100%;box-sizing:border-box;}
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
body {
  font-family:var(--ff-body);font-size:var(--text-base);font-weight:400;
  line-height:1.6;color:var(--c-text);background:var(--c-bg);
  -webkit-font-smoothing:antialiased;overflow-x:clip; width:100%;
  overflow-wrap: break-word; word-break: break-word;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;background:none;font-family:inherit;color:inherit}
input,select,textarea{font-family:inherit;font-size:inherit}
ul,ol{list-style:none}
h1,h2,h3,h4,h5{font-family:var(--ff-head);font-weight:700;line-height:1.15; overflow-wrap: anywhere;}

.container{width:100%;max-width:var(--max-w);margin-inline:auto;padding-inline:var(--pad-x);box-sizing:border-box;}
@media(min-width:640px){:root{--pad-x:2rem}}
@media(min-width:960px){:root{--header-h:111px}}
@media(min-width:1024px){:root{--pad-x:3rem}}
@media(min-width:1440px){:root{--pad-x:4rem}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page-offset{padding-top:var(--header-h)}