/*
Theme Name: Official LomaMod Theme
Theme URI: https://example.com/lomamod
Author: LomaMod
Author URI: https://example.com
Description: Official custom WordPress/WooCommerce theme for LomaMod. A lightweight, hook-based theme built on native WordPress and WooCommerce functionality — no page builder, no bundled bloat. Ships with i18n support (English/Persian ready) and full RTL layouts.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
WC requires at least: 8.0
WC tested up to: 9.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: official-lomamod-theme
Domain Path: /languages
Tags: e-commerce, custom-colors, custom-menu, featured-images, rtl-language-support, translation-ready, one-column, two-columns

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've
learned with others.
*/

/* Intentionally minimal. All real styling lives in assets/css/main.css
   (and assets/css/main-rtl.css for the RTL swap), enqueued in
   inc/enqueue.php. Keeping this file to just the required theme
   header block is the modern recommended practice — WordPress only
   reads the comment block above for the theme's metadata; it does
   not require the rest of the file to contain any CSS. */

/* ============================================================
   LOMAMOD UI FIXES — isolated additions only.
   ------------------------------------------------------------
   Paste this block anywhere in your existing stylesheet (after
   your current rules, so these win the cascade without editing
   anything already there). Nothing here removes or rewrites any
   existing selector — every rule below either targets a class
   that doesn't exist yet in your CSS, or adds new properties to
   an existing one without touching what's already declared on it.

   NOTE: I'm working from the screenshots plus my own memory of
   this theme's markup (I don't have your current live CSS file
   in front of me this turn). The class names below match what
   was built earlier in this project — if any of your class names
   have since changed, the fix is the same, just re-point the
   selector.
   ============================================================ */


/* ------------------------------------------------------------
   FIX 1 — Login form: stray empty bar under the Password field
   ------------------------------------------------------------
   That small gray pill (image 1) is WooCommerce's own password-
   visibility toggle — it wraps the password input in
   <span class="password-input"> and injects a
   <span class="show-password-input"> next to it. It's rendering
   collapsed/unstyled rather than as a proper icon, most likely
   because it has no explicit width/height, so it shrinks down to
   almost nothing.

   Rather than rely on WooCommerce's own background-image for the
   icon (which varies slightly by WooCommerce version, and may be
   part of why it's not showing correctly here), this uses a small
   self-contained eye icon via inline SVG — no extra image file,
   no dependency on WooCommerce's own icon asset loading correctly.
   Clicking it still uses WooCommerce's own existing show/hide
   behavior; this only fixes how the button looks and where it sits.
   ------------------------------------------------------------ */

.lomamod-auth-panel--login .password-input,
.woocommerce-form-login .password-input {
  position: relative;
  display: block;
}

.lomamod-auth-panel--login .password-input input[type="password"],
.lomamod-auth-panel--login .password-input input[type="text"],
.woocommerce-form-login .password-input input[type="password"],
.woocommerce-form-login .password-input input[type="text"] {
  padding-right: 44px; /* room so typed text doesn't run under the icon */
}

.lomamod-auth-panel--login .show-password-input,
.woocommerce-form-login .show-password-input {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: block;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='1.6'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  /* Overrides any dashicon/font-based icon WooCommerce might apply
     via its own stylesheet, so only the SVG above shows: */
  font-size: 0;
}
.lomamod-auth-panel--login .show-password-input::before,
.woocommerce-form-login .show-password-input::before {
  content: none !important;
}


/* ------------------------------------------------------------
   FIX 2 — My Account dashboard: sidebar nav and content stacking
   instead of sitting side by side
   ------------------------------------------------------------
   Image 2 shows the account nav as a boxed column with a large
   empty gap to its right, and "Welcome back..." + the dashboard
   content stacking BELOW it full-width instead of sitting in that
   empty space beside it. That's a mismatched display type: the
   container is set to a flex layout while also carrying grid-only
   column-width properties, which don't do anything under flex —
   so the content isn't actually being placed into a second column
   at all, it's just falling to a new line.
   ------------------------------------------------------------ */

.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: 260px 1fr;
  align-items: start;
  gap: 48px;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
  grid-column: 1;
}

.woocommerce-account .woocommerce-MyAccount-content {
  grid-column: 2;
  min-width: 0; /* lets long content/images shrink instead of forcing the column wider */
}

@media (max-width: 900px) {
  .woocommerce-account .woocommerce {
    display: block; /* back to a simple single-column stack on mobile */
  }
  .woocommerce-account .woocommerce-MyAccount-navigation {
    margin-bottom: 28px;
  }
}


