/*
Theme Name: Planted Aquarium
Theme URI: https://plantedaquarium.net
Description: Custom child theme for Planted Aquarium store.
Author: Planted Aquarium
Template: storefront
Version: 1.5.0
Text Domain: plantedaquarium
*/

/* ==========================================================================
   FONT: Cairo (Arabic + Latin), self-hosted. License: SIL OFL (assets/fonts).
   Storefront's own font (Source Sans Pro) has no Arabic letters, so the
   browser used to pick a different system font for Arabic on every device.
   ========================================================================== */

@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("assets/fonts/cairo-arabic-wght-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("assets/fonts/cairo-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   BRAND TOKENS
   Taken from the logo: deep navy panel, neon green icon/text, teal betta fish,
   grey ring. Change a color here and it changes across the whole site.
   ========================================================================== */

:root {
  --pa-bg:          #0a0e1a;  /* page background */
  --pa-surface:     #0e1730;  /* header, cards, forms */
  --pa-surface-2:   #142046;  /* raised elements, hover */
  --pa-border:      #24325a;
  --pa-ring:        #586068;  /* grey ring of the logo */

  --pa-green:       #7be780;  /* main accent (logo icon and text) */
  --pa-green-hover: #a6f2a9;
  --pa-green-ink:   #08112e;  /* text on top of green buttons */
  --pa-teal:        #6fb3b8;  /* secondary accent (betta fish) */

  --pa-text:        #e8eef5;
  --pa-muted:       #a3b1c6;

  --pa-warn-bg:     #2a2208;
  --pa-warn-border: #6b5416;
  --pa-warn-text:   #f2d98a;
  --pa-warn-accent: #d9a21b;

  --pa-radius:      10px;

  --pa-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  --pa-icon-cart:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2 3h3l2.7 12.4a2 2 0 0 0 2 1.6h8.3a2 2 0 0 0 2-1.5L21.5 8H6'/%3E%3C/svg%3E");

  --pa-font: "Cairo", "Segoe UI", Tahoma, "Noto Sans Arabic", system-ui, sans-serif;
}

/* ==========================================================================
   GLOBAL
   ========================================================================== */

html {
  color-scheme: dark;
}

body,
.site,
.site-content,
#content {
  background: var(--pa-bg);
  color: var(--pa-text);
}

/* One font for everything, Arabic and Latin */
body,
button,
input,
select,
textarea,
optgroup,
h1, h2, h3, h4, h5, h6,
.site-title,
.main-navigation ul li a,
.price,
.button {
  font-family: var(--pa-font);
}

body {
  line-height: 1.8;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--pa-text);
  line-height: 1.5;
  font-weight: 700;
}

/* Letter-spacing breaks the joining of Arabic letters: keep it at zero */
html[lang^="ar"] body,
html[lang^="ar"] body * {
  letter-spacing: 0;
}

a {
  color: var(--pa-green);
  transition: color .2s ease, background-color .2s ease;
}

a:hover,
a:focus {
  color: var(--pa-green-hover);
}

hr {
  border-color: var(--pa-border);
}

::selection {
  background: var(--pa-green);
  color: var(--pa-green-ink);
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select,
.input-text {
  background: var(--pa-surface);
  color: var(--pa-text);
  border: 1px solid var(--pa-border);
  border-radius: 8px;
  box-shadow: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--pa-muted);
}

input:focus,
textarea:focus,
select:focus {
  background: var(--pa-surface-2);
  color: var(--pa-text);
  border-color: var(--pa-green);
  outline: 2px solid rgba(123, 231, 128, .25);
}

/* Buttons */
.wp-block-button__link,
.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.added_to_cart {
  background: var(--pa-surface-2);
  color: var(--pa-text);
  border: 1px solid var(--pa-border);
  border-radius: 8px;
}

.wp-block-button__link:hover,
.button:hover,
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.added_to_cart:hover {
  background: var(--pa-border);
  color: var(--pa-text);
}

