/* Shopify SSR Integration – grids.css
   Organized + deduplicated (keeps winning rules)
*/

/* Grid containers */
.shopify-products-grid {
      display: grid;
      max-width: 1366px;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      margin: 0 auto;
      gap: 2rem;
}
.shopify-all-products-grid {
      display: grid;
      gap: 2rem;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.shopify-collections-grid {
      display: grid;
      gap: 2rem;
      grid-template-columns: repeat(auto-fit, minmax(342px, 1fr));
}
.collection-grid {
      display: grid;
      max-width: 1366px;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      margin: 0 auto;
      gap: 2rem;
}
.shopify-single-collection {
      margin: 0 auto;
}
.content-area {
      display: flex;
      flex-direction: column;
      align-items: center;          /* ← centers children horizontally */
      text-align: center;
      max-width: 1366px;
      margin: 0 auto;
}

/* Gutters for SSR collection page (only below 1366px) */
@media (max-width: 1365px) {
.shopify-collections-grid, .shopify-collection-page, .shopify-single-collection, .shopify-single-collection .content-area, div.shopify-products-grid:nth-child(1), .shopify-product-page {
      padding-left: var(--cf-space-xs);
      padding-right: var(--cf-space-xs);
      box-sizing: border-box;
}
}

/* Collection header */
.collection-title {
      margin: 1rem auto;
      display: flex;
      flex-direction: column;
      align-items: center;          /* ← centers children horizontally */
      text-align: center;
      max-width: 1366px;
}
.collection-description {
      margin-bottom: 2rem;
}

/* Product card */
.product-card {
      position: relative;
      border: 1px solid #eee;
      border-radius: 8px;
      overflow: hidden;
      transition: transform 0.3s, box-shadow 0.3s;
      background: #fff;
}
.product-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.product-card a {
      text-decoration: none;
      
      color: inherit;
      display: block;
}
.product-card img {
      width: 100%;
      height: auto;
      display: block;
      transition: transform 0.3s;
}
.product-card:hover img {
      transform: scale(1.05);
}
.product-card h3 {
      
      margin: 0rem;
      color: #333;
      font-weight: 600;
      text-align: center;
}
.product-card .price {
      margin: 0 1rem 1rem;
      text-align: center;
}

/* Responsive */
@media (max-width: 768px) {

.shopify-products-grid {
      grid-template-columns: repeat(auto-fit, minmax(1fr, 1fr));
      gap: 1rem;
}
}

/* Collections cards: allow smaller min width on tiny screens */
@media (max-width: 371px) {
.shopify-collections-grid {
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
}

/* Accessibility helpers (plugin-scoped) */
/* Visible focus for keyboard users */
.shopify-ssr :focus-visible {
      outline: 2px solid currentColor;
      outline-offset: 3px;
}

/* Reduce motion for users who request it */
@media (prefers-reduced-motion: reduce) {
.shopify-ssr * {
      transition: none !important;
      animation: none !important;
      scroll-behavior: auto !important;
}
}