/*
Theme Name: Dog Business Hub Guides
Theme URI: https://guides.dogbusinesshub.co.uk
Template: dbh-base
Author: Dog Business Hub
Author URI: https://dogbusinesshub.co.uk
Description: The Dog Business Hub Guides storefront — on-brand product page with Payhip embedded for checkout. Child theme of DBH Base.
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: dbh-guides
*/

/* Inherits design system, header and footer from DBH Base. Guides-only below. */

.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.product-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.product-cover {
  aspect-ratio: 16 / 10;
  background: var(--cream-deep);
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.product-cover svg { width: 100%; height: 100%; display: block; }
.product-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.product-name { font-family: 'Fraunces', serif; font-weight: 600; font-size: 20px; margin-bottom: 6px; }
.product-tagline { font-family: 'Fraunces', serif; font-size: 15px; font-weight: 600; color: var(--teal); margin-bottom: 6px; }
.product-sub { font-size: 13px; color: var(--ink); margin-bottom: 10px; }
.product-desc { font-size: 13px; color: var(--ink-soft); flex: 1; margin-bottom: 16px; }
.product-price { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 600; color: var(--ink); margin-bottom: 14px; }
.product-card.soon { opacity: 0.94; }
.product-card.soon .product-cover { background: var(--cream); opacity: 0.7; }
.product-soon-badge {
  display: inline-block;
  background: var(--cream-deep);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 13px;
  border-radius: var(--radius-pill);
}

/* Payhip buy button — data-theme="none" renders it as a plain link;
   our .btn classes give it the brand styling. */
a.payhip-buy-button { text-decoration: none; }

/* 2-up cross-sell grid */
.cross-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 760px; margin: 0 auto; }

@media (max-width: 980px) {
  .product-grid { grid-template-columns: 1fr 1fr; }
  .cross-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .product-grid { grid-template-columns: 1fr; }
}