/*
Theme Name: Custom Leather
Theme URI: https://customleather.com
Author: Custom Leather Team
Author URI: https://customleather.com
Description: High-craft bespoke WooCommerce block theme for Custom Leather storefront, featuring system font stacks, measured responsive typography, and editorial commerce layouts.
Version: 1.0.4
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: custom-leather
*/

/* Reset & Storefront Base Variables */
:root {
  --color-cream: #f7f3ee;
  --color-ink: #211d1a;
  --color-saddle: #8a4f32;
  --color-sand: #d4aa88;
  --color-stone: #e7dfd5;
  --color-muted: #62574d;
  --color-hero-base: #40352e;
  --color-star: #b4875c;
  --font-sans: Arial, Helvetica, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --container-max-w: 1280px;
}

html {
  background-color: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--color-cream);
  color: var(--color-ink);
  line-height: 1.5;
}

/* Announcement Bar */
.cl-announcement-bar {
  background-color: var(--color-ink);
  color: var(--color-cream);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  padding: 8px 16px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Site Header */
.cl-header {
  height: 74px;
  background-color: var(--color-cream);
  border-bottom: 1px solid rgba(33, 29, 26, 0.1);
  position: sticky;
  top: 0;
  z-index: 50;
  transition: background-color 0.2s ease;
}

.cl-header-inner {
  max-width: var(--container-max-w);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

@media (min-width: 1024px) {
  .cl-header-inner {
    padding: 0 40px;
  }
}

.cl-logo {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  text-decoration: none;
}

.cl-nav {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cl-nav a {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  transition: color 0.15s ease;
}

.cl-nav a:hover {
  color: var(--color-saddle);
}

/* Hero Section */
.cl-hero {
  position: relative;
  min-height: 590px;
  background-color: var(--color-hero-base);
  color: var(--color-cream);
  display: flex;
  align-items: center;
  overflow: hidden;
}

@media (min-width: 768px) {
  .cl-hero {
    min-height: 690px;
  }
}

.cl-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  opacity: 0.8;
}

.cl-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(33, 29, 26, 0.9) 0%, rgba(33, 29, 26, 0.35) 60%, transparent 100%);
}

.cl-hero-content {
  position: relative;
  z-index: 10;
  max-width: var(--container-max-w);
  margin: 0 auto;
  padding: 40px 20px;
  width: 100%;
}

@media (min-width: 1024px) {
  .cl-hero-content {
    padding: 60px 40px;
  }
}

.cl-hero h1 {
  font-family: var(--font-serif);
  font-size: 54px;
  line-height: 0.94;
  letter-spacing: -0.05em;
  margin: 0 0 24px 0;
  color: #ffffff;
  max-width: 720px;
}

@media (min-width: 640px) {
  .cl-hero h1 {
    font-size: 72px;
  }
}

@media (min-width: 768px) {
  .cl-hero h1 {
    font-size: 92px;
  }
}

/* 3D Jacket Container Placeholder */
.cl-3d-jacket-container {
  border: 1px dashed rgba(212, 170, 136, 0.4);
  background-color: rgba(33, 29, 26, 0.4);
  padding: 24px;
  text-align: center;
  margin-top: 24px;
  border-radius: 4px;
  color: var(--color-sand);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Buttons */
.cl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cl-btn-primary {
  background-color: var(--color-cream);
  color: var(--color-ink);
}

.cl-btn-primary:hover {
  background-color: #ffffff;
  color: #000000;
}

.cl-btn-dark {
  background-color: var(--color-ink);
  color: var(--color-cream);
}

.cl-btn-dark:hover {
  background-color: var(--color-saddle);
  color: #ffffff;
}

/* Section styling */
.cl-section {
  padding: 64px 20px;
  max-width: var(--container-max-w);
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .cl-section {
    padding: 96px 40px;
  }
}

.cl-section-stone {
  background-color: var(--color-stone);
  width: 100%;
}

.cl-heading-serif {
  font-family: var(--font-serif);
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.cl-label-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--color-saddle);
  margin-bottom: 12px;
  display: block;
}

/* Product Cards & Grids */
.cl-product-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 24px;
}

@media (min-width: 640px) {
  .cl-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .cl-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
}

.cl-card {
  position: relative;
  background-color: #ffffff;
  border: 1px solid rgba(33, 29, 26, 0.08);
  overflow: hidden;
}

.cl-card-img-wrapper {
  overflow: hidden;
  position: relative;
  aspect-ratio: 4/5;
  background-color: var(--color-stone);
}

.cl-card-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

