/**
 * Mercado Mayor — Tienda de vendedor (Dokan store page)
 * ---------------------------------------------------------------------------
 * Styles the single-vendor storefront Dokan renders at /store/{vendedor}/
 * (dokan-lite/templates/store.php, store-header.php, store-sidebar.php).
 * That template ships with none of the theme's chrome — no `.container`,
 * no card treatment, no design tokens — so next to the theme's own shop page
 * (woocommerce/archive-product.php) it read as a different, unbranded site.
 *
 * The product grid itself needed nothing here: store.php calls the exact same
 * wc_get_template_part( 'content', 'product' ) as the main shop loop, so every
 * card already picks up §7 of b2b-marketplace.css for free. What follows is
 * only the frame around that grid:
 *
 *   .dokan-store-wrap                          page shell (§1)
 *     .dokan-store-sidebar#dokan-secondary        left column (§3)
 *     #dokan-primary
 *       .dokan-profile-frame-wrapper               banner/avatar/name (§2)
 *         .profile-frame
 *           .profile-info-img                        banner image
 *           .profile-img > img                        avatar
 *           .store-name                                h1 (already themed
 *                                                        globally — see the
 *                                                        bare `h1` rule in
 *                                                        b2b-marketplace.css)
 *           .dokan-store-info                          address/phone/rating
 *           .store-social                               social icons
 *         .dokan-store-tabs                          Products/Reviews tabs
 *       .seller-items ul.products                  product grid (§4)
 *       .dokan-info                                "no products yet" (§4)
 *
 * §2 also swaps Dokan's own stock banner/avatar (a vendor who hasn't
 * uploaded either yet) for brand-toned placeholders, matched by filename so
 * a real upload is never touched — see the two `:has([src*=…])` rules.
 *
 * Loaded only on dokan_is_store_page(), after b2b-marketplace.css and the
 * marketplace fonts — see functions.php.
 */

/* ========================================================================
   1. PAGE SHELL
   ======================================================================== */
/* Same rhythm as .container (b2b-marketplace.css §10) so the store page lines
   up with the shop page instead of running edge-to-edge. Not just reusing
   `.container` on the template, since store.php doesn't wrap in one and
   changing that means overriding a Dokan template — CSS is the lower-risk,
   update-safe lever, consistent with how the rest of this theme styles Dokan. */
.dokan-store-wrap{
  box-sizing: border-box;
  max-width: var(--mm-container);
  margin-inline: auto;
  padding-inline: var(--mm-gutter);
  padding-block: var(--mm-section-y);
  display: flex;
  align-items: flex-start;
  gap: var(--mm-grid-gap);
}
.dokan-store-wrap *{
  box-sizing: border-box;
}
#dokan-primary.dokan-single-store{
  flex: 1 1 0%;
  min-width: 0; /* lets the product grid shrink instead of overflowing the flex row */
}

/* ========================================================================
   2. STORE HEADER — banner, avatar, name, meta, social, tabs
   ======================================================================== */
.dokan-profile-frame-wrapper{
  margin-bottom: var(--mm-section-y);
}
.profile-frame{
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-lg);
  box-shadow: var(--mm-shadow);
  overflow: hidden;
}
.profile-info-img{
  width: 100%;
  height: clamp(120px, 16vw, 220px);
  object-fit: cover;
  display: block;
}
.profile-info-img.dummy-image{
  background: var(--mm-surface-sunken);
}

.profile-info-summery-wrapper{
  padding: var(--mm-gutter);
}

/* Avatar overlaps the banner in Dokan's default markup; a white ring keeps it
   readable over any banner photo instead of just floating on top of it. */
.profile-img img{
  border-radius: 50%;
  border: 3px solid var(--mm-surface);
  box-shadow: var(--mm-shadow-sm);
  background: var(--mm-surface);
}

/* A vendor who hasn't uploaded a banner/photo yet gets Dokan's own stock
   illustration and "mystery person" — matched by filename so a real upload
   is never touched. Swapped for brand-toned placeholders so an unfinished
   profile reads as "just getting started" rather than "broken install".
   :has() is well past universal support in 2026; no fallback needed. */
/* Dokan's own default layout ("profile-layout-default") overlays the name,
   rating and contact meta directly on top of the banner photo in white text
   — see dokan-lite/assets/css/style.css, `.profile-info-summery-wrapper {
   position:absolute; ... color:#fff }`. That reads fine over a dark, evenly
   toned photo, but any vendor whose banner is light, busy or has a bright
   patch (a product photo, a stock graphic, a plain white background) makes
   that white text unreadable — which is what "no se puede ver la
   información en el perfil" turned out to be: the rating line and, in some
   cases, the store name were never missing, just invisible against their
   own banner. A scrim guarantees the text stays legible no matter what
   photo a vendor uploads. Matches the same technique as .mm-hero__scrim in
   page-hero.css. */
.profile-info-box{
  position: relative;
}
.profile-info-box::after{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(17, 24, 39, .35) 0%,
    rgba(17, 24, 39, .55) 60%,
    rgba(17, 24, 39, .72) 100%
  );
  pointer-events: none;
}
.profile-info-box .profile-info-summery-wrapper{
  position: relative;
  z-index: 1;
}

.profile-info-box:has(img.profile-info-img[src*="default-store-banner.png"]){
  background: linear-gradient(135deg, var(--mm-ink) 0%, #3A3A3A 60%, var(--mm-accent) 165%);
  min-height: clamp(120px, 16vw, 220px);
}
img.profile-info-img[src*="default-store-banner.png"]{
  display: none; /* alt="" already — Dokan prints it as decorative */
}

.profile-img.profile-img-circle:has(img[src*="mystery-person.jpg"]){
  background: linear-gradient(135deg, var(--mm-accent), var(--mm-accent-hover));
}
.profile-img.profile-img-circle:has(img[src*="mystery-person.jpg"]) img{
  opacity: 0; /* kept in the DOM — its alt text is the store name, worth keeping for screen readers */
}
.profile-img.profile-img-circle:has(img[src*="mystery-person.jpg"])::before{
  content: "\f007"; /* fa-user */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mm-surface);
  font-size: 1.5rem;
}
.profile-img.profile-img-circle{
  position: relative; /* anchors the ::before placeholder above */
}

/* The social block prints its wrapper even when the vendor filled in no
   links at all, leaving a blank gap between the meta row and the tabs. */
.store-social-wrapper:has(.store-social:empty){
  display: none;
}

.store-name{
  margin: 0 0 4px;
  font-size: clamp(1.25rem, 1.6vw, 1.625rem);
}

/* Address / phone / email / rating / hours — a horizontal meta row instead of
   Dokan's default stacked list, matching how product meta reads elsewhere. */
.dokan-store-info{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}
.dokan-store-info li{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--mm-text-sm);
  color: var(--mm-ink-muted);
}
.dokan-store-info li i{
  color: var(--mm-accent);
  font-size: var(--mm-text-sm);
}
.dokan-store-info li a{
  color: inherit;
}
.dokan-store-info li a:hover{
  color: var(--mm-accent);
}
.dokan-store-rating i{
  color: #F5B301; /* rating star stays gold — brand red on a star reads as an error state */
}

.store-social{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.store-social li a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--mm-radius-pill);
  border: 1px solid var(--mm-border);
  color: var(--mm-ink-muted);
  transition: border-color var(--mm-dur) var(--mm-ease),
              color var(--mm-dur) var(--mm-ease),
              background var(--mm-dur) var(--mm-ease);
}
.store-social li a:hover{
  color: var(--mm-surface);
  background: var(--mm-accent);
  border-color: var(--mm-accent);
}

/* Products / Reviews tabs */
.dokan-store-tabs{
  border-top: 1px solid var(--mm-border);
  padding: 0 var(--mm-gutter);
}
.dokan-store-tabs .dokan-list-inline{
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dokan-store-tabs .dokan-list-inline li a{
  display: inline-block;
  padding: 12px 6px;
  margin-right: 18px;
  font-size: var(--mm-text-sm);
  font-weight: 600;
  color: var(--mm-ink-muted);
  border-bottom: 2px solid transparent;
}
.dokan-store-tabs .dokan-list-inline li a:hover,
.dokan-store-tabs .dokan-list-inline li.active a,
.dokan-store-tabs .dokan-list-inline li a.active{
  color: var(--mm-ink);
  border-bottom-color: var(--mm-accent);
}

/* ========================================================================
   3. SIDEBAR — category / map / hours / contact widgets
   ======================================================================== */
#dokan-secondary.dokan-store-sidebar{
  flex: 0 0 clamp(240px, 22vw, 300px);
}
.dokan-widget-area .widget.dokan-store-widget{
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius);
  box-shadow: var(--mm-shadow-sm);
  padding: 18px 20px;
  margin: 0 0 var(--mm-grid-gap);
}
.dokan-widget-area .widget.dokan-store-widget .widget-title{
  margin: 0 0 12px;
  font-family: var(--mm-font-ui);
  font-size: var(--mm-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mm-ink);
}

