/* =========================================================
   ALWAJIEHA — WordPress/WooCommerce shims
   css/style.css is the design system (kept ~verbatim from the
   design4 mockup); this file adapts markup we don't control
   (navigation, mini-cart, product blocks, cart/checkout) to it.
   ========================================================= */

/* ---------- generic ---------- */

/* .weave relies on the parent being a positioning context; sections get it
   from style.css, editor-applied groups need it too */
.weave { position: relative; }

/* lace dividers ride on core/separator <hr> elements; the browser's default
   <hr> margins would paint a white strip between the section and the trim,
   so restate .lace's drape margins explicitly at element+class specificity */
hr.lace {
  border: 0;
  background-color: transparent;
  opacity: 1;
  width: auto;
  margin-block: 0 calc(var(--lace-h) * -.6);
}
hr.lace--green { margin-block: calc(var(--lace-h) / -2); }

/* the "See everything" line (mockup used an inline style) */
.see-everything { text-align: center; margin: 2.2rem 0 0; }

/* generic page body (licenses, blog fallback, plain pages) */
.page-body { padding: 2.8rem 0 5rem; }
.page-body .container { max-width: 720px; display: grid; gap: 1.2rem; }

.page-hero--404 { padding: 4rem 0 5rem; }

/* logged-in admin bar sits above the sticky header */
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }
/* core makes #wpadminbar absolute on phones so it scrolls away — with a
   sticky site header that either leaves a bar-sized gap (offset kept) or
   lets the bar slide back OVER the header on the way up (offset dropped).
   Pin the bar instead: both bars stay put, no in-between states. */
@media (max-width: 600px) {
  body.admin-bar #wpadminbar { position: fixed; }
}

.wp-block-post-title a { color: inherit; text-decoration: none; }

/* ---------- header ---------- */

/* nav links get the mockup's pill treatment (.main-nav a) */
.site-header .wp-block-navigation a.wp-block-navigation-item__content {
  text-decoration: none;
  font-size: .95rem;
  padding: .45rem .8rem;
  border-radius: 999px;
  transition: .15s;
}
.site-header .wp-block-navigation a.wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation a.wp-block-navigation-item__content[aria-current="page"] {
  background: var(--pink-soft);
  transform: rotate(-2deg);
}

/* hamburger + close buttons styled like the mockup's .nav-toggle
   (no display property here — WordPress media queries decide visibility) */
.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close {
  width: 46px;
  height: 46px;
  background: var(--pink-soft);
  border: none;
  border-radius: 14px;
  box-shadow: var(--shadow-hard-sm);
  align-items: center;
  justify-content: center;
  color: var(--ink);
}

/* the mobile overlay becomes the sewn paper pocket */
.site-header .wp-block-navigation__responsive-container.has-modal-open {
  background: var(--paper);
  padding: 1.2rem;
}
.site-header .wp-block-navigation__responsive-container.has-modal-open
  .wp-block-navigation__responsive-container-content {
  padding-top: 3.5rem;
}

/* mini-cart button as the red .cart-link square with the .cart-count badge */
.header-cart.wc-block-mini-cart { margin: 0; }
.header-cart .wc-block-mini-cart__button {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 14px;
  box-shadow: var(--shadow-hard-sm);
  transition: .15s;
}
.header-cart .wc-block-mini-cart__button:hover {
  background: var(--red-deep);
  color: #fff;
  opacity: 1;
}
.header-cart .wc-block-mini-cart__button:active {
  translate: 2px 2px;
  box-shadow: 1px 1px 0 rgba(43, 28, 20, .13);
}
.header-cart .wc-block-mini-cart__amount { display: none; }
.header-cart .wc-block-mini-cart__quantity-badge { border: none; }
.header-cart .wc-block-mini-cart__badge {
  position: absolute;
  top: -9px;
  inset-inline-start: -9px;
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #fff;
  font-size: .75rem;
  border: 2px solid #fff;
  border-radius: 999px;
  padding-inline: 4px;
}

