/* ==========================================================================
   RASWEAR — Design System
   Dark Luxury · Mobile First
   RAS Black #111111 · RAS Ivory #F6F1E8 · Antique Gold #B08D57
   ========================================================================== */

:root{
  --ras-black:#111111;
  --ras-black-deep:#0a0a0a;
  --ras-surface:#181818;
  --ras-surface-2:#202020;
  --ras-ivory:#F6F1E8;
  --ras-ivory-dim:#b8b0a3;
  --ras-gold:#B08D57;
  --ras-gold-light:#c9a878;
  --ras-white:#FFFFFF;
  --ras-line:rgba(176,141,87,0.24);
  --ras-line-soft:rgba(246,241,232,0.10);

  --ras-max:1240px;
  --ras-gutter:20px;
  --ras-space:clamp(56px, 9vw, 104px);

  --ras-font-fa:'Vazirmatn', system-ui, sans-serif;
  --ras-font-en:'Jost', 'Vazirmatn', system-ui, sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}

body.ras-site{
  margin:0;
  background:var(--ras-black);
  color:var(--ras-ivory-dim);
  font-family:var(--ras-font-fa);
  font-size:16px;
  line-height:1.9;
  overflow-x:hidden;
}

.ras-site h1,.ras-site h2,.ras-site h3,.ras-site h4{
  margin:0;
  color:var(--ras-ivory);
  font-weight:600;
  line-height:1.4;
}
.ras-en{
  font-family:var(--ras-font-en);
  text-transform:uppercase;
  letter-spacing:.14em;
}
.ras-site a{color:inherit; text-decoration:none;}
.ras-site img{max-width:100%; height:auto; display:block;}
.ras-site p{margin:0 0 1em;}
.ras-site :focus-visible{outline:2px solid var(--ras-gold-light); outline-offset:3px;}

.screen-reader-text{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}
.ras-wrap{max-width:var(--ras-max); margin-inline:auto; padding-inline:var(--ras-gutter);}
.ras-section{padding-block:var(--ras-space);}

/* ---------- Buttons: large, touch-friendly (min 48px) ---------- */
.ras-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:0 34px;
  font-family:var(--ras-font-en); font-size:.82rem; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid transparent; background:none; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.ras-btn--gold{background:var(--ras-gold); color:var(--ras-black); font-weight:600;}
.ras-btn--gold:hover{background:var(--ras-gold-light);}
.ras-btn--ghost{border-color:var(--ras-gold); color:var(--ras-gold-light);}
.ras-btn--ghost:hover{background:rgba(176,141,87,.12);}
.ras-btn--ivory{background:var(--ras-ivory); color:var(--ras-black); font-weight:600;}
.ras-btn--ivory:hover{background:var(--ras-white);}
.ras-btn--block{width:100%;}

/* ---------- Header ---------- */
.ras-header{
  position:sticky; top:0; z-index:60;
  background:rgba(17,17,17,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--ras-line-soft);
}
.ras-header__row{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; min-height:68px;
}
.ras-logo{font-family:var(--ras-font-en); font-size:1.35rem; letter-spacing:.3em; color:var(--ras-ivory); font-weight:600;}
.ras-logo img{max-height:44px; width:auto;}
.ras-nav>ul{display:none;}
.ras-header__icons{display:flex; align-items:center; gap:4px;}
.ras-iconbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; background:none; border:none; color:var(--ras-ivory);
  font-size:1.05rem; cursor:pointer; position:relative;
}
.ras-cart-count{
  position:absolute; inset-block-start:6px; inset-inline-end:4px;
  min-width:18px; height:18px; padding:0 4px;
  background:var(--ras-gold); color:var(--ras-black);
  border-radius:9px; font-size:.65rem; line-height:18px; text-align:center; font-weight:700;
}

