/*
Theme Name: CRAGA Minimal
Theme URI: https://example.com/craga-minimal
Author: CRAGA
Author URI: https://example.com
Description: A minimal editorial fashion theme for CRAGA, with WooCommerce and WPBakery Page Builder compatibility.
Version: 1.0.0
Requires at least: 6.2
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: craga-minimal
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: e-commerce, grid-layout, custom-logo, custom-menu, featured-images, full-width-template, translation-ready
*/

:root {
  --craga-bg: #ffffff;
  --craga-text: #0a0a0a;
  --craga-muted: #777777;
  --craga-line: #d8d8d8;
  --craga-gutter: 18px;
  --craga-header-height: 92px;
  --craga-font: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--craga-bg);
  color: var(--craga-text);
  font-family: var(--craga-font);
  font-size: 13px;
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: .035em;
}
a { color: inherit; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; text-underline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
.screen-reader-text { position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

.site-header {
  display: grid;
  grid-template-columns: minmax(150px,1fr) minmax(220px,2fr) minmax(150px,1fr);
  min-height: var(--craga-header-height);
  border-bottom: 1px solid var(--craga-line);
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.97);
}
.header-cell { padding: 14px var(--craga-gutter); display:flex; align-items:center; border-right:1px solid var(--craga-line); }
.header-cell:last-child { border-right:0; justify-content:flex-end; text-align:right; }
.site-branding { justify-content:center; text-align:center; }
.custom-logo { max-height: 42px; width:auto; }
.site-title { margin:0; font-size:21px; font-weight:500; letter-spacing:.32em; padding-left:.32em; }
.site-description { margin:4px 0 0; color:var(--craga-muted); font-size:9px; letter-spacing:.18em; }
.header-meta { font-size:10px; line-height:1.55; }
.menu-toggle { display:none; border:0; background:none; padding:0; text-transform:uppercase; cursor:pointer; }
.primary-navigation { border-bottom:1px solid var(--craga-line); background:#fff; }
.primary-navigation ul { margin:0; padding:0; list-style:none; display:flex; justify-content:center; }
.primary-navigation li { border-left:1px solid var(--craga-line); min-width:150px; text-align:center; }
.primary-navigation li:last-child { border-right:1px solid var(--craga-line); }
.primary-navigation a { display:block; padding:10px 20px; font-size:10px; }
.primary-navigation .current-menu-item > a { text-decoration:underline; text-underline-offset:3px; }
.cart-link .count { display:inline-block; min-width:18px; }

.site-main { min-height:55vh; }
.page-shell { width:min(1480px,100%); margin:0 auto; padding:40px var(--craga-gutter) 80px; }
.page-header { border-bottom:1px solid var(--craga-line); margin:0 calc(var(--craga-gutter) * -1) 32px; padding:0 var(--craga-gutter) 18px; }
.page-title { margin:0; font-size:13px; font-weight:400; }
.entry-content { text-transform:none; letter-spacing:normal; font-size:15px; line-height:1.7; }
.entry-content > * { max-width:760px; }
.entry-content > .alignwide { max-width:1200px; }
.entry-content > .alignfull { max-width:none; width:100vw; margin-left:calc(50% - 50vw); }
.entry-content h1,.entry-content h2,.entry-content h3 { text-transform:uppercase; letter-spacing:.06em; font-weight:500; line-height:1.25; }

.craga-intro { padding:16px var(--craga-gutter); border-bottom:1px solid var(--craga-line); text-align:center; font-size:12px; }
.craga-product-grid, ul.products {
  display:grid !important;
  grid-template-columns:repeat(var(--craga-columns, 3), minmax(0,1fr));
  gap:0 !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none;
  border-top:0;
}
.craga-card, ul.products li.product {
  margin:0 !important;
  width:auto !important;
  float:none !important;
  border-right:1px solid var(--craga-line);
  border-bottom:1px solid var(--craga-line);
  position:relative;
  padding:0 !important;
}
.craga-card:nth-child(3n), ul.products.columns-3 li.product:nth-child(3n) { border-right:0; }
.craga-card-image, ul.products li.product a img { aspect-ratio:4/5; width:100%; object-fit:cover; margin:0 !important; background:#f2f2f2; }
.craga-card-info, ul.products li.product .woocommerce-loop-product__title { padding:12px var(--craga-gutter) !important; margin:0 !important; font-size:10px !important; font-weight:400 !important; line-height:1.4; }
ul.products li.product .price { position:absolute; right:var(--craga-gutter); bottom:12px; margin:0 !important; color:inherit !important; font-size:10px !important; }
ul.products li.product .button { display:none; }
.craga-placeholder { aspect-ratio:4/5; display:flex; align-items:center; justify-content:center; background:#f3f3f3; color:#999; }

.woocommerce .woocommerce-breadcrumb { margin:0; padding:14px var(--craga-gutter); border-bottom:1px solid var(--craga-line); font-size:9px; color:inherit; }
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { margin:18px var(--craga-gutter); font-size:10px; }
.woocommerce .woocommerce-ordering select { border:1px solid var(--craga-line); background:#fff; padding:7px 10px; }
.single-product div.product { display:grid; grid-template-columns:2fr 1fr; gap:0; }
.single-product div.product .woocommerce-product-gallery { width:auto !important; float:none !important; margin:0 !important; border-right:1px solid var(--craga-line); }
.single-product div.product .summary { width:auto !important; float:none !important; margin:0 !important; padding:36px var(--craga-gutter); position:sticky; top:calc(var(--craga-header-height) + 35px); align-self:start; }
.single-product .product_title { font-size:15px; font-weight:400; }
.single-product .price { color:inherit !important; font-size:13px !important; }
.woocommerce button.button, .woocommerce a.button, .woocommerce input.button, .wp-element-button {
  border-radius:0 !important; background:#0a0a0a !important; color:#fff !important; font-weight:400 !important; text-transform:uppercase; padding:13px 18px !important;
}
.woocommerce-message, .woocommerce-info, .woocommerce-error { border-top-color:#111; background:#f7f7f7; }
.woocommerce-tabs, .related.products { padding:30px var(--craga-gutter); border-top:1px solid var(--craga-line); }

.site-footer { display:grid; grid-template-columns:1fr 1fr 1fr; border-top:1px solid var(--craga-line); }
.footer-cell { min-height:105px; padding:16px var(--craga-gutter); border-right:1px solid var(--craga-line); font-size:10px; }
.footer-cell:last-child { border-right:0; text-align:right; }
.footer-menu { list-style:none; margin:0; padding:0; }

@media (max-width: 900px) {
  :root { --craga-header-height:74px; }
  .site-header { grid-template-columns:1fr auto; min-height:var(--craga-header-height); }
  .header-left { display:none; }
  .site-branding { justify-content:flex-start; text-align:left; border-right:0; }
  .header-right { min-width:120px; }
  .site-title { font-size:17px; }
  .menu-toggle { display:block; }
  .primary-navigation { display:none; }
  .primary-navigation.is-open { display:block; }
  .primary-navigation ul { display:block; }
  .primary-navigation li { border:0; border-bottom:1px solid var(--craga-line); }
  .craga-product-grid, ul.products { --craga-columns:2 !important; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .craga-card:nth-child(3n), ul.products.columns-3 li.product:nth-child(3n) { border-right:1px solid var(--craga-line); }
  .craga-card:nth-child(2n), ul.products li.product:nth-child(2n) { border-right:0; }
  .single-product div.product { grid-template-columns:1fr; }
  .single-product div.product .woocommerce-product-gallery { border-right:0; border-bottom:1px solid var(--craga-line); }
  .single-product div.product .summary { position:static; }
}
@media (max-width: 560px) {
  .header-right .header-meta { display:none; }
  .site-footer { grid-template-columns:1fr; }
  .footer-cell { border-right:0; border-bottom:1px solid var(--craga-line); }
  .footer-cell:last-child { text-align:left; border-bottom:0; }
  .craga-product-grid, ul.products { grid-template-columns:1fr; }
  .craga-card, ul.products li.product { border-right:0 !important; }
}