.cl-card:hover .cl-card-img-wrapper img {
  transform: scale(1.05);
}

.cl-card-content {
  padding: 20px;
}

/* Sample Review Stars */
.cl-star {
  color: var(--color-star);
  font-size: 14px;
}

/* Footer */
.cl-footer {
  background-color: var(--color-ink);
  color: var(--color-cream);
  padding: 64px 20px 32px;
}

@media (min-width: 1024px) {
  .cl-footer {
    padding: 96px 40px 48px;
  }
}

.cl-footer a {
  color: var(--color-cream);
  text-decoration: none;
  transition: color 0.15s ease;
}

.cl-footer a:hover {
  color: var(--color-sand);
}

/* Focus Visible Accessibility */
:focus-visible {
  outline: 3px solid var(--color-saddle);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Local storefront repair: constrain actual layout, never hide overflow. */
*,*::before,*::after{box-sizing:border-box}
img{max-width:100%}
.cl-header-inner{gap:16px;min-width:0}.cl-header-inner>*{min-width:0}
.cl-logo{flex-shrink:0;margin:0}.cl-logo a{text-decoration:none}
.cl-native-nav{margin-inline:auto}.cl-native-nav .wp-block-navigation__container{gap:18px}
.cl-native-nav a{font-size:11px;font-weight:600;letter-spacing:.08em}
.cl-header-actions{flex-shrink:0}.cl-header-actions .wp-block-button__link{padding:10px 14px;font-size:11px;background:var(--color-ink);color:var(--color-cream);border-radius:0}
.cl-footer .cl-btn-primary{color:var(--color-ink);background:var(--color-cream)}
.cl-footer .cl-btn-primary:hover{color:#000;background:#fff}
.cl-footer .cl-btn-primary:focus-visible{outline-color:var(--color-sand)}
.cl-section-stone{max-width:100%}.cl-section>*{min-width:0}
.cl-section .wp-block-woocommerce-product-collection{margin-block:30px}
.cl-section .wc-block-product-template{padding:0;gap:24px}
.cl-section .wc-block-product-template>li{background:white;padding:16px;border:1px solid var(--color-stone);min-width:0}
.cl-section .wp-block-woocommerce-product-image img{width:100%;aspect-ratio:4/5;object-fit:cover}
.cl-section .wc-block-components-product-button__button{background:var(--color-ink);color:var(--color-cream)}
@media(max-width:1023px){.cl-header-inner{padding-inline:20px}.cl-native-nav .wp-block-navigation__responsive-container:not(.is-menu-open){display:none!important}.cl-native-nav .wp-block-navigation__responsive-container-open{display:flex!important}.cl-native-nav .wp-block-navigation__responsive-container.is-menu-open{padding:28px;background:var(--color-cream);color:var(--color-ink)}.cl-native-nav .is-menu-open .wp-block-navigation__container{align-items:flex-start;gap:22px}.cl-logo{font-size:clamp(18px,4.6vw,24px)}.cl-hero h1{overflow-wrap:normal}.cl-section .wp-block-columns{gap:24px}}
@media(max-width:600px){.cl-section .wc-block-product-template{grid-template-columns:1fr!important}.cl-hero-content{padding-inline:20px}.cl-footer>div{min-width:0}.cl-footer a{overflow-wrap:anywhere}.cl-announcement-bar{letter-spacing:.1em}.cl-section .wp-block-woocommerce-product-image img{max-height:520px}}

/* Contrast on dark footer and pale editorial backgrounds. */
.cl-footer{--color-muted:#c5b6a8}.cl-footer :focus-visible{outline-color:var(--color-sand)}

.cl-product-search{max-width:640px;margin-block:24px}.cl-product-search input{min-width:0}

.cl-page-content{max-width:960px}.cl-post-list .cl-card{padding:24px;margin-bottom:24px}.cl-post-list{list-style:none;padding:0}

/* Customer guidance near purchase and order actions. */
.cl-customer-help { margin-block: 1.5rem; padding: clamp(1rem, 3vw, 1.5rem); background: #f7f3ee; color: #211d1a; border: 1px solid currentColor; border-radius: 0.5rem; }
.cl-customer-help h2 { margin-block-start: 0; font-size: 1.2rem; }
.cl-customer-help ul { padding-inline-start: 1.25rem; margin-block-end: 0; }
.cl-customer-help a { display: inline-flex; align-items: center; min-block-size: 2.75rem; color: inherit; text-decoration: underline; text-underline-offset: 0.18em; }
.cl-customer-help a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }