/* =========================================================================
   FOLO Store — WooCommerce
   Replaces woocommerce-general and woocommerce-layout (see inc/woocommerce.php).
   ========================================================================= */

/* -------------------------------------------------------------------------
   Shop shell
   ---------------------------------------------------------------------- */

.f-shop { padding-block: 34px 56px; }
.f-shop__main { min-width: 0; }

.f-crumbs {
  margin-block-end: 16px;
  color: var(--f-mute);
  font-size: 13px;
}

.f-crumbs a { color: var(--f-soft); }
.f-crumbs a:hover { color: var(--f-accent-2); }
.f-crumbs__sep { margin-inline: 8px; opacity: .5; }

.woocommerce-result-count {
  margin: 0;
  color: var(--f-mute);
  font-size: 13.5px;
}

.woocommerce-ordering { margin: 0; }

.woocommerce-ordering select,
.f-shop select,
.woocommerce select,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
/* Not the header search: WooCommerce puts .woocommerce on <body> of every shop
   page, so without the exclusion this boxes the field inside its own pill. */
.woocommerce input[type="search"]:not(.f-search__input),
.woocommerce textarea {
  padding: 10px 14px;
  background: var(--f-surface);
  border: 1px solid var(--f-line);
  border-radius: var(--f-r-sm);
  color: var(--f-strong);
  font-size: 14.5px;
}

.woocommerce select { appearance: none; padding-inline-end: 34px; }

.woocommerce-notices-wrapper:empty { display: none; }

.f-shop .woocommerce-result-count,
.f-shop .woocommerce-ordering {
  display: inline-flex;
  align-items: center;
}

.f-shop form.woocommerce-ordering { float: none; }

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { float: none; }

.f-shop::after { content: ""; display: table; clear: both; }

/* The archive toolbar sits on one line above the grid. */
.woocommerce-products-header + .f-grid { margin-block-start: 16px; }

.f-shop .woocommerce-result-count { margin-block-end: 14px; }
.f-shop .woocommerce-ordering { margin-block-end: 14px; margin-inline-start: auto; }

/* -------------------------------------------------------------------------
   Notices
   ---------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  padding: 14px 18px;
  list-style: none;
  background: var(--f-surface);
  border: 1px solid var(--f-line-2);
  border-inline-start: 3px solid var(--f-accent);
  border-radius: var(--f-r-sm);
  color: var(--f-soft);
  font-size: 14.5px;
}

.woocommerce-message { border-inline-start-color: var(--f-ok); }
.woocommerce-info { border-inline-start-color: var(--f-warn); }

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
  margin-inline-start: auto;
  padding: 8px 16px;
  background: var(--f-accent);
  color: #fff;
  border-radius: var(--f-r-sm);
  font-size: 13.5px;
  font-weight: 700;
}

.woocommerce-error { list-style: none; }
.woocommerce-error li { margin: 0; }

/* Empty product search or category: the search field again and a way back
   to the catalogue (markup from folo_no_products_next_steps()). New markup,
   so desktop has nothing to regress. */
.f-noresults { display: grid; gap: 16px; justify-items: center; margin-block-start: 4px; }
.f-noresults .f-search { width: 100%; }

/* -------------------------------------------------------------------------
   Buttons — map WooCommerce's classes onto the theme button
   ---------------------------------------------------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .woocommerce-Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--f-accent);
  color: #fff;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.2;
  border: 0;
  border-radius: var(--f-r-sm);
  box-shadow: var(--f-glow);
  transition: background var(--f-fast) var(--f-ease), transform var(--f-fast) var(--f-ease);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .woocommerce-Button:hover {
  background: var(--f-accent-2);
  color: #fff;
  transform: translateY(-1px);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt { background: var(--f-accent); }

.woocommerce button.button:disabled,
.woocommerce button.button.disabled { opacity: .55; box-shadow: none; }

.woocommerce .button.wc-forward,
.woocommerce a.added_to_cart {
  background: transparent;
  border: 1px solid var(--f-line-2);
  box-shadow: none;
  color: var(--f-soft);
}

/* -------------------------------------------------------------------------
   Single product
   ---------------------------------------------------------------------- */

.woocommerce div.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.woocommerce div.product .woocommerce-product-gallery {
  position: relative;
  float: none;
  width: 100%;
  margin: 0;
}

/* WooCommerce's zoom link arrives unstyled (a bare emoji on a line of its
   own above the image): a 40px round button on the image's corner instead.
   Phones hide it (below). */
.woocommerce div.product .woocommerce-product-gallery__trigger {
  position: absolute;
  z-index: 3;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, .92);
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(6, 10, 20, .18);
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
}

.woocommerce div.product .woocommerce-product-gallery__wrapper {
  border-radius: var(--f-r-lg);
  overflow: hidden;
  background: var(--f-surface-2);
}

.woocommerce div.product .woocommerce-product-gallery img { border-radius: var(--f-r-lg); }

.woocommerce div.product .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-block-start: 10px;
  list-style: none;
  padding: 0;
}