/* ---------- footer ---------- */
.site-footer .wp-block-navigation a { color: #000; text-decoration: none; }
.site-footer .wp-block-navigation a:hover { color: var(--red); }

/* ---------- product grid (product-collection / product-template) ---------- */

ul.product-grid {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Woo's responsive product-template ships its own column logic; the mockup
   grid must win (2-up mobile, 4-up desktop, 3-up shop at mid width) */
ul.product-grid.wc-block-product-template {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1rem !important;
}
@media (min-width: 720px) {
  ul.product-grid.wc-block-product-template {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.4rem !important;
  }
  ul.product-grid--shop.wc-block-product-template {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (min-width: 980px) {
  ul.product-grid--shop.wc-block-product-template {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* each product <li> is a .product-card */
.product-grid > li {
  position: relative;
  padding: 1rem .8rem .9rem;
  display: grid;
  gap: .5rem;
  justify-items: center;
  align-content: start;
  text-align: center;
  transition: rotate .2s;
}
.product-grid > li:nth-child(odd) { rotate: -1.2deg; }
.product-grid > li:nth-child(even) { rotate: 1.2deg; }
.product-grid > li:hover { rotate: 0deg; }

/* grid items must not be blown open by intrinsic image size */
.product-grid > li { min-width: 0; }

.product-grid .p-img {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: .4rem;
  margin: 0;
  overflow: hidden;
}
.product-grid .p-img a {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.product-grid .p-img img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  transition: .25s;
  filter:
    drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff)
    drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff)
    drop-shadow(4px 6px 6px rgba(43, 28, 20, .35));
}
.product-grid > li:hover .p-img img { rotate: -5deg; scale: 1.07; }

.product-grid .p-name {
  font-family: var(--f-body);
  font-size: .98rem;
  line-height: 1.4;
  margin: 0;
}
.product-grid .p-price {
  width: fit-content;
  justify-self: center;
  font-size: .9rem;
  background: var(--pink-soft);
  border-radius: 999px;
  padding: .15rem .75rem;
  rotate: -2deg;
  margin: 0;
}
.product-grid .p-price * { font-weight: 400; }

/* style.css's .p-add styles the mockup <button>; in block markup the class
   lands on the wrapper div AND the link gets the pill styles below — reset
   the wrapper or its shadow/background paints inside the button */
.product-grid .p-add {
  width: 100%;
  margin: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
.product-grid .p-add .wp-block-button__link {
  width: 100%;
  font-family: var(--f-body);
  font-size: .9rem;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: .55rem;
  box-shadow: var(--shadow-hard-sm);
  transition: .15s;
}
.product-grid .p-add .wp-block-button__link:hover { background: var(--red-deep); }
.product-grid .p-add .wp-block-button__link:active { translate: 2px 2px; box-shadow: none; }

/* pagination under the shop grid */
.shop-pagination {
  margin-top: 2.4rem;
  font-family: var(--f-body);
  font-size: .95rem;
}
.shop-pagination a,
.shop-pagination .page-numbers {
  text-decoration: none;
  background: var(--paper);
  border-radius: 999px;
  padding: .45rem 1rem;
  box-shadow: var(--shadow-hard-sm);
}
.shop-pagination .page-numbers.current {
  background: var(--red);
  color: #fff;
  translate: 2px 2px;
  box-shadow: none;
}

/* ---------- filter chips (links to category archives) ---------- */
.chips a.chip {
  text-decoration: none;
  color: inherit;
  display: inline-block;
}
.chip[aria-current="page"] {
  background: var(--red);
  color: #fff;
  translate: 2px 2px;
  box-shadow: none;
  rotate: -2deg;
}

/* ---------- single product ---------- */

/* gallery: Woo's classic gallery inside the paper card */
.pd-gallery .woocommerce-product-gallery {
  background: var(--paper);
  border-radius: 24px;
  box-shadow: var(--shadow-hard), 0 2px 10px rgba(43, 28, 20, .08);
  padding: 1.4rem;
}
.pd-gallery .woocommerce-product-gallery__image { border-radius: 16px; overflow: hidden; }
.pd-gallery .flex-control-thumbs {
  display: flex;
  gap: .7rem;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: .9rem 0 0;
}
.pd-gallery .flex-control-thumbs img {
  width: 84px;
  background: var(--paper);
  border: 3px solid transparent;
  border-radius: 16px;
  box-shadow: var(--shadow-hard-sm);
  padding: .35rem;
  cursor: pointer;
}
.pd-gallery .flex-control-thumbs img.flex-active {
  border-color: var(--red);
  rotate: -2deg;
}

.pd-tag a { text-decoration: none; color: inherit; }
.pd-desc p { margin: 0; }

/* add-to-cart form: stock count · qty pill · big red button on one line,
   all vertically centred (.pd-buy itself is the flex row, see style.css) */
.pd-buy p.stock {
  margin: 0;
  font-family: var(--f-body);
  font-size: .9rem;
  white-space: nowrap;
}
.pd-buy p.stock.low-stock { color: var(--red-deep); }
.pd-buy form.cart {
  display: flex;
  gap: .8rem;
  align-items: center;
  flex-wrap: wrap;
}
/* simple products: keep pill + button glued side by side, pushed to the end
   of the row opposite the stock count (variations keep their stacked form) */
.pd-buy form.cart:not(.variations_form) {
  flex-wrap: nowrap;
  margin-inline-start: auto;
}
/* Woo's quantity <input type=number> becomes the mockup's − / + pill;
   theme.js injects the .qty-btn buttons */
.pd-buy .quantity {
  display: flex;
  align-items: center;
  gap: .45rem;
  background: var(--paper);
  border-radius: 999px;
  box-shadow: var(--shadow-hard-sm);
  padding: .3rem .5rem;
}
.pd-buy .quantity .qty {
  width: 2.8ch;
  text-align: center;
  font-family: var(--f-body);
  font-size: 1rem;
  color: var(--ink);
  background: none;
  border: none;
  box-shadow: none;
  padding: .25rem 0;
  appearance: textfield;
  -moz-appearance: textfield;
}
.pd-buy .quantity .qty::-webkit-outer-spin-button,
.pd-buy .quantity .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pd-buy .qty-btn {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: none;
  border-radius: 10px;
  background: var(--pink-soft);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.pd-buy .qty-btn:active { translate: 1px 1px; }
.pd-buy .single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--f-body);
  font-size: 1.25rem;
  color: #fff;
  background: var(--red);
  border: none;
  border-radius: 999px;
  padding: .95rem 2.2rem;
  box-shadow: var(--shadow-hard);
  transition: .15s;
}
.pd-buy .single_add_to_cart_button:hover {
  rotate: -1.5deg;
  scale: 1.03;
  background: var(--red-deep);
}
.pd-buy .single_add_to_cart_button:active {
  translate: 3px 3px;
  box-shadow: 1px 1px 0 rgba(43, 28, 20, .13);
}
/* small screens: the row becomes a centred column — stock count, then the
   qty pill, then a full-width buy button */
@media (max-width: 719px) {
  .pd-buy { flex-direction: column; align-items: center; gap: .7rem; }
  .pd-buy p.stock { text-align: center; }
  .pd-buy form.cart:not(.variations_form) {
    width: 100%;
    margin-inline-start: 0;
    flex-direction: column;
    align-items: center;
    gap: .7rem;
  }
  .pd-buy .single_add_to_cart_button { width: 100%; }
}

.pd-hint { font-size: .8rem; opacity: .65; margin: 0; }
.pd-hint a { color: var(--red); }

/* product details (description / measurements / reviews) as a paper card */
.pd-details {
  margin-top: 2.6rem;
  background: var(--paper);
  border-radius: 18px;
  box-shadow: var(--shadow-hard-sm);
  padding: 1.1rem 1.4rem 1.4rem;
}
.pd-details table { border-collapse: collapse; font-size: .9rem; width: 100%; }
.pd-details table td, .pd-details table th {
  padding: .5rem .2rem;
  border: none;
  font-weight: 400;
}
.pd-details table tr + tr td, .pd-details table tr + tr th {
  border-top: 2px dotted rgba(43, 28, 20, .2);
}

/* ---------- store notices ---------- */
.wc-block-store-notices { margin-bottom: 1.4rem; }
.wc-block-store-notices .wc-block-components-notice-banner,
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-radius: 16px;
  box-shadow: var(--shadow-hard-sm);
  font-family: var(--f-body);
}

/* ---------- cart & checkout (pages with Woo blocks) ---------- */

.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout {
  font-family: var(--f-body);
}
.wc-block-cart .wc-block-cart-items {
  background: var(--paper);
  border-radius: 20px;
  box-shadow: var(--shadow-hard), 0 2px 10px rgba(43, 28, 20, .08);
  padding: .6rem 1.2rem;
}
.wc-block-cart .wc-block-cart-items th { font-weight: 400; }
.wc-block-components-sidebar .wc-block-components-totals-wrapper,
.wc-block-components-sidebar .wc-block-components-totals-item {
  font-variant-numeric: tabular-nums;
}
.wc-block-cart .wc-block-components-sidebar,
.wc-block-checkout .wc-block-components-sidebar {
  background: var(--paper);
  box-shadow: 4px 8px 18px rgba(43, 28, 20, .25);
  padding: 1.2rem 1.1rem;
}
.wc-block-checkout__form {
  background: var(--paper);
  border-radius: 20px;
  box-shadow: var(--shadow-hard), 0 2px 10px rgba(43, 28, 20, .08);
  padding: 1.4rem 1.2rem;
}
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox .components-combobox-control__input,
.wc-block-components-form .wc-block-components-select .components-custom-select-control__button {
  font-family: var(--f-body);
  color: var(--ink);
  background: var(--cream);
  border: var(--border-soft);
  border-radius: 12px;
}
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus {
  outline: 3px solid var(--pink);
  outline-offset: 1px;
  box-shadow: none;
}
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  font-family: var(--f-body);
  color: #fff;
  background: var(--red);
  border: none;
  border-radius: 999px;
  box-shadow: var(--shadow-hard);
  transition: .15s;
}
.wc-block-components-button:not(.is-link):hover {
  background: var(--red-deep);
  color: #fff;
}
.wc-block-components-button:not(.is-link):active {
  translate: 3px 3px;
  box-shadow: 1px 1px 0 rgba(43, 28, 20, .13);
}

/* ---------- combined basket + checkout page (classic
   [woocommerce_checkout] shortcode — the mockup's single cart page) ---------- */

/* mockup .cart-grid: basket scene left, form/receipt right */
.woocommerce-checkout .cart-body .woocommerce { display: grid; gap: 2rem; }
@media (min-width: 900px) {
  .woocommerce-checkout .cart-body .woocommerce {
    grid-template-columns: 1.1fr .9fr;
    align-items: start;
  }
}
.woocommerce-checkout .cart-body .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-checkout .cart-body .woocommerce > .woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout #order_review_heading { display: none; }

/* basket scene + quantity lines (markup echoed from functions.php; the look
   comes from style.css .basket-scene/.cart-line/.qty) */
.alw-basket { min-width: 0; }
.alw-basket .basket-item img,
.alw-basket .cart-line img { border-radius: 10px; }

/* the customer details block is the "Where do I send the love?" paper card */
.woocommerce-checkout #customer_details {
  background: var(--paper);
  border-radius: 20px;
  box-shadow: var(--shadow-hard), 0 2px 10px rgba(43, 28, 20, .08);
  padding: 1.4rem 1.2rem;
}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
  float: none;
  width: 100%;
}
.woocommerce-checkout #customer_details h3 {
  font-size: 1.05rem;
  rotate: -1deg;
  margin: 0 0 .9rem;
}
.woocommerce-checkout .woocommerce-additional-fields > h3 { display: none; }
/* single-country store: the "Country / Region: Egypt" line is noise, and the
   mockup checks out as a guest only */
