/*
Theme Name:   Jannah Child
Theme URI:    https://sewingers.com
Description:  Jannah Child Theme — Sewingers Custom Product Page
Author:       Sewingers
Template:     jannah
Version:      2.0.0
Text Domain:  jannah-child
*/

/* ============================================================
   VARIABLES
   ============================================================ */
:root {
  --swg-green:       #1a9e6e;
  --swg-green-dk:    #0f7a54;
  --swg-green-lt:    #e8f7f1;
  --swg-green-txt:   #0d6644;
  --swg-amber:       #f59e0b;
  --swg-amber-lt:    #fef3c7;
  --swg-amber-txt:   #92400e;
  --swg-blue-lt:     #eff6ff;
  --swg-blue-txt:    #1d4ed8;
  --swg-red-lt:      #fff1f2;
  --swg-red-txt:     #be123c;
  --swg-border:      #e5e7eb;
  --swg-bg:          #f9fafb;
  --swg-bg2:         #f3f4f6;
  --swg-muted:       #6b7280;
  --swg-text:        #111827;
  --swg-r:           12px;
  --swg-r-sm:        8px;
}

/* ============================================================
   JANNAH — widen content, hide sidebar on product pages
   ============================================================ */
.single-product #content,
.single-product .container,
.single-product .jeg_content,
.single-product .jeg_main,
.single-product #primary,
.single-product .site-content,
.single-product .entry-content,
.single-product .woocommerce {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  float: none !important;
}
.single-product #secondary,
.single-product .widget-area,
.single-product .jeg_sidebar { display: none !important; }
.single-product .jeg_content  { flex: 1 1 100% !important; }

/* ============================================================
   OUTER WRAPPER
   ============================================================ */
.swg-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2.5rem 5rem;
  font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: var(--swg-text);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   BREADCRUMB — hardcoded, no WC function call
   ============================================================ */
.swg-bc {
  padding: 16px 0 20px;
  font-size: 12.5px;
  color: var(--swg-muted);
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
.swg-bc a { color: var(--swg-muted); text-decoration: none; transition: color .15s; }
.swg-bc a:hover { color: var(--swg-green); }
.swg-bc .sep { margin: 0 7px; color: #d1d5db; font-size: 11px; }
.swg-bc .current { color: var(--swg-text); font-weight: 500; }

/* ============================================================
   PRODUCT GRID — 54% / 46%
   ============================================================ */
.swg-grid {
  display: grid;
  grid-template-columns: 54% 1fr;
  gap: 4rem;
  align-items: start;
  margin-bottom: 4.5rem;
}

/* ============================================================
   GALLERY
   ============================================================ */
.swg-main-img-wrap {
  position: relative;
  background: #fff;
  border: 1px solid var(--swg-border);
  border-radius: var(--swg-r);
  overflow: hidden;
  aspect-ratio: 4/3;
}
.swg-main-img-wrap img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 2rem;
  display: block;
  transition: opacity .2s ease;
}
.swg-sale-ribbon {
  position: absolute; top: 16px; left: 16px;
  background: #dc2626; color: #fff;
  font-size: 11px; font-weight: 800;
  padding: 5px 12px; border-radius: 5px;
  letter-spacing: .07em; text-transform: uppercase;
}
.swg-thumbs {
  display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap;
}
.swg-thumb {
  width: 80px; height: 70px;
  background: #fff;
  border: 2px solid var(--swg-border);
  border-radius: var(--swg-r-sm);
  overflow: hidden; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  flex-shrink: 0;
}
.swg-thumb:hover { border-color: var(--swg-green); }
.swg-thumb.active {
  border-color: var(--swg-green);
  box-shadow: 0 0 0 3px rgba(26,158,110,.18);
}
.swg-thumb img {
  width: 100%; height: 100%;
  object-fit: contain; padding: 6px;
}

/* ============================================================
   SUMMARY (sticky right column)
   ============================================================ */
.swg-summary { position: sticky; top: 88px; }

.swg-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.swg-badge {
  font-size: 11px; font-weight: 700;
  padding: 4px 12px; border-radius: 20px;
}
.swg-b-green  { background: var(--swg-green-lt); color: var(--swg-green-txt); }
.swg-b-blue   { background: var(--swg-blue-lt);  color: var(--swg-blue-txt); }
.swg-b-amber  { background: var(--swg-amber-lt); color: var(--swg-amber-txt); }

.swg-brand {
  font-size: 11px; font-weight: 700;
  color: var(--swg-muted); text-transform: uppercase;
  letter-spacing: .12em; margin-bottom: 6px;
}

.swg-title {
  font-size: 24px !important; font-weight: 800 !important;
  line-height: 1.3 !important; color: var(--swg-text) !important;
  margin: 0 0 12px !important; padding: 0 !important; border: none !important;
}

.swg-rating {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 16px; flex-wrap: wrap;
}
.swg-stars  { color: var(--swg-amber); font-size: 15px; letter-spacing: 1.5px; }
.swg-rcount { font-size: 13px; color: var(--swg-muted); }
.swg-rlink  { font-size: 13px; color: var(--swg-green); text-decoration: none; }
.swg-rlink:hover { text-decoration: underline; }

.swg-price-row {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px;
}
.swg-p-now { font-size: 32px; font-weight: 900; color: var(--swg-text); line-height: 1; }
.swg-p-was { font-size: 17px; color: #9ca3af; text-decoration: line-through; }
.swg-p-save {
  display: inline-block;
  font-size: 13px; font-weight: 700;
  color: var(--swg-green-txt);
  background: var(--swg-green-lt);
  padding: 4px 12px; border-radius: 5px; margin-bottom: 16px;
}
.swg-summary .price { display: none !important; }

hr.swg-hr {
  border: none; border-top: 1px solid var(--swg-border); margin: 16px 0;
}

.swg-facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px;
}
.swg-fact {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--swg-bg); border: 1px solid var(--swg-border);
  border-radius: var(--swg-r-sm);
}
.swg-fi  { font-size: 20px; flex-shrink: 0; line-height: 1; }
.swg-ft strong {
  display: block; font-size: 13px; font-weight: 700;
  color: var(--swg-text); line-height: 1.2;
}
.swg-ft span { font-size: 11px; color: var(--swg-muted); }