.woocommerce div.product .flex-control-thumbs li { width: 100%; float: none; margin: 0; }
.woocommerce div.product .flex-control-thumbs img { border-radius: var(--f-r-sm); opacity: .6; }
.woocommerce div.product .flex-control-thumbs img.flex-active { opacity: 1; }

.woocommerce div.product .summary {
  float: none;
  width: 100%;
  margin: 0;
}

.f-single__eyebrow {
  margin: 0 0 6px;
  color: var(--f-mute);
  font-size: 13.5px;
  font-weight: 600;
}

.woocommerce div.product .product_title {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  margin: 0 0 10px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  margin: 0 0 16px;
  color: var(--f-accent-2);
  font-size: 24px;
  font-weight: 800;
}

.woocommerce div.product p.price del { color: var(--f-mute); font-size: 18px; font-weight: 500; }
.woocommerce div.product p.price ins { text-decoration: none; }

.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--f-soft);
  font-size: 15px;
  margin-block-end: 18px;
}

.woocommerce div.product form.cart {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-block-end: 20px;
}

.woocommerce div.product form.cart .variations {
  width: 100%;
  border-collapse: collapse;
  margin-block-end: 12px;
}

.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
  padding: 6px 0;
  border: 0;
  text-align: start;
}

.woocommerce div.product form.cart .variations label { font-weight: 700; font-size: 14.5px; }

.woocommerce .quantity .qty {
  width: 78px;
  padding: 11px 8px;
  text-align: center;
  background: var(--f-surface);
  border: 1px solid var(--f-line);
  border-radius: var(--f-r-sm);
  color: var(--f-strong);
}

.f-trust {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 16px 18px;
  list-style: none;
  background: var(--f-surface);
  border: 1px solid var(--f-line);
  border-radius: var(--f-r);
}

.f-trust li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--f-soft);
  font-size: 14px;
}

.f-trust .f-icon { color: var(--f-accent-2); }

/* «دعم عبر واتساب» opens the support chat; it reads as a line of the list,
   with the underline saying it can be tapped. */
.f-trust__link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(var(--f-tint-rgb), .28);
  text-underline-offset: 4px;
}

.f-trust__link:hover { color: var(--f-strong); text-decoration-color: currentColor; }

/* Touch screens: a 44px-tall target; the negative margin keeps the list's rhythm. */
@media (pointer: coarse) {
  .f-trust__link { display: inline-block; padding-block: 11px; margin-block: -11px; }
}

/* The payment methods actually on offer, under the trust points (none and no
   frame at all while no payment keys are in). */
.f-trustbox { display: grid; gap: 10px; }

.f-paybadges--trust {
  padding: 12px 18px;
  background: var(--f-surface);
  border: 1px solid var(--f-line);
  border-radius: var(--f-r);
}

.woocommerce div.product .product_meta {
  margin-block-start: 18px;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--f-line);
  color: var(--f-mute);
  font-size: 13px;
}

.woocommerce div.product .product_meta a { color: var(--f-soft); }

/* Tabs */

.woocommerce div.product .woocommerce-tabs {
  grid-column: 1 / -1;
  margin-block-start: 8px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  border-block-end: 1px solid var(--f-line);
}

.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 { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 11px 18px;
  color: var(--f-mute);
  font-weight: 700;
  font-size: 14.5px;
  border-block-end: 2px solid transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--f-strong);
  border-block-end-color: var(--f-accent);
}

.woocommerce div.product .woocommerce-tabs .panel {
  color: var(--f-soft);
  font-size: 15px;
}

.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: 19px; color: var(--f-strong); margin-block-end: 12px; }

/* Related / upsells */

.woocommerce .related,
.woocommerce .upsells {
  grid-column: 1 / -1;
  margin-block-start: 44px;
}

.woocommerce .related > h2,
.woocommerce .upsells > h2 {
  font-size: 21px;
  margin-block-end: 20px;
  text-align: center;
}

/* Star ratings */

.woocommerce .star-rating,
.woocommerce p.stars a { color: #FFC53D; }

.woocommerce .woocommerce-product-rating { margin-block-end: 12px; }

/* -------------------------------------------------------------------------
   Cart
   ---------------------------------------------------------------------- */

.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  background: var(--f-surface);
  border: 1px solid var(--f-line);
  border-radius: var(--f-r-lg);
  overflow: hidden;
  color: var(--f-soft);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 14px 16px;
  border: 0;
  border-block-end: 1px solid var(--f-line);
  text-align: start;
  font-size: 14.5px;
}

.woocommerce table.shop_table th { color: var(--f-strong); font-weight: 700; }
.woocommerce table.shop_table tr:last-child td { border-block-end: 0; }

.woocommerce table.cart img { width: 64px; border-radius: var(--f-r-sm); }

.woocommerce a.remove {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  background: rgba(var(--f-tint-rgb), .07);
  border-radius: var(--f-r-pill);
  color: var(--f-mute) !important;
  font-size: 16px;
  line-height: 1;
}