/* mobile drawer */
.ras-drawer{
  position:fixed; inset:68px 0 0 0; z-index:55;
  background:var(--ras-black); padding:28px var(--ras-gutter);
  transform:translateY(-8px); opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease; overflow-y:auto;
}
.ras-drawer.is-open{opacity:1; transform:none; pointer-events:auto;}
.ras-drawer ul{list-style:none; margin:0; padding:0;}
.ras-drawer li{border-bottom:1px solid var(--ras-line-soft);}
.ras-drawer a{display:block; padding:16px 0; font-size:1rem; color:var(--ras-ivory);}
.ras-drawer .sub-menu a{padding-inline-start:18px; font-size:.9rem; color:var(--ras-ivory-dim);}

/* ---------- Hero ---------- */
.ras-hero{
  position:relative; display:flex; align-items:center; justify-content:center;
  min-height:clamp(440px, 74vh, 720px); text-align:center;
  background:
    linear-gradient(180deg, rgba(10,10,10,.62), rgba(10,10,10,.90)),
    repeating-linear-gradient(118deg, #141414 0 44px, #191919 44px 88px);
  background-size:cover; background-position:center;
  border-bottom:1px solid var(--ras-line-soft);
}
.ras-hero__inner{max-width:620px; padding:60px var(--ras-gutter);}
.ras-eyebrow{
  display:block; margin-bottom:18px;
  font-family:var(--ras-font-en); font-size:.72rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ras-gold-light);
}
.ras-hero h1{
  font-family:var(--ras-font-en); text-transform:uppercase; letter-spacing:.16em;
  font-size:clamp(1.9rem, 7vw, 3.4rem); color:var(--ras-ivory); margin-bottom:16px;
}
.ras-hero p{color:var(--ras-ivory-dim); margin-bottom:30px;}
.ras-hero__cta{display:flex; flex-direction:column; gap:12px;}

/* ---------- Section head ---------- */
.ras-head{text-align:center; max-width:620px; margin:0 auto 44px;}
.ras-head h2{
  font-family:var(--ras-font-en); text-transform:uppercase; letter-spacing:.14em;
  font-size:clamp(1.35rem, 4.5vw, 1.9rem);
}
.ras-head p{margin-top:12px;}

/* ---------- Category cards ---------- */
.ras-cats{display:grid; gap:18px;}
.ras-cat{
  position:relative; display:block; overflow:hidden;
  background:var(--ras-surface); border:1px solid var(--ras-line-soft);
  transition:border-color .2s ease;
}
.ras-cat:hover,.ras-cat:focus-visible{border-color:var(--ras-gold);}
.ras-cat__media{
  aspect-ratio:3/4;
  background:linear-gradient(160deg,var(--ras-surface-2),var(--ras-black-deep));
  background-size:cover; background-position:center;
  transition:transform .3s ease;
}
.ras-cat:hover .ras-cat__media,.ras-cat:focus-visible .ras-cat__media{transform:scale(1.04);}
.ras-cat__body{padding:24px 22px 28px; text-align:center;}
.ras-cat__num{
  font-family:var(--ras-font-en); font-size:.72rem; letter-spacing:.26em;
  color:var(--ras-gold-light); display:block; margin-bottom:10px;
}
.ras-cat__title{
  font-family:var(--ras-font-en); text-transform:uppercase; letter-spacing:.16em;
  font-size:1.2rem; margin-bottom:6px;
  transition:color .2s ease;
}
.ras-cat:hover .ras-cat__title,.ras-cat:focus-visible .ras-cat__title{color:var(--ras-gold-light);}
.ras-cat__fa{font-size:.9rem; margin-bottom:0;}

/* ---------- Split banner (Groom / Size) ---------- */
.ras-split{background:var(--ras-surface); border-block:1px solid var(--ras-line-soft);}
.ras-split__grid{display:grid; gap:30px; padding-block:var(--ras-space);}
.ras-split__media{
  aspect-ratio:4/5; background:linear-gradient(155deg,var(--ras-surface-2),var(--ras-black-deep));
  background-size:cover; background-position:center; border:1px solid var(--ras-line-soft);
}
.ras-split h2{
  font-family:var(--ras-font-en); text-transform:uppercase; letter-spacing:.14em;
  font-size:clamp(1.3rem,4.5vw,1.9rem); margin-bottom:14px;
}

