/*
Theme Name: R22 Concept
Theme URI: https://shop.r22concept.com
Author: R22 Concept
Author URI: https://shop.r22concept.com
Description: Minimal editorial storefront theme for the R22 Concept clothing & accessories store. Converted from the R22 Concept design canvas into a responsive WordPress theme with a mobile drawer menu and WooCommerce-aware links. Mobile layout matched 1:1 to the dedicated mobile mockup.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: r22-concept
*/

/* ---------- base (from design) ---------- */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:#F4F1EA;
  color:#161310;
  font-family:'Jost', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection { background:#161310; color:#F4F1EA; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
input::placeholder { color:#9a9488; }

/* ---------- image placeholders (replace background-image later) ---------- */
.img-slot { position:absolute; inset:0; background-size:cover; background-position:center; }

/* ---------- hover utilities (replace design's style-hover) ---------- */
.hx { transition:color .3s; }
.hx:hover { color:#6E665B; }

.ul { transition:opacity .3s; }
.ul:hover { opacity:.55; }

.btn-fill { transition:background .35s, color .35s; }
.btn-fill:hover { background:#161310; color:#F4F1EA; }

.btn-outline { transition:background .35s, color .35s; }
.btn-outline:hover { background:#F4F1EA; color:#161310; }

.card-img { transition:transform .9s cubic-bezier(.2,.7,.2,1); }
.card:hover .card-img { transform:scale(1.06); }

.subscribe { transition:opacity .3s; }
.subscribe:hover { opacity:.6; }

.fl { transition:color .3s; }
.fl:hover { color:#F4F1EA; }

/* ---------- mobile drawer (replaces canvas sc-if/setState) ---------- */
.r-burger { display:none; }
.r-ann-short { display:none; }
.r22-drawer { display:none; }
html.r22-menu-open .r22-drawer { display:flex; }
html.r22-menu-open { overflow:hidden; }

/* ---------- responsive (authored in the design, breakpoint 840px) ---------- */
@media (max-width: 840px) {
  .r-announce { font-size:10.5px !important; letter-spacing:.14em !important; padding:10px 16px !important; }
  .r-header { padding:14px 18px !important; }
  .r-nav { display:none !important; }
  .r-burger { display:flex !important; }
  .r-logo { font-size:22px !important; }
  .r-baglabel { display:none !important; }
  .r-icons { gap:18px !important; }
  .r-hero { height:74vh !important; min-height:520px !important; }
  .r-herotext { padding:0 22px 44px !important; }
  .r-h1 { font-size:46px !important; }
  .r-herop { font-size:14.5px !important; margin-bottom:26px !important; }
  .r-sec { padding:64px 20px 60px !important; }
  .r-secnew { padding:0 20px 72px !important; }
  .r-h2 { font-size:31px !important; }
  .r-sechead { margin-bottom:30px !important; }
  .r-catgrid { grid-template-columns:1fr !important; gap:14px !important; }
  .r-prodgrid { grid-template-columns:repeat(2,1fr) !important; gap:36px 14px !important; }
  .r-look { height:64vh !important; min-height:480px !important; }
  .r-lookh { font-size:42px !important; }
  .r-ethos { grid-template-columns:1fr !important; }
  .r-ethosimg { min-height:440px !important; }
  .r-ethostext { padding:60px 24px !important; }
  .r-ethosh { font-size:32px !important; }
  .r-features { grid-template-columns:1fr !important; }
  .r-featcell { border-right:none !important; border-bottom:1px solid #E2DBCF !important; padding:40px 24px !important; }
  .r-featlast { padding:40px 24px !important; }
  .r-iggrid { grid-template-columns:repeat(2,1fr) !important; gap:10px !important; }
  .r-news { padding:80px 22px !important; }
  .r-newsh { font-size:36px !important; }
  .r-foot { padding:48px 24px 60px !important; }
  .r-footgrid { grid-template-columns:1fr !important; gap:34px !important; padding-bottom:40px !important; }
  .r-footbrand { grid-column:1 / -1 !important; }
  .r-footbottom { flex-direction:column !important; align-items:flex-start !important; gap:16px !important; }

  /* --- aligned 1:1 with the dedicated mobile mockup --- */
  .r-ann-full { display:none !important; }
  .r-ann-short { display:inline !important; }
  .r-acct { display:none !important; }
  .r-br { display:none !important; }
  .r-herocta { padding:14px 28px !important; font-size:11px !important; }
  .r-herop { max-width:280px !important; }
  .r-cat { aspect-ratio:auto !important; height:230px !important; }
  .r-cattitle { font-size:26px !important; }
  .r-featcell, .r-featlast { flex-direction:row !important; align-items:center !important; justify-content:flex-start !important; text-align:left !important; gap:16px !important; padding:24px !important; }
  .r-featicon { margin-bottom:0 !important; flex-shrink:0 !important; }
  .r-newsform { flex-direction:column !important; gap:18px !important; border-bottom:none !important; }
  .r-newsinput { border-bottom:1px solid rgba(244,241,234,.35) !important; text-align:center !important; }
  .r-newsbtn { background:#F4F1EA !important; color:#161310 !important; padding:14px !important; }
}