.woocommerce a.remove:hover { background: var(--f-accent); color: #fff !important; }

.woocommerce .cart-collaterals,
.woocommerce-cart .cart-collaterals .cart_totals {
  width: 100%;
  float: none;
}

.woocommerce .cart_totals > h2,
.woocommerce-checkout h3 {
  font-size: 19px;
  margin-block-end: 14px;
}

.woocommerce .cart-collaterals { margin-block-start: 26px; }

.woocommerce .coupon {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* -------------------------------------------------------------------------
   Checkout and account
   ---------------------------------------------------------------------- */

.woocommerce form .form-row { display: grid; gap: 6px; margin-block-end: 14px; }
.woocommerce form .form-row label { font-size: 14px; font-weight: 600; color: var(--f-soft); }
.woocommerce form .form-row .required { color: var(--f-accent-2); }

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register,
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  padding: 22px;
  background: var(--f-surface);
  border: 1px solid var(--f-line);
  border-radius: var(--f-r-lg);
}

.woocommerce #payment {
  background: var(--f-surface);
  border: 1px solid var(--f-line);
  border-radius: var(--f-r-lg);
  padding: 18px;
}

.woocommerce #payment ul.payment_methods {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  border: 0;
  display: grid;
  gap: 10px;
}

.woocommerce #payment div.payment_box {
  background: rgba(var(--f-tint-rgb), .05);
  border-radius: var(--f-r-sm);
  color: var(--f-soft);
  font-size: 13.5px;
}

.woocommerce #payment div.payment_box::before { display: none; }

.woocommerce-account .woocommerce-MyAccount-navigation {
  width: 100%;
  float: none;
  margin-block-end: 22px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 9px 16px;
  background: var(--f-surface);
  border: 1px solid var(--f-line);
  border-radius: var(--f-r-pill);
  color: var(--f-soft);
  font-size: 14px;
  font-weight: 600;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--f-accent);
  border-color: transparent;
  color: #fff;
}

.woocommerce-account .woocommerce-MyAccount-content { width: 100%; float: none; }

/* -------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */

@media (min-width: 981px) {
  .woocommerce-cart .cart-collaterals .cart_totals {
    max-width: 420px;
    margin-inline-start: auto;
  }

  .woocommerce-checkout .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; }
}

@media (max-width: 980px) {
  .woocommerce div.product { grid-template-columns: 1fr; gap: 24px; }
  .f-shop { padding-block: 22px 40px; }

  /* One poster image: WooCommerce's zoom link arrives unstyled (a bare emoji
     on its own line) and adds nothing on a phone. */
  .woocommerce div.product .woocommerce-product-gallery__trigger { display: none; }

  /* The SKU is the importer's lookup key (folo-…), not shopper copy. */
  .woocommerce div.product .product_meta .sku_wrapper { display: none; }

  /* One column: the add-to-cart button spans the form above it, the paid
     action at least as prominent as the free trial's. */
  .woocommerce div.product form.cart .single_add_to_cart_button {
    flex: 1 1 100%;
    min-height: 52px;
    font-size: 16px;
    font-weight: 800;
  }

  /* Description text: the base reset left bullets hanging in the page
     gutter and sub-headings sitting on the list above. */
  .woocommerce div.product .woocommerce-tabs .panel :is(ul, ol) {
    margin-block: 0 1em;
    padding-inline-start: 1.25em;
  }

  .woocommerce div.product .woocommerce-tabs .panel li + li { margin-block-start: 4px; }
  .woocommerce div.product .woocommerce-tabs .panel li::marker { color: var(--f-accent); }

  .woocommerce div.product .woocommerce-tabs .panel :is(h3, h4) {
    margin-block: 1.4em .5em;
    color: var(--f-strong);
    line-height: 1.5;
  }

  .woocommerce div.product .woocommerce-tabs .panel h3 { font-size: 17px; }
  .woocommerce div.product .woocommerce-tabs .panel h4 { font-size: 15.5px; }

  /* The active tab above already says "الوصف". */
  .woocommerce div.product #tab-description > h2:first-child { display: none; }

  /* Rating picker: the star font left with woocommerce-general, so draw the
     stars here. In RTL the first star is on the right and fills leftwards. */
  .woocommerce p.stars { margin: 0 0 6px; line-height: 1; }
  .woocommerce p.stars span { display: inline-flex; gap: 4px; }

  .woocommerce p.stars a {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 34px;
    overflow: hidden;
    text-indent: -999em;
    white-space: nowrap;
  }

  .woocommerce p.stars a::before {
    content: "\2605";
    position: absolute;
    inset: 0;
    text-indent: 0;
    font-size: 30px;
    line-height: 34px;
    text-align: center;
    color: rgba(var(--f-tint-rgb), .16);
  }

  .woocommerce p.stars:hover a::before,
  .woocommerce p.stars.selected a::before { color: #FFC53D; }

  .woocommerce p.stars a:hover ~ a::before,
  .woocommerce p.stars.selected a.active ~ a::before { color: rgba(var(--f-tint-rgb), .16); }

  /* Review form: label over a full-width field, like the order form. */
  .woocommerce #review_form #respond p { margin: 0 0 14px; }
  .woocommerce #review_form #respond label { display: block; margin-block-end: 6px; font-size: 14px; font-weight: 600; color: var(--f-soft); }

  .woocommerce #review_form #respond input[type="text"],
  .woocommerce #review_form #respond input[type="email"],
  .woocommerce #review_form #respond textarea { display: block; width: 100%; }

  .woocommerce #review_form #respond textarea { height: 130px; }
  .woocommerce #review_form #respond .comment-form-cookies-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; }
  .woocommerce #review_form #respond .comment-form-cookies-consent label { display: inline; font-weight: 400; }
  .woocommerce #review_form #respond .comment-form-cookies-consent input { flex: none; margin: 3px 0 0; }
  .woocommerce #review_form #respond .form-submit input#submit { width: 100%; min-height: 50px; }

  /* Three related products in a two-column grid leave one alone; show two. */
  .woocommerce .related .f-grid > :nth-child(n+3) { display: none; }

  /* WooCommerce wraps password fields in span.password-input with a show/hide
     button and styles both in the sheet this theme replaces. */
  .woocommerce form .password-input { position: relative; display: block; }
  .woocommerce form .password-input input { width: 100%; padding-inline-end: 46px; }

  .woocommerce form .show-password-input {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: 44px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--f-mute);
  }

  .woocommerce form .show-password-input::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    margin: auto;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .woocommerce form .show-password-input.display-password { color: var(--f-accent); }
  .woocommerce form input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--f-accent); }
}

