/*
 Theme Name:   PreciousSentiment
 Theme URI:    https://precioussentiment.com
 Description:  Premium artisan boutique child theme for PreciousSentiment handmade jewelry. Based on Storefront.
 Author:       PreciousSentiment
 Template:     storefront
 Version:      1.0.0
 Text Domain:  precioussentiment
 Tags:         woocommerce, jewelry, boutique, handmade
*/

/* ── Design Tokens ──────────────────────────────────────────────────────────── */
:root {
  --ps-ivory:       #FAF7F2;
  --ps-cream:       #F5F0E8;
  --ps-pearl:       #EDE8DF;
  --ps-sand:        #D9CEBD;
  --ps-gold:        #B8975A;
  --ps-gold-light:  #D4B483;
  --ps-gold-dark:   #8C6E38;
  --ps-charcoal:    #2C2C2C;
  --ps-warm-grey:   #6B6560;
  --ps-mid-grey:    #9B948C;
  --ps-text:        #2C2C2C;
  --ps-text-muted:  #6B6560;

  --ps-font-serif:  'Playfair Display', 'Georgia', serif;
  --ps-font-sans:   'Lato', 'Helvetica Neue', Arial, sans-serif;

  --ps-transition:  0.25s ease;
  --ps-radius:      4px;
  --ps-shadow:      0 2px 16px rgba(44, 44, 44, 0.08);
  --ps-shadow-card: 0 4px 24px rgba(44, 44, 44, 0.10);

  --ps-max-width:   1200px;
  --ps-grid-gap:    32px;
}

/* ── Base & Reset ───────────────────────────────────────────────────────────── */
body {
  background-color: var(--ps-ivory);
  color: var(--ps-text);
  font-family: var(--ps-font-sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.woocommerce-loop-product__title,
.product_title {
  font-family: var(--ps-font-serif);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ps-charcoal);
}

a { color: var(--ps-gold-dark); text-decoration: none; }
a:hover { color: var(--ps-gold); }

img { max-width: 100%; height: auto; }

/* ── Layout ─────────────────────────────────────────────────────────────────── */
.site {
  max-width: var(--ps-max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
.site-header {
  background: var(--ps-ivory);
  border-bottom: 1px solid var(--ps-pearl);
  padding: 20px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-branding .site-title a {
  font-family: var(--ps-font-serif);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--ps-charcoal);
  letter-spacing: 0.05em;
}

.site-branding .site-title a:hover { color: var(--ps-gold-dark); }

.site-description {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ps-mid-grey);
  margin: 0;
}

/* Main navigation */
.main-navigation ul li a {
  font-family: var(--ps-font-sans);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ps-charcoal);
  padding: 8px 14px;
  transition: color var(--ps-transition);
}

.main-navigation ul li a:hover { color: var(--ps-gold-dark); }

/* Cart icon */
.site-header-cart .widget_shopping_cart_content { background: var(--ps-ivory); }

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
button,
.button,
.wc-forward,
input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background-color: var(--ps-charcoal);
  color: #fff;
  border: none;
  border-radius: var(--ps-radius);
  font-family: var(--ps-font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 32px;
  cursor: pointer;
  transition: background-color var(--ps-transition), transform var(--ps-transition);
}

button:hover,
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background-color: var(--ps-gold-dark);
  color: #fff;
  transform: translateY(-1px);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background-color: var(--ps-gold);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background-color: var(--ps-gold-dark);
}

/* ── Product Cards (Archive) ────────────────────────────────────────────────── */
.woocommerce ul.products li.product {
  border: none;
  background: #fff;
  border-radius: var(--ps-radius);
  box-shadow: var(--ps-shadow);
  transition: box-shadow var(--ps-transition), transform var(--ps-transition);
  overflow: hidden;
  padding: 0;
}

.woocommerce ul.products li.product:hover {
  box-shadow: var(--ps-shadow-card);
  transform: translateY(-3px);
}