.woocommerce-checkout #billing_country_field,
.woocommerce-checkout .woocommerce-account-fields,
.woocommerce-checkout .create-account { display: none; }
.woocommerce form .form-row {
  float: none;
  width: auto;
  margin: 0 0 .9rem;
  padding: 0;
  display: block;
}
.woocommerce form .form-row label {
  display: block;
  font-size: .88rem;
  margin-bottom: .35rem;
}
.woocommerce form .form-row .woocommerce-input-wrapper { display: block; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  width: 100%;
  font-family: var(--f-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--cream);
  border: var(--border-soft);
  border-radius: 12px;
  padding: .7rem .9rem;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
  outline: 3px solid var(--pink);
  outline-offset: 1px;
}

/* order review table lives inside the paper .receipt (wrapper markup comes
   from functions.php; the zigzag paper look from style.css .receipt) */
.receipt table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  margin: 0;
}
.receipt table thead { display: none; }
.receipt table th,
.receipt table td {
  font-weight: 400;
  text-align: start;
  vertical-align: top;
  padding: .3rem 0;
  border: none;
  background: none;
}
.receipt table td:last-child,
.receipt table tfoot td { text-align: end; }
.receipt .cart_item td { border-bottom: 2px dotted rgba(43, 28, 20, .2); padding: .45rem 0; }
.receipt tfoot .order-total th,
.receipt tfoot .order-total td {
  font-family: var(--f-display);
  font-size: 1.05rem;
  border-top: 2px dashed rgba(43, 28, 20, .3);
  padding-top: .7rem;
}
.receipt .woocommerce-shipping-methods {
  list-style: none;
  margin: 0;
  padding: 0;
}
.receipt .woocommerce-shipping-methods li { margin: 0; }
.receipt .woocommerce-shipping-destination,
.receipt .includes_tax { display: none; }