@media (max-width: 760px) {
  .woocommerce table.shop_table thead { display: none; }

  .woocommerce table.shop_table tr {
    display: grid;
    gap: 6px;
    padding: 14px;
    border-block-end: 1px solid var(--f-line);
  }

  .woocommerce table.shop_table td {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 4px 0;
    border: 0;
  }

  .woocommerce table.shop_table td::before {
    content: attr(data-title);
    color: var(--f-mute);
    font-weight: 600;
  }

  /* Order-pay ("pay for this order", e.g. a fresh crypto invoice): the
     product with its details under it, then quantity and price on one line;
     each total keeps its label and figure on one line. */
  .woocommerce #order_review table.shop_table tbody tr { grid-template-columns: auto 1fr; align-items: baseline; }
  .woocommerce #order_review table.shop_table td.product-name { display: block; grid-column: 1 / -1; color: var(--f-strong); font-weight: 700; }
  .woocommerce #order_review table.shop_table td.product-quantity { color: var(--f-mute); }
  .woocommerce #order_review table.shop_table td.product-subtotal { justify-content: flex-end; color: var(--f-strong); font-weight: 800; }

  .woocommerce #order_review table.shop_table tfoot tr {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 12px 14px;
  }

  .woocommerce #order_review table.shop_table tfoot th,
  .woocommerce #order_review table.shop_table tfoot td { display: block; padding: 0; border: 0; }

  .woocommerce #order_review table.shop_table tfoot td { text-align: end; }

  /* The order summary keeps its two columns, label and figure, as on desktop. */
  .woocommerce .f-summary table.f-summary__table tr { display: table-row; padding: 0; border: 0; }
  .woocommerce .f-summary table.f-summary__table td { display: table-cell; }
  .woocommerce .f-summary table.f-summary__table td::before { content: none; }

  .woocommerce div.product .woocommerce-tabs ul.tabs { overflow-x: auto; }

  /* 16px or more, or iOS Safari zooms the page in when a field is tapped
     and leaves it zoomed and shifted afterwards. */
  .woocommerce select,
  .woocommerce input[type="text"],
  .woocommerce input[type="email"],
  .woocommerce input[type="tel"],
  .woocommerce input[type="password"],
  .woocommerce input[type="number"],
  .woocommerce input[type="search"]:not(.f-search__input),
  .woocommerce textarea { font-size: 16px; }

  /* The cart's amount field sits flat inside its stepper: no second box.
     It still fills the whole row between - and +, so a tap anywhere there
     focuses it. */
  .f-cart__stepper .f-cart__amount:is([type="text"], [type="number"]) {
    align-self: stretch;
    min-height: 44px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
  }
}

/* Touch screens of any width (tablets at 768–1024 px too): 16px fields, or
   iOS Safari zooms in on the tapped field and leaves the page shifted. */
@media (pointer: coarse) {
  .woocommerce-ordering select,
  .f-shop select,
  .woocommerce select,
  .woocommerce input[type="text"],
  .woocommerce input[type="email"],
  .woocommerce input[type="tel"],
  .woocommerce input[type="password"],
  .woocommerce input[type="number"],
  .woocommerce input[type="search"]:not(.f-search__input),
  .woocommerce textarea { font-size: 16px; }
}

/* Phones: MSH shows only the sort control above its grid, full width, and
   leaves the result count out — the grid right below says as much. */
