/* =====================================================================
   jdtheme26 - LAYOUT / SPACING SYSTEM (2026-10-02)
   One place for the vertical rhythm of the site: spacing tokens (phone / tablet / desktop values defined ONCE), the
   content-area padding, the spacing of WPBakery elements, and the rows of the product-archive layout.

   RULES
   - Spacing is NEVER stored in the database: no WPBakery Design Options (css=".vc_custom_...{margin...}") and no WoodMart
     responsive spacing (.wd-rs-...). Give the row / column / element a semantic class (el_class) and style it HERE.
   - No !important and no ID-weight hacks in this file. Beat WoodMart with a body class + component class selector.
   - Loaded BEFORE the other jdtheme26 sheets (jd-tablet.css stays last); it only holds rhythm, never colours or fonts.

   BREAKPOINTS (WoodMart's own, so the values reproduce what the pages showed before the cleanup)
     phone   max-width 767.98px
     tablet  max-width 1024.98px  (the theme's breakpoints: phone <=767, tablet 768-1024, desktop >=1025 - same as jd-tablet.css and
             jd-subcats.css, so 1025-1199 gets the desktop header AND the desktop spacing; aligned 2026-10-02 after the tester pass)
     desktop from 1025px
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS - desktop values first, then redefined for tablet and phone
   --------------------------------------------------------------------- */
:root {
  /* scale */
  --jd-space-xs: 10px;
  --jd-space-s: 15px;
  --jd-space-m: 20px;
  --jd-space-l: 40px;
  --jd-space-section: 60px;                 /* big sections of the home page: padding above and below (jd-home-sections.css) */

  /* content area (the box between the header and the footer) */
  --jd-content-pad-bottom: 70px;            /* pages, posts, cart, checkout, account: space above the footer's pink curve */
  --jd-content-pad-top-phone: 10px;         /* phones: every page except the home page */

  /* product archive layout (woodmart_layout "Products archive - JUST DOG"), rows tagged with the jd-archive-* classes */
  --jd-archive-bar-mt: 0px;                 /* row 1: category bar */
  --jd-archive-bar-mb: var(--jd-space-l);
  --jd-archive-main-pt: var(--jd-space-s);  /* row 2: breadcrumb + title column */
  --jd-archive-head-mb: var(--jd-space-xs); /* row 2: inner row holding breadcrumb + title */
  --jd-archive-sep-mb: var(--jd-space-m);   /* thin line under the title (shown below 1200px) */
  --jd-archive-filters-mb: var(--jd-space-s);

  /* footer block */
  --jd-footer-logo-mb: var(--jd-space-m);
}
@media (max-width: 1024.98px) {
  :root {
    --jd-archive-bar-mt: 0px;               /* phones + tablets: the bar starts right under the header (it used to hide under it) */
    --jd-archive-bar-mb: var(--jd-space-m);
    --jd-archive-head-mb: 0px;
  }
  /* /shop/ on phones + tablets: the pinned category bar leaves no gap under it */
  body.jd-shop-all { --jd-archive-bar-mb: 0px; }
}

/* ---------------------------------------------------------------------
   2. CONTENT AREA padding (.main-page-wrapper > .wd-content-layout)
   WoodMart's own padding (40 / 40, 20 / 20 on product pages at tablet) stays unless a rule below says otherwise.
   --------------------------------------------------------------------- */
/* every normal page and blog post (incl. cart, checkout, account, bestseller): 70px above the footer's pink curve */
body:not(.home):is(.page, .single-post) .main-page-wrapper > .wd-content-layout { padding-bottom: var(--jd-content-pad-bottom); }

/* home page and about page: the first block starts right under the header */
body.home .wd-content-layout.content-layout-wrapper { padding-top: 0; }
@media (min-width: 768px) {
  body.jd-page-about .wd-content-layout.content-layout-wrapper { padding-top: 0; }
}

/* logged-in account pages on tablets: content first, 20px under the header (no page banner) */
@media (min-width: 768px) and (max-width: 1024px) {
  body.woocommerce-account.logged-in .main-page-wrapper > .wd-content-layout { padding-top: 20px; }
}

/* a page that ENDS with a full-width coloured band keeps 0 below, so the band meets the footer (see jd-footer.css) */
body:not(.home):has(.entry-content .wpb-content-wrapper > .vc_row[data-vc-full-width]:nth-last-child(2) :is(.paper-band, [class*="__bg"])) .main-page-wrapper > .wd-content-layout,
body:not(.home):has(.entry-content .wpb-content-wrapper > .vc_row.jd-band-last:nth-last-child(2)) .main-page-wrapper > .wd-content-layout { padding-bottom: 0; }

/* phones: 10px above and 70px below on EVERY page except the home page (whose last band meets the footer curve) */
@media (max-width: 767.98px) {
  body:not(.home) .main-page-wrapper > .wd-content-layout.wd-content-layout { padding-block: var(--jd-content-pad-top-phone) var(--jd-content-pad-bottom); }
  body:not(.home):has(.entry-content .wpb-content-wrapper > .vc_row[data-vc-full-width]:nth-last-child(2) :is(.paper-band, [class*="__bg"])) .main-page-wrapper > .wd-content-layout.wd-content-layout,
  body:not(.home):has(.entry-content .wpb-content-wrapper > .vc_row.jd-band-last:nth-last-child(2)) .main-page-wrapper > .wd-content-layout.wd-content-layout { padding-bottom: 0; }
}

/* ---------------------------------------------------------------------
   3. WPBakery / WoodMart elements (.wd-wpb): phones carry no bottom margin of their own (WoodMart's default is 30px)
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  body .wd-wpb.wd-wpb { margin-bottom: 0; }
}

/* ---------------------------------------------------------------------
   4. PRODUCT ARCHIVE LAYOUT rows (classes set as el_class in the layout post)
   --------------------------------------------------------------------- */
.vc_row.jd-archive-catnav { margin-top: var(--jd-archive-bar-mt); margin-bottom: var(--jd-archive-bar-mb); }
.jd-archive-main > .vc_column-inner { padding-top: var(--jd-archive-main-pt); }
.vc_row.jd-archive-head { margin-bottom: var(--jd-archive-head-mb); }
.jd-archive-crumb > .vc_column-inner { padding-top: 0; }
.vc_separator.jd-archive-sep { margin-bottom: var(--jd-archive-sep-mb); }
/* the active-filters element has no class option: styled through its WoodMart class (this selector outweighs the phone rule of section 3) */
.jd-archive-main .wd-shop-active-filters.wd-wpb { margin-bottom: var(--jd-archive-filters-mb); }

/* ---------------------------------------------------------------------
   5. HOME PAGE rows (el_class in the home page post)
   --------------------------------------------------------------------- */
/* the row that holds the hero slider: no space under it */
body.home .vc_row.jd-home-hero-row { margin-bottom: 0; }
/* the last row (wave divider into the footer): pink colour layer, pulled 40px over the footer's curve */
body.home .vc_row.jd-home-end-row { margin-bottom: calc(-1 * var(--jd-space-l)); background-color: var(--jd-footer-bg); }   /* last home row meets the footer: same pink */

/* ---------------------------------------------------------------------
   6. FOOTER block (cms block "Footer 1 column Dark")
   --------------------------------------------------------------------- */
body .jd-footer-logo.jd-footer-logo { margin-bottom: var(--jd-footer-logo-mb); }