.swg-stock {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600;
  color: var(--swg-green-txt); margin-bottom: 16px;
}
.swg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.swg-dot-in  { background: var(--swg-green); }
.swg-dot-out { background: #dc2626; }

/* WooCommerce quantity overrides */
.swg-summary form.cart { margin: 0; }
.swg-summary .quantity {
  display: flex !important;
  align-items: center !important;
  border: 1.5px solid var(--swg-border) !important;
  border-radius: var(--swg-r-sm) !important;
  overflow: hidden !important;
  background: #fff !important;
  margin: 0 0 12px !important;
  width: auto !important;
}
.swg-summary .quantity input[type=number] {
  width: 52px !important; text-align: center !important;
  border: none !important; outline: none !important;
  font-size: 15px !important; font-weight: 700 !important;
  padding: 10px 0 !important; background: transparent !important;
  color: var(--swg-text) !important;
  -moz-appearance: textfield !important;
}
.swg-summary .quantity input::-webkit-outer-spin-button,
.swg-summary .quantity input::-webkit-inner-spin-button { -webkit-appearance: none !important; }

/* Add to cart */
.swg-summary .single_add_to_cart_button,
.swg-summary button[type=submit] {
  display: block !important; width: 100% !important;
  padding: 16px 24px !important;
  background: var(--swg-green) !important;
  color: #fff !important; border: none !important;
  border-radius: var(--swg-r-sm) !important;
  font-size: 16px !important; font-weight: 800 !important;
  cursor: pointer !important; letter-spacing: .01em !important;
  transition: background .2s, transform .1s !important;
  margin-bottom: 10px !important; text-align: center !important;
  text-transform: none !important; box-shadow: none !important;
}
.swg-summary .single_add_to_cart_button:hover { background: var(--swg-green-dk) !important; }
.swg-summary .single_add_to_cart_button:active { transform: scale(.98) !important; }

.swg-btn-wish {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 13px;
  background: #fff; border: 1.5px solid var(--swg-border);
  border-radius: var(--swg-r-sm);
  font-size: 14px; font-weight: 600; color: var(--swg-text);
  cursor: pointer; text-decoration: none; margin-bottom: 12px;
  transition: border-color .15s, background .15s;
}
.swg-btn-wish:hover { border-color: var(--swg-green); background: var(--swg-green-lt); color: var(--swg-green-txt); }

.swg-trust {
  display: grid; grid-template-columns: repeat(4,1fr);
  border: 1px solid var(--swg-border);
  border-radius: var(--swg-r-sm); overflow: hidden;
  margin-top: 16px; background: var(--swg-bg);
}
.swg-ti {
  text-align: center; padding: 12px 6px;
  border-right: 1px solid var(--swg-border);
}
.swg-ti:last-child { border-right: none; }
.swg-ti-icon  { font-size: 20px; display: block; margin-bottom: 4px; }
.swg-ti-label { font-size: 10px; color: var(--swg-muted); line-height: 1.4; display: block; font-weight: 500; }

/* ============================================================
   TABS
   ============================================================ */
.swg-tabs { margin-top: 3rem; }
.swg-tab-nav {
  display: flex;
  border-bottom: 2px solid var(--swg-border);
  background: #fff;
  position: sticky; top: 0; z-index: 10;
}
.swg-tab-btn {
  padding: 14px 28px;
  background: none; border: none;
  border-bottom: 3px solid transparent;
  font-size: 14px; font-weight: 700;
  color: var(--swg-muted); cursor: pointer;
  margin-bottom: -2px;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.swg-tab-btn:hover { color: var(--swg-text); }
.swg-tab-btn.active { color: var(--swg-green); border-bottom-color: var(--swg-green); }

.swg-pane { display: none; padding: 2rem 0; }
.swg-pane.active { display: block; }
.swg-pane p, .swg-pane li { font-size: 15px; color: #374151; line-height: 1.8; }
.swg-pane p { margin-bottom: 1rem; }
.swg-pane h2, .swg-pane h3 { font-size: 18px; font-weight: 700; margin: 1.5rem 0 .75rem; }

/* Spec table */
.swg-spec-tbl { width: 100%; border-collapse: collapse; font-size: 14px; border-radius: var(--swg-r); overflow: hidden; }
.swg-spec-tbl tr { border-bottom: 1px solid var(--swg-border); }
.swg-spec-tbl tr:last-child { border-bottom: none; }
.swg-spec-tbl td { padding: 12px 18px; vertical-align: top; }
.swg-spec-tbl td:first-child { color: var(--swg-muted); width: 35%; font-weight: 600; background: var(--swg-bg); }
.swg-spec-tbl tr:nth-child(even) td:first-child { background: var(--swg-bg2); }
.swg-spec-tbl td:last-child { font-weight: 700; color: var(--swg-text); }

/* Pros / Cons */
.swg-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.swg-pros, .swg-cons { padding: 1.5rem; border-radius: var(--swg-r); }
.swg-pros { background: var(--swg-green-lt); border: 1px solid #bbf7d0; }
.swg-cons { background: var(--swg-red-lt);   border: 1px solid #fecdd3; }
.swg-pros h4 { color: var(--swg-green-txt); font-size: 14px; font-weight: 800; margin: 0 0 12px; }
.swg-cons h4 { color: var(--swg-red-txt);   font-size: 14px; font-weight: 800; margin: 0 0 12px; }
.swg-pci { font-size: 13.5px; padding: 5px 0; line-height: 1.4; display: flex; gap: 8px; align-items: flex-start; }
.swg-pros .swg-pci { color: var(--swg-green-txt); }
.swg-cons .swg-pci { color: var(--swg-red-txt); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .swg-grid { grid-template-columns: 1fr; gap: 2rem; }
  .swg-summary { position: static; }
}
@media (max-width: 640px) {
  .swg-wrap { padding: 0 1rem 3rem; }
  .swg-title { font-size: 20px !important; }
  .swg-pc { grid-template-columns: 1fr; }
  .swg-tab-nav { overflow-x: auto; }
  .swg-tab-btn { padding: 12px 16px; font-size: 13px; }
  .swg-trust { grid-template-columns: repeat(2,1fr); }
  .swg-ti:nth-child(2)  { border-right: none; }
  .swg-ti:nth-child(3),
  .swg-ti:nth-child(4)  { border-top: 1px solid var(--swg-border); }
  .swg-ti:nth-child(4)  { border-right: none; }
}
@media (max-width: 420px) {
  .swg-facts { grid-template-columns: 1fr; }
  .swg-p-now { font-size: 26px; }
}