/* Dokan's own CSS sets `overflow-y: scroll` (not `auto`) on the category
   list, so a bare browser scrollbar with its up/down arrow buttons shows up
   even for a single category that needs no scrolling at all — the "stray
   arrows" next to a one-line category list. `auto` only draws a scrollbar
   once there's actually enough categories to need one, and the lower
   max-height keeps a genuinely long list from taking over the whole sidebar. */
.dokan-widget-area .store-cat-stack-dokan.cat-drop-stack ul{
  max-height: 260px;
  overflow-y: auto;
}

/* Map / store-hours embeds shouldn't spill past the card's rounded corners. */
.dokan-widget-area .widget.dokan-store-widget iframe,
.dokan-widget-area .widget.dokan-store-widget img,
.dokan-widget-area .widget.dokan-store-widget canvas{
  max-width: 100%;
  border-radius: var(--mm-radius-sm);
}

/* Contact-seller form inputs/button, matched to the site's form + button
   treatment (b2b-marketplace.css §5/§6) since this widget isn't covered by
   those selectors. */
.dokan-widget-area .dokan-store-contact-form input[type="text"],
.dokan-widget-area .dokan-store-contact-form input[type="email"],
.dokan-widget-area .dokan-store-contact-form textarea{
  width: 100%;
  padding: var(--mm-pad-control-y) var(--mm-pad-control-x);
  margin-bottom: 10px;
  font-size: var(--mm-text-sm);
  font-family: var(--mm-font-ui);
  color: var(--mm-ink);
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-sm);
}
.dokan-widget-area .dokan-store-contact-form button,
.dokan-widget-area .dokan-store-contact-form input[type="submit"]{
  width: 100%;
  padding: var(--mm-pad-btn-y) var(--mm-pad-btn-x);
  font-size: var(--mm-text-sm);
  font-weight: 600;
  color: var(--mm-ink);
  background: var(--mm-accent-pastel);
  border: none;
  border-radius: var(--mm-radius-sm);
  cursor: pointer;
  transition: background var(--mm-dur) var(--mm-ease);
}
.dokan-widget-area .dokan-store-contact-form button:hover,
.dokan-widget-area .dokan-store-contact-form input[type="submit"]:hover{
  background: var(--mm-accent-pastel-hover);
}

/* ========================================================================
   4. PRODUCT GRID & EMPTY STATE
   ======================================================================== */
/* Cards themselves already match the shop page (b2b-marketplace.css §7); this
   is only the top rhythm the shop page gets from its `.row.mt-5` wrapper. */
.seller-items{
  margin-top: 8px;
}

/* "¡No se han encontrado productos de este proveedor!" ships as a bare
   <p class="dokan-info"> — the only empty state a brand-new vendor's store
   has to show, so it earns real treatment instead of stray text. */
.dokan-store-wrap .dokan-info{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  margin: 12px 0 0;
  padding: 48px 24px;
  background: var(--mm-surface-alt);
  border: 1px dashed var(--mm-border-strong);
  border-radius: var(--mm-radius-lg);
  color: var(--mm-ink-muted);
  font-size: var(--mm-text-md);
}
.dokan-store-wrap .dokan-info::before{
  content: "\f07a"; /* fa-shopping-cart */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 1.75rem;
  color: var(--mm-border-strong);
}

/* ========================================================================
   5. RESPONSIVE
   ======================================================================== */
@media (max-width: 991px){
  .dokan-store-wrap{
    flex-direction: column;
  }
  #dokan-secondary.dokan-store-sidebar{
    flex-basis: auto;
    width: 100%;
  }
}