/* ============================================================
   NORDEN × Shopify Storefront Web Components
   Styling for shopify-* elements to match NORDEN design system
   ============================================================ */

/* ==================== SHOPIFY STORE WRAPPER ==================== */
shopify-store {
  display: contents;
}

/* ==================== SHOPIFY CONTEXT (transparent for grid/flex layouts) ==================== */
shopify-context {
  display: contents;
}

/* ==================== SHOPIFY MEDIA ==================== */
shopify-media {
  display: block;
  width: 100%;
  height: 100%;
}
shopify-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s ease;
}
.product-card:hover shopify-media img {
  transform: scale(1.07);
}

/* ==================== SHOPIFY CART MODAL ==================== */
shopify-cart {
  --shopify-cart-background: #ffffff;
  --shopify-cart-text-color: #1A1A1A;
}

shopify-cart::part(overlay) {
  background: rgba(26, 26, 26, 0.45);
  backdrop-filter: blur(2px);
}

shopify-cart::part(dialog) {
  border-radius: 0;
  border: none;
  box-shadow: -20px 0 60px rgba(0,0,0,0.12);
  font-family: 'Inter', system-ui, sans-serif;
  max-width: 420px;
  width: 100%;
  right: 0;
  left: auto;
  margin: 0;
  height: 100dvh;
  max-height: 100dvh;
}

shopify-cart::part(header) {
  border-bottom: 1.5px solid #EAE7E1;
  padding: 24px;
  font-weight: 700;
  font-size: 1rem;
  font-family: 'Inter', system-ui, sans-serif;
}

shopify-cart::part(title) {
  font-size: 1.125rem;
  font-weight: 800;
  color: #1A1A1A;
}

shopify-cart::part(close-button) {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid #EAE7E1;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease;
}
shopify-cart::part(close-button):hover {
  background: #F5F5F3;
}

shopify-cart::part(line-item) {
  padding: 16px 24px;
  border-bottom: 1px solid #EAE7E1;
}

shopify-cart::part(line-image) {
  border-radius: 12px;
  overflow: hidden;
  width: 72px;
  height: 72px;
  object-fit: cover;
}

shopify-cart::part(line-title) {
  font-weight: 600;
  font-size: 0.875rem;
  color: #1A1A1A;
  font-family: 'Inter', system-ui, sans-serif;
}

shopify-cart::part(line-price) {
  font-weight: 700;
  font-size: 0.875rem;
  color: #1A1A1A;
}

shopify-cart::part(quantity-button) {
  border: 1.5px solid #EAE7E1;
  border-radius: 8px;
  width: 28px;
  height: 28px;
  background: white;
  color: #1A1A1A;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.2s ease;
}
shopify-cart::part(quantity-button):hover {
  background: #F5F5F3;
}

shopify-cart::part(quantity-input) {
  width: 36px;
  text-align: center;
  font-weight: 700;
  font-size: 0.875rem;
  border: none;
  outline: none;
  background: transparent;
  color: #1A1A1A;
}

shopify-cart::part(footer) {
  border-top: 1.5px solid #EAE7E1;
  padding: 20px 24px;
  background: white;
}

shopify-cart::part(subtotal-label) {
  font-size: 0.875rem;
  color: #888;
  font-family: 'Inter', system-ui, sans-serif;
}

shopify-cart::part(subtotal-price) {
  font-weight: 800;
  font-size: 1.125rem;
  color: #1A1A1A;
  font-family: 'Inter', system-ui, sans-serif;
}

shopify-cart::part(primary-button) {
  background: #6B8F71;
  color: white;
  border: none;
  border-radius: 50px;
  padding: 14px 28px;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  font-family: 'Inter', system-ui, sans-serif;
  transition: background 0.25s ease, transform 0.2s ease;
  margin-top: 12px;
}
shopify-cart::part(primary-button):hover {
  background: #5a7860;
  transform: translateY(-1px);
}

shopify-cart::part(secondary-button) {
  background: transparent;
  color: #1A1A1A;
  border: 1.5px solid #1A1A1A;
  border-radius: 50px;
  padding: 12px 28px;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  font-family: 'Inter', system-ui, sans-serif;
  transition: all 0.25s ease;
  margin-top: 8px;
  fill: #1A1A1A;
}
shopify-cart::part(secondary-button):hover {
  background: #1A1A1A;
  color: white;
  fill: white;
}

shopify-cart::part(remove-button) {
  color: #E85D5D;
  font-size: 0.75rem;
  font-family: 'Inter', system-ui, sans-serif;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

/* ==================== SHOPIFY VARIANT SELECTOR ==================== */
shopify-variant-selector::part(form) {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

shopify-variant-selector::part(label) {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #555;
  margin-bottom: 8px;
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
}

shopify-variant-selector::part(select) {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid #EAE7E1;
  border-radius: 12px;
  font-size: 0.875rem;
  color: #1A1A1A;
  background: white;
  outline: none;
  cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
  appearance: none;
  transition: border-color 0.2s ease;
}
shopify-variant-selector::part(select):focus {
  border-color: #6B8F71;
  box-shadow: 0 0 0 3px rgba(107,143,113,0.12);
}

shopify-variant-selector::part(fieldset) {
  border: none;
  padding: 0;
  margin: 0;
}

shopify-variant-selector::part(swatch) {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #EAE7E1;
  transition: border-color 0.2s ease;
}

shopify-variant-selector::part(swatch-selected) {
  border-color: #6B8F71;
  box-shadow: 0 0 0 2px #6B8F71, 0 0 0 4px white;
}

/* ==================== SHOPIFY MONEY ==================== */
shopify-money {
  font-weight: 700;
  color: #1A1A1A;
  font-family: 'Inter', system-ui, sans-serif;
}

/* ==================== SHOPIFY DATA ==================== */
shopify-data {
  font-family: 'Inter', system-ui, sans-serif;
}

/* ==================== PRODUCT GRID LOADING SKELETON ==================== */
.product-skeleton {
  background: white;
  border-radius: 18px;
  overflow: hidden;
  animation: shimmer 1.5s infinite linear;
  background: linear-gradient(90deg, #F5F5F3 25%, #EAE7E1 50%, #F5F5F3 75%);
  background-size: 200% 100%;
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton-img {
  aspect-ratio: 1;
  background: #EAE7E1;
}
.skeleton-text {
  height: 12px;
  background: #EAE7E1;
  border-radius: 6px;
  margin: 8px 16px;
}
.skeleton-text.short { width: 60%; }

/* ==================== EMPTY COLLECTION STATE ==================== */
.collection-empty {
  text-align: center;
  padding: 64px 24px;
  color: #888;
}
.collection-empty h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1A1A1A;
  margin-bottom: 8px;
}

/* ==================== PRODUCT PAGE DETAIL ==================== */
.norden-product-gallery shopify-media img {
  border-radius: 24px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==================== SHOPIFY MEDIA IN THUMBNAILS ==================== */
.gallery-thumb shopify-media {
  display: block;
  width: 100%;
  height: 100%;
}
.gallery-thumb shopify-media img {
  border-radius: 12px;
  transition: transform 0.4s ease;
}
.gallery-thumb:hover shopify-media img {
  transform: scale(1.06);
}

/* ==================== CART COUNT BADGE ==================== */
#shopify-cart-count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  background: #6B8F71;
  color: white;
  font-size: 10px;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}