/*
  accessories.css
  Shared styling for: T-Nuts + Brackets + Joining Plates + Frame-to-Floor + Finishing.
  Layout contract is provided by AccessoryShell.js.

  Notes:
  - T-nuts may add extra row-span behavior via tnut.css (kept minimal).
  - Mobile table behavior (column hiding) will be added in later steps.
*/

/* ---------- Desktop layout (shared) ---------- */

.v2-tool--accessories {
  width: 100%;
}

/* Facet row is full-width and sits above the two-column layout */
.v2-accessories__facet-row {
  margin: 14px 0 12px;
}

/* Two-column layout container (do not change child expectations) */
.v2-accessories__desktop-layout {
  display: grid;
  grid-template-columns: 0.6fr 1fr;
  gap: 18px;
}

.v2-accessories__desktop-left,
.v2-accessories__desktop-right {
  min-width: 0; /* prevents table/media from forcing overflow */
}

/* ---------- Media section ---------- */


:is(.v2-tool--accessories, .v2-tool--tnuts) .v2-media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

:is(.v2-tool--accessories, .v2-tool--tnuts) .v2-media-grid img,
:is(.v2-tool--accessories, .v2-tool--tnuts) .v2-media-grid picture,
:is(.v2-tool--accessories, .v2-tool--tnuts) .v2-media-grid video {
  max-width: 100%;
}

/* If wrapper injects fixed tiles, keep them contained */
:is(.v2-tool--accessories, .v2-tool--tnuts) .v2-media-grid > * {
  min-width: 0;
}

/* Shared media tiles (grid + carousel items) */
:is(.v2-tool--accessories, .v2-tool--tnuts) :is(.v2-media-grid, .v2-carousel) a {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  background: #f5f5f5;
  position: relative;
  outline: none;
}

/* Make tiles feel tappable/clickable */
:is(.v2-tool--accessories, .v2-tool--tnuts) :is(.v2-media-grid, .v2-carousel) a:hover {
  box-shadow: 0 0 0 2px rgba(0, 76, 147, 0.18);
}

:is(.v2-tool--accessories, .v2-tool--tnuts) :is(.v2-media-grid, .v2-carousel) a:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 76, 147, 0.35);
}

/* Ensure a consistent square-ish tile aspect without JS */
.v2-tool--accessories .v2-media-grid a::before {
  content: "";
  display: block;
  padding-top: 100%;
}

/* Carousel items also need an intrinsic height (images are positioned absolutely) */
.v2-tool--accessories .v2-carousel a::before {
  content: "";
  display: block;
  padding-top: 100%;
}

/* Images/videos fill the tile */
.v2-tool--accessories .v2-media-grid a > img,
.v2-tool--accessories .v2-media-grid a > picture,
.v2-tool--accessories .v2-media-grid a > video,
.v2-tool--accessories .v2-carousel a > img,
.v2-tool--accessories .v2-carousel a > picture,
.v2-tool--accessories .v2-carousel a > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Carousel sizing (mobile first) */
.v2-tool--accessories .v2-carousel {
  width: 100%;
}

/* Basic carousel mechanics (keeps mobile functional even if global CSS changes) */
.v2-tool--accessories .v2-carousel__track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px; /* space for iOS scroll bar */
}

.v2-tool--accessories .v2-carousel__item {
  flex: 0 0 45%;
  scroll-snap-align: start;
}

@media (min-width: 480px) and (max-width: 991px) {
  .v2-tool--accessories .v2-carousel__item {
    flex-basis: 40%;
  }
}

/* If your carousel implementation relies on a min-height, keep it modest */
@media (max-width: 991px) {
  .v2-tool--accessories .v2-carousel {
    min-height: 160px;
  }
}

/* ---------- Description section ---------- */