.woocommerce ul.products li.product img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--ps-font-serif);
  font-size: 0.95rem;
  padding: 16px 16px 4px;
  color: var(--ps-charcoal);
}

.woocommerce ul.products li.product .price {
  font-family: var(--ps-font-sans);
  font-size: 0.95rem;
  color: var(--ps-gold-dark);
  font-weight: 600;
  padding: 0 16px 12px;
}

.woocommerce ul.products li.product .button {
  margin: 0 16px 16px;
  padding: 10px 20px;
  font-size: 0.75rem;
}

/* ── Single Product Page ────────────────────────────────────────────────────── */
.woocommerce div.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ps-grid-gap);
  align-items: start;
}

@media (max-width: 768px) {
  .woocommerce div.product { grid-template-columns: 1fr; }
}

.woocommerce div.product div.images {
  position: sticky;
  top: 100px;
}

.woocommerce div.product div.summary {
  padding: 24px 0;
}

.woocommerce div.product h1.product_title {
  font-size: 1.75rem;
  line-height: 1.3;
  margin-bottom: 8px;
}

.woocommerce div.product p.price {
  font-size: 1.5rem;
  color: var(--ps-gold-dark);
  font-weight: 700;
  margin-bottom: 20px;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 1rem;
  color: var(--ps-warm-grey);
  line-height: 1.8;
  margin-bottom: 24px;
}

/* Product gallery */
.woocommerce-product-gallery {
  border-radius: var(--ps-radius);
  overflow: hidden;
}

.woocommerce-product-gallery__image img {
  border-radius: var(--ps-radius);
}

/* Add to cart area */
.single_add_to_cart_button {
  width: 100%;
  padding: 16px;
  font-size: 0.9rem;
}

/* ── Product Meta Blocks ────────────────────────────────────────────────────── */
.ps-product-meta {
  margin-top: 32px;
  border-top: 1px solid var(--ps-pearl);
  padding-top: 24px;
}

.ps-meta-block {
  margin-bottom: 20px;
}

.ps-meta-block h4 {
  font-family: var(--ps-font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ps-mid-grey);
  margin: 0 0 6px;
  font-weight: 600;
}

.ps-meta-block p, .ps-meta-block ul {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ps-text-muted);
}

/* ── Product Videos ─────────────────────────────────────────────────────────── */
.ps-product-videos {
  margin-top: 32px;
}

.ps-product-videos h3 {
  font-size: 1rem;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.ps-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.ps-video-grid video {
  width: 100%;
  border-radius: var(--ps-radius);
  background: var(--ps-pearl);
}

/* ── Avatar / Lifestyle Image ───────────────────────────────────────────────── */
.ps-avatar-section {
  margin-top: 48px;
  text-align: center;
}

.ps-avatar-section img {
  max-width: 300px;
  border-radius: var(--ps-radius);
  box-shadow: var(--ps-shadow);
}

/* ── Full Description ───────────────────────────────────────────────────────── */
.woocommerce-tabs {
  margin-top: 48px;
}

.woocommerce-tabs .tabs li a {
  font-family: var(--ps-font-sans);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── Related Products ───────────────────────────────────────────────────────── */
.related.products h2,
.up-sells h2 {
  font-size: 1.4rem;
  margin-bottom: 24px;
}

/* ── Homepage Hero ──────────────────────────────────────────────────────────── */
.ps-hero {
  background: linear-gradient(135deg, var(--ps-cream) 0%, var(--ps-ivory) 60%, var(--ps-pearl) 100%);
  padding: 80px 0 60px;
  text-align: center;
}

.ps-hero__eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ps-gold);
  font-weight: 600;
  margin-bottom: 12px;
}

.ps-hero__title {
  font-family: var(--ps-font-serif);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ps-charcoal);
  max-width: 700px;
  margin: 0 auto 20px;
}

.ps-hero__subtitle {
  font-size: 1.1rem;
  color: var(--ps-warm-grey);
  max-width: 520px;
  margin: 0 auto 36px;
  line-height: 1.7;
}