/* Primary actions: add to cart, checkout, place order */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
button.single_add_to_cart_button,
.button.checkout-button,
#place_order {
  background: var(--pa-green);
  color: var(--pa-green-ink);
  border-color: var(--pa-green);
  font-weight: 700;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
button.single_add_to_cart_button:hover,
.button.checkout-button:hover,
#place_order:hover {
  background: var(--pa-green-hover);
  color: var(--pa-green-ink);
  border-color: var(--pa-green-hover);
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header {
  background: var(--pa-surface) !important;
  color: var(--pa-text) !important;
  border-bottom: 1px solid var(--pa-border);
  padding-top: 18px;
  padding-bottom: 0;
}

body.home .site-header {
  margin-bottom: 0 !important;
}

/* Logo: shown in place of the site title (the title text stays for screen
   readers and search engines). If a custom logo is set in the Customizer,
   Storefront prints an <img> instead and these rules do nothing. */
.site-header .site-branding .site-title a {
  display: block;
  font-size: 0;
  line-height: 0;
}

.site-header .site-branding .site-title a::before {
  content: "";
  display: block;
  width: 72px;
  height: 72px;
  background: url("assets/img/logo.png") center / contain no-repeat;
}

.site-header .site-description {
  color: var(--pa-muted);
  font-size: 13px;
}

/* Search: pill-shaped field with a round green button */
.site-header .site-search .widget_product_search form {
  position: relative;
  margin: 0;
}

.site-header .site-search form::before {
  display: none;
}

.site-header .site-search input[type="search"] {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  min-height: 48px;
  padding-block: 0;
  padding-inline: 20px 58px;
  background: var(--pa-bg) !important;
  border: 1px solid var(--pa-border);
  border-radius: 999px;
}

.site-header .site-search .widget_product_search form button[type="submit"] {
  clip: auto;
  clip-path: none;
  overflow: visible;
  position: absolute;
  top: 4px;
  right: auto;
  left: auto;
  inset-inline-end: 4px;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pa-green);
  font-size: 0;
  line-height: 0;
  cursor: pointer;
}

.site-header .site-search .widget_product_search form button[type="submit"]:hover {
  background: var(--pa-green-hover);
}

.site-header .site-search .widget_product_search form button[type="submit"]::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 auto;
  background: var(--pa-green-ink);
  -webkit-mask: var(--pa-icon-search) center / contain no-repeat;
  mask: var(--pa-icon-search) center / contain no-repeat;
}

.storefront-primary-navigation {
  background: var(--pa-bg) !important;
  border-top: 1px solid var(--pa-border);
}

.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a,
.site-header-cart .cart-contents {
  color: var(--pa-text);
  font-weight: 600;
}

.main-navigation ul.menu > li > a:hover,
.main-navigation ul.nav-menu > li > a:hover,
.main-navigation ul.menu > li.current-menu-item > a,
.main-navigation ul.nav-menu > li.current-menu-item > a,
.site-header-cart .cart-contents:hover {
  color: var(--pa-green) !important;
}

.main-navigation ul.menu ul.sub-menu,
.main-navigation ul.nav-menu ul.sub-menu,
.main-navigation ul.nav-menu ul.children {
  background: var(--pa-surface) !important;
  border: 1px solid var(--pa-border);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
  min-width: 230px;
  max-height: 360px;
  overflow-y: auto;
}

.main-navigation ul.menu ul.sub-menu a,
.main-navigation ul.nav-menu ul.sub-menu a,
.main-navigation ul.nav-menu ul.children a {
  color: var(--pa-text) !important;
  padding: 10px 14px;
  border-radius: 8px;
}

.main-navigation ul.menu ul.sub-menu,
.main-navigation ul.nav-menu ul.sub-menu,
.main-navigation ul.nav-menu ul.children {
  padding: 8px;
  border-radius: 12px;
}

.main-navigation ul.menu ul.sub-menu a:hover,
.main-navigation ul.nav-menu ul.sub-menu a:hover {
  background: var(--pa-surface-2);
  color: var(--pa-green);
}