.v2-tool--accessories [data-role$="-description-body"] {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Shared description body sizing (matches previous T-nut behavior) */
@media (min-width: 992px) {
  .v2-tool--accessories [data-role$="-description-body"] {
    max-height: 550px;
    overflow: auto;
  }
}

/* Prevent injected description HTML from overflowing the card width */
.v2-tool--accessories [data-role$="-description-body"] img,
.v2-tool--accessories [data-role$="-description-body"] video,
.v2-tool--accessories [data-role$="-description-body"] iframe {
  max-width: 100%;
}

/* Responsive embeds (YouTube/Vimeo iframes are a common overflow + distortion case) */
.v2-tool--accessories [data-role$="-description-body"] iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

/* Keep native video tags responsive without forcing odd heights */
.v2-tool--accessories [data-role$="-description-body"] video {
  width: 100%;
  height: auto;
}

/* Images should keep their natural aspect */
.v2-tool--accessories [data-role$="-description-body"] img {
  height: auto;
}

/* Tables are a very common overflow cause in Ecwid descriptions */
.v2-tool--accessories [data-role$="-description-body"] table {
  max-width: 100%;
  width: 100%;
}

/* Long unbroken text / code / URLs */
.v2-tool--accessories [data-role$="-description-body"] pre,
.v2-tool--accessories [data-role$="-description-body"] code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- Order table ---------- */

.v2-accessories__order-table-wrapper {
  width: 100%;
}

.v2-accessories__order-table {
  width: 100%;
  border-collapse: collapse;
}

/* Slightly tighten table cell spacing for dense catalog tables */
.v2-accessories__order-table th,
.v2-accessories__order-table td {
  vertical-align: middle;
}

/* ---------- Shared accessory table styling ---------- */

/* Product-name (first column) is clickable in all accessory modules */
.v2-tool--accessories .v2-accessory__cell-product,
.v2-tool--accessories td[data-role$="-product-cell"] {
  cursor: pointer;
}



.v2-tool--accessories [data-role$="-order-tbody"] tr:focus-within td {
  background-color: rgba(0, 76, 147, 0.08);
}

/* Stock state (generalized; safe for all accessories) */
.v2-tool--accessories [data-stock="out"] {
  color: #b94242;
}

/* MOQ error spacing (shared) */
.v2-tool--accessories .v2-accessory__moq-error {
  margin-top: 4px;
}

/* Placeholder / empty-state text (shared) */
.v2-tool--accessories .v2-tool__placeholder {
  font-size: 13px;
  color: #555;
}

/* Table sizing + fixed layout (stable column widths across modules) */
.v2-accessories__order-table {
  table-layout: fixed;
}

/* Cell padding + baseline typography */
.v2-accessories__order-table th,
.v2-accessories__order-table td {
  padding: 10px 8px;
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
}

/* Column widths (shared across T-Nuts + accessories)
   Note: Size column may be hidden by JS via setSizeColumnVisible(). */
.v2-accessories__col-product { width: 24%; }
.v2-accessories__col-size    { width: 8%; }
.v2-accessories__col-tier    { width: 26%; }
.v2-accessories__col-qty     { width: 10%; }
.v2-accessories__col-unit    { width: 11%; }
.v2-accessories__col-total   { width: 11%; }
.v2-accessories__col-action  { width: 10%; }

/* Keep numeric columns from wrapping awkwardly */
.v2-accessory__cell-tier,
.v2-accessory__cell-unit,
.v2-accessory__cell-total {
  white-space: nowrap;
}

/* Qty input (shared) */
.v2-accessory__cell-qty input {
  width: 76px;
  max-width: 100%;
  text-align: center;
}

/* Quick Add button (shared) */
.v2-accessory__cell-action button,
.v2-accessory__cell-action .v2-btn {
  white-space: nowrap;
}

/* Prevent long product names from breaking the layout */
.v2-accessory__cell-product {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---------- Product thumbnail (shared) ---------- */

/* Keep table semantics intact (rowspan-safe). Center content without changing td display. */
:is(.v2-tool--accessories, .v2-tool--tnuts) .v2-accessory__cell-product {
  text-align: center;
}

:is(.v2-tool--accessories, .v2-tool--tnuts) .v2-accessory__product-name {
  display: block;
  text-align: center;
}

/* Thumb wrapper (centered) */
:is(.v2-tool--accessories, .v2-tool--tnuts) .v2-accessory__thumb {
  width: 56px;
  height: 56px;
  margin: 8px auto 0;
  display: grid;
  place-items: center;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f5f5;
}

/* Thumb image */
:is(.v2-tool--accessories, .v2-tool--tnuts) .v2-accessory__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  :is(.v2-tool--accessories, .v2-tool--tnuts) .v2-accessory__thumb {
    width: 44px;
    height: 44px;
  }
}

/* Header styling */
.v2-accessories__order-table thead th {
  font-weight: 600;
  text-align: center;
}

/* Body rows */
.v2-accessories__order-table tbody tr {
  border-top: 1px solid var(--v2-border-soft, #e6e6e6);
}

/* Zebra striping (light, neutral – works for all accessories) */
.v2-accessories__order-table tbody tr:nth-child(even) {
  background-color: var(--v2-row-alt, #fafafa);
}

/* Hover affordance for rows */
.v2-accessories__order-table tbody tr:hover {
  background-color: var(--v2-row-hover, #f2f6fb);
}

/* Numeric alignment */
.v2-accessory__cell-tier,
.v2-accessory__cell-unit,
.v2-accessory__cell-total {
  text-align: right;
}

/* Qty cell alignment */
.v2-accessory__cell-qty {
  text-align: center;
}

/* Action cell alignment */
.v2-accessory__cell-action {
  text-align: center;
}

/* Empty state row */
.v2-accessories__order-table [data-role$="-order-empty-state"] {
  text-align: center;
  color: var(--v2-text-muted, #777);
  padding: 16px 8px;
}

/* ---------- Summary ---------- */

/* Keep the money button full width inside the summary card footer */
.v2-tool--accessories .v2-card__footer .v2-btn--money-button {
  width: 100%;
  margin-top: 8px;
}

/* Summary table: keep column widths stable while values update */
.v2-tool--accessories .v2-accessories__summary-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.v2-tool--accessories .v2-accessories__summary-table th,
.v2-tool--accessories .v2-accessories__summary-table td {
  width: 33.333%;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Labels vs values alignment */
.v2-tool--accessories .v2-accessories__summary-table thead th {
  text-align: left;
}

.v2-tool--accessories .v2-accessories__summary-table tbody td {
  text-align: right;
}

/* ---------- Responsive breakpoint: stack on smaller screens (desktop -> mobile shell) ---------- */

@media (max-width: 991px) {
  .v2-accessories__desktop-layout {
    grid-template-columns: 1fr;
  }
}


/* ---------- Mobile table (no horizontal scroll) ---------- */

@media (max-width: 768px) {
  /* Give the table a cleaner mobile density */
  .v2-accessories__order-table th,
  .v2-accessories__order-table td {
    padding: 8px 6px;
  }

  /* Hide non-essential headers */
  .v2-accessories__col-tier,
  .v2-accessories__col-total,
  .v2-accessories__col-action {
    display: none;
  }

  /* Hide non-essential body cells (rendered by AccessoryToolCore) */
  .v2-accessory__cell-tier,
  .v2-accessory__cell-total,
  .v2-accessory__cell-action {
    display: none;
  }

  /* Keep Qty input compact */
  .v2-accessory__cell-qty input {
    width: 64px;
  }

  /* Encourage the product name to wrap rather than force overflow */
  .v2-accessory__cell-product {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

}


/* ---------- Mobile stacking order (shared) ---------- */

@media (max-width: 991px) {
  /*
    Force a consistent vertical order for all accessory modules:
    Facet (top) -> Media -> Order Table -> Summary -> Description

    We avoid tnuts/brackets class names and use stable data-role suffixes.
  */

  /* Make the layout container a simple column stack on mobile */
  :is(.v2-tool--accessories, .v2-tool--tnuts) .v2-accessories__desktop-layout {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  /*
    Flatten the two desktop columns so the individual cards can be ordered.
    Without this, the left column (media+description) appears before the right column (table+summary).
  */
  :is(.v2-tool--accessories, .v2-tool--tnuts) :is(.v2-accessories__desktop-left, .v2-accessories__desktop-right) {
    display: contents;
  }

  /* Ensure the facet row stays first */
  .v2-tool--accessories .v2-accessories__facet-row {
    order: 0;
  }

  /* Cards ordering */
  .v2-tool--accessories [data-role$="-media-card"],
  .v2-tool--tnuts [data-role$="-media-card"] {
    order: 1;
  }

  .v2-tool--accessories [data-role$="-table-card"],
  .v2-tool--tnuts [data-role$="-table-card"] {
    order: 2;
  }

  .v2-tool--accessories [data-role$="-summary-card"],
  .v2-tool--tnuts [data-role$="-summary-card"] {
    order: 3;
  }

  .v2-tool--accessories [data-role$="-description-card"],
  .v2-tool--tnuts [data-role$="-description-card"] {
    order: 4;
  }

  /* Mobile media behavior: show carousel, hide grid by default */
  :is(.v2-tool--accessories, .v2-tool--tnuts) .v2-media-grid {
    display: none !important;
  }

  :is(.v2-tool--accessories, .v2-tool--tnuts) .v2-carousel {
    display: block !important;
  }
}

/* Desktop media behavior: show grid, hide carousel (explicit gate) */
@media (min-width: 992px) {
  :is(.v2-tool--accessories, .v2-tool--tnuts) .v2-media-grid {
    display: grid !important;
  }

  :is(.v2-tool--accessories, .v2-tool--tnuts) .v2-carousel {
    display: none !important;
  }
}
/* Stock / MOQ messaging (shared across all accessories) */
.v2-tool--accessories .v2-accessory__cell-total--oos,
.v2-tool--accessories .v2-accessory__cell-total--moq {
  color: #f43c36;
  font-weight: 600;
}