.ps-hero__cta {
  display: inline-block;
  background-color: var(--ps-charcoal);
  color: #fff;
  padding: 16px 40px;
  border-radius: var(--ps-radius);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background-color var(--ps-transition), transform var(--ps-transition);
}

.ps-hero__cta:hover {
  background-color: var(--ps-gold-dark);
  color: #fff;
  transform: translateY(-2px);
}

/* ── Section Headings ───────────────────────────────────────────────────────── */
.ps-section {
  padding: 60px 0;
}

.ps-section__label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ps-gold);
  margin-bottom: 8px;
  font-weight: 600;
}

.ps-section__title {
  font-family: var(--ps-font-serif);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--ps-charcoal);
  margin-bottom: 16px;
}

.ps-section__subtitle {
  font-size: 1rem;
  color: var(--ps-warm-grey);
  max-width: 560px;
  line-height: 1.8;
}

/* ── Craftsmanship / Values Section ────────────────────────────────────────── */
.ps-values {
  background: var(--ps-cream);
  padding: 60px 0;
}

.ps-values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  margin-top: 40px;
}

.ps-value-card {
  text-align: center;
  padding: 24px;
}

.ps-value-card__icon {
  font-size: 2rem;
  margin-bottom: 12px;
}

.ps-value-card__title {
  font-family: var(--ps-font-serif);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--ps-charcoal);
}

.ps-value-card__text {
  font-size: 0.9rem;
  color: var(--ps-warm-grey);
  line-height: 1.7;
}

/* ── Gift Section ───────────────────────────────────────────────────────────── */
.ps-gift-banner {
  background: var(--ps-charcoal);
  color: #fff;
  padding: 60px 40px;
  border-radius: var(--ps-radius);
  text-align: center;
  margin: 60px 0;
}

.ps-gift-banner h2 {
  color: #fff;
  font-family: var(--ps-font-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 12px;
}

.ps-gift-banner p {
  color: var(--ps-sand);
  max-width: 480px;
  margin: 0 auto 28px;
  font-size: 1rem;
  line-height: 1.8;
}

.ps-gift-banner a.button {
  background: var(--ps-gold);
  color: #fff;
}

.ps-gift-banner a.button:hover {
  background: var(--ps-gold-light);
}

/* ── Footer ─────────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--ps-charcoal);
  color: var(--ps-sand);
  padding: 48px 0 24px;
  font-size: 0.85rem;
}

.site-footer a { color: var(--ps-gold-light); }
.site-footer a:hover { color: var(--ps-gold); }

.site-footer .site-info {
  text-align: center;
  color: var(--ps-mid-grey);
  font-size: 0.75rem;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* ── WooCommerce overrides ──────────────────────────────────────────────────── */
.woocommerce-breadcrumb {
  font-size: 0.8rem;
  color: var(--ps-mid-grey);
  margin-bottom: 24px;
}

.woocommerce-breadcrumb a { color: var(--ps-mid-grey); }

.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message {
  border-top-color: var(--ps-gold);
}

.woocommerce .woocommerce-error {
  border-top-color: #c0392b;
}

/* Sale badge */
.woocommerce span.onsale {
  background: var(--ps-gold);
  border-radius: var(--ps-radius);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

/* ── Checkout & Cart ────────────────────────────────────────────────────────── */
.woocommerce-checkout h3,
.woocommerce-cart h2 {
  font-family: var(--ps-font-serif);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  border: 1px solid var(--ps-sand);
  border-radius: var(--ps-radius);
  padding: 12px;
  font-family: var(--ps-font-sans);
  transition: border-color var(--ps-transition);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--ps-gold);
  outline: none;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .ps-hero { padding: 60px 0 40px; }
  .ps-section { padding: 40px 0; }
}

@media (max-width: 640px) {
  :root { --ps-grid-gap: 16px; }
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
  .ps-hero { padding: 40px 0 30px; }
}

@media (max-width: 380px) {
  .woocommerce ul.products { grid-template-columns: 1fr !important; }
}
