/* XShop Layout — header, footer, grid, sections. Logical properties only. */

/* Header */
.xshop-header { position: sticky; inset-block-start: 0; z-index: var(--xshop-z-header); background: var(--xshop-card); border-block-end: 1px solid var(--xshop-border); }
.xshop-header__inner { display: flex; align-items: center; gap: var(--xshop-space-4); padding-block: var(--xshop-space-3); flex-wrap: wrap; }
.xshop-header__branding { display: flex; align-items: center; gap: var(--xshop-space-3); flex-shrink: 0; }
.xshop-header__logo img { max-block-size: 40px; inline-size: auto; }
.xshop-header__title { font-size: var(--xshop-text-xl); font-weight: var(--xshop-weight-bold); margin: 0; }
.xshop-header__title a { color: var(--xshop-text); }
.xshop-header__tagline { font-size: var(--xshop-text-sm); color: var(--xshop-muted); margin: 0; }
.xshop-header__nav { flex: 1 1 auto; display: flex; justify-content: center; }
.xshop-header__actions { display: flex; align-items: center; gap: var(--xshop-space-2); flex-shrink: 0; }
.xshop-header__action-btn { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 40px; min-block-size: 40px; border: 1px solid var(--xshop-border); border-radius: var(--xshop-radius-sm); background: var(--xshop-card); color: var(--xshop-text); cursor: pointer; }
.xshop-header__action-btn:hover { background: var(--xshop-surface); }
.xshop-header__search { position: relative; }
.xshop-header__search-form { display: flex; gap: var(--xshop-space-2); }

/* Primary nav */
.xshop-nav { display: flex; }
.xshop-nav__list { display: flex; flex-wrap: wrap; gap: var(--xshop-space-1); list-style: none; margin: 0; padding: 0; align-items: center; }
.xshop-nav__list a { display: block; padding: var(--xshop-space-2) var(--xshop-space-3); color: var(--xshop-text); border-radius: var(--xshop-radius-sm); font-weight: var(--xshop-weight-medium); font-size: var(--xshop-text-sm); }
.xshop-nav__list a:hover, .xshop-nav__list a:focus-visible { background: var(--xshop-surface); color: var(--xshop-text); }
.xshop-nav__list .current-menu-item > a, .xshop-nav__list .current_page_item > a { background: var(--xshop-surface-2); }

/* Mobile nav */
.xshop-mobile-toggle { display: none; align-items: center; justify-content: center; inline-size: 40px; block-size: 40px; border: 1px solid var(--xshop-border); border-radius: var(--xshop-radius-sm); background: var(--xshop-card); cursor: pointer; color: var(--xshop-text); }
.xshop-mobile-nav { display: none; border-block-start: 1px solid var(--xshop-border); padding-block: var(--xshop-space-3); }
.xshop-mobile-nav.is-open { display: block; }
.xshop-mobile-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.xshop-mobile-nav__list a { display: block; padding: var(--xshop-space-2) var(--xshop-space-3); color: var(--xshop-text); border-radius: var(--xshop-radius-sm); }
.xshop-mobile-nav__list a:hover { background: var(--xshop-surface); }

@media (max-width: 1024px) {
  .xshop-nav--desktop { display: none; }
  .xshop-mobile-toggle { display: inline-flex; }
  .xshop-header__search--desktop { display: none; }
}

/* Footer */
.xshop-footer { background: var(--xshop-surface); border-block-start: 1px solid var(--xshop-border); margin-block-start: var(--xshop-space-12); padding-block: var(--xshop-space-8) var(--xshop-space-6); }
.xshop-footer__widgets { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--xshop-space-6); margin-block-end: var(--xshop-space-8); }
.xshop-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--xshop-space-4); border-block-start: 1px solid var(--xshop-border); padding-block-start: var(--xshop-space-4); font-size: var(--xshop-text-sm); color: var(--xshop-muted); }
.xshop-footer__nav-list { display: flex; flex-wrap: wrap; gap: var(--xshop-space-3); list-style: none; margin: 0; padding: 0; }
.xshop-footer__nav-list a { color: var(--xshop-muted); }
.xshop-footer__nav-list a:hover { color: var(--xshop-text); }
@media (max-width: 768px) {
  .xshop-footer__widgets { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .xshop-footer__widgets { grid-template-columns: 1fr; }
  .xshop-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* Main layout */
.xshop-main { padding-block: var(--xshop-space-8); }
.xshop-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--xshop-space-8); align-items: start; }
.xshop-layout--no-sidebar { grid-template-columns: 1fr; }
.xshop-layout__content { min-inline-size: 0; }
.xshop-layout__sidebar { position: sticky; inset-block-start: calc(60px + var(--xshop-space-4)); }
@media (max-width: 1024px) {
  .xshop-layout { grid-template-columns: 1fr; }
  .xshop-layout__sidebar { position: static; }
}

/* Grids */
.xshop-grid { display: grid; gap: var(--xshop-space-4); }
.xshop-grid--posts { grid-template-columns: repeat(3, 1fr); }
.xshop-grid--products { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .xshop-grid--posts, .xshop-grid--products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .xshop-grid--posts, .xshop-grid--products { grid-template-columns: 1fr; } }

/* Section */
.xshop-section { padding-block: var(--xshop-space-8); }
.xshop-section__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--xshop-space-4); margin-block-end: var(--xshop-space-6); flex-wrap: wrap; }
.xshop-section__title { font-size: var(--xshop-text-2xl); margin: 0; }
.xshop-section__link { font-size: var(--xshop-text-sm); font-weight: var(--xshop-weight-medium); }

/* Hero foundation */
.xshop-hero { background: var(--xshop-surface); border: 1px solid var(--xshop-border); border-radius: var(--xshop-radius-lg); padding: var(--xshop-space-8); display: grid; gap: var(--xshop-space-4); }
.xshop-hero__title { font-size: var(--xshop-text-4xl); margin: 0; }
.xshop-hero__text { color: var(--xshop-muted); max-inline-size: 60ch; }
.xshop-hero__actions { display: flex; gap: var(--xshop-space-3); flex-wrap: wrap; }