/* Cart: pill with an icon, item count and total */
.site-header-cart .cart-contents {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: auto !important;
  height: 44px;
  padding: 0 16px !important;
  background: var(--pa-surface-2);
  border: 1px solid var(--pa-border);
  border-radius: 999px;
  white-space: nowrap;
}

.site-header-cart .cart-contents:hover {
  background: var(--pa-border);
}

/* Storefront's own cart icon is replaced by ours */
.site-header-cart .cart-contents::after {
  content: none !important;
}

.site-header-cart .cart-contents::before {
  content: "";
  display: block;
  order: 0;
  width: 20px;
  height: 20px;
  background: var(--pa-green);
  -webkit-mask: var(--pa-icon-cart) center / contain no-repeat;
  mask: var(--pa-icon-cart) center / contain no-repeat;
}

.site-header-cart .cart-contents .count {
  order: 1;
  margin: 0;
  color: var(--pa-text);
  font-size: 14px;
  font-weight: 700;
  opacity: 1;
}

.site-header-cart .cart-contents .amount {
  order: 2;
  padding-inline-start: 10px;
  border-inline-start: 1px solid var(--pa-border);
  color: var(--pa-green);
  font-size: 14px;
}

/* Mini cart dropdown */
.site-header-cart .widget_shopping_cart,
.site-header-cart .widget_shopping_cart p.buttons {
  background: var(--pa-surface);
  color: var(--pa-text);
  border-color: var(--pa-border);
}

/* ----- Desktop ----- */