@media (max-width: 760px) {
  .f-shop .woocommerce-result-count { display: none; }

  .f-shop .woocommerce-ordering {
    position: relative;
    display: block;
    width: 100%;
    margin-inline-start: 0;
  }

  .f-shop .woocommerce-ordering select { width: 100%; min-height: 48px; }

  /* The arrow the padding was always reserved for; pointer-free so the tap
     still lands on the select. */
  .f-shop .woocommerce-ordering::after {
    content: "";
    position: absolute;
    inset-inline-end: 16px;
    inset-block-start: 50%;
    width: 8px;
    height: 8px;
    border: solid var(--f-mute);
    border-width: 0 2px 2px 0;
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
  }
}

/* -------------------------------------------------------------------------
   WooCommerce cart & checkout blocks

   Out of the box these inherit WordPress's generic grey button and the
   theme's red, underlined link colour — so "Proceed to checkout" read as a
   link in a grey box. They get the theme's own button and link treatment.
   ---------------------------------------------------------------------- */

.wc-block-cart .wc-block-components-button:not(.is-link),
.wc-block-checkout .wc-block-components-button:not(.is-link),
.wp-block-woocommerce-empty-cart-block .wp-element-button {
  min-height: 50px;
  background: var(--f-accent);
  border: 0;
  border-radius: var(--f-r-sm);
  box-shadow: var(--f-glow);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

.wc-block-cart .wc-block-components-button:not(.is-link):hover,
.wc-block-checkout .wc-block-components-button:not(.is-link):hover {
  background: var(--f-accent-2);
  color: #fff;
}

.wc-block-components-button:not(.is-link) .wc-block-components-button__text { color: inherit; }

.wc-block-components-product-name,
.wc-block-components-product-name:hover {
  color: var(--f-strong);
  font-weight: 700;
  text-decoration: none;
}

.wc-block-components-sale-badge {
  background: rgba(var(--f-accent-rgb), .14);
  border-color: rgba(var(--f-accent-rgb), .4);
  color: var(--f-accent-2);
  font-weight: 700;
}

/* Every screen: each chosen detail (amount, link, comments) of an order
   summary line on its own line, without WooCommerce's " / " separators, so a
   link starts a line of its own instead of being run into the amount. */
.wc-block-components-order-summary-item .wc-block-components-product-details > span { display: block; }
.wc-block-components-order-summary-item .wc-block-components-product-details > span > span:not([class]) { display: none; }

@media (max-width: 760px) {
  /* Services are sold by amount: WooCommerce's "1" bubble contradicts the
     "الكمية" line, the unit price repeats the line total, and the product
     blurb is noise by now. */
  .wc-block-checkout .wc-block-components-order-summary-item .wc-block-components-order-summary-item__quantity,
  .wc-block-components-order-summary-item .wc-block-cart-item__prices,
  .wc-block-components-order-summary-item .wc-block-components-product-metadata__description { display: none; }

  /* WooCommerce's 3em min-height outranks the button rule above; the page's
     main action matches the cart's checkout button. */
  .wc-block-checkout .wc-block-components-button.wc-block-components-checkout-place-order-button:not(.is-link) {
    min-height: 52px;
    font-size: 16px;
  }

  /* 16px or iOS zooms in on the order note too. */
  .wc-block-checkout .wc-block-components-textarea { font-size: 16px; }
}

/* Two-column checkout (761 px up): WooCommerce gives the order summary 35% —
   about 260 px at 768 and 287 px at 1280 — so the product name and the link
   broke almost word by word («https://www.snap / chat.com/add/ / …» over three
   lines). The summary gets 42%, and inside it each line drops what repeats
   (the "1" bubble, the unit price) and puts its total on a row of its own,
   leaving the name and link the full width beside the image. Tablets first
   (M11), desktop too since SUP-UX round 2 (UX-11). */
@media (min-width: 761px) {
  .wc-block-checkout.is-large > .wc-block-components-main { width: 58%; }
  .wc-block-checkout.is-large > .wc-block-components-sidebar { width: 42%; }

  .wc-block-checkout__sidebar .wc-block-components-order-summary-item { flex-wrap: wrap; }

  .wc-block-checkout__sidebar .wc-block-components-order-summary .wc-block-components-order-summary-item__description {
    flex: 1 1 0;
    min-width: 0;
    padding-inline-end: 0;
  }

  .wc-block-checkout__sidebar .wc-block-components-order-summary-item .wc-block-components-order-summary-item__quantity,
  .wc-block-checkout__sidebar .wc-block-components-order-summary-item .wc-block-cart-item__prices,
  .wc-block-checkout__sidebar .wc-block-components-order-summary-item .wc-block-components-product-metadata__description { display: none; }

  .wc-block-checkout__sidebar .wc-block-components-order-summary .wc-block-components-order-summary-item__total-price {
    flex: 1 0 100%;
    margin: -6px 0 12px;
    padding: 0;
    text-align: end;
    font-weight: 700;
  }
}

/* -------------------------------------------------------------------------
   Cart page — the theme's own layout (woocommerce/cart/cart.php), after MSH:
   item cards with an amount stepper, a coupon box, and an order summary; on
   a phone the total and the checkout button stay pinned above the tab bar.
   ---------------------------------------------------------------------- */

.f-cartpage { color: var(--f-text); }

.f-cart__head { margin-block-end: 8px; }

.f-cart__title {
  margin: 0;
  font-size: clamp(21px, 2.4vw, 26px);
  font-weight: 800;
}

.f-cart__count { font-size: 14px; font-weight: 600; color: var(--f-mute); }

.f-cart__items { display: grid; }

.f-cart__item {
  display: grid;
  gap: 14px;
  padding-block: 18px;
  border-block-end: 1px solid var(--f-line);
}

.f-cart__main { display: flex; align-items: flex-start; gap: 14px; }

.f-cart__thumb { flex: none; }

.f-cart__thumb img {
  display: block;
  width: 86px;
  height: 86px;
  object-fit: cover;
  border: 1px solid var(--f-line);
  border-radius: 12px;
}

.f-cart__info { flex: 1; min-width: 0; }

.f-cart__name { margin: 0 0 4px; font-size: 15.5px; font-weight: 800; line-height: 1.5; }
.f-cart__name a { color: var(--f-strong); text-decoration: none; }

/* What was chosen — "الكمية: 200 · رابط الحساب: …" — one quiet line each. */
.f-cart__meta dl { margin: 0; font-size: 12.5px; color: var(--f-mute); }
.f-cart__meta dt,
.f-cart__meta dd { display: inline; margin: 0; }
.f-cart__meta dd p { display: inline; margin: 0; }
.f-cart__meta dd { word-break: break-all; }
.f-cart__meta dd::after { content: ""; display: block; }

/* The theme's own rows (folo_cart_item_rows_html): one line per detail; a
   link or @username sits in <bdi dir="ltr">, whole, and may wrap only after a
   "/" — never in the middle of a word (the last resort only for a single
   unbroken run wider than the card). */
.f-cart__data { margin: 0; font-size: 12.5px; color: var(--f-mute); line-height: 1.6; }
.f-cart__datum { display: block; }
.f-cart__meta .f-cart__datum dd { word-break: normal; overflow-wrap: anywhere; }
.f-cart__meta .f-cart__datum dd::after { content: none; }
.f-cart__datum--ltr .f-ltr { color: var(--f-soft); }

.f-cart__price { margin: 6px 0 0; color: var(--f-accent-2); font-size: 15px; font-weight: 800; }
.f-cart__price ins { text-decoration: none; }
.f-cart__price del { margin-inline-start: 6px; color: var(--f-mute); font-size: .82em; font-weight: 600; }

/* The amount stepper sits under the item, on the reading side. Minus on the
   left and plus on the right in any language, like a number line — as MSH's. */
.f-cart__stepper {
  direction: ltr;
  justify-self: start;
  display: flex;
  align-items: center;
  width: 170px;
  padding: 3px;
  border: 1px solid var(--f-line-2);
  border-radius: 10px;
}

.f-cart__step {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--f-strong);
  font-size: 20px;
  line-height: 1;
}

