/*
Shop / Product / Cart / Checkout — mobile-app polish.
Kept in its own file (separate from style.css) so it doesn't collide with
manual edits made directly in style.css. Reuses the same CSS variables
(--ink, --blue, --card-bg, etc.) already declared in style.css's :root,
since both files load together in the same page.
*/

/* =========================================================
   1. SHOP / CATEGORY — mobile filter bottom-sheet
   ========================================================= */
.shop-filter-trigger{display:inline-flex;}
@media (min-width:900px){.shop-filter-trigger{display:none;}}

.filter-sheet-scrim{
  position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:700;opacity:0;pointer-events:none;transition:opacity .3s;
}
.filter-sheet-scrim.is-open{opacity:1;pointer-events:auto;}

.filter-sheet-head{display:none;}

@media (max-width:899px){
  .shop-sidebar{
    position:fixed;left:0;right:0;bottom:0;z-index:800;
    background:var(--page-bg,#fff);border-radius:20px 20px 0 0;
    max-height:82vh;overflow-y:auto;padding:18px 20px calc(20px + env(safe-area-inset-bottom,0px));
    transform:translateY(100%);transition:transform .32s cubic-bezier(.65,0,.35,1);
    box-shadow:0 -20px 50px rgba(0,0,0,.25);
  }
  .shop-sidebar.is-open{transform:translateY(0);}
  .filter-sheet-head{
    display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;
    padding-bottom:14px;border-bottom:1px solid var(--card-border,#e6e9f0);
  }
  .filter-sheet-head h3{font-size:16px;color:var(--ink,#14151c);}
  .filter-sheet-head button{width:32px;height:32px;border-radius:50%;background:var(--page-bg-alt,#f4f6fa);display:flex;align-items:center;justify-content:center;color:var(--ink,#14151c);}
  /* little grab-handle for the app feel */
  .shop-sidebar::before{
    content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);
    width:40px;height:4px;border-radius:99px;background:var(--card-border,#e6e9f0);
  }
}

/* =========================================================
   2. SINGLE PRODUCT — sticky mobile Add-to-Cart bar
   ========================================================= */
.sticky-atc-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:400;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--black-2,#101015);padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  transform:translateY(100%);transition:transform .3s ease;
  box-shadow:0 -10px 30px rgba(0,0,0,.35);
}
.sticky-atc-bar.is-visible{transform:translateY(0);}
@media (min-width:1024px){.sticky-atc-bar{display:none;}} /* desktop already sees the real button on-screen */
/* sit above the bottom app tab-bar on very small screens where both could show */
@media (max-width:1023px){.sticky-atc-bar{bottom:var(--tabbar-h,64px);}}

.sticky-atc-info{display:flex;flex-direction:column;gap:2px;min-width:0;}
.sticky-atc-price{font-family:var(--font-mono,monospace);font-weight:700;font-size:17px;color:#fff;}
.sticky-atc-price .woocommerce-Price-amount{color:#fff;}
.sticky-atc-stock{font-size:11px;color:var(--success,#1fbf75);}
.sticky-atc-btn{flex-shrink:0;padding:13px 24px;}
.sticky-atc-btn.loading{opacity:.65;pointer-events:none;}
.sticky-atc-btn.added{background:linear-gradient(135deg,var(--success,#1fbf75),#159a5e);}

/* =========================================================
   3. QTY STEPPER — wraps WooCommerce's native .qty input
   (product page + cart page), added via JS, styled here.
   ========================================================= */
.qty-stepper-wrap{
  display:inline-flex;align-items:center;border:1px solid var(--card-border,#e6e9f0);border-radius:999px;
  overflow:hidden;background:var(--page-bg-alt,#f4f6fa);width:fit-content;
}
.qty-stepper-btn{
  width:34px;height:38px;display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;color:var(--blue-text,#1456d1);flex-shrink:0;
}
.qty-stepper-btn:hover{background:rgba(30,111,255,.1);}
.qty-stepper-wrap .qty{
  width:44px!important;border:none!important;background:transparent!important;text-align:center;
  font-family:var(--font-mono,monospace);font-size:14px;color:var(--ink,#14151c);height:38px;padding:0!important;
}

/* =========================================================
   4. CART PAGE — card layout on mobile (native WC table, no template override)
   ========================================================= */
@media (max-width:767px){
  .woo-page table.shop_table.cart,
  .woo-page table.shop_table.cart tbody,
  .woo-page table.shop_table.cart tr,
  .woo-page table.shop_table.cart td{display:block;width:100%;}
  .woo-page table.shop_table.cart thead{display:none;}
  .woo-page table.shop_table.cart tr{
    position:relative;border:1px solid var(--card-border);border-radius:var(--radius);
    padding:14px;margin-bottom:14px;background:var(--card-bg);
  }
  .woo-page table.shop_table.cart td{
    border:none!important;padding:6px 0!important;display:flex;align-items:center;justify-content:space-between;gap:10px;
  }
  .woo-page table.shop_table.cart td.product-thumbnail{justify-content:flex-start;padding-bottom:10px!important;}
  .woo-page table.shop_table.cart td.product-name::before{content:"Product";font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-muted);}
  .woo-page table.shop_table.cart td.product-price::before{content:"Price";font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-muted);}
  .woo-page table.shop_table.cart td.product-quantity::before{content:"Qty";font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-muted);}
  .woo-page table.shop_table.cart td.product-subtotal::before{content:"Subtotal";font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-muted);}
  .woo-page table.shop_table.cart td.product-remove{position:absolute;top:10px;right:10px;padding:0!important;}
  .woo-page table.shop_table.cart td.actions{display:block;}
  .woo-page table.shop_table.cart td.actions .coupon{margin-bottom:14px;}
  .woo-page table.shop_table.cart td.actions > .button{width:100%;justify-content:center;}
}

/* =========================================================
   5. CHECKOUT PAGE — mobile grouping polish
   ========================================================= */
@media (max-width:767px){
  .woo-page .checkout .col2-set .col-1,
  .woo-page .checkout .col2-set .col-2{width:100%;}
  .woo-page #order_review{margin-top:24px;}
  .woo-page #place_order{font-size:15px;padding:16px 26px;}
}

/* =========================================================
   10. MY ACCOUNT — modern redesign (all pages, after login)
   ========================================================= */

/* --- nav: sidebar on desktop, horizontal pill-tabs on mobile --- */
@media (max-width:767px){
  .woo-page .woocommerce-MyAccount-navigation ul{
    display:flex;flex-direction:row;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;
  }
  .woo-page .woocommerce-MyAccount-navigation ul::-webkit-scrollbar{display:none;}
  .woo-page .woocommerce-MyAccount-navigation li{flex-shrink:0;list-style:none;}
  .woo-page .woocommerce-MyAccount-navigation a{
    white-space:nowrap;padding:10px 18px;border-radius:999px;border:1px solid var(--card-border);background:var(--card-bg);
  }
  .woo-page .woocommerce-MyAccount-navigation .is-active a{border-color:var(--blue);background:rgba(30,111,255,.08);}
}
@media (min-width:768px){
  .woo-page .woocommerce-MyAccount-navigation{
    background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);padding:14px;
  }
  .woo-page .woocommerce-MyAccount-navigation a{position:relative;}
  .woo-page .woocommerce-MyAccount-navigation a::after{
    content:"›";position:absolute;right:12px;top:50%;transform:translateY(-50%);opacity:0;transition:opacity .15s;
  }
  .woo-page .woocommerce-MyAccount-navigation a:hover::after,
  .woo-page .woocommerce-MyAccount-navigation .is-active a::after{opacity:.6;}
}

/* --- dashboard: welcome card + quick-link icon cards (matches woocommerce/myaccount/dashboard.php) --- */
.account-welcome-card{
  display:flex;align-items:center;gap:14px;background:var(--card-bg);border:1px solid var(--card-border);
  border-radius:var(--radius);padding:18px 20px;font-size:14px;color:var(--ink);box-shadow:var(--card-shadow);margin-bottom:22px;
}
.account-welcome-card p{margin:0;}
.account-welcome-card a{color:var(--blue-text);font-weight:600;}
.account-welcome-card a[href*="customer-logout"]{color:var(--sale);}
.account-welcome-card::before{
  content:"👤";flex-shrink:0;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--blue-deep));
  display:flex;align-items:center;justify-content:center;font-size:19px;
}

.account-quick-links{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
@media (min-width:600px){.account-quick-links{grid-template-columns:repeat(3,1fr);}}
.account-quick-link{
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);
  padding:22px 14px;transition:transform .2s,box-shadow .2s,border-color .2s;
}
.account-quick-link:hover{transform:translateY(-3px);box-shadow:var(--card-shadow);border-color:rgba(30,111,255,.3);}
.account-quick-link .aql-label{font-size:13px;font-weight:600;color:var(--ink);}
.account-quick-link .aql-icon{
  width:42px;height:42px;border-radius:50%;background:rgba(30,111,255,.1);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background-repeat:no-repeat;background-position:center;background-size:20px;
}
.account-quick-link--accent{border-color:rgba(30,111,255,.35);}
.account-quick-link--accent .aql-icon{background-color:var(--blue);}
.account-quick-link--muted .aql-label{color:var(--sale);}
.account-quick-link--muted .aql-icon{background-color:rgba(255,59,87,.1);}

.account-quick-link[data-icon="orders"] .aql-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231456d1' stroke-width='2'%3E%3Crect x='3' y='7' width='18' height='14' rx='2'/%3E%3Cpath d='M8 7V5a4 4 0 018 0v2'/%3E%3C/svg%3E");}
.account-quick-link[data-icon="edit-address"] .aql-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231456d1' stroke-width='2'%3E%3Cpath d='M21 10c0 7-9 12-9 12s-9-5-9-12a9 9 0 1118 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");}
.account-quick-link[data-icon="edit-account"] .aql-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231456d1' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 6-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E");}
.account-quick-link[data-icon="downloads"] .aql-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231456d1' stroke-width='2'%3E%3Cpath d='M12 3v12m0 0l-4-4m4 4l4-4'/%3E%3Cpath d='M4 19h16'/%3E%3C/svg%3E");}
.account-quick-link[data-icon="shop"] .aql-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 002 1.6h9.7a2 2 0 002-1.6L23 6H6'/%3E%3C/svg%3E");}
.account-quick-link[data-icon="customer-logout"] .aql-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff3b57' stroke-width='2'%3E%3Cpath d='M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4'/%3E%3Cpath d='M16 17l5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E");}

/* --- orders table: responsive cards on mobile, same technique as the cart table --- */
.woo-page table.woocommerce-orders-table,
.woo-page table.woocommerce-table--order-details{width:100%;background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);overflow:hidden;margin-bottom:20px;border-collapse:collapse;}
.woo-page table.woocommerce-orders-table th,
.woo-page table.woocommerce-table--order-details th{background:var(--page-bg-alt);padding:12px 14px;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-muted);text-align:left;}
.woo-page table.woocommerce-orders-table td,
.woo-page table.woocommerce-table--order-details td{padding:14px;border-top:1px solid var(--card-border);font-size:13.5px;color:var(--ink);}
.woo-page .woocommerce-orders-table__cell-order-actions .button{padding:8px 16px;font-size:12px;margin:2px;}

.woo-page mark.order-status{
  display:inline-flex;padding:5px 12px;border-radius:999px;font-size:11.5px;font-weight:700;background:none;
}
.woo-page mark.order-status.status-completed{background:rgba(31,191,117,.12);color:var(--success);}
.woo-page mark.order-status.status-processing{background:rgba(30,111,255,.12);color:var(--blue-text);}
.woo-page mark.order-status.status-on-hold,
.woo-page mark.order-status.status-pending{background:rgba(255,176,58,.15);color:#b5760a;}
.woo-page mark.order-status.status-cancelled,
.woo-page mark.order-status.status-failed{background:rgba(255,59,87,.12);color:var(--sale);}
.woo-page mark.order-status.status-refunded{background:rgba(107,114,128,.12);color:var(--ink-muted);}

@media (max-width:640px){
  .woo-page table.woocommerce-orders-table thead{display:none;}
  .woo-page table.woocommerce-orders-table,
  .woo-page table.woocommerce-orders-table tbody,
  .woo-page table.woocommerce-orders-table tr,
  .woo-page table.woocommerce-orders-table td{display:block;width:100%;}
  .woo-page table.woocommerce-orders-table tr{border:1px solid var(--card-border);border-radius:var(--radius);margin-bottom:14px;padding:14px;}
  .woo-page table.woocommerce-orders-table td{border:none!important;padding:5px 0!important;display:flex;justify-content:space-between;align-items:center;gap:10px;}
  .woo-page table.woocommerce-orders-table td::before{content:attr(data-title);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-muted);}
  .woo-page .woocommerce-orders-table__cell-order-actions{justify-content:flex-start!important;flex-wrap:wrap;}
}

/* --- single order-received / order-view page --- */
.woo-page .woocommerce-order{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);padding:22px;margin-bottom:20px;}
.woo-page .woocommerce-order > p:first-child{font-size:15px;color:var(--ink);margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--card-border);}
.woo-page ul.woocommerce-order-overview{list-style:none;display:flex;flex-wrap:wrap;gap:20px;padding:16px 0;margin-bottom:16px;border-bottom:1px solid var(--card-border);}
.woo-page ul.woocommerce-order-overview li{font-size:12px;color:var(--ink-muted);}
.woo-page ul.woocommerce-order-overview li strong{display:block;font-size:14px;color:var(--ink);margin-top:2px;font-family:var(--font-mono);}

/* --- addresses page: billing/shipping as side-by-side cards --- */
.woo-page .woocommerce-Addresses{display:grid;gap:18px;}
@media (min-width:640px){.woo-page .woocommerce-Addresses{grid-template-columns:1fr 1fr;}}
.woo-page .woocommerce-Address{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);padding:20px;}
.woo-page .woocommerce-Address-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.woo-page .woocommerce-Address-title h3{font-size:15px;color:var(--ink);}
.woo-page .woocommerce-Address-title .edit{font-size:12px;color:var(--blue-text);font-weight:600;padding:6px 14px;border:1px solid rgba(30,111,255,.3);border-radius:999px;}
.woo-page .woocommerce-Address address{font-size:13.5px;color:var(--ink-muted);line-height:1.7;font-style:normal;}

/* --- account details / edit-address forms --- */
.woo-page .woocommerce-EditAccountForm,
.woo-page .woocommerce-address-fields{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);padding:22px;}
.woo-page .woocommerce-EditAccountForm fieldset{border:none;margin-top:18px;padding-top:18px;border-top:1px solid var(--card-border);}
.woo-page .woocommerce-EditAccountForm legend{font-size:14px;color:var(--ink);font-weight:600;padding:0;}

/* --- downloads table (digital products, if any) --- */
.woo-page table.woocommerce-MyAccount-downloads{width:100%;background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);overflow:hidden;}
.woo-page table.woocommerce-MyAccount-downloads th{background:var(--page-bg-alt);padding:12px 14px;font-size:11.5px;color:var(--ink-muted);text-transform:uppercase;text-align:left;}
.woo-page table.woocommerce-MyAccount-downloads td{padding:14px;border-top:1px solid var(--card-border);font-size:13.5px;}

/* --- empty state (no orders yet) --- */
.woo-page .woocommerce-notice--no-content-found,
.woo-page .woocommerce-message{display:block;}
.woo-page .woocommerce-Message p.woocommerce-notice{margin:0;}

/* =========================================================
   6. GENERAL MOBILE-APP FEEL — smoother interactive states
   ========================================================= */
.woo-page .button:active,
.qty-stepper-btn:active,
.sticky-atc-btn:active{transform:scale(.97);}
.woo-page a,
.woo-page button{-webkit-tap-highlight-color:transparent;}

/* =========================================================
   11. SHARE ROW (WhatsApp + copy link) — single product page
   ========================================================= */
.product-share-row{display:flex;align-items:center;gap:10px;margin:16px 0;flex-wrap:wrap;}
.product-share-label{font-size:12.5px;color:var(--ink-muted);font-weight:600;}
.share-icon-btn{
  display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;
  border:1px solid var(--card-border);background:var(--card-bg);color:var(--ink);font-size:12.5px;font-weight:600;
  transition:border-color .2s,background .2s,color .2s;
}
.share-whatsapp{color:#25d366;border-color:rgba(37,211,102,.3);}
.share-whatsapp:hover{background:rgba(37,211,102,.1);}
.share-copy:hover{border-color:var(--blue);color:var(--blue-text);}
.share-copy.is-copied{background:rgba(31,191,117,.1);border-color:var(--success);color:var(--success);}

/* =========================================================
   12. RECENTLY VIEWED — single product page
   ========================================================= */
.recently-viewed-section{border-top:1px solid var(--card-border);margin-top:8px;}