/*
 * Custom style goes here.
 * A template should always ship with an empty custom.css
 */
 
 
 /* ------------------------------------------------------------------
   Phone World — store page tables, responsive fix
   Add to your theme CSS, then purge PrestaShop cache + LiteSpeed.

   Scoped two ways so it works whether the page content still has the
   <div class="pw-store"> wrapper (HTML paste) or not (Word paste):
     .pw-store   — the wrapper, if present
     .page-cms   — PrestaShop's CMS page container
   ------------------------------------------------------------------ */

.pw-store table,
.page-cms table {
  width: 100% !important;
  max-width: 100%;
  table-layout: fixed;        /* stop columns expanding past the viewport */
  border-collapse: collapse;
  margin-bottom: 1.4em;
}

.pw-store table th,
.pw-store table td,
.page-cms table th,
.page-cms table td {
  vertical-align: top;
  word-wrap: break-word;
  overflow-wrap: anywhere;    /* long words break instead of forcing overflow */
  hyphens: auto;
}

/* Price table: give the repair name more room than the two data columns. */
.pw-store table:not(.pw-hours) th:nth-child(1),
.pw-store table:not(.pw-hours) td:nth-child(1),
.page-cms table:not(.pw-hours) th:nth-child(1),
.page-cms table:not(.pw-hours) td:nth-child(1) {
  width: 42%;
  text-align: left;
}

.pw-store table:not(.pw-hours) th:nth-child(2),
.pw-store table:not(.pw-hours) td:nth-child(2),
.pw-store table:not(.pw-hours) th:nth-child(3),
.pw-store table:not(.pw-hours) td:nth-child(3),
.page-cms table:not(.pw-hours) th:nth-child(2),
.page-cms table:not(.pw-hours) td:nth-child(2),
.page-cms table:not(.pw-hours) th:nth-child(3),
.page-cms table:not(.pw-hours) td:nth-child(3) {
  width: 29%;
}

/* Opening hours: two columns, label narrower than the default 45%. */
.pw-store table.pw-hours th,
.page-cms table.pw-hours th {
  width: 50% !important;
}

/* ---- Phones ---- */
@media (max-width: 600px) {

  .pw-store table th,
  .pw-store table td,
  .page-cms table th,
  .page-cms table td {
    padding: .5em .55em !important;   /* beats the inline .6em .9em */
    font-size: .875rem;
    line-height: 1.4;
  }

  /* Repair name column needs the space more than the numbers do. */
  .pw-store table:not(.pw-hours) th:nth-child(1),
  .pw-store table:not(.pw-hours) td:nth-child(1),
  .page-cms table:not(.pw-hours) th:nth-child(1),
  .page-cms table:not(.pw-hours) td:nth-child(1) {
    width: 40%;
  }

  .pw-store table.pw-hours th,
  .page-cms table.pw-hours th {
    width: 55% !important;
  }
}

/* ---- Very narrow phones: stack the price table into rows ---- */
@media (max-width: 400px) {

  .pw-store table:not(.pw-hours),
  .page-cms table:not(.pw-hours) {
    display: block;
  }

  .pw-store table:not(.pw-hours) thead,
  .page-cms table:not(.pw-hours) thead {
    display: none;                    /* headers repeat as labels below */
  }

  .pw-store table:not(.pw-hours) tbody,
  .pw-store table:not(.pw-hours) tr,
  .page-cms table:not(.pw-hours) tbody,
  .page-cms table:not(.pw-hours) tr {
    display: block;
    width: 100%;
  }

  .pw-store table:not(.pw-hours) tr,
  .page-cms table:not(.pw-hours) tr {
    border: 1px solid #e3e3e3;
    border-radius: 3px;
    margin-bottom: .7em;
    padding: .3em .1em;
  }

  .pw-store table:not(.pw-hours) td,
  .page-cms table:not(.pw-hours) td {
    display: block;
    width: 100% !important;
    border-bottom: none !important;
    padding: .25em .8em !important;
  }

  /* First cell in each row is the repair name — make it the heading. */
  .pw-store table:not(.pw-hours) td:nth-child(1),
  .page-cms table:not(.pw-hours) td:nth-child(1) {
    font-weight: 700;
    color: #2B2B2B;
    font-size: .95rem;
  }

  .pw-store table:not(.pw-hours) td:nth-child(2),
  .page-cms table:not(.pw-hours) td:nth-child(2) {
    color: #B02123;
    font-weight: 600;
  }
}

/* Map embed, if you paste one in. */
.pw-store .pw-map iframe,
.page-cms .pw-map iframe {
  width: 100%;
  min-height: 300px;
  border: 0;
}