/* Hover only where there is a mouse: on a phone :hover sticks after a tap. */
@media (hover: hover) {
  .f-cart__step:hover { background: rgba(var(--f-tint-rgb), .08); }
}

.f-cart__step:active { background: rgba(var(--f-tint-rgb), .08); }

.f-cart__amount {
  flex: 1;
  min-width: 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--f-strong);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  -moz-appearance: textfield;
}

.f-cart__amount::-webkit-outer-spin-button,
.f-cart__amount::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.f-cart__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.f-cart__subtotal { margin: 0; font-weight: 800; }
.f-cart__subtotal > span { color: var(--f-mute); font-weight: 600; }

.f-cart__actions { display: flex; align-items: center; gap: 8px; }

.f-cart__wish {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  background: none;
  border: 1px solid var(--f-line-2);
  border-radius: 7px;
  color: var(--f-strong);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
}

.f-cart__wish[aria-pressed="true"] { border-color: var(--f-accent); color: var(--f-accent-2); }
.f-cart__wish[aria-pressed="true"] svg { fill: currentColor; }

/* WooCommerce's own stylesheet draws its remove link as a small round ×. */
.woocommerce .f-cart__actions a.remove.f-cart__remove {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: auto;
  height: auto;
  padding: 6px 11px;
  background: var(--f-accent);
  border-radius: 7px;
  color: #fff !important;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.woocommerce .f-cart__actions a.remove.f-cart__remove:hover { background: var(--f-accent-2); }

/* The two line actions are targets in their own right: 40px tall on every
   screen (a mouse pointer and a finger alike), 44px on touch screens. */
.f-cart__wish,
.woocommerce .f-cart__actions a.remove.f-cart__remove { min-height: 40px; padding-block: 8px; }

@media (pointer: coarse) {
  .f-cart__wish,
  .woocommerce .f-cart__actions a.remove.f-cart__remove { min-height: 44px; }
}

/* Order-pay: a line's details (amount, link, notes) under its name, one per
   row, without list bullets. */
.woocommerce #order_review .wc-item-meta {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  color: var(--f-soft);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
}