/* ---------- Journal ---------- */
.ras-journal{display:grid; gap:20px;}
.ras-journal__card{background:var(--ras-surface); border:1px solid var(--ras-line-soft);}
.ras-journal__thumb{
  aspect-ratio:16/10;
  background:linear-gradient(140deg,var(--ras-surface-2),var(--ras-black-deep));
  background-size:cover; background-position:center;
}
.ras-journal__body{padding:22px;}
.ras-journal__cat{
  font-family:var(--ras-font-en); font-size:.68rem; letter-spacing:.24em;
  color:var(--ras-gold-light); display:block; margin-bottom:10px;
}
.ras-journal__body h3{font-size:1.02rem;}

/* ---------- Size guide (Phase 1 shell — engine arrives with ras-core) ---------- */
.ras-size{max-width:760px; margin-inline:auto;}
.ras-steps{display:flex; gap:8px; justify-content:center; margin-bottom:38px;}
.ras-steps span{width:42px; height:2px; background:var(--ras-line-soft);}
.ras-steps span.is-done{background:var(--ras-gold);}
.ras-step{display:none;}
.ras-step.is-active{display:block;}
.ras-choice{display:grid; gap:12px; margin:26px 0 34px;}
.ras-choice button{
  min-height:56px; padding:0 22px; background:var(--ras-surface);
  border:1px solid var(--ras-line-soft); color:var(--ras-ivory-dim);
  font-family:var(--ras-font-fa); font-size:.95rem; cursor:pointer;
}
.ras-choice button:hover,.ras-choice button.is-selected{
  border-color:var(--ras-gold); color:var(--ras-ivory); background:var(--ras-surface-2);
}
.ras-field{margin-bottom:20px; text-align:start;}
.ras-field label{display:block; margin-bottom:8px; font-size:.88rem; color:var(--ras-ivory-dim);}
.ras-field input,.ras-field select{
  width:100%; min-height:52px; padding:0 16px;
  background:var(--ras-surface); border:1px solid var(--ras-line-soft);
  color:var(--ras-ivory); font-family:var(--ras-font-fa); font-size:1rem;
}
.ras-grid-2{display:grid; gap:16px;}
.ras-result{
  background:var(--ras-surface); border:1px solid var(--ras-gold);
  padding:34px 24px; text-align:center;
}
.ras-result__size{
  font-family:var(--ras-font-en); font-size:3.4rem; color:var(--ras-ivory);
  line-height:1; margin:10px 0 6px;
}
.ras-result__meta{display:flex; flex-direction:column; gap:6px; margin:22px 0; font-size:.9rem;}
.ras-note{
  font-size:.8rem; line-height:1.8; color:var(--ras-ivory-dim);
  border-top:1px solid var(--ras-line-soft); padding-top:16px; margin-top:24px;
}

/* ---------- Packages (Groom / Gifts) ---------- */
.ras-packages{display:grid; gap:20px;}
.ras-package{
  background:var(--ras-surface); border:1px solid var(--ras-line-soft);
  padding:34px 26px; text-align:center; display:flex; flex-direction:column;
}
.ras-package.is-featured{border-color:var(--ras-gold);}
.ras-package h3{font-family:var(--ras-font-en); letter-spacing:.14em; text-transform:uppercase; font-size:1.15rem; margin-bottom:16px;}
.ras-package ul{list-style:none; padding:0; margin:0 0 26px; text-align:start; display:grid; gap:9px; font-size:.92rem;}
.ras-package .ras-btn{margin-top:auto;}

/* ---------- Footer ---------- */
.ras-footer{background:var(--ras-black-deep); border-top:1px solid var(--ras-line-soft); padding:56px 0 24px;}
.ras-footer__grid{display:grid; gap:34px; margin-bottom:40px;}
.ras-footer h4{
  font-family:var(--ras-font-en); font-size:.76rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ras-ivory); margin-bottom:16px;
}
.ras-footer ul{list-style:none; padding:0; margin:0; display:grid; gap:10px;}
.ras-footer a{font-size:.9rem;}
.ras-footer a:hover{color:var(--ras-gold-light);}
.ras-footer__bottom{
  border-top:1px solid var(--ras-line-soft); padding-top:22px;
  display:flex; flex-direction:column; gap:10px; font-size:.78rem; text-align:center;
}