@media (min-width: 768px) {
  /* Row 1: logo + wide search. Row 2: menu + cart. */
  .site-header > .col-full {
    display: flex;
    align-items: center;
    gap: 28px;
  }

  .site-header > .col-full::before,
  .site-header > .col-full::after,
  .storefront-primary-navigation > .col-full::before,
  .storefront-primary-navigation > .col-full::after {
    display: none;
  }

  .site-header .site-branding,
  .woocommerce-active .site-header .site-branding {
    flex: 0 0 auto;
    width: auto;
    margin: 0 0 12px;
  }

  .woocommerce-active .site-header .site-search {
    flex: 1 1 auto;
    width: auto;
    max-width: 720px;
    float: none;
    margin: 0 0 12px;
  }

  .storefront-primary-navigation {
    min-height: 60px;
  }

  .storefront-primary-navigation > .col-full {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .woocommerce-active .site-header .main-navigation {
    flex: 1 1 auto;
    width: auto;
    float: none;
    margin: 0;
  }

  .storefront-primary-navigation .main-navigation ul.menu > li > a,
  .storefront-primary-navigation .main-navigation ul.nav-menu > li > a {
    padding: 18px 16px;
    box-shadow: inset 0 -3px 0 transparent;
  }

  .storefront-primary-navigation .main-navigation ul.menu > li:hover > a,
  .storefront-primary-navigation .main-navigation ul.nav-menu > li:hover > a,
  .storefront-primary-navigation .main-navigation ul.menu > li.current-menu-item > a,
  .storefront-primary-navigation .main-navigation ul.nav-menu > li.current-menu-item > a {
    box-shadow: inset 0 -3px 0 var(--pa-green);
  }

  .woocommerce-active .site-header .site-header-cart {
    flex: 0 0 auto;
    float: none;
    width: auto !important;
    min-width: 0 !important;
    margin: 0;
  }

  .site-header-cart > li:first-child {
    display: flex;
    align-items: center;
    height: 60px;
    margin: 0;
  }

  /* Homepage: no gap between header and hero */
  body.home .site-content,
  body.home .site-content > .col-full {
    padding-top: 0;
  }

  body.home .site-main,
  body.home article.hentry,
  body.home .entry-content,
  body.home .pa-home {
    margin-top: 0;
    padding-top: 0;
  }

  body.home .site-main {
    margin-bottom: 0;
  }
}

/* ----- Mobile ----- */

@media (max-width: 767px) {
  .site-header {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  body.home .site-content {
    padding-top: 0 !important;
  }

  .site-header .site-branding {
    width: 58%;
    margin-bottom: 0;
  }

  .site-header .site-branding .site-title a::before {
    width: 56px;
    height: 56px;
  }

  .main-navigation {
    width: 100%;
  }

  /* Menu button: full-width bar. The label comes from the Arabic dictionary
     (inc/arabic.php); Storefront draws the hamburger bars with ::before/::after. */
  .site-header .main-navigation button.menu-toggle {
    float: none;
    display: block;
    width: 100%;
    max-width: none;
    min-height: 44px;
    margin: 0;
    padding: 10px 44px 10px 16px;
    background: var(--pa-surface-2);
    color: var(--pa-text);
    border: 1px solid var(--pa-border);
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    text-align: right;
  }

  .site-header .main-navigation button.menu-toggle::before,
  .site-header .main-navigation button.menu-toggle::after,
  .site-header .main-navigation button.menu-toggle span::before {
    background: var(--pa-green);
  }

  .site-header .main-navigation button.menu-toggle:hover,
  .site-header .main-navigation button.menu-toggle:focus {
    background: var(--pa-surface-2);
    color: var(--pa-green);
  }

  .storefront-primary-navigation {
    padding: 10px 0;
  }

  /* Opened menu: only the primary list is shown, full width */
  .main-navigation ul.menu:not(.nav-menu) {
    display: none !important;
  }

  .main-navigation.toggled ul.nav-menu {
    display: block !important;
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    overflow: visible !important;
    background: var(--pa-surface) !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
  }

  .main-navigation.toggled ul.nav-menu > li {
    display: block !important;
    width: 100% !important;
  }

  .main-navigation.toggled ul.nav-menu a {
    display: block !important;
    width: 100%;
    box-sizing: border-box;
    background: var(--pa-surface) !important;
    padding: 12px 16px !important;
    text-align: right !important;
    font-size: 14px !important;
  }

  .main-navigation.toggled ul.nav-menu .sub-menu {
    display: block !important;
    width: 100% !important;
    position: static !important;
    background: var(--pa-bg) !important;
    box-shadow: none;
  }

  /* Menu text color: Storefront and other rules keep overriding it */
  body .site-header .main-navigation ul li a,
  body .site-header .main-navigation ul li a:visited {
    color: var(--pa-text) !important;
    -webkit-text-fill-color: var(--pa-text) !important;
  }

  body .site-header .main-navigation ul li a:hover {
    color: var(--pa-green) !important;
    -webkit-text-fill-color: var(--pa-green) !important;
  }

  /* Storefront's bottom bar on phones */
  .storefront-handheld-footer-bar,
  .storefront-handheld-footer-bar ul li > a {
    background: var(--pa-surface);
    color: var(--pa-text);
    border-color: var(--pa-border);
  }
}

/* ==========================================================================
   SHOP LAYOUT
   ========================================================================== */

/* Hide Storefront sidebar on WooCommerce pages, content gets full width */
body.woocommerce-page #secondary {
  display: none !important;
}

body.woocommerce-page #primary {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

.storefront-breadcrumb,
.woocommerce-breadcrumb {
  color: var(--pa-muted);
  border-color: var(--pa-border);
  background: transparent;
}

.woocommerce-breadcrumb a {
  color: var(--pa-teal);
}

/* Product cards */
ul.products li.product {
  background: var(--pa-surface);
  border: 1px solid var(--pa-border);
  border-radius: 14px;
  padding: 14px;
  transition: transform .2s ease, border-color .2s ease;
}

ul.products li.product:hover {
  transform: translateY(-3px);
  border-color: var(--pa-green);
}

ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2,
ul.products li.product h3 {
  color: var(--pa-text);
}

.price,
.price ins,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
ul.products li.product .price {
  color: var(--pa-green);
}

.price del {
  color: var(--pa-muted);
}

.onsale {
  background: var(--pa-green);
  color: var(--pa-green-ink);
  border: 0;
}

.woocommerce-result-count,
.woocommerce-ordering select {
  color: var(--pa-muted);
}

/* Product tabs */
.woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: var(--pa-surface);
  border-color: var(--pa-border);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  color: var(--pa-muted);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: var(--pa-surface-2);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--pa-green);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  border-color: var(--pa-border);
  box-shadow: none;
}

