/* ==========================================================
   ALIQARO — luxury men's fashion skin for MONO
   Black / White / touches of Gold.  Loaded last (layout/theme.liquid)
   ========================================================== */

:root{
  --aq-black:#0b0b0b;
  --aq-line:#e6e2d9;
  --aq-gold:var(--color-accent, #B8975A);
}

/* ---- Page frame ------------------------------------------------ */
body{ background-color:#f3f1ec; }
body main{ background-color:#fff; border-radius:0; box-shadow:0 0 0 1px var(--aq-line); }
body main .youcan-section{
  background-color:#fff;
  border-color:#fff;
}
body main [ui-section]{ background-color:#fff; }
::selection{ background:var(--aq-gold); color:#000; }

/* ---- Typography ------------------------------------------------ */
h1,h2,h3,[ui-section] .title{ font-family:var(--font-heading-family); }
[ui-section] .head .title,
[ui-section=faqs] .title,
[ui-section=product-slider] .title,
[ui-section=product-grid] .title{
  font-size:15px;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
}
[ui-section] .head .title::after{
  content:"";
  display:block;
  width:32px;
  height:1px;
  margin-block-start:var(--spacing-8);
  background:var(--aq-gold);
}

/* ---- Header ---------------------------------------------------- */
[ui-section=header]{ gap:var(--spacing-6); padding-block-end:var(--spacing-8); }
[ui-section=header] .logo{ width:104px; border-radius:0; }
[ui-section=header] > .heading{
  font:600 22px/1.2 var(--font-heading-family);
  letter-spacing:0.38em;
  text-indent:0.38em;
  text-transform:uppercase;
}
[ui-section=header] > .subheading{
  font:500 11px/1.4 var(--font-family);
  letter-spacing:0.24em;
  text-transform:uppercase;
  opacity:0.7;
}
[ui-section=header]:not([data-floating=true])::after{
  content:"";
  width:40px;
  height:1px;
  margin-block-start:var(--spacing-8);
  background:var(--aq-gold);
}
[ui-section=header] .social-links [ui-slot=button]{ border-color:var(--aq-black); }
[ui-section=header] .social-links [ui-slot=button]:hover{ background-color:var(--aq-gold); border-color:var(--aq-gold); color:#000; }

/* ---- Buttons --------------------------------------------------- */
[ui-slot=button]{ border-radius:0; }
[ui-slot=button][data-mode=filled]{
  background-color:var(--aq-black);
  color:#fff;
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-weight:500;
}
[ui-slot=button][data-mode=filled]:hover:not(:disabled):not([aria-disabled=true]){
  background-color:var(--aq-gold);
  color:#000;
}
[ui-slot=button][data-mode=stroke]:hover:not(:disabled):not([aria-disabled=true]){
  background-color:var(--aq-black);
  color:#fff;
}
[ui-slot=input]{ border-radius:0; }

/* ---- Slideshow / hero ------------------------------------------ */
[ui-section=slideshow] .slide-item .heading{
  font-family:var(--font-heading-family);
  letter-spacing:0.06em;
}

/* ---- Collections (clothing / accessories) ---------------------- */
[ui-section=collections] .list .collection-item{
  border:1px solid var(--aq-line);
  box-shadow:none;
  transition:border-color .25s ease, background-color .25s ease;
}
[ui-section=collections] .list .collection-item:hover{
  border-color:var(--aq-gold);
  background-color:#fbf9f4;
}
[ui-section=collections] .list .collection-item .name{
  font-family:var(--font-heading-family);
  text-transform:uppercase;
  letter-spacing:0.12em;
  font-size:13px;
}

/* ---- Product cards --------------------------------------------- */
[ui-block=product] .content .title{
  font:500 13px/1.4 var(--font-family);
  text-transform:uppercase;
  letter-spacing:0.08em;
}
[ui-block=product] .content .price{
  font:500 15px/1.4 var(--font-heading-family);
  color:var(--aq-black);
}
[ui-block=product]:hover .media > a img{ filter:none; transform:scale(1.04); }
[ui-block=product] .media{ border-radius:0; }
[ui-slot=badge]{
  background-color:var(--aq-gold) !important;
  color:#000 !important;
  border-radius:0 !important;
  border-color:var(--aq-gold) !important;
  box-shadow:none !important;
  letter-spacing:0.06em;
}

/* ---- Marquee banner (black strip, gold text) ------------------- */
[ui-section=banner]{ background-color:var(--aq-black) !important; }
[ui-section=banner] [ui-marquee=item]{
  color:var(--aq-gold);
  font:500 12px/1 var(--font-family);
  letter-spacing:0.28em;
  text-transform:uppercase;
}
[ui-section=banner] [ui-marquee=item]::after{
  content:"◆";
  margin-inline-start:var(--spacing-24);
  font-size:7px;
  vertical-align:middle;
  color:#fff;
}

/* ---- Footer ---------------------------------------------------- */
[ui-section=footer]{
  border-block-start:1px solid var(--aq-line);
  padding-block:var(--spacing-24);
}
[ui-section=footer] .copyright{
  background:transparent;
  font:500 11px/1 var(--font-family);
  letter-spacing:0.22em;
  text-transform:uppercase;
}
[ui-section=footer] .links .link a{ text-decoration:none; font-size:12px; opacity:.75; }
[ui-section=footer] .links .link a:hover{ opacity:1; color:var(--aq-gold); }

/* ---- Arabic (RTL): spacing/uppercase break Arabic joining ------- */
html[lang=ar] body *{
  letter-spacing:0 !important;
  text-transform:none !important;
  text-indent:0 !important;
}
html[lang=ar] body{ font-family:'Cairo', var(--font-family); }
html[lang=ar] h1, html[lang=ar] h2, html[lang=ar] h3,
html[lang=ar] [ui-section] .title, html[lang=ar] [ui-section=header] > .heading{
  font-family:'Cairo', sans-serif;
}