/* ==========================================================================
   SanoKala - footer and product-tab refinements
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Footer social icons

   Blocksy's own socials element was rendering its stock Facebook / X /
   Instagram set with href="#" - three dead links. The real four now live in
   the brand widget, which is markup we control, so they can be styled here.
   -------------------------------------------------------------------------- */

.sk-fsocial {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.sk-fsocial__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--sk-white, #fff);
  border: 1px solid var(--sk-line, #EFEFF2);
  color: var(--sk-ink, #0F1117);
  transition: color 160ms ease-out, border-color 160ms ease-out, transform 160ms ease-out;
}

.sk-fsocial__link:hover,
.sk-fsocial__link:focus-visible {
  color: var(--sk-rose, #E8154C);
  border-color: var(--sk-rose, #E8154C);
  transform: translateY(-2px);
}

/* WhatsApp is the one people actually order on, so it reads as an action
   rather than one more grey badge. */
.sk-fsocial__link[data-net="whatsapp"] {
  background: var(--sk-rose, #E8154C);
  border-color: var(--sk-rose, #E8154C);
  color: #fff;
}

.sk-fsocial__link[data-net="whatsapp"]:hover,
.sk-fsocial__link[data-net="whatsapp"]:focus-visible {
  background: var(--sk-rose-deep, #C00F3E);
  border-color: var(--sk-rose-deep, #C00F3E);
  color: #fff;
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   2. Footer columns - one heading style, one rhythm

   The four columns were each carrying their own heading weight and their own
   link spacing, which is what made the row look untidy.
   -------------------------------------------------------------------------- */

.ct-footer [data-column] .widget-title,
.ct-footer .widget-title {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--sk-ink, #0F1117);
}

.ct-footer .widget ul,
.ct-footer .menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ct-footer .widget ul li,
.ct-footer .menu li {
  margin: 0 0 10px;
  padding: 0;
}

.ct-footer .widget ul li:last-child,
.ct-footer .menu li:last-child { margin-bottom: 0; }

.ct-footer .widget ul li a,
.ct-footer .menu li a {
  font-size: 15px;
  line-height: 1.4;
  color: var(--sk-body, #5A5A63);
  text-decoration: none;
  transition: color 160ms ease-out;
}

.ct-footer .widget ul li a:hover,
.ct-footer .menu li a:hover { color: var(--sk-rose, #E8154C); }

/* Brand column */
.sk-fbrand__tag {
  margin: 12px 0 8px;
  font-weight: 700;
  color: var(--sk-ink, #0F1117);
}

.sk-fbrand__desc {
  margin: 0;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--sk-body, #5A5A63);
}

/* Talk to us column */
.sk-ftalk p {
  margin: 0 0 16px;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--sk-body, #5A5A63);
}

.sk-fwa {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border-radius: var(--sk-r-pill, 999px);
  background: var(--sk-rose, #E8154C);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background 160ms ease-out;
}

.sk-fwa:hover,
.sk-fwa:focus-visible {
  background: var(--sk-rose-deep, #C00F3E);
  color: #fff;
}

/* The email sat as loose pink text under the WhatsApp pill, on a different
   baseline and a different shape, so the two never read as a pair. It is
   now the quiet twin of the button: same height, same pill, outlined
   rather than filled, because WhatsApp is the faster route of the two. */
.sk-fmail { margin: 12px 0 0; }

.sk-fmail a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  max-width: 100%;
  padding: 11px 20px;
  border: 1px solid var(--sk-line, #EFEFF2);
  border-radius: var(--sk-r-pill, 999px);
  background: var(--sk-white, #fff);
  color: var(--sk-ink, #0F1117);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: border-color 160ms ease-out, color 160ms ease-out;
}

.sk-fmail a:hover,
.sk-fmail a:focus-visible {
  border-color: var(--sk-rose, #E8154C);
  color: var(--sk-rose, #E8154C);
}

/* Both contact actions share one width and one rhythm, so the column reads
   as two stacked buttons rather than a button and some stray text. The gap
   is owned by the column, not by either button's margin - paragraph margins
   were collapsing and leaving the two pills touching. */
.sk-ftalk {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.sk-ftalk > * { margin: 0 !important; }

.sk-ftalk .sk-fwa,
.sk-ftalk .sk-fmail a {
  width: 100%;
  max-width: 300px;
  justify-content: center;
  text-align: center;
}

.sk-ftalk .sk-fmail { width: 100%; max-width: 300px; }

@media (max-width: 768px) {
  .sk-fbrand__desc,
  .sk-ftalk p { max-width: none; }

  .ct-footer [data-column] { margin-bottom: 28px; }
}

/* --------------------------------------------------------------------------
   3. Product page - description tabs

   The panel was running the full page width, which on a desktop gives lines
   of 130+ characters. Comfortable reading is somewhere near 70.
   -------------------------------------------------------------------------- */

.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding-left: 0;
  text-align: left;
}

/* The panel now carries Blocksy's own is-width-constrained class (added in
   sanokala-account.php), so it sits inside the container exactly like the
   tab titles above it. The reading width goes on the text instead - the
   panel itself has to stay full container width or the alignment breaks. */
.woocommerce div.product .woocommerce-tabs .panel {
  max-width: none;
  margin-top: 26px;
}

.woocommerce div.product .woocommerce-tabs .panel > p,
.woocommerce div.product .woocommerce-tabs .panel > ul,
.woocommerce div.product .woocommerce-tabs .panel > ol,
.woocommerce div.product .woocommerce-tabs .panel > h2,
.woocommerce div.product .woocommerce-tabs .panel > h3 {
  max-width: 68ch;
}

.woocommerce div.product .woocommerce-tabs .panel > h2:first-child {
  /* WooCommerce repeats the product name above the description; the tab
     already says what this is. */
  display: none;
}

.woocommerce div.product .woocommerce-tabs .panel p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--sk-body, #5A5A63);
}

.woocommerce div.product .woocommerce-tabs .panel p:last-child { margin-bottom: 0; }

.woocommerce div.product .woocommerce-tabs table.shop_attributes th {
  color: var(--sk-ink, #0F1117);
  font-weight: 600;
}

@media (max-width: 768px) {
  .woocommerce div.product .woocommerce-tabs .panel { max-width: none; }

  .woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   4. Wishlist page

   The plugin's stock page leads with "Default wishlist" and a bulk-actions
   row, which is admin furniture rather than something a shopper needs.
   -------------------------------------------------------------------------- */

.tinv-wishlist .tinv-header,
.tinv-wishlist .tinvwl-table-manage-list .product-checkbox,
.tinv-wishlist th.product-checkbox,
.tinv-wishlist .tinvwl-to-right.look_in,
.tinv-wishlist .tinv-wishlist-clear { display: none; }

.tinv-wishlist table.tinvwl-table-manage-list { margin-top: 8px; }

.tinv-wishlist .product-thumbnail img {
  border-radius: var(--sk-r-card, 14px);
}

.tinv-wishlist .tinvwl-buttons-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
}

.tinv-wishlist .social-buttons { margin-top: 26px; }

@media (max-width: 768px) {
  .tinv-wishlist .tinvwl-buttons-group { justify-content: stretch; }
  .tinv-wishlist .tinvwl-buttons-group button { flex: 1 1 auto; }
}

/* ============================================================
   5. HEADER WISHLIST TOOL
   The wishlist now sits in the header action row beside Account
   and Cart rather than in the navigation, so the three actions
   read as one group. Cart stays the only pill - it is the
   primary action - and Account and Wishlist stay quiet beside it.
   ============================================================ */

.sk-headtool--wish{ color: var(--sk-body); font-weight: 500; }
.sk-headtool--wish:hover{ color: var(--sk-rose); }
.sk-headtool--wish:hover .sk-headtool__icon{ transform: scale(1.06); }
.sk-headtool--wish .sk-headtool__icon{ transition: transform var(--sk-ease, 180ms ease-out); }

/* Both badges: empty means nothing saved and nothing in the cart,
   so the bubble disappears instead of sitting there reading "0".
   The white ring keeps it off the cart pill's border. */
.sk-headtool__count:empty{ display: none; }
.sk-headtool__count{ box-shadow: 0 0 0 2px var(--sk-cream, #FEF9F2); }
.sk-headtool--cart .sk-headtool__count{ box-shadow: 0 0 0 2px var(--sk-white, #fff); }

/* The three actions share one baseline and one height. */
.sk-headtools{ gap: 2px; }
.sk-headtool{ justify-content: center; }
.sk-headtool--cart{ margin-inline-start: 6px; padding-inline: 16px 18px; }

/* Below the label breakpoint the row is icons only, so equalise
   them into squares - otherwise the cart pill sat wider than the
   two beside it and the group looked off-centre. */
@media (max-width: 1023.98px){
  .sk-headtool{ width: 44px; padding-inline: 0; }
  .sk-headtool--cart{ width: 46px; margin-inline-start: 4px; padding-inline: 0; }
}

/* On the narrowest phones drop Account from the row - it is still
   in the drawer - so brand, search, wishlist and cart keep their
   spacing instead of crowding. */
@media (max-width: 419.98px){
  .sk-headtool--account{ display: none; }
}

/* Drawer wishlist row. */
.sk-drawer__count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-inline-start: 8px;
  padding: 0 6px;
  border-radius: var(--sk-r-pill, 999px);
  background: var(--sk-rose, #E8154C);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
}
.sk-drawer__count:empty{ display: none; }

/* The plugin still prints its own counter markup inside product
   cards and the wishlist page; keep it from inheriting the header
   badge treatment. */
.woocommerce span.wishlist_products_counter_number{ box-shadow: none; }

/* ============================================================
   6. CATEGORY ROW WIDTH
   The row was a fixed eight-column grid from when eight
   categories existed. Now that only the ones holding toys are
   shown, four items sat in the first four columns and left half
   the row empty. Flexing them means whatever number there is
   spreads evenly across the full width, and it keeps working as
   the range grows.
   ============================================================ */

@media (min-width: 690px){
  .sk-cats{
    display: flex;
    flex-wrap: wrap;
    grid-template-columns: none;
    gap: 18px var(--sk-gap, 18px);
  }
  .sk-cats .sk-cat{
    flex: 1 1 0;
    min-width: 104px;
  }
}