/* ---------- Sticky mobile bar (Mobile Nav: Home/Shop/Size/Cart) ---------- */
.ras-tabbar{
  position:fixed; inset-inline:0; inset-block-end:0; z-index:58;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:rgba(17,17,17,.97); border-top:1px solid var(--ras-line-soft);
  backdrop-filter:blur(8px);
}
.ras-tabbar a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-height:60px; font-size:.66rem; color:var(--ras-ivory-dim);
}
.ras-tabbar a span:first-child{font-size:1.05rem; color:var(--ras-ivory);}
body.ras-site{padding-bottom:60px;}

/* ==========================================================================
   Breakpoints — mobile first, then scale up
   ========================================================================== */
@media (min-width:600px){
  .ras-cats{grid-template-columns:repeat(2,1fr);}
  .ras-journal{grid-template-columns:repeat(2,1fr);}
  .ras-packages{grid-template-columns:repeat(2,1fr);}
  .ras-grid-2{grid-template-columns:1fr 1fr;}
  .ras-choice{grid-template-columns:repeat(2,1fr);}
  .ras-hero__cta{flex-direction:row; justify-content:center;}
  .ras-footer__grid{grid-template-columns:1fr 1fr;}
  .ras-footer__bottom{flex-direction:row; justify-content:space-between; text-align:start;}
}
@media (min-width:900px){
  :root{--ras-gutter:28px;}
  .ras-nav>ul{
    display:flex; gap:26px; list-style:none; margin:0; padding:0;
    font-size:.85rem; letter-spacing:.04em;
  }
  .ras-nav a{padding-block:8px;}
  .ras-nav a:hover{color:var(--ras-gold-light);}
  .ras-nav .sub-menu{display:none;}
  .ras-menu-toggle{display:none;}
  .ras-drawer{display:none;}
  .ras-tabbar{display:none;}
  body.ras-site{padding-bottom:0;}
  .ras-cats{grid-template-columns:repeat(3,1fr); gap:24px;}
  .ras-journal{grid-template-columns:repeat(3,1fr); gap:26px;}
  .ras-packages{grid-template-columns:repeat(3,1fr); gap:24px;}
  .ras-split__grid{grid-template-columns:1fr 1fr; align-items:center; gap:64px;}
  .ras-footer__grid{grid-template-columns:1.5fr 1fr 1fr 1fr;}
}

/* ==========================================================================
   WooCommerce — restyled to the RAS identity
   ========================================================================== */
.ras-site .woocommerce .woocommerce-breadcrumb{font-size:.8rem; color:var(--ras-ivory-dim); margin-bottom:24px;}
.ras-site .woocommerce .woocommerce-breadcrumb a{color:var(--ras-gold-light);}

.ras-site .woocommerce ul.products{
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
  list-style:none; margin:0; padding:0;
}
.ras-site .woocommerce ul.products li.product{
  width:auto !important; float:none !important; margin:0 !important;
  background:var(--ras-surface); border:1px solid var(--ras-line-soft); padding-bottom:20px;
}
.ras-site .woocommerce ul.products li.product a img{aspect-ratio:3/4; object-fit:cover; margin:0;}
.ras-site .woocommerce ul.products li.product .woocommerce-loop-product__title{
  padding:16px 16px 4px; font-size:.95rem; color:var(--ras-ivory); font-weight:500;
}
.ras-site .woocommerce ul.products li.product .price{padding:0 16px; color:var(--ras-gold-light); font-size:.9rem;}
.ras-site .woocommerce ul.products li.product .button{
  display:block; margin:14px 16px 0; padding:12px 0; width:calc(100% - 32px);
  background:transparent; border:1px solid var(--ras-gold); color:var(--ras-gold-light);
  border-radius:0; text-align:center; font-size:.8rem; letter-spacing:.08em;
}
.ras-site .woocommerce ul.products li.product .button:hover{background:var(--ras-gold); color:var(--ras-black);}
.ras-site .woocommerce span.onsale{
  background:var(--ras-gold); color:var(--ras-black); border-radius:0;
  min-height:auto; min-width:auto; padding:5px 12px; font-size:.72rem; line-height:1.4;
}