/* Pagination and widgets */
.woocommerce-pagination .page-numbers li .page-numbers,
.widget {
  color: var(--pa-text);
  border-color: var(--pa-border);
}

.woocommerce-pagination .page-numbers li .page-numbers.current,
.woocommerce-pagination .page-numbers li .page-numbers:hover {
  background: var(--pa-green);
  color: var(--pa-green-ink);
}

/* ==========================================================================
   PRODUCT PAGE (care level, CO2, light, live-product notice)
   ========================================================================== */

.pa-product-facts {
  list-style: none;
  margin: 0 0 1.25em;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pa-fact {
  display: inline-flex;
  flex-direction: column;
  min-width: 110px;
  padding: 10px 14px;
  background: var(--pa-surface);
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius);
  line-height: 1.4;
}

.pa-fact__label {
  font-size: 12px;
  color: var(--pa-muted);
}

.pa-fact__value {
  font-size: 15px;
  color: var(--pa-green);
}

/* Warmer tone for the demanding values */
.pa-fact--pa_care_level.pa-fact--advanced .pa-fact__value,
.pa-fact--pa_co2.pa-fact--yes .pa-fact__value {
  color: var(--pa-warn-accent);
}

.pa-live-notice {
  margin: 1em 0;
  padding: 12px 14px;
  background: var(--pa-warn-bg);
  border: 1px solid var(--pa-warn-border);
  border-inline-start: 4px solid var(--pa-warn-accent);
  border-radius: 8px;
  color: var(--pa-warn-text);
  font-size: 14px;
}

/* ==========================================================================
   CART AND CHECKOUT
   ========================================================================== */

.woocommerce table.shop_table,
.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.woocommerce-cart table.cart td,
.woocommerce-cart table.cart th {
  background: transparent;
  color: var(--pa-text);
  border-color: var(--pa-border);
}

.woocommerce-checkout #payment,
.woocommerce-checkout #payment .payment_box,
.woocommerce-checkout #order_review,
.cart_totals {
  background: var(--pa-surface);
  color: var(--pa-text);
  border-color: var(--pa-border);
  border-radius: var(--pa-radius);
}

.woocommerce-checkout #payment .payment_box::before {
  border-bottom-color: var(--pa-surface);
}

.woocommerce-checkout #payment ul.payment_methods {
  border-color: var(--pa-border);
}

/* Store notices */
.woocommerce-info,
.woocommerce-message,
.woocommerce-noreviews,
p.no-comments {
  background: var(--pa-surface);
  color: var(--pa-text);
  border-color: var(--pa-border);
  border-inline-start: 4px solid var(--pa-teal);
}

.woocommerce-message {
  border-inline-start-color: var(--pa-green);
}

.woocommerce-error {
  background: #2a0f16;
  color: #ffc9d1;
  border-color: #6b1f2c;
}

.woocommerce-info a,
.woocommerce-message a {
  color: var(--pa-green);
}

/* Comfortable tap targets for checkout fields */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  min-height: 44px;
  border-radius: 8px;
}

@media (max-width: 767px) {
  .woocommerce-checkout #place_order,
  .woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    display: block;
    width: 100%;
    min-height: 48px;
    font-size: 16px;
  }
}

/* ==========================================================================
   HOMEPAGE
   ========================================================================== */

.home .entry-title {
  display: none;
}

.home .entry-content {
  margin-top: 0;
}

.home .entry-content > .wp-block-group:first-child {
  border-radius: 16px;
  margin-bottom: 35px;
}

.home .wp-block-columns {
  gap: 22px;
  margin-bottom: 25px;
}