.woocommerce #order_review .wc-item-meta li { margin: 0; }
.woocommerce #order_review .wc-item-meta li p { display: inline; margin: 0; }
.woocommerce #order_review .wc-item-meta .wc-item-meta-label { color: var(--f-mute); font-weight: 600; }

/* A cart line's details wherever WooCommerce itself prints them — the block
   checkout's order summary, the thank-you page, the order view in My Account:
   each value takes the direction of its own first letter, so a link reads
   left to right inside an Arabic line (no "/" jumping to the front), and it
   wraps at its natural break points before it would split a word. */
.wc-block-components-product-details__value,
.wc-item-meta li a {
  unicode-bidi: plaintext;
  word-break: normal;
  overflow-wrap: anywhere;
}

.f-cart__foot { padding-block: 20px 6px; }

.f-cart__coupon-label { display: block; margin-block-end: 10px; font-weight: 700; }

.f-cart__coupon-row {
  display: flex;
  overflow: hidden;
  border: 1px solid var(--f-line-2);
  border-radius: 10px;
}

.woocommerce .f-cart__coupon-row #coupon_code {
  flex: 1;
  width: auto;
  min-width: 0;
  padding: 12px 14px;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--f-strong);
}

.f-cart__coupon-btn {
  flex: none;
  padding: 0 18px;
  background: var(--f-cta-bg);
  border: 0;
  color: var(--f-cta-text);
  font: inherit;
  font-weight: 800;
}

/* Pressed by the script after an amount changes; nothing for people to see. */
.f-cart__update {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
}

/* --- Order summary ------------------------------------------------------ */

.f-summary {
  margin-block-start: 12px;
  padding: 18px;
  background: var(--f-surface);
  border: 1px solid var(--f-line);
  border-radius: 14px;
}

.f-summary__title { margin: 0 0 10px; font-size: 16px; font-weight: 800; }

.woocommerce .f-summary .f-summary__table { width: 100%; margin: 0; border: 0; border-collapse: collapse; }

.woocommerce .f-summary .f-summary__table th,
.woocommerce .f-summary .f-summary__table td {
  padding: 9px 0;
  background: none;
  border: 0;
  color: var(--f-soft);
  font-weight: 600;
  vertical-align: middle;
}

.woocommerce .f-summary .f-summary__table td { text-align: end; }

.woocommerce .f-summary .f-summary__table .order-total th,
.woocommerce .f-summary .f-summary__table .order-total td {
  padding-block-start: 14px;
  border-block-start: 1px solid var(--f-line);
  color: var(--f-strong);
  font-weight: 800;
}

.f-summary__table small { color: var(--f-mute); font-weight: 600; }

.f-summary .wc-proceed-to-checkout { padding: 0; }

.f-summary__checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-block-start: 14px;
  padding: 14px;
  background: var(--f-cta-bg);
  border-radius: 10px;
  color: var(--f-cta-text);
  font-weight: 800;
  text-decoration: none;
}

.f-summary__checkout:hover { background: var(--f-cta-hover); color: var(--f-cta-text); }

.f-summary__bar { display: none; }

/* While a new amount is being saved: the figures dim until the fresh ones
   arrive, and a checkout tap waits for them (app.js initCartStepper). */
.f-cart__item.is-updating .f-cart__price,
.f-cart__item.is-updating .f-cart__subtotal,
.cart_totals.is-updating .f-summary__table td,
.cart_totals.is-updating .f-summary__bar-total {
  opacity: .5;
  transition: opacity var(--f-fast) var(--f-ease);
}

.f-summary__checkout.is-busy,
.f-summary__bar-btn.is-busy { opacity: .75; cursor: progress; }

/* Under the store's minimum order (FOLO Core): both checkout buttons are
   drawn inactive and the reason sits under the summary's own button
   (woocommerce/cart/proceed-to-checkout-button.php). */
.f-summary__checkout.is-disabled,
.f-summary__checkout.is-disabled:hover,
.f-summary__bar-btn.is-disabled {
  background: var(--f-line-2);
  color: var(--f-soft);
  box-shadow: none;
  cursor: not-allowed;
}

.f-summary__min {
  margin: 10px 0 0;
  color: var(--f-accent-deep);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

/* Under the checkout button: the delivery promise, "no passwords", support. */
.f-assure {
  display: grid;
  gap: 6px;
  margin: 14px 0 0;
  padding: 12px 0 0;
  list-style: none;
  border-block-start: 1px solid var(--f-line);
}

.f-assure__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--f-soft);
  font-size: 13px;
  line-height: 1.6;
}

.f-assure__item .f-icon { flex: none; margin-block-start: 3px; color: var(--f-ok); }

/* The cart's only WhatsApp entry point (the floating button is quiet here):
   a full-height tap target. The negative margin keeps the line spacing. */
.f-assure__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -10px;
  color: var(--f-strong);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.f-paybadges--cart { margin-block-start: 12px; }

/* Inside Instagram, Snapchat, TikTok or Facebook: the wallet hint, with a
   copy-link button and a close button (inc/woocommerce.php). */