.ras-site .woocommerce div.product .product_title{
  font-family:var(--ras-font-fa); font-size:1.5rem; color:var(--ras-ivory); margin-bottom:12px;
}
.ras-site .woocommerce div.product .summary{color:var(--ras-ivory-dim);}
.ras-site .woocommerce div.product p.price,
.ras-site .woocommerce div.product span.price{color:var(--ras-gold-light); font-size:1.3rem;}
.ras-site .woocommerce div.product form.cart .button,
.ras-site .woocommerce a.checkout-button,
.ras-site .woocommerce input.button.alt,
.ras-site .woocommerce button.button.alt{
  background:var(--ras-gold); color:var(--ras-black); border-radius:0;
  min-height:52px; padding:0 30px; font-weight:600; letter-spacing:.06em;
}
.ras-site .woocommerce div.product form.cart .button:hover,
.ras-site .woocommerce a.checkout-button:hover,
.ras-site .woocommerce input.button.alt:hover{background:var(--ras-gold-light); color:var(--ras-black);}

/* "سایز من را پیدا کن" CTA injected on product pages */
.ras-size-cta{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  border:1px solid var(--ras-line); background:var(--ras-surface);
  padding:16px 18px; margin:22px 0;
}
.ras-size-cta strong{color:var(--ras-ivory); font-weight:600; font-size:.95rem;}
.ras-size-cta .ras-btn{min-height:44px; padding:0 20px; font-size:.74rem;}

.ras-site .woocommerce-tabs .panel{color:var(--ras-ivory-dim);}
.ras-site .woocommerce-tabs ul.tabs li{background:var(--ras-surface); border-color:var(--ras-line-soft);}
.ras-site .woocommerce-tabs ul.tabs li a{color:var(--ras-ivory-dim);}
.ras-site .woocommerce-tabs ul.tabs li.active a{color:var(--ras-gold-light);}

.ras-site .woocommerce table.shop_table,
.ras-site .woocommerce table.shop_attributes{border-color:var(--ras-line-soft); color:var(--ras-ivory-dim);}
.ras-site .woocommerce table.shop_table th{color:var(--ras-ivory);}
.ras-site .woocommerce-message,
.ras-site .woocommerce-info,
.ras-site .woocommerce-error{
  background:var(--ras-surface); border-top-color:var(--ras-gold); color:var(--ras-ivory-dim);
}
.ras-site .woocommerce form .form-row input.input-text,
.ras-site .woocommerce form .form-row textarea,
.ras-site .woocommerce form .form-row select,
.ras-site .select2-container .select2-selection--single{
  background:var(--ras-surface); border:1px solid var(--ras-line-soft);
  color:var(--ras-ivory); min-height:50px; padding:12px 14px; border-radius:0;
}
.ras-site .woocommerce #payment div.payment_box{background:var(--ras-surface-2); color:var(--ras-ivory-dim);}
.ras-site .woocommerce #payment ul.payment_methods{border-color:var(--ras-line-soft);}
.ras-site .woocommerce-MyAccount-navigation ul{list-style:none; padding:0; margin:0 0 28px; display:grid; gap:2px;}
.ras-site .woocommerce-MyAccount-navigation a{
  display:block; padding:14px 16px; background:var(--ras-surface); border:1px solid var(--ras-line-soft);
}
.ras-site .woocommerce-MyAccount-navigation li.is-active a{border-color:var(--ras-gold); color:var(--ras-ivory);}

@media (min-width:900px){
  .ras-site .woocommerce ul.products{grid-template-columns:repeat(3,1fr); gap:24px;}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition-duration:.01ms !important; animation-duration:.01ms !important;}
}