/* payment area: just the pink policy box + the big red button */
.woocommerce-checkout #payment {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  margin-top: 1.6rem;
  display: grid;
  gap: 1rem;
}
.woocommerce-checkout #payment ul.payment_methods {
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}
.woocommerce-checkout #payment ul.payment_methods li { margin: 0; font-size: .95rem; }
.woocommerce-checkout #payment div.payment_box {
  background: none;
  margin: 0;
  padding: .2rem 0 0 1.6rem;
  font-size: .8rem;
  opacity: .65;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout .form-row.place-order { margin: 0; }
.woocommerce #payment #place_order,
.woocommerce .button.alt {
  width: 100%;
  font-family: var(--f-body);
  font-size: 1.25rem;
  color: #fff;
  background: var(--red);
  border: none;
  border-radius: 999px;
  padding: .95rem 2.2rem;
  box-shadow: var(--shadow-hard);
  transition: .15s;
  float: none;
}
.woocommerce #payment #place_order:hover,
.woocommerce .button.alt:hover { background: var(--red-deep); }
.woocommerce #payment #place_order:active {
  translate: 3px 3px;
  box-shadow: 1px 1px 0 rgba(43, 28, 20, .13);
}
.alw-order-hint {
  display: block;
  text-align: center;
  font-size: .75rem;
  opacity: .65;
  margin-top: .6rem;
}

/* ---------- order confirmation (thank-you) ---------- */
.thanks-container { display: grid; justify-items: center; }
.thanks-details {
  width: min(640px, 100%);
  margin-top: 2.4rem;
  background: var(--paper);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(43, 28, 20, .22);
  padding: 1.8rem 1.5rem;
  font-family: var(--f-body);
  font-size: .95rem;
  display: grid;
  gap: 1rem;
}
.thanks-details h1, .thanks-details h2, .thanks-details h3 {
  color: var(--red-deep);
  font-size: 1.1rem;
  rotate: -1deg;
}
.thanks-details table { font-variant-numeric: tabular-nums; }
.thanks-details .wc-block-order-confirmation-totals-wrapper,
.thanks-details .wc-block-order-confirmation-address-wrapper {
  border-top: 2px dashed rgba(43, 28, 20, .3);
  padding-top: 1rem;
}