.f-inapp {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block-end: 14px;
  padding: 10px 12px;
  background: rgba(217, 119, 6, .08);
  border: 1px solid rgba(217, 119, 6, .35);
  border-radius: 12px;
  color: var(--f-text);
  font-size: 13.5px;
}

.f-inapp[hidden] { display: none; }
.f-inapp__text { flex: 1; min-width: 0; margin: 0; line-height: 1.6; }
.f-inapp__sub { display: block; color: var(--f-soft); font-size: 12.5px; }
.f-inapp__actions { flex: none; display: flex; align-items: center; gap: 2px; }

.f-inapp__copy {
  min-height: 40px;
  padding: 0 14px;
  background: var(--f-surface);
  border: 1px solid var(--f-line-2);
  border-radius: 10px;
  color: var(--f-strong);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.f-inapp__close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--f-mute);
  font-size: 22px;
  line-height: 1;
}

/* --- Empty cart ---------------------------------------------------------- */

.f-cart-empty { padding-block: 40px; text-align: center; }

.f-cart-empty__icon {
  display: inline-grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin-block-end: 14px;
  border: 1px solid var(--f-line-2);
  border-radius: 50%;
  color: var(--f-mute);
}

.f-cart-empty__title { margin: 0 0 6px; font-size: 22px; font-weight: 800; }
.f-cart-empty__text { margin: 0 0 20px; color: var(--f-mute); }
.woocommerce-cart .cart-empty.woocommerce-info { display: none; }

/* Desktop: items and summary side by side, the summary following the scroll. */
@media (min-width: 981px) {
  .woocommerce-cart .f-cartpage > .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    column-gap: 32px;
    align-items: start;
  }

  .woocommerce-cart .f-cartpage > .woocommerce > * { grid-column: 1; }

  .woocommerce-cart .f-cartpage > .woocommerce > .f-cart__summary {
    grid-column: 2;
    grid-row: 1 / span 4;
    position: sticky;
    top: 100px;
  }
}

/* Phone: the total and the checkout button stay pinned above the tab bar. */
@media (max-width: 760px) {
  .f-summary__bar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: calc(var(--f-tabbar-h) + env(safe-area-inset-bottom, 0px));
    z-index: 150;
    display: grid;
    gap: 8px;
    padding: 10px 14px;
    background: var(--f-bar);
    backdrop-filter: blur(12px);
    border-block-start: 1px solid var(--f-line-2);
  }

  .f-summary__bar-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    font-weight: 800;
  }

  .f-summary__bar-total small { color: var(--f-mute); font-weight: 600; }

  .f-summary__bar-btn {
    padding: 12px;
    background: var(--f-cta-bg);
    border-radius: 10px;
    color: var(--f-cta-text);
    font-weight: 800;
    text-align: center;
    text-decoration: none;
  }

  .f-summary__bar {
    transition: transform var(--f-fast, .2s) var(--f-ease, ease), opacity var(--f-fast, .2s) var(--f-ease, ease), visibility 0s linear 0s;
  }

  /* The summary's own checkout button is on screen: the bar steps away so the
     same button never shows twice (app.js initSummaryBar). */
  body.f-summary-inview .f-summary__bar {
    transform: translateY(calc(100% + var(--f-tabbar-h)));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--f-fast, .2s) var(--f-ease, ease), opacity var(--f-fast, .2s) var(--f-ease, ease), visibility 0s linear var(--f-fast, .2s);
  }

  body.f-summary-inview .f-toast { inset-block-end: calc(var(--f-tabbar-h) + 16px + env(safe-area-inset-bottom, 0px)); }

  /* Room at the bottom so the bar never covers the end of the page, footer
     included: the shell already clears the tab bar, so it clears the bar too. */
  .woocommerce-cart:has(.f-summary__bar) .f-shell {
    padding-block-end: calc(var(--f-tabbar-h) + 110px + env(safe-area-inset-bottom, 0px));
  }

  /* Ride above the pinned total bar (107px), as the button rides above the
     product page's sticky bar; it keeps its bottom-right corner. Toasts
     (wishlist, errors) clear the bar too. */
  body:has(.f-summary__bar) .f-wa { --f-wa-gap: calc(var(--f-tabbar-h) + 122px); }
  body:has(.f-summary__bar) .f-toast { inset-block-end: calc(var(--f-tabbar-h) + 124px + env(safe-area-inset-bottom, 0px)); }

  /* The coupon box spans the cart like the items and the summary. */
  .f-cart__coupon-row { flex: 1 1 100%; }
}

/* The currency switcher: what will actually be charged, in the store currency. */
.woocommerce .f-summary .f-summary__table .folo-charge th,
.woocommerce .f-summary .f-summary__table .folo-charge td { padding-block-start: 4px; color: var(--f-mute); font-size: 13px; }

.folo-currency-note {
  margin: 0 0 18px;
  padding: 12px 14px;
  background: rgba(var(--f-accent-rgb), .1);
  border: 1px solid rgba(var(--f-accent-rgb), .35);
  border-radius: 10px;
  color: var(--f-text);
  font-size: 14px;
}