.home .wp-block-column {
  background: var(--pa-surface);
  border: 1px solid var(--pa-border);
  border-radius: 14px;
  padding: 26px 22px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.home .wp-block-column:hover {
  transform: translateY(-3px);
  border-color: var(--pa-green);
  box-shadow: 0 10px 25px rgba(0, 0, 0, .4);
}

.home .wp-block-column h3 {
  font-size: 1.25rem;
  margin-bottom: 12px;
}

.home .wp-block-column h3 a {
  color: var(--pa-text);
  text-decoration: none;
}

.home .wp-block-column h3 a:hover {
  color: var(--pa-green);
}

.home .wp-block-column p {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .home .entry-content > .wp-block-group:first-child {
    padding: 32px 18px;
  }

  .home .wp-block-columns {
    gap: 14px;
  }

  .home .wp-block-column {
    padding: 20px 18px;
  }

  .home h1 {
    font-size: 1.9rem;
  }
}

/* Custom homepage (.pa-home) */
.pa-home {
  direction: rtl;
  color: var(--pa-text);
}

.pa-home .pa-hero {
  min-height: 390px;
  display: flex;
  align-items: center;
  padding: 65px 8%;
  background: linear-gradient(115deg, #08112e, #0f2a3d 60%, #14503f);
  border: 1px solid var(--pa-border);
  border-radius: 18px;
  color: var(--pa-text);
}

.pa-home .pa-hero-content {
  max-width: 650px;
}

.pa-home .pa-eyebrow,
.pa-home .pa-section-heading span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--pa-green);
}

.pa-home .pa-hero h1 {
  color: var(--pa-text);
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.4;
  margin: 18px 0;
}

.pa-home .pa-hero p {
  color: var(--pa-muted);
  font-size: 18px;
  line-height: 1.9;
}

.pa-home .pa-btn {
  display: inline-block;
  background: var(--pa-green);
  color: var(--pa-green-ink);
  padding: 13px 27px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  margin-top: 16px;
}

.pa-home .pa-btn:hover {
  background: var(--pa-green-hover);
  color: var(--pa-green-ink);
}

.pa-home .pa-home-section {
  padding: 65px 0 30px;
}

.pa-home .pa-section-heading {
  text-align: center;
  margin-bottom: 30px;
}

.pa-home .pa-section-heading h2 {
  font-size: clamp(25px, 3vw, 36px);
  margin: 10px 0;
}

.pa-home .pa-section-heading p {
  color: var(--pa-muted);
}

.pa-home .pa-center {
  text-align: center;
  margin-top: 25px;
}

.pa-home .pa-btn-outline {
  background: transparent;
  border: 1px solid var(--pa-green);
  color: var(--pa-green);
}

.pa-home .pa-btn-outline:hover {
  background: var(--pa-green);
  color: var(--pa-green-ink);
}

.pa-home .pa-home-footer {
  background: var(--pa-surface);
  border: 1px solid var(--pa-border);
  text-align: center;
  padding: 55px 20px;
  border-radius: 16px;
  margin: 55px 0;
}

.pa-home .pa-home-footer h2 {
  font-size: 30px;
}

.pa-home ul.products {
  direction: rtl;
}

@media (max-width: 767px) {
  .pa-home .pa-hero {
    min-height: 320px;
    padding: 38px 24px;
  }

  .pa-home .pa-hero p {
    font-size: 16px;
  }

  .pa-home .pa-home-section {
    padding-top: 42px;
  }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
  background: var(--pa-surface);
  color: var(--pa-muted);
  border-top: 1px solid var(--pa-border);
}

.site-footer a:not(.button) {
  color: var(--pa-green);
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer .widget-title {
  color: var(--pa-text);
}

.site-info {
  color: var(--pa-muted);
}

/* ==========================================================================
   STORE MODE BAR (reserve and pick up)
   ========================================================================== */

.pa-mode-bar {
  background: var(--pa-surface-2);
  color: var(--pa-text);
  border-bottom: 1px solid var(--pa-border);
  padding: 8px 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
}