/* ------------------------------------------------------------
   FIX 3 — Wishlist tab: product renders as a raw, unstyled full-
   width image instead of a card
   ------------------------------------------------------------
   Image 3 shows a wishlist item with no card boundary, no grid,
   and the photo bleeding edge-to-edge at its native size. This is
   the wishlist grid/card styling — it isolates each saved product
   into its own bounded card in a proper responsive grid.
   ------------------------------------------------------------ */

.lomamod-wishlist-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
}

.lomamod-wishlist-item {
  display: flex;
  flex-direction: column;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: hidden;
  background: #ffffff;
}

.lomamod-wishlist-item-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #f4f2ee;
}

.lomamod-wishlist-item-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lomamod-wishlist-remove {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  cursor: pointer;
}

.lomamod-wishlist-remove svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

.lomamod-wishlist-item-info {
  padding: 14px 16px 18px;
}

.lomamod-wishlist-item-name {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 6px;
  color: inherit;
  text-decoration: none;
}

.lomamod-wishlist-item-price {
  font-size: 13px;
  color: #777;
  margin: 0 0 12px;
}

.lomamod-wishlist-item-stock.out-of-stock {
  font-size: 12px;
  color: #a3413a;
  margin: 0 0 10px;
}

@media (max-width: 900px) {
  .lomamod-wishlist-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

@media (max-width: 480px) {
  .lomamod-wishlist-grid {
    grid-template-columns: 1fr;
  }
}


/* ------------------------------------------------------------
   FIX 4 — Lookbook popup: move the selected product next to the
   title instead of its own full-width row, and make it smaller
   ------------------------------------------------------------
   Image 4: "Product 1 / Color: Black, Size: L / price" currently
   sits as its own full-width row below the header. Repositioned
   here to sit to the right of the "Complete the Look" title, at a
   smaller size — the "You may also like" cross-sell row underneath
   (with its product photos) is untouched, since that's already
   working the way you want.

   This uses position:absolute anchored to the popup itself, so it
   doesn't require the header and the product summary to be
   restructured in the markup — just repositions what's already
   there. .lookbook-modal-head needs a small right-padding reserve
   so its own title text doesn't run underneath the repositioned
   product summary; adjust the exact px values below if your
   popup's padding differs from what's assumed here.
   ------------------------------------------------------------ */

.lookbook-modal {
  position: relative; /* establishes the positioning context for the summary below */
}

.lookbook-modal-head {
  padding-right: 150px;
}

.lookbook-main-product {
  position: absolute;
  top: 28px;
  right: 60px; /* clears the close (×) button */
  display: flex;
  align-items: center;
  gap: 10px;
  width: 45%;
  padding: 0;
  margin: 0;
  border: none;
}

.lookbook-main-product-media {
  flex-shrink: 0;
  width: 40px;
}

.lookbook-main-product-media img {
  width: 40px;
  height: 50px;
  object-fit: cover;
  display: block;
}

.lookbook-main-product-info {
  min-width: 0;
}

.lookbook-main-product-name {
  font-size: 12px;
  line-height: 1.3;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lookbook-main-product-variation {
  font-size: 10.5px;
  color: #888;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lookbook-main-product-price {
  font-size: 11.5px;
  margin: 0;
}

@media (max-width: 640px) {
  /* Not enough width for a side-by-side header on small screens —
     falls back to its own row, just kept compact. */
  .lookbook-modal-head {
    padding-right: 0;
  }
  .lookbook-main-product {
    display: none !important;
    /*position: static;
    width: auto;
    margin-top: 14px;*/
  }
}


/* ------------------------------------------------------------
   FIX 5 — Single product: Category / Brand / Tags meta row
   ------------------------------------------------------------
   Currently .posted_in / .product_brand / .tagged_as run together
   inline with no visible label (each span already carries a
   data-label attribute — e.g. data-label="Category" — but nothing
   was rendering it). This stacks each one on its own line and
   shows its label via CSS, using the attribute that's already
   there — no markup change needed.
   ------------------------------------------------------------ */

.product_meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}

.product_meta > span {
  display: block;
}

.product_meta > span::before {
  content: attr(data-label) ":";
  display: inline-block;
  min-width: 70px;
  font-weight: 600;
  color: var(--color-ink, #1c1a17);
  margin-inline-end: 6px; /* logical property — flips correctly in RTL */
}

.product_meta > span a {
  color: var(--color-ink-soft, #4a4640);
  text-decoration: none;
}

.product_meta > span a:hover {
  text